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