5 background: #FAFAFA !important; /*FDFDFD*/
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 outline: 0 !important;
24 .form-control[readonly]{
25 background-color: inherit !important;
26 opacity: .85 !important;
29 .custom-control-input:checked ~ .custom-control-label::before{
30 border-color: transparent !important;
33 transition: all .2s ease-out !important;
36 background: #fff !important;
37 border: solid 1px #ECEDF2 !important;
38 color: #FF6469 !important;
40 .btn-secondary:not(:disabled):not(.disabled).active,
41 .btn-secondary:not(:disabled):not(.disabled):active{
42 border-color: transparent !important;
44 .btn-secondary:not(:disabled):not(.disabled).active:focus,
45 .btn-secondary:not(:disabled):not(.disabled):active:focus{
46 box-shadow: none !important;
47 border-color: transparent !important;
54 opacity: .5 !important;
56 .custom-control-label::before{
57 border: solid 1px #C3CDDB !important;
58 border-radius: 0 !important;
60 .reuiredInput .custom-control-label::before{
61 width: 18px !important;
62 height: 18px !important;
63 border-radius: 50% !important;
69 .reuiredInput .custom-control-label::after{
71 color: #C4CEDB !important;
72 width: 18px !important;
73 height: 18px !important;
77 .reuiredInput .custom-control-input:checked ~ .custom-control-label::after{
79 left: -24px !important;
82 .reuiredInput .custom-control-input:checked ~ .custom-control-label::before{
83 background: #66BB00 !important;
85 .custom-control-input:checked ~ .custom-control-label::before{
86 background: #1B3E6F !important;
88 .custom-radio .custom-control-label::before{
89 border-radius: 50% !important;
91 .custom-control-label{
95 .form-check-input + span{
96 display: inline-flex !important;
98 .form-check-input + span i{
99 margin-right: 9px !important;
102 background-color: #F4F9FE !important;
104 .label-input input[type="radio"]{
105 width: 14px !important;
108 .btn[aria-expanded="true"] > .card{
111 .card-header .btn[aria-expanded="true"],
112 .card-header .btn[aria-expanded="false"]{
113 padding-left: 25px !important;
114 padding-right: 25px !important;
115 border-radius: 0 !important;
117 .card-header .btn[aria-expanded="true"]{
118 background-color:#F4F9FE;
120 .card-header .btn[aria-expanded="false"]{
121 background-color:#fff;
125 border-radius: 2px !important;
126 color: #1B3E6F !important;
127 font-size: 13px !important;
128 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
131 border-left: solid 5px #66BB00 !important;
132 background: url(/assets/img/icon-required-yes.svg) 12px center #fff no-repeat !important;
135 border-left: solid 5px #FF6469 !important;
136 background: url(/assets/img/icon-error.svg) 12px center #fff no-repeat !important;
137 background-size: 18px !important;
140 border-left: solid 5px #1273EB !important;
141 background: url(/assets/img/icon-info-color.svg) 12px center #fff no-repeat !important;
145 font-size: 3px !important;
147 vertical-align: middle;
152 padding: 9px 6px 0px;
174 background-color:#fff;
198 .primary-nav .menu li{
205 pointer-events: none;
212 vertical-align: middle;
218 text-decoration: none!important;
233 .menu-dropdown li .icon{
242 .menu-dropdown li.active .icon{
247 .menu-dropdown li:hover{
257 .menu input[type="checkbox"]{
260 input#menu[type="checkbox"]{
269 width: calc(100% - 50px);
270 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
272 #menu:checked + ul.menu-dropdown{
274 -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
275 animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
277 .sub-menu-checkbox:checked + ul.sub-menu-dropdown{
278 display: block!important;
279 -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
280 animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
281 border-top: solid 2px #1B3E6F;
283 .openNav .new-wrapper{
285 transform: translate3d(200px, 0, 0);
286 width: calc(100% - 250px);
287 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
290 background: transparent;
310 transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
311 background-color: #1B3E6F;
320 height: calc(100vh - 50px)!important;
322 border-top: 60px solid #fff;
328 position: absolute !important;
333 /* .sub-menu-dropdown{
334 background-color: #333;
341 .openNav .menu:hover{
348 transform: translate3d(200px, 0, 0);
349 transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
351 @-webkit-keyframes grow{
379 .userProfile .dropdown{
382 .userProfile .dropdown:hover{
383 background: #172B4D !important;
385 .userProfile .dropdown-text{
386 background: transparent;
392 .import-container-all{
394 padding-bottom: 20px;
401 border: solid 1px #EEF4F9;
403 .import-container-input{
406 display: inline-block;
409 .import-container-input input{
412 padding: 5px 40px 5px 12px;
415 -webkit-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
416 -moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
417 box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
421 .import-container-input input:focus{
422 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18);
424 .import-container-input input::placeholder{
425 color: #959DA8 !important;
435 text-decoration: none;
437 .import-container-input input::placeholder{
440 .import-container-span{
443 .import-container-all .accordion .card-header{
444 padding: 0 !important;
445 background: #fff !important;
446 border-bottom: 0 !important;
448 .import-container-all .collapse.show{
449 border-top: solid 1px #ECEDF2;
451 .import-container-all .card-header .accordion-delete{
457 .import-container-all .card-header:hover .accordion-delete{
465 .accordion-delete:hover{
466 text-decoration: none;
468 /* .userProfile .dropdown-toggle{
471 .userProfile .dropdown-toggle:hover ~ .dropdown-text,
472 .userProfile .dropdown-toggle:focus ~ .dropdown-text{
473 background: transparent !important;
474 border-radius: 0 !important;
475 box-shadow: none !important;
478 .userProfile .dropdown-text::after {
483 background: url(/assets/img/img-userProfile.png) center center no-repeat;
485 .packagesFilter .custom-checkbox{
488 .packagesFilter .custom-control-label{
489 line-height: 28px !important;
490 font-size: 14px !important;
491 text-indent: 6px !important;
493 .packagesFilter .reset-filter{
497 border-top: solid 1px #ECEDF2;
500 .packagesFilter .reset-filter a:hover{
501 background: none !important;
502 text-decoration: none;
516 .sort-packages .dropdown{
519 .sort-packages .dropdown-text{
520 background: transparent;
525 .sort-packages .dropdown-text::after{
526 right: 18px !important;
527 border: solid !important;
528 border-color: #1B3E6F transparent transparent transparent !important;
530 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
531 top: 12px !important;
532 border-color: transparent transparent #1B3E6F transparent !important;
534 .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
535 .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
536 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
539 .sort-packages .dropdown-content:hover,
540 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
543 .sort-packages .dropdown-content{
549 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
551 .sort-packages .dropdown-content a{
555 .sort-packages .dropdown-content a:hover{
557 background-color: #F4F9FE;
558 text-decoration: unset;
565 .page-item .page-link,
566 .page-item.disabled .page-link{
568 background: transparent !important;
570 color: #1B3E6F !important;
574 .page-item.active .page-link,
576 color: #1B3E6F !important;
577 background-color: #fff !important;
578 border-radius: 100% !important;
579 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
582 /**Packages Cards***/
583 /***Package Info Card***/
584 .packages-card .card{
589 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
591 .packages-card .card:hover .packageName{
592 color: #1273EB !important;
594 .packages-card .card-title{
595 margin-bottom: 0 !important;
600 .packages-card .card-title span{
603 vertical-align: bottom;
609 .packages-card p.package-desc{
614 display: -webkit-box;
615 -webkit-line-clamp: 1;
616 -webkit-box-orient: vertical;
620 .packages-card p.package-desc:hover{
621 color: #1B3E6F !important;
622 text-decoration: underline;
633 .packages-card [data-tooltip]::before,
634 .packages-card .tooltip::before{
635 border: 0 !important;
637 .packages-card .tooltip:after,
638 .packages-card [data-tooltip]:after {
642 border: solid 1px #E6EDF5;
643 box-shadow: 0 0 12 rgba(0,0,0,0.8);
646 /***Add Package Card***/
649 background: #F4F9FE !important;
650 border: solid 1px #D7E7F9 !important;
651 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
653 .addPaackage-card .card-body img{
655 vertical-align: text-top;
665 background-position: 15px center;
666 background-repeat: no-repeat;
669 .addPaackage-card a:hover{
670 text-decoration: unset;
672 .btn-create-package i,
673 .btn-import-package i{
676 vertical-align: middle;
679 .btn-create-package:hover{
680 background-color: #1B3E6F;
684 .btn-import-package:hover{
689 .packages-card .dropdown{
693 .packages-card .dropdown-text{
694 background: transparent;
699 border-bottom-left-radius: 0;
700 border-bottom-right-radius: 0;
703 .packages-card .dropdown-text:hover{
706 .packages-card .dropdown-text::after{
709 .packages-card .dropdown-text img{
712 .packages-card .dropdown-content{
719 /* .userProfile .dropdown-content{
720 bottom: 40px !important;
721 top: unset !important;
726 border-bottom-color: #ECEDF2 !important;
729 padding: 15px 20px 15px 20px !important;
730 text-transform: uppercase !important;
733 color: #C3CDDB !important;
734 border: none !important;
736 .nav-tabs .nav-link:focus,
737 .nav-tabs .nav-link:hover{
738 border: 0 !important;
741 .nav-tabs .nav-link:hover{
742 color: #1B3E6F !important;
744 .nav-tabs .nav-link.active{
745 color: #1B3E6F !important;
746 background: transparent !important;
747 border: 0 !important;
748 border-bottom: solid 2px #1B3E6F !important;
750 .nav-tabs .nav-link::before{
752 padding-right: 20px !important;
758 .nav-tabs .nav-link:first-child::before{
761 .nav-tabs .nav-link:first-child{
762 padding-left: 20px !important;
764 .nav-item.nav-link.complete,
765 .nav-item.active.complete{
766 padding: 15px 20px 15px 44px !important;
767 background: url(/assets/img/icon-required-yes.svg) 20px center no-repeat !important;
773 /**Sliding Search Input**/
778 transform: translate(0%,-0%);
784 padding-left: 0 !important;
785 padding-right: 24px !important;
788 background: url(../src/assets/img/icon-search.svg) center center no-repeat;
789 background-size: 24%;
790 border: 0 !important;
791 border-right: solid 1px #1B3E6F !important;
793 justify-content: center;
797 .searchBox:hover > .searchInput{
799 border-bottom: solid 1px #C3CDDB;
801 .searchBox:hover > .searchInput::placeholder{
804 .searchBox > .searchInput:focus{
805 border-bottom: solid 1px #1B3E6F !important;
806 -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
807 -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
808 box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
810 .searchBox:hover > .searchButton{
825 .searchInput::placeholder{
830 border-bottom: solid 1px #C3CDDB;
835 display: inline-block;
845 background-color: #eee;
846 border: 1px solid #ccc;
848 box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
851 .dropdown-text:after{
859 /* border-width: 5px 4px 0 4px;
860 border-color: #555 transparent transparent transparent; */
872 background: transparent;
877 .dropdown-toggle:focus{
888 -webkit-transition: all .25s ease;
889 -moz-transition: all .25s ease;
890 -ms-transition: all .25s ease;
891 -o-transition: all .25s ease;
892 transition: all .25s ease;
893 list-style-type: none;
897 background-color: #eee;
898 border: 1px solid #ccc;
903 .dropdown-content a:hover{
906 .dropdown-toggle:hover ~ .dropdown-text,
907 .dropdown-toggle:focus ~ .dropdown-text{
908 background-color: #e8e8e8;
910 .dropdown-toggle:focus ~ .dropdown-text{
911 box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
914 .dropdown-toggle:focus ~ .dropdown-text:after{
915 border-width: 0 4px 5px 4px;
916 border-color: transparent transparent #555 transparent;
918 .dropdown-content:hover,
919 .dropdown-toggle:focus ~ .dropdown-content{
928 transform: translateY(-3px);
931 transform: translateY(-6px);
936 transform: translateY(6px);
940 transform: translateY(3px);
944 transform: translateY(6px);
949 /* display: inline-block;
951 transition-duration: 0.2s;
952 transition-property: transform;
953 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
954 transform: translateZ(0); */
955 margin-bottom: 25px !important;
956 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
959 pointer-events: none;
968 background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
969 transition-duration: 0.2s;
970 transition-property: transform opacity;
973 transform: translateY(-3px);
974 animation-name: hover;
975 animation-duration: 1s;
976 animation-delay: 0.2s;
977 animation-timing-function: linear;
978 animation-iteration-count: 1;
979 animation-direction: alternate;
983 transform: translateY(3px);
984 animation-name: card;
985 animation-duration: 1s;
986 animation-delay: .2s;
987 animation-timing-function: linear;
988 animation-iteration-count: 1;
989 animation-direction: alternate;
992 padding: 10px 20px 20px !important;
997 padding: 0 !important;
999 /*Profile & Help Area*/
1000 .profile-help .navbar{
1001 padding: 0 !important;
1003 .profile-help .dropdown{
1006 .profile-help .dropdown-text{
1008 background: transparent;
1011 /* text-indent: -999px; */
1013 .profile-help .dropdown-text img{
1016 border: solid 1px #fff;
1020 .profile-help .dropdown-toggle:hover ~ .dropdown-text{
1023 .profile-help .dropdown-toggle:hover ~ .dropdown-text img{
1024 box-shadow: 0 2px 6px 6px rgba(47, 83, 151, .17);
1026 .profile-help .dropdown-content{
1030 background-color: #fff;
1031 border: 1px solid #ECEDF2;
1033 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12) !important;
1035 .profile-help .dropdown-content li:hover{
1036 background-color: #ECEDF2;
1038 .profile-help .dropdown-content a{
1043 .profile-help .dropdown-content a:hover{
1044 text-decoration: none;
1045 background-color: transparent;
1049 border-left: solid 1px #ECEDF2;
1052 width: 32px !important;
1054 .helpMenu .dropdown-text{
1059 .helpMenu li:hover i,
1060 .helpMenu li:hover p{
1063 .helpMenu li:not(:last-child){
1066 .helpMenu .dropdown-text i{
1070 vertical-align: middle;
1072 .helpMenu:hover .dropdown-text i{
1075 .helpMenu .dropdown-content{
1078 .helpMenu .dropdown-content a{
1079 padding: 5px 12px !important;
1085 .helpMenu .dropdown-content p{
1090 .helpMenu .dropdown-content p:hover{
1093 .helpMenu .dropdown-content p label{
1096 .helpMenu .dropdown-content p input{
1099 .helpMenu .dropdown-content span{
1100 display: inline-block;
1104 font-weight: normal;
1106 .helpMenu .dropdown-toggle:focus ~ .dropdown-text{
1107 background-color: #F4F9FE;
1110 .helpMenu .dropdown-content{
1114 border-right: solid 1px #ECEDF2;
1116 .help-btn .nav-link{
1117 padding: 7px 8px 0 !important;
1123 .help-btn a:hover i{
1126 .header-button-save button{
1127 border-radius: 50px;
1133 border-left: solid 1px #FAFAFA;
1134 margin-bottom: 21px;
1135 -webkit-box-shadow: 0 4px 10px 0 #eef0f5;
1136 box-shadow: 0 4px 10px 0 #eef0f5;
1140 width: calc(100% - 50px); */
1147 .page-title h2 span{
1153 padding: 0 30px !important;
1155 .body-container > .container{
1159 padding-right: 0 !important;
1160 border-bottom: solid 1px #ECEDF2 !important;
1162 /**Packages Filter**/
1166 z-index: 220 !important;
1168 .packagesFilter .dropdown-toggle{
1169 height: 36px !important;
1171 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
1172 border-color: transparent transparent #1B3E6F transparent;
1174 .packagesFilter .dropdown-text{
1175 background: transparent;
1182 .packagesFilter .dropdown-text::after{
1184 border: solid !important;
1185 border-width: 5px 4px 0 4px !important;
1186 border-color: #1B3E6F transparent transparent transparent !important;
1188 .packagesFilter .dropdown-toggle:hover ~ .dropdown-text,
1189 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
1190 background-color: transparent;
1194 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
1196 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1198 .packagesFilter .dropdown-text::after{
1201 .packagesFilter .dropdown-content{
1204 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1206 border-top-left-radius: 0;
1207 border-top-right-radius: 0;
1208 border-bottom-left-radius: 2px;
1209 border-bottom-right-radius: 2px;
1211 .packagesFilter .dropdown-content ul{
1216 .packagesFilter .dropdown-content li{
1219 .packagesFilter .dropdown-content li:hover .custom-checkbox{
1222 .packagesFilter .dropdown-content:hover,
1223 .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
1226 .packagesFilter .form-control{
1227 padding: 12px 9px 12px 38px !important;
1228 border: 0 !important;
1229 border-bottom: solid 1px #D7E7F9 !important;
1230 background: url(../src/assets/img/icon-search.svg) 15px center no-repeat;
1231 background-size: 4%;
1232 border-radius: 0 !important;
1236 .packagesFilter .form-control::placeholder{
1239 .packagesFilter .form-control:focus{
1240 box-shadow: none !important;
1241 border-bottom: solid 1px #1B3E6F !important;
1243 .packagesFilter .custom-checkbox{
1246 .packagesFilter .custom-control-input{
1249 .packagesFilter .custom-control-label{
1250 line-height: 28px !important;
1251 font-size: 13px !important;
1252 text-indent: 6px !important;
1257 background: #C3CDDB;
1262 .fillteredTags:empty{
1271 .sort-packages .dropdown{
1274 .sort-packages .dropdown-text{
1275 background: transparent;
1280 .sort-packages .dropdown-text::after{
1281 border-color: #1B3E6F transparent transparent transparent;
1283 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
1284 border-color: transparent transparent #1B3E6F transparent;
1286 .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
1287 .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
1288 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1291 .sort-packages .dropdown-content:hover,
1292 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
1295 .sort-packages .dropdown-content{
1301 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1303 .sort-packages .dropdown-content a{
1307 .sort-packages .dropdown-content a:hover{
1308 background-color: #F4F9FE;
1309 text-decoration: unset;
1312 .page-item .page-link,
1313 .page-item.disabled .page-link{
1314 background: transparent !important;
1316 color: #1B3E6F !important;
1320 color: #1B3E6F !important;
1321 background-color: #fff !important;
1322 border-radius: 100%;
1324 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
1326 .page-item.disabled{
1329 /**Packages Cards***/
1330 /***Package Info Card***/
1331 .packages-card .card{
1335 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
1337 .packages-card .card:hover{
1338 box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17);
1339 transition: all 0.5s ease;
1342 .packages-card .card:hover .card-title,
1343 .packages-card .card:hover .card-title span{
1344 color: #1273EB !important;
1346 .packages-card .card-title{
1347 margin-bottom: 0 !important;
1351 .packages-card .card-title .packageName{
1353 display: inline-block;
1356 white-space: nowrap;
1358 text-overflow: ellipsis;
1360 vertical-align: bottom;
1363 .packages-card .card-title:hover,
1364 .packages-card .card-title:hover .packageName{
1365 text-decoration: none;
1368 .packages-card .card-body{
1369 padding-bottom: 0 !important;
1371 .packages-card .card-footer .col{
1372 padding-left: 3px !important;
1376 /***Add Package Card***/
1378 background: #F4F9FE !important;
1379 border: solid 1px #D7E7F9 !important;
1381 .addPaackage-card:hover{
1382 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
1385 .addPaackage-card a:hover{
1386 text-decoration: unset;
1388 .addPaackage-card .card-footer .col{
1392 .addPaackage-card .card-footer .col:last-child{
1395 .btn-create-package,
1396 .btn-import-package{
1399 .btn-create-package{
1400 margin-bottom: 6px !important;
1402 .btn-import-package{
1403 margin-bottom: 15px !important;
1405 .btn-create-package,
1406 .btn-create-package:hover{
1407 background-color: #1B3E6F;
1408 border-color: #1B3E6F;
1411 .btn-import-package,
1412 .btn-import-package:hover{
1415 /***Actions Menu***/
1416 .packages-card .dropdown{
1420 .packages-card .dropdown-text{
1421 background: transparent;
1426 border-bottom-left-radius: 0;
1427 border-bottom-right-radius: 0;
1430 .packages-card .dropdown-text::after{
1433 .packages-card .dropdown-text img{
1436 .packages-card .dropdown-content{
1443 border-top-right-radius: 0;
1444 background: #1B3E6F;
1446 .packages-card .dropdown-content a{
1450 /* background-position: 14px center;
1451 background-size: 10%;
1452 background-repeat: no-repeat; */
1454 .packages-card .dropdown-content a i{
1457 .packages-card .dropdown-content a:hover{
1458 background-color: #172B4D;
1459 text-decoration: unset;
1462 .packages-card .dropdown-content:hover,
1463 .packages-card .dropdown-toggle:focus ~ .dropdown-content{
1466 .packages-card .dropdown-toggle:focus ~ .dropdown-text .icon-menuDots{
1469 .packages-card .dropdown-toggle:hover ~ .dropdown-text{
1470 background: transparent;
1473 .packages-card .dropdown-toggle:focus ~ .dropdown-text{
1477 background: #1B3E6F;
1481 .package-version::before{
1485 vertical-align: text-bottom;
1488 /***Contributers***/
1489 ul.package-contributers{
1491 margin-bottom: 9px !important;
1492 padding-left: 0 !important;
1494 .package-contributers li{
1496 display: inline-block;
1498 .package-contributers li{
1501 .package-contributers li:first-child{
1504 .package-contributers li:last-child{
1508 .package-contributers button{
1509 height: 20px !important;
1510 padding: 0 !important;
1511 border-radius: 100%;
1512 border: 0 !important;
1514 -webkit-transition: box-shadow 0.2s ease;
1515 -moz-transition: box-shadow 0.2s ease;
1516 transition: box-shadow 0.2s ease;
1517 -webkit-backface-visibility: hidden;
1518 backface-visibility: hidden;
1519 display: inline-block;
1522 .package-modifier:before,
1523 .package-contributers button:before{
1524 -webkit-transition: all 0.2s ease;
1525 -moz-transition: all 0.2s ease;
1526 transition: all 0.2s ease;
1529 box-shadow: 0 0 0 2px #fff;
1536 .package-modifier:hover,
1537 .package-contributers button:hover{
1538 box-shadow: 0 0 0 2px #D7E7F9;
1539 text-decoration: none;
1541 .package-modifier:hover:before,
1542 .package-contributers button:hover:before{
1543 -webkit-transform: scale(0.925);
1544 -moz-transform: scale(0.925);
1545 -ms-transform: scale(0.925);
1546 -o-transform: scale(0.925);
1547 transform: scale(0.925);
1548 box-shadow: 0 0 0 1px #D7E7F9;
1551 .package-modifier img,
1552 .package-contributers button img{
1556 vertical-align: top;
1557 border-radius: 100%;
1559 .package-contributers a{
1563 .package-contributers a:hover{
1564 text-decoration: unset;
1566 /***Package Footer***/
1567 .packages-card .card-footer{
1568 padding: 0 !important;
1569 background: transparent !important;
1570 border-top-color: #F7F6F6 !important;
1572 .packages-card .card-footer .col{
1575 .packages-card .card-footer .col:first-child{
1576 border-right: solid 1px #F7F6F6;
1578 .packages-card .card-footer .btn{
1579 padding: 10px 0 10px 0 !important;
1580 background-color: transparent !important;
1581 color: #1B3E6F !important;
1587 .packages-card .card-footer .btn:hover{
1590 .packages-card .card-footer i{
1597 .icon-deployed-active,
1598 .icon-deploy-inactive{
1601 background-image: url(/assets/img/icon-deploy-active.svg);
1602 background-position: center center;
1603 background-repeat: no-repeat;
1604 vertical-align: baseline;
1606 .icon-deploy-inactive{
1607 background-image: url(/assets/img/icon-deploy-inactive.svg);
1611 /*CREATE NEW ACTION MODAL*/
1612 .createActionModal .modal-dialog{
1615 .createActionModal .modal-header{
1616 padding-top: 21px !important;
1617 padding-bottom: 0 !important;
1620 .createActionModal .close{
1621 margin: 0 !important;
1622 padding: 6px 13px 10px !important;
1624 opacity: 1 !important;
1625 border-radius: 100%;
1627 .createActionModal .close:hover{
1628 background-color: #E0E8F2;
1630 .createActionModal .icon-action-close{
1634 .icon-action-close::before{
1637 .createActionModal .modal-body{
1638 padding-top: 0 !important;
1639 padding-bottom: 10px !important;
1641 .createActionModal .modal-body .carousel-item{
1643 padding-right: 10px;
1645 @keyframes fadeInScale {
1648 -webkit-transform: scale(0) translateY(50%);
1649 transform: scale(0) translateY(50%);
1652 -webkit-transform: scale(1.05);
1653 transform: scale(1.05);
1657 -webkit-transform: scale(1) translateY(0);
1658 transform: scale(1) translateY(0);
1662 margin-bottom: 25px !important;
1663 padding: 220px 25px 50px;
1666 -webkit-transition: all 0.3s ease-in-out;
1667 transition: all 0.3s ease-in-out;
1669 .card.actionType:hover{
1670 box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
1671 transition: 0.3s !important;
1673 .createActionModal h3.mainHead{
1674 text-transform: uppercase;
1681 .createActionModal h1{
1682 margin-bottom: 21px;
1687 .createActionModal .carousel-inner{
1690 .createActionModal .skip-btn{
1694 font-weight: normal !important;
1696 border: solid 1px #F1F2FA;
1699 .createActionModal .skip-btn:hover{
1700 background: #1273EB;
1702 box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
1709 background-position: center 40px;
1710 background-repeat: no-repeat;
1711 background-size: 144px 172px;
1718 text-transform: uppercase;
1723 font-size: 13px !important;
1727 .actionType:hover .btn{
1731 left: 30% !important;
1732 margin-bottom: 26px;
1736 background: #1B3E6F;
1740 border-radius: 15px !important;
1741 -webkit-transform: translateY(-20%);
1742 transform: translateY(-20%);
1743 -webkit-transition: all 0.3s ease-in-out;
1744 transition: all 0.3s ease-in-out;
1746 .actionType:hover .btn{
1748 -webkit-transform: translateY(0);
1749 transform: translateY(0);
1752 background-image: url(/assets/img/icon-action-custom.svg);
1754 .actionType.custom:hover{
1756 background-image: url(/assets/img/icon-action-custom-hover.svg);
1758 .actionType.default{
1759 background-image: url(/assets/img/icon-action-default.svg);
1761 .actionType.default:hover{
1763 background-image: url(/assets/img/icon-action-default-hover.svg);
1766 background-image: url(/assets/img/icon-action-recent.svg);
1768 .actionType.recent:hover{
1770 background-image: url(/assets/img/icon-action-recent-hover.svg);
1773 background-image: url(/assets/img/icon-action-import.svg);
1775 .actionType.import:hover{
1777 background-image: url(/assets/img/icon-action-import-hover.svg);
1779 .createActionModal .carousel-indicators{
1782 .createActionModal .carousel-indicators li{
1788 .createActionModal .back{
1789 position: fixed !important;
1792 padding:0 !important;
1799 .createActionModal .form-control.customAction{
1805 border-bottom: solid 1px #E0E8F2;
1806 color: #1B3E6F !important;
1809 .createActionModal .form-control:focus{
1810 border-bottom: solid 1px #1B3E6F;
1811 background: transparent !important;
1812 -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1813 -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1814 box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1817 .createActionModal .form-control::placeholder{
1821 .createActionModal .submit,
1822 .createActionModal .submit:hover{
1826 background: #1B3E6F;
1830 border-radius: 15px !important;
1838 .form-control.searchInput,
1839 .form-control.searchInput:focus{
1841 width: 250px !important;
1842 height: 30px !important;
1843 padding-left: 32px !important;
1844 border: solid 1px #E0E8F2 !important;
1845 border-radius: 2px !important;
1846 background: url(../src/assets/img/icon-search-light.svg) 9px center no-repeat !important;
1847 font-size: 13px !important;
1855 .createActionModal .actionName{
1856 margin-bottom: 15px;
1858 box-shadow: 0 2px 6px rgba(47,83,151,0.15);
1860 .createActionModal p.selectedActions{
1862 margin-bottom: 10px;
1866 .createActionModal .sort-packages .dropdown{
1869 .createActionModal .sort-packages .dropdown-text::after {
1872 .createActionModal .sort-packages .dropdown-content{
1875 .createActionModal .folder-upload-text button{
1880 display: inline-block;
1881 transition-duration: 0.3s;
1882 transition-property: box-shadow;
1883 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1884 transform: translateZ(0);
1885 box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
1886 /* Hack to improve aliasing on mobile/tablet devices */
1888 .border-fade:hover {
1889 box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
1890 /* Hack to improve aliasing on mobile/tablet devices */
1894 /**Title Action Buttons**/
1895 .page-title-actions li{
1896 display: inline-block;
1900 -webkit-transition: box-shadow 0.2s ease;
1901 -moz-transition: box-shadow 0.2s ease;
1902 transition: box-shadow 0.2s ease;
1903 -webkit-backface-visibility: hidden;
1904 backface-visibility: hidden;
1907 display: inline-block;
1913 text-transform: lowercase;
1917 .title-action:before{
1918 -webkit-transition: all 0.2s ease;
1919 -moz-transition: all 0.2s ease;
1920 transition: all 0.2s ease;
1923 box-shadow: 0 0 0 1px #000;
1930 .title-action:hover{
1931 box-shadow: 0 0 0 7px #07819b;
1932 text-decoration: none;
1934 .title-action:hover:before{
1935 -webkit-transform: scale(0.925);
1936 -moz-transform: scale(0.925);
1937 -ms-transform: scale(0.925);
1938 -o-transform: scale(0.925);
1939 transform: scale(0.925);
1940 box-shadow: 0 0 0 1px #07819b;
1944 /*Animation Button*/
1947 display: inline-block;
1948 transition-duration: 0.3s;
1949 transition-property: transform;
1950 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1951 transform: translateZ(0);
1952 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
1955 transform: translateY(-5px);
1959 /* Base styles for the element that has a tooltip */
1967 /* Base styles for the entire tooltip */
1968 [data-tooltip]:before,
1969 [data-tooltip]:after,
1974 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1975 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
1978 opacity 0.2s ease-in-out,
1979 visibility 0.2s ease-in-out,
1980 -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1982 opacity 0.2s ease-in-out,
1983 visibility 0.2s ease-in-out,
1984 -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1986 opacity 0.2s ease-in-out,
1987 visibility 0.2s ease-in-out,
1988 transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1989 -webkit-transform: translate3d(0, 0, 0);
1990 -moz-transform: translate3d(0, 0, 0);
1991 transform: translate3d(0, 0, 0);
1992 pointer-events: none;
1995 /* Show the entire tooltip on hover and focus */
1996 [data-tooltip]:hover:before,
1997 [data-tooltip]:hover:after,
1998 [data-tooltip]:focus:before,
1999 [data-tooltip]:focus:after,
2000 .tooltip:hover:before,
2001 .tooltip:hover:after,
2002 .tooltip:focus:before,
2003 .tooltip:focus:after {
2004 visibility: visible;
2005 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
2006 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
2010 /* Base styles for the tooltip's directional arrow */
2012 [data-tooltip]:before {
2014 border: 6px solid transparent;
2015 background: transparent;
2019 /* Base styles for the tooltip's content area */
2021 [data-tooltip]:after {
2023 padding: 8px 20px !important;
2025 background-color: #C3CDDB !important;
2027 content: attr(data-tooltip);
2029 font-weight: bold !important;
2037 [data-tooltip]:before,
2038 [data-tooltip]:after,
2041 .tooltip-top:before,
2042 .tooltip-top:after {
2047 [data-tooltip]:before,
2049 .tooltip-top:before {
2051 margin-bottom: -12px;
2052 border-bottom-color: #DEE8F3;
2053 border-bottom-color: rgba(222, 232, 243, 1.0);
2056 /* Horizontally align top/bottom tooltips */
2057 [data-tooltip]:after,
2059 .tooltip-top:after {
2063 [data-tooltip]:hover:before,
2064 [data-tooltip]:hover:after,
2065 [data-tooltip]:focus:before,
2066 [data-tooltip]:focus:after,
2067 .tooltip:hover:before,
2068 .tooltip:hover:after,
2069 .tooltip:focus:before,
2070 .tooltip:focus:after,
2071 .tooltip-top:hover:before,
2072 .tooltip-top:hover:after,
2073 .tooltip-top:focus:before,
2074 .tooltip-top:focus:after {
2075 -webkit-transform: translateY(-12px);
2076 -moz-transform: translateY(-12px);
2077 transform: translateY(-12px);
2081 .tooltip-left:before,
2082 .tooltip-left:after {
2088 .tooltip-left:before {
2090 margin-right: -12px;
2092 border-top-color: transparent;
2093 border-left-color: #C3CDDB;
2094 /* border-left-color: hsla(0, 0%, 20%, 0.9); */
2097 .tooltip-left:hover:before,
2098 .tooltip-left:hover:after,
2099 .tooltip-left:focus:before,
2100 .tooltip-left:focus:after {
2101 -webkit-transform: translateX(-12px);
2102 -moz-transform: translateX(-12px);
2103 transform: translateX(-12px);
2107 .tooltip-bottom:before,
2108 .tooltip-bottom:after {
2114 .tooltip-bottom:before {
2117 border-top-color: transparent;
2118 border-bottom-color: #C3CDDB;
2119 border-bottom-color: rgba(195, 205, 219, 1.0);
2122 .tooltip-bottom:hover:before,
2123 .tooltip-bottom:hover:after,
2124 .tooltip-bottom:focus:before,
2125 .tooltip-bottom:focus:after {
2126 -webkit-transform: translateY(12px);
2127 -moz-transform: translateY(12px);
2128 transform: translateY(12px);
2132 .tooltip-right:before,
2133 .tooltip-right:after {
2138 .tooltip-right:before {
2141 border-top-color: transparent;
2142 border-right-color: #C3CDDB;
2143 /* border-right-color: hsla(0, 0%, 20%, 0.9); */
2146 .tooltip-right:hover:before,
2147 .tooltip-right:hover:after,
2148 .tooltip-right:focus:before,
2149 .tooltip-right:focus:after {
2150 -webkit-transform: translateX(12px);
2151 -moz-transform: translateX(12px);
2152 transform: translateX(12px);
2155 /* Move directional arrows down a bit for left/right tooltips */
2156 .tooltip-left:before,
2157 .tooltip-right:before {
2161 /* Vertically center tooltip content for left/right tooltips */
2162 .tooltip-left:after,
2163 .tooltip-right:after {
2165 margin-bottom: -16px;
2168 /*TooltipModule - Shady*/
2170 opacity: 1.0 !important;
2171 filter:alpha(opacity=100) !important;
2175 width: 100% !important;
2177 .tooltip .tooltip-inner{
2178 width: max-content !important;
2179 text-align: left!important;
2181 background-color: #fff !important; */
2183 background-color: #C3CDDB !important;
2184 border: solid 1px #C3CDDB;
2185 border-radius: 1px !important;
2186 /* border-top-left-radius: 0 !important; */
2188 opacity: 1.0 !important;
2191 .bs-tooltip-auto[x-placement^=top] .arrow::before,
2192 .bs-tooltip-top .arrow::before {
2193 border-top-color: #C3CDDB !important;
2195 .bs-tooltip-auto[x-placement^=right] .arrow::before,
2196 .bs-tooltip-right .arrow::before {
2197 border-right-color: #C3CDDB !important;
2199 .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
2200 .bs-tooltip-bottom .arrow::before {
2201 border-bottom-color: #C3CDDB !important;
2203 .bs-tooltip-auto[x-placement^=left] .arrow::before,
2204 .bs-tooltip-left .arrow::before {
2205 border-left-color: #C3CDDB !important;
2209 padding-right: 20px !important;
2210 padding-left: 20px !important;
2214 border-radius: 20px !important;
2217 background-color: #1273EB !important;
2218 border-color: #1273EB !important;
2220 .btn-primary:hover {
2221 background-color: #0069d9 !important;
2222 border-color: #0062cc !important;
2227 .package-view-button button{
2231 .package-view-button{
2234 .package-view-button .btn{
2236 border-radius: 18px;
2237 font-size: 13px !important;
2239 .package-view-button .btn:hover{
2242 .package-view-button .btn-primary{
2243 background-color: #1B3E6F !important;
2244 border-color: #1B3E6F !important;
2246 .package-view-button .btn-enrich,
2247 .package-view-button .btn-enrich:focus,
2248 .modal-footer .btn-primary.btn-enrich{
2249 background: #EB9A34 !important;
2250 border-color: #EB9A34 !important;
2252 outline: none !important;
2254 .package-view-button .btn-deploy{
2255 background-color: #1273EB !important;
2256 border-color: #1273EB !important;
2257 color: #fff !important;
2258 /* background-color: #fff !important;
2259 border-color: #D0DFF1 !important;
2260 color: #1B3E6F !important; */
2262 .package-view-title {
2269 .package-view-title+p{
2273 .package-view-title+ul{
2276 .package-view-button .btn-outline-secondary i{
2284 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2286 .card.creat-card .single-line{
2287 padding: 15px 25px 15px;
2289 .card.creat-card .single-line-model{
2292 .card.creat-card .editor-container{
2298 .single-line-model label{
2300 border-bottom: 1px solid #FAFAFA;
2303 .single-line-model .label-name{
2306 .single-line-model .label-input{
2307 width: calc(100% - 325px);
2309 .single-line-model input{
2310 border-bottom: 1px solid #FAFAFA !important;
2311 padding: 15px 25px 15px 0px;
2313 .customKeyTitle span{
2314 color: #C3CDDB !important;
2317 .single-line-model input:focus,
2318 .single-line-custom-key input:focus{
2319 border-bottom-color: #1B3E6F !important;
2320 -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2321 -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2322 box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2324 .model-note-container{
2325 width: calc(100% - 325px);
2326 padding: 0px 25px 0px 0px ;
2334 margin-bottom: 25px;
2339 padding: 5px 25px 5px 0px;
2343 background: #E0E8F2;
2346 border-radius: 50px;
2349 margin-bottom: 10px;
2357 display: inline-block;
2368 background: #FFE6E7;
2369 border: 1px solid #FFC9CB;
2370 padding: 3px 10px 2px;
2376 background: #FFC9CB;
2377 border: 1px solid #FF6469;
2378 text-decoration: none;
2381 width: calc(100% - 300px);
2382 display: inline-block;
2385 margin-left: 0px !important;
2386 margin-top: 2px !important;
2388 .form-check-input+span{
2394 .form-check-input+span i{
2406 transition: all 250ms ease-out;
2408 .label-input input:focus{
2409 border-bottom: solid 1px #1B3E6F;
2410 background: transparent !important;
2411 -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2412 -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2413 box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2416 .label-input input:disabled{
2420 .label-input input[type=radio]{
2423 .label-input input[type=radio]+span{
2426 margin-right: 100px;
2428 .single-line select{
2431 padding-right: 50px;
2433 border: solid 1px #EEF4F9;
2435 background: url(/assets/img/arrow.svg) 90% center #F4F9FE no-repeat;
2436 background-size: 10px;
2438 -webkit-appearance: none;
2439 -moz-appearance: none;
2445 .single-line select:focus{
2446 box-shadow: 0 0 0 0;
2448 .single-line select option:first-child{
2451 .single-line-model input::placeholder{
2455 .single-line-model.error{
2458 .single-line-model.error input,
2459 .label-input input.ng-invalid{
2462 border-bottom: 1px solid #FF6469 !important;
2464 .single-line .custom-key{
2470 .single-line .custom-key:focus{
2474 padding:70px 100px 70px 70px;
2480 .single-custom-key:last-child{
2481 margin-bottom: 20px;
2483 .single-line-custom-key{
2485 display: inline-block;
2487 .single-line-custom-key-delete{
2489 display: inline-block;
2490 border-bottom: 1px solid #FAFAFA;
2491 padding: 13px 12px 14px;
2493 .single-line-custom-key label{
2496 border-bottom: 1px solid #FAFAFA;
2499 .single-line-custom-key input{
2500 border-bottom: 1px solid #FAFAFA !important;
2501 padding: 15px 25px 15px 0;
2503 .single-line-custom-key input::placeholder{
2507 .single-line-custom-key .label-input{
2508 width: calc(100% - 150px);
2510 .single-line-custom-key .label-name span{
2511 color: #C3CDDB !important;
2515 background: transparent;
2520 .custom-key-delete:focus{
2525 margin-top: 0rem !important;
2526 margin-bottom: 0rem !important;
2527 border-top: 1px solid #efefef !important;
2529 .creat-action-container{
2537 display: inline-block;
2539 margin-bottom: 12px;
2540 color: #BABBC3 !important;
2543 background: transparent;
2547 .action-button:disabled,
2548 .action-button:disabled:hover{
2550 opacity: .5 !important;
2552 .action-button:hover{
2553 text-decoration: none;
2558 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2563 border-radius: 40px;
2566 display: inline-block;
2568 .action-button i:hover{
2569 background: #dee2e6;
2571 .action-button i.icon-save-sm{
2572 background: #1273EB;
2576 .action-button i.icon-discard-sm{
2580 /* .action-button.save{
2581 color: #1273EB !important;
2583 .action-button.save:hover{
2586 .action-button.save:disabled{
2587 color: #C3CDDB !important;
2589 .action-button.save:disabled i{
2590 background-color: #C3CDDB;
2593 .action-button.save:disabled i::before{
2596 .action-button.save{
2597 color: #66BB00 !important;
2599 /*Flash Glowing button style*/
2600 .action-button.save i{
2601 background-color: #66BB00;
2602 -webkit-animation: glowing 1500ms infinite;
2603 -moz-animation: glowing 1500ms infinite;
2604 -o-animation: glowing 1500ms infinite;
2605 animation: glowing 1500ms infinite;
2607 @-webkit-keyframes glowing {
2608 0% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; }
2609 50% { background-color: #7CD116; -webkit-box-shadow: 0 0 40px #7CD116; }
2610 100% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; }
2613 @-moz-keyframes glowing {
2614 0% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; }
2615 50% { background-color: #7CD116; -moz-box-shadow: 0 0 40px #7CD116; }
2616 100% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; }
2619 @-o-keyframes glowing {
2620 0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2621 50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; }
2622 100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2625 @keyframes glowing {
2626 0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2627 50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; }
2628 100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2632 /* .action-button.delete i{
2635 .action-button.delete,
2636 .action-button.delete i,
2637 .action-button.delete:hover,
2638 .action-button.delete:hover .icon-delete-sm{
2639 color: #FF6469 !important;
2647 margin-top: 60px !important;
2650 z-index: 11000000 !important;
2651 background: rgba(27, 62, 111, 0.10) !important;
2654 border-radius: 2px !important;
2655 border: 0 !important;
2656 box-shadow: 0 2px 6px rgba(47, 83, 151, .10);;
2659 font-size: 14px !important;
2662 padding: 1.5rem 1.5rem 1rem !important;
2664 .enrichModal .modal-dialog{
2665 max-width: 60% !important;
2674 border-bottom-color: #ECEDF2 !important;
2675 padding: .7rem 1.5rem !important;
2678 padding-top: 0 !important;
2679 border-top: 0 !important;
2685 border: 0 !important;
2687 .modal-footer .btn-primary{
2688 background-color: #1B3E6F !important;
2690 .modal-footer .btn-secondary,
2691 .modal-footer .btn-secondary:hover{
2692 background-color: transparent;
2696 .modal-footer .btn-secondary:hover{
2699 .modal-footer .btn-secondary:active{
2700 background-color: #E7F1FC !important;
2701 color: #1B3E6F !important;
2703 .btn-modal-remove-file:hover{
2706 .action-button span{
2708 display: inline-block;
2711 .creat-action-container hr{
2713 padding-bottom: 18px;
2715 .btn-link:hover, .btn-link:focus{
2716 text-decoration: none !important;
2720 font-family:'FontAwesome';
2724 .btn-link.collapsed::before{
2726 font-family:'FontAwesome';
2733 .ngx-file-drop__content{
2734 background: #F4F9FE;
2736 height: auto !important;
2737 display: inline-block !important;
2740 .ngx-file-drop__drop-zone{
2741 border: 1px dashed #D7E7F9 !important;
2742 border-radius: 0px !important;
2743 height: auto !important;
2747 margin: 15px auto 18px;
2748 display: inline-block;
2751 .btn-group-sm>.btn, .btn-sm{
2758 /* text-transform: uppercase; */
2761 .folder-upload-text{
2764 display: inline-block;
2769 .folder-upload-text button{
2773 .folder-upload-type{
2778 display: inline-block;
2785 border: dashed 1px #D7E7F9;
2787 .upload-table tr th{
2788 border-bottom: solid 1px #F4F9FE !important;
2790 .upload-table .table thead th{
2792 border-top: 0px !important;
2793 font-weight: normal;
2796 .upload-table .table thead th:first-child{
2800 .upload-table tr:last-child th{
2801 border-bottom: 0 !important;
2803 .upload-table .table{
2804 margin-bottom: 0px !important;
2806 .nav-tabs .nav-link{
2809 .nav-tabs .nav-link.tab-done{
2810 padding-left: 40px !important;
2812 .nav-tabs .nav-link.tab-done::after{
2815 font-family: 'FontAwesome';
2821 .authentication-container-all{
2822 background: #F4F9FE;
2823 border:1px solid #D0DFF1 ;
2827 .authentication-header{
2833 padding: 10px 20px ;
2835 .authentication-search{
2843 .authentication-search::after{
2845 font-family: 'FontAwesome';
2850 .authentication-search input{
2856 padding: 10px 20px 10px 35px;
2858 border-top: 1px solid #D7E7F9;
2860 .authentication-search input::placeholder{
2865 .authentication-accordion{
2871 .authentication-accordion .card{
2872 border-radius: 0px !important;
2873 margin-bottom: 10px !important;
2875 .authentication-accordion .card-header{
2876 padding: 0px !important;
2877 background: #fff !important;
2878 border-radius: 0px !important;
2882 .authentication-accordion .card-header .btn-link{
2886 padding: 9px 0px !important;
2890 .authentication-accordion .custom-control{
2891 display: inline-block;
2893 .authentication-accordion .btn-link::before{
2896 .authentication-accordion .btn-link.collapsed::before{
2899 .template-mapping-accordion{
2906 .card-header .btn.regularTitle{
2907 padding-left: 0 !important;
2908 padding-right: 0 !important;
2913 .template-mapping-accordion .accordian-title{
2914 color: #C3CDDB !important;
2915 font-size: 12px !important;
2916 font-weight: normal !important;
2921 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2922 border: 0px !important;
2925 padding: 0px 25px !important;
2926 background: #F4F9FE !important;
2927 border-radius: 0px !important;
2928 border-bottom: 1px solid #ECEDF2 !important;
2930 .template-mapping-accordion .card-body{
2931 padding: 20px 26px 0 !important;
2934 .card-header .btn-link{
2938 padding: 9px 0px !important;
2943 margin-bottom: 0px !important;
2944 border-top: 1px solid #ECEDF2 !important;
2946 .accordion > .card > .card-header{
2947 padding: 0 !important;
2949 .template-mapping-accordion .card{
2950 margin-bottom: 25px !important;
2953 display: inline-block;
2958 .btn-link.collapsed::before{
2962 padding: 12px 20px 9px 20px;
2972 background: #F4F9FE;
2973 border: 1px solid #D7E7F9;
2981 .select-type:hover, .select-type.active{
2982 background: #1B3E6F;
2983 border: 1px solid #D7E7F9;
2985 text-decoration: none;
2990 .select-type::before{
2992 border: 1px solid #1273EB;
2995 border-radius: 18px;
2996 display: inline-block;
3000 .select-type:hover::before, .select-type.active::before{
3001 border: 1px solid #fff;
3003 .select-type.active::after{
3008 border-radius: 18px;
3009 display: inline-block;
3014 /* -------- ace editor style -------- */
3016 height: 55vh !important;
3017 /* overflow: scroll; */
3020 left: 100% !important;
3021 background: #eee !important;
3024 width: 100% !important;
3027 /* height: 55vh !important; */
3029 border: 1px solid #ECEDF2;
3030 background-color: #fff;
3031 color: #1B3E6F !important;
3034 background: #E0E8F2 !important;
3035 border-right: 0px !important;
3036 color: #1B3E6F !important;
3038 .ace_gutter-active-line{
3039 background-color: #265699 !important;
3043 color: #265699 !important;
3045 .ace-tm .ace_marker-layer .ace_active-line{
3046 background: #F4F9FE !important;
3048 .ace_dark .ace_fold-widget,
3049 .ace_dark .ace_fold-widget.ace_closed{
3050 background-position: center center !important;
3051 background-size: 7px;
3052 background-repeat: no-repeat !important;
3054 .ace_dark .ace_fold-widget{
3055 background-image: url(/assets/img/icon-codeOpen.svg) !important;
3057 .ace_dark .ace_fold-widget.ace_closed{
3058 background-image: url(/assets/img/icon-codeClosed.svg) !important;
3059 background-size: 4px;
3061 /* -------- end of ace editor style -------- */
3066 .breadcrumb-header li{
3068 display: inline-block;
3072 .breadcrumb-header li:last-child::after{
3076 .breadcrumb-header li:last-child{
3077 /* background: #F4F9FE; */
3078 border-radius: 50px;
3080 padding: 0 10px 0 0;
3082 .breadcrumb-header li:first-child,
3083 .breadcrumb-header li:first-child a{
3087 color: #1B3E6F !important;
3089 background: transparent;
3091 .create-template-import{
3093 margin: 30px 0px 10px ;
3096 .create-template-import a:hover{
3097 text-decoration: none;
3099 .mapping-source-load{
3103 display: inline-block;
3104 vertical-align: top;
3106 margin-bottom: 10px;
3107 margin:15px 30px 20px;
3109 .mapping-source-load:hover{
3110 text-decoration: none;
3112 .mapping-source-load i {
3116 border-radius: 100px;
3119 display: inline-block;
3121 margin-bottom: 20px;
3123 .mapping-source-load:hover i{
3124 background: #F4F9FE;
3126 .mapping-source-load:hover span{
3133 .mapping-source-load.hover-disable{
3136 .mapping-source-load.hover-disable:hover span{
3139 .mapping-source-load.hover-disable:hover i{
3140 background: transparent;
3145 .mapping-editBar .selectedAttributes{
3151 .selectedAttributes .totalAtt{
3154 .mapping-editBar .custom-checkbox,
3155 .mapping-editBar .btn{
3156 margin: 0 4px !important;
3157 padding: 9px !important;
3160 background: #F4F9FE;
3161 border-radius: 50% !important;
3165 .mapping-editBar .custom-checkbox{
3166 margin-left: 0 !important;
3168 .mapping-editBar .custom-control-label{
3172 .mapping-editBar .btn i{
3177 .mapping-editBar .custom-checkbox:hover,
3178 .mapping-editBar .btn:hover i{
3181 .template-mapping-list{
3182 background: #F4F9FE;
3183 border: 1px solid #E9F3FF;
3185 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3187 display: inline-block;
3188 margin-bottom: 20px;
3191 .template-mapping-list:hover,
3192 .template-mapping-list.active {
3194 /* background: #1B3E6F; */
3195 text-decoration: none;
3196 /* color: #fff !important; */
3198 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.3);
3200 .template-mapping-list p,
3201 .template-mapping-list:hover p{
3204 display: inline-block !important;
3206 .template-mapping-list:hover p{
3209 .template-mapping-list:hover{
3213 .template-mapping-list span{
3215 border: solid 1px #E9F3FF;
3219 border-radius: 50px;
3223 .template-mapping-list:hover span{
3232 background: transparent;
3235 color: #FF6469 !important;
3238 .template-mapping-list:hover .deleteTemplate{
3243 padding-bottom: 5px !important;
3246 .create-template-mapping-button{
3247 background: #C3CDDB;
3248 border-radius: 50px;
3252 margin-bottom: 20px;
3253 display: inline-block;
3256 .create-template-mapping-button i{
3259 .view-package-container{
3264 background: #C1CDDD;
3267 border-radius: 48px;
3268 display: inline-block;
3272 /* margin-right: 20px; */
3282 .package-name-container{
3283 width: calc(100% - 60px);
3284 display: inline-block;
3303 vertical-align: baseline;
3305 .package-description{
3308 font-weight: normal;
3313 .package-auth-info p{
3316 .package-auth-info div{
3318 border-right: solid 1px #F4F9FE;
3320 .package-auth-info div:first-child{
3323 .package-auth-info .col-4:first-child{
3326 .package-auth-info div:last-child{
3329 .package-auth-info .package-contributers{
3330 margin-bottom: 0 !important;
3332 .package-auth-info .package-contributers button img{
3336 .template-mapping-action{
3337 margin-bottom: 20px;
3339 .template-mapping-action button{
3340 border-radius: 50px;
3344 .template-mapping-action .btn-primary:disabled{
3345 background:#C3CDDB !important ;
3346 border-color:#C3CDDB !important ;
3347 color: #fff !important ;
3349 .template-mapping-action .btn-primary{
3350 background:#66BB00 !important ;
3351 border-color:#66BB00 !important ;
3352 color: #fff !important ;
3354 .template-mapping-action .btn-outline-secondary{
3355 background:#fff !important ;
3356 border-color:#ECEDF2 !important ;
3357 color: #1B3E6F !important ;
3363 server-side-angular-way.component.css
3365 .no-data-available {
3370 src/styles.css (i.e. your global style)
3378 color: #1B3E6F !important;
3380 /* font-weight: bold; */
3384 box-shadow: none !important;
3388 background: #fff !important;
3389 color: #1B3E6F !important;
3392 border-top: solid 1px #ECEDF2;
3395 /* display: inline-block; */
3400 font-size: 13px !important;
3401 line-height: 20px !important;
3404 background: #f4f9fe;
3405 border-bottom: 1px solid #ecedf2;
3407 .mat-sort-header-button{
3410 .mat-cell, .mat-footer-cell{
3411 color: #1B3E6F !important;
3413 .mat-form-field-appearance-legacy .mat-form-field-wrapper{
3416 .mat-paginator-page-size-select{
3419 .mat-paginator-page-size-select .mat-form-field-wrapper{
3420 padding-bottom: 14px;
3422 .mat-paginator-range-label{
3425 .mat-form-field-infix,
3426 .dataTables_filter input{
3428 padding: 4px 9px !important;
3429 border: solid 1px #ECEDF2 !important;
3432 .mat-focused .mat-form-field-infix{
3433 border-bottom: 0 !important;
3438 .tableFilter .mat-form-field-wrapper{
3439 padding-bottom: 0 !important;
3441 .tableFilter .mat-form-field-infix{
3442 background: url(../src/assets/img/icon-search.svg) 9px center no-repeat;
3443 padding-left: 24px !important;
3445 .dataTables_filter input:focus{
3446 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3450 width: auto !important;
3451 padding: 7px 20px 7px 0 !important;
3452 border-bottom: solid 1px #ECEDF2 !important;
3455 .mapping-table th:first-child,
3456 .mapping-table td:first-child{
3457 padding-left: 20px !important;
3459 .mapping-table thead th{
3460 padding: 4px 20px 4px 0 !important;
3461 border-bottom-color: #ECEDF2 !important;
3466 .mapping-table tbody tr:hover{
3467 background-color: #F4F9FE !important;
3469 .mat-form-field-label{
3470 color: #1B3E6F !important;
3471 font-size: 13px !important;
3473 line-height: 20px !important;
3477 color: #1B3E6F !important;
3480 padding-top: 10px !important;
3481 padding-bottom: 10px !important;
3482 /* background: #F4F9FE; */
3485 border-top: 0 !important;
3487 table.dataTable.no-footer{
3489 border-bottom: solid 1px #ECEDF2 !important;
3491 .mat-paginator-container{
3494 .mappingSelectedAtt{
3501 color: #1B3E6F !important;
3505 .dataTables_wrapper .dataTables_paginate,
3506 .dataTables_wrapper .dataTables_paginate a.paginate_button,
3507 .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
3508 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
3510 color: #1B3E6F !important;
3513 border: 0 !important;
3515 .dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
3517 color: #1B3E6F !important;
3518 background: none !important;
3520 .dataTables_wrapper .dataTables_paginate a.paginate_button{
3521 padding: 0.4em .9em !important;
3523 .dataTables_wrapper .dataTables_paginate a.paginate_button.current{
3524 color: #1B3E6F !important;
3525 background: #F4F9FE !important;
3526 border: solid 1px #EEF4F9 !important;
3527 border-radius: 100% !important;
3528 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3531 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
3534 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
3536 background: none !important;
3537 border: 0 !important;
3539 .mapping-table .form-control,
3540 .mapping-table .custom-select{
3542 border-color: #EEF4F9;
3547 .mapping-table .form-control{
3548 box-shadow: 0 2px 4px rgba(47,83,151,0.1);
3550 .mapping-table tbody tr:hover .form-control:focus,
3551 .mapping-table tbody tr:hover .custom-select{
3552 background-color: #fff !important;
3554 .mapping-table .custom-select{
3555 background-color: #F4F9FE;
3558 .mapping-table .form-control:disabled{
3562 background: transparent !important;
3566 /* Windows View as 150% */
3567 @media (resolution: 150dpi) {
3568 /* @media (-webkit-device-pixel-ratio: 1.5) { */
3569 .body-container > .container{
3570 max-width: 960px !important;
3573 /* Extra small devices (portrait phones, less than 576px) */
3574 @media (max-width: 575.98px) {
3580 /* Small devices (landscape phones, 576px and up) */
3581 @media (min-width: 576px) and (max-width: 767.98px) {
3585 /* Medium devices (tablets, 768px and up) */
3586 @media (min-width: 768px) and (max-width: 991.98px) {
3590 /* Large devices (desktops, 992px and up) */
3591 @media (min-width: 992px) and (max-width: 1199.98px) {
3595 /* Extra large devices (large desktops, 1200px and up) */
3596 @media (min-width: 1200px) {
3605 /* Package Wizard panel */
3606 .packageWizard.panel-wrap{
3613 transform: translateX(100%);
3614 transition: .3s ease-out;
3617 .packageWizard .panel{
3626 background: #1B3E6F;
3628 border-top: solid 6px #1273EB;
3629 box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17) !important;
3630 border-radius: 3px !important;
3631 /* border-top-right-radius: 0 !important;
3632 border-bottom-right-radius: 0 !important; */
3636 /* simulate panel state control --
3637 this can also be triggered by a
3638 class name added to the body tag.
3639 Just using a checkbox sibling here
3642 [type="checkbox"]:checked ~ .panel-wrap {
3643 transform: translateX(0%);
3646 margin-bottom: 15px;
3647 font-weight: bold !important;
3651 margin-bottom: 12px;
3654 .packageWizard span{
3664 border-radius: 18px;
3665 background-color: #1273EB;
3672 font-weight: normal;
3678 box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17) !important;
3679 border-radius: 3px !important;
3680 border-top: solid 3px #1273EB;
3682 .mat-menu-panel::after {
3688 border-left: 8px solid transparent;
3689 border-right: 8px solid transparent;
3690 border-bottom: 8px solid #1273EB;
3695 background: #1B3E6F !important;
3696 color: #fff !important;
3697 font-family: inherit !important;
3698 border-radius: 0 !important;
3705 margin-bottom: 9px !important;
3706 font-weight: bold !important;
3707 font-size: 16px !important;
3709 .mat-icon-button[disabled]{
3710 color: rgba(224, 232, 242, .5) !important;