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