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