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