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