3 /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
4 background-size: 6px 6px !important; */
5 /* background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important; */
6 background-color: #fff !important;
18 .controllerSidebar .nav-tabs{
19 border-bottom-width: 2px;
21 .controllerSidebar .nav-tabs .nav-link{
22 padding: 12px 0 !important;
25 .controllerSidebar .nav-tabs .nav-link::before{
29 .editNavbar .nav-tabs{
30 border-bottom-width: 0;
32 .editNavbar .nav-tabs .nav-link{
33 padding: 12px 28px !important;
36 .editNavbar .nav-tabs .nav-link::before{
39 .editNavbar .nav-link{
40 text-transform: initial !important;
51 background-color: #1B3E6F;
52 /* box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); */
53 z-index: 200000000 !important;
59 background: url(/assets/img/logo-icon.svg) center center #fff no-repeat;
65 background: transparent;
72 .breadcrumb .breadcrumb-item{
76 .breadcrumb .breadcrumb-item:first-child{
79 .breadcrumb-item + .breadcrumb-item::before{
82 .breadcrumb .breadcrumb-item.active p{
90 .template-list.active {
98 .designer-breadcrumb .fa-angle-right::before {
103 height: calc(100vh - 60px) !important;
105 /**Topology Actions**/
110 .topology-actions > li{
112 display: inline-block;
115 .topology-actions > li:first-child{
116 border-right: solid 1px #16396A;
118 .topology-actions .btn-group{
121 .btn-group > .btn:not(:first-child){
124 .btn-topology-action,
125 .btn-topology-action:hover{
130 border: solid .5px #fff;
132 .btn-topology-action:last-child{
135 .btn-topology-action .fa{
141 .topology-actions .dropdown-text,
142 .dropdown-toggle:hover ~ .dropdown-text,
143 .dropdown-toggle:focus ~ .dropdown-text{
146 background: #1273EB !important;
147 border-radius: 15px !important;
150 color: #fff !important;
154 .topology-actions .dropdown-text::after{
157 border-style: solid !important;
158 border-width: 5px 5px 0 5px !important;
159 border-color: #fff transparent transparent transparent;
161 .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
163 border-style: solid !important;
164 border-width: 0 5px 5px 5px !important;
165 border-color: transparent transparent #fff transparent;
167 .topology-actions .dropdown-content:hover,
168 .topology-actions .dropdown-toggle:focus ~ .dropdown-content{
174 box-shadow: 0 2px 6px rgba(47, 83, 151, .15)
176 .topology-actions .dropdown-content a{
181 .topology-actions .dropdown-content a:hover{
183 text-decoration: none;
186 padding: 0 !important;
192 .package-info h3 span{
195 .package-info .badge{
214 .save-blueprint li:hover{
236 background: transparent;
240 vertical-align: bottom;
241 /* text-align: center; */
244 display: inline-table !important;
245 -ms-writing-mode: tb-rl;
246 -webkit-writing-mode: vertical-rl;
247 writing-mode: vertical-rl !important;
248 transform: rotate(180deg);
255 /* border-bottom-left-radius: 2px; */
256 border-top-left-radius: 2px;
263 .rotate span:first-child{
267 text-decoration: none;
275 /* .ng-sidebar__content.ng-sidebar__content--animate{
278 padding-top: 70px !important;
281 .functionsList tspan{
282 /* width:30px !important; */
283 font: normal 13px sans-serif;
284 fill: #1B3E6F !important;
285 overflow-wrap: break-word;
287 #board-paper #name tspan{
295 /*ACTIONS & COMPONENTS MENU*/
296 .input-search-controller{
299 background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat;
300 background-size: 4.5%;
303 border-bottom: solid 1px #D7E7F9;
307 .input-search-controller::placeholder{
311 .input-search-controller:focus{
312 background-color: #fff !important;
313 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
315 border-color: #DEE8F3;
320 background-position: left center;
321 background-repeat: no-repeat;
324 background-image: url(/assets/img/icon-comType1-sm.svg);
327 background-image: url(/assets/img/icon-comType2-sm.svg);
330 background-image: url(/assets/img/icon-comType3-sm.svg);
333 background-image: url(/assets/img/icon-comType4-sm.svg);
347 margin:0 0 0 4px; /* indentation */
352 .actionSubList:before {
360 border-left: 1px solid #C1CDDD;
364 padding: 0 1.5em; /* indentation + .5em */
368 .actionSubList li::before{
371 width: 10px; /* same with indentation */
373 border-top: 1px solid #C1CDDD;
374 margin-top: -1px; /* border top width */
376 top: 16px; /* (line-height/2) */
379 .actionSubList li:last-child:before {
380 background: #F4F9FE; /* same with body background */
382 top: 16px; /* (line-height/2) */
389 overflow: hidden !important;
391 border: solid 1px #C1CDDD;
392 box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
402 border-top: solid 1px #C1CDDD;
411 .helpBox .icon-info::before{
412 color: #0070F4 !important;
414 .controllerSidebar .row,
415 .controllerSidebar .col{
419 .controllerSidebar h1{
421 padding: 12px 0 12px 12px;
425 text-transform: uppercase;
428 .controllerSidebar b{
435 /* .ng-sidebar__content .joint-paper > svg{
439 .functionsList .joint-paper{
440 width: 100% !important;
441 height: 72vh !important;
442 margin: 0 !important;
445 margin: 0px 15px 16px -90px;
446 /* padding: 9px 20px; */
450 /* outline: 0 !important; */
453 .actionsList li:hover,
454 .actionsList li label:hover{
459 margin: 9px 0 4px 3px;
469 height: calc(100vh - 200px);
472 .custom-control.custom-checkbox:hover,
473 .custom-control-label:hover{
481 .custom-control:hover{
482 background-color: white;
485 height: 65vh !important;
494 .functionsList .list-group-item{
498 box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
501 .functionsList .joint-paper{
502 background: transparent !important;
504 .actionsList .custom-control-label{
507 vertical-align: unset;
511 border-top-right-radius: 2px;
512 border-bottom-right-radius: 2px;
514 .actionsList .custom-control-label::before,
515 .actionsList .custom-control-label::after{
518 .actionsList .custom-control-label p{
522 /* .custom-control-input:checked ~ .custom-control-label{
523 background-color: #1B3E6F !important;
526 .inserActionBtns .btn{
527 border-radius: 15px !important;
534 .inserActionBtns .btn:first-child{
536 border: solid 1px #1273EB;
539 .inserActionBtns .btn:last-child{
541 border: solid 1px #D9E6F2;
545 .controllerSidebar .custom-control label{
548 .controllerSidebar .custom-control i{
552 .functionsList .list-group-item{
556 background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
560 .source-button.editBar{
562 z-index: 1000 /*9999999*/;
568 width: calc(100% - 320px);
569 margin: 0 auto 0 320px;
574 border-bottom: solid 1px #E8EFF8;
575 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
579 .editBar2 .btn-group{
580 box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
582 .editBar .toggoleBtn,
583 .editBar2 .toggoleBtn{
586 background-color: #fff;
587 background-repeat: no-repeat;
588 background-position: left center;
592 border-top-left-radius: 0;
593 border-top-right-radius: 4px;
594 border-bottom-left-radius: 0;
595 border-bottom-right-radius: 4px;
597 .editBar .toggoleBtn i,
598 .editBar2 .toggoleBtn i{
601 .editBar .toggoleBtn.active,
602 .editBar2 .toggoleBtn.active{
603 padding: 0 10px !important;
604 background-color: #1B3E6F !important;
607 .viewBtns .topologySource{
608 background-image: url(src/assets/img/icon-topologyView-active.svg);
610 .viewBtns .topologyView{
611 background-image: url(src/assets/img/icon-topologySource.svg);
613 .card.actionContainer{
614 margin: 20px 20px 40px 60px;
615 background: transparent;
618 .actionContainer .card-header{
620 background: transparent;
623 .actionContainer .card-header span{
625 border-top-left-radius: 2px;
626 border-top-right-radius: 2px;
633 .actionContainer .card-body{
635 padding: 15px 20px !important;
636 border: solid 1px #C3CDDB;
638 box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
641 display: inline-block;
647 color: #fff !important;
650 border: solid 1px #1B3E6F;
652 .actionContainer a:hover{
654 border: dashed 1px #E9FCC6;
655 }.componentContainer img{
658 .componentContainer h2{
663 .componentContainer p{
671 .attributesContainer{
674 border: solid 1px #C1CDDD;
675 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
677 /*ATTRIBUTES SIDE BAR*/
683 .attributesSideBar .attributesContainer{
686 padding-bottom: 20px;
688 border: solid 1px #C1CDDD;
689 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
693 padding: 0 !important;
703 .attributesContainer .scrollWrapper{
707 .attributesContainer .nav-link{
708 padding-top: 7px !important;
709 padding-bottom: 7px !important;
710 color: #1B3E6F !important;
711 text-transform: capitalize !important;
712 border: solid 1px #ECEDF2 !important;
713 border-radius: 0 !important;
715 .attributesContainer .nav-item:first-child a{
716 border-top-left-radius: 4px !important;
717 border-bottom-left-radius: 4px !important;
718 border-right-width: 0 !important;
720 .attributesContainer .nav-item:last-child a{
721 border-top-right-radius: 4px !important;
722 border-bottom-right-radius: 4px !important;
723 border-left-width: 0 !important;
725 .nav-pills .nav-link.active{
726 background-color: #1B3E6F;
727 color: #fff !important;
729 .add-attribute .btn i{
732 .attributesContainer h1{
734 padding: 12px 0 12px 15px;
738 text-transform: uppercase;
741 .attributesContainertTitle{
743 margin-bottom: 9px !important;
751 background-color: #F4F9FE;
758 text-transform: uppercase;
763 background-color: #fff;
764 border: solid 1px #C1CDDD;
765 color: #1B3E6F !important;
766 line-height: 18px !important;
769 .add-attribute .btn:hover{
770 background-color: #1B3E6F;
772 .add-attribute .btn:hover i::before{
775 .add-attribute .btn:focus{
778 .icon-function-attribute::before{
785 .attributesContainertTitle .btn-group{
788 .attributesContainertTitle .btn{
789 margin-left: 8px !important;
790 padding: 1px 9px !important;
791 border-radius: 4px !important;
793 .attributesContainer h6{
797 line-height: 35px !important;
800 text-transform: uppercase;
806 border-color: #D0DFF1;
813 border-color: #D0DFF1;
819 .attributesContainer label{
822 /* text-transform: uppercase; */
827 .attributesContainer label.custom-control-label{
828 text-transform: unset;
831 .attributesContainer .form-group{
834 .attributesContainer .form-control{
835 border-color: #F0F5FC;
837 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
841 .attributesContainer .form-control:focus{
842 border-color: #66bfff;
843 box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
845 .attributesContainer .form-control::placeholder{
848 .attributesContainer .attribute-value{
849 text-transform: unset;
852 padding: 0 .75rem .375rem 0;
856 .attributesContainer textarea{
863 .optional-attribute::before{
870 .attributeOptions a:not(:first-child){
874 color: #103D73 !important;
880 .action-attributes .form-group{
881 display: inline-block;
884 /* line-height: 30px; */
886 .action-attributes .form-group:hover{
887 cursor: pointer !important;
888 background-color: #F5FAFF;
890 .action-attributes .form-group:hover label{
891 cursor: pointer !important;
892 /* padding-left: 12px; */
894 .action-attributes .form-group:hover .attributeOptions{
895 display: inline-block;
901 .btn-select-template{
903 background-color: #C3CDDB;
908 .btn-select-template i{
910 vertical-align: text-bottom;
913 padding-bottom: 15px;
915 border-bottom: solid 1px #F4F9FE;
917 .function-accordion .attribute-wrap:nth-last-child(1){
922 .attribute-wrap .form-group{
925 .template-mapping-list{
929 .template-mapping-list p{
937 color: #103D73 !important;
941 font-size: 10px !important;
947 .accordion .card-header .btn-link{
948 padding-left: 20px !important;
949 padding-right: 20px !important;
953 margin-bottom: 0 !important;
955 .accordion > .card .card-body{
956 padding-bottom: 0 !important;
958 .function-accordion .card,
959 .action-accordion .card{
960 overflow: inherit !important;
964 .accordion .card-header .btn-link[aria-expanded="true"],
965 .accordion .card-header .btn-link[aria-expanded="false"]{
966 padding-left: 20px !important;
967 padding-right: 20px !important;
969 .accordion > .card .card-header{
971 padding: 0 !important;
972 background-color: #F4F9FE;
977 .accordion > .card .card-body{
978 padding-top: 20px !important;
979 padding-bottom: 0 !important;
981 .accordion .btn-link{
986 text-transform: uppercase;
990 font-size: 15px !important;
992 .accordion .btn-link:hover{
994 text-decoration: unset;
996 .accordion .card-header .btn-link[aria-expanded="true"]:after,
997 .accordion .card-header .btn-link[aria-expanded="false"]:after{
999 font-family: 'FontAwesome';
1001 font-weight: normal;
1008 /* .accordion .card-header .btn-link[aria-expanded="true"]:after{
1011 .accordion .card-header .btn-link[aria-expanded="false"]:after{
1017 background-image: url(/assets/img/icon-add.svg);
1018 background-position: center center;
1019 background-repeat: no-repeat;
1020 vertical-align: sub;
1022 .btn-addAttribute:hover{
1023 background-image: url(/assets/img/icon-add-hover.svg);
1025 .btn-deleteAttribute{
1027 background: #FFE6E7;
1028 border: solid .5px #FFC9CB;
1043 border: 1px solid gray;
1044 display: inline-block;
1045 background: transparent;
1049 background: transparent;
1051 #board-paper svg .link {
1056 background: #F4F9FE;
1057 pointer-events: none;
1058 -webkit-user-select: none;
1061 .attributesContainer .dropdown-text,
1062 .dropdown-toggle:hover ~ .dropdown-text,
1063 .dropdown-toggle:focus ~ .dropdown-text{
1066 background: #F4F9FE;
1069 box-shadow: whitesmoke;
1089 padding-left: 30px!important;
1092 color: #1B3E6F !important;
1093 background-color: #fff !important;
1094 background-repeat: no-repeat;
1095 background-position: 10px center;
1097 .viewBtns .btn.active{
1098 background-color: #1B3E6F !important;
1099 color: #fff !important;
1104 width: 96.4% !important;
1105 height: 80vh !important;
1106 margin: 60px auto 0 !important;
1116 .templateLegend li:not(:last-child){
1119 .templateLegend .requirement i{
1122 .templateLegend .capability i{
1126 /* margin-right: -40px; */
1133 padding: 0 8px !important;
1138 height: 92vh !important;
1144 border-left: 1px solid rgba(66, 169, 192, 0.1);
1156 .modal-dialog-scrollable{
1157 max-height: calc(100% - 20%) !important;
1160 z-index: 0 !important;
1161 opacity: 0 !important;
1163 /* .modal-holder.modal-backdrop{z-index: 100}
1164 .modal-holder + .modal-dialog {z-index: 1000} */
1169 padding: 18px 24px !important;
1173 .createAttributeTabs .nav-link{
1174 padding-top: 0 !important;
1176 .createAttributeTabs .nav-item a{
1177 color: #C3CDDB !important;
1179 .createAttributeTabs .nav-item a,
1180 .createAttributeTabs .nav-item a.active{
1181 border-radius: 0 !important;
1183 .createAttributeTabs .nav-link{
1184 text-transform: uppercase !important;
1185 border-radius: 0 !important;
1186 border: 0 !important;
1188 .createAttributeTabs .nav-link.active{
1189 border-radius: 0 !important;
1190 border-bottom: solid 1px #1B3E6F !important;
1192 .createAttributeTabs .nav-item{
1195 .createAttributeTabs .tab-content{
1196 /* margin-top: 20px; */
1198 border: solid 1px #F4F9FE;
1201 .createAttributeTabs .listBoxTitle{
1205 .createAttributeTabs .notation{
1207 color: #C3CDDB !important;
1208 font-weight: normal;
1210 .addedFunctionsList,
1212 background: #F4F9FE;
1213 border: solid 1px #D0DFF1 !important;
1215 .addedFunctionsList .scrollWrapper,
1216 .nestedAttributes .scrollWrapper{
1221 .addedFunctionsList .input-search-controller,
1222 .nestedAttributes .input-search-controller{
1224 padding-left: 28px !important;
1225 background-position: 9px;
1227 .addedFunctionsList .input-search-controller::placeholder,
1228 .nestedAttributes .input-search-controller::placeholder{
1231 .create-form .addedFunctionsList .input-search-controller:focus,
1232 .create-form .nestedAttributes .input-search-controller:focus{
1233 background-color: #fff !important;
1235 .nestedAttributes .noAttributes{
1240 .addedFunctionsList .list-group-item{
1243 padding-right: 12px;
1246 border: 0 !important;
1247 border-radius: 0 !important;
1248 background-color: transparent !important;
1250 .addedFunctionsList .list-group-item:hover{
1251 background-color: #fff !important;
1254 .addedFunctionsList .list-group-item.active{
1255 background-color: #E0E8F2 !important;
1257 .addedFunctionsList .list-group-item i{
1259 vertical-align: middle;
1261 .addedFunctionsList .list-group-item i:last-child{
1266 .nestedAttributes .btn-group{
1269 .nestedAttributes .btn-group .btn{
1270 padding-left: 10px !important;
1271 padding-right: 10px !important;
1274 background-color: transparent;
1276 color: #1B3E6F !important;
1278 font-weight: normal;
1281 .nestedAttributes .btn-group .btn:hover{
1282 background-color: #fff !important;
1284 .nestedAttributes .btn-group .btn.active,
1285 .nestedAttributes .btn-group .btn.active:hover{
1286 background-color: #E0E8F2 !important;
1289 .nestedAttributes .btn-group .btn.active:focus{
1295 border-bottom: solid 1px #EFEFF4;
1300 /* color: #C3CDDB; */
1302 .container .selectedWrapper{
1303 display: inline-block;
1308 background: #E0E8F2;
1309 border-radius: 12px;
1314 .create-form .col-form-label{
1319 .create-form .col-form-label span{
1322 .create-form .form-control{
1328 border-bottom: solid 1px #EFEFF4;
1330 box-shadow: none !important;
1333 .create-form .form-control::placeholder{
1336 .create-form .form-control:focus{
1337 border-bottom-color: #1B3E6F;
1338 -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1339 -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1340 box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1341 background-color: transparent !important;
1346 padding: 9px 1.25rem;
1347 border-color: #E6EDF5;
1353 .list-group-item.active{
1355 background-color: #C3CDDB;
1356 border-color: #C3CDDB;
1358 .list-group-horizontal .list-group-item + .list-group-item{
1359 border-left-width: 1px;
1361 .create-form .custom-control-input:checked ~ .custom-control-label{
1362 background-color: transparent !important;
1365 /*Optional Attributes Menu*/
1366 .optional-attributes-menu{
1369 border-top: solid 1px #ECEDF2;
1370 border-bottom: solid 1px #ECEDF2;
1371 background-color: #F4F9FE;
1373 .optional-attributes-menu .dropdown{
1376 .optional-attributes-menu .dropdown-text,
1377 .optional-attributes-menu .dropdown-text:hover,
1378 .optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text,
1379 .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{
1382 font-weight: normal;
1384 background-color: #fff;
1386 border: solid 1px #C1CDDD;
1389 .optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text,
1390 .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{
1391 background-color: #D0DFF1 !important;
1392 border-color: #C1CDDD;
1393 border-radius: 2px !important;
1394 color: #1B3E6F !important;
1396 .optional-attributes-menu .dropdown-text i{
1398 vertical-align: middle;
1400 .optional-attributes-menu .dropdown-content:hover,
1401 .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-content{
1406 background-color: #F4F9FE;
1407 border-color: #D0DFF1;
1410 .optional-attributes-menu .dropdown-content li{
1413 border-bottom: solid 1px #EAF4FF;
1415 .optional-attributes-menu .dropdown-content li a{
1418 .optional-attributes-menu .dropdown-content li:hover,
1419 .optional-attributes-menu .dropdown-content li:hover a{
1420 background-color: #D0DFF1;
1422 .optional-attributes-menu li i{
1431 padding: 8px 12px !important;
1460 @keyframes tostart {
1477 scroll-snap-align: center;
1480 scroll-snap-align: none;
1483 scroll-snap-align: none;
1486 scroll-snap-align: center;
1493 box-sizing: border-box;
1494 scrollbar-color: transparent transparent; /* thumb and track color */
1495 scrollbar-width: 0px;
1498 *::-webkit-scrollbar {
1502 *::-webkit-scrollbar-track {
1503 background: transparent;
1506 *::-webkit-scrollbar-thumb {
1507 background: transparent;
1512 -ms-overflow-style: none;
1519 /* padding-top: 75%; */
1520 /* filter: drop-shadow(0 0 10px #0003); */
1521 /* perspective: 100px; */
1524 .carousel__viewport {
1533 padding: 0 12px 0 0;
1535 counter-reset: item;
1536 scroll-behavior: smooth;
1537 scroll-snap-type: x mandatory;
1545 counter-increment: item;
1550 .carousel__slide:before {
1554 transform: translate3d(-50%,-40%,70px);
1559 .carousel__snapper {
1565 scroll-snap-align: center;
1568 @media (hover: hover) {
1569 .carousel__snapper {
1570 animation-name: tonext, snap;
1571 animation-timing-function: ease;
1572 animation-duration: 4s;
1573 animation-iteration-count: infinite;
1576 .carousel__slide:last-child .carousel__snapper {
1577 animation-name: tostart, snap;
1581 @media (prefers-reduced-motion: reduce) {
1582 .carousel__snapper {
1583 animation-name: none;
1587 .carousel:hover .carousel__snapper,
1588 .carousel:focus-within .carousel__snapper {
1589 animation-name: none;
1592 .carousel__navigation {
1601 .carousel__navigation-list,
1602 .carousel__navigation-item{
1603 display: inline-block;
1606 .carousel__navigation-item{
1609 background-color: #DEE8F3;
1610 border-right: solid 1px #C8D6E6;
1614 .carousel__navigation-item:first-child{
1615 border-top-left-radius: 3px;
1616 border-bottom-left-radius: 3px;
1618 .carousel__navigation-item:last-child{
1619 border-top-right-radius: 3px;
1620 border-bottom-right-radius: 3px;
1623 .carousel__navigation-button,
1624 .carousel__navigation-button:hover{
1625 display: inline-block;
1627 /* background-clip: content-box; */
1628 transition: transform 0.1s;
1631 .carousel__navigation-button:hover{
1632 text-decoration: none;
1642 transform: translateY(0);
1648 /* .carousel::before,
1658 /* .carousel::before,
1662 background-color: #333;
1663 background-size: 1.5rem 1.5rem;
1664 background-repeat: no-repeat;
1665 background-position: center center;
1670 pointer-events: none;
1674 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");
1678 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");
1684 display: inline-block;
1686 .tooltipHTML .tooltiptext{
1695 background-color: #fff;
1698 font-weight: normal;
1699 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
1700 border: solid 1px #DEE8F3;
1701 /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
1703 transition: opacity 1s;
1705 .tooltipHTML.tooltipGetAtt .tooltiptext{
1710 .tooltipHTML .tooltiptext::after {
1716 border-left: 6px solid transparent;
1717 border-right: 6px solid transparent;
1718 border-bottom: 6px solid #DEE8F3;
1722 .tooltipHTML:hover .tooltiptext {
1723 visibility: visible;
1734 background: transparent;
1735 line-height: 24px !important;
1737 text-transform: initial;
1739 .tooltipHTML .tooltiptext span{
1740 display: inline-block;
1744 background-color: #E0E8F2;
1745 border-radius: 12px;
1750 z-index: 200000002 !important;