cds-ui/client-frankfurt/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: 'HelvNeueOrange', 'Helvetica Neue', sans-serif !important;
  10   color: #1B3E6F !important;
  11 }
  12 *:focus{
  13   outline: none;
  14 }
  15 /*Bootstrap*/
  16 .custom-control-label::before{
  17   border: solid 1px #1B3E6F !important;
  18   border-radius: 0 !important;
  19 }
  20 .custom-control-input:checked ~ .custom-control-label::before{
  21   background: #1B3E6F !important;
  22 }
  23
  24 /*Components*/
  25 /* Menu Styles */
  26 .primary-nav{
  27   /* left: 0; */
  28   position: fixed;
  29   z-index: 999;
  30 }
  31 .menu{
  32   position: relative;
  33 }
  34 .menu ul{
  35   margin: 0;
  36   padding: 0;
  37   list-style: none;
  38 }
  39 .open-panel{
  40   border: none;
  41   background-color:#fff;
  42   padding: 0;
  43 }
  44 .logo-icon{
  45   background: #fff;
  46   position: relative;
  47   display: block;
  48   text-align: center;
  49   padding: 16px 0;
  50   width: 50px;
  51   height: 60px;
  52   left: 0;
  53   top: 0;
  54   z-index: 1000;
  55   cursor: pointer;
  56 }
  57 .primary-nav .menu li{
  58   position: relative;
  59 }
  60 .menu .icon{
  61   position: absolute;
  62   top: 12px;
  63   right: 10px;
  64   pointer-events: none;
  65   width: 30px;
  66   height: 30px;
  67   color: #fff;
  68   text-align: center;
  69 }
  70 .menu .icon .fa{
  71 vertical-align: middle;
  72 }
  73 .menu,
  74 .menu a,
  75 .menu a:visited{
  76   color: #fff;
  77   text-decoration: none!important;
  78   position: relative;
  79 }
  80 .menu a{
  81   display: block;
  82   white-space: nowrap;
  83   padding: 10px 1em;
  84   font-size: 12px;
  85   font-weight: bold;
  86   height: 52px;
  87   line-height: 30px;
  88 }
  89 .menu a:hover{
  90   color: #fff;
  91 }
  92 .menu-dropdown li .icon{
  93   padding: 2px 6px;
  94   color: #fff;
  95 }
  96 .menu-dropdown li.active .icon{
  97   color: #fff;
  98   background: #265699;
  99   border-radius: 50%;
 100 }
 101 .menu-dropdown li:hover{
 102   background: #172B4D;
 103 }
 104 .menu label{
 105   margin-bottom: 0;
 106   display: block;
 107 }
 108 .menu label:hover{
 109   cursor: pointer;
 110 }
 111 .menu input[type="checkbox"]{
 112   display: none;
 113 }
 114 input#menu[type="checkbox"]{
 115   display: none;
 116 }
 117 .sub-menu-dropdown{
 118   display: none;
 119 }
 120 .new-wrapper{
 121   position: absolute;
 122   left: 50px;
 123   width: calc(100% - 50px);
 124   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 125 }
 126 #menu:checked + ul.menu-dropdown{
 127   left: 0;
 128   -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
 129   animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
 130 }
 131 .sub-menu-checkbox:checked + ul.sub-menu-dropdown{
 132   display: block!important;
 133   -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
 134   animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
 135   border-top: solid 2px #1B3E6F;
 136 }
 137 .openNav .new-wrapper{
 138   position: absolute;
 139   transform: translate3d(200px, 0, 0);
 140   width: calc(100% - 250px);
 141   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 142 }
 143 .downarrow{
 144   background: transparent;
 145   position: absolute;
 146   right: 50px;
 147   top: 12px;
 148   color: #fff;
 149   width: 24px;
 150   height: 24px;
 151   text-align: center;
 152   display: block;
 153 }
 154 .downarrow:hover{
 155   color: #fff;
 156 }
 157 .menu{
 158   position: absolute;
 159   display: block;
 160   left: -200px;
 161   top: 0;
 162   width: 250px;
 163   height: 100vh;
 164   transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
 165   background-color: #1B3E6F;
 166   z-index: 999;
 167 }
 168 .menu-dropdown{
 169   top: 0;
 170   overflow-y: auto;
 171 }
 172 .overflow-container{
 173   position: relative;
 174   height: calc(100vh - 60px)!important;
 175   overflow-y: auto;
 176   border-top: 60px solid #fff;
 177   z-index: -1;
 178   display:block;
 179 }
 180
 181 .menu .logotype{
 182   position: absolute !important;
 183   top: 16px;
 184   left: 55px;
 185   display: block;
 186 }
 187 /* .sub-menu-dropdown{
 188 background-color: #333;
 189 }   */
 190 .menu:hover{
 191   position: absolute;
 192   left: 0;
 193   top: 0;
 194 }
 195 .openNav .menu:hover{
 196   position: absolute;
 197   left: -200px;
 198   top: 60px;
 199 }
 200 .openNav .menu{
 201   top: 60px;
 202   transform: translate3d(200px, 0, 0);
 203   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 204 }
 205 @-webkit-keyframes grow{
 206   0% {
 207     display: none;
 208     opacity: 0;
 209   }
 210   50% {
 211     display: block;
 212     opacity: 0.5;
 213   }
 214   100% {
 215     opacity: 1;
 216   }
 217 }
 218 @keyframes grow{
 219
 220   0% {
 221     display: none;
 222     opacity: 0;
 223   }
 224   50% {
 225     display: block;
 226     opacity: 0.5;
 227   }
 228   100% {
 229     opacity: 1
 230   }
 231 }
 232 /*User Profile*/
 233 .userProfile .dropdown{
 234   width: 100%;
 235 }
 236 .userProfile .dropdown:hover{
 237   background: #172B4D !important;
 238 }
 239 .userProfile .dropdown-text{
 240   background: transparent;
 241   border: 0;
 242   box-shadow: none;
 243   font-size: 13px;
 244   line-height: 40px;
 245 }
 246 /* .userProfile .dropdown-toggle{
 247 height: 40px;
 248 } */
 249 .userProfile .dropdown-toggle:hover ~ .dropdown-text,
 250 .userProfile .dropdown-toggle:focus ~ .dropdown-text{
 251   background: transparent !important;
 252   border-radius: 0 !important;
 253   box-shadow: none !important;
 254 }
 255
 256 .userProfile .dropdown-text::after {
 257           right: 14px;
 258           top: 8px;
 259           width: 24px;
 260           height: 24px;
 261           background: url(/assets/img/img-userProfile.png) center center no-repeat;
 262         }
 263 .packagesFilter .custom-checkbox{
 264   margin-left: 8px;
 265 }
 266 .packagesFilter .custom-control-label{
 267   line-height: 28px !important;
 268   font-size: 14px !important;
 269   text-indent: 6px !important;
 270 }
 271 /**Packages Sort**/
 272 .sort-packages{
 273   font-size: 12px;
 274   font-weight: bold;
 275   color: #C3CDDB;
 276 }
 277 .sort-packages .dropdown{
 278   width: 88px;
 279 }
 280 .sort-packages .dropdown-text{
 281   background: transparent;
 282   border: 0;
 283   box-shadow: none;
 284   color: #1B3E6F;
 285 }
 286 .sort-packages .dropdown-text::after{
 287   border-color: #1B3E6F transparent transparent transparent;
 288 }
 289 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
 290   border-color: transparent transparent #1B3E6F transparent;
 291 }
 292 .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
 293 .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
 294   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 295   background: #fff;
 296 }
 297 .sort-packages .dropdown-content:hover,
 298 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
 299   top: 30px;
 300 }
 301 .sort-packages .dropdown-content{
 302   width: 88px;
 303   padding: 6px 0;
 304   background: #fff;
 305   border-radius: 2px;
 306   border: 0;
 307   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 308 }
 309 .sort-packages .dropdown-content a{
 310   color: #1B3E6F;
 311   font-size: 12px;
 312 }
 313 .sort-packages .dropdown-content a:hover{
 314   background-color: #F4F9FE;
 315   text-decoration: unset;
 316 }
 317 /**Pagination**/
 318 .page-item .page-link,
 319 .page-item.disabled .page-link{
 320   background: transparent !important;
 321   border: 0;
 322   color: #1B3E6F !important;
 323   font-size: 14px;
 324 }
 325 .page-link:hover{
 326   color: #fff !important;
 327   background-color: #C3CDDB !important;
 328   border-radius: 100%;
 329 }
 330 /**Packages Cards***/
 331 /***Package Info Card***/
 332 .packages-card .card{
 333   margin: 0;
 334   border-radius: 2px;
 335   border: 0;
 336   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 337 }
 338 .packages-card .card-title{
 339   margin-bottom: 0 !important;
 340   font-size: 15px;
 341   font-weight: bold;
 342 }
 343 .packages-card p{
 344   font-size: 14px;
 345   color: #D0D7E4;
 346 }
 347 /***Add Package Card***/
 348 .addPaackage-card{
 349   padding: 10px 0;
 350   background: #F4F9FE !important;
 351   border: solid 1px #D7E7F9 !important;
 352 }
 353 .addPaackage-card img{
 354   margin-bottom: 12px;
 355   margin-top: 8px;
 356 }
 357 .addPaackage-card a{
 358   margin-bottom: 20px;
 359   padding: 10px 10px 10px 32px;
 360   font-weight: bold;
 361   font-size: 10px;
 362   text-transform: uppercase;
 363   border-radius: 2px;
 364   border-width: .5px;
 365   border-style: solid;
 366   background-position: 10px center;
 367   background-repeat: no-repeat;
 368 }
 369 .addPaackage-card a:hover{
 370   text-decoration: unset;
 371 }
 372 .btn-create-package,
 373 .btn-create-package:hover{
 374   background-color: #1B3E6F;
 375   border-color: #1B3E6F;
 376   color: #fff;
 377   background-image: url(../src/assets/img/icon-create-white.svg);
 378 }
 379 .btn-import-package,
 380 .btn-import-package:hover{
 381   color: #1B3E6F;
 382   background-image: url(../src/assets/img/icon-import-blue.svg);
 383 }
 384 /***Actions Menu***/
 385 .packages-card .dropdown{
 386   width: auto;
 387   float: right;
 388 }
 389 .packages-card .dropdown-text{
 390   background: transparent;
 391   border: 0;
 392   box-shadow: none;
 393   text-indent: 0;
 394   line-height: unset;
 395   border-bottom-left-radius: 0;
 396   border-bottom-right-radius: 0;
 397   opacity: .6;
 398 }
 399 .packages-card .dropdown-text::after{
 400   display: none;
 401 }
 402 .packages-card .dropdown-text img{
 403   padding: 9px 7px;
 404 }
 405 .packages-card .dropdown-content{
 406   right: 0;
 407   width: 120px;
 408   padding: 6px 0;
 409
 410   border: 0;
 411   border-radius: 50%;
 412 }
 413 /* .userProfile .dropdown-content{
 414   bottom: 40px !important;
 415   top: unset !important;
 416   width: 100%;
 417 } */
 418 /**Tab Nav**/
 419 .nav-tabs{
 420   border-bottom-color: #ECEDF2 !important;
 421 }
 422 .nav-link{
 423   padding: 15px 20px 15px 0 !important;
 424   text-transform: uppercase !important;
 425   font-size: 12px;
 426   font-weight: bold;
 427   color: #C3CDDB !important;
 428   border: none !important;
 429 }
 430 .nav-tabs .nav-link:focus,
 431 .nav-tabs .nav-link:hover{
 432   border: 0 !important;
 433 }
 434   .nav-tabs .nav-link:hover{
 435     color: #1B3E6F !important;
 436   }
 437   .nav-tabs .nav-link.active{
 438     color: #1B3E6F !important;
 439     background: transparent !important;
 440     border: 0 !important;
 441     border-bottom: solid 2px #1B3E6F !important;
 442   }
 443   .nav-tabs .nav-link::before{
 444     content: "|";
 445     padding-right: 20px !important;
 446     color: #C3CDDB;
 447     font-weight: normal;
 448   }
 449   .nav-tabs .nav-link:first-child::before{
 450     content: none;
 451   }
 452   .nav-tabs .nav-link:first-child{
 453     padding-left: 20px !important;
 454   }
 455   /**Sliding Search Input**/
 456   .searchBox{
 457     position: absolute;
 458     top: 0%;
 459     right: 0%;
 460     transform: translate(0%,-0%);
 461     height: 40px;
 462   }
 463   .searchButton{
 464     float: right;
 465     margin-top: 14px;
 466     padding-left: 0 !important;
 467     padding-right: 24px !important;
 468     width: 60px;
 469     height: 24px;
 470     background: url(../src/assets/img/icon-search.svg) center center no-repeat;
 471     background-size: 28%;
 472     border: 0 !important;
 473     border-right: solid 1px #1B3E6F !important;
 474     display: flex;
 475     justify-content: center;
 476     align-items: center;
 477     transition: 0.4s;
 478   }
 479   .searchBox:hover > .searchInput{
 480     width: 240px;
 481     border-bottom: solid 1px #C3CDDB;
 482   }
 483   .searchBox:hover > .searchButton{
 484     color: #1B3E6F;
 485   }
 486   .searchInput{
 487     border: none;
 488     background: none;
 489     outline: none;
 490     float: left;
 491     padding: 0;
 492     color: #1B3E6F;
 493     font-size: 14px;
 494     transition: 0.4s;
 495     line-height: 40px;
 496     width: 0px;
 497   }
 498   .searchInput::placeholder{
 499     color: #BABBC3;
 500   }
 501   .searchBox-expanded{
 502     width: 240px;
 503     border-bottom: solid 1px #C3CDDB;
 504   }
 505   /**Drop Down Menu**/
 506   .dropdown{
 507     position: relative;
 508     display: inline-block;
 509     text-align: left;
 510     width: 132px;
 511     z-index: 200;
 512   }
 513   .dropdown-text{
 514     cursor: pointer;
 515     position: relative;
 516     text-indent: 10px;
 517     line-height: 32px;
 518     background-color: #eee;
 519     border: 1px solid #ccc;
 520     border-radius: 3px;
 521     box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
 522     width: 100%;
 523   }
 524   .dropdown-text:after{
 525     position: absolute;
 526     right: 6px;
 527     top: 15px;
 528     content: '';
 529     width: 0px;
 530     height: 0px;
 531     border-style: solid;
 532     border-width: 5px 4px 0 4px;
 533     border-color: #555 transparent transparent transparent;
 534   }
 535   .dropdown-toggle{
 536     font-size: 0;
 537     z-index: 1;
 538     cursor: pointer;
 539     position: absolute;
 540     top: 0;
 541     border: none;
 542     padding: 0;
 543     margin: 0 0 0 1px;
 544     background: transparent;
 545     text-indent: -10px;
 546     height: 34px;
 547     width: 100%;
 548   }
 549   .dropdown-toggle:focus{
 550     outline: 0;
 551   }
 552   .dropdown-content{
 553     position: absolute;
 554     top: 32px;
 555     width: 140px;
 556     margin: 0;
 557     padding: 0;
 558     opacity: 0;
 559     visibility:hidden;
 560     -webkit-transition: all .25s ease;
 561     -moz-transition: all .25s ease;
 562     -ms-transition: all .25s ease;
 563     -o-transition: all .25s ease;
 564     transition: all .25s ease;
 565     list-style-type: none;
 566     border-radius: 3px;
 567     text-indent: 10px;
 568     line-height: 32px;
 569     background-color: #eee;
 570     border: 1px solid #ccc;
 571   }
 572   .dropdown-content a{
 573     display: block;
 574   }
 575   .dropdown-content a:hover{
 576     background: #e8e8e8;
 577   }
 578   .dropdown-toggle:hover ~ .dropdown-text,
 579   .dropdown-toggle:focus ~ .dropdown-text{
 580     background-color: #e8e8e8;
 581   }
 582   .dropdown-toggle:focus ~ .dropdown-text{
 583     box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
 584     z-index: 2;
 585   }
 586   .dropdown-toggle:focus ~ .dropdown-text:after{
 587     border-width: 0 4px 5px 4px;
 588     border-color: transparent transparent #555 transparent;
 589   }
 590   .dropdown-content:hover,
 591   .dropdown-toggle:focus ~ .dropdown-content{
 592     opacity: 1;
 593     visibility:visible;
 594     top: 42px;
 595   }
 596   /**Card**/
 597   /* Hover Shadow */
 598   @keyframes hover {
 599     50% {
 600       transform: translateY(-3px);
 601     }
 602     100% {
 603       transform: translateY(-6px);
 604     }
 605   }
 606   @keyframes card {
 607     0% {
 608       transform: translateY(6px);
 609       opacity: .3;
 610     }
 611     50% {
 612       transform: translateY(3px);
 613       opacity: .8;
 614     }
 615     100% {
 616       transform: translateY(6px);
 617       opacity: .3;
 618     }
 619   }
 620   .card {
 621     /* display: inline-block;
 622     position: relative;
 623     transition-duration: 0.2s;
 624     transition-property: transform;
 625     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 626     transform: translateZ(0); */
 627     margin-bottom: 25px !important;
 628     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 629   }
 630   /* .card:before {
 631     pointer-events: none;
 632     position: absolute;
 633     z-index: -1;
 634     content: '';
 635     top: 100%;
 636     left: 5%;
 637     height: 10px;
 638     width: 90%;
 639     opacity: 0;
 640     background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
 641     transition-duration: 0.2s;
 642     transition-property: transform opacity;
 643   } */
 644   /* .card:hover {
 645     transform: translateY(-3px);
 646     animation-name: hover;
 647     animation-duration: 1s;
 648     animation-delay: 0.2s;
 649     animation-timing-function: linear;
 650     animation-iteration-count: 1;
 651     animation-direction: alternate;
 652   }
 653   .card:hover:before {
 654     opacity: .4;
 655     transform: translateY(3px);
 656     animation-name: card;
 657     animation-duration: 1s;
 658     animation-delay: .2s;
 659     animation-timing-function: linear;
 660     animation-iteration-count: 1;
 661     animation-direction: alternate;
 662   } */
 663   .card-body{
 664     padding: 20px !important;
 665   }
 666
 667   /*Main Container*/
 668   .main-container{
 669     padding: 0 !important;
 670   }
 671   /*Page Title*/
 672   .page-title{
 673     padding: 21px 30px;
 674     background:#fff;
 675     border-left: solid 1px #FAFAFA;
 676     margin-bottom: 21px;
 677     -webkit-box-shadow: 0 4px 10px 0 #eef0f5;
 678     box-shadow: 0 4px 10px 0 #eef0f5;
 679     position: relative;
 680     z-index: 8;
 681   }
 682   .page-title h2{
 683     font-size: 16px;
 684     font-weight: bold;
 685   }
 686   .page-title h2 span{
 687     color: #BABBC3;
 688     font-size: 14px;
 689   }
 690   /*Content*/
 691   .body-container{
 692     padding: 0 30px !important;
 693   }
 694   .search-filter-col{
 695     padding-right: 0 !important;
 696     border-bottom: solid 1px #ECEDF2 !important;
 697   }
 698   /**Packages Filter**/
 699   .packagesFilter{
 700     margin-top: 12px;
 701     margin-bottom: 7px;
 702   }
 703   .packagesFilter .dropdown-toggle{
 704     height: 36px !important;
 705   }
 706   .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
 707     border-color: transparent transparent #1B3E6F transparent;
 708   }
 709   .packagesFilter .dropdown-text{
 710     background: transparent;
 711     border: 0;
 712     box-shadow: none;
 713     text-indent: 14px;
 714     line-height: 30px;
 715     font-size: 12px;
 716   }
 717   .packagesFilter .dropdown-text::after{
 718     right: 12px;
 719     border-color: #1B3E6F transparent transparent transparent;
 720   }
 721   .packagesFilter .dropdown-toggle:hover ~ .dropdown-text,
 722   .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
 723     background-color: transparent;
 724     box-shadow: none;
 725     border-radius: 0;
 726   }
 727   .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
 728     background: #fff;
 729     box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 730   }
 731   .packagesFilter .dropdown-text::after{
 732     top: 12px;
 733   }
 734   .packagesFilter .dropdown-content{
 735     padding: 6px 0 15px;
 736     background: #fff;
 737     box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 738     border: 0;
 739     border-top-left-radius: 0;
 740     border-top-right-radius: 0;
 741     border-bottom-left-radius: 2px;
 742     border-bottom-right-radius: 2px;
 743   }
 744   .packagesFilter .dropdown-content:hover,
 745   .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
 746     top: 30px;
 747   }
 748   .packagesFilter .form-control{
 749     padding: 12px 9px 12px 38px !important;
 750     border: 0 !important;
 751     border-bottom: solid 1px #D7E7F9 !important;
 752     background: url(../src/assets/img/icon-search.svg) 15px center no-repeat;
 753     background-size: 4%;
 754     border-radius: 0 !important;
 755     color: #1B3E6F;
 756     font-size: 13px;
 757   }
 758   .packagesFilter .form-control::placeholder{
 759     color: #BABBC3;
 760   }
 761   .packagesFilter .form-control:focus{
 762     box-shadow: none !important;
 763     border-bottom: solid 1px #1B3E6F !important;
 764   }
 765   .packagesFilter .custom-checkbox{
 766     margin-left: 8px;
 767   }
 768   .packagesFilter .custom-control-label{
 769     line-height: 28px !important;
 770     font-size: 13px !important;
 771     text-indent: 6px !important;
 772   }
 773   /**Packages Sort**/
 774   .sort-packages{
 775     font-size: 12px;
 776     font-weight: bold;
 777     color: #C3CDDB;
 778   }
 779   .sort-packages .dropdown{
 780     width: 88px;
 781   }
 782   .sort-packages .dropdown-text{
 783     background: transparent;
 784     border: 0;
 785     box-shadow: none;
 786     color: #1B3E6F;
 787   }
 788   .sort-packages .dropdown-text::after{
 789     border-color: #1B3E6F transparent transparent transparent;
 790   }
 791   .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
 792     border-color: transparent transparent #1B3E6F transparent;
 793   }
 794   .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
 795   .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
 796     box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 797     background: #fff;
 798   }
 799   .sort-packages .dropdown-content:hover,
 800   .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
 801     top: 30px;
 802   }
 803   .sort-packages .dropdown-content{
 804     width: 88px;
 805     padding: 6px 0;
 806     background: #fff;
 807     border-radius: 2px;
 808     border: 0;
 809     box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 810   }
 811   .sort-packages .dropdown-content a{
 812     color: #1B3E6F;
 813     font-size: 12px;
 814   }
 815   .sort-packages .dropdown-content a:hover{
 816     background-color: #F4F9FE;
 817     text-decoration: unset;
 818   }
 819   /**Pagination**/
 820   .page-item .page-link,
 821   .page-item.disabled .page-link{
 822     background: transparent !important;
 823     border: 0;
 824     color: #1B3E6F !important;
 825     font-size: 14px;
 826   }
 827   .page-link:hover{
 828     color: #fff !important;
 829     background-color: #C3CDDB !important;
 830     border-radius: 100%;
 831   }
 832   /**Packages Cards***/
 833   /***Package Info Card***/
 834   .packages-card .card{
 835     margin: 0;
 836     border-radius: 2px;
 837     border: 0;
 838     box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 839   }
 840   .packages-card .card:hover{
 841     box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .15);
 842     transition: all 0.5s ease;
 843   }
 844   .packages-card .card-title{
 845     margin-bottom: 0 !important;
 846     font-size: 15px;
 847     font-weight: bold;
 848   }
 849   .packages-card p{
 850     font-size: 14px;
 851     color: #D0D7E4;
 852   }
 853 .packages-card .card-body{
 854   padding-bottom: 0 !important;
 855 }
 856 .packages-card .card-footer .col{
 857   padding: 0;
 858   text-align: center;
 859 }
 860 .packages-card .card-footer .col:last-child{
 861   padding-left: 20px;
 862 }
 863   /***Add Package Card***/
 864   .addPaackage-card{
 865     background: #F4F9FE !important;
 866     border: solid 1px #D7E7F9 !important;
 867   }
 868   .addPaackage-card:hover{
 869     box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
 870   }
 871   .addPaackage-card img{
 872     margin-bottom: 33px;
 873     margin-top: 8px;
 874   }
 875   .addPaackage-card a{
 876     margin: 0 0 14px;
 877     padding: 10px 10px 10px 32px;
 878     font-weight: bold;
 879     font-size: 10px;
 880     text-transform: uppercase;
 881     border-radius: 2px;
 882     border-width: .5px;
 883     border-style: solid;
 884     background-position: 10px center;
 885     background-repeat: no-repeat;
 886     text-align: left;
 887   }
 888   .addPaackage-card a:hover{
 889     text-decoration: unset;
 890   }
 891   .addPaackage-card .card-footer .col{
 892     padding: 0;
 893     text-align: right;
 894   }
 895   .addPaackage-card .card-footer .col:last-child{
 896     text-align: left;
 897   }
 898   .btn-create-package,
 899   .btn-create-package:hover{
 900     background-color: #1B3E6F;
 901     border-color: #1B3E6F;
 902     color: #fff;
 903     background-image: url(../src/assets/img/icon-create-white.svg);
 904     background-repeat: no-repeat;
 905   }
 906   .btn-import-package,
 907   .btn-import-package:hover{
 908     color: #1B3E6F;
 909     background-image: url(../src/assets/img/icon-import-blue.svg);
 910   }
 911   /***Actions Menu***/
 912   .packages-card .dropdown{
 913     width: auto;
 914     float: right;
 915   }
 916   .packages-card .dropdown-text{
 917     background: transparent;
 918     border: 0;
 919     box-shadow: none;
 920     text-indent: 0;
 921     line-height: unset;
 922     border-bottom-left-radius: 0;
 923     border-bottom-right-radius: 0;
 924     opacity: .6;
 925   }
 926   .packages-card .dropdown-text::after{
 927     display: none;
 928   }
 929   .packages-card .dropdown-text img{
 930     padding: 9px 7px;
 931   }
 932   .packages-card .dropdown-content{
 933     right: 0;
 934     width: 120px;
 935     padding: 6px 0;
 936     border: 0;
 937     text-indent: 0;
 938     border-radius: 2px;
 939     border-top-left-radius: 0;
 940     border-top-right-radius: 0;
 941     background: #1B3E6F;
 942   }
 943   .packages-card .dropdown-content a{
 944     padding-left: 45px;
 945     color: #fff;
 946     font-size: 13px;
 947     background-position: 20px center;
 948     background-size: 10%;
 949     background-repeat: no-repeat;
 950   }
 951   .packages-card .dropdown-content a:hover{
 952     background-color: #172B4D;
 953     text-decoration: unset;
 954   }
 955   .packages-card .action-clone a,
 956   .packages-card .action-clone a:hover{
 957     background-image: url(../src/assets/img/icon-clone-sm.svg);
 958   }
 959   .packages-card .action-archive a,
 960   .packages-card .action-archive a:hover{
 961     background-image: url(../src/assets/img/icon-archive-sm.svg);
 962   }
 963   .packages-card .action-delete a,
 964   .packages-card .action-delete a:hover{
 965     background-image: url(../src/assets/img/icon-delete-sm.svg);
 966   }
 967   .packages-card .dropdown-content:hover,
 968   .packages-card .dropdown-toggle:focus ~ .dropdown-content{
 969     top: 24px;
 970   }
 971   .packages-card .dropdown-toggle:hover ~ .dropdown-text{
 972     background: transparent;
 973     opacity: 1;
 974   }
 975   .packages-card .dropdown-toggle:focus ~ .dropdown-text{
 976     opacity: 1;
 977     background: #1B3E6F;
 978     box-shadow: none;
 979   }
 980   /***Contributers***/
 981   ul.package-contributers{
 982     /*margin-bottom: 0 !important;*/
 983     padding-left: 0 !important;
 984   }
 985   .package-contributers li{
 986     list-style: none;
 987     display: inline-block;
 988   }
 989   .package-contributers li{
 990     margin-left: -5px;
 991   }
 992   .package-contributers li:first-child{
 993     margin-left: 0;
 994   }
 995   .package-contributers li:last-child{
 996     margin-left: 9px;
 997   }
 998   .package-modifier,
 999   .package-contributers button{
1000     padding: 0 !important;
1001     border-radius: 100%;
1002     border: 0 !important;
1003     /*Hover Effect*/
1004     -webkit-transition: box-shadow 0.2s ease;
1005     -moz-transition: box-shadow 0.2s ease;
1006     transition: box-shadow 0.2s ease;
1007     -webkit-backface-visibility: hidden;
1008     backface-visibility: hidden;
1009     display: inline-block;
1010     position: relative;
1011   }
1012   .package-modifier:before,
1013   .package-contributers button:before{
1014     -webkit-transition: all 0.2s ease;
1015     -moz-transition: all 0.2s ease;
1016     transition: all 0.2s ease;
1017     border-radius: 50%;
1018     bottom: 0;
1019     box-shadow: 0 0 0 2px #fff;
1020     content: "";
1021     left: 0;
1022     position: absolute;
1023     right: 0;
1024     top: 0;
1025   }
1026   .package-modifier:hover,
1027   .package-contributers button:hover{
1028     box-shadow: 0 0 0 2px #D7E7F9;
1029     text-decoration: none;
1030   }
1031   .package-modifier:hover:before,
1032   .package-contributers button:hover:before{
1033     -webkit-transform: scale(0.925);
1034     -moz-transform: scale(0.925);
1035     -ms-transform: scale(0.925);
1036     -o-transform: scale(0.925);
1037     transform: scale(0.925);
1038     box-shadow: 0 0 0 1px #D7E7F9;
1039     opacity: 0.5;
1040   }
1041   .package-modifier img,
1042   .package-contributers button img{
1043     width: 28px;
1044     height: 28px;
1045     object-fit: cover;
1046     vertical-align: top;
1047     border-radius: 100%;
1048   }
1049   .package-contributers a{
1050     font-size: 12px;
1051     color: #1273EB;
1052   }
1053   .package-contributers a:hover{
1054     text-decoration: unset;
1055   }
1056   /***Package Footer***/
1057   .packages-card .card-footer{
1058     padding: 0 20px !important;
1059     background: transparent !important;
1060     border-top-color: #F7F6F6 !important;
1061   }
1062   .packages-card .card-footer .col:first-child{
1063     border-right: solid 1px #F7F6F6;
1064   }
1065   .packages-card .card-footer .btn{
1066     background-color: transparent !important;
1067     color: #C3CDDB !important;
1068     border: 0;
1069     font-size: 13px;
1070     opacity: .7;
1071   }
1072   .packages-card .card-footer .btn:hover{
1073     opacity: 1;
1074   }
1075   .btn-card-config,
1076   .btn-card-topology{
1077     padding: 15px 0 15px 28px !important;
1078     background-size: 16%;
1079     background-position: left center;
1080     background-repeat: no-repeat;
1081   }
1082   .btn-card-config{
1083     background-image: url(../src/assets/img/icon-btn-card-config.svg);
1084   }
1085   .btn-card-topology{
1086     background-image: url(../src/assets/img/icon-btn-card-topology.svg);
1087   }
1088   .icon-deployed{
1089     margin-right: 5px;
1090     display: inline;
1091     background: url(../src/assets/img/icon-deploy.svg) center center no-repeat;
1092   }
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103   /* Border Fade */
1104   .border-fade {
1105     display: inline-block;
1106     transition-duration: 0.3s;
1107     transition-property: box-shadow;
1108     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1109     transform: translateZ(0);
1110     box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
1111     /* Hack to improve aliasing on mobile/tablet devices */
1112   }
1113   .border-fade:hover {
1114     box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
1115     /* Hack to improve aliasing on mobile/tablet devices */
1116   }
1117   /*Content*/
1118
1119   /**Title Action Buttons**/
1120   .page-title-actions li{
1121     display: inline-block;
1122     text-align: center;
1123   }
1124   .title-action{
1125     -webkit-transition: box-shadow 0.2s ease;
1126     -moz-transition: box-shadow 0.2s ease;
1127     transition: box-shadow 0.2s ease;
1128     -webkit-backface-visibility: hidden;
1129     backface-visibility: hidden;
1130     border-radius: 50%;
1131     color: #6a75eb;
1132     display: inline-block;
1133     font-size: 0.889em;
1134     height: 4em;
1135     margin: 0 1em 1em;
1136     position: relative;
1137     text-align: center;
1138     text-transform: lowercase;
1139     width: 4em;
1140     line-height: 4em;
1141   }
1142
1143   .title-action:before{
1144     -webkit-transition: all 0.2s ease;
1145     -moz-transition: all 0.2s ease;
1146     transition: all 0.2s ease;
1147     border-radius: 50%;
1148     bottom: 0;
1149     box-shadow: 0 0 0 1px #000;
1150     content: "";
1151     left: 0;
1152     position: absolute;
1153     right: 0;
1154     top: 0;
1155   }
1156   .title-action:hover{
1157     box-shadow: 0 0 0 7px #07819b;
1158     text-decoration: none;
1159   }
1160   .title-action:hover:before{
1161     -webkit-transform: scale(0.925);
1162     -moz-transform: scale(0.925);
1163     -ms-transform: scale(0.925);
1164     -o-transform: scale(0.925);
1165     transform: scale(0.925);
1166     box-shadow: 0 0 0 1px #07819b;
1167     opacity: 0.5;
1168   }
1169
1170   /*Animation Button*/
1171   /**Float**/
1172   .float {
1173     display: inline-block;
1174     transition-duration: 0.3s;
1175     transition-property: transform;
1176     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1177     transform: translateZ(0);
1178     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
1179   }
1180   .float:hover {
1181     transform: translateY(-5px);
1182   }
1183
1184 /*TOOLTIP*/
1185 /* Base styles for the element that has a tooltip */
1186 [data-tooltip],
1187 .tooltip {
1188   position: relative;
1189   cursor: pointer;
1190   text-align: center;
1191 }
1192
1193 /* Base styles for the entire tooltip */
1194 [data-tooltip]:before,
1195 [data-tooltip]:after,
1196 .tooltip:before,
1197 .tooltip:after {
1198   position: absolute;
1199   visibility: hidden;
1200   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1201   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
1202   opacity: 0;
1203   -webkit-transition:
1204       opacity 0.2s ease-in-out,
1205         visibility 0.2s ease-in-out,
1206         -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1207     -moz-transition:
1208         opacity 0.2s ease-in-out,
1209         visibility 0.2s ease-in-out,
1210         -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1211     transition:
1212         opacity 0.2s ease-in-out,
1213         visibility 0.2s ease-in-out,
1214         transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1215   -webkit-transform: translate3d(0, 0, 0);
1216   -moz-transform:    translate3d(0, 0, 0);
1217   transform:         translate3d(0, 0, 0);
1218   pointer-events: none;
1219 }
1220
1221 /* Show the entire tooltip on hover and focus */
1222 [data-tooltip]:hover:before,
1223 [data-tooltip]:hover:after,
1224 [data-tooltip]:focus:before,
1225 [data-tooltip]:focus:after,
1226 .tooltip:hover:before,
1227 .tooltip:hover:after,
1228 .tooltip:focus:before,
1229 .tooltip:focus:after {
1230   visibility: visible;
1231   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
1232   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
1233   opacity: 1;
1234 }
1235
1236 /* Base styles for the tooltip's directional arrow */
1237 .tooltip:before,
1238 [data-tooltip]:before {
1239   z-index: 1001;
1240   border: 6px solid transparent;
1241   background: transparent;
1242   content: "";
1243 }
1244
1245 /* Base styles for the tooltip's content area */
1246 .tooltip:after,
1247 [data-tooltip]:after {
1248   z-index: 1000;
1249   padding: 8px;
1250   width: auto;
1251   background-color: #DEE8F3;
1252   background-color: rgba(222, 232, 243, 1.0);
1253   color: #1B3E6F;
1254   content: attr(data-tooltip);
1255   font-size: 10px;
1256   line-height: 1.2;
1257   border-radius: 2px;
1258 }
1259
1260 /* Directions */
1261
1262 /* Top (default) */
1263 [data-tooltip]:before,
1264 [data-tooltip]:after,
1265 .tooltip:before,
1266 .tooltip:after,
1267 .tooltip-top:before,
1268 .tooltip-top:after {
1269   bottom: 100%;
1270   left: 50%;
1271 }
1272
1273 [data-tooltip]:before,
1274 .tooltip:before,
1275 .tooltip-top:before {
1276   margin-left: 0;
1277   margin-bottom: -12px;
1278
1279   border-bottom-color: #DEE8F3;
1280   border-bottom-color: rgba(222, 232, 243, 1.0);
1281 }
1282
1283 /* Horizontally align top/bottom tooltips */
1284 [data-tooltip]:after,
1285 .tooltip:after,
1286 .tooltip-top:after {
1287   margin-left: -50%;
1288 }
1289
1290 [data-tooltip]:hover:before,
1291 [data-tooltip]:hover:after,
1292 [data-tooltip]:focus:before,
1293 [data-tooltip]:focus:after,
1294 .tooltip:hover:before,
1295 .tooltip:hover:after,
1296 .tooltip:focus:before,
1297 .tooltip:focus:after,
1298 .tooltip-top:hover:before,
1299 .tooltip-top:hover:after,
1300 .tooltip-top:focus:before,
1301 .tooltip-top:focus:after {
1302   -webkit-transform: translateY(-12px);
1303   -moz-transform:    translateY(-12px);
1304   transform:         translateY(-12px);
1305 }
1306
1307 /* Left */
1308 .tooltip-left:before,
1309 .tooltip-left:after {
1310   right: 100%;
1311   bottom: 50%;
1312   left: auto;
1313 }
1314
1315 .tooltip-left:before {
1316   margin-left: 0;
1317   margin-right: -12px;
1318   margin-bottom: 0;
1319   border-top-color: transparent;
1320   border-left-color: #000;
1321   border-left-color: hsla(0, 0%, 20%, 0.9);
1322 }
1323
1324 .tooltip-left:hover:before,
1325 .tooltip-left:hover:after,
1326 .tooltip-left:focus:before,
1327 .tooltip-left:focus:after {
1328   -webkit-transform: translateX(-12px);
1329   -moz-transform:    translateX(-12px);
1330   transform:         translateX(-12px);
1331 }
1332
1333 /* Bottom */
1334 .tooltip-bottom:before,
1335 .tooltip-bottom:after {
1336   top: 100%;
1337   bottom: auto;
1338   left: 20%;
1339 }
1340
1341 .tooltip-bottom:before {
1342   margin-top: -12px;
1343   margin-bottom: 0;
1344   border-top-color: transparent;
1345   border-bottom-color: #DEE8F3;
1346   border-bottom-color: rgba(222, 232, 243, 1.0);
1347 }
1348
1349 .tooltip-bottom:hover:before,
1350 .tooltip-bottom:hover:after,
1351 .tooltip-bottom:focus:before,
1352 .tooltip-bottom:focus:after {
1353   -webkit-transform: translateY(12px);
1354   -moz-transform:    translateY(12px);
1355   transform:         translateY(12px);
1356 }
1357
1358 /* Right */
1359 .tooltip-right:before,
1360 .tooltip-right:after {
1361   bottom: 50%;
1362   left: 20%;
1363 }
1364
1365 .tooltip-right:before {
1366   margin-bottom: 0;
1367   margin-left: -12px;
1368   border-top-color: transparent;
1369   border-right-color: #000;
1370   border-right-color: hsla(0, 0%, 20%, 0.9);
1371 }
1372
1373 .tooltip-right:hover:before,
1374 .tooltip-right:hover:after,
1375 .tooltip-right:focus:before,
1376 .tooltip-right:focus:after {
1377   -webkit-transform: translateX(12px);
1378   -moz-transform:    translateX(12px);
1379   transform:         translateX(12px);
1380 }
1381
1382 /* Move directional arrows down a bit for left/right tooltips */
1383 .tooltip-left:before,
1384 .tooltip-right:before {
1385   top: 3px;
1386 }
1387
1388 /* Vertically center tooltip content for left/right tooltips */
1389 .tooltip-left:after,
1390 .tooltip-right:after {
1391   margin-left: 0;
1392   margin-bottom: -16px;
1393 }
1394 /* Extra small devices (portrait phones, less than 576px) */
1395 @media (max-width: 575.98px) {
1396   .page-title{
1397     padding: 18px;
1398   }
1399 }
1400
1401 /* Small devices (landscape phones, 576px and up) */
1402 @media (min-width: 576px) and (max-width: 767.98px) {
1403
1404 }
1405
1406 /* Medium devices (tablets, 768px and up) */
1407 @media (min-width: 768px) and (max-width: 991.98px) {
1408
1409 }
1410
1411 /* Large devices (desktops, 992px and up) */
1412 @media (min-width: 992px) and (max-width: 1199.98px) {
1413
1414 }
1415
1416 /* Extra large devices (large desktops, 1200px and up) */
1417 @media (min-width: 1200px) {
1418
1419 }
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441