body{ /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; background-size: 6px 6px !important; */ /* background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important; */ background-color: #fff !important; } /*Icons*/ .icon-info{ margin-left: 3px; } .icon-info::before{ color: #fff; } /*Bootstrap*/ .controllerSidebar .nav-tabs{ border-bottom-width: 2px; } .controllerSidebar .nav-tabs .nav-link{ padding: 12px 0 !important; text-align: center; } .controllerSidebar .nav-tabs .nav-link::before{ content: ""; } .editNavbar .nav-tabs{ border-bottom-width: 0; } .editNavbar .nav-tabs .nav-link{ padding: 12px 28px !important; text-align: center; } .editNavbar .nav-tabs .nav-link::before{ content: ""; } .editNavbar .nav-link{ text-transform: initial !important; } .editNavbar .navbar, .editNavbar .navbar{ padding: 0; } /*Header*/ header{ position: relative; height: 60px; background-color: #1B3E6F; /* box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); */ z-index: 200000000 !important; } .logo{ float: left; width: 50px; height: 60px; background: url(/assets/img/logo-icon.svg) center center #fff no-repeat; } /**Bread Crumb**/ .breadcrumb{ padding: 9px 20px; background: transparent; line-height: 40px; } .breadcrumb a, .breadcrumb a:hover{ color: #fff; } .breadcrumb .breadcrumb-item{ font-size: 12px; font-weight: bold; } .breadcrumb .breadcrumb-item:first-child{ font-size: 16px; } .breadcrumb-item + .breadcrumb-item::before{ color: #fff; } .breadcrumb .breadcrumb-item.active p{ display: inline; padding: 4px 10px; background: #F4F9FE; border-radius: 10px; color: #1B3E6F; font-size: 10px; } .template-list.active { display: inline; padding: 4px 10px; background: #F4F9FE; border-radius: 10px; color: #1B3E6F; font-size: 10px; } .designer-breadcrumb .fa-angle-right::before { color: #fff; line-height: 38px; } .sidebar-container{ height: calc(100vh - 60px) !important; } /**Topology Actions**/ .topology-actions{ margin: 0; height: 60px; } .topology-actions > li{ height: 59px; display: inline-block; padding: 0 20px; } .topology-actions > li:first-child{ border-right: solid 1px #16396A; } .topology-actions .btn-group{ margin-top: 11px; } .btn-group > .btn:not(:first-child){ margin-left: 0; } .btn-topology-action, .btn-topology-action:hover{ margin: 0 6px; padding: 3px 8px; color: #fff; border-radius: 50%; border: solid .5px #fff; } .btn-topology-action:last-child{ margin-right: 0; } .btn-topology-action .fa{ /* width: 16px; height: 16px; */ text-align: center; font-size: 14px; } .topology-actions .dropdown-text, .dropdown-toggle:hover ~ .dropdown-text, .dropdown-toggle:focus ~ .dropdown-text{ top: 7px; text-indent: 15px; background: #1273EB !important; border-radius: 15px !important; border: 0; box-shadow: none; color: #fff !important; font-weight: bold; font-size: 13px; } .topology-actions .dropdown-text::after{ right: 15px; top: 13px; border-style: solid !important; border-width: 5px 5px 0 5px !important; border-color: #fff transparent transparent transparent; } .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{ top: 13px; border-style: solid !important; border-width: 0 5px 5px 5px !important; border-color: transparent transparent #fff transparent; } .topology-actions .dropdown-content:hover, .topology-actions .dropdown-toggle:focus ~ .dropdown-content{ padding: 12px 0; text-indent: 0; background: #fff; border: 0; border-radius: 2px; box-shadow: 0 2px 6px rgba(47, 83, 151, .15) } .topology-actions .dropdown-content a{ padding: 0 20px 0 15px; color: #1B3E6F; font-size: 13px; } .topology-actions .dropdown-content a:hover{ background: #F4F9FE; text-decoration: none; } .package-info-btn{ padding: 0 !important; } .package-info h3{ font-size: 13px; font-weight: bold; } .package-info h3 span{ font-size: 11px; } .package-info .badge{ margin-right: 6px; padding: 4px 10px; background: #E0E8F2; border-radius: 12px; color: #1B3E6F; font-size: 11px; font-weight: normal; } .creator-pic{ border-radius: 50%; width: 30px; height: 30px; } .package-info p{ margin-bottom: 0; font-size: 11px; line-height: 20px; } .save-blueprint i{ margin-right: 7px; font-size: 14px; } .save-blueprint i.icon-save-sm{ font-size: 10px; } .save-blueprint li:hover{ cursor: pointer; } /*Rotated Text*/ button.rotate{ position: absolute; margin-top: 1px; padding: 0; background: transparent; border: 0; } .rotate{ vertical-align: bottom; /* text-align: center; */ } .rotate span{ display: inline-table !important; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl !important; transform: rotate(180deg); white-space: nowrap; background: #1B3E6F; padding: 15px 12px; font-weight: bold; font-size: 12px; color:#fff; /* border-bottom-left-radius: 2px; */ border-top-left-radius: 2px; } .rotate i{ margin-right: 3px; margin-top: 9px; font-size: 15px; } .rotate span:first-child{ margin-bottom: 0; } .rotate a:hover{ text-decoration: none; } /*PAUSE*/ /* #board-paper svg{ top: 30px; left: 0; height: 95%; } */ /* .ng-sidebar__content.ng-sidebar__content--animate{ position: relative; top: 200px; padding-top: 70px !important; } */ .functionsList tspan{ /* width:30px !important; */ font: normal 13px sans-serif; fill: #1B3E6F !important; overflow-wrap: break-word; } #board-paper #name tspan{ /* fill: green; */ text-align: center; } tspan#type{ text-align: center; } /*ACTIONS & COMPONENTS MENU*/ .input-search-controller{ height: 40px; padding-left: 36px; background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat; background-size: 4.5%; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; color: #1B3E6F; font-size: 13px; } .input-search-controller::placeholder{ color: #D0D7E4; font-size: 12px; } .input-search-controller:focus{ background-color: #fff !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); text-shadow: none; border-color: #DEE8F3; } .functionsList p{ margin-bottom: 0; padding-left: 30px; background-position: left center; background-repeat: no-repeat; } p.compType-1{ background-image: url(/assets/img/icon-comType1-sm.svg); } p.compType-2{ background-image: url(/assets/img/icon-comType2-sm.svg); } p.compType-3{ background-image: url(/assets/img/icon-comType3-sm.svg); } p.compType-4{ background-image: url(/assets/img/icon-comType4-sm.svg); } /*Actions Wrapper*/ .actions-wrapper{ position: absolute; width: 100%; top: 0; } .actions-container{ width: 92%; margin: 0 auto; background: red; } .actionSubList{ margin:0 0 0 4px; /* indentation */ padding:0; list-style:none; position:relative; } .actionSubList:before { content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid #C1CDDD; } .actionSubList li{ margin: 0; padding: 0 1.5em; /* indentation + .5em */ line-height: 32px; position: relative; } .actionSubList li::before{ content: ""; display: block; width: 10px; /* same with indentation */ height: 0; border-top: 1px solid #C1CDDD; margin-top: -1px; /* border top width */ position: absolute; top: 16px; /* (line-height/2) */ left: 0; } .actionSubList li:last-child:before { background: #F4F9FE; /* same with body background */ height: auto; top: 16px; /* (line-height/2) */ bottom: 0; } .controllerSidebar{ width: 320px; padding: 0; overflow: hidden !important; background: #F4F9FE; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .10); } .helpBox{ position : absolute; bottom : 0; width: 100%; height : 40px; margin-top : 24px; padding-left: 20px; background: #fff; border-top: solid 1px #C1CDDD; font-size: 13px; line-height: 40px; color: #0070F4; } .helpBox .icon-info{ margin-left: 0; margin-right: 10px; } .helpBox .icon-info::before{ color: #0070F4 !important; } .controllerSidebar .row, .controllerSidebar .col{ margin: 0; padding: 0; } .controllerSidebar h1{ margin-bottom: 15px; padding: 12px 0 12px 12px; background: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #C3CDDB; } .controllerSidebar b{ margin-left: 12px; margin-bottom: 9px; font-size: 12px; color: #C3CDDB; } /*PAUSE*/ /* .ng-sidebar__content .joint-paper > svg{ top: 80px; left: 30px; } */ .functionsList .joint-paper{ width: 100% !important; height: 72vh !important; margin: 0 !important; } .actionBtns .btn{ margin: 0px 15px 16px -90px; /* padding: 9px 20px; */ border-radius: 0px; font-size: 14px; font-weight: bold; /* outline: 0 !important; */ float: left; } .actionsList li:hover, .actionsList li label:hover{ cursor: pointer; } .new-action, .new-action:hover{ margin: 9px 0 4px 3px; padding: 6px; font-size: 13px; font-weight: bold; color: #1B3E6F; } .new-action:hover{ background: #D7E7F9; } .functionsList{ height: calc(100vh - 200px); overflow-y: auto; } .custom-control.custom-checkbox:hover, .custom-control-label:hover{ cursor: pointer; } .custom-control{ height: 40px; font-size: 14px; line-height: 40px; } .custom-control:hover{ background-color: white; } .actionsList{ height: 65vh !important; overflow-y: auto; } .actionsList ul{ padding-left: 0; } .actionsList li{ list-style: none; } .functionsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; background: #fff; box-shadow: 0 2px 6px rgba(47, 83, 151, .15); border-radius: 2px; } .functionsList .joint-paper{ background: transparent !important; } .actionsList .custom-control-label{ width: 100%; padding: 6px; vertical-align: unset; color: #1B3E6F; font-size: 13px; line-height: 20px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .actionsList .custom-control-label::before, .actionsList .custom-control-label::after{ top: 1.25rem; } .actionsList .custom-control-label p{ color: #C7D0DD; font-size: 12px; } /* .custom-control-input:checked ~ .custom-control-label{ background-color: #1B3E6F !important; color: #fff; } */ .inserActionBtns .btn{ border-radius: 15px !important; padding: 6px 20px; font-size: 12px; font-weight: bold; border: 0; } .inserActionBtns .btn:first-child{ background: #1273EB; border: solid 1px #1273EB; color: #fff; } .inserActionBtns .btn:last-child{ background: #fff; border: solid 1px #D9E6F2; color: #C3CDDB; margin-top: 14px; } .controllerSidebar .custom-control label{ width: 100%; margin-bottom: 0; } .controllerSidebar .custom-control i{ margin-right: 9px; } /*Components List*/ .functionsList .list-group-item{ padding-left: 36px; border: 0; font-size: 14px; background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat; } /*CANVAS*/ .source-button.editBar{ position: absolute; z-index: 1000 /*9999999*/; top: 60px; /* left: 50%; */ } .editBar, .editBar2{ width: calc(100% - 320px); margin: 0 auto 0 320px; height: 45px; padding: 0; padding-right: 20px; background:#F4F9FE; border-bottom: solid 1px #E8EFF8; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } .editBar .btn-group, .editBar2 .btn-group{ box-shadow: 0 2px 6px rgba(47, 83, 151, .15); } .editBar .toggoleBtn, .editBar2 .toggoleBtn{ height: 43px; margin-right: 12px; background-color: #fff; background-repeat: no-repeat; background-position: left center; border: 0; color: #1B3E6F; font-size: 10px; border-top-left-radius: 0; border-top-right-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 4px; } .editBar .toggoleBtn i, .editBar2 .toggoleBtn i{ font-size: 20px; } .editBar .toggoleBtn.active, .editBar2 .toggoleBtn.active{ padding: 0 10px !important; background-color: #1B3E6F !important; color: #fff; } .viewBtns .topologySource{ background-image: url(src/assets/img/icon-topologyView-active.svg); } .viewBtns .topologyView{ background-image: url(src/assets/img/icon-topologySource.svg); } .card.actionContainer{ margin: 20px 20px 40px 60px; background: transparent; border: 0; } .actionContainer .card-header{ padding: 0; background: transparent; border: 0; } .actionContainer .card-header span{ padding: 12px 20px; border-top-left-radius: 2px; border-top-right-radius: 2px; font-size: 12px; line-height: 38px; font-weight: bold; color: #1B3E6F; background: #C3CDDB; } .actionContainer .card-body{ min-height: 170px; padding: 15px 20px !important; border: solid 1px #C3CDDB; background: #fff; box-shadow: 0 2px 6px rgba(18, 115, 235, .1); } .actionContainer a{ display: inline-block; width: 230px; height: 130px; margin: 20px; padding: 24px; background: #1B3E6F; color: #fff !important; text-align: center; border-radius: 2px; border: solid 1px #1B3E6F; } .actionContainer a:hover{ cursor: pointer; border: dashed 1px #E9FCC6; }.componentContainer img{ height: 38px; } .componentContainer h2{ margin-top: 9px; font-size: 14px; font-weight: bold; } .componentContainer p{ font-size: 12px; } .attributeSidebar{ width: 440px; padding: 0px; margin-top: 45px; } .attributesContainer{ padding: 0; background: #fff; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } /*ATTRIBUTES SIDE BAR*/ .attributesSideBar{ width: 358px; padding: 0px; margin-top: 45px; } .attributesSideBar .attributesContainer{ height: calc(100vh - 106px) /*85.9vh*/; overflow-y: hidden; padding-bottom: 20px; background: #fff; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } .closeBar{ float: left; padding: 0 !important; width: 38px; height: 35px; background:#D9E3EE; border: 0; outline: 0; } .closeBar:focus{ outline: none; } .attributesContainer .scrollWrapper{ overflow-y: auto; height: 79vh; } .attributesContainer .nav-link{ padding-top: 7px !important; padding-bottom: 7px !important; color: #1B3E6F !important; text-transform: capitalize !important; border: solid 1px #ECEDF2 !important; border-radius: 0 !important; } .attributesContainer .nav-item:first-child a{ border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; border-right-width: 0 !important; } .attributesContainer .nav-item:last-child a{ border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; border-left-width: 0 !important; } .nav-pills .nav-link.active{ background-color: #1B3E6F; color: #fff !important; } .add-attribute .btn i{ font-weight: bold; } .attributesContainer h1{ margin-bottom: 10px; padding: 12px 0 12px 15px; background: #DEE8F3; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #1B3E6F; } .attributesContainertTitle{ height: 35px; margin-bottom: 9px !important; padding: 0; background: #DEE8F3; font-size: 12px; } .add-attribute{ margin: 15px 0; padding: 15px 9px; background-color: #F4F9FE; } .add-attribute h5{ padding: 0; margin-bottom: 12px; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #1B3E6F; } .add-attribute .btn{ width: 100%; background-color: #fff; border: solid 1px #C1CDDD; color: #1B3E6F !important; line-height: 18px !important; border-radius: 4px; } .add-attribute .btn:hover{ background-color: #1B3E6F; } .add-attribute .btn:hover i::before{ color: #fff; } .add-attribute .btn:focus{ box-shadow: none; } .icon-function-attribute::before{ font-size: 16px; } .add-attribute span{ font-size: 11px; line-height: 16px; } .attributesContainertTitle .btn-group{ margin-top: 3px; } .attributesContainertTitle .btn{ margin-left: 8px !important; padding: 1px 9px !important; border-radius: 4px !important; } .attributesContainer h6{ padding: 0; margin-bottom: 0; background: #DEE8F3; line-height: 35px !important; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #1B3E6F; } .view-source, .view-source:hover{ background: #103D73; border-color: #D0DFF1; color: #fff; font-size: 11px; } .trash-item, .trash-item:hover{ background: #fff; border-color: #D0DFF1; color: #103D73; } .trash-item{ font-size: 14px; } .attributesContainer label{ margin-bottom: 0; color: #1B3E6F; /* text-transform: uppercase; */ font-size: 12px; font-weight: bold; line-height: 32px; } .attributesContainer label.custom-control-label{ text-transform: unset; font-weight: normal; } .attributesContainer .form-group{ margin-bottom: 9px; } .attributesContainer .form-control{ border-color: #F0F5FC; border-radius: 2px; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); color: #103D73; font-size: 13px; } .attributesContainer .form-control:focus{ border-color: #66bfff; box-shadow: 0 0 0 4px rgba(0,149,255,0.15); } .attributesContainer .form-control::placeholder{ color: #CFD7E5; } .attributesContainer .attribute-value{ text-transform: unset; display: block; width: 100%; padding: 0 .75rem .375rem 0; font-size: 12px; font-weight: normal; } .attributesContainer textarea{ height: 60px; } .icon-required-star{ margin-left: 2px; font-size: 10px; color: #FF6469; } .optional-attribute::before{ color: #CAD3E0; } .attributeOptions{ display: none; border: 0; } .attributeOptions a:not(:first-child){ margin-left: 14px; } .attributeOptions i{ color: #103D73 !important; font-size: 16px; } .editAttribute i{ font-size: 14px; } .action-attributes .form-group{ display: inline-block; width: 100%; padding-left: 12px; /* line-height: 30px; */ } .action-attributes .form-group:hover{ cursor: pointer !important; background-color: #F5FAFF; } .action-attributes .form-group:hover label{ cursor: pointer !important; /* padding-left: 12px; */ } .action-attributes .form-group:hover .attributeOptions{ display: inline-block; position: relative; left: 8%; top: 3px; } .btn-select-template{ display: inherit; background-color: #C3CDDB; border-radius: 2px; color: #1B3E6F; font-size: 12px; } .btn-select-template i{ font-size: 16px; vertical-align: text-bottom; } .attribute-wrap{ padding-bottom: 15px; margin-bottom: 9px; border-bottom: solid 1px #F4F9FE; } .function-accordion .attribute-wrap:nth-last-child(1){ margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .attribute-wrap .form-group{ margin-bottom: 0; } .template-mapping-list{ margin-bottom: 15px; font-size: 13px; } .template-mapping-list p{ width: 56%; } .deleteTemplate{ right: 30px; top: -8px; } .deleteTemplate i{ color: #103D73 !important; } .icon-close::before{ color: #103D73; font-size: 10px !important; } /*Accordion*/ .accordion{ margin-top: 12px; } .accordion .card-header .btn-link{ padding-left: 20px !important; padding-right: 20px !important; } .accordion > .card{ box-shadow: none; margin-bottom: 0 !important; } .accordion > .card .card-body{ padding-bottom: 0 !important; } .function-accordion .card, .action-accordion .card{ overflow: inherit !important; box-shadow: none; } /* .accordion .card-header .btn-link[aria-expanded="true"], .accordion .card-header .btn-link[aria-expanded="false"]{ padding-left: 20px !important; padding-right: 20px !important; } .accordion > .card .card-header{ margin: 0; padding: 0 !important; background-color: #F4F9FE; border: 0; border-radius: 0; } .accordion > .card .card-body{ padding-top: 20px !important; padding-bottom: 0 !important; } .accordion .btn-link{ padding: 0; color: #C3CDDB; font-weight: bold; font-size: 13px; text-transform: uppercase; line-height: 15px; } .btn-link::before{ font-size: 15px !important; } .accordion .btn-link:hover{ color: #103D73; text-decoration: unset; } .accordion .card-header .btn-link[aria-expanded="true"]:after, .accordion .card-header .btn-link[aria-expanded="false"]:after{ margin-right: 9px; font-family: 'FontAwesome'; float: left; font-weight: normal; font-size: 12px; } */ /* .accordion .card-header .btn-link[aria-expanded="true"]:after{ content: "\f078"; } .accordion .card-header .btn-link[aria-expanded="false"]:after{ content: "\f054"; } */ .btn-addAttribute{ width: 20px; height: 20px; background-image: url(/assets/img/icon-add.svg); background-position: center center; background-repeat: no-repeat; vertical-align: sub; } .btn-addAttribute:hover{ background-image: url(/assets/img/icon-add-hover.svg); } .btn-deleteAttribute{ padding: 5px 10px; background: #FFE6E7; border: solid .5px #FFC9CB; border-radius: 2px; color: #FF6469; font-size: 10px; } /* .source-button{ position: absolute; z-index: 9999999; top: 60px; left: 50%; } */ /*jointjs paper*/ /* #board-paper { position: relative; border: 1px solid gray; display: inline-block; background: transparent; overflow: hidden; } #board-paper svg { background: transparent; } #board-paper svg .link { z-index: 2; } .html-element { position: absolute; background: #F4F9FE; pointer-events: none; -webkit-user-select: none; z-index: 2; } */ .attributesContainer .dropdown-text, .dropdown-toggle:hover ~ .dropdown-text, .dropdown-toggle:focus ~ .dropdown-text{ top: 7px; text-indent: 15px; background: #F4F9FE; border-radius: 5px; border: 0; box-shadow: whitesmoke; color: #1B3E6F; font-weight: bold; font-size: 13px; } .radio-btn{ margin-left: 12px; font-weight: bold; } .trash-span{ font-size:15px } .editBar2{ width: 100%; margin: 0; } .viewBtns .btn{ margin-top: 14px; padding-left: 30px!important; border: 0; font-size: 11px; color: #1B3E6F !important; background-color: #fff !important; background-repeat: no-repeat; background-position: 10px center; } .viewBtns .btn.active{ background-color: #1B3E6F !important; color: #fff !important; } /*PAUSE*/ /* .joint-paper{ width: 96.4% !important; height: 80vh !important; margin: 60px auto 0 !important; } */ ul.templateLegend{ margin: 0; } .templateLegend li{ float: left; list-style: none; font-size: 11px; } .templateLegend li:not(:last-child){ margin-right: 24px; } .templateLegend .requirement i{ color: #FF6B6B; } .templateLegend .capability i{ color: #0ABDE3; } ul.editor{ /* margin-right: -40px; */ margin-top: 16px; } .editor li{ list-style: none; } .editor .btn { padding: 0 8px !important; box-shadow: none; } .ace_editor{ top: 5.4vh; height: 92vh !important; } .dsl-editor { height: 500px; } .vertical_line{ border-left: 1px solid rgba(66, 169, 192, 0.1); height: 45px; margin-left: 12px; margin-right: 12px; } .zoom-percent{ font-size: 12px; } /*Modal*/ .modal{ top: 60px; } .modal-dialog-scrollable{ max-height: calc(100% - 20%) !important; } .modal-backdrop{ z-index: 0 !important; opacity: 0 !important; } /* .modal-holder.modal-backdrop{z-index: 100} .modal-holder + .modal-dialog {z-index: 1000} */ .modal-dialog{ max-width: 50%; } .modal-body{ padding: 18px 24px !important; font-size: 14px; } .createAttributeTabs .nav-link{ padding-top: 0 !important; } .createAttributeTabs .nav-item a{ color: #C3CDDB !important; } .createAttributeTabs .nav-item a, .createAttributeTabs .nav-item a.active{ border-radius: 0 !important; } .createAttributeTabs .nav-link{ text-transform: uppercase !important; border-radius: 0 !important; border: 0 !important; } .createAttributeTabs .nav-link.active{ border-radius: 0 !important; border-bottom: solid 1px #1B3E6F !important; } .createAttributeTabs .nav-item{ margin-left: 50px; } .createAttributeTabs .tab-content{ /* margin-top: 20px; */ padding: 20px 50px; border: solid 1px #F4F9FE; border-top: 0; } .createAttributeTabs .listBoxTitle{ font-size: 11px; line-height: 29px; } .createAttributeTabs .notation{ margin-left: 3px; color: #C3CDDB !important; font-weight: normal; } .addedFunctionsList, .nestedAttributes{ background: #F4F9FE; border: solid 1px #D0DFF1 !important; } .addedFunctionsList .scrollWrapper, .nestedAttributes .scrollWrapper{ height: 230px; max-height: 300px; overflow-y: auto; } .addedFunctionsList .input-search-controller, .nestedAttributes .input-search-controller{ height: 32px; padding-left: 28px !important; background-position: 9px; } .addedFunctionsList .input-search-controller::placeholder, .nestedAttributes .input-search-controller::placeholder{ font-weight: bold; } .create-form .addedFunctionsList .input-search-controller:focus, .create-form .nestedAttributes .input-search-controller:focus{ background-color: #fff !important; } .nestedAttributes .noAttributes{ margin: 12px; font-weight: bold; font-size: 12px; } .addedFunctionsList .list-group-item{ margin-bottom: 0; padding-left: 10px; padding-right: 12px; text-align: left; font-size: 12px; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; } .addedFunctionsList .list-group-item:hover{ background-color: #fff !important; color: #1B3E6F; } .addedFunctionsList .list-group-item.active{ background-color: #E0E8F2 !important; } .addedFunctionsList .list-group-item i{ font-size: 18px; vertical-align: middle; } .addedFunctionsList .list-group-item i:last-child{ float: right; font-size: 10px; line-height: 20px; } .nestedAttributes .btn-group{ display: grid; } .nestedAttributes .btn-group .btn{ padding-left: 10px !important; padding-right: 10px !important; height: 36px; border-radius: 0; background-color: transparent; border: 0; color: #1B3E6F !important; text-align: left; font-weight: normal; line-height: 24px; } .nestedAttributes .btn-group .btn:hover{ background-color: #fff !important; } .nestedAttributes .btn-group .btn.active, .nestedAttributes .btn-group .btn.active:hover{ background-color: #E0E8F2 !important; outline: 0; } .nestedAttributes .btn-group .btn.active:focus{ box-shadow: none; border: 0; } .container{ min-height: 66px; border-bottom: solid 1px #EFEFF4; line-height: 24px; } .container label{ display: block; /* color: #C3CDDB; */ } .container .selectedWrapper{ display: inline-block; width: auto; margin-right: 6px; margin-bottom: 9px; padding: 0 10px; background: #E0E8F2; border-radius: 12px; font-size: 13px; line-height: 24px; } /*FORM*/ .create-form .col-form-label{ color: #1B3E6F; font-size: 12px; font-weight: bold; } .create-form .col-form-label span{ color: #FF6469; } .create-form .form-control{ margin-bottom: 9px; padding-left: 0; padding-right: 0; border-radius: 0; border: 0; border-bottom: solid 1px #EFEFF4; font-size: 13px; box-shadow: none !important; color: #1B3E6F; } .create-form .form-control::placeholder{ color: #C3CDDB; } .create-form .form-control:focus{ border-bottom-color: #1B3E6F; -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; background-color: transparent !important; text-shadow: none; } .list-group-item{ margin-bottom: 9px; padding: 9px 1.25rem; border-color: #E6EDF5; font-size: 11px; color: #1B3E6F; font-weight: bold; text-align: center; } .list-group-item.active{ color: #1B3E6F; background-color: #C3CDDB; border-color: #C3CDDB; } .list-group-horizontal .list-group-item + .list-group-item{ border-left-width: 1px; } .create-form .custom-control-input:checked ~ .custom-control-label{ background-color: transparent !important; color: #1B3E6F; } /*Optional Attributes Menu*/ .optional-attributes-menu{ margin-top: 20px; padding: 10px 20px; border-top: solid 1px #ECEDF2; border-bottom: solid 1px #ECEDF2; background-color: #F4F9FE; } .optional-attributes-menu .dropdown{ width: 100%; } .optional-attributes-menu .dropdown-text, .optional-attributes-menu .dropdown-text:hover, .optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text, .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{ top: 0; text-align: center; font-weight: normal; text-indent: 0; background-color: #fff; box-shadow: none; border: solid 1px #C1CDDD; border-radius: 2px; } .optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text, .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{ background-color: #D0DFF1 !important; border-color: #C1CDDD; border-radius: 2px !important; color: #1B3E6F !important; } .optional-attributes-menu .dropdown-text i{ font-size: 17px; vertical-align: middle; } .optional-attributes-menu .dropdown-content:hover, .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-content{ top: 36px; width: 100%; padding: 5px 0; border-radius: 2px; background-color: #F4F9FE; border-color: #D0DFF1; font-size: 13px; } .optional-attributes-menu .dropdown-content li{ padding: 0 5px; line-height: 36px; border-bottom: solid 1px #EAF4FF; } .optional-attributes-menu .dropdown-content li a{ display: inline; } .optional-attributes-menu .dropdown-content li:hover, .optional-attributes-menu .dropdown-content li:hover a{ background-color: #D0DFF1; } .optional-attributes-menu li i{ font-size: 20px; margin-top: 10px; margin-right: 10px; } .temp-buttons .btn{ font-size: 13px; margin: 12px; padding: 8px 12px !important; line-height: 14px; } .testttt .test0{ width: 48%; margin: 0 1%; } @keyframes tonext { 75% { left: 0; } 95% { left: 100%; } 98% { left: 100%; } 99% { left: 0; } } @keyframes tostart { 75% { left: 0; } 95% { left: -300%; } 98% { left: -300%; } 99% { left: 0; } } @keyframes snap { 96% { scroll-snap-align: center; } 97% { scroll-snap-align: none; } 99% { scroll-snap-align: none; } 100% { scroll-snap-align: center; } } * { box-sizing: border-box; scrollbar-color: transparent transparent; /* thumb and track color */ scrollbar-width: 0px; } *::-webkit-scrollbar { width: 0; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: transparent; border: none; } * { -ms-overflow-style: none; } .carousel { position: relative; height: 360px; /* padding-top: 75%; */ /* filter: drop-shadow(0 0 10px #0003); */ /* perspective: 100px; */ } .carousel__viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; margin-top: 40px; margin-bottom: 0; padding: 0 12px 0 0; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .carousel__slide { position: relative; flex: 0 0 50%; width: 100%; margin-right: 12px; counter-increment: item; list-style: none; } /* .carousel__slide:before { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-40%,70px); color: #fff; font-size: 2em; } */ .carousel__snapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center; } @media (hover: hover) { .carousel__snapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 4s; animation-iteration-count: infinite; } .carousel__slide:last-child .carousel__snapper { animation-name: tostart, snap; } } @media (prefers-reduced-motion: reduce) { .carousel__snapper { animation-name: none; } } .carousel:hover .carousel__snapper, .carousel:focus-within .carousel__snapper { animation-name: none; } .carousel__navigation { position: absolute; right: 0; top: 0; left: 0; text-align: center; } .carousel__navigation-list, .carousel__navigation-item{ display: inline-block; margin-bottom: 0; } .carousel__navigation-item{ width: 100px; padding: 6px 12px; background-color: #DEE8F3; border-right: solid 1px #C8D6E6; font-size: 11px; font-weight: bold; } .carousel__navigation-item:first-child{ border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .carousel__navigation-item:last-child{ border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right: 0; } .carousel__navigation-button, .carousel__navigation-button:hover{ display: inline-block; width: auto; /* background-clip: content-box; */ transition: transform 0.1s; color: #1B3E6F; } .carousel__navigation-button:hover{ text-decoration: none; } .carousel::before, .carousel::after, .carousel__prev, .carousel__next{ position: absolute; top: 0; margin-top: 0; width: 4rem; transform: translateY(0); border-radius: 3px; font-size: 0; outline: 0; } /* .carousel::before, .carousel__prev { left: -1rem; } .carousel::after, .carousel__next { right: -1rem; } */ /* .carousel::before, .carousel::after { content: ''; z-index: 1; background-color: #333; background-size: 1.5rem 1.5rem; background-repeat: no-repeat; background-position: center center; color: #fff; font-size: 2.5rem; line-height: 4rem; text-align: center; pointer-events: none; } .carousel::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); } .carousel::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); } */ .tooltipHTML{ position: relative; display: inline-block; } .tooltipHTML .tooltiptext{ visibility: hidden; position: absolute; z-index: 1; top: 35px; left: 50px; width: 316px; margin-left: -62px; padding: 9px 12px; background-color: #fff; color: #1B3E6F; border-radius: 2px; font-weight: normal; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); border: solid 1px #DEE8F3; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ opacity: 0; transition: opacity 1s; } .tooltipHTML.tooltipGetAtt .tooltiptext{ top: 38px; left: 70px; width: auto; } .tooltipHTML .tooltiptext::after { content: ''; display: block; width: 0; height: 0; position: absolute; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #DEE8F3; left: 9px; top: -6px; } .tooltipHTML:hover .tooltiptext { visibility: visible; opacity: 1; } .tooltiptext h5{ margin-bottom: 5px; font-size: 15px; } .tooltipGetAtt h5{ margin-bottom: 0; font-size: 12px; } .tooltiptext h6{ background: transparent; line-height: 24px !important; color: #C3CDDB; text-transform: initial; } .tooltipHTML .tooltiptext span{ display: inline-block; margin-right: 3px; margin-bottom: 3px; padding: 3px 6px; background-color: #E0E8F2; border-radius: 12px; line-height: 16px; color: #1B3E6F; } .toast-container{ z-index: 200000002 !important; }