5 background: #FAFAFA !important;
6 /* background-image: linear-gradient(-45deg, #000 10%, #fff 0);
7 background-size: 6px 6px; */
9 /* font-family: 'Nunito' !important; */
10 font-family: Arial, Helvetica, sans-serif !important;
11 color: #1B3E6F !important;
18 transition: 0.3s !important;
21 .custom-control-label::before{
22 border: solid 1px #C3CDDB !important;
23 border-radius: 0 !important;
25 .custom-control-input:checked ~ .custom-control-label::before{
26 background: #1B3E6F !important;
28 .custom-radio .custom-control-label::before{
29 border-radius: 50% !important;
31 .custom-control-label{
35 .form-check-input + span{
36 display: inline-flex !important;
38 .form-check-input + span i{
39 margin-right: 9px !important;
42 background-color: #F4F9FE !important;
44 .label-input input[type="radio"]{
45 width: 14px !important;
50 font-size: 3px !important;
52 vertical-align: middle;
71 background-color:#fff;
87 .primary-nav .menu li{
101 vertical-align: middle;
107 text-decoration: none!important;
122 .menu-dropdown li .icon{
131 .menu-dropdown li.active .icon{
136 .menu-dropdown li:hover{
146 .menu input[type="checkbox"]{
149 input#menu[type="checkbox"]{
158 width: calc(100% - 50px);
159 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
161 #menu:checked + ul.menu-dropdown{
163 -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
164 animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
166 .sub-menu-checkbox:checked + ul.sub-menu-dropdown{
167 display: block!important;
168 -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
169 animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
170 border-top: solid 2px #1B3E6F;
172 .openNav .new-wrapper{
174 transform: translate3d(200px, 0, 0);
175 width: calc(100% - 250px);
176 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
179 background: transparent;
199 transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
200 background-color: #1B3E6F;
209 height: calc(100vh - 50px)!important;
211 border-top: 60px solid #fff;
217 position: absolute !important;
222 /* .sub-menu-dropdown{
223 background-color: #333;
230 .openNav .menu:hover{
237 transform: translate3d(200px, 0, 0);
238 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
240 @-webkit-keyframes grow{
268 .userProfile .dropdown{
271 .userProfile .dropdown:hover{
272 background: #172B4D !important;
274 .userProfile .dropdown-text{
275 background: transparent;
281 .import-container-all{
283 padding-bottom: 20px;
290 border: solid 1px #EEF4F9;
292 .import-container-input{
295 display: inline-block;
298 .import-container-input input{
301 padding: 5px 40px 5px 12px;
304 -webkit-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
305 -moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
306 box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
310 .import-container-input input:focus{
311 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18);
313 .import-container-input input::placeholder{
314 color: #959DA8 !important;
324 text-decoration: none;
326 .import-container-input input::placeholder{
329 .import-container-span{
332 .import-container-all .accordion .card-header{
333 background: #fff !important;
334 border-bottom: 0 !important;
336 .import-container-all .collapse.show{
337 border-top: solid 1px #ECEDF2;
339 .import-container-all .card-header .accordion-delete{
342 .import-container-all .card-header:hover .accordion-delete{
350 .accordion-delete:hover{
351 text-decoration: none;
353 /* .userProfile .dropdown-toggle{
356 .userProfile .dropdown-toggle:hover ~ .dropdown-text,
357 .userProfile .dropdown-toggle:focus ~ .dropdown-text{
358 background: transparent !important;
359 border-radius: 0 !important;
360 box-shadow: none !important;
363 .userProfile .dropdown-text::after {
368 background: url(/assets/img/img-userProfile.png) center center no-repeat;
370 .packagesFilter .custom-checkbox{
373 .packagesFilter .custom-control-label{
374 line-height: 28px !important;
375 font-size: 14px !important;
376 text-indent: 6px !important;
378 .packagesFilter .reset-filter{
382 border-top: solid 1px #ECEDF2;
385 .packagesFilter .reset-filter a:hover{
386 background: none !important;
387 text-decoration: none;
396 .sort-packages .dropdown{
399 .sort-packages .dropdown-text{
400 background: transparent;
405 .sort-packages .dropdown-text::after{
406 right: 18px !important;
407 border: solid !important;
408 border-color: #1B3E6F transparent transparent transparent !important;
410 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
411 top: 12px !important;
412 border-color: transparent transparent #1B3E6F transparent !important;
414 .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
415 .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
416 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
419 .sort-packages .dropdown-content:hover,
420 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
423 .sort-packages .dropdown-content{
429 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
431 .sort-packages .dropdown-content a{
435 .sort-packages .dropdown-content a:hover{
437 background-color: #F4F9FE;
438 text-decoration: unset;
445 .page-item .page-link,
446 .page-item.disabled .page-link{
448 background: transparent !important;
450 color: #1B3E6F !important;
454 .page-item.active .page-link,
456 color: #1B3E6F !important;
457 background-color: #fff !important;
458 border-radius: 100% !important;
459 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
462 /**Packages Cards***/
463 /***Package Info Card***/
464 .packages-card .card{
469 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
471 .packages-card .card-title{
472 margin-bottom: 0 !important;
477 .packages-card .card-title span{
480 vertical-align: bottom;
486 .packages-card p.package-desc{
489 display: -webkit-box;
490 -webkit-line-clamp: 1;
491 -webkit-box-orient: vertical;
494 .packages-card p.package-desc:hover{
495 color: #1B3E6F !important;
496 text-decoration: underline;
499 .packages-card [data-tooltip]::before,
500 .packages-card .tooltip::before{
501 border: 0 !important;
503 .packages-card .tooltip:after,
504 .packages-card [data-tooltip]:after {
508 border: solid 1px #E6EDF5;
509 box-shadow: 0 0 12 rgba(0,0,0,0.8);
512 /***Add Package Card***/
515 background: #F4F9FE !important;
516 border: solid 1px #D7E7F9 !important;
517 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
527 background-position: 15px center;
528 background-repeat: no-repeat;
531 .addPaackage-card a:hover{
532 text-decoration: unset;
534 .btn-create-package i,
535 .btn-import-package i{
538 vertical-align: middle;
541 .btn-create-package:hover{
542 background-color: #1B3E6F;
546 .btn-import-package:hover{
551 .packages-card .dropdown{
555 .packages-card .dropdown-text{
556 background: transparent;
561 border-bottom-left-radius: 0;
562 border-bottom-right-radius: 0;
565 .packages-card .dropdown-text:hover{
568 .packages-card .dropdown-text::after{
571 .packages-card .dropdown-text img{
574 .packages-card .dropdown-content{
581 /* .userProfile .dropdown-content{
582 bottom: 40px !important;
583 top: unset !important;
588 border-bottom-color: #ECEDF2 !important;
591 padding: 15px 20px 15px 20px !important;
592 text-transform: uppercase !important;
595 color: #C3CDDB !important;
596 border: none !important;
598 .nav-tabs .nav-link:focus,
599 .nav-tabs .nav-link:hover{
600 border: 0 !important;
603 .nav-tabs .nav-link:hover{
604 color: #1B3E6F !important;
606 .nav-tabs .nav-link.active{
607 color: #1B3E6F !important;
608 background: transparent !important;
609 border: 0 !important;
610 border-bottom: solid 2px #1B3E6F !important;
612 .nav-tabs .nav-link::before{
614 padding-right: 20px !important;
620 .nav-tabs .nav-link:first-child::before{
623 .nav-tabs .nav-link:first-child{
624 padding-left: 20px !important;
626 .nav-item.nav-link.complete,
627 .nav-item.active.complete{
628 padding: 15px 20px 15px 44px !important;
629 background: url(/assets/img/icon-required-yes.svg) 20px center no-repeat !important;
631 /**Sliding Search Input**/
636 transform: translate(0%,-0%);
642 padding-left: 0 !important;
643 padding-right: 24px !important;
646 background: url(../src/assets/img/icon-search.svg) center center no-repeat;
647 background-size: 24%;
648 border: 0 !important;
649 border-right: solid 1px #1B3E6F !important;
651 justify-content: center;
655 .searchBox:hover > .searchInput{
657 border-bottom: solid 1px #C3CDDB;
659 .searchBox > .searchInput:focus{
660 border-bottom: solid 1px #1B3E6F !important;
662 .searchBox:hover > .searchButton{
677 .searchInput::placeholder{
682 border-bottom: solid 1px #C3CDDB;
687 display: inline-block;
697 background-color: #eee;
698 border: 1px solid #ccc;
700 box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
703 .dropdown-text:after{
711 /* border-width: 5px 4px 0 4px;
712 border-color: #555 transparent transparent transparent; */
724 background: transparent;
729 .dropdown-toggle:focus{
740 -webkit-transition: all .25s ease;
741 -moz-transition: all .25s ease;
742 -ms-transition: all .25s ease;
743 -o-transition: all .25s ease;
744 transition: all .25s ease;
745 list-style-type: none;
749 background-color: #eee;
750 border: 1px solid #ccc;
755 .dropdown-content a:hover{
758 .dropdown-toggle:hover ~ .dropdown-text,
759 .dropdown-toggle:focus ~ .dropdown-text{
760 background-color: #e8e8e8;
762 .dropdown-toggle:focus ~ .dropdown-text{
763 box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
766 .dropdown-toggle:focus ~ .dropdown-text:after{
767 border-width: 0 4px 5px 4px;
768 border-color: transparent transparent #555 transparent;
770 .dropdown-content:hover,
771 .dropdown-toggle:focus ~ .dropdown-content{
780 transform: translateY(-3px);
783 transform: translateY(-6px);
788 transform: translateY(6px);
792 transform: translateY(3px);
796 transform: translateY(6px);
801 /* display: inline-block;
803 transition-duration: 0.2s;
804 transition-property: transform;
805 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
806 transform: translateZ(0); */
807 margin-bottom: 25px !important;
808 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
811 pointer-events: none;
820 background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
821 transition-duration: 0.2s;
822 transition-property: transform opacity;
825 transform: translateY(-3px);
826 animation-name: hover;
827 animation-duration: 1s;
828 animation-delay: 0.2s;
829 animation-timing-function: linear;
830 animation-iteration-count: 1;
831 animation-direction: alternate;
835 transform: translateY(3px);
836 animation-name: card;
837 animation-duration: 1s;
838 animation-delay: .2s;
839 animation-timing-function: linear;
840 animation-iteration-count: 1;
841 animation-direction: alternate;
844 padding: 20px !important;
849 padding: 0 !important;
851 .header-button-save button{
858 border-left: solid 1px #FAFAFA;
860 -webkit-box-shadow: 0 4px 10px 0 #eef0f5;
861 box-shadow: 0 4px 10px 0 #eef0f5;
865 width: calc(100% - 50px); */
878 padding: 0 30px !important;
880 .body-container > .container{
884 padding-right: 0 !important;
885 border-bottom: solid 1px #ECEDF2 !important;
887 /**Packages Filter**/
891 z-index: 220 !important;
893 .packagesFilter .dropdown-toggle{
894 height: 36px !important;
896 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
897 border-color: transparent transparent #1B3E6F transparent;
899 .packagesFilter .dropdown-text{
900 background: transparent;
907 .packagesFilter .dropdown-text::after{
909 border: solid !important;
910 border-width: 5px 4px 0 4px !important;
911 border-color: #1B3E6F transparent transparent transparent !important;
913 .packagesFilter .dropdown-toggle:hover ~ .dropdown-text,
914 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
915 background-color: transparent;
919 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
921 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
923 .packagesFilter .dropdown-text::after{
926 .packagesFilter .dropdown-content{
929 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
931 border-top-left-radius: 0;
932 border-top-right-radius: 0;
933 border-bottom-left-radius: 2px;
934 border-bottom-right-radius: 2px;
936 .packagesFilter .dropdown-content li:hover .custom-checkbox{
939 .packagesFilter .dropdown-content:hover,
940 .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
943 .packagesFilter .form-control{
944 padding: 12px 9px 12px 38px !important;
945 border: 0 !important;
946 border-bottom: solid 1px #D7E7F9 !important;
947 background: url(../src/assets/img/icon-search.svg) 15px center no-repeat;
949 border-radius: 0 !important;
953 .packagesFilter .form-control::placeholder{
956 .packagesFilter .form-control:focus{
957 box-shadow: none !important;
958 border-bottom: solid 1px #1B3E6F !important;
960 .packagesFilter .custom-checkbox{
963 .packagesFilter .custom-control-input{
966 .packagesFilter .custom-control-label{
967 line-height: 28px !important;
968 font-size: 13px !important;
969 text-indent: 6px !important;
977 .sort-packages .dropdown{
980 .sort-packages .dropdown-text{
981 background: transparent;
986 .sort-packages .dropdown-text::after{
987 border-color: #1B3E6F transparent transparent transparent;
989 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
990 border-color: transparent transparent #1B3E6F transparent;
992 .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
993 .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
994 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
997 .sort-packages .dropdown-content:hover,
998 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
1001 .sort-packages .dropdown-content{
1007 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1009 .sort-packages .dropdown-content a{
1013 .sort-packages .dropdown-content a:hover{
1014 background-color: #F4F9FE;
1015 text-decoration: unset;
1018 .page-item .page-link,
1019 .page-item.disabled .page-link{
1020 background: transparent !important;
1022 color: #1B3E6F !important;
1026 color: #1B3E6F !important;
1027 background-color: #fff !important;
1028 border-radius: 100%;
1030 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
1032 .page-item.disabled{
1035 /**Packages Cards***/
1036 /***Package Info Card***/
1037 .packages-card .card{
1041 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
1043 .packages-card .card:hover{
1044 box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17);
1045 transition: all 0.5s ease;
1048 .packages-card .card:hover .card-title,
1049 .packages-card .card:hover .card-title span{
1050 color: #1273EB !important;
1052 .packages-card .card-title{
1053 margin-bottom: 0 !important;
1057 .packages-card .card-title .packageName{
1059 display: inline-block;
1062 white-space: nowrap;
1064 text-overflow: ellipsis;
1066 vertical-align: bottom;
1069 .packages-card .card-title:hover,
1070 .packages-card .card-title:hover .packageName{
1071 text-decoration: none;
1074 .packages-card .card-body{
1075 padding-bottom: 0 !important;
1077 .packages-card .card-footer .col{
1081 /***Add Package Card***/
1083 background: #F4F9FE !important;
1084 border: solid 1px #D7E7F9 !important;
1086 .addPaackage-card:hover{
1087 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
1090 .addPaackage-card a:hover{
1091 text-decoration: unset;
1093 .addPaackage-card .card-footer .col{
1097 .addPaackage-card .card-footer .col:last-child{
1100 .btn-create-package,
1101 .btn-import-package{
1102 margin-bottom: 9px !important;
1104 .btn-create-package,
1105 .btn-create-package:hover{
1106 background-color: #1B3E6F;
1107 border-color: #1B3E6F;
1110 .btn-import-package,
1111 .btn-import-package:hover{
1114 /***Actions Menu***/
1115 .packages-card .dropdown{
1119 .packages-card .dropdown-text{
1120 background: transparent;
1125 border-bottom-left-radius: 0;
1126 border-bottom-right-radius: 0;
1129 .packages-card .dropdown-text::after{
1132 .packages-card .dropdown-text img{
1135 .packages-card .dropdown-content{
1142 border-top-right-radius: 0;
1143 background: #1B3E6F;
1145 .packages-card .dropdown-content a{
1149 /* background-position: 14px center;
1150 background-size: 10%;
1151 background-repeat: no-repeat; */
1153 .packages-card .dropdown-content a i{
1156 .packages-card .dropdown-content a:hover{
1157 background-color: #172B4D;
1158 text-decoration: unset;
1160 .packages-card .dropdown-content:hover,
1161 .packages-card .dropdown-toggle:focus ~ .dropdown-content{
1164 .packages-card .dropdown-toggle:focus ~ .dropdown-text .icon-menuDots{
1167 .packages-card .dropdown-toggle:hover ~ .dropdown-text{
1168 background: transparent;
1171 .packages-card .dropdown-toggle:focus ~ .dropdown-text{
1175 background: #1B3E6F;
1179 color: #C3CDDB !important;
1181 .package-version::before{
1185 vertical-align: text-bottom;
1188 /***Contributers***/
1189 ul.package-contributers{
1190 /*margin-bottom: 0 !important;*/
1191 padding-left: 0 !important;
1193 .package-contributers li{
1195 display: inline-block;
1197 .package-contributers li{
1200 .package-contributers li:first-child{
1203 .package-contributers li:last-child{
1207 .package-contributers button{
1208 height: 20px !important;
1209 padding: 0 !important;
1210 border-radius: 100%;
1211 border: 0 !important;
1213 -webkit-transition: box-shadow 0.2s ease;
1214 -moz-transition: box-shadow 0.2s ease;
1215 transition: box-shadow 0.2s ease;
1216 -webkit-backface-visibility: hidden;
1217 backface-visibility: hidden;
1218 display: inline-block;
1221 .package-modifier:before,
1222 .package-contributers button:before{
1223 -webkit-transition: all 0.2s ease;
1224 -moz-transition: all 0.2s ease;
1225 transition: all 0.2s ease;
1228 box-shadow: 0 0 0 2px #fff;
1235 .package-modifier:hover,
1236 .package-contributers button:hover{
1237 box-shadow: 0 0 0 2px #D7E7F9;
1238 text-decoration: none;
1240 .package-modifier:hover:before,
1241 .package-contributers button:hover:before{
1242 -webkit-transform: scale(0.925);
1243 -moz-transform: scale(0.925);
1244 -ms-transform: scale(0.925);
1245 -o-transform: scale(0.925);
1246 transform: scale(0.925);
1247 box-shadow: 0 0 0 1px #D7E7F9;
1250 .package-modifier img,
1251 .package-contributers button img{
1255 vertical-align: top;
1256 border-radius: 100%;
1258 .package-contributers a{
1262 .package-contributers a:hover{
1263 text-decoration: unset;
1265 /***Package Footer***/
1266 .packages-card .card-footer{
1267 padding: 0 !important;
1268 background: transparent !important;
1269 border-top-color: #F7F6F6 !important;
1271 .packages-card .card-footer .col{
1274 .packages-card .card-footer .col:first-child{
1275 border-right: solid 1px #F7F6F6;
1277 .packages-card .card-footer .btn{
1278 padding: 10px 0 10px 0 !important;
1279 background-color: transparent !important;
1280 color: #1B3E6F !important;
1286 .packages-card .card-footer .btn:hover{
1289 .packages-card .card-footer i{
1292 .icon-deployed-active,
1293 .icon-deploy-inactive{
1296 background-image: url(/assets/img/icon-deploy-active.svg);
1297 background-position: center center;
1298 background-repeat: no-repeat;
1299 vertical-align: baseline;
1301 .icon-deploy-inactive{
1302 background-image: url(/assets/img/icon-deploy-inactive.svg);
1315 display: inline-block;
1316 transition-duration: 0.3s;
1317 transition-property: box-shadow;
1318 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1319 transform: translateZ(0);
1320 box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
1321 /* Hack to improve aliasing on mobile/tablet devices */
1323 .border-fade:hover {
1324 box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
1325 /* Hack to improve aliasing on mobile/tablet devices */
1329 /**Title Action Buttons**/
1330 .page-title-actions li{
1331 display: inline-block;
1335 -webkit-transition: box-shadow 0.2s ease;
1336 -moz-transition: box-shadow 0.2s ease;
1337 transition: box-shadow 0.2s ease;
1338 -webkit-backface-visibility: hidden;
1339 backface-visibility: hidden;
1342 display: inline-block;
1348 text-transform: lowercase;
1352 .title-action:before{
1353 -webkit-transition: all 0.2s ease;
1354 -moz-transition: all 0.2s ease;
1355 transition: all 0.2s ease;
1358 box-shadow: 0 0 0 1px #000;
1365 .title-action:hover{
1366 box-shadow: 0 0 0 7px #07819b;
1367 text-decoration: none;
1369 .title-action:hover:before{
1370 -webkit-transform: scale(0.925);
1371 -moz-transform: scale(0.925);
1372 -ms-transform: scale(0.925);
1373 -o-transform: scale(0.925);
1374 transform: scale(0.925);
1375 box-shadow: 0 0 0 1px #07819b;
1379 /*Animation Button*/
1382 display: inline-block;
1383 transition-duration: 0.3s;
1384 transition-property: transform;
1385 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1386 transform: translateZ(0);
1387 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
1390 transform: translateY(-5px);
1394 /* Base styles for the element that has a tooltip */
1402 /* Base styles for the entire tooltip */
1403 [data-tooltip]:before,
1404 [data-tooltip]:after,
1409 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1410 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
1413 opacity 0.2s ease-in-out,
1414 visibility 0.2s ease-in-out,
1415 -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1417 opacity 0.2s ease-in-out,
1418 visibility 0.2s ease-in-out,
1419 -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1421 opacity 0.2s ease-in-out,
1422 visibility 0.2s ease-in-out,
1423 transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1424 -webkit-transform: translate3d(0, 0, 0);
1425 -moz-transform: translate3d(0, 0, 0);
1426 transform: translate3d(0, 0, 0);
1427 pointer-events: none;
1430 /* Show the entire tooltip on hover and focus */
1431 [data-tooltip]:hover:before,
1432 [data-tooltip]:hover:after,
1433 [data-tooltip]:focus:before,
1434 [data-tooltip]:focus:after,
1435 .tooltip:hover:before,
1436 .tooltip:hover:after,
1437 .tooltip:focus:before,
1438 .tooltip:focus:after {
1439 visibility: visible;
1440 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
1441 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
1445 /* Base styles for the tooltip's directional arrow */
1447 [data-tooltip]:before {
1449 border: 6px solid transparent;
1450 background: transparent;
1454 /* Base styles for the tooltip's content area */
1456 [data-tooltip]:after {
1460 background-color: #DEE8F3;
1461 background-color: rgba(222, 232, 243, 1.0);
1463 content: attr(data-tooltip);
1472 [data-tooltip]:before,
1473 [data-tooltip]:after,
1476 .tooltip-top:before,
1477 .tooltip-top:after {
1482 [data-tooltip]:before,
1484 .tooltip-top:before {
1486 margin-bottom: -12px;
1488 border-bottom-color: #DEE8F3;
1489 border-bottom-color: rgba(222, 232, 243, 1.0);
1492 /* Horizontally align top/bottom tooltips */
1493 [data-tooltip]:after,
1495 .tooltip-top:after {
1499 [data-tooltip]:hover:before,
1500 [data-tooltip]:hover:after,
1501 [data-tooltip]:focus:before,
1502 [data-tooltip]:focus:after,
1503 .tooltip:hover:before,
1504 .tooltip:hover:after,
1505 .tooltip:focus:before,
1506 .tooltip:focus:after,
1507 .tooltip-top:hover:before,
1508 .tooltip-top:hover:after,
1509 .tooltip-top:focus:before,
1510 .tooltip-top:focus:after {
1511 -webkit-transform: translateY(-12px);
1512 -moz-transform: translateY(-12px);
1513 transform: translateY(-12px);
1517 .tooltip-left:before,
1518 .tooltip-left:after {
1524 .tooltip-left:before {
1526 margin-right: -12px;
1528 border-top-color: transparent;
1529 border-left-color: #000;
1530 border-left-color: hsla(0, 0%, 20%, 0.9);
1533 .tooltip-left:hover:before,
1534 .tooltip-left:hover:after,
1535 .tooltip-left:focus:before,
1536 .tooltip-left:focus:after {
1537 -webkit-transform: translateX(-12px);
1538 -moz-transform: translateX(-12px);
1539 transform: translateX(-12px);
1543 .tooltip-bottom:before,
1544 .tooltip-bottom:after {
1550 .tooltip-bottom:before {
1553 border-top-color: transparent;
1554 border-bottom-color: #DEE8F3;
1555 border-bottom-color: rgba(222, 232, 243, 1.0);
1558 .tooltip-bottom:hover:before,
1559 .tooltip-bottom:hover:after,
1560 .tooltip-bottom:focus:before,
1561 .tooltip-bottom:focus:after {
1562 -webkit-transform: translateY(12px);
1563 -moz-transform: translateY(12px);
1564 transform: translateY(12px);
1568 .tooltip-right:before,
1569 .tooltip-right:after {
1574 .tooltip-right:before {
1577 border-top-color: transparent;
1578 border-right-color: #000;
1579 border-right-color: hsla(0, 0%, 20%, 0.9);
1582 .tooltip-right:hover:before,
1583 .tooltip-right:hover:after,
1584 .tooltip-right:focus:before,
1585 .tooltip-right:focus:after {
1586 -webkit-transform: translateX(12px);
1587 -moz-transform: translateX(12px);
1588 transform: translateX(12px);
1591 /* Move directional arrows down a bit for left/right tooltips */
1592 .tooltip-left:before,
1593 .tooltip-right:before {
1597 /* Vertically center tooltip content for left/right tooltips */
1598 .tooltip-left:after,
1599 .tooltip-right:after {
1601 margin-bottom: -16px;
1604 /*TooltipModule - Shady*/
1607 width: 100% !important;
1609 .tooltip .tooltip-inner{
1610 max-width: 280px !important;
1611 width: 100% !important;
1612 text-align: left!important;
1614 background-color: #F4F9FE;
1615 border: solid 1px #E6EDF5;
1616 border-radius: 3px !important;
1619 .bs-tooltip-bottom .arrow::before{
1620 border-bottom-color: #E6EDF5 !important;
1622 .bs-tooltip-top .arrow::before{
1623 border-top-color: #E6EDF5 !important;
1630 padding-right: 20px !important;
1631 padding-left: 20px !important;
1635 border-radius: 20px !important;
1638 background-color: #1273EB !important;
1639 border-color: #1273EB !important;
1641 .btn-primary:hover {
1642 background-color: #0069d9 !important;
1643 border-color: #0062cc !important;
1648 .package-view-button button{
1652 .package-view-button{
1655 .package-view-button .btn{
1660 .package-view-button .btn:hover{
1663 .package-view-button .btn-primary{
1664 background-color: #1B3E6F !important;
1665 border-color: #1B3E6F !important;
1667 /* margin-bottom: 10px; */
1669 .package-view-button .btn-outline-secondary{
1670 background-color: #fff !important;
1671 border-color: #D0DFF1 !important;
1672 color: #1B3E6F !important;
1674 .package-view-title {
1681 .package-view-title+p{
1685 .package-view-title+ul{
1688 .package-view-button .btn-outline-secondary i{
1696 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
1698 .card.creat-card .single-line{
1699 padding: 15px 25px 15px;
1701 .card.creat-card .single-line-model{
1704 .card.creat-card .editor-container{
1710 .single-line-model label{
1712 border-bottom: 1px solid #FAFAFA;
1715 .single-line-model .label-name{
1718 .single-line-model .label-input{
1719 width: calc(100% - 325px);
1721 .single-line-model input{
1722 border-bottom: 1px solid #FAFAFA !important;
1723 padding: 15px 25px 15px 0px;
1725 .customKeyTitle span{
1726 color: #C3CDDB !important;
1729 .single-line-model input:focus,
1730 .single-line-custom-key input:focus{
1731 border-bottom-color: #1B3E6F !important;
1733 .model-note-container{
1734 width: calc(100% - 325px);
1735 padding: 0px 25px 0px 0px ;
1743 margin-bottom: 25px;
1748 padding: 5px 25px 5px 0px;
1752 background: #E0E8F2;
1755 border-radius: 50px;
1758 margin-bottom: 10px;
1766 display: inline-block;
1777 background: #FFE6E7;
1778 border: 1px solid #FFC9CB;
1779 padding: 3px 10px 2px;
1785 background: #FFC9CB;
1786 border: 1px solid #FF6469;
1787 text-decoration: none;
1790 width: calc(100% - 300px);
1791 display: inline-block;
1794 margin-left: 0px !important;
1795 margin-top: 2px !important;
1797 .form-check-input+span{
1803 .form-check-input+span i{
1815 transition: all 250ms ease-out;
1817 .label-input input[type=radio]{
1820 .label-input input[type=radio]+span{
1823 margin-right: 100px;
1825 .single-line select{
1828 padding-right: 50px;
1830 border: solid 1px #EEF4F9;
1832 background: url(/assets/img/arrow.svg) 90% center #F4F9FE no-repeat;
1833 background-size: 10px;
1835 -webkit-appearance: none;
1836 -moz-appearance: none;
1842 .single-line select:focus{
1843 box-shadow: 0 0 0 0;
1845 .single-line select option:first-child{
1848 .single-line-model input::placeholder{
1852 .single-line-model.error{
1855 .single-line-model.error input{
1857 border-bottom: 1px solid #FF6469 !important;
1859 .single-line .custom-key{
1865 .single-line .custom-key:focus{
1869 padding:70px 100px 70px 70px;
1874 margin-bottom: 21px;
1876 .single-line-custom-key{
1878 display: inline-block;
1880 .single-line-custom-key-delete{
1882 display: inline-block;
1883 border-bottom: 1px solid #FAFAFA;
1884 padding: 13px 12px 14px;
1886 .single-line-custom-key label{
1889 border-bottom: 1px solid #FAFAFA;
1892 .single-line-custom-key input{
1893 border-bottom: 1px solid #FAFAFA !important;
1894 padding: 15px 25px 15px 0;
1896 .single-line-custom-key input::placeholder{
1900 .single-line-custom-key .label-input{
1901 width: calc(100% - 150px);
1903 .single-line-custom-key .label-name span{
1904 color: #C3CDDB !important;
1908 background: transparent;
1913 .custom-key-delete:focus{
1918 margin-top: 0rem !important;
1919 margin-bottom: 0rem !important;
1920 border-top: 1px solid #efefef !important;
1922 .creat-action-container{
1930 margin-bottom: 12px;
1935 display: inline-block;
1937 .action-button:hover{
1938 text-decoration: none;
1942 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
1947 border-radius: 40px;
1950 display: inline-block;
1952 .action-button i.icon-save-sm{
1953 background: #1273EB;
1957 .action-button i.icon-discard-sm{
1961 .action-button.save{
1964 .action-button.delete{
1967 .action-button.delete i{
1970 .action-button.delete:hover{
1979 margin-top: 60px !important;
1982 z-index: 11000000 !important;
1983 background: rgba(27, 62, 111, 0.10) !important;
1986 border-radius: 2px !important;
1987 border: 0 !important;
1988 box-shadow: 0 2px 6px rgba(47, 83, 151, .10);;
1991 font-size: 14px !important;
1994 padding: 1.5rem 1.5rem 1rem !important;
2003 border-bottom-color: #ECEDF2 !important;
2004 padding: .7rem 1.5rem !important;
2007 border-top: 0 !important;
2013 border: 0 !important;
2015 .modal-footer .btn-primary{
2016 background-color: #1B3E6F !important;
2018 .modal-footer .btn-secondary,
2019 .modal-footer .btn-secondary:hover{
2020 background-color: transparent;
2024 .modal-footer .btn-secondary:hover{
2027 .modal-footer .btn-secondary:active{
2028 background-color: #E7F1FC !important;
2029 color: #1B3E6F !important;
2031 .action-button span{
2033 display: inline-block;
2036 .creat-action-container hr{
2038 padding-bottom: 18px;
2040 .btn-link:hover, .btn-link:focus{
2041 text-decoration: none !important;
2045 font-family:'FontAwesome';
2049 .btn-link.collapsed::before{
2051 font-family:'FontAwesome';
2058 .ngx-file-drop__content{
2059 background: #F4F9FE;
2061 height: auto !important;
2062 display: inline-block !important;
2065 .ngx-file-drop__drop-zone{
2066 border: 1px dashed #D7E7F9 !important;
2067 border-radius: 0px !important;
2068 height: auto !important;
2072 margin: 15px auto 18px;
2073 display: inline-block;
2076 .btn-group-sm>.btn, .btn-sm{
2080 margin-bottom: 15px;
2084 .folder-upload-text{
2087 display: inline-block;
2092 .folder-upload-text button{
2096 .folder-upload-type{
2101 display: inline-block;
2108 border: dashed 1px #D7E7F9;
2110 .upload-table tr th{
2111 border-bottom: solid 1px #F4F9FE !important;
2113 .upload-table .table thead th{
2115 border-top: 0px !important;
2116 font-weight: normal;
2119 .upload-table tr:last-child th{
2120 border-bottom: 0 !important;
2122 .upload-table .table{
2123 margin-bottom: 0px !important;
2125 .nav-tabs .nav-link{
2128 .nav-tabs .nav-link.tab-done{
2129 padding-left: 40px !important;
2131 .nav-tabs .nav-link.tab-done::after{
2134 font-family: 'FontAwesome';
2140 .authentication-container-all{
2141 background: #F4F9FE;
2142 border:1px solid #D0DFF1 ;
2146 .authentication-header{
2152 padding: 10px 20px ;
2154 .authentication-search{
2162 .authentication-search::after{
2164 font-family: 'FontAwesome';
2169 .authentication-search input{
2175 padding: 10px 20px 10px 35px;
2177 border-top: 1px solid #D7E7F9;
2179 .authentication-search input::placeholder{
2184 .authentication-accordion{
2190 .authentication-accordion .card{
2191 border-radius: 0px !important;
2192 margin-bottom: 10px !important;
2194 .authentication-accordion .card-header{
2195 padding: 0px !important;
2196 background: #fff !important;
2197 border-radius: 0px !important;
2201 .authentication-accordion .card-header .btn-link{
2205 padding: 9px 0px !important;
2209 .authentication-accordion .custom-control{
2210 display: inline-block;
2212 .authentication-accordion .btn-link::before{
2215 .authentication-accordion .btn-link.collapsed::before{
2218 .template-mapping-accordion{
2224 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2225 border: 0px !important;
2228 padding: 0px 25px !important;
2229 background: #F4F9FE !important;
2230 border-radius: 0px !important;
2231 border-bottom: 1px solid #ECEDF2 !important;
2233 .template-mapping-accordion .card-body{
2234 padding: 20px 26px 0 !important;
2237 .card-header .btn-link{
2241 padding: 9px 0px !important;
2246 margin-bottom: 0px !important;
2247 border-top: 1px solid #ECEDF2 !important;
2249 .template-mapping-accordion .card{
2250 margin-bottom: 25px !important;
2253 display: inline-block;
2258 .btn-link.collapsed::before{
2262 padding: 12px 20px 9px 20px;
2272 background: #F4F9FE;
2273 border: 1px solid #D7E7F9;
2281 .select-type:hover, .select-type.active{
2282 background: #1B3E6F;
2283 border: 1px solid #D7E7F9;
2285 text-decoration: none;
2290 .select-type::before{
2292 border: 1px solid #1273EB;
2295 border-radius: 18px;
2296 display: inline-block;
2300 .select-type:hover::before, .select-type.active::before{
2301 border: 1px solid #fff;
2303 .select-type.active::after{
2308 border-radius: 18px;
2309 display: inline-block;
2314 .ace-tomorrow-night-bright .ace_print-margin{
2315 left: 100% !important;
2316 background: #eee !important;
2322 .ace-eclipse .ace_print-margin{
2326 height: 55vh !important;
2328 border: 1px solid #ECEDF2;
2329 background-color: #fff;
2332 .ace-tomorrow-night-bright .ace_gutter,
2333 .ace-eclipse .ace_gutter{
2334 background: #E0E8F2 !important;
2335 border-right: 0px !important;
2336 color: #1B3E6F !important;
2338 .ace-tomorrow-night-bright .ace_gutter-active-line,
2339 .ace-eclipse .ace_gutter-active-line{
2340 background-color: #265699;
2343 .ace-tomorrow-night-bright .ace_cursor{
2346 .ace-tomorrow-night-bright .ace_marker-layer .ace_active-line {
2353 .breadcrumb-header li{
2355 display: inline-block;
2359 .breadcrumb-header li:last-child::after{
2363 .breadcrumb-header li:last-child{
2364 /* background: #F4F9FE; */
2365 border-radius: 50px;
2367 padding: 0 10px 0 0;
2369 .breadcrumb-header li:first-child,
2370 .breadcrumb-header li:first-child a{
2374 color: #1B3E6F !important;
2376 background: transparent;
2378 .create-template-import{
2380 margin: 30px 0px 10px ;
2383 .create-template-import a:hover{
2384 text-decoration: none;
2386 .mapping-source-load{
2390 display: inline-table;
2392 margin-bottom: 10px;
2393 margin:15px 30px 20px;
2395 .mapping-source-load:hover{
2396 text-decoration: none;
2398 .mapping-source-load i {
2402 border-radius: 100px;
2405 display: inline-block;
2407 margin-bottom: 20px;
2409 .mapping-source-load:hover i{
2410 background: #F4F9FE;
2412 .mapping-source-load:hover span{
2419 .template-mapping-list{
2420 background: #F4F9FE;
2421 border: 1px solid #E9F3FF;
2423 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2425 display: inline-block;
2426 margin-bottom: 20px;
2429 .template-mapping-list:hover, .template-mapping-list.active {
2430 background: #1B3E6F;
2431 text-decoration: none;
2432 color: #fff !important;
2436 .template-mapping-list:hover{
2440 .template-mapping-list span{
2445 border-radius: 50px;
2452 padding-bottom: 5px !important;
2455 .create-template-mapping-button{
2456 background: #C3CDDB;
2457 border-radius: 50px;
2460 margin-bottom: 20px;
2461 display: inline-block;
2464 .create-template-mapping-button i{
2467 .view-package-container{
2472 background: #C1CDDD;
2475 border-radius: 48px;
2476 display: inline-block;
2480 /* margin-right: 20px; */
2490 .package-name-container{
2491 width: calc(100% - 60px);
2492 display: inline-block;
2511 vertical-align: baseline;
2513 .package-description{
2516 font-weight: normal;
2521 .package-auth-info p{
2524 .package-auth-info div{
2526 border-right: solid 1px #F4F9FE;
2528 .package-auth-info div:first-child{
2531 .package-auth-info .col-4:first-child{
2534 .package-auth-info div:last-child{
2537 .package-auth-info .package-contributers{
2538 margin-bottom: 0 !important;
2540 .package-auth-info .package-contributers button img{
2544 .template-mapping-action{
2547 margin-bottom: 30px;
2549 .template-mapping-action button{
2550 border-radius: 50px;
2554 .template-mapping-action .btn-primary{
2555 background:#5DBDBA !important ;
2556 border-color:#5DBDBA !important ;
2557 color: #fff !important ;
2559 .template-mapping-action .btn-outline-secondary{
2560 background:#fff !important ;
2561 border-color:#ECEDF2 !important ;
2562 color: #C3CDDB !important ;
2568 server-side-angular-way.component.css
2570 .no-data-available {
2575 src/styles.css (i.e. your global style)
2583 color: #1B3E6F !important;
2588 .dataTables_filter input{
2590 background: url(../src/assets/img/icon-search.svg) 9px center no-repeat;
2591 padding: 4px 9px 4px 24px;
2592 border: solid 1px #ECEDF2;
2595 .dataTables_filter input:focus{
2596 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2600 width: auto !important;
2601 padding: 7px 20px 7px 0;
2602 border-bottom: solid 1px #ECEDF2;
2605 #mapping-table th:first-child,
2606 #mapping-table td:first-child{
2609 #mapping-table tbody tr:hover{
2610 background-color: #F4F9FE;
2614 padding-bottom: 10px;
2615 background: #F4F9FE;
2620 table.dataTable.no-footer{
2622 border-bottom: solid 1px #ECEDF2 !important;
2626 color: #1B3E6F !important;
2630 .dataTables_wrapper .dataTables_paginate,
2631 .dataTables_wrapper .dataTables_paginate a.paginate_button,
2632 .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
2633 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
2635 color: #1B3E6F !important;
2638 border: 0 !important;
2640 .dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
2642 color: #1B3E6F !important;
2643 background: none !important;
2645 .dataTables_wrapper .dataTables_paginate a.paginate_button{
2646 padding: 0.4em .9em !important;
2648 .dataTables_wrapper .dataTables_paginate a.paginate_button.current{
2649 color: #1B3E6F !important;
2650 background: #F4F9FE !important;
2651 border: solid 1px #EEF4F9 !important;
2652 border-radius: 100% !important;
2653 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2656 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
2659 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
2661 background: none !important;
2662 border: 0 !important;
2664 #mapping-table .form-control,
2665 #mapping-table .custom-select{
2667 border-color: #EEF4F9;
2672 #mapping-table .form-control{
2673 box-shadow: 0 2px 4px rgba(47,83,151,0.1);
2675 #mapping-table tbody tr:hover .form-control:focus,
2676 #mapping-table tbody tr:hover .custom-select{
2677 background-color: #fff !important;
2679 #mapping-table .custom-select{
2680 background-color: #F4F9FE;
2683 #mapping-table .form-control:disabled{
2687 background: transparent;
2690 /* Extra small devices (portrait phones, less than 576px) */
2691 @media (max-width: 575.98px) {
2697 /* Small devices (landscape phones, 576px and up) */
2698 @media (min-width: 576px) and (max-width: 767.98px) {
2702 /* Medium devices (tablets, 768px and up) */
2703 @media (min-width: 768px) and (max-width: 991.98px) {
2707 /* Large devices (desktops, 992px and up) */
2708 @media (min-width: 992px) and (max-width: 1199.98px) {
2712 /* Extra large devices (large desktops, 1200px and up) */
2713 @media (min-width: 1200px) {