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;
274 .componentsList tspan{
275 /* width:30px !important; */
276 font: normal 13px sans-serif;
277 fill: #1B3E6F !important;
278 overflow-wrap: break-word;
280 #board-paper #name tspan{
288 /*ACTIONS & COMPONENTS MENU*/
289 .input-search-controller{
292 background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat;
293 background-size: 4.5%;
296 border-bottom: solid 1px #D7E7F9;
300 .input-search-controller::placeholder{
304 .input-search-controller:focus{
305 background-color: #fff !important;
306 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
308 border-color: #DEE8F3;
313 background-position: left center;
314 background-repeat: no-repeat;
317 background-image: url(/assets/img/icon-comType1-sm.svg);
320 background-image: url(/assets/img/icon-comType2-sm.svg);
323 background-image: url(/assets/img/icon-comType3-sm.svg);
326 background-image: url(/assets/img/icon-comType4-sm.svg);
343 overflow: hidden !important;
345 border: solid 1px #C1CDDD;
346 box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
356 border-top: solid 1px #C1CDDD;
365 .helpBox .icon-info::before{
366 color: #0070F4 !important;
368 .controllerSidebar .row,
369 .controllerSidebar .col{
373 .controllerSidebar h1{
375 padding: 12px 0 12px 12px;
379 text-transform: uppercase;
382 .controllerSidebar b{
388 .controllerSidebar .joint-paper{
389 width: 98% !important;
390 height: 72vh !important;
391 margin: 0 !important;
394 margin: 0px 15px 16px -90px;
395 /* padding: 9px 20px; */
399 /* outline: 0 !important; */
405 margin: 9px 0 4px 3px;
416 padding: 0 20px 10px;
420 /* height: calc( 100vh - 218px)!important;
422 background: #F4F9FE !important;
424 .custom-control.custom-checkbox:hover,
425 .custom-control-label:hover{
433 .custom-control:hover{
434 background-color: white;
438 height: 65vh !important;
447 .componentsList .list-group-item{
451 box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
454 .actionsList .custom-control-label{
457 vertical-align: unset;
461 border-top-right-radius: 2px;
462 border-bottom-right-radius: 2px;
464 .actionsList .custom-control-label::before,
465 .actionsList .custom-control-label::after{
468 .actionsList .custom-control-label p{
472 .custom-control-input:checked ~ .custom-control-label{
473 background-color: #1B3E6F !important;
476 .inserActionBtns .btn{
477 border-radius: 15px !important;
484 .inserActionBtns .btn:first-child{
486 border: solid 1px #1273EB;
489 .inserActionBtns .btn:last-child{
491 border: solid 1px #D9E6F2;
495 .controllerSidebar .custom-control label{
498 .controllerSidebar .custom-control i{
502 .componentsList .list-group-item{
506 background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
510 .source-button.editBar{
512 z-index: 1000 /*9999999*/;
518 width: calc(100% - 320px);
519 margin: 0 auto 0 320px;
524 border-bottom: solid 1px #E8EFF8;
525 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
529 .editBar2 .btn-group{
530 box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
532 .editBar .toggoleBtn,
533 .editBar2 .toggoleBtn{
536 background-color: #fff;
537 background-repeat: no-repeat;
538 background-position: left center;
542 border-top-left-radius: 0;
543 border-top-right-radius: 4px;
544 border-bottom-left-radius: 0;
545 border-bottom-right-radius: 4px;
547 .editBar .toggoleBtn i,
548 .editBar2 .toggoleBtn i{
551 .editBar .toggoleBtn.active,
552 .editBar2 .toggoleBtn.active{
553 padding: 0 10px !important;
554 background-color: #1B3E6F !important;
557 .viewBtns .topologySource{
558 background-image: url(src/assets/img/icon-topologyView-active.svg);
560 .viewBtns .topologyView{
561 background-image: url(src/assets/img/icon-topologySource.svg);
563 .card.actionContainer{
564 margin: 20px 20px 40px 60px;
565 background: transparent;
568 .actionContainer .card-header{
570 background: transparent;
573 .actionContainer .card-header span{
575 border-top-left-radius: 2px;
576 border-top-right-radius: 2px;
583 .actionContainer .card-body{
585 padding: 15px 20px !important;
586 border: solid 1px #C3CDDB;
588 box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
591 display: inline-block;
597 color: #fff !important;
600 border: solid 1px #1B3E6F;
602 .actionContainer a:hover{
604 border: dashed 1px #E9FCC6;
605 }.componentContainer img{
608 .componentContainer h2{
613 .componentContainer p{
621 .attributesContainer{
624 border: solid 1px #C1CDDD;
625 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
627 /*ATTRIBUTES SIDE BAR*/
633 .attributesSideBar .attributesContainer{
636 padding-bottom: 20px;
638 border: solid 1px #C1CDDD;
639 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
643 padding: 0 !important;
653 .attributesContainer .scrollWrapper{
657 .attributesContainer .nav-link{
658 padding-top: 7px !important;
659 padding-bottom: 7px !important;
660 color: #1B3E6F !important;
661 text-transform: capitalize !important;
662 border: solid 1px #ECEDF2 !important;
663 border-radius: 0 !important;
665 .attributesContainer .nav-item:first-child a{
666 border-top-left-radius: 4px !important;
667 border-bottom-left-radius: 4px !important;
668 border-right-width: 0 !important;
670 .attributesContainer .nav-item:last-child a{
671 border-top-right-radius: 4px !important;
672 border-bottom-right-radius: 4px !important;
673 border-left-width: 0 !important;
675 .nav-pills .nav-link.active{
676 background-color: #1B3E6F;
677 color: #fff !important;
679 .attributesContainer h1{
681 padding: 12px 0 12px 15px;
685 text-transform: uppercase;
688 .attributesContainertTitle{
690 margin-bottom: 9px !important;
698 background-color: #F4F9FE;
705 text-transform: uppercase;
710 background-color: #fff;
711 border: solid 1px #C1CDDD;
716 .add-attribute .btn:hover{
717 background-color: #1B3E6F;
719 .add-attribute .btn:hover i::before{
722 .add-attribute .btn:focus{
725 .icon-function-attribute{
732 .attributesContainertTitle .btn-group{
735 .attributesContainertTitle .btn{
736 margin-left: 8px !important;
737 padding: 1px 9px !important;
738 border-radius: 4px !important;
740 .attributesContainer h6{
744 line-height: 35px !important;
747 text-transform: uppercase;
753 border-color: #D0DFF1;
760 border-color: #D0DFF1;
766 .attributesContainer label{
769 /* text-transform: uppercase; */
774 .attributesContainer label.custom-control-label{
775 text-transform: unset;
778 .attributesContainer .form-group{
781 .attributesContainer .form-control{
782 border-color: #F0F5FC;
784 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
788 .attributesContainer .form-control:focus{
789 border-color: #66bfff;
790 box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
792 .attributesContainer .form-control::placeholder{
795 .attributesContainer .attribute-value{
796 text-transform: unset;
799 padding: 0 .75rem .375rem 0;
803 .attributesContainer textarea{
809 .optional-attribute::before{
816 .attributeOptions a:not(:first-child){
820 color: #103D73 !important;
826 .action-attributes .form-group{
827 display: inline-block;
830 /* line-height: 30px; */
832 .action-attributes .form-group:hover{
833 cursor: pointer !important;
834 background-color: #F5FAFF;
836 .action-attributes .form-group:hover label{
837 cursor: pointer !important;
838 /* padding-left: 12px; */
840 .action-attributes .form-group:hover .attributeOptions{
841 display: inline-block;
847 .btn-select-template{
848 background-color: #C3CDDB;
853 .btn-select-template i{
855 vertical-align: text-bottom;
858 padding-bottom: 15px;
860 border-bottom: solid 1px #F4F9FE;
862 .attribute-wrap .form-group{
865 .template-mapping-list{
869 .template-mapping-list p{
877 color: #103D73 !important;
881 font-size: 10px !important;
887 margin-bottom: 0 !important;
891 .card-header .btn-link,
892 .accordion .card-header .btn-link[aria-expanded="true"],
893 .accordion .card-header .btn-link[aria-expanded="false"]{
894 padding-left: 15px !important;
895 padding-right: 15px !important;
897 .accordion > .card .card-header{
899 padding: 0 !important;
900 background-color: #F4F9FE;
905 .accordion > .card .card-body{
906 padding-top: 20px !important;
907 padding-bottom: 0 !important;
909 .accordion .btn-link{
914 text-transform: uppercase;
918 font-size: 15px !important;
920 .accordion .btn-link:hover{
922 text-decoration: unset;
924 .accordion .card-header .btn-link[aria-expanded="true"]:after,
925 .accordion .card-header .btn-link[aria-expanded="false"]:after{
927 font-family: 'FontAwesome';
932 /* .accordion .card-header .btn-link[aria-expanded="true"]:after{
935 .accordion .card-header .btn-link[aria-expanded="false"]:after{
941 background-image: url(/assets/img/icon-add.svg);
942 background-position: center center;
943 background-repeat: no-repeat;
946 .btn-addAttribute:hover{
947 background-image: url(/assets/img/icon-add-hover.svg);
949 .btn-deleteAttribute{
952 border: solid .5px #FFC9CB;
967 border: 1px solid gray;
968 display: inline-block;
969 background: transparent;
973 background: transparent;
975 #board-paper svg .link {
981 pointer-events: none;
982 -webkit-user-select: none;
985 .attributesContainer .dropdown-text,
986 .dropdown-toggle:hover ~ .dropdown-text,
987 .dropdown-toggle:focus ~ .dropdown-text{
993 box-shadow: whitesmoke;
1013 padding-left: 30px!important;
1016 color: #1B3E6F !important;
1017 background-color: #fff !important;
1018 background-repeat: no-repeat;
1019 background-position: 10px center;
1021 .viewBtns .btn.active{
1022 background-color: #1B3E6F !important;
1023 color: #fff !important;
1028 width: 96.4% !important;
1029 height: 80vh !important;
1030 margin: 60px auto 0 !important;
1040 .templateLegend li:not(:last-child){
1043 .templateLegend .requirement i{
1046 .templateLegend .capability i{
1050 /* margin-right: -40px; */
1057 padding: 0 8px !important;
1062 height: 92vh !important;
1068 border-left: 1px solid rgba(66, 169, 192, 0.1);
1081 z-index: 0 !important;
1082 opacity: 0 !important;
1084 /* .modal-holder.modal-backdrop{z-index: 100}
1085 .modal-holder + .modal-dialog {z-index: 1000} */
1092 .createAttributeTabs .nav-link{
1093 padding-top: 0 !important;
1095 .createAttributeTabs .nav-item a,
1096 .createAttributeTabs .nav-item a.active{
1097 border-radius: 0 !important;
1099 .createAttributeTabs .nav-link{
1100 text-transform: uppercase !important;
1101 border-radius: 0 !important;
1102 border: 0 !important;
1104 .createAttributeTabs .nav-link.active{
1105 border-radius: 0 !important;
1106 border-bottom: solid 1px #1B3E6F !important;
1108 .createAttributeTabs .nav-item{
1111 .createAttributeTabs .tab-content{
1114 border: solid 1px #F4F9FE;
1117 .create-form .col-form-label{
1122 .create-form .col-form-label span{
1125 .create-form .form-control{
1131 border-bottom: solid 1px #EFEFF4;
1133 box-shadow: none !important;
1136 .create-form .form-control::placeholder{
1139 .create-form .form-control:focus{
1140 border-bottom-color: #1B3E6F;
1141 -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1142 -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1143 box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1144 background-color: transparent !important;
1149 padding: 9px 1.25rem;
1150 border-color: #E6EDF5;
1156 .list-group-item.active{
1158 background-color: #C3CDDB;
1159 border-color: #C3CDDB;
1161 .list-group-horizontal .list-group-item + .list-group-item{
1162 border-left-width: 1px;
1164 .create-form .custom-control-input:checked ~ .custom-control-label{
1165 background-color: transparent !important;