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{
1594   margin-right: 6px;
1595   width: 14px;
1596 }
1597 .icon-deployed-active,
1598 .icon-deploy-inactive{
1599   margin-right: 9px;
1600   display: inline;
1601   background-image: url(/assets/img/icon-deploy-active.svg);
1602   background-position: center center;
1603   background-repeat: no-repeat;
1604   vertical-align: baseline;
1605 }
1606 .icon-deploy-inactive{
1607   background-image: url(/assets/img/icon-deploy-inactive.svg);
1608 }
1609
1610
1611 /*CREATE NEW ACTION MODAL*/
1612 .createActionModal .modal-dialog{
1613   max-width: 85%;
1614 }
1615 .createActionModal .modal-header{
1616   padding-top: 21px !important;
1617   padding-bottom: 0 !important;
1618   border-bottom: 0;
1619 }
1620 .createActionModal .close{
1621   margin: 0 !important;
1622   padding: 6px 13px 10px !important;
1623   width: auto;
1624   opacity: 1 !important;
1625   border-radius: 100%;
1626 }
1627 .createActionModal .close:hover{
1628   background-color: #E0E8F2;
1629 }
1630 .createActionModal .icon-action-close{
1631   font-size: 14px;
1632   font-weight: bold;
1633 }
1634 .icon-action-close::before{
1635   font-size: 13px;
1636 }
1637 .createActionModal .modal-body{
1638   padding-top: 0 !important;
1639   padding-bottom: 10px !important;
1640 }
1641 .createActionModal .modal-body .carousel-item{
1642   padding-left: 20px;
1643   padding-right: 10px;
1644 }
1645 @keyframes fadeInScale {
1646   0% {
1647     opacity: 0;
1648     -webkit-transform: scale(0) translateY(50%);
1649             transform: scale(0) translateY(50%);
1650   }
1651   90% {
1652     -webkit-transform: scale(1.05);
1653             transform: scale(1.05);
1654   }
1655   100% {
1656     opacity: 1;
1657     -webkit-transform: scale(1) translateY(0);
1658             transform: scale(1) translateY(0);
1659   }
1660 }
1661 .card.actionType{
1662   margin-bottom: 25px !important;
1663   padding: 220px 25px 50px;
1664   box-shadow: none;
1665   border-radius: 0;
1666   -webkit-transition: all 0.3s ease-in-out;
1667   transition: all 0.3s ease-in-out;
1668 }
1669 .card.actionType:hover{
1670   box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
1671   transition: 0.3s !important;
1672 }
1673 .createActionModal h3.mainHead{
1674   text-transform: uppercase;
1675   margin-bottom: 6px;
1676   font-size: 14px;
1677   font-weight: bold;
1678   text-align: center;
1679   color: #C1CDDD;
1680 }
1681 .createActionModal h1{
1682   margin-bottom: 21px;
1683   font-size: 22px;
1684   font-weight: bold;
1685   text-align: center;
1686 }
1687 .createActionModal .carousel-inner{
1688   height: 510px;
1689 }
1690 .createActionModal .skip-btn{
1691   float: unset;
1692   width: auto;
1693   color: #1273EB;
1694   font-weight: normal !important;
1695   font-size: 13px;
1696   border: solid 1px #F1F2FA;
1697   border-radius: 2px;
1698 }
1699 .createActionModal .skip-btn:hover{
1700   background: #1273EB;
1701   color: #fff;
1702   box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
1703 }
1704
1705 .actionType,
1706 .actionType:hover{
1707   text-align: center;
1708   line-height: 40px;
1709   background-position: center 40px;
1710   background-repeat: no-repeat;
1711   background-size: 144px 172px;
1712 }
1713 .actionType h3,
1714 .actionType p{
1715   margin: 0;
1716 }
1717 .actionType h3{
1718   text-transform: uppercase;
1719   font-size: 13px;
1720   font-weight: bold;
1721 }
1722 .actionType p{
1723   font-size: 13px !important;
1724   line-height: 24px;
1725 }
1726 .actionType .btn,
1727 .actionType:hover .btn{
1728   opacity: 0;
1729   position: absolute;
1730   bottom: 0;
1731   left: 30% !important;
1732   margin-bottom: 26px;
1733   width: 100px;
1734   height: 30px;
1735   line-height: 15px;
1736   background: #1B3E6F;
1737   color: #fff;
1738   font-size: 12px;
1739   font-weight: bold;
1740   border-radius: 15px !important;
1741   -webkit-transform: translateY(-20%);
1742           transform: translateY(-20%);
1743           -webkit-transition: all 0.3s ease-in-out;
1744   transition: all 0.3s ease-in-out;
1745 }
1746 .actionType:hover .btn{
1747   opacity: 1;
1748   -webkit-transform: translateY(0);
1749           transform: translateY(0);
1750 }
1751 .actionType.custom{
1752   background-image: url(/assets/img/icon-action-custom.svg);
1753 }
1754 .actionType.custom:hover{
1755   cursor: pointer;
1756   background-image: url(/assets/img/icon-action-custom-hover.svg);
1757 }
1758 .actionType.default{
1759   background-image: url(/assets/img/icon-action-default.svg);
1760 }
1761 .actionType.default:hover{
1762   cursor: pointer;
1763   background-image: url(/assets/img/icon-action-default-hover.svg);
1764 }
1765 .actionType.recent{
1766   background-image: url(/assets/img/icon-action-recent.svg);
1767 }
1768 .actionType.recent:hover{
1769   cursor: pointer;
1770   background-image: url(/assets/img/icon-action-recent-hover.svg);
1771 }
1772 .actionType.import{
1773   background-image: url(/assets/img/icon-action-import.svg);
1774 }
1775 .actionType.import:hover{
1776   cursor: pointer;
1777   background-image: url(/assets/img/icon-action-import-hover.svg);
1778 }
1779 .createActionModal .carousel-indicators{
1780   margin: 0;
1781 }
1782 .createActionModal .carousel-indicators li{
1783   margin: 0;
1784   padding: 0;
1785   text-indent: 0;
1786   border: 0;
1787 }
1788 .createActionModal .back{
1789   position: fixed !important;
1790   top: 83px;
1791   width: auto;
1792   padding:0 !important;
1793 }
1794
1795 .actionFormWrapper{
1796   width: 60%;
1797   margin: 0 auto;
1798 }
1799 .createActionModal .form-control.customAction{
1800   width: 55%;
1801   margin: 70px auto;
1802   padding-left: 0;
1803   border-radius: 0;
1804   border: 0;
1805   border-bottom: solid 1px #E0E8F2;
1806   color: #1B3E6F !important;
1807   font-size: 14px;
1808 }
1809 .createActionModal .form-control:focus{
1810   border-bottom: solid 1px #1B3E6F;
1811   background: transparent !important;
1812   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1813   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1814   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1815   text-shadow: none;
1816 }
1817 .createActionModal .form-control::placeholder{
1818   color: #C3CDDB;
1819
1820 }
1821 .createActionModal .submit,
1822 .createActionModal .submit:hover{
1823   float: unset;
1824   width: 100px;
1825   height: 30px;
1826   background: #1B3E6F;
1827   color: #fff;
1828   font-size: 12px;
1829   font-weight: bold;
1830   border-radius: 15px !important;
1831 }
1832 .actionlabel{
1833   margin-right: 2px;
1834   color: #C3CDDB;
1835   font-size: 11px;
1836   font-weight: bold;
1837 }
1838 .form-control.searchInput,
1839 .form-control.searchInput:focus{
1840   float: right;
1841   width: 250px !important;
1842   height: 30px !important;
1843   padding-left: 32px !important;
1844   border: solid 1px #E0E8F2 !important;
1845   border-radius: 2px !important;
1846   background: url(../src/assets/img/icon-search-light.svg) 9px center no-repeat !important;
1847   font-size: 13px !important;
1848   color: #1B3E6F;
1849 }
1850 .actionsListScroll{
1851   height: 228px;
1852   max-height: 228px;
1853   overflow: auto;
1854 }
1855 .createActionModal .actionName{
1856   margin-bottom: 15px;
1857   padding: 9px 18px;
1858   box-shadow: 0 2px 6px rgba(47,83,151,0.15);
1859 }
1860 .createActionModal p.selectedActions{
1861   margin-top: 20px;
1862   margin-bottom: 10px;
1863   color: #8D9FB7;
1864   font-size: 13px;
1865 }
1866 .createActionModal .sort-packages .dropdown{
1867   width: 60%;
1868 }
1869 .createActionModal .sort-packages .dropdown-text::after {
1870   right: 6px;
1871 }
1872 .createActionModal .sort-packages .dropdown-content{
1873   width: 100%;
1874 }
1875 .createActionModal .folder-upload-text button{
1876   float: unset;
1877 }
1878 /* Border Fade */
1879 .border-fade {
1880   display: inline-block;
1881   transition-duration: 0.3s;
1882   transition-property: box-shadow;
1883   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1884   transform: translateZ(0);
1885   box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
1886   /* Hack to improve aliasing on mobile/tablet devices */
1887 }
1888 .border-fade:hover {
1889   box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
1890   /* Hack to improve aliasing on mobile/tablet devices */
1891 }
1892 /*Content*/
1893
1894 /**Title Action Buttons**/
1895 .page-title-actions li{
1896   display: inline-block;
1897   text-align: center;
1898 }
1899 .title-action{
1900   -webkit-transition: box-shadow 0.2s ease;
1901   -moz-transition: box-shadow 0.2s ease;
1902   transition: box-shadow 0.2s ease;
1903   -webkit-backface-visibility: hidden;
1904   backface-visibility: hidden;
1905   border-radius: 50%;
1906   color: #6a75eb;
1907   display: inline-block;
1908   font-size: 0.889em;
1909   height: 4em;
1910   margin: 0 1em 1em;
1911   position: relative;
1912   text-align: center;
1913   text-transform: lowercase;
1914   width: 4em;
1915   line-height: 4em;
1916 }
1917 .title-action:before{
1918   -webkit-transition: all 0.2s ease;
1919   -moz-transition: all 0.2s ease;
1920   transition: all 0.2s ease;
1921   border-radius: 50%;
1922   bottom: 0;
1923   box-shadow: 0 0 0 1px #000;
1924   content: "";
1925   left: 0;
1926   position: absolute;
1927   right: 0;
1928   top: 0;
1929 }
1930 .title-action:hover{
1931   box-shadow: 0 0 0 7px #07819b;
1932   text-decoration: none;
1933 }
1934 .title-action:hover:before{
1935   -webkit-transform: scale(0.925);
1936   -moz-transform: scale(0.925);
1937   -ms-transform: scale(0.925);
1938   -o-transform: scale(0.925);
1939   transform: scale(0.925);
1940   box-shadow: 0 0 0 1px #07819b;
1941   opacity: 0.5;
1942 }
1943
1944 /*Animation Button*/
1945 /**Float**/
1946 .float {
1947   display: inline-block;
1948   transition-duration: 0.3s;
1949   transition-property: transform;
1950   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1951   transform: translateZ(0);
1952   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
1953 }
1954 .float:hover {
1955   transform: translateY(-5px);
1956 }
1957
1958 /*TOOLTIP*/
1959 /* Base styles for the element that has a tooltip */
1960 [data-tooltip],
1961 .tooltip {
1962   position: relative;
1963   cursor: pointer;
1964   text-align: center;
1965 }
1966
1967 /* Base styles for the entire tooltip */
1968 [data-tooltip]:before,
1969 [data-tooltip]:after,
1970 .tooltip:before,
1971 .tooltip:after {
1972   position: absolute;
1973   visibility: hidden;
1974   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1975   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
1976   opacity: 0;
1977   -webkit-transition:
1978           opacity 0.2s ease-in-out,
1979           visibility 0.2s ease-in-out,
1980           -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1981   -moz-transition:
1982           opacity 0.2s ease-in-out,
1983           visibility 0.2s ease-in-out,
1984           -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1985   transition:
1986           opacity 0.2s ease-in-out,
1987           visibility 0.2s ease-in-out,
1988           transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1989   -webkit-transform: translate3d(0, 0, 0);
1990   -moz-transform:    translate3d(0, 0, 0);
1991   transform:         translate3d(0, 0, 0);
1992   pointer-events: none;
1993 }
1994
1995 /* Show the entire tooltip on hover and focus */
1996 [data-tooltip]:hover:before,
1997 [data-tooltip]:hover:after,
1998 [data-tooltip]:focus:before,
1999 [data-tooltip]:focus:after,
2000 .tooltip:hover:before,
2001 .tooltip:hover:after,
2002 .tooltip:focus:before,
2003 .tooltip:focus:after {
2004   visibility: visible;
2005   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
2006   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
2007   opacity: 1;
2008 }
2009
2010 /* Base styles for the tooltip's directional arrow */
2011 .tooltip:before,
2012 [data-tooltip]:before {
2013   z-index: 1001;
2014   border: 6px solid transparent;
2015   background: transparent;
2016   content: "";
2017 }
2018
2019 /* Base styles for the tooltip's content area */
2020 .tooltip:after,
2021 [data-tooltip]:after {
2022   z-index: 1000;
2023   padding: 8px 20px !important;
2024   width: max-content;
2025   background-color: #C3CDDB !important;
2026   color: #1B3E6F;
2027   content: attr(data-tooltip);
2028   font-size: 12px;
2029   font-weight: bold !important;
2030   line-height: 1.2;
2031   border-radius: 3px;
2032 }
2033
2034 /* Directions */
2035
2036 /* Top (default) */
2037 [data-tooltip]:before,
2038 [data-tooltip]:after,
2039 .tooltip:before,
2040 .tooltip:after,
2041 .tooltip-top:before,
2042 .tooltip-top:after {
2043   bottom: 100%;
2044   left: 50%;
2045 }
2046
2047 [data-tooltip]:before,
2048 .tooltip:before,
2049 .tooltip-top:before {
2050   margin-left: 0;
2051   margin-bottom: -12px;
2052   border-bottom-color: #DEE8F3;
2053   border-bottom-color: rgba(222, 232, 243, 1.0);
2054 }
2055
2056 /* Horizontally align top/bottom tooltips */
2057 [data-tooltip]:after,
2058 .tooltip:after,
2059 .tooltip-top:after {
2060   margin-left: -50%;
2061 }
2062
2063 [data-tooltip]:hover:before,
2064 [data-tooltip]:hover:after,
2065 [data-tooltip]:focus:before,
2066 [data-tooltip]:focus:after,
2067 .tooltip:hover:before,
2068 .tooltip:hover:after,
2069 .tooltip:focus:before,
2070 .tooltip:focus:after,
2071 .tooltip-top:hover:before,
2072 .tooltip-top:hover:after,
2073 .tooltip-top:focus:before,
2074 .tooltip-top:focus:after {
2075   -webkit-transform: translateY(-12px);
2076   -moz-transform:    translateY(-12px);
2077   transform:         translateY(-12px);
2078 }
2079
2080 /* Left */
2081 .tooltip-left:before,
2082 .tooltip-left:after {
2083   right: 100%;
2084   bottom: 50%;
2085   left: auto;
2086 }
2087
2088 .tooltip-left:before {
2089   margin-left: 0;
2090   margin-right: -12px;
2091   margin-bottom: 0;
2092   border-top-color: transparent;
2093   border-left-color: #C3CDDB;
2094   /* border-left-color: hsla(0, 0%, 20%, 0.9); */
2095 }
2096
2097 .tooltip-left:hover:before,
2098 .tooltip-left:hover:after,
2099 .tooltip-left:focus:before,
2100 .tooltip-left:focus:after {
2101   -webkit-transform: translateX(-12px);
2102   -moz-transform:    translateX(-12px);
2103   transform:         translateX(-12px);
2104 }
2105
2106 /* Bottom */
2107 .tooltip-bottom:before,
2108 .tooltip-bottom:after {
2109   top: 100%;
2110   bottom: auto;
2111   left: 20%;
2112 }
2113
2114 .tooltip-bottom:before {
2115   margin-top: -12px;
2116   margin-bottom: 0;
2117   border-top-color: transparent;
2118   border-bottom-color: #C3CDDB;
2119   border-bottom-color: rgba(195, 205, 219, 1.0);
2120 }
2121
2122 .tooltip-bottom:hover:before,
2123 .tooltip-bottom:hover:after,
2124 .tooltip-bottom:focus:before,
2125 .tooltip-bottom:focus:after {
2126   -webkit-transform: translateY(12px);
2127   -moz-transform:    translateY(12px);
2128   transform:         translateY(12px);
2129 }
2130
2131 /* Right */
2132 .tooltip-right:before,
2133 .tooltip-right:after {
2134   bottom: 50%;
2135   left: 20%;
2136 }
2137
2138 .tooltip-right:before {
2139   margin-bottom: 0;
2140   margin-left: -12px;
2141   border-top-color: transparent;
2142   border-right-color: #C3CDDB;
2143   /* border-right-color: hsla(0, 0%, 20%, 0.9); */
2144 }
2145
2146 .tooltip-right:hover:before,
2147 .tooltip-right:hover:after,
2148 .tooltip-right:focus:before,
2149 .tooltip-right:focus:after {
2150   -webkit-transform: translateX(12px);
2151   -moz-transform:    translateX(12px);
2152   transform:         translateX(12px);
2153 }
2154
2155 /* Move directional arrows down a bit for left/right tooltips */
2156 .tooltip-left:before,
2157 .tooltip-right:before {
2158   top: 3px;
2159 }
2160
2161 /* Vertically center tooltip content for left/right tooltips */
2162 .tooltip-left:after,
2163 .tooltip-right:after {
2164   margin-left: 0;
2165   margin-bottom: -16px;
2166 }
2167
2168 /*TooltipModule - Shady*/
2169 .tooltip.in {
2170   opacity: 1.0 !important;
2171   filter:alpha(opacity=100) !important;
2172 }
2173 .tooltip:before,
2174 .tooltip:after{
2175   width: 100% !important;
2176 }
2177 .tooltip .tooltip-inner{
2178   width: max-content !important;
2179   text-align: left!important;
2180   /* color:#1B3E6F;
2181   background-color: #fff !important; */
2182   color:#1B3E6F;
2183   background-color: #C3CDDB !important;
2184   border: solid 1px #C3CDDB;
2185   border-radius: 1px !important;
2186   /* border-top-left-radius: 0 !important; */
2187   font-size: 12px;
2188   opacity: 1.0 !important;
2189 }
2190
2191 .bs-tooltip-auto[x-placement^=top] .arrow::before,
2192 .bs-tooltip-top .arrow::before {
2193   border-top-color: #C3CDDB !important;
2194 }
2195 .bs-tooltip-auto[x-placement^=right] .arrow::before,
2196 .bs-tooltip-right .arrow::before {
2197   border-right-color: #C3CDDB !important;
2198 }
2199 .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
2200 .bs-tooltip-bottom .arrow::before {
2201   border-bottom-color: #C3CDDB !important;
2202 }
2203 .bs-tooltip-auto[x-placement^=left] .arrow::before,
2204 .bs-tooltip-left .arrow::before {
2205   border-left-color: #C3CDDB !important;
2206 }
2207
2208 .btn{
2209 padding-right: 20px !important;
2210 padding-left: 20px !important;
2211
2212 }
2213 .btn.border-radius{
2214   border-radius: 20px !important;
2215 }
2216 .btn-primary{
2217   background-color: #1273EB !important;
2218   border-color: #1273EB !important;
2219 }
2220 .btn-primary:hover {
2221   background-color: #0069d9 !important;
2222   border-color: #0062cc !important;
2223 }
2224 .btn + .btn{
2225   margin-left: 10px;
2226 }
2227 .package-view-button button{
2228   width: 150px;
2229   float: right;
2230 }
2231 .package-view-button{
2232   margin-top: 6px;
2233 }
2234 .package-view-button .btn{
2235   padding: 6px 21px;
2236   border-radius: 18px;
2237   font-size: 13px !important;
2238 }
2239 .package-view-button .btn:hover{
2240   opacity: .9;
2241 }
2242 .package-view-button .btn-primary{
2243   background-color: #1B3E6F !important;
2244   border-color: #1B3E6F !important;
2245 }
2246 .package-view-button .btn-enrich,
2247 .package-view-button .btn-enrich:focus,
2248 .modal-footer .btn-primary.btn-enrich{
2249   background: #EB9A34 !important;
2250   border-color: #EB9A34 !important;
2251   color: #fff;
2252   outline: none !important;
2253 }
2254 .package-view-button .btn-deploy{
2255   background-color: #1273EB !important;
2256   border-color: #1273EB !important;
2257   color: #fff !important;
2258   /* background-color: #fff !important;
2259   border-color: #D0DFF1 !important;
2260   color: #1B3E6F !important; */
2261 }
2262 .package-view-title {
2263   font-size: 11px;
2264   color: #1B3E6F;
2265   font-weight: bold;
2266   margin-bottom: 5px;
2267   margin-top: 20px;
2268 }
2269 .package-view-title+p{
2270   font-size: 11px;
2271   margin-bottom: 0px;
2272 }
2273 .package-view-title+ul{
2274   margin-bottom: 0px;
2275 }
2276 .package-view-button .btn-outline-secondary i{
2277   font-size: 18px;
2278   margin-right: 4px;
2279 }
2280 .card.creat-card{
2281   margin: 0;
2282   border-radius: 2px;
2283   border: 0;
2284   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2285 }
2286 .card.creat-card .single-line{
2287   padding: 15px 25px 15px;
2288 }
2289 .card.creat-card .single-line-model{
2290   padding: 0px;
2291 }
2292 .card.creat-card .editor-container{
2293   padding: 25px;
2294 }
2295 .single-line label{
2296   margin-bottom: 0px;
2297 }
2298 .single-line-model label{
2299   margin-bottom: 0px;
2300   border-bottom: 1px solid #FAFAFA;
2301   padding: 15px 25px;
2302 }
2303 .single-line-model .label-name{
2304   width: 325px;
2305 }
2306 .single-line-model .label-input{
2307   width: calc(100% - 325px);
2308 }
2309 .single-line-model input{
2310   border-bottom: 1px solid #FAFAFA !important;
2311   padding: 15px 25px 15px 0px;
2312 }
2313 .customKeyTitle span{
2314   color: #C3CDDB !important;
2315   font-size: 11px;
2316 }
2317 .single-line-model input:focus,
2318 .single-line-custom-key input:focus{
2319   border-bottom-color: #1B3E6F !important;
2320   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2321   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2322   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2323 }
2324 .model-note-container{
2325   width: calc(100% - 325px);
2326   padding: 0px 25px 0px 0px ;
2327   margin-left: 325px;
2328 }
2329 .error-message{
2330   font-size:11px ;
2331   color: #FF6469;
2332 }
2333 .tages-container{
2334   margin-bottom: 25px;
2335 }
2336 .tag-notes{
2337   font-size: 11px;
2338   color: #C3CDDB;
2339   padding: 5px 25px 5px 0px;
2340   margin-bottom: 5px;
2341 }
2342   .single-tage{
2343     background: #E0E8F2;
2344     font-size: 13px;
2345     color: #1B3E6F;
2346     border-radius: 50px;
2347     padding: 5px 10px;
2348     margin-right:10px;
2349     margin-bottom: 10px;
2350   }
2351   .single-tage a{
2352     color: #1B3E6F;
2353     font-size: 14px;
2354   }
2355   .label-name{
2356     width: 300px;
2357     display: inline-block;
2358     margin-bottom: 0px;
2359     font-size: 13px;
2360     font-weight: bold;
2361   }
2362   .label-name span{
2363     color:#FF6469 ;
2364   }
2365   .delete-key{
2366     color: #FF6469;
2367     font-size: 10px;
2368     background: #FFE6E7;
2369     border: 1px solid #FFC9CB;
2370     padding: 3px 10px 2px;
2371     margin-left: 10px;
2372     border-radius: 5px;
2373   }
2374   .delete-key:hover{
2375     color: #C94448;
2376     background: #FFC9CB;
2377     border: 1px solid #FF6469;
2378     text-decoration: none;
2379   }
2380   .label-input{
2381     width: calc(100% - 300px);
2382     display: inline-block;
2383   }
2384 .form-check-input{
2385   margin-left: 0px !important;
2386   margin-top: 2px !important;
2387 }
2388 .form-check-input+span{
2389   margin-left: 20px;
2390   margin-right: 50px;
2391   font-size: 13px;
2392   display: flex;
2393 }
2394 .form-check-input+span i{
2395   margin-right: 5px;
2396   margin-left: 5px;
2397 }
2398
2399 .label-input input{
2400   margin-bottom: 0px;
2401   outline: 0px;
2402   border: 0px;
2403   font-size: 14px;
2404   width: 100%;
2405   color: #1B3E6F;
2406   transition: all 250ms ease-out;
2407 }
2408 .label-input input:focus{
2409   border-bottom: solid 1px #1B3E6F;
2410   background: transparent !important;
2411   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2412   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2413   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2414   text-shadow: none;
2415 }
2416 .label-input input:disabled{
2417   background: #fff;
2418   opacity: .5;
2419 }
2420 .label-input input[type=radio]{
2421   width: auto;
2422 }
2423 .label-input input[type=radio]+span{
2424   font-size: 12px;
2425   display: block;
2426   margin-right: 100px;
2427 }
2428 .single-line select{
2429   margin-bottom: 0px;
2430   padding-left: 10px;
2431   padding-right: 50px;
2432   outline: 0px;
2433   border: solid 1px #EEF4F9;
2434   background: none;
2435   background: url(/assets/img/arrow.svg) 90% center #F4F9FE no-repeat;
2436   background-size: 10px;
2437   width: auto;
2438   -webkit-appearance: none;
2439   -moz-appearance: none;
2440   text-indent: 0;
2441   text-overflow: '';
2442   font-size: 13px;
2443   color: #1B3E6F;
2444 }
2445 .single-line select:focus{
2446   box-shadow: 0 0 0 0;
2447 }
2448 .single-line select option:first-child{
2449   color: #C3CDDB;
2450 }
2451 .single-line-model input::placeholder{
2452   font-size: 14px;
2453   color: #C3CDDB;
2454 }
2455 .single-line-model.error{
2456   color:#FF6469;
2457 }
2458 .single-line-model.error input,
2459 .label-input input.ng-invalid{
2460   box-shadow: none;
2461   color:#FF6469;
2462   border-bottom: 1px solid #FF6469 !important;
2463 }
2464 .single-line .custom-key{
2465   background: none;
2466   border: 0px;
2467   color:#1273EB ;
2468   font-size: 15px;
2469 }
2470 .single-line .custom-key:focus{
2471   outline: none;
2472 }
2473 .creat-container{
2474   padding:70px 100px 70px 70px;
2475   position: relative;
2476 }
2477 .single-custom-key{
2478   width: 100%;
2479 }
2480 .single-custom-key:last-child{
2481   margin-bottom: 20px;
2482 }
2483 .single-line-custom-key{
2484   width: 45%;
2485   display: inline-block;
2486 }
2487 .single-line-custom-key-delete{
2488   width: 10%;
2489   display: inline-block;
2490   border-bottom: 1px solid #FAFAFA;
2491   padding: 13px 12px 14px;
2492 }
2493 .single-line-custom-key label{
2494   width: 150px;
2495   margin-bottom: 0px;
2496   border-bottom: 1px solid #FAFAFA;
2497   padding: 15px 25px;
2498 }
2499 .single-line-custom-key input{
2500   border-bottom: 1px solid #FAFAFA !important;
2501   padding: 15px 25px 15px 0;
2502 }
2503 .single-line-custom-key input::placeholder{
2504   font-size: 14px;
2505   color: #C3CDDB;
2506 }
2507 .single-line-custom-key .label-input{
2508   width: calc(100% - 150px);
2509 }
2510 .single-line-custom-key .label-name span{
2511   color: #C3CDDB !important;
2512   margin-right: 20px;
2513 }
2514 .custom-key-delete{
2515   background: transparent;
2516   color: #FF6469;
2517   outline: 0px;
2518   border: 0px;
2519 }
2520 .custom-key-delete:focus{
2521   outline: 0px;
2522   border: 0px;
2523 }
2524 hr{
2525   margin-top: 0rem !important;
2526   margin-bottom: 0rem !important;
2527   border-top: 1px solid #efefef !important;
2528 }
2529 .creat-action-container{
2530   position: fixed;
2531   right: 0px;
2532   top: 104px;
2533   width: 130px;
2534   text-align: center;
2535 }
2536 .action-button{
2537   display: inline-block;
2538   width: 70px;
2539   margin-bottom: 12px;
2540   color: #BABBC3 !important;
2541   font-size: 10px;
2542   font-weight: bold;
2543   background: transparent;
2544   border: 0;
2545   padding: 0;
2546 }
2547 .action-button:disabled,
2548 .action-button:disabled:hover{
2549   cursor: unset;
2550   opacity: .5 !important;
2551 }
2552 .action-button:hover{
2553   text-decoration: none;
2554   cursor: pointer;
2555 }
2556 .action-button i{
2557   background: #fff;
2558   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2559   width: 40px;
2560   height: 40px;
2561   text-align: center;
2562   line-height: 40px;
2563   border-radius: 40px;
2564   color: #1B3E6F;
2565   font-size: 17px;
2566   display: inline-block;
2567 }
2568 .action-button i:hover{
2569   background: #dee2e6;
2570 }
2571 .action-button i.icon-save-sm{
2572   background: #1273EB;
2573   color: #fff;
2574   font-size: 11px;
2575 }
2576 .action-button i.icon-discard-sm{
2577   font-size: 11px;
2578   color: #BABBC3;
2579 }
2580 /* .action-button.save{
2581   color: #1273EB !important;
2582 }
2583 .action-button.save:hover{
2584   opacity: .9;
2585 } */
2586 .action-button.save:disabled{
2587   color: #C3CDDB !important;
2588 }
2589 .action-button.save:disabled i{
2590   background-color: #C3CDDB;
2591   animation: none;
2592 }
2593 .action-button.save:disabled i::before{
2594   color: #fff;
2595 }
2596 .action-button.save{
2597   color: #66BB00 !important;
2598 }
2599 /*Flash Glowing button style*/
2600 .action-button.save i{
2601 background-color: #66BB00;
2602 -webkit-animation: glowing 1500ms infinite;
2603 -moz-animation: glowing 1500ms infinite;
2604 -o-animation: glowing 1500ms infinite;
2605 animation: glowing 1500ms infinite;
2606 }
2607 @-webkit-keyframes glowing {
2608   0% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; }
2609   50% { background-color: #7CD116; -webkit-box-shadow: 0 0 40px #7CD116; }
2610   100% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; }
2611 }
2612
2613 @-moz-keyframes glowing {
2614   0% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; }
2615   50% { background-color: #7CD116; -moz-box-shadow: 0 0 40px #7CD116; }
2616   100% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; }
2617 }
2618
2619 @-o-keyframes glowing {
2620   0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2621   50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; }
2622   100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2623 }
2624
2625 @keyframes glowing {
2626   0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2627   50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; }
2628   100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
2629 }
2630
2631
2632 /* .action-button.delete i{
2633   color: #BABBC3;
2634 } */
2635 .action-button.delete,
2636 .action-button.delete i,
2637 .action-button.delete:hover,
2638 .action-button.delete:hover .icon-delete-sm{
2639   color: #FF6469 !important;
2640 }
2641 .mode-icon{
2642   font-size: 20px;
2643 }
2644
2645 /*MODAL*/
2646 .modal-dialog{
2647   margin-top: 60px !important;
2648 }
2649 .modal{
2650   z-index: 11000000 !important;
2651   background: rgba(27, 62, 111, 0.10) !important;
2652 }
2653 .modal-content{
2654   border-radius: 2px !important;
2655   border: 0 !important;
2656   box-shadow: 0 2px 6px rgba(47, 83, 151, .10);;
2657 }
2658 .modal-title{
2659   font-size: 14px !important;
2660 }
2661 .modal-body{
2662   padding: 1.5rem 1.5rem 1rem !important;
2663 }
2664 .enrichModal .modal-dialog{
2665   max-width: 60% !important;
2666 }
2667 .modal-body p{
2668   font-size: 14px;
2669 }
2670 .modal-body p span{
2671   color: #FF6469;
2672 }
2673 .modal-header{
2674   border-bottom-color: #ECEDF2 !important;
2675   padding: .7rem 1.5rem !important;
2676 }
2677 .modal-footer{
2678   padding-top: 0 !important;
2679   border-top: 0 !important;
2680 }
2681 .modal-footer .btn{
2682   padding: 8px 15px;
2683   font-weight: bold;
2684   font-size: 12px;
2685   border: 0 !important;
2686 }
2687 .modal-footer .btn-primary{
2688   background-color: #1B3E6F !important;
2689 }
2690 .modal-footer .btn-secondary,
2691 .modal-footer .btn-secondary:hover{
2692   background-color: transparent;
2693   color: #1273EB;
2694   opacity: .8;
2695 }
2696 .modal-footer .btn-secondary:hover{
2697   opacity: 1;
2698 }
2699 .modal-footer .btn-secondary:active{
2700   background-color: #E7F1FC !important;
2701   color: #1B3E6F !important;
2702 }
2703 .btn-modal-remove-file:hover{
2704   cursor: pointer;
2705 }
2706 .action-button span{
2707   width: 100%;
2708   display: inline-block;
2709   margin-top: 5px;
2710 }
2711 .creat-action-container hr{
2712   margin: 0 46px;
2713   padding-bottom: 18px;
2714 }
2715 .btn-link:hover, .btn-link:focus{
2716   text-decoration: none !important;
2717 }
2718 .btn-link::before{
2719   content: "\f107";
2720   font-family:'FontAwesome';
2721   position: relative;
2722   margin-right: 20px;
2723 }
2724 .btn-link.collapsed::before{
2725   content: "\f105";
2726   font-family:'FontAwesome';
2727   position: relative;
2728   margin-right: 25px;
2729 }
2730 .btn-link i{
2731   margin-right: 10px;
2732 }
2733 .ngx-file-drop__content{
2734   background: #F4F9FE;
2735   padding: 20px;
2736   height: auto !important;
2737   display: inline-block !important;
2738   width: 100%;
2739 }
2740 .ngx-file-drop__drop-zone{
2741   border: 1px dashed #D7E7F9 !important;
2742   border-radius: 0px !important;
2743   height: auto !important;
2744 }
2745 .folder-upload{
2746   width: 100%;
2747   margin: 15px auto 18px;
2748   display: inline-block;
2749   text-align: center;
2750 }
2751 .btn-group-sm>.btn, .btn-sm{
2752   font-size: 12px;
2753 }
2754 .create-title{
2755   margin-bottom: 0;
2756   font-size: 14px;
2757   font-weight: bold;
2758   /* text-transform: uppercase; */
2759   line-height: 32px;
2760 }
2761 .folder-upload-text{
2762   margin-top: 10px;
2763   width: 100%;
2764   display: inline-block;
2765   text-align: center;
2766   color:#242424 ;
2767   font-size: 14px;
2768 }
2769 .folder-upload-text button{
2770   margin-left: 10px;
2771   font-size: 12px;
2772 }
2773 .folder-upload-type{
2774   color:#A4B2C6 ;
2775   font-size: 10px;
2776   font-weight: bold;
2777   width: 100%;
2778   display: inline-block;
2779   text-align: center;
2780 }
2781 .upload-table{
2782   margin: 15px 0 0;
2783 }
2784 .upload-table tr{
2785   border: dashed 1px #D7E7F9;
2786 }
2787 .upload-table tr th{
2788   border-bottom: solid 1px #F4F9FE !important;
2789 }
2790 .upload-table .table thead th{
2791   padding: 6px 9px;
2792   border-top: 0px !important;
2793   font-weight: normal;
2794   font-size: 13px;
2795 }
2796 .upload-table .table thead th:first-child{
2797   width: 24px;
2798   padding-right: 0;
2799 }
2800 .upload-table tr:last-child th{
2801   border-bottom: 0 !important;
2802 }
2803 .upload-table .table{
2804   margin-bottom: 0px !important;
2805 }
2806 .nav-tabs .nav-link{
2807   position: relative;
2808 }
2809 .nav-tabs .nav-link.tab-done{
2810   padding-left: 40px !important;
2811 }
2812 .nav-tabs .nav-link.tab-done::after{
2813   content: "\f058";
2814   position: absolute;
2815   font-family: 'FontAwesome';
2816   left: 17px;
2817   font-size: 16px;
2818   top: 11px;
2819   color: #66BB00;
2820 }
2821 .authentication-container-all{
2822   background: #F4F9FE;
2823   border:1px solid #D0DFF1 ;
2824   flex: 1;
2825   width: 100%;
2826 }
2827 .authentication-header{
2828   width: 100%;
2829   background: #fff;
2830   font-size: 12px;
2831   color: #C3CDDB;
2832   font-weight: bold;
2833   padding: 10px 20px ;
2834 }
2835 .authentication-search{
2836   width: 100%;
2837   background: #fff;
2838   font-size: 12px;
2839   color: #C3CDDB;
2840   font-weight: bold;
2841   position: relative;
2842 }
2843 .authentication-search::after{
2844   content: "\f002";
2845     font-family: 'FontAwesome';
2846     position: absolute;
2847     left: 20px;
2848     top: 11px;
2849 }
2850 .authentication-search input{
2851   width: 100%;
2852   background: #fff;
2853   font-size: 12px;
2854   color: #C3CDDB;
2855   font-weight: bold;
2856   padding: 10px 20px 10px 35px;
2857   border: 0px;
2858   border-top: 1px solid #D7E7F9;
2859 }
2860 .authentication-search input::placeholder{
2861   color: #D0D7E4;
2862   font-size: 10px;
2863   font-weight:100;
2864 }
2865 .authentication-accordion{
2866   width: 100%;
2867   padding: 20px;
2868   max-height: 300px;
2869   overflow: auto;
2870 }
2871 .authentication-accordion .card{
2872   border-radius: 0px !important;
2873   margin-bottom: 10px !important;
2874 }
2875 .authentication-accordion .card-header{
2876   padding: 0px !important;
2877   background: #fff !important;
2878   border-radius: 0px !important;
2879   font-size: 18px;
2880   font-weight: bold;
2881 }
2882 .authentication-accordion .card-header .btn-link{
2883   color: #1B3E6F;
2884   width: 100%;
2885   text-align: left;
2886   padding: 9px 0px !important;
2887   font-size: 13px;
2888   font-weight: bold;
2889 }
2890 .authentication-accordion .custom-control{
2891   display: inline-block;
2892 }
2893 .authentication-accordion .btn-link::before{
2894   margin-right: 10px;
2895 }
2896 .authentication-accordion .btn-link.collapsed::before{
2897   margin-right: 14px;
2898 }
2899 .template-mapping-accordion{
2900   width: 100%;
2901 }
2902 .templateNote{
2903   font-size: 12px;
2904   color: #C1CDDD;
2905 }
2906 .card-header .btn.regularTitle{
2907   padding-left: 0 !important;
2908   padding-right: 0 !important;
2909   color: #1B3E6F;
2910   font-size: 13px;
2911   font-weight: bold;
2912 }
2913 .template-mapping-accordion .accordian-title{
2914   color: #C3CDDB !important;
2915   font-size: 12px !important;
2916   font-weight: normal !important;
2917 }
2918 .card{
2919   border-radius: 2px;
2920   border: 0;
2921   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2922   border: 0px !important;
2923 }
2924 .card-header{
2925   padding: 0px 25px !important;
2926   background: #F4F9FE !important;
2927   border-radius: 0px !important;
2928   border-bottom: 1px solid #ECEDF2 !important;
2929 }
2930 .template-mapping-accordion .card-body{
2931   padding: 20px 26px 0 !important;
2932   font-size: 14px;
2933 }
2934 .card-header .btn-link{
2935   color: #1B3E6F;
2936   width: 100%;
2937   text-align: left;
2938   padding: 9px 0px !important;
2939   font-size: 13px;
2940   font-weight: bold;
2941 }
2942 .accordion .card{
2943   margin-bottom: 0px !important;
2944   border-top: 1px solid #ECEDF2 !important;
2945 }
2946 .accordion > .card > .card-header{
2947   padding: 0 !important;
2948 }
2949 .template-mapping-accordion .card{
2950   margin-bottom: 25px !important;
2951 }
2952 .custom-control{
2953   display: inline-block;
2954 }
2955 .btn-link::before{
2956   margin-right: 10px;
2957 }
2958 .btn-link.collapsed::before{
2959   margin-right: 14px;
2960 }
2961 .drap-drop-action{
2962   padding: 12px 20px 9px 20px;
2963   color: #C3CDDB;
2964   cursor:move;
2965   font-size: 15px;
2966 }
2967 .modal-title {
2968   font-size: 13px;
2969   font-weight: bold;
2970 }
2971 .select-type{
2972   background: #F4F9FE;
2973   border: 1px solid #D7E7F9;
2974   padding: 10px;
2975   text-align: center;
2976   color: #1273EB;
2977   font-size: 15px;
2978   width: 100%;
2979   position: relative;
2980 }
2981 .select-type:hover, .select-type.active{
2982   background: #1B3E6F;
2983   border: 1px solid #D7E7F9;
2984   color: #fff;
2985   text-decoration: none;
2986 }
2987 .select-type-icon{
2988   font-size: 35px;
2989 }
2990 .select-type::before{
2991   content: '';
2992   border: 1px solid #1273EB;
2993   width: 18px;
2994   height: 18px;
2995   border-radius: 18px;
2996   display: inline-block;
2997   left: 10px;
2998   position: absolute;
2999 }
3000 .select-type:hover::before, .select-type.active::before{
3001   border: 1px solid #fff;
3002 }
3003 .select-type.active::after{
3004   content: '';
3005   background: #fff;
3006   width: 12px;
3007   height: 12px;
3008   border-radius: 18px;
3009   display: inline-block;
3010   left: 13px;
3011   position: absolute;
3012   top: 13px;
3013 }
3014 /* -------- ace editor style -------- */
3015 .editor-container{
3016   height: 55vh !important;
3017   /* overflow: scroll; */
3018 }
3019 .ace_print-margin{
3020   left: 100% !important;
3021   background: #eee !important;
3022 }
3023 .ace_content{
3024   width: 100% !important;
3025 }
3026 .ace_editor{
3027   /* height: 55vh !important; */
3028   line-height: 25px;
3029   border: 1px solid #ECEDF2;
3030   background-color: #fff;
3031   color: #1B3E6F !important;
3032 }
3033 .ace_gutter{
3034   background: #E0E8F2 !important;
3035   border-right: 0px !important;
3036   color: #1B3E6F !important;
3037 }
3038 .ace_gutter-active-line{
3039   background-color: #265699 !important;
3040   color: #fff;
3041 }
3042 .ace_cursor{
3043   color: #265699 !important;
3044 }
3045 .ace-tm .ace_marker-layer .ace_active-line{
3046   background: #F4F9FE !important;
3047 }
3048 .ace_dark .ace_fold-widget,
3049 .ace_dark .ace_fold-widget.ace_closed{
3050   background-position: center center !important;
3051   background-size: 7px;
3052   background-repeat: no-repeat !important;
3053 }
3054 .ace_dark .ace_fold-widget{
3055   background-image: url(/assets/img/icon-codeOpen.svg) !important;
3056 }
3057 .ace_dark .ace_fold-widget.ace_closed{
3058   background-image: url(/assets/img/icon-codeClosed.svg) !important;
3059   background-size: 4px;
3060 }
3061 /* -------- end of ace editor style -------- */
3062 .breadcrumb-header{
3063   padding: 0px;
3064   margin: 0px;
3065 }
3066 .breadcrumb-header li{
3067   list-style: none;
3068   display: inline-block;
3069   font-size: 14px;
3070 }
3071
3072 .breadcrumb-header li:last-child::after{
3073   display: none;
3074 }
3075
3076 .breadcrumb-header li:last-child{
3077 /* background: #F4F9FE; */
3078 border-radius: 50px;
3079 color: #C3CDDB;
3080 padding: 0 10px 0 0;
3081 }
3082 .breadcrumb-header li:first-child,
3083 .breadcrumb-header li:first-child a{
3084   font-size: 16px;
3085   font-weight: bold;
3086   padding: 0px;
3087   color: #1B3E6F !important;
3088   border-radius: 0px;
3089   background: transparent;
3090 }
3091 .create-template-import{
3092   width: 100%;
3093   margin: 30px 0px 10px ;
3094 }
3095
3096 .create-template-import a:hover{
3097   text-decoration: none;
3098 }
3099 .mapping-source-load{
3100   color: #1B3E6F;
3101   font-size: 10px;
3102   font-weight: bold;
3103   display: inline-block;
3104   vertical-align: top;
3105   margin-top: 20px;
3106   margin-bottom: 10px;
3107   margin:15px 30px 20px;
3108 }
3109 .mapping-source-load:hover{
3110   text-decoration: none;
3111 }
3112 .mapping-source-load i {
3113   color: #1B3E6F;
3114   font-size: 36px;
3115   padding: 10px;
3116   border-radius: 100px;
3117   width: 70px;
3118   height: 70px;
3119   display: inline-block;
3120   line-height: 52px;
3121   margin-bottom: 20px;
3122 }
3123 .mapping-source-load:hover i{
3124   background: #F4F9FE;
3125 }
3126 .mapping-source-load:hover span{
3127   color: #1273EB;
3128 }
3129 .source-load-note{
3130   color:#C3CDDB ;
3131   font-size: 8px;
3132 }
3133 .mapping-source-load.hover-disable{
3134   opacity: .5;
3135 }
3136 .mapping-source-load.hover-disable:hover span{
3137   color: #1B3E6F;
3138 }
3139 .mapping-source-load.hover-disable:hover i{
3140   background: transparent;
3141 }
3142 .mapping-editBar{
3143   margin-top: 6px;
3144 }
3145 .mapping-editBar .selectedAttributes{
3146   margin-left: 6px;
3147   line-height: 35px;
3148   font-size: 10px;
3149   font-weight: bold;
3150 }
3151 .selectedAttributes .totalAtt{
3152   color: #C4CEDB;
3153 }
3154 .mapping-editBar .custom-checkbox,
3155 .mapping-editBar .btn{
3156   margin: 0 4px !important;
3157   padding: 9px !important;
3158   width: 36px;
3159   height: 36px;
3160   background: #F4F9FE;
3161   border-radius: 50% !important;
3162   text-align: center;
3163   line-height: 14px;
3164 }
3165 .mapping-editBar .custom-checkbox{
3166   margin-left: 0 !important;
3167 }
3168 .mapping-editBar .custom-control-label{
3169   top: -2px;
3170   left: 16px;
3171 }
3172 .mapping-editBar .btn i{
3173   color: #1B3E6F;
3174   font-size: 18px;
3175   /* opacity: .5; */
3176 }
3177 .mapping-editBar .custom-checkbox:hover,
3178 .mapping-editBar .btn:hover i{
3179   opacity: .8;
3180 }
3181 .template-mapping-list{
3182   background: #F4F9FE;
3183   border: 1px solid #E9F3FF;
3184   padding: 5px 10px;
3185   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3186   width: 100%;
3187   display: inline-block;
3188   margin-bottom: 20px;
3189   color: #1B3E6F;
3190 }
3191 .template-mapping-list:hover,
3192 .template-mapping-list.active {
3193   cursor: pointer;
3194   /* background: #1B3E6F;  */
3195   text-decoration: none;
3196   /* color: #fff !important; */
3197   border-radius: 4px;
3198   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.3);
3199 }
3200 .template-mapping-list p,
3201 .template-mapping-list:hover p{
3202   margin-bottom: 0;
3203   width: 60%;
3204   display: inline-block !important;
3205 }
3206 .template-mapping-list:hover p{
3207   width: 90%;
3208 }
3209 .template-mapping-list:hover{
3210   opacity: .9;
3211 }
3212
3213 .template-mapping-list span{
3214   background: #fff;
3215   border: solid 1px #E9F3FF;
3216   color: #2A81ED;
3217   font-size: 9px;
3218   float: right;
3219   border-radius: 50px;
3220   padding: 3px 10px;
3221   margin-left: 5px;
3222 }
3223 .template-mapping-list:hover span{
3224   display: none;
3225 }
3226 .deleteTemplate{
3227   display: none;
3228   position: absolute;
3229   right: 21px;
3230   top: 2px;
3231   border: 0;
3232   background: transparent;
3233 }
3234 .deleteTemplate i{
3235   color: #FF6469 !important;
3236   font-size: 16px;
3237 }
3238 .template-mapping-list:hover .deleteTemplate{
3239   display: inline;
3240 }
3241 .max-height-list{
3242   max-height: 232px;
3243   padding-bottom: 5px !important;
3244   overflow: auto;
3245 }
3246 .create-template-mapping-button{
3247   background: #C3CDDB;
3248   border-radius: 50px;
3249   font-size: 12px;
3250   font-weight: bold;
3251   padding: 10px 20px;
3252   margin-bottom: 20px;
3253     display: inline-block;
3254     cursor: pointer;
3255 }
3256 .create-template-mapping-button i{
3257 margin-right: 5px;
3258   }
3259 .view-package-container{
3260   padding: 20px 56px;
3261 }
3262 .package-type-icon{
3263   color: #1B3E6F;
3264   background: #C1CDDD;
3265   width: 48px;
3266   height: 48px;
3267   border-radius: 48px;
3268   display: inline-block;
3269   text-align: center;
3270   line-height: 48px;
3271   font-size: 20px;
3272   /* margin-right: 20px; */
3273 }
3274 .defintionsNote{
3275   padding-left: 0;
3276 }
3277 .defintionsNote li{
3278   line-height: 24px;
3279   list-style: none;
3280   font-size: 13px;
3281 }
3282 .package-name-container{
3283   width: calc(100% - 60px);
3284   display: inline-block;
3285 }
3286 .package-name{
3287   font-size: 16px;
3288   color: #1B3E6F;
3289   font-weight: bold;
3290   margin-top: 3px;
3291 }
3292 .package-name span{
3293   font-size: 11px;
3294 }
3295 .package-name i{
3296   font-size: 12px;
3297   color: #C3CDDB;
3298   margin-left: 5px;
3299 }
3300 .deply-status-icon{
3301   margin-right: 4px;
3302   width: 1.6%;
3303   vertical-align: baseline;
3304 }
3305 .package-description{
3306   color: #D0D7E4;
3307   font-size: 12px;
3308   font-weight: normal;
3309 }
3310 .package-auth-info{
3311   font-size: 11px;
3312 }
3313 .package-auth-info p{
3314   margin-bottom: 5px;
3315 }
3316 .package-auth-info div{
3317   padding-left: 25px;
3318   border-right: solid 1px #F4F9FE;
3319 }
3320 .package-auth-info div:first-child{
3321   padding-left: 15px;
3322 }
3323 .package-auth-info .col-4:first-child{
3324   padding-left: 15px;
3325 }
3326 .package-auth-info div:last-child{
3327   border-right: 0;
3328 }
3329 .package-auth-info .package-contributers{
3330   margin-bottom: 0 !important;
3331 }
3332 .package-auth-info .package-contributers button img{
3333   width: 20px;
3334   height: 20px;
3335 }
3336 .template-mapping-action{
3337   margin-bottom: 20px;
3338 }
3339 .template-mapping-action button{
3340   border-radius: 50px;
3341   padding: 4px 20px;
3342   font-size: 13px;
3343 }
3344 .template-mapping-action .btn-primary:disabled{
3345   background:#C3CDDB !important ;
3346   border-color:#C3CDDB !important ;
3347   color: #fff !important ;
3348 }
3349 .template-mapping-action .btn-primary{
3350   background:#66BB00 !important ;
3351   border-color:#66BB00 !important ;
3352   color: #fff !important ;
3353 }
3354 .template-mapping-action .btn-outline-secondary{
3355   background:#fff !important ;
3356   border-color:#ECEDF2 !important ;
3357   color: #1B3E6F !important ;
3358 }
3359 .table-container{
3360   width: 100%;
3361 }
3362 /*
3363    server-side-angular-way.component.css
3364 */
3365 .no-data-available {
3366   text-align: center;
3367 }
3368
3369 /*
3370    src/styles.css (i.e. your global style)
3371 */
3372 .dataTables_empty {
3373   display: none;
3374 }
3375 .dataTables_length,
3376 .dataTables_filter{
3377   margin-bottom: 6px;
3378   color: #1B3E6F !important;
3379   font-size: 13px;
3380   /* font-weight: bold; */
3381 }
3382 /*Mat Table*/
3383 .mat-elevation-z8{
3384   box-shadow: none !important;
3385 }
3386 .mat-table,
3387 .mat-paginator{
3388   background: #fff !important;
3389   color: #1B3E6F !important;
3390 }
3391 .mat-table{
3392   border-top: solid 1px #ECEDF2;
3393 }
3394 .mat-paginator{
3395   /* display: inline-block; */
3396   width: 36%;
3397   float: right;
3398 }
3399 .mat-input-element{
3400   font-size: 13px !important;
3401   line-height: 20px !important;
3402 }
3403 tr.mat-header-row{
3404   background: #f4f9fe;
3405   border-bottom: 1px solid #ecedf2;
3406 }
3407 .mat-sort-header-button{
3408   text-align: left;
3409 }
3410 .mat-cell, .mat-footer-cell{
3411   color: #1B3E6F !important;
3412 }
3413 .mat-form-field-appearance-legacy .mat-form-field-wrapper{
3414   padding-bottom: 0;
3415 }
3416 .mat-paginator-page-size-select{
3417   margin-top: 12px;
3418 }
3419 .mat-paginator-page-size-select .mat-form-field-wrapper{
3420   padding-bottom: 14px;
3421 }
3422 .mat-paginator-range-label{
3423   margin-right: 8px;
3424 }
3425 .mat-form-field-infix,
3426 .dataTables_filter input{
3427   color: #1B3E6F;
3428   padding: 4px 9px !important;
3429   border: solid 1px #ECEDF2 !important;
3430   border-radius: 4px;
3431 }
3432 .mat-focused .mat-form-field-infix{
3433   border-bottom: 0 !important;
3434 }
3435 .tableFilter{
3436   margin-top: 12px;
3437 }
3438 .tableFilter .mat-form-field-wrapper{
3439   padding-bottom: 0 !important;
3440 }
3441 .tableFilter .mat-form-field-infix{
3442   background: url(../src/assets/img/icon-search.svg) 9px center no-repeat;
3443   padding-left: 24px !important;
3444 }
3445 .dataTables_filter input:focus{
3446   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3447 }
3448 .mapping-table th,
3449 .mapping-table td{
3450   width: auto !important;
3451   padding: 7px 20px 7px 0 !important;
3452   border-bottom: solid 1px #ECEDF2 !important;
3453   font-size: 13px;
3454 }
3455 .mapping-table th:first-child,
3456 .mapping-table td:first-child{
3457   padding-left: 20px !important;
3458 }
3459 .mapping-table thead th{
3460   padding: 4px 20px 4px 0 !important;
3461   border-bottom-color: #ECEDF2 !important;
3462   color: #1B3E6F;
3463   font-weight: bold;
3464   font-size: 12px;
3465 }
3466 .mapping-table tbody tr:hover{
3467   background-color: #F4F9FE !important;
3468 }
3469 .mat-form-field-label{
3470   color: #1B3E6F !important;
3471   font-size: 13px !important;
3472   padding-left: 26px;
3473   line-height: 20px !important;
3474 }
3475 .mat-select-value,
3476 .mat-select-arrow{
3477   color: #1B3E6F !important;
3478 }
3479 .mapping-table th{
3480   padding-top: 10px !important;
3481   padding-bottom: 10px !important;
3482   /* background: #F4F9FE; */
3483 }
3484 .mapping-table td{
3485   border-top: 0 !important;
3486 }
3487 table.dataTable.no-footer{
3488   margin-bottom: 9px;
3489   border-bottom: solid 1px #ECEDF2 !important;
3490 }
3491 .mat-paginator-container{
3492   padding-right: 0;
3493 }
3494 .mappingSelectedAtt{
3495   padding-left: 3px;
3496   line-height: 35px;
3497   font-size: 10px;
3498 }
3499 .dataTables_info{
3500   padding-top: 12px;
3501   color: #1B3E6F !important;
3502   font-size: 13px;
3503   font-weight: bold;
3504 }
3505 .dataTables_wrapper .dataTables_paginate,
3506 .dataTables_wrapper .dataTables_paginate a.paginate_button,
3507 .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
3508 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
3509   margin-bottom: 3px;
3510   color: #1B3E6F !important;
3511   font-size: 13px;
3512   font-weight: bold;
3513   border: 0 !important;
3514 }
3515 .dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
3516   border: 0;
3517   color: #1B3E6F !important;
3518   background: none !important;
3519 }
3520 .dataTables_wrapper .dataTables_paginate a.paginate_button{
3521   padding: 0.4em .9em !important;
3522 }
3523 .dataTables_wrapper .dataTables_paginate a.paginate_button.current{
3524   color: #1B3E6F !important;
3525   background: #F4F9FE !important;
3526   border: solid 1px #EEF4F9 !important;
3527   border-radius: 100% !important;
3528   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3529   outline: 0;
3530 }
3531 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
3532   opacity: .6;
3533 }
3534 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
3535   cursor: default;
3536   background: none !important;
3537   border: 0 !important;
3538 }
3539 .mapping-table .form-control,
3540 .mapping-table .custom-select{
3541   padding: 10px 6px;
3542   border-color: #EEF4F9;
3543   font-size: 14px;
3544   line-height: 12px;
3545   color: #1B3E6F;
3546 }
3547 .mapping-table .form-control{
3548   box-shadow: 0 2px 4px rgba(47,83,151,0.1);
3549 }
3550 .mapping-table tbody tr:hover .form-control:focus,
3551 .mapping-table tbody tr:hover .custom-select{
3552   background-color: #fff !important;
3553 }
3554 .mapping-table .custom-select{
3555   background-color: #F4F9FE;
3556   color: #1B3E6F;
3557 }
3558 .mapping-table .form-control:disabled{
3559   padding-left: 0;
3560   box-shadow: none;
3561   border: 0;
3562   background: transparent !important;
3563   color: #1B3E6F;
3564 }
3565
3566 /* Windows View as 150% */
3567 @media (resolution: 150dpi) {
3568   /* @media (-webkit-device-pixel-ratio: 1.5) { */
3569   .body-container > .container{
3570     max-width: 960px !important;
3571   }
3572 }
3573 /* Extra small devices (portrait phones, less than 576px) */
3574 @media (max-width: 575.98px) {
3575   .page-title{
3576     padding: 18px;
3577   }
3578 }
3579
3580 /* Small devices (landscape phones, 576px and up) */
3581 @media (min-width: 576px) and (max-width: 767.98px) {
3582
3583 }
3584
3585 /* Medium devices (tablets, 768px and up) */
3586 @media (min-width: 768px) and (max-width: 991.98px) {
3587
3588 }
3589
3590 /* Large devices (desktops, 992px and up) */
3591 @media (min-width: 992px) and (max-width: 1199.98px) {
3592
3593 }
3594
3595 /* Extra large devices (large desktops, 1200px and up) */
3596 @media (min-width: 1200px) {
3597
3598 }
3599
3600
3601
3602
3603
3604
3605 /* Package Wizard panel */
3606 .packageWizard.panel-wrap{
3607   position: fixed;
3608   top: 100px;
3609   bottom: 0;
3610   right: 0;
3611   width: 350px;
3612   height: 200px;
3613   transform: translateX(100%);
3614   transition: .3s ease-out;
3615   z-index: 2000;
3616 }
3617 .packageWizard .panel{
3618   position: absolute;
3619   top: 0;
3620   bottom: 0;
3621   left: 0;
3622   right: 0;
3623   overflow: auto;
3624   padding: 20px;
3625   padding-top: 9px;
3626   background: #1B3E6F;
3627   color: #fff;
3628   border-top: solid 6px #1273EB;
3629   box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17) !important;
3630   border-radius: 3px !important;
3631   /* border-top-right-radius: 0 !important;
3632   border-bottom-right-radius: 0 !important; */
3633   text-align: center;
3634 }
3635
3636 /* simulate panel state control --
3637 this can also be triggered by a
3638 class name added to the body tag.
3639 Just using a checkbox sibling here
3640 for simplicity
3641 */
3642 [type="checkbox"]:checked ~ .panel-wrap {
3643   transform: translateX(0%);
3644 }
3645 .packageWizard h3{
3646   margin-bottom: 15px;
3647   font-weight: bold !important;
3648   font-size: 16px;
3649 }
3650 .packageWizard p{
3651   margin-bottom: 12px;
3652   font-size: 14px;
3653 }
3654 .packageWizard span{
3655   font-size: 13px;
3656   color: #C3CDDB;
3657 }
3658 .startTour{
3659   margin-top: 15px;
3660   padding: 9px 21px;
3661   font-weight: bold;
3662   font-size: 12px;
3663   border: 0;
3664   border-radius: 18px;
3665   background-color: #1273EB;
3666   color: #fff;
3667 }
3668 .closeWizard{
3669   margin-top: 12px;
3670   border: 0;
3671   background: none;
3672   font-weight: normal;
3673   color: #E0E8F2;
3674   font-size: 12px;
3675 }
3676 /*Wizard Content*/
3677 .mat-menu-panel{
3678   box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17) !important;
3679   border-radius: 3px !important;
3680   border-top: solid 3px #1273EB;
3681 }
3682 .mat-menu-panel::after {
3683   content: '';
3684   display: block;
3685   width: 0;
3686   height: 0;
3687   position: absolute;
3688   border-left: 8px solid transparent;
3689   border-right: 8px solid transparent;
3690   border-bottom: 8px solid #1273EB;
3691   left: 9px;
3692   top: -8px;
3693 }
3694 .mat-card{
3695   background: #1B3E6F !important;
3696   color: #fff !important;
3697   font-family: inherit !important;
3698   border-radius: 0 !important;
3699 }
3700 .mat-card-content,
3701 .mat-card-subtitle{
3702   font-size: 13px;
3703 }
3704 .mat-card-title{
3705   margin-bottom: 9px !important;
3706   font-weight: bold !important;
3707   font-size: 16px !important;
3708 }
3709 .mat-icon-button[disabled]{
3710   color: rgba(224, 232, 242, .5) !important;
3711 }