cds-ui/designer-client/src/styles.css

   1 html, body{
   2   height: 100%;
   3 }
   4 body{
   5   background: #FAFAFA !important; /*FDFDFD*/
   6   /* background-image: linear-gradient(-45deg, #000 10%, #fff 0);
   7   background-size: 6px 6px; */
   8   margin: 0;
   9   /* font-family: 'Nunito' !important; */
  10   font-family: Arial, Helvetica, sans-serif !important;
  11   color: #1B3E6F !important;
  12   font-size: 14px;
  13 }
  14 *:focus{
  15   outline: none;
  16 }
  17 :hover{
  18   transition: 0.3s !important;
  19 }
  20 button:focus{
  21   outline: 0 !important;
  22 }
  23 /*Bootstrap*/
  24 .form-control[readonly]{
  25   background-color: inherit !important;
  26   opacity: .85 !important;
  27   font-weight: bold;
  28 }
  29 .custom-control-input:checked ~ .custom-control-label::before{
  30   border-color: transparent !important;
  31 }
  32 .btn{
  33   transition: all .2s ease-out !important;
  34 }
  35 .btn-outline-danger{
  36   background: #fff !important;
  37   border: solid 1px #ECEDF2 !important;
  38   color: #FF6469 !important;
  39 }
  40 .btn-secondary:not(:disabled):not(.disabled).active,
  41 .btn-secondary:not(:disabled):not(.disabled):active{
  42   border-color: transparent !important;
  43 }
  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;
  48 }
  49 .btn:disabled:hover{
  50   cursor: default;
  51 }
  52 .btn.disabled,
  53 .btn:disabled{
  54   opacity: .5 !important;
  55 }
  56 .custom-control-label::before{
  57   border: solid 1px #C3CDDB !important;
  58   border-radius: 0 !important;
  59 }
  60 .reuiredInput .custom-control-label::before{
  61   width: 18px !important;
  62   height: 18px !important;
  63   border-radius: 50% !important;
  64 }
  65 .readonlyTxt{
  66   color: #BABBC3;
  67   font-size: 11px;
  68 }
  69 .reuiredInput .custom-control-label::after{
  70   content: "_";
  71   color: #C4CEDB !important;
  72   width: 18px !important;
  73   height: 18px !important;
  74   line-height: 6px;
  75   text-align: center;
  76 }
  77 .reuiredInput .custom-control-input:checked ~ .custom-control-label::after{
  78   top: 4px !important;
  79   left: -24px !important;
  80   content: "";
  81 }
  82 .reuiredInput .custom-control-input:checked ~ .custom-control-label::before{
  83   background: #66BB00 !important;
  84 }
  85 .custom-control-input:checked ~ .custom-control-label::before{
  86   background: #1B3E6F !important;
  87 }
  88 .custom-radio .custom-control-label::before{
  89   border-radius: 50% !important;
  90 }
  91 .custom-control-label{
  92   font-size: 13px;
  93   line-height: 24px;
  94 }
  95 .form-check-input + span{
  96   display: inline-flex !important;
  97 }
  98 .form-check-input + span i{
  99   margin-right: 9px !important;
 100 }
 101 .form-control:focus{
 102   background-color: #F4F9FE !important;
 103 }
 104 .label-input input[type="radio"]{
 105   width: 14px !important;
 106   height: 14px;
 107 }
 108 .btn[aria-expanded="true"] > .card{
 109   overflow: visible;
 110 }
 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;
 116 }
 117 .card-header .btn[aria-expanded="true"]{
 118   background-color:#F4F9FE;
 119 }
 120 .card-header .btn[aria-expanded="false"]{
 121   background-color:#fff;
 122 }
 123 /*NGX-TOASTR*/
 124 .ngx-toastr{
 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;
 129 }
 130 .toast-success{
 131   border-left: solid 5px #66BB00 !important;
 132   background: url(/assets/img/icon-required-yes.svg) 12px center #fff no-repeat !important;
 133 }
 134 .toast-error{
 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;
 138 }
 139 .toast-info{
 140   border-left: solid 5px #1273EB !important;
 141   background: url(/assets/img/icon-info-color.svg) 12px center #fff no-repeat !important;
 142 }
 143 /*ICONS*/
 144 .icon-menuDots{
 145   font-size: 3px !important;
 146   color: #1B3E6F;
 147   vertical-align: middle;
 148 }
 149 /*Components*/
 150 .copyright{
 151   margin-right: 6px;
 152   padding: 9px 6px 0px;
 153   font-size: 10px;
 154   color: #8D96A3;
 155   background: #F4F9FE;
 156   border-radius: 3px;
 157 }
 158 /* Menu Styles */
 159 .primary-nav{
 160   /* left: 0; */
 161   position: fixed;
 162   z-index: 999;
 163 }
 164 .menu{
 165   position: relative;
 166 }
 167 .menu ul{
 168   margin: 0;
 169   padding: 0;
 170   list-style: none;
 171 }
 172 .open-panel{
 173   border: none;
 174   background-color:#fff;
 175   padding: 0;
 176 }
 177 .logo-icon{
 178   background: #fff;
 179   position: relative;
 180   display: block;
 181   text-align: center;
 182   padding: 16px 0;
 183   width: 50px;
 184   height: 60px;
 185   left: 0;
 186   top: 0;
 187   z-index: 1000;
 188   cursor: pointer;
 189 }
 190 .app_version{
 191   color: #1B3E6F;
 192   position: absolute;
 193   top: 46px;
 194   z-index: 100000;
 195   font-size: 8px;
 196   left: 14px;
 197 }
 198 .primary-nav .menu li{
 199   position: relative;
 200 }
 201 .menu .icon{
 202   position: absolute;
 203   top: 12px;
 204   right: 10px;
 205   pointer-events: none;
 206   width: 30px;
 207   height: 30px;
 208   color: #fff;
 209   text-align: center;
 210 }
 211 .menu .icon .fa{
 212   vertical-align: middle;
 213 }
 214 .menu,
 215 .menu a,
 216 .menu a:visited{
 217   color: #fff;
 218   text-decoration: none!important;
 219   position: relative;
 220 }
 221 .menu a{
 222   display: block;
 223   white-space: nowrap;
 224   padding: 10px 1em;
 225   font-size: 12px;
 226   font-weight: bold;
 227   height: 52px;
 228   line-height: 30px;
 229 }
 230 .menu a:hover{
 231   color: #fff;
 232 }
 233 .menu-dropdown li .icon{
 234   text-align: center;
 235   font-size: 16px;
 236   color: #fff;
 237   line-height: 33px;
 238 }
 239 .menu-dropdown a{
 240   cursor: pointer;
 241 }
 242 .menu-dropdown li.active .icon{
 243   color: #fff;
 244   background: #265699;
 245   border-radius: 50%;
 246 }
 247 .menu-dropdown li:hover{
 248   background: #172B4D;
 249 }
 250 .menu label{
 251   margin-bottom: 0;
 252   display: block;
 253 }
 254 .menu label:hover{
 255   cursor: pointer;
 256 }
 257 .menu input[type="checkbox"]{
 258   display: none;
 259 }
 260 input#menu[type="checkbox"]{
 261   display: none;
 262 }
 263 .sub-menu-dropdown{
 264   display: none;
 265 }
 266 .new-wrapper{
 267   position: absolute;
 268   left: 50px;
 269   width: calc(100% - 50px);
 270   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 271 }
 272 #menu:checked + ul.menu-dropdown{
 273   left: 0;
 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);
 276 }
 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;
 282 }
 283 .openNav .new-wrapper{
 284   position: absolute;
 285   transform: translate3d(200px, 0, 0);
 286   width: calc(100% - 250px);
 287   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 288 }
 289 .downarrow{
 290   background: transparent;
 291   position: absolute;
 292   right: 50px;
 293   top: 12px;
 294   color: #fff;
 295   width: 24px;
 296   height: 24px;
 297   text-align: center;
 298   display: block;
 299 }
 300 .downarrow:hover{
 301   color: #fff;
 302 }
 303 .menu{
 304   position: absolute;
 305   display: block;
 306   left: -200px;
 307   top: 0;
 308   width: 250px;
 309   height: 100vh;
 310   transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
 311   background-color: #1B3E6F;
 312   z-index: 999;
 313 }
 314 .menu-dropdown{
 315   top: 0;
 316   overflow-y: auto;
 317 }
 318 .overflow-container{
 319   position: relative;
 320   height: calc(100vh - 50px)!important;
 321   overflow-y: auto;
 322   border-top: 60px solid #fff;
 323   z-index: -1;
 324   display:block;
 325 }
 326
 327 .menu .logotype{
 328   position: absolute !important;
 329   top: 16px;
 330   left: 55px;
 331   display: block;
 332 }
 333 /* .sub-menu-dropdown{
 334 background-color: #333;
 335 }   */
 336 .menu:hover{
 337   position: absolute;
 338   left: 0;
 339   top: 0;
 340 }
 341 .openNav .menu:hover{
 342   position: absolute;
 343   left: -200px;
 344   top: 60px;
 345 }
 346 .openNav .menu{
 347   top: 60px;
 348   transform: translate3d(200px, 0, 0);
 349   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 350 }
 351 @-webkit-keyframes grow{
 352   0% {
 353     display: none;
 354     opacity: 0;
 355   }
 356   50% {
 357     display: block;
 358     opacity: 0.5;
 359   }
 360   100% {
 361     opacity: 1;
 362   }
 363 }
 364 @keyframes grow{
 365
 366   0% {
 367     display: none;
 368     opacity: 0;
 369   }
 370   50% {
 371     display: block;
 372     opacity: 0.5;
 373   }
 374   100% {
 375     opacity: 1
 376   }
 377 }
 378 /*User Profile*/
 379 .userProfile .dropdown{
 380   width: 99.5%;
 381 }
 382 .userProfile .dropdown:hover{
 383   background: #172B4D !important;
 384 }
 385 .userProfile .dropdown-text{
 386   background: transparent;
 387   border: 0;
 388   box-shadow: none;
 389   font-size: 13px;
 390   line-height: 40px;
 391 }
 392 .import-container-all{
 393   width: 100%;
 394   padding-bottom: 20px;
 395 }
 396 .import-container{
 397   width: 100%;
 398   background: #E7F1FC;
 399   margin-bottom: 20px;
 400   padding: 9px 18px;
 401   border: solid 1px #EEF4F9;
 402 }
 403 .import-container-input{
 404   width: 40%;
 405   position: relative;
 406   display: inline-block;
 407   margin-right: 20px;
 408 }
 409 .import-container-input input{
 410   width: 100%;
 411   height: 36px;
 412   padding: 5px 40px 5px 12px;
 413   border: 0px;
 414   border-radius: 2px;
 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);
 418   font-size: 13px;
 419   color: #172B4D;
 420 }
 421 .import-container-input input:focus{
 422   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18);
 423 }
 424 .import-container-input input::placeholder{
 425   color: #959DA8 !important;
 426 }
 427 .enter-link{
 428   position: absolute;
 429   right: 12px;
 430   font-size: 20px;
 431   top: 6px;
 432   color: #1273EB;
 433 }
 434 .enter-link:hover{
 435   text-decoration: none;
 436 }
 437 .import-container-input input::placeholder{
 438   color: #CFD7E5;
 439 }
 440 .import-container-span{
 441   font-size: 12px;
 442 }
 443 .import-container-all .accordion .card-header{
 444   padding: 0 !important;
 445   background: #fff !important;
 446   border-bottom: 0 !important;
 447 }
 448 .import-container-all .collapse.show{
 449   border-top: solid 1px #ECEDF2;
 450 }
 451 .import-container-all .card-header .accordion-delete{
 452   display: none;
 453   position: absolute;
 454   right: 15px;
 455   background: #F4F9FE;
 456 }
 457 .import-container-all .card-header:hover .accordion-delete{
 458   display: inline;
 459 }
 460 .accordion-delete{
 461   color: #FF6469;
 462   font-size: 18px;
 463   margin-top: 11px;
 464 }
 465 .accordion-delete:hover{
 466   text-decoration: none;
 467 }
 468 /* .userProfile .dropdown-toggle{
 469 height: 40px;
 470 } */
 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;
 476 }
 477
 478 .userProfile .dropdown-text::after {
 479   right: 14px;
 480   top: 8px;
 481   width: 24px;
 482   height: 24px;
 483   background: url(/assets/img/img-userProfile.png) center center no-repeat;
 484 }
 485 .packagesFilter .custom-checkbox{
 486   margin-left: 8px;
 487 }
 488 .packagesFilter .custom-control-label{
 489   line-height: 28px !important;
 490   font-size: 14px !important;
 491   text-indent: 6px !important;
 492 }
 493 .packagesFilter .reset-filter{
 494   margin-top: 6px;
 495   padding-top: 6px;
 496   padding-left: 9px;
 497   border-top: solid 1px #ECEDF2;
 498   font-size: 13px;
 499 }
 500 .packagesFilter .reset-filter a:hover{
 501   background: none !important;
 502   text-decoration: none;
 503   color: #1B3E6F;
 504   cursor: pointer;
 505 }
 506 .tags-filter-list{
 507   max-height: 260px;
 508   overflow-y: auto;
 509 }
 510 /**Packages Sort**/
 511 .sort-packages{
 512   font-size: 12px;
 513   font-weight: bold;
 514   color: #C3CDDB;
 515 }
 516 .sort-packages .dropdown{
 517   width: 88px;
 518 }
 519 .sort-packages .dropdown-text{
 520   background: transparent;
 521   border: 0;
 522   box-shadow: none;
 523   color: #1B3E6F;
 524 }
 525 .sort-packages .dropdown-text::after{
 526   right: 18px !important;
 527   border: solid !important;
 528   border-color: #1B3E6F transparent transparent transparent !important;
 529 }
 530 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
 531   top: 12px !important;
 532   border-color: transparent transparent #1B3E6F transparent !important;
 533 }
 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);
 537   background: #fff;
 538 }
 539 .sort-packages .dropdown-content:hover,
 540 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
 541   top: 30px;
 542 }
 543 .sort-packages .dropdown-content{
 544   width: 88px;
 545   padding: 6px 0;
 546   background: #fff;
 547   border-radius: 2px;
 548   border: 0;
 549   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 550 }
 551 .sort-packages .dropdown-content a{
 552   color: #1B3E6F;
 553   font-size: 12px;
 554 }
 555 .sort-packages .dropdown-content a:hover{
 556   color: #1B3E6F;
 557   background-color: #F4F9FE;
 558   text-decoration: unset;
 559   cursor: pointer;
 560 }
 561 /**Pagination**/
 562 .page-item{
 563   margin: 3px 2px 0;
 564 }
 565 .page-item .page-link,
 566 .page-item.disabled .page-link{
 567   padding: 5px 9px;
 568   background: transparent !important;
 569   border: 0;
 570   color: #1B3E6F !important;
 571   font-size: 13px;
 572   font-weight: bold;
 573 }
 574 .page-item.active .page-link,
 575 .page-link:hover{
 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);
 580   outline: 0;
 581 }
 582 /**Packages Cards***/
 583 /***Package Info Card***/
 584 .packages-card .card{
 585   width: 100%;
 586   margin: 0;
 587   border-radius: 2px;
 588   border: 0;
 589   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 590 }
 591 .packages-card .card:hover .packageName{
 592   color: #1273EB !important;
 593 }
 594 .packages-card .card-title{
 595   margin-bottom: 0 !important;
 596   font-size: 13px;
 597   font-weight: bold;
 598   color: #1B3E6F;
 599 }
 600 .packages-card .card-title span{
 601   color: #1B3E6F;
 602   font-size: 11px;
 603   vertical-align: bottom;
 604 }
 605 .packages-card p{
 606   font-size: 12px;
 607   color: #D0D7E4;
 608 }
 609 .packages-card p.package-desc{
 610   margin-top: 6px;
 611   margin-bottom: 6px;
 612   font-size: 13px;
 613   text-align: left;
 614   display: -webkit-box;
 615   -webkit-line-clamp: 1;
 616   -webkit-box-orient: vertical;
 617   overflow: hidden;
 618   color: #1B3E6F;
 619 }
 620 .packages-card p.package-desc:hover{
 621   color: #1B3E6F !important;
 622   text-decoration: underline;
 623 }
 624 .packageTag{
 625   margin-bottom: 9px;
 626   margin-right: 3px;
 627   padding: 3px 7px;
 628   font-size: 12px;
 629   background: #F4F9FE;
 630   border-radius: 12px;
 631   color: #2A81ED;
 632 }
 633 .packages-card [data-tooltip]::before,
 634 .packages-card .tooltip::before{
 635   border: 0 !important;
 636 }
 637 .packages-card .tooltip:after,
 638 .packages-card [data-tooltip]:after {
 639   padding: 9px;
 640   font-size: 11px;
 641   background: #C3CDDB;
 642   border: solid 1px #E6EDF5;
 643   box-shadow: 0 0 12 rgba(0,0,0,0.8);
 644   border-radius: 3px;
 645 }
 646 /***Add Package Card***/
 647 .addPaackage-card{
 648   padding: 10px 0;
 649   background: #F4F9FE !important;
 650   border: solid 1px #D7E7F9 !important;
 651   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
 652 }
 653 .addPaackage-card .card-body img{
 654   width: 35%;
 655   vertical-align: text-top;
 656 }
 657 .addPaackage-card a{
 658   margin: 0;
 659   padding: 7px 15px;
 660   font-weight: bold;
 661   font-size: 12px;
 662   border-radius: 18px;
 663   border-width: 0px;
 664   border-style: solid;
 665   background-position: 15px center;
 666   background-repeat: no-repeat;
 667   text-align: left;
 668 }
 669 .addPaackage-card a:hover{
 670   text-decoration: unset;
 671 }
 672 .btn-create-package i,
 673 .btn-import-package i{
 674   margin-right: 9px;
 675   font-size: 14px;
 676   vertical-align: middle;
 677 }
 678 .btn-create-package,
 679 .btn-create-package:hover{
 680   background-color: #1B3E6F;
 681   color: #fff;
 682 }
 683 .btn-import-package,
 684 .btn-import-package:hover{
 685   background: #C3CDDB;
 686   color: #1B3E6F;
 687 }
 688 /***Actions Menu***/
 689 .packages-card .dropdown{
 690   width: auto;
 691   float: right;
 692 }
 693 .packages-card .dropdown-text{
 694   background: transparent;
 695   border: 0;
 696   box-shadow: none;
 697   text-indent: 0;
 698   line-height: unset;
 699   border-bottom-left-radius: 0;
 700   border-bottom-right-radius: 0;
 701   opacity: .6;
 702 }
 703 .packages-card .dropdown-text:hover{
 704   opacity: 1;
 705 }
 706 .packages-card .dropdown-text::after{
 707   display: none;
 708 }
 709 .packages-card .dropdown-text img{
 710   padding: 9px 7px;
 711 }
 712 .packages-card .dropdown-content{
 713   right: 0;
 714   width: 120px;
 715   padding: 6px 0;
 716   border: 0;
 717   border-radius: 50%;
 718 }
 719 /* .userProfile .dropdown-content{
 720   bottom: 40px !important;
 721   top: unset !important;
 722   width: 100%;
 723 } */
 724 /**Tab Nav**/
 725 .nav-tabs{
 726   border-bottom-color: #ECEDF2 !important;
 727 }
 728 .nav-link{
 729   padding: 15px 20px 15px 20px !important;
 730   text-transform: uppercase !important;
 731   font-size: 12px;
 732   font-weight: bold;
 733   color: #C3CDDB !important;
 734   border: none !important;
 735 }
 736 .nav-tabs .nav-link:focus,
 737 .nav-tabs .nav-link:hover{
 738   border: 0 !important;
 739   transition: 0.3s;
 740 }
 741 .nav-tabs .nav-link:hover{
 742   color: #1B3E6F !important;
 743 }
 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;
 749 }
 750 .nav-tabs .nav-link::before{
 751   content: "|";
 752   padding-right: 20px !important;
 753   color: #C3CDDB;
 754   font-weight: normal;
 755   position: absolute;
 756   left: 0px;
 757 }
 758 .nav-tabs .nav-link:first-child::before{
 759   content: none;
 760 }
 761 .nav-tabs .nav-link:first-child{
 762   padding-left: 20px !important;
 763 }
 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;
 768 }
 769 .tabs-no-content{
 770   font-size: 13px;
 771   font-weight: bold;
 772 }
 773 /**Sliding Search Input**/
 774 .searchBox{
 775   position: absolute;
 776   top: 0%;
 777   right: 0%;
 778   transform: translate(0%,-0%);
 779   height: 40px;
 780 }
 781 .searchButton{
 782   float: right;
 783   margin-top: 18px;
 784   padding-left: 0 !important;
 785   padding-right: 24px !important;
 786   width: 60px;
 787   height: 20px;
 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;
 792   display: flex;
 793   justify-content: center;
 794   align-items: center;
 795   transition: 0.4s;
 796 }
 797 .searchBox:hover > .searchInput{
 798   width: 240px;
 799   border-bottom: solid 1px #C3CDDB;
 800 }
 801 .searchBox:hover > .searchInput::placeholder{
 802   color: #C3CDDB;
 803 }
 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);
 809 }
 810 .searchBox:hover > .searchButton{
 811   color: #1B3E6F;
 812 }
 813 .searchInput{
 814   border: none;
 815   background: none;
 816   outline: none;
 817   float: left;
 818   padding: 0;
 819   color: #1B3E6F;
 820   font-size: 12px;
 821   transition: 0.4s;
 822   line-height: 49px;
 823   width: 0px;
 824 }
 825 .searchInput::placeholder{
 826   color: #BABBC3;
 827 }
 828 .searchBox-expanded{
 829   width: 240px;
 830   border-bottom: solid 1px #C3CDDB;
 831 }
 832 /**Drop Down Menu**/
 833 .dropdown{
 834   position: relative;
 835   display: inline-block;
 836   text-align: left;
 837   width: 132px;
 838   z-index: 200;
 839 }
 840 .dropdown-text{
 841   cursor: pointer;
 842   position: relative;
 843   text-indent: 10px;
 844   line-height: 32px;
 845   background-color: #eee;
 846   border: 1px solid #ccc;
 847   border-radius: 3px;
 848   box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
 849   width: 100%;
 850 }
 851 .dropdown-text:after{
 852   position: absolute;
 853   right: 6px;
 854   top: 15px;
 855   content: '';
 856   width: 0px;
 857   height: 0px;
 858   border-style: solid;
 859   /* border-width: 5px 4px 0 4px;
 860   border-color: #555 transparent transparent transparent; */
 861   border:0px
 862 }
 863 .dropdown-toggle{
 864   font-size: 0;
 865   z-index: 1;
 866   cursor: pointer;
 867   position: absolute;
 868   top: 0;
 869   border: none;
 870   padding: 0;
 871   margin: 0 0 0 1px;
 872   background: transparent;
 873   text-indent: -10px;
 874   height: 34px;
 875   width: 100%;
 876 }
 877 .dropdown-toggle:focus{
 878   outline: 0;
 879 }
 880 .dropdown-content{
 881   position: absolute;
 882   top: 32px;
 883   width: 140px;
 884   margin: 0;
 885   padding: 0;
 886   opacity: 0;
 887   visibility:hidden;
 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;
 894   border-radius: 3px;
 895   text-indent: 10px;
 896   line-height: 28px;
 897   background-color: #eee;
 898   border: 1px solid #ccc;
 899 }
 900 .dropdown-content a{
 901   display: block;
 902 }
 903 .dropdown-content a:hover{
 904   background: #e8e8e8;
 905 }
 906 .dropdown-toggle:hover ~ .dropdown-text,
 907 .dropdown-toggle:focus ~ .dropdown-text{
 908   background-color: #e8e8e8;
 909 }
 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);
 912   z-index: 2;
 913 }
 914 .dropdown-toggle:focus ~ .dropdown-text:after{
 915   border-width: 0 4px 5px 4px;
 916   border-color: transparent transparent #555 transparent;
 917 }
 918 .dropdown-content:hover,
 919 .dropdown-toggle:focus ~ .dropdown-content{
 920   opacity: 1;
 921   visibility:visible;
 922   top: 42px;
 923 }
 924 /**Card**/
 925 /* Hover Shadow */
 926 @keyframes hover {
 927   50% {
 928     transform: translateY(-3px);
 929   }
 930   100% {
 931     transform: translateY(-6px);
 932   }
 933 }
 934 @keyframes card {
 935   0% {
 936     transform: translateY(6px);
 937     opacity: .3;
 938   }
 939   50% {
 940     transform: translateY(3px);
 941     opacity: .8;
 942   }
 943   100% {
 944     transform: translateY(6px);
 945     opacity: .3;
 946   }
 947 }
 948 .card {
 949   /* display: inline-block;
 950   position: relative;
 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);
 957 }
 958 /* .card:before {
 959   pointer-events: none;
 960   position: absolute;
 961   z-index: -1;
 962   content: '';
 963   top: 100%;
 964   left: 5%;
 965   height: 10px;
 966   width: 90%;
 967   opacity: 0;
 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;
 971 } */
 972 /* .card:hover {
 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;
 980 }
 981 .card:hover:before {
 982   opacity: .4;
 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;
 990 } */
 991 .card-body{
 992   padding: 10px 20px 20px !important;
 993 }
 994
 995 /*Main Container*/
 996 .main-container{
 997   padding: 0 !important;
 998 }
 999 /*Profile & Help Area*/
1000 .profile-help .navbar{
1001   padding: 0 !important;
1002 }
1003 .profile-help .dropdown{
1004   width: 50px;
1005 }
1006 .profile-help .dropdown-text{
1007   border: 0;
1008   background: transparent;
1009   box-shadow: none;
1010   font-size: 13px;
1011   /* text-indent: -999px; */
1012 }
1013 .profile-help .dropdown-text img{
1014   width: 33px;
1015   height: 33px;
1016   border: solid 1px #fff;
1017   object-fit: cover;
1018   border-radius: 50%;
1019 }
1020 .profile-help .dropdown-toggle:hover ~ .dropdown-text{
1021   background: #fff;
1022 }
1023 .profile-help .dropdown-toggle:hover ~ .dropdown-text img{
1024   box-shadow: 0 2px 6px 6px rgba(47, 83, 151, .17);
1025 }
1026 .profile-help .dropdown-content{
1027   right: 0;
1028   top: 47px;
1029   padding: 4px 0;
1030   background-color: #fff;
1031   border: 1px solid #ECEDF2;
1032   border-radius: 2px;
1033   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12) !important;
1034 }
1035 .profile-help .dropdown-content li:hover{
1036   background-color: #ECEDF2;
1037 }
1038 .profile-help .dropdown-content a{
1039   padding: 3px;
1040   color: #1B3E6F;
1041   font-size: 13px;
1042 }
1043 .profile-help .dropdown-content a:hover{
1044   text-decoration: none;
1045   background-color: transparent;
1046 }
1047 .userMenu.dropdown{
1048   margin-left: 9px;
1049   border-left: solid 1px #ECEDF2;
1050 }
1051 .helpMenu.dropdown{
1052   width: 32px !important;
1053 }
1054 .helpMenu .dropdown-text{
1055   text-indent: unset;
1056   text-align: center;
1057 }
1058 .helpMenu li:hover,
1059 .helpMenu li:hover i,
1060 .helpMenu li:hover p{
1061   cursor: pointer;
1062 }
1063 .helpMenu li:not(:last-child){
1064   margin-bottom: 9px;
1065 }
1066 .helpMenu .dropdown-text i{
1067   text-align: center;
1068   font-size: 19px;
1069   color: #C3CDDB;
1070   vertical-align: middle;
1071 }
1072 .helpMenu:hover .dropdown-text i{
1073   color: #1B3E6F;
1074 }
1075 .helpMenu .dropdown-content{
1076   padding: 6px;
1077 }
1078 .helpMenu .dropdown-content a{
1079   padding: 5px 12px !important;
1080   text-align: left;
1081   text-indent: 0;
1082   font-size: 14px;
1083   line-height: 22px;
1084 }
1085 .helpMenu .dropdown-content p{
1086   display: inline;
1087   line-height: 15px;
1088   font-weight: bold;
1089 }
1090 .helpMenu .dropdown-content p:hover{
1091   cursor: pointer;
1092 }
1093 .helpMenu .dropdown-content p label{
1094   display: inline;
1095 }
1096 .helpMenu .dropdown-content p input{
1097   display: none;
1098 }
1099 .helpMenu .dropdown-content span{
1100   display: inline-block;
1101   padding-left: 18px;
1102   font-size: 13px;
1103   color: #C1CDDD;
1104   font-weight: normal;
1105 }
1106 .helpMenu .dropdown-toggle:focus ~ .dropdown-text{
1107   background-color: #F4F9FE;
1108   border-radius: 50%;
1109 }
1110 .helpMenu .dropdown-content{
1111   width: 262px;
1112 }
1113 .help-btn{
1114   border-right: solid 1px #ECEDF2;
1115 }
1116 .help-btn .nav-link{
1117   padding: 7px 8px 0 !important;
1118 }
1119 .help-btn i{
1120   font-size: 19px;
1121   color: #C3CDDB;
1122 }
1123 .help-btn a:hover i{
1124   color: #1B3E6F;
1125 }
1126 .header-button-save button{
1127   border-radius: 50px;
1128 }
1129 /*Page Title*/
1130 .page-title{
1131   padding: 20px 30px;
1132   background:#fff;
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;
1137   position: relative;
1138   z-index: 300;
1139   /* position: fixed;
1140   width: calc(100% - 50px); */
1141 }
1142 .page-title h2{
1143   font-size: 16px;
1144   font-weight: bold;
1145   padding-top: 1px;
1146 }
1147 .page-title h2 span{
1148   color: #C3CDDB;
1149   font-size: 14px;
1150 }
1151 /*Content*/
1152 .body-container{
1153   padding: 0 30px !important;
1154 }
1155 .body-container > .container{
1156   padding: 0;
1157 }
1158 .search-filter-col{
1159   padding-right: 0 !important;
1160   border-bottom: solid 1px #ECEDF2 !important;
1161 }
1162 /**Packages Filter**/
1163 .packagesFilter{
1164   margin-top: 12px;
1165   margin-bottom: 7px;
1166   z-index: 220 !important;
1167 }
1168 .packagesFilter .dropdown-toggle{
1169   height: 36px !important;
1170 }
1171 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
1172   border-color: transparent transparent #1B3E6F transparent;
1173 }
1174 .packagesFilter .dropdown-text{
1175   background: transparent;
1176   border: 0;
1177   box-shadow: none;
1178   text-indent: 14px;
1179   line-height: 30px;
1180   font-size: 12px;
1181 }
1182 .packagesFilter .dropdown-text::after{
1183   right: 12px;
1184   border: solid !important;
1185   border-width: 5px 4px 0 4px !important;
1186   border-color: #1B3E6F transparent transparent transparent !important;
1187 }
1188 .packagesFilter .dropdown-toggle:hover ~ .dropdown-text,
1189 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
1190   background-color: transparent;
1191   box-shadow: none;
1192   border-radius: 0;
1193 }
1194 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
1195   background: #fff;
1196   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1197 }
1198 .packagesFilter .dropdown-text::after{
1199   top: 12px;
1200 }
1201 .packagesFilter .dropdown-content{
1202   padding: 6px 0;
1203   background: #fff;
1204   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1205   border: 0;
1206   border-top-left-radius: 0;
1207   border-top-right-radius: 0;
1208   border-bottom-left-radius: 2px;
1209   border-bottom-right-radius: 2px;
1210 }
1211 .packagesFilter .dropdown-content ul{
1212   max-height: 200px;
1213   overflow-y: auto;
1214   padding-left: 0;
1215 }
1216 .packagesFilter .dropdown-content li{
1217   list-style: none;
1218 }
1219 .packagesFilter .dropdown-content li:hover .custom-checkbox{
1220   cursor: pointer;
1221 }
1222 .packagesFilter .dropdown-content:hover,
1223 .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
1224   top: 30px;
1225 }
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;
1233   color: #1B3E6F;
1234   font-size: 13px;
1235 }
1236 .packagesFilter .form-control::placeholder{
1237   color: #BABBC3;
1238 }
1239 .packagesFilter .form-control:focus{
1240   box-shadow: none !important;
1241   border-bottom: solid 1px #1B3E6F !important;
1242 }
1243 .packagesFilter .custom-checkbox{
1244   margin-left: 8px;
1245 }
1246 .packagesFilter .custom-control-input{
1247   left: 10px;
1248 }
1249 .packagesFilter .custom-control-label{
1250   line-height: 28px !important;
1251   font-size: 13px !important;
1252   text-indent: 6px !important;
1253 }
1254 .fillteredTags{
1255   margin-left: 3px;
1256   padding: 3px 3px;
1257   background: #C3CDDB;
1258   color: #1B3E6F;
1259   font-weight: bold;
1260   border-radius: 4px;
1261 }
1262 .fillteredTags:empty{
1263   visibility: hidden;
1264 }
1265 /**Packages Sort**/
1266 .sort-packages{
1267   font-size: 12px;
1268   font-weight: bold;
1269   color: #C3CDDB;
1270 }
1271 .sort-packages .dropdown{
1272   width: 88px;
1273 }
1274 .sort-packages .dropdown-text{
1275   background: transparent;
1276   border: 0;
1277   box-shadow: none;
1278   color: #1B3E6F;
1279 }
1280 .sort-packages .dropdown-text::after{
1281   border-color: #1B3E6F transparent transparent transparent;
1282 }
1283 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
1284   border-color: transparent transparent #1B3E6F transparent;
1285 }
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);
1289   background: #fff;
1290 }
1291 .sort-packages .dropdown-content:hover,
1292 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
1293   top: 30px;
1294 }
1295 .sort-packages .dropdown-content{
1296   width: 88px;
1297   padding: 6px 0;
1298   background: #fff;
1299   border-radius: 2px;
1300   border: 0;
1301   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1302 }
1303 .sort-packages .dropdown-content a{
1304   color: #1B3E6F;
1305   font-size: 12px;
1306 }
1307 .sort-packages .dropdown-content a:hover{
1308   background-color: #F4F9FE;
1309   text-decoration: unset;
1310 }
1311 /**Pagination**/
1312 .page-item .page-link,
1313 .page-item.disabled .page-link{
1314   background: transparent !important;
1315   border: 0;
1316   color: #1B3E6F !important;
1317   font-size: 14px;
1318 }
1319 .page-link:hover{
1320   color: #1B3E6F !important;
1321   background-color: #fff !important;
1322   border-radius: 100%;
1323   transition: 0.3s;
1324   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
1325 }
1326 .page-item.disabled{
1327   opacity: .3;
1328 }
1329 /**Packages Cards***/
1330 /***Package Info Card***/
1331 .packages-card .card{
1332   margin: 0;
1333   border-radius: 2px;
1334   border: 0;
1335   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
1336 }
1337 .packages-card .card:hover{
1338   box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17);
1339   transition: all 0.5s ease;
1340   cursor: pointer;
1341 }
1342 .packages-card .card:hover .card-title,
1343 .packages-card .card:hover .card-title span{
1344   color: #1273EB !important;
1345 }
1346 .packages-card .card-title{
1347   margin-bottom: 0 !important;
1348   font-size: 14px;
1349   font-weight: bold;
1350 }
1351 .packages-card .card-title .packageName{
1352   margin-bottom: 0;
1353   display: inline-block;
1354   width: auto;
1355   max-width: 64%;
1356   white-space: nowrap;
1357   overflow: hidden;
1358   text-overflow: ellipsis;
1359   font-size: 13px;
1360   vertical-align: bottom;
1361   color: #1B3E6F;
1362 }
1363 .packages-card .card-title:hover,
1364 .packages-card .card-title:hover .packageName{
1365   text-decoration: none;
1366   color: #1273EB;
1367 }
1368 .packages-card .card-body{
1369   padding-bottom: 0 !important;
1370 }
1371 .packages-card .card-footer .col{
1372   padding-left: 3px !important;
1373   text-align: left;
1374 }
1375
1376 /***Add Package Card***/
1377 .addPaackage-card{
1378   background: #F4F9FE !important;
1379   border: solid 1px #D7E7F9 !important;
1380 }
1381 .addPaackage-card:hover{
1382   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
1383 }
1384
1385 .addPaackage-card a:hover{
1386   text-decoration: unset;
1387 }
1388 .addPaackage-card .card-footer .col{
1389   padding: 0;
1390   text-align: right;
1391 }
1392 .addPaackage-card .card-footer .col:last-child{
1393   text-align: left;
1394 }
1395 .btn-create-package,
1396 .btn-import-package{
1397   width: auto;
1398 }
1399 .btn-create-package{
1400   margin-bottom: 6px !important;
1401 }
1402 .btn-import-package{
1403   margin-bottom: 15px !important;
1404 }
1405 .btn-create-package,
1406 .btn-create-package:hover{
1407   background-color: #1B3E6F;
1408   border-color: #1B3E6F;
1409   color: #fff;
1410 }
1411 .btn-import-package,
1412 .btn-import-package:hover{
1413   color: #1B3E6F;
1414 }
1415 /***Actions Menu***/
1416 .packages-card .dropdown{
1417   width: auto;
1418   float: right;
1419 }
1420 .packages-card .dropdown-text{
1421   background: transparent;
1422   border: 0;
1423   box-shadow: none;
1424   text-indent: 0;
1425   line-height: unset;
1426   border-bottom-left-radius: 0;
1427   border-bottom-right-radius: 0;
1428   opacity: .6;
1429 }
1430 .packages-card .dropdown-text::after{
1431   display: none;
1432 }
1433 .packages-card .dropdown-text img{
1434   padding: 9px 7px;
1435 }
1436 .packages-card .dropdown-content{
1437   right: 0;
1438   width: 120px;
1439   padding: 6px 0;
1440   border: 0;
1441   text-indent: 0;
1442   border-radius: 4px;
1443   border-top-right-radius: 0;
1444   background: #1B3E6F;
1445 }
1446 .packages-card .dropdown-content a{
1447   padding-left: 12px;
1448   color: #fff;
1449   font-size: 12px;
1450   /* background-position: 14px center;
1451   background-size: 10%;
1452   background-repeat: no-repeat; */
1453 }
1454 .packages-card .dropdown-content a i{
1455   margin-right: 4px;
1456 }
1457 .packages-card .dropdown-content a:hover{
1458   background-color: #172B4D;
1459   text-decoration: unset;
1460   color: #fff;
1461 }
1462 .packages-card .dropdown-content:hover,
1463 .packages-card .dropdown-toggle:focus ~ .dropdown-content{
1464   top: 22px;
1465 }
1466 .packages-card .dropdown-toggle:focus ~ .dropdown-text .icon-menuDots{
1467   color: #D0D7E4;
1468 }
1469 .packages-card .dropdown-toggle:hover ~ .dropdown-text{
1470   background: transparent;
1471   opacity: 1;
1472 }
1473 .packages-card .dropdown-toggle:focus ~ .dropdown-text{
1474   width: 27px;
1475   text-align: center;
1476   opacity: 1;
1477   background: #1B3E6F;
1478   box-shadow: none;
1479 }
1480
1481 .package-version::before{
1482   content: "|";
1483   margin-left: 8px;
1484   margin-right: 6px;
1485   vertical-align: text-bottom;
1486 }
1487
1488 /***Contributers***/
1489 ul.package-contributers{
1490   margin-top: 12px;
1491   margin-bottom: 9px !important;
1492   padding-left: 0 !important;
1493 }
1494 .package-contributers li{
1495   list-style: none;
1496   display: inline-block;
1497 }
1498 .package-contributers li{
1499   margin-left: -5px;
1500 }
1501 .package-contributers li:first-child{
1502   margin-left: 0;
1503 }
1504 .package-contributers li:last-child{
1505   margin-left: 9px;
1506 }
1507 .package-modifier,
1508 .package-contributers button{
1509   height: 20px !important;
1510   padding: 0 !important;
1511   border-radius: 100%;
1512   border: 0 !important;
1513   /*Hover Effect*/
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;
1520   position: relative;
1521 }
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;
1527   border-radius: 50%;
1528   bottom: 0;
1529   box-shadow: 0 0 0 2px #fff;
1530   content: "";
1531   left: 0;
1532   position: absolute;
1533   right: 0;
1534   top: 0;
1535 }
1536 .package-modifier:hover,
1537 .package-contributers button:hover{
1538   box-shadow: 0 0 0 2px #D7E7F9;
1539   text-decoration: none;
1540 }
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;
1549   opacity: 0.5;
1550 }
1551 .package-modifier img,
1552 .package-contributers button img{
1553   width: 20px;
1554   height: 20px;
1555   object-fit: cover;
1556   vertical-align: top;
1557   border-radius: 100%;
1558 }
1559 .package-contributers a{
1560   font-size: 12px;
1561   color: #1273EB;
1562 }
1563 .package-contributers a:hover{
1564   text-decoration: unset;
1565 }
1566 /***Package Footer***/
1567 .packages-card .card-footer{
1568   padding: 0 !important;
1569   background: transparent !important;
1570   border-top-color: #F7F6F6 !important;
1571 }
1572 .packages-card .card-footer .col{
1573   text-align: center;
1574 }
1575 .packages-card .card-footer .col:first-child{
1576   border-right: solid 1px #F7F6F6;
1577 }
1578 .packages-card .card-footer .btn{
1579   padding: 10px 0 10px 0 !important;
1580   background-color: transparent !important;
1581   color: #1B3E6F !important;
1582   border: 0;
1583   font-size: 13px;
1584   text-align: left;
1585   opacity: .4;
1586 }
1587 .packages-card .card-footer .btn:hover{
1588   opacity: 1;
1589 }
1590 .packages-card .card-footer i{
1591   margin-right: 6px;
1592 }
1593 .icon-deployed-active,
1594 .icon-deploy-inactive{
1595   margin-right: 9px;
1596   display: inline;
1597   background-image: url(/assets/img/icon-deploy-active.svg);
1598   background-position: center center;
1599   background-repeat: no-repeat;
1600   vertical-align: baseline;
1601 }
1602 .icon-deploy-inactive{
1603   background-image: url(/assets/img/icon-deploy-inactive.svg);
1604 }
1605
1606
1607 /*CREATE NEW ACTION MODAL*/
1608 .createActionModal .modal-dialog{
1609   max-width: 85%;
1610 }
1611 .createActionModal .modal-header{
1612   padding-top: 21px !important;
1613   padding-bottom: 0 !important;
1614   border-bottom: 0;
1615 }
1616 .createActionModal .close{
1617   margin: 0 !important;
1618   padding: 6px 13px 10px !important;
1619   width: auto;
1620   opacity: 1 !important;
1621   border-radius: 100%;
1622 }
1623 .createActionModal .close:hover{
1624   background-color: #E0E8F2;
1625 }
1626 .createActionModal .icon-action-close{
1627   font-size: 14px;
1628   font-weight: bold;
1629 }
1630 .icon-action-close::before{
1631   font-size: 13px;
1632 }
1633 .createActionModal .modal-body{
1634   padding-top: 0 !important;
1635   padding-bottom: 10px !important;
1636 }
1637 .createActionModal .modal-body .carousel-item{
1638   padding-left: 20px;
1639   padding-right: 10px;
1640 }
1641 @keyframes fadeInScale {
1642   0% {
1643     opacity: 0;
1644     -webkit-transform: scale(0) translateY(50%);
1645             transform: scale(0) translateY(50%);
1646   }
1647   90% {
1648     -webkit-transform: scale(1.05);
1649             transform: scale(1.05);
1650   }
1651   100% {
1652     opacity: 1;
1653     -webkit-transform: scale(1) translateY(0);
1654             transform: scale(1) translateY(0);
1655   }
1656 }
1657 .card.actionType{
1658   margin-bottom: 25px !important;
1659   padding: 220px 25px 50px;
1660   box-shadow: none;
1661   border-radius: 0;
1662   -webkit-transition: all 0.3s ease-in-out;
1663   transition: all 0.3s ease-in-out;
1664 }
1665 .card.actionType:hover{
1666   box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
1667   transition: 0.3s !important;
1668 }
1669 .createActionModal h3.mainHead{
1670   text-transform: uppercase;
1671   margin-bottom: 6px;
1672   font-size: 14px;
1673   font-weight: bold;
1674   text-align: center;
1675   color: #C1CDDD;
1676 }
1677 .createActionModal h1{
1678   margin-bottom: 21px;
1679   font-size: 22px;
1680   font-weight: bold;
1681   text-align: center;
1682 }
1683 .createActionModal .carousel-inner{
1684   height: 510px;
1685 }
1686 .createActionModal .skip-btn{
1687   float: unset;
1688   width: auto;
1689   color: #1273EB;
1690   font-weight: normal !important;
1691   font-size: 13px;
1692   border: solid 1px #F1F2FA;
1693   border-radius: 2px;
1694 }
1695 .createActionModal .skip-btn:hover{
1696   background: #1273EB;
1697   color: #fff;
1698   box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
1699 }
1700
1701 .actionType,
1702 .actionType:hover{
1703   text-align: center;
1704   line-height: 40px;
1705   background-position: center 40px;
1706   background-repeat: no-repeat;
1707   background-size: 144px 172px;
1708 }
1709 .actionType h3,
1710 .actionType p{
1711   margin: 0;
1712 }
1713 .actionType h3{
1714   text-transform: uppercase;
1715   font-size: 13px;
1716   font-weight: bold;
1717 }
1718 .actionType p{
1719   font-size: 13px !important;
1720   line-height: 24px;
1721 }
1722 .actionType .btn,
1723 .actionType:hover .btn{
1724   opacity: 0;
1725   position: absolute;
1726   bottom: 0;
1727   left: 30% !important;
1728   margin-bottom: 26px;
1729   width: 100px;
1730   height: 30px;
1731   line-height: 15px;
1732   background: #1B3E6F;
1733   color: #fff;
1734   font-size: 12px;
1735   font-weight: bold;
1736   border-radius: 15px !important;
1737   -webkit-transform: translateY(-20%);
1738           transform: translateY(-20%);
1739           -webkit-transition: all 0.3s ease-in-out;
1740   transition: all 0.3s ease-in-out;
1741 }
1742 .actionType:hover .btn{
1743   opacity: 1;
1744   -webkit-transform: translateY(0);
1745           transform: translateY(0);
1746 }
1747 .actionType.custom{
1748   background-image: url(/assets/img/icon-action-custom.svg);
1749 }
1750 .actionType.custom:hover{
1751   cursor: pointer;
1752   background-image: url(/assets/img/icon-action-custom-hover.svg);
1753 }
1754 .actionType.default{
1755   background-image: url(/assets/img/icon-action-default.svg);
1756 }
1757 .actionType.default:hover{
1758   cursor: pointer;
1759   background-image: url(/assets/img/icon-action-default-hover.svg);
1760 }
1761 .actionType.recent{
1762   background-image: url(/assets/img/icon-action-recent.svg);
1763 }
1764 .actionType.recent:hover{
1765   cursor: pointer;
1766   background-image: url(/assets/img/icon-action-recent-hover.svg);
1767 }
1768 .actionType.import{
1769   background-image: url(/assets/img/icon-action-import.svg);
1770 }
1771 .actionType.import:hover{
1772   cursor: pointer;
1773   background-image: url(/assets/img/icon-action-import-hover.svg);
1774 }
1775 .createActionModal .carousel-indicators{
1776   margin: 0;
1777 }
1778 .createActionModal .carousel-indicators li{
1779   margin: 0;
1780   padding: 0;
1781   text-indent: 0;
1782   border: 0;
1783 }
1784 .createActionModal .back{
1785   position: fixed !important;
1786   top: 83px;
1787   width: auto;
1788   padding:0 !important;
1789 }
1790
1791 .actionFormWrapper{
1792   width: 60%;
1793   margin: 0 auto;
1794 }
1795 .createActionModal .form-control.customAction{
1796   width: 55%;
1797   margin: 70px auto;
1798   padding-left: 0;
1799   border-radius: 0;
1800   border: 0;
1801   border-bottom: solid 1px #E0E8F2;
1802   color: #1B3E6F !important;
1803   font-size: 14px;
1804 }
1805 .createActionModal .form-control:focus{
1806   border-bottom: solid 1px #1B3E6F;
1807   background: transparent !important;
1808   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1809   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1810   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1811   text-shadow: none;
1812 }
1813 .createActionModal .form-control::placeholder{
1814   color: #C3CDDB;
1815
1816 }
1817 .createActionModal .submit,
1818 .createActionModal .submit:hover{
1819   float: unset;
1820   width: 100px;
1821   height: 30px;
1822   background: #1B3E6F;
1823   color: #fff;
1824   font-size: 12px;
1825   font-weight: bold;
1826   border-radius: 15px !important;
1827 }
1828 .actionlabel{
1829   margin-right: 2px;
1830   color: #C3CDDB;
1831   font-size: 11px;
1832   font-weight: bold;
1833 }
1834 .form-control.searchInput,
1835 .form-control.searchInput:focus{
1836   float: right;
1837   width: 250px !important;
1838   height: 30px !important;
1839   padding-left: 32px !important;
1840   border: solid 1px #E0E8F2 !important;
1841   border-radius: 2px !important;
1842   background: url(../src/assets/img/icon-search-light.svg) 9px center no-repeat !important;
1843   font-size: 13px !important;
1844   color: #1B3E6F;
1845 }
1846 .actionsListScroll{
1847   height: 228px;
1848   max-height: 228px;
1849   overflow: auto;
1850 }
1851 .createActionModal .actionName{
1852   margin-bottom: 15px;
1853   padding: 9px 18px;
1854   box-shadow: 0 2px 6px rgba(47,83,151,0.15);
1855 }
1856 .createActionModal p.selectedActions{
1857   margin-top: 20px;
1858   margin-bottom: 10px;
1859   color: #8D9FB7;
1860   font-size: 13px;
1861 }
1862 .createActionModal .sort-packages .dropdown{
1863   width: 60%;
1864 }
1865 .createActionModal .sort-packages .dropdown-text::after {
1866   right: 6px;
1867 }
1868 .createActionModal .sort-packages .dropdown-content{
1869   width: 100%;
1870 }
1871 .createActionModal .folder-upload-text button{
1872   float: unset;
1873 }
1874 /* Border Fade */
1875 .border-fade {
1876   display: inline-block;
1877   transition-duration: 0.3s;
1878   transition-property: box-shadow;
1879   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1880   transform: translateZ(0);
1881   box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
1882   /* Hack to improve aliasing on mobile/tablet devices */
1883 }
1884 .border-fade:hover {
1885   box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
1886   /* Hack to improve aliasing on mobile/tablet devices */
1887 }
1888 /*Content*/
1889
1890 /**Title Action Buttons**/
1891 .page-title-actions li{
1892   display: inline-block;
1893   text-align: center;
1894 }
1895 .title-action{
1896   -webkit-transition: box-shadow 0.2s ease;
1897   -moz-transition: box-shadow 0.2s ease;
1898   transition: box-shadow 0.2s ease;
1899   -webkit-backface-visibility: hidden;
1900   backface-visibility: hidden;
1901   border-radius: 50%;
1902   color: #6a75eb;
1903   display: inline-block;
1904   font-size: 0.889em;
1905   height: 4em;
1906   margin: 0 1em 1em;
1907   position: relative;
1908   text-align: center;
1909   text-transform: lowercase;
1910   width: 4em;
1911   line-height: 4em;
1912 }
1913 .title-action:before{
1914   -webkit-transition: all 0.2s ease;
1915   -moz-transition: all 0.2s ease;
1916   transition: all 0.2s ease;
1917   border-radius: 50%;
1918   bottom: 0;
1919   box-shadow: 0 0 0 1px #000;
1920   content: "";
1921   left: 0;
1922   position: absolute;
1923   right: 0;
1924   top: 0;
1925 }
1926 .title-action:hover{
1927   box-shadow: 0 0 0 7px #07819b;
1928   text-decoration: none;
1929 }
1930 .title-action:hover:before{
1931   -webkit-transform: scale(0.925);
1932   -moz-transform: scale(0.925);
1933   -ms-transform: scale(0.925);
1934   -o-transform: scale(0.925);
1935   transform: scale(0.925);
1936   box-shadow: 0 0 0 1px #07819b;
1937   opacity: 0.5;
1938 }
1939
1940 /*Animation Button*/
1941 /**Float**/
1942 .float {
1943   display: inline-block;
1944   transition-duration: 0.3s;
1945   transition-property: transform;
1946   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1947   transform: translateZ(0);
1948   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
1949 }
1950 .float:hover {
1951   transform: translateY(-5px);
1952 }
1953
1954 /*TOOLTIP*/
1955 /* Base styles for the element that has a tooltip */
1956 [data-tooltip],
1957 .tooltip {
1958   position: relative;
1959   cursor: pointer;
1960   text-align: center;
1961 }
1962
1963 /* Base styles for the entire tooltip */
1964 [data-tooltip]:before,
1965 [data-tooltip]:after,
1966 .tooltip:before,
1967 .tooltip:after {
1968   position: absolute;
1969   visibility: hidden;
1970   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1971   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
1972   opacity: 0;
1973   -webkit-transition:
1974           opacity 0.2s ease-in-out,
1975           visibility 0.2s ease-in-out,
1976           -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1977   -moz-transition:
1978           opacity 0.2s ease-in-out,
1979           visibility 0.2s ease-in-out,
1980           -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1981   transition:
1982           opacity 0.2s ease-in-out,
1983           visibility 0.2s ease-in-out,
1984           transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1985   -webkit-transform: translate3d(0, 0, 0);
1986   -moz-transform:    translate3d(0, 0, 0);
1987   transform:         translate3d(0, 0, 0);
1988   pointer-events: none;
1989 }
1990
1991 /* Show the entire tooltip on hover and focus */
1992 [data-tooltip]:hover:before,
1993 [data-tooltip]:hover:after,
1994 [data-tooltip]:focus:before,
1995 [data-tooltip]:focus:after,
1996 .tooltip:hover:before,
1997 .tooltip:hover:after,
1998 .tooltip:focus:before,
1999 .tooltip:focus:after {
2000   visibility: visible;
2001   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
2002   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
2003   opacity: 1;
2004 }
2005
2006 /* Base styles for the tooltip's directional arrow */
2007 .tooltip:before,
2008 [data-tooltip]:before {
2009   z-index: 1001;
2010   border: 6px solid transparent;
2011   background: transparent;
2012   content: "";
2013 }
2014
2015 /* Base styles for the tooltip's content area */
2016 .tooltip:after,
2017 [data-tooltip]:after {
2018   z-index: 1000;
2019   padding: 8px 20px !important;
2020   width: max-content;
2021   background-color: #C3CDDB !important;
2022   color: #1B3E6F;
2023   content: attr(data-tooltip);
2024   font-size: 12px;
2025   font-weight: bold !important;
2026   line-height: 1.2;
2027   border-radius: 3px;
2028 }
2029
2030 /* Directions */
2031
2032 /* Top (default) */
2033 [data-tooltip]:before,
2034 [data-tooltip]:after,
2035 .tooltip:before,
2036 .tooltip:after,
2037 .tooltip-top:before,
2038 .tooltip-top:after {
2039   bottom: 100%;
2040   left: 50%;
2041 }
2042
2043 [data-tooltip]:before,
2044 .tooltip:before,
2045 .tooltip-top:before {
2046   margin-left: 0;
2047   margin-bottom: -12px;
2048   border-bottom-color: #DEE8F3;
2049   border-bottom-color: rgba(222, 232, 243, 1.0);
2050 }
2051
2052 /* Horizontally align top/bottom tooltips */
2053 [data-tooltip]:after,
2054 .tooltip:after,
2055 .tooltip-top:after {
2056   margin-left: -50%;
2057 }
2058
2059 [data-tooltip]:hover:before,
2060 [data-tooltip]:hover:after,
2061 [data-tooltip]:focus:before,
2062 [data-tooltip]:focus:after,
2063 .tooltip:hover:before,
2064 .tooltip:hover:after,
2065 .tooltip:focus:before,
2066 .tooltip:focus:after,
2067 .tooltip-top:hover:before,
2068 .tooltip-top:hover:after,
2069 .tooltip-top:focus:before,
2070 .tooltip-top:focus:after {
2071   -webkit-transform: translateY(-12px);
2072   -moz-transform:    translateY(-12px);
2073   transform:         translateY(-12px);
2074 }
2075
2076 /* Left */
2077 .tooltip-left:before,
2078 .tooltip-left:after {
2079   right: 100%;
2080   bottom: 50%;
2081   left: auto;
2082 }
2083
2084 .tooltip-left:before {
2085   margin-left: 0;
2086   margin-right: -12px;
2087   margin-bottom: 0;
2088   border-top-color: transparent;
2089   border-left-color: #C3CDDB;
2090   /* border-left-color: hsla(0, 0%, 20%, 0.9); */
2091 }
2092
2093 .tooltip-left:hover:before,
2094 .tooltip-left:hover:after,
2095 .tooltip-left:focus:before,
2096 .tooltip-left:focus:after {
2097   -webkit-transform: translateX(-12px);
2098   -moz-transform:    translateX(-12px);
2099   transform:         translateX(-12px);
2100 }
2101
2102 /* Bottom */
2103 .tooltip-bottom:before,
2104 .tooltip-bottom:after {
2105   top: 100%;
2106   bottom: auto;
2107   left: 20%;
2108 }
2109
2110 .tooltip-bottom:before {
2111   margin-top: -12px;
2112   margin-bottom: 0;
2113   border-top-color: transparent;
2114   border-bottom-color: #C3CDDB;
2115   border-bottom-color: rgba(195, 205, 219, 1.0);
2116 }
2117
2118 .tooltip-bottom:hover:before,
2119 .tooltip-bottom:hover:after,
2120 .tooltip-bottom:focus:before,
2121 .tooltip-bottom:focus:after {
2122   -webkit-transform: translateY(12px);
2123   -moz-transform:    translateY(12px);
2124   transform:         translateY(12px);
2125 }
2126
2127 /* Right */
2128 .tooltip-right:before,
2129 .tooltip-right:after {
2130   bottom: 50%;
2131   left: 20%;
2132 }
2133
2134 .tooltip-right:before {
2135   margin-bottom: 0;
2136   margin-left: -12px;
2137   border-top-color: transparent;
2138   border-right-color: #C3CDDB;
2139   /* border-right-color: hsla(0, 0%, 20%, 0.9); */
2140 }
2141
2142 .tooltip-right:hover:before,
2143 .tooltip-right:hover:after,
2144 .tooltip-right:focus:before,
2145 .tooltip-right:focus:after {
2146   -webkit-transform: translateX(12px);
2147   -moz-transform:    translateX(12px);
2148   transform:         translateX(12px);
2149 }
2150
2151 /* Move directional arrows down a bit for left/right tooltips */
2152 .tooltip-left:before,
2153 .tooltip-right:before {
2154   top: 3px;
2155 }
2156
2157 /* Vertically center tooltip content for left/right tooltips */
2158 .tooltip-left:after,
2159 .tooltip-right:after {
2160   margin-left: 0;
2161   margin-bottom: -16px;
2162 }
2163
2164 /*TooltipModule - Shady*/
2165 .tooltip.in {
2166   opacity: 1.0 !important;
2167   filter:alpha(opacity=100) !important;
2168 }
2169 .tooltip:before,
2170 .tooltip:after{
2171   width: 100% !important;
2172 }
2173 .tooltip .tooltip-inner{
2174   width: max-content !important;
2175   text-align: left!important;
2176   /* color:#1B3E6F;
2177   background-color: #fff !important; */
2178   color:#1B3E6F;
2179   background-color: #C3CDDB !important;
2180   border: solid 1px #C3CDDB;
2181   border-radius: 1px !important;
2182   /* border-top-left-radius: 0 !important; */
2183   font-size: 12px;
2184   opacity: 1.0 !important;
2185 }
2186
2187 .bs-tooltip-auto[x-placement^=top] .arrow::before,
2188 .bs-tooltip-top .arrow::before {
2189   border-top-color: #C3CDDB !important;
2190 }
2191 .bs-tooltip-auto[x-placement^=right] .arrow::before,
2192 .bs-tooltip-right .arrow::before {
2193   border-right-color: #C3CDDB !important;
2194 }
2195 .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
2196 .bs-tooltip-bottom .arrow::before {
2197   border-bottom-color: #C3CDDB !important;
2198 }
2199 .bs-tooltip-auto[x-placement^=left] .arrow::before,
2200 .bs-tooltip-left .arrow::before {
2201   border-left-color: #C3CDDB !important;
2202 }
2203
2204 .btn{
2205 padding-right: 20px !important;
2206 padding-left: 20px !important;
2207
2208 }
2209 .btn.border-radius{
2210   border-radius: 20px !important;
2211 }
2212 .btn-primary{
2213   background-color: #1273EB !important;
2214   border-color: #1273EB !important;
2215 }
2216 .btn-primary:hover {
2217   background-color: #0069d9 !important;
2218   border-color: #0062cc !important;
2219 }
2220 .btn + .btn{
2221   margin-left: 10px;
2222 }
2223 .package-view-button button{
2224   width: 150px;
2225   float: right;
2226 }
2227 .package-view-button{
2228   margin-top: 6px;
2229 }
2230 .package-view-button .btn{
2231   padding: 6px 21px;
2232   border-radius: 18px;
2233   font-size: 13px !important;
2234 }
2235 .package-view-button .btn:hover{
2236   opacity: .9;
2237 }
2238 .package-view-button .btn-primary{
2239   background-color: #1B3E6F !important;
2240   border-color: #1B3E6F !important;
2241 }
2242 .package-view-button .btn-enrich,
2243 .package-view-button .btn-enrich:focus,
2244 .modal-footer .btn-primary.btn-enrich{
2245   background: #EB9A34 !important;
2246   border-color: #EB9A34 !important;
2247   color: #fff;
2248   outline: none !important;
2249 }
2250 .package-view-button .btn-deploy{
2251   background-color: #1273EB !important;
2252   border-color: #1273EB !important;
2253   color: #fff !important;
2254   /* background-color: #fff !important;
2255   border-color: #D0DFF1 !important;
2256   color: #1B3E6F !important; */
2257 }
2258 .package-view-title {
2259   font-size: 11px;
2260   color: #1B3E6F;
2261   font-weight: bold;
2262   margin-bottom: 5px;
2263   margin-top: 20px;
2264 }
2265 .package-view-title+p{
2266   font-size: 11px;
2267   margin-bottom: 0px;
2268 }
2269 .package-view-title+ul{
2270   margin-bottom: 0px;
2271 }
2272 .package-view-button .btn-outline-secondary i{
2273   font-size: 18px;
2274   margin-right: 4px;
2275 }
2276 .card.creat-card{
2277   margin: 0;
2278   border-radius: 2px;
2279   border: 0;
2280   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2281 }
2282 .card.creat-card .single-line{
2283   padding: 15px 25px 15px;
2284 }
2285 .card.creat-card .single-line-model{
2286   padding: 0px;
2287 }
2288 .card.creat-card .editor-container{
2289   padding: 25px;
2290 }
2291 .single-line label{
2292   margin-bottom: 0px;
2293 }
2294 .single-line-model label{
2295   margin-bottom: 0px;
2296   border-bottom: 1px solid #FAFAFA;
2297   padding: 15px 25px;
2298 }
2299 .single-line-model .label-name{
2300   width: 325px;
2301 }
2302 .single-line-model .label-input{
2303   width: calc(100% - 325px);
2304 }
2305 .single-line-model input{
2306   border-bottom: 1px solid #FAFAFA !important;
2307   padding: 15px 25px 15px 0px;
2308 }
2309 .customKeyTitle span{
2310   color: #C3CDDB !important;
2311   font-size: 11px;
2312 }
2313 .single-line-model input:focus,
2314 .single-line-custom-key input:focus{
2315   border-bottom-color: #1B3E6F !important;
2316   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2317   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2318   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2319 }
2320 .model-note-container{
2321   width: calc(100% - 325px);
2322   padding: 0px 25px 0px 0px ;
2323   margin-left: 325px;
2324 }
2325 .error-message{
2326   font-size:11px ;
2327   color: #FF6469;
2328 }
2329 .tages-container{
2330   margin-bottom: 25px;
2331 }
2332 .tag-notes{
2333   font-size: 11px;
2334   color: #C3CDDB;
2335   padding: 5px 25px 5px 0px;
2336   margin-bottom: 5px;
2337 }
2338   .single-tage{
2339     background: #E0E8F2;
2340     font-size: 13px;
2341     color: #1B3E6F;
2342     border-radius: 50px;
2343     padding: 5px 10px;
2344     margin-right:10px;
2345     margin-bottom: 10px;
2346   }
2347   .single-tage a{
2348     color: #1B3E6F;
2349     font-size: 14px;
2350   }
2351   .label-name{
2352     width: 300px;
2353     display: inline-block;
2354     margin-bottom: 0px;
2355     font-size: 13px;
2356     font-weight: bold;
2357   }
2358   .label-name span{
2359     color:#FF6469 ;
2360   }
2361   .delete-key{
2362     color: #FF6469;
2363     font-size: 10px;
2364     background: #FFE6E7;
2365     border: 1px solid #FFC9CB;
2366     padding: 3px 10px 2px;
2367     margin-left: 10px;
2368     border-radius: 5px;
2369   }
2370   .delete-key:hover{
2371     color: #C94448;
2372     background: #FFC9CB;
2373     border: 1px solid #FF6469;
2374     text-decoration: none;
2375   }
2376   .label-input{
2377     width: calc(100% - 300px);
2378     display: inline-block;
2379   }
2380 .form-check-input{
2381   margin-left: 0px !important;
2382   margin-top: 2px !important;
2383 }
2384 .form-check-input+span{
2385   margin-left: 20px;
2386   margin-right: 50px;
2387   font-size: 13px;
2388   display: flex;
2389 }
2390 .form-check-input+span i{
2391   margin-right: 5px;
2392   margin-left: 5px;
2393 }
2394
2395 .label-input input{
2396   margin-bottom: 0px;
2397   outline: 0px;
2398   border: 0px;
2399   font-size: 14px;
2400   width: 100%;
2401   color: #1B3E6F;
2402   transition: all 250ms ease-out;
2403 }
2404 .label-input input:focus{
2405   border-bottom: solid 1px #1B3E6F;
2406   background: transparent !important;
2407   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2408   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2409   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2410   text-shadow: none;
2411 }
2412 .label-input input:disabled{
2413   background: #fff;
2414   opacity: .5;
2415 }
2416 .label-input input[type=radio]{
2417   width: auto;
2418 }
2419 .label-input input[type=radio]+span{
2420   font-size: 12px;
2421   display: block;
2422   margin-right: 100px;
2423 }
2424 .single-line select{
2425   margin-bottom: 0px;
2426   padding-left: 10px;
2427   padding-right: 50px;
2428   outline: 0px;
2429   border: solid 1px #EEF4F9;
2430   background: none;
2431   background: url(/assets/img/arrow.svg) 90% center #F4F9FE no-repeat;
2432   background-size: 10px;
2433   width: auto;
2434   -webkit-appearance: none;
2435   -moz-appearance: none;
2436   text-indent: 0;
2437   text-overflow: '';
2438   font-size: 13px;
2439   color: #1B3E6F;
2440 }
2441 .single-line select:focus{
2442   box-shadow: 0 0 0 0;
2443 }
2444 .single-line select option:first-child{
2445   color: #C3CDDB;
2446 }
2447 .single-line-model input::placeholder{
2448   font-size: 14px;
2449   color: #C3CDDB;
2450 }
2451 .single-line-model.error{
2452   color:#FF6469;
2453 }
2454 .single-line-model.error input,
2455 .label-input input.ng-invalid{
2456   box-shadow: none;
2457   color:#FF6469;
2458   border-bottom: 1px solid #FF6469 !important;
2459 }
2460 .single-line .custom-key{
2461   background: none;
2462   border: 0px;
2463   color:#1273EB ;
2464   font-size: 15px;
2465 }
2466 .single-line .custom-key:focus{
2467   outline: none;
2468 }
2469 .creat-container{
2470   padding:70px 100px 70px 70px;
2471   position: relative;
2472 }
2473 .single-custom-key{
2474   width: 100%;
2475 }
2476 .single-custom-key:last-child{
2477   margin-bottom: 20px;
2478 }
2479 .single-line-custom-key{
2480   width: 45%;
2481   display: inline-block;
2482 }
2483 .single-line-custom-key-delete{
2484   width: 10%;
2485   display: inline-block;
2486   border-bottom: 1px solid #FAFAFA;
2487   padding: 13px 12px 14px;
2488 }
2489 .single-line-custom-key label{
2490   width: 150px;
2491   margin-bottom: 0px;
2492   border-bottom: 1px solid #FAFAFA;
2493   padding: 15px 25px;
2494 }
2495 .single-line-custom-key input{
2496   border-bottom: 1px solid #FAFAFA !important;
2497   padding: 15px 25px 15px 0;
2498 }
2499 .single-line-custom-key input::placeholder{
2500   font-size: 14px;
2501   color: #C3CDDB;
2502 }
2503 .single-line-custom-key .label-input{
2504   width: calc(100% - 150px);
2505 }
2506 .single-line-custom-key .label-name span{
2507   color: #C3CDDB !important;
2508   margin-right: 20px;
2509 }
2510 .custom-key-delete{
2511   background: transparent;
2512   color: #FF6469;
2513   outline: 0px;
2514   border: 0px;
2515 }
2516 .custom-key-delete:focus{
2517   outline: 0px;
2518   border: 0px;
2519 }
2520 hr{
2521   margin-top: 0rem !important;
2522   margin-bottom: 0rem !important;
2523   border-top: 1px solid #efefef !important;
2524 }
2525 .creat-action-container{
2526   position: fixed;
2527   right: 0px;
2528   top: 104px;
2529   width: 130px;
2530   text-align: center;
2531 }
2532 .action-button{
2533   display: inline-block;
2534   width: 70px;
2535   margin-bottom: 12px;
2536   color: #BABBC3 !important;
2537   font-size: 10px;
2538   font-weight: bold;
2539   background: transparent;
2540   border: 0;
2541   padding: 0;
2542 }
2543 .action-button:disabled,
2544 .action-button:disabled:hover{
2545   cursor: unset;
2546   opacity: .5 !important;
2547 }
2548 .action-button:hover{
2549   text-decoration: none;
2550   cursor: pointer;
2551 }
2552 .action-button i{
2553   background: #fff;
2554   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2555   width: 40px;
2556   height: 40px;
2557   text-align: center;
2558   line-height: 40px;
2559   border-radius: 40px;
2560   color: #1B3E6F;
2561   font-size: 17px;
2562   display: inline-block;
2563 }
2564 .action-button i:hover{
2565   background: #dee2e6;
2566 }
2567 .action-button i.icon-save-sm{
2568   background: #1273EB;
2569   color: #fff;
2570   font-size: 11px;
2571 }
2572 .action-button i.icon-discard-sm{
2573   font-size: 11px;
2574   color: #BABBC3;
2575 }
2576 /* .action-button.save{
2577   color: #1273EB !important;
2578 }
2579 .action-button.save:hover{
2580   opacity: .9;
2581 } */
2582 .action-button.save:disabled{
2583   color: #C3CDDB !important;
2584 }
2585 .action-button.save:disabled i{
2586   background-color: #C3CDDB;
2587   animation: none;
2588 }
2589 .action-button.save:disabled i::before{
2590   color: #fff;
2591 }
2592 .action-button.save{
2593   color: #66BB00 !important;
2594 }
2595 /*Flash Glowing button style*/
2596 .action-button.save i{
2597 background-color: #66BB00;
2598 -webkit-animation: glowing 1500ms infinite;
2599 -moz-animation: glowing 1500ms infinite;
2600 -o-animation: glowing 1500ms infinite;
2601 animation: glowing 1500ms infinite;
2602 }
2603 @-webkit-keyframes glowing {
2604   0% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; }
2605   50% { background-color: #7CD116; -webkit-box-shadow: 0 0 40px #7CD116; }
2606   100% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; }
2607 }
2608
2609 @-moz-keyframes glowing {
2610   0% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; }
2611   50% { background-color: #7CD116; -moz-box-shadow: 0 0 40px #7CD116; }
2612   100% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; }
2613 }
2614
2615 @-o-keyframes glowing {
2616   0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2617   50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; }
2618   100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2619 }
2620
2621 @keyframes glowing {
2622   0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2623   50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; }
2624   100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2625 }
2626
2627
2628 /* .action-button.delete i{
2629   color: #BABBC3;
2630 } */
2631 .action-button.delete,
2632 .action-button.delete i,
2633 .action-button.delete:hover,
2634 .action-button.delete:hover .icon-delete-sm{
2635   color: #FF6469 !important;
2636 }
2637 .mode-icon{
2638   font-size: 20px;
2639 }
2640
2641 /*MODAL*/
2642 .modal-dialog{
2643   margin-top: 60px !important;
2644 }
2645 .modal{
2646   z-index: 11000000 !important;
2647   background: rgba(27, 62, 111, 0.10) !important;
2648 }
2649 .modal-content{
2650   border-radius: 2px !important;
2651   border: 0 !important;
2652   box-shadow: 0 2px 6px rgba(47, 83, 151, .10);;
2653 }
2654 .modal-title{
2655   font-size: 14px !important;
2656 }
2657 .modal-body{
2658   padding: 1.5rem 1.5rem 1rem !important;
2659 }
2660 .enrichModal .modal-dialog{
2661   max-width: 60% !important;
2662 }
2663 .modal-body p{
2664   font-size: 14px;
2665 }
2666 .modal-body p span{
2667   color: #FF6469;
2668 }
2669 .modal-header{
2670   border-bottom-color: #ECEDF2 !important;
2671   padding: .7rem 1.5rem !important;
2672 }
2673 .modal-footer{
2674   padding-top: 0 !important;
2675   border-top: 0 !important;
2676 }
2677 .modal-footer .btn{
2678   padding: 8px 15px;
2679   font-weight: bold;
2680   font-size: 12px;
2681   border: 0 !important;
2682 }
2683 .modal-footer .btn-primary{
2684   background-color: #1B3E6F !important;
2685 }
2686 .modal-footer .btn-secondary,
2687 .modal-footer .btn-secondary:hover{
2688   background-color: transparent;
2689   color: #1273EB;
2690   opacity: .8;
2691 }
2692 .modal-footer .btn-secondary:hover{
2693   opacity: 1;
2694 }
2695 .modal-footer .btn-secondary:active{
2696   background-color: #E7F1FC !important;
2697   color: #1B3E6F !important;
2698 }
2699 .btn-modal-remove-file:hover{
2700   cursor: pointer;
2701 }
2702 .action-button span{
2703   width: 100%;
2704   display: inline-block;
2705   margin-top: 5px;
2706 }
2707 .creat-action-container hr{
2708   margin: 0 46px;
2709   padding-bottom: 18px;
2710 }
2711 .btn-link:hover, .btn-link:focus{
2712   text-decoration: none !important;
2713 }
2714 .btn-link::before{
2715   content: "\f107";
2716   font-family:'FontAwesome';
2717   position: relative;
2718   margin-right: 20px;
2719 }
2720 .btn-link.collapsed::before{
2721   content: "\f105";
2722   font-family:'FontAwesome';
2723   position: relative;
2724   margin-right: 25px;
2725 }
2726 .btn-link i{
2727   margin-right: 10px;
2728 }
2729 .ngx-file-drop__content{
2730   background: #F4F9FE;
2731   padding: 20px;
2732   height: auto !important;
2733   display: inline-block !important;
2734   width: 100%;
2735 }
2736 .ngx-file-drop__drop-zone{
2737   border: 1px dashed #D7E7F9 !important;
2738   border-radius: 0px !important;
2739   height: auto !important;
2740 }
2741 .folder-upload{
2742   width: 100%;
2743   margin: 15px auto 18px;
2744   display: inline-block;
2745   text-align: center;
2746 }
2747 .btn-group-sm>.btn, .btn-sm{
2748   font-size: 12px;
2749 }
2750 .create-title{
2751   margin-bottom: 0;
2752   font-size: 14px;
2753   font-weight: bold;
2754   /* text-transform: uppercase; */
2755   line-height: 32px;
2756 }
2757 .folder-upload-text{
2758   margin-top: 10px;
2759   width: 100%;
2760   display: inline-block;
2761   text-align: center;
2762   color:#242424 ;
2763   font-size: 14px;
2764 }
2765 .folder-upload-text button{
2766   margin-left: 10px;
2767   font-size: 12px;
2768 }
2769 .folder-upload-type{
2770   color:#A4B2C6 ;
2771   font-size: 10px;
2772   font-weight: bold;
2773   width: 100%;
2774   display: inline-block;
2775   text-align: center;
2776 }
2777 .upload-table{
2778   margin: 15px 0 0;
2779 }
2780 .upload-table tr{
2781   border: dashed 1px #D7E7F9;
2782 }
2783 .upload-table tr th{
2784   border-bottom: solid 1px #F4F9FE !important;
2785 }
2786 .upload-table .table thead th{
2787   padding: 6px 9px;
2788   border-top: 0px !important;
2789   font-weight: normal;
2790   font-size: 13px;
2791 }
2792 .upload-table .table thead th:first-child{
2793   width: 24px;
2794   padding-right: 0;
2795 }
2796 .upload-table tr:last-child th{
2797   border-bottom: 0 !important;
2798 }
2799 .upload-table .table{
2800   margin-bottom: 0px !important;
2801 }
2802 .nav-tabs .nav-link{
2803   position: relative;
2804 }
2805 .nav-tabs .nav-link.tab-done{
2806   padding-left: 40px !important;
2807 }
2808 .nav-tabs .nav-link.tab-done::after{
2809   content: "\f058";
2810   position: absolute;
2811   font-family: 'FontAwesome';
2812   left: 17px;
2813   font-size: 16px;
2814   top: 11px;
2815   color: #66BB00;
2816 }
2817 .authentication-container-all{
2818   background: #F4F9FE;
2819   border:1px solid #D0DFF1 ;
2820   flex: 1;
2821   width: 100%;
2822 }
2823 .authentication-header{
2824   width: 100%;
2825   background: #fff;
2826   font-size: 12px;
2827   color: #C3CDDB;
2828   font-weight: bold;
2829   padding: 10px 20px ;
2830 }
2831 .authentication-search{
2832   width: 100%;
2833   background: #fff;
2834   font-size: 12px;
2835   color: #C3CDDB;
2836   font-weight: bold;
2837   position: relative;
2838 }
2839 .authentication-search::after{
2840   content: "\f002";
2841     font-family: 'FontAwesome';
2842     position: absolute;
2843     left: 20px;
2844     top: 11px;
2845 }
2846 .authentication-search input{
2847   width: 100%;
2848   background: #fff;
2849   font-size: 12px;
2850   color: #C3CDDB;
2851   font-weight: bold;
2852   padding: 10px 20px 10px 35px;
2853   border: 0px;
2854   border-top: 1px solid #D7E7F9;
2855 }
2856 .authentication-search input::placeholder{
2857   color: #D0D7E4;
2858   font-size: 10px;
2859   font-weight:100;
2860 }
2861 .authentication-accordion{
2862   width: 100%;
2863   padding: 20px;
2864   max-height: 300px;
2865   overflow: auto;
2866 }
2867 .authentication-accordion .card{
2868   border-radius: 0px !important;
2869   margin-bottom: 10px !important;
2870 }
2871 .authentication-accordion .card-header{
2872   padding: 0px !important;
2873   background: #fff !important;
2874   border-radius: 0px !important;
2875   font-size: 18px;
2876   font-weight: bold;
2877 }
2878 .authentication-accordion .card-header .btn-link{
2879   color: #1B3E6F;
2880   width: 100%;
2881   text-align: left;
2882   padding: 9px 0px !important;
2883   font-size: 13px;
2884   font-weight: bold;
2885 }
2886 .authentication-accordion .custom-control{
2887   display: inline-block;
2888 }
2889 .authentication-accordion .btn-link::before{
2890   margin-right: 10px;
2891 }
2892 .authentication-accordion .btn-link.collapsed::before{
2893   margin-right: 14px;
2894 }
2895 .template-mapping-accordion{
2896   width: 100%;
2897 }
2898 .templateNote{
2899   font-size: 12px;
2900   color: #C1CDDD;
2901 }
2902 .card-header .btn.regularTitle{
2903   padding-left: 0 !important;
2904   padding-right: 0 !important;
2905   color: #1B3E6F;
2906   font-size: 13px;
2907   font-weight: bold;
2908 }
2909 .template-mapping-accordion .accordian-title{
2910   color: #C3CDDB !important;
2911   font-size: 12px !important;
2912   font-weight: normal !important;
2913 }
2914 .card{
2915   border-radius: 2px;
2916   border: 0;
2917   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2918   border: 0px !important;
2919 }
2920 .card-header{
2921   padding: 0px 25px !important;
2922   background: #F4F9FE !important;
2923   border-radius: 0px !important;
2924   border-bottom: 1px solid #ECEDF2 !important;
2925 }
2926 .template-mapping-accordion .card-body{
2927   padding: 20px 26px 0 !important;
2928   font-size: 14px;
2929 }
2930 .card-header .btn-link{
2931   color: #1B3E6F;
2932   width: 100%;
2933   text-align: left;
2934   padding: 9px 0px !important;
2935   font-size: 13px;
2936   font-weight: bold;
2937 }
2938 .accordion .card{
2939   margin-bottom: 0px !important;
2940   border-top: 1px solid #ECEDF2 !important;
2941 }
2942 .accordion > .card > .card-header{
2943   padding: 0 !important;
2944 }
2945 .template-mapping-accordion .card{
2946   margin-bottom: 25px !important;
2947 }
2948 .custom-control{
2949   display: inline-block;
2950 }
2951 .btn-link::before{
2952   margin-right: 10px;
2953 }
2954 .btn-link.collapsed::before{
2955   margin-right: 14px;
2956 }
2957 .drap-drop-action{
2958   padding: 12px 20px 9px 20px;
2959   color: #C3CDDB;
2960   cursor:move;
2961   font-size: 15px;
2962 }
2963 .modal-title {
2964   font-size: 13px;
2965   font-weight: bold;
2966 }
2967 .select-type{
2968   background: #F4F9FE;
2969   border: 1px solid #D7E7F9;
2970   padding: 10px;
2971   text-align: center;
2972   color: #1273EB;
2973   font-size: 15px;
2974   width: 100%;
2975   position: relative;
2976 }
2977 .select-type:hover, .select-type.active{
2978   background: #1B3E6F;
2979   border: 1px solid #D7E7F9;
2980   color: #fff;
2981   text-decoration: none;
2982 }
2983 .select-type-icon{
2984   font-size: 35px;
2985 }
2986 .select-type::before{
2987   content: '';
2988   border: 1px solid #1273EB;
2989   width: 18px;
2990   height: 18px;
2991   border-radius: 18px;
2992   display: inline-block;
2993   left: 10px;
2994   position: absolute;
2995 }
2996 .select-type:hover::before, .select-type.active::before{
2997   border: 1px solid #fff;
2998 }
2999 .select-type.active::after{
3000   content: '';
3001   background: #fff;
3002   width: 12px;
3003   height: 12px;
3004   border-radius: 18px;
3005   display: inline-block;
3006   left: 13px;
3007   position: absolute;
3008   top: 13px;
3009 }
3010 /* -------- ace editor style -------- */
3011 .editor-container{
3012   height: 55vh !important;
3013   overflow: scroll;
3014 }
3015 .ace_print-margin{
3016   left: 100% !important;
3017   background: #eee !important;
3018 }
3019 .ace_content{
3020   width: 100% !important;
3021 }
3022 .ace_editor{
3023   /* height: 55vh !important; */
3024   line-height: 25px;
3025   border: 1px solid #ECEDF2;
3026   background-color: #fff;
3027   color: #1B3E6F !important;
3028 }
3029 .ace_gutter{
3030   background: #E0E8F2 !important;
3031   border-right: 0px !important;
3032   color: #1B3E6F !important;
3033 }
3034 .ace_gutter-active-line{
3035   background-color: #265699 !important;
3036   color: #fff;
3037 }
3038 .ace_cursor{
3039   color: #265699 !important;
3040 }
3041 .ace-tm .ace_marker-layer .ace_active-line{
3042   background: #F4F9FE !important;
3043 }
3044 .ace_dark .ace_fold-widget,
3045 .ace_dark .ace_fold-widget.ace_closed{
3046   background-position: center center !important;
3047   background-size: 7px;
3048   background-repeat: no-repeat !important;
3049 }
3050 .ace_dark .ace_fold-widget{
3051   background-image: url(/assets/img/icon-codeOpen.svg) !important;
3052 }
3053 .ace_dark .ace_fold-widget.ace_closed{
3054   background-image: url(/assets/img/icon-codeClosed.svg) !important;
3055   background-size: 4px;
3056 }
3057 /* -------- end of ace editor style -------- */
3058 .breadcrumb-header{
3059   padding: 0px;
3060   margin: 0px;
3061 }
3062 .breadcrumb-header li{
3063   list-style: none;
3064   display: inline-block;
3065   font-size: 14px;
3066 }
3067
3068 .breadcrumb-header li:last-child::after{
3069   display: none;
3070 }
3071
3072 .breadcrumb-header li:last-child{
3073 /* background: #F4F9FE; */
3074 border-radius: 50px;
3075 color: #C3CDDB;
3076 padding: 0 10px 0 0;
3077 }
3078 .breadcrumb-header li:first-child,
3079 .breadcrumb-header li:first-child a{
3080   font-size: 16px;
3081   font-weight: bold;
3082   padding: 0px;
3083   color: #1B3E6F !important;
3084   border-radius: 0px;
3085   background: transparent;
3086 }
3087 .create-template-import{
3088   width: 100%;
3089   margin: 30px 0px 10px ;
3090 }
3091
3092 .create-template-import a:hover{
3093   text-decoration: none;
3094 }
3095 .mapping-source-load{
3096   color: #1B3E6F;
3097   font-size: 10px;
3098   font-weight: bold;
3099   display: inline-block;
3100   vertical-align: top;
3101   margin-top: 20px;
3102   margin-bottom: 10px;
3103   margin:15px 30px 20px;
3104 }
3105 .mapping-source-load:hover{
3106   text-decoration: none;
3107 }
3108 .mapping-source-load i {
3109   color: #1B3E6F;
3110   font-size: 36px;
3111   padding: 10px;
3112   border-radius: 100px;
3113   width: 70px;
3114   height: 70px;
3115   display: inline-block;
3116   line-height: 52px;
3117   margin-bottom: 20px;
3118 }
3119 .mapping-source-load:hover i{
3120   background: #F4F9FE;
3121 }
3122 .mapping-source-load:hover span{
3123   color: #1273EB;
3124 }
3125 .source-load-note{
3126   color:#C3CDDB ;
3127   font-size: 8px;
3128 }
3129 .mapping-source-load.hover-disable{
3130   opacity: .5;
3131 }
3132 .mapping-source-load.hover-disable:hover span{
3133   color: #1B3E6F;
3134 }
3135 .mapping-source-load.hover-disable:hover i{
3136   background: transparent;
3137 }
3138 .mapping-editBar{
3139   margin-top: 6px;
3140 }
3141 .mapping-editBar .selectedAttributes{
3142   margin-left: 6px;
3143   line-height: 35px;
3144   font-size: 10px;
3145   font-weight: bold;
3146 }
3147 .selectedAttributes .totalAtt{
3148   color: #C4CEDB;
3149 }
3150 .mapping-editBar .custom-checkbox,
3151 .mapping-editBar .btn{
3152   margin: 0 4px !important;
3153   padding: 9px !important;
3154   width: 36px;
3155   height: 36px;
3156   background: #F4F9FE;
3157   border-radius: 50% !important;
3158   text-align: center;
3159   line-height: 14px;
3160 }
3161 .mapping-editBar .custom-checkbox{
3162   margin-left: 0 !important;
3163 }
3164 .mapping-editBar .custom-control-label{
3165   top: -2px;
3166   left: 16px;
3167 }
3168 .mapping-editBar .btn i{
3169   color: #1B3E6F;
3170   font-size: 18px;
3171   /* opacity: .5; */
3172 }
3173 .mapping-editBar .custom-checkbox:hover,
3174 .mapping-editBar .btn:hover i{
3175   opacity: .8;
3176 }
3177 .template-mapping-list{
3178   background: #F4F9FE;
3179   border: 1px solid #E9F3FF;
3180   padding: 5px 10px;
3181   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3182   width: 100%;
3183   display: inline-block;
3184   margin-bottom: 20px;
3185   color: #1B3E6F;
3186 }
3187 .template-mapping-list:hover,
3188 .template-mapping-list.active {
3189   cursor: pointer;
3190   /* background: #1B3E6F;  */
3191   text-decoration: none;
3192   /* color: #fff !important; */
3193   border-radius: 4px;
3194   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.3);
3195 }
3196 .template-mapping-list p,
3197 .template-mapping-list:hover p{
3198   margin-bottom: 0;
3199   width: 60%;
3200   display: inline-block !important;
3201 }
3202 .template-mapping-list:hover p{
3203   width: 90%;
3204 }
3205 .template-mapping-list:hover{
3206   opacity: .9;
3207 }
3208
3209 .template-mapping-list span{
3210   background: #fff;
3211   border: solid 1px #E9F3FF;
3212   color: #2A81ED;
3213   font-size: 9px;
3214   float: right;
3215   border-radius: 50px;
3216   padding: 3px 10px;
3217   margin-left: 5px;
3218 }
3219 .template-mapping-list:hover span{
3220   display: none;
3221 }
3222 .deleteTemplate{
3223   display: none;
3224   position: absolute;
3225   right: 21px;
3226   top: 2px;
3227   border: 0;
3228   background: transparent;
3229 }
3230 .deleteTemplate i{
3231   color: #FF6469 !important;
3232   font-size: 16px;
3233 }
3234 .template-mapping-list:hover .deleteTemplate{
3235   display: inline;
3236 }
3237 .max-height-list{
3238   max-height: 232px;
3239   padding-bottom: 5px !important;
3240   overflow: auto;
3241 }
3242 .create-template-mapping-button{
3243   background: #C3CDDB;
3244   border-radius: 50px;
3245   font-size: 12px;
3246   font-weight: bold;
3247   padding: 10px 20px;
3248   margin-bottom: 20px;
3249     display: inline-block;
3250     cursor: pointer;
3251 }
3252 .create-template-mapping-button i{
3253 margin-right: 5px;
3254   }
3255 .view-package-container{
3256   padding: 20px 56px;
3257 }
3258 .package-type-icon{
3259   color: #1B3E6F;
3260   background: #C1CDDD;
3261   width: 48px;
3262   height: 48px;
3263   border-radius: 48px;
3264   display: inline-block;
3265   text-align: center;
3266   line-height: 48px;
3267   font-size: 20px;
3268   /* margin-right: 20px; */
3269 }
3270 .defintionsNote{
3271   padding-left: 0;
3272 }
3273 .defintionsNote li{
3274   line-height: 24px;
3275   list-style: none;
3276   font-size: 13px;
3277 }
3278 .package-name-container{
3279   width: calc(100% - 60px);
3280   display: inline-block;
3281 }
3282 .package-name{
3283   font-size: 16px;
3284   color: #1B3E6F;
3285   font-weight: bold;
3286   margin-top: 3px;
3287 }
3288 .package-name span{
3289   font-size: 11px;
3290 }
3291 .package-name i{
3292   font-size: 12px;
3293   color: #C3CDDB;
3294   margin-left: 5px;
3295 }
3296 .deply-status-icon{
3297   margin-right: 4px;
3298   width: 1.6%;
3299   vertical-align: baseline;
3300 }
3301 .package-description{
3302   color: #D0D7E4;
3303   font-size: 12px;
3304   font-weight: normal;
3305 }
3306 .package-auth-info{
3307   font-size: 11px;
3308 }
3309 .package-auth-info p{
3310   margin-bottom: 5px;
3311 }
3312 .package-auth-info div{
3313   padding-left: 25px;
3314   border-right: solid 1px #F4F9FE;
3315 }
3316 .package-auth-info div:first-child{
3317   padding-left: 15px;
3318 }
3319 .package-auth-info .col-4:first-child{
3320   padding-left: 15px;
3321 }
3322 .package-auth-info div:last-child{
3323   border-right: 0;
3324 }
3325 .package-auth-info .package-contributers{
3326   margin-bottom: 0 !important;
3327 }
3328 .package-auth-info .package-contributers button img{
3329   width: 20px;
3330   height: 20px;
3331 }
3332 .template-mapping-action{
3333   margin-bottom: 20px;
3334 }
3335 .template-mapping-action button{
3336   border-radius: 50px;
3337   padding: 4px 20px;
3338   font-size: 13px;
3339 }
3340 .template-mapping-action .btn-primary:disabled{
3341   background:#C3CDDB !important ;
3342   border-color:#C3CDDB !important ;
3343   color: #fff !important ;
3344 }
3345 .template-mapping-action .btn-primary{
3346   background:#66BB00 !important ;
3347   border-color:#66BB00 !important ;
3348   color: #fff !important ;
3349 }
3350 .template-mapping-action .btn-outline-secondary{
3351   background:#fff !important ;
3352   border-color:#ECEDF2 !important ;
3353   color: #1B3E6F !important ;
3354 }
3355 .table-container{
3356   width: 100%;
3357 }
3358 /*
3359    server-side-angular-way.component.css
3360 */
3361 .no-data-available {
3362   text-align: center;
3363 }
3364
3365 /*
3366    src/styles.css (i.e. your global style)
3367 */
3368 .dataTables_empty {
3369   display: none;
3370 }
3371 .dataTables_length,
3372 .dataTables_filter{
3373   margin-bottom: 6px;
3374   color: #1B3E6F !important;
3375   font-size: 13px;
3376   /* font-weight: bold; */
3377 }
3378 /*Mat Table*/
3379 .mat-elevation-z8{
3380   box-shadow: none !important;
3381 }
3382 .mat-table,
3383 .mat-paginator{
3384   background: #fff !important;
3385   color: #1B3E6F !important;
3386 }
3387 .mat-table{
3388   border-top: solid 1px #ECEDF2;
3389 }
3390 .mat-paginator{
3391   /* display: inline-block; */
3392   width: 36%;
3393   float: right;
3394 }
3395 .mat-input-element{
3396   font-size: 13px !important;
3397   line-height: 20px !important;
3398 }
3399 tr.mat-header-row{
3400   background: #f4f9fe;
3401   border-bottom: 1px solid #ecedf2;
3402 }
3403 .mat-sort-header-button{
3404   text-align: left;
3405 }
3406 .mat-cell, .mat-footer-cell{
3407   color: #1B3E6F !important;
3408 }
3409 .mat-form-field-appearance-legacy .mat-form-field-wrapper{
3410   padding-bottom: 0;
3411 }
3412 .mat-paginator-page-size-select{
3413   margin-top: 12px;
3414 }
3415 .mat-paginator-page-size-select .mat-form-field-wrapper{
3416   padding-bottom: 14px;
3417 }
3418 .mat-paginator-range-label{
3419   margin-right: 8px;
3420 }
3421 .mat-form-field-infix,
3422 .dataTables_filter input{
3423   color: #1B3E6F;
3424   padding: 4px 9px !important;
3425   border: solid 1px #ECEDF2 !important;
3426   border-radius: 4px;
3427 }
3428 .mat-focused .mat-form-field-infix{
3429   border-bottom: 0 !important;
3430 }
3431 .tableFilter{
3432   margin-top: 12px;
3433 }
3434 .tableFilter .mat-form-field-wrapper{
3435   padding-bottom: 0 !important;
3436 }
3437 .tableFilter .mat-form-field-infix{
3438   background: url(../src/assets/img/icon-search.svg) 9px center no-repeat;
3439   padding-left: 24px !important;
3440 }
3441 .dataTables_filter input:focus{
3442   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3443 }
3444 .mapping-table th,
3445 .mapping-table td{
3446   width: auto !important;
3447   padding: 7px 20px 7px 0 !important;
3448   border-bottom: solid 1px #ECEDF2 !important;
3449   font-size: 13px;
3450 }
3451 .mapping-table th:first-child,
3452 .mapping-table td:first-child{
3453   padding-left: 20px !important;
3454 }
3455 .mapping-table thead th{
3456   padding: 4px 20px 4px 0 !important;
3457   border-bottom-color: #ECEDF2 !important;
3458   color: #1B3E6F;
3459   font-weight: bold;
3460   font-size: 12px;
3461 }
3462 .mapping-table tbody tr:hover{
3463   background-color: #F4F9FE !important;
3464 }
3465 .mat-form-field-label{
3466   color: #1B3E6F !important;
3467   font-size: 13px !important;
3468   padding-left: 26px;
3469   line-height: 20px !important;
3470 }
3471 .mat-select-value,
3472 .mat-select-arrow{
3473   color: #1B3E6F !important;
3474 }
3475 .mapping-table th{
3476   padding-top: 10px !important;
3477   padding-bottom: 10px !important;
3478   /* background: #F4F9FE; */
3479 }
3480 .mapping-table td{
3481   border-top: 0 !important;
3482 }
3483 table.dataTable.no-footer{
3484   margin-bottom: 9px;
3485   border-bottom: solid 1px #ECEDF2 !important;
3486 }
3487 .mat-paginator-container{
3488   padding-right: 0;
3489 }
3490 .mappingSelectedAtt{
3491   padding-left: 3px;
3492   line-height: 35px;
3493   font-size: 10px;
3494 }
3495 .dataTables_info{
3496   padding-top: 12px;
3497   color: #1B3E6F !important;
3498   font-size: 13px;
3499   font-weight: bold;
3500 }
3501 .dataTables_wrapper .dataTables_paginate,
3502 .dataTables_wrapper .dataTables_paginate a.paginate_button,
3503 .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
3504 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
3505   margin-bottom: 3px;
3506   color: #1B3E6F !important;
3507   font-size: 13px;
3508   font-weight: bold;
3509   border: 0 !important;
3510 }
3511 .dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
3512   border: 0;
3513   color: #1B3E6F !important;
3514   background: none !important;
3515 }
3516 .dataTables_wrapper .dataTables_paginate a.paginate_button{
3517   padding: 0.4em .9em !important;
3518 }
3519 .dataTables_wrapper .dataTables_paginate a.paginate_button.current{
3520   color: #1B3E6F !important;
3521   background: #F4F9FE !important;
3522   border: solid 1px #EEF4F9 !important;
3523   border-radius: 100% !important;
3524   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3525   outline: 0;
3526 }
3527 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
3528   opacity: .6;
3529 }
3530 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
3531   cursor: default;
3532   background: none !important;
3533   border: 0 !important;
3534 }
3535 .mapping-table .form-control,
3536 .mapping-table .custom-select{
3537   padding: 10px 6px;
3538   border-color: #EEF4F9;
3539   font-size: 14px;
3540   line-height: 12px;
3541   color: #1B3E6F;
3542 }
3543 .mapping-table .form-control{
3544   box-shadow: 0 2px 4px rgba(47,83,151,0.1);
3545 }
3546 .mapping-table tbody tr:hover .form-control:focus,
3547 .mapping-table tbody tr:hover .custom-select{
3548   background-color: #fff !important;
3549 }
3550 .mapping-table .custom-select{
3551   background-color: #F4F9FE;
3552   color: #1B3E6F;
3553 }
3554 .mapping-table .form-control:disabled{
3555   padding-left: 0;
3556   box-shadow: none;
3557   border: 0;
3558   background: transparent !important;
3559   color: #1B3E6F;
3560 }
3561
3562 /* Windows View as 150% */
3563 @media (resolution: 150dpi) {
3564   /* @media (-webkit-device-pixel-ratio: 1.5) { */
3565   .body-container > .container{
3566     max-width: 960px !important;
3567   }
3568 }
3569 /* Extra small devices (portrait phones, less than 576px) */
3570 @media (max-width: 575.98px) {
3571   .page-title{
3572     padding: 18px;
3573   }
3574 }
3575
3576 /* Small devices (landscape phones, 576px and up) */
3577 @media (min-width: 576px) and (max-width: 767.98px) {
3578
3579 }
3580
3581 /* Medium devices (tablets, 768px and up) */
3582 @media (min-width: 768px) and (max-width: 991.98px) {
3583
3584 }
3585
3586 /* Large devices (desktops, 992px and up) */
3587 @media (min-width: 992px) and (max-width: 1199.98px) {
3588
3589 }
3590
3591 /* Extra large devices (large desktops, 1200px and up) */
3592 @media (min-width: 1200px) {
3593
3594 }
3595
3596
3597
3598
3599
3600
3601 /* Package Wizard panel */
3602 .packageWizard.panel-wrap{
3603   position: fixed;
3604   top: 100px;
3605   bottom: 0;
3606   right: 0;
3607   width: 350px;
3608   height: 200px;
3609   transform: translateX(100%);
3610   transition: .3s ease-out;
3611   z-index: 2000;
3612 }
3613 .packageWizard .panel{
3614   position: absolute;
3615   top: 0;
3616   bottom: 0;
3617   left: 0;
3618   right: 0;
3619   overflow: auto;
3620   padding: 20px;
3621   padding-top: 9px;
3622   background: #1B3E6F;
3623   color: #fff;
3624   border-top: solid 6px #1273EB;
3625   box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17) !important;
3626   border-radius: 3px !important;
3627   /* border-top-right-radius: 0 !important;
3628   border-bottom-right-radius: 0 !important; */
3629   text-align: center;
3630 }
3631
3632 /* simulate panel state control --
3633 this can also be triggered by a
3634 class name added to the body tag.
3635 Just using a checkbox sibling here
3636 for simplicity
3637 */
3638 [type="checkbox"]:checked ~ .panel-wrap {
3639   transform: translateX(0%);
3640 }
3641 .packageWizard h3{
3642   margin-bottom: 15px;
3643   font-weight: bold !important;
3644   font-size: 16px;
3645 }
3646 .packageWizard p{
3647   margin-bottom: 12px;
3648   font-size: 14px;
3649 }
3650 .packageWizard span{
3651   font-size: 13px;
3652   color: #C3CDDB;
3653 }
3654 .startTour{
3655   margin-top: 15px;
3656   padding: 9px 21px;
3657   font-weight: bold;
3658   font-size: 12px;
3659   border: 0;
3660   border-radius: 18px;
3661   background-color: #1273EB;
3662   color: #fff;
3663 }
3664 .closeWizard{
3665   margin-top: 12px;
3666   border: 0;
3667   background: none;
3668   font-weight: normal;
3669   color: #E0E8F2;
3670   font-size: 12px;
3671 }
3672 /*Wizard Content*/
3673 .mat-menu-panel{
3674   box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17) !important;
3675   border-radius: 3px !important;
3676   border-top: solid 3px #1273EB;
3677 }
3678 .mat-menu-panel::after {
3679   content: '';
3680   display: block;
3681   width: 0;
3682   height: 0;
3683   position: absolute;
3684   border-left: 8px solid transparent;
3685   border-right: 8px solid transparent;
3686   border-bottom: 8px solid #1273EB;
3687   left: 9px;
3688   top: -8px;
3689 }
3690 .mat-card{
3691   background: #1B3E6F !important;
3692   color: #fff !important;
3693   font-family: inherit !important;
3694   border-radius: 0 !important;
3695 }
3696 .mat-card-content,
3697 .mat-card-subtitle{
3698   font-size: 13px;
3699 }
3700 .mat-card-title{
3701   margin-bottom: 9px !important;
3702   font-weight: bold !important;
3703   font-size: 16px !important;
3704 }
3705 .mat-icon-button[disabled]{
3706   color: rgba(224, 232, 242, .5) !important;
3707 }