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