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