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

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