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

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