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

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