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 .help-btn{
 967   border-right: solid 1px #ECEDF2;
 968 }
 969 .help-btn .nav-link{
 970   padding: 7px 8px 0 !important;
 971 }
 972 .help-btn i{
 973   font-size: 19px;
 974   color: #C3CDDB;
 975 }
 976 .help-btn a:hover i{
 977   color: #1B3E6F;
 978 }
 979 .header-button-save button{
 980   border-radius: 50px;
 981 }
 982 /*Page Title*/
 983 .page-title{
 984   padding: 20px 30px;
 985   background:#fff;
 986   border-left: solid 1px #FAFAFA;
 987   margin-bottom: 21px;
 988   -webkit-box-shadow: 0 4px 10px 0 #eef0f5;
 989   box-shadow: 0 4px 10px 0 #eef0f5;
 990   position: relative;
 991   z-index: 8;
 992   /* position: fixed;
 993   width: calc(100% - 50px); */
 994 }
 995 .page-title h2{
 996   font-size: 16px;
 997   font-weight: bold;
 998   padding-top: 1px;
 999 }
1000 .page-title h2 span{
1001   color: #C3CDDB;
1002   font-size: 14px;
1003 }
1004 /*Content*/
1005 .body-container{
1006   padding: 0 30px !important;
1007 }
1008 .body-container > .container{
1009   padding: 0;
1010 }
1011 .search-filter-col{
1012   padding-right: 0 !important;
1013   border-bottom: solid 1px #ECEDF2 !important;
1014 }
1015 /**Packages Filter**/
1016 .packagesFilter{
1017   margin-top: 12px;
1018   margin-bottom: 7px;
1019   z-index: 220 !important;
1020 }
1021 .packagesFilter .dropdown-toggle{
1022   height: 36px !important;
1023 }
1024 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
1025   border-color: transparent transparent #1B3E6F transparent;
1026 }
1027 .packagesFilter .dropdown-text{
1028   background: transparent;
1029   border: 0;
1030   box-shadow: none;
1031   text-indent: 14px;
1032   line-height: 30px;
1033   font-size: 12px;
1034 }
1035 .packagesFilter .dropdown-text::after{
1036   right: 12px;
1037   border: solid !important;
1038   border-width: 5px 4px 0 4px !important;
1039   border-color: #1B3E6F transparent transparent transparent !important;
1040 }
1041 .packagesFilter .dropdown-toggle:hover ~ .dropdown-text,
1042 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
1043   background-color: transparent;
1044   box-shadow: none;
1045   border-radius: 0;
1046 }
1047 .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
1048   background: #fff;
1049   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1050 }
1051 .packagesFilter .dropdown-text::after{
1052   top: 12px;
1053 }
1054 .packagesFilter .dropdown-content{
1055   padding: 6px 0;
1056   background: #fff;
1057   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1058   border: 0;
1059   border-top-left-radius: 0;
1060   border-top-right-radius: 0;
1061   border-bottom-left-radius: 2px;
1062   border-bottom-right-radius: 2px;
1063 }
1064 .packagesFilter .dropdown-content li:hover .custom-checkbox{
1065   cursor: pointer;
1066 }
1067 .packagesFilter .dropdown-content:hover,
1068 .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
1069   top: 30px;
1070 }
1071 .packagesFilter .form-control{
1072   padding: 12px 9px 12px 38px !important;
1073   border: 0 !important;
1074   border-bottom: solid 1px #D7E7F9 !important;
1075   background: url(../src/assets/img/icon-search.svg) 15px center no-repeat;
1076   background-size: 4%;
1077   border-radius: 0 !important;
1078   color: #1B3E6F;
1079   font-size: 13px;
1080 }
1081 .packagesFilter .form-control::placeholder{
1082   color: #BABBC3;
1083 }
1084 .packagesFilter .form-control:focus{
1085   box-shadow: none !important;
1086   border-bottom: solid 1px #1B3E6F !important;
1087 }
1088 .packagesFilter .custom-checkbox{
1089   margin-left: 8px;
1090 }
1091 .packagesFilter .custom-control-input{
1092   left: 10px;
1093 }
1094 .packagesFilter .custom-control-label{
1095   line-height: 28px !important;
1096   font-size: 13px !important;
1097   text-indent: 6px !important;
1098 }
1099 .fillteredTags{
1100   margin-left: 3px;
1101   padding: 3px 3px;
1102   background: #C3CDDB;
1103   color: #1B3E6F;
1104   font-weight: bold;
1105   border-radius: 4px;
1106 }
1107 /**Packages Sort**/
1108 .sort-packages{
1109   font-size: 12px;
1110   font-weight: bold;
1111   color: #C3CDDB;
1112 }
1113 .sort-packages .dropdown{
1114   width: 88px;
1115 }
1116 .sort-packages .dropdown-text{
1117   background: transparent;
1118   border: 0;
1119   box-shadow: none;
1120   color: #1B3E6F;
1121 }
1122 .sort-packages .dropdown-text::after{
1123   border-color: #1B3E6F transparent transparent transparent;
1124 }
1125 .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
1126   border-color: transparent transparent #1B3E6F transparent;
1127 }
1128 .sort-packages .dropdown-toggle:hover ~ .dropdown-text,
1129 .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
1130   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1131   background: #fff;
1132 }
1133 .sort-packages .dropdown-content:hover,
1134 .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
1135   top: 30px;
1136 }
1137 .sort-packages .dropdown-content{
1138   width: 88px;
1139   padding: 6px 0;
1140   background: #fff;
1141   border-radius: 2px;
1142   border: 0;
1143   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
1144 }
1145 .sort-packages .dropdown-content a{
1146   color: #1B3E6F;
1147   font-size: 12px;
1148 }
1149 .sort-packages .dropdown-content a:hover{
1150   background-color: #F4F9FE;
1151   text-decoration: unset;
1152 }
1153 /**Pagination**/
1154 .page-item .page-link,
1155 .page-item.disabled .page-link{
1156   background: transparent !important;
1157   border: 0;
1158   color: #1B3E6F !important;
1159   font-size: 14px;
1160 }
1161 .page-link:hover{
1162   color: #1B3E6F !important;
1163   background-color: #fff !important;
1164   border-radius: 100%;
1165   transition: 0.3s;
1166   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
1167 }
1168 .page-item.disabled{
1169   opacity: .3;
1170 }
1171 /**Packages Cards***/
1172 /***Package Info Card***/
1173 .packages-card .card{
1174   margin: 0;
1175   border-radius: 2px;
1176   border: 0;
1177   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
1178 }
1179 .packages-card .card:hover{
1180   box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17);
1181   transition: all 0.5s ease;
1182   cursor: pointer;
1183 }
1184 .packages-card .card:hover .card-title,
1185 .packages-card .card:hover .card-title span{
1186   color: #1273EB !important;
1187 }
1188 .packages-card .card-title{
1189   margin-bottom: 0 !important;
1190   font-size: 14px;
1191   font-weight: bold;
1192 }
1193 .packages-card .card-title .packageName{
1194   margin-bottom: 0;
1195   display: inline-block;
1196   width: auto;
1197   max-width: 64%;
1198   white-space: nowrap;
1199   overflow: hidden;
1200   text-overflow: ellipsis;
1201   font-size: 13px;
1202   vertical-align: bottom;
1203   color: #1B3E6F;
1204 }
1205 .packages-card .card-title:hover,
1206 .packages-card .card-title:hover .packageName{
1207   text-decoration: none;
1208   color: #1273EB;
1209 }
1210 .packages-card .card-body{
1211   padding-bottom: 0 !important;
1212 }
1213 .packages-card .card-footer .col{
1214   padding-left: 3px !important;
1215   text-align: left;
1216 }
1217
1218 /***Add Package Card***/
1219 .addPaackage-card{
1220   background: #F4F9FE !important;
1221   border: solid 1px #D7E7F9 !important;
1222 }
1223 .addPaackage-card:hover{
1224   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
1225 }
1226
1227 .addPaackage-card a:hover{
1228   text-decoration: unset;
1229 }
1230 .addPaackage-card .card-footer .col{
1231   padding: 0;
1232   text-align: right;
1233 }
1234 .addPaackage-card .card-footer .col:last-child{
1235   text-align: left;
1236 }
1237 .btn-create-package,
1238 .btn-import-package{
1239   width: auto;
1240 }
1241 .btn-create-package{
1242   margin-bottom: 6px !important;
1243 }
1244 .btn-import-package{
1245   margin-bottom: 15px !important;
1246 }
1247 .btn-create-package,
1248 .btn-create-package:hover{
1249   background-color: #1B3E6F;
1250   border-color: #1B3E6F;
1251   color: #fff;
1252 }
1253 .btn-import-package,
1254 .btn-import-package:hover{
1255   color: #1B3E6F;
1256 }
1257 /***Actions Menu***/
1258 .packages-card .dropdown{
1259   width: auto;
1260   float: right;
1261 }
1262 .packages-card .dropdown-text{
1263   background: transparent;
1264   border: 0;
1265   box-shadow: none;
1266   text-indent: 0;
1267   line-height: unset;
1268   border-bottom-left-radius: 0;
1269   border-bottom-right-radius: 0;
1270   opacity: .6;
1271 }
1272 .packages-card .dropdown-text::after{
1273   display: none;
1274 }
1275 .packages-card .dropdown-text img{
1276   padding: 9px 7px;
1277 }
1278 .packages-card .dropdown-content{
1279   right: 0;
1280   width: 120px;
1281   padding: 6px 0;
1282   border: 0;
1283   text-indent: 0;
1284   border-radius: 4px;
1285   border-top-right-radius: 0;
1286   background: #1B3E6F;
1287 }
1288 .packages-card .dropdown-content a{
1289   padding-left: 12px;
1290   color: #fff;
1291   font-size: 12px;
1292   /* background-position: 14px center;
1293   background-size: 10%;
1294   background-repeat: no-repeat; */
1295 }
1296 .packages-card .dropdown-content a i{
1297   margin-right: 4px;
1298 }
1299 .packages-card .dropdown-content a:hover{
1300   background-color: #172B4D;
1301   text-decoration: unset;
1302   color: #fff;
1303 }
1304 .packages-card .dropdown-content:hover,
1305 .packages-card .dropdown-toggle:focus ~ .dropdown-content{
1306   top: 22px;
1307 }
1308 .packages-card .dropdown-toggle:focus ~ .dropdown-text .icon-menuDots{
1309   color: #D0D7E4;
1310 }
1311 .packages-card .dropdown-toggle:hover ~ .dropdown-text{
1312   background: transparent;
1313   opacity: 1;
1314 }
1315 .packages-card .dropdown-toggle:focus ~ .dropdown-text{
1316   width: 27px;
1317   text-align: center;
1318   opacity: 1;
1319   background: #1B3E6F;
1320   box-shadow: none;
1321 }
1322
1323 .package-version::before{
1324   content: "|";
1325   margin-left: 8px;
1326   margin-right: 6px;
1327   vertical-align: text-bottom;
1328 }
1329
1330 /***Contributers***/
1331 ul.package-contributers{
1332   margin-bottom: 9px !important;
1333   padding-left: 0 !important;
1334 }
1335 .package-contributers li{
1336   list-style: none;
1337   display: inline-block;
1338 }
1339 .package-contributers li{
1340   margin-left: -5px;
1341 }
1342 .package-contributers li:first-child{
1343   margin-left: 0;
1344 }
1345 .package-contributers li:last-child{
1346   margin-left: 9px;
1347 }
1348 .package-modifier,
1349 .package-contributers button{
1350   height: 20px !important;
1351   padding: 0 !important;
1352   border-radius: 100%;
1353   border: 0 !important;
1354   /*Hover Effect*/
1355   -webkit-transition: box-shadow 0.2s ease;
1356   -moz-transition: box-shadow 0.2s ease;
1357   transition: box-shadow 0.2s ease;
1358   -webkit-backface-visibility: hidden;
1359   backface-visibility: hidden;
1360   display: inline-block;
1361   position: relative;
1362 }
1363 .package-modifier:before,
1364 .package-contributers button:before{
1365   -webkit-transition: all 0.2s ease;
1366   -moz-transition: all 0.2s ease;
1367   transition: all 0.2s ease;
1368   border-radius: 50%;
1369   bottom: 0;
1370   box-shadow: 0 0 0 2px #fff;
1371   content: "";
1372   left: 0;
1373   position: absolute;
1374   right: 0;
1375   top: 0;
1376 }
1377 .package-modifier:hover,
1378 .package-contributers button:hover{
1379   box-shadow: 0 0 0 2px #D7E7F9;
1380   text-decoration: none;
1381 }
1382 .package-modifier:hover:before,
1383 .package-contributers button:hover:before{
1384   -webkit-transform: scale(0.925);
1385   -moz-transform: scale(0.925);
1386   -ms-transform: scale(0.925);
1387   -o-transform: scale(0.925);
1388   transform: scale(0.925);
1389   box-shadow: 0 0 0 1px #D7E7F9;
1390   opacity: 0.5;
1391 }
1392 .package-modifier img,
1393 .package-contributers button img{
1394   width: 20px;
1395   height: 20px;
1396   object-fit: cover;
1397   vertical-align: top;
1398   border-radius: 100%;
1399 }
1400 .package-contributers a{
1401   font-size: 12px;
1402   color: #1273EB;
1403 }
1404 .package-contributers a:hover{
1405   text-decoration: unset;
1406 }
1407 /***Package Footer***/
1408 .packages-card .card-footer{
1409   padding: 0 !important;
1410   background: transparent !important;
1411   border-top-color: #F7F6F6 !important;
1412 }
1413 .packages-card .card-footer .col{
1414   text-align: center;
1415 }
1416 .packages-card .card-footer .col:first-child{
1417   border-right: solid 1px #F7F6F6;
1418 }
1419 .packages-card .card-footer .btn{
1420   padding: 10px 0 10px 0 !important;
1421   background-color: transparent !important;
1422   color: #1B3E6F !important;
1423   border: 0;
1424   font-size: 13px;
1425   text-align: left;
1426   opacity: .4;
1427 }
1428 .packages-card .card-footer .btn:hover{
1429   opacity: 1;
1430 }
1431 .packages-card .card-footer i{
1432   margin-right: 6px;
1433 }
1434 .icon-deployed-active,
1435 .icon-deploy-inactive{
1436   margin-right: 9px;
1437   display: inline;
1438   background-image: url(/assets/img/icon-deploy-active.svg);
1439   background-position: center center;
1440   background-repeat: no-repeat;
1441   vertical-align: baseline;
1442 }
1443 .icon-deploy-inactive{
1444   background-image: url(/assets/img/icon-deploy-inactive.svg);
1445 }
1446
1447
1448 /*CREATE NEW ACTION MODAL*/
1449 .createActionModal .modal-dialog{
1450   max-width: 85%;
1451 }
1452 .createActionModal .modal-header{
1453   padding-top: 21px !important;
1454   padding-bottom: 0 !important;
1455   border-bottom: 0;
1456 }
1457 .createActionModal .close{
1458   margin: 0 !important;
1459   padding: 6px 13px 10px !important;
1460   width: auto;
1461   opacity: 1 !important;
1462   border-radius: 100%;
1463 }
1464 .createActionModal .close:hover{
1465   background-color: #E0E8F2;
1466 }
1467 .createActionModal .icon-action-close{
1468   font-size: 14px;
1469   font-weight: bold;
1470 }
1471 .createActionModal .modal-body{
1472   padding-top: 0 !important;
1473   padding-bottom: 10px !important;
1474 }
1475 .createActionModal .modal-body .carousel-item{
1476   padding-left: 20px;
1477   padding-right: 10px;
1478 }
1479 @keyframes fadeInScale {
1480   0% {
1481     opacity: 0;
1482     -webkit-transform: scale(0) translateY(50%);
1483             transform: scale(0) translateY(50%);
1484   }
1485   90% {
1486     -webkit-transform: scale(1.05);
1487             transform: scale(1.05);
1488   }
1489   100% {
1490     opacity: 1;
1491     -webkit-transform: scale(1) translateY(0);
1492             transform: scale(1) translateY(0);
1493   }
1494 }
1495 .card.actionType{
1496   margin-bottom: 25px !important;
1497   padding: 220px 25px 50px;
1498   box-shadow: none;
1499   border-radius: 0;
1500   -webkit-transition: all 0.3s ease-in-out;
1501   transition: all 0.3s ease-in-out;
1502 }
1503 .card.actionType:hover{
1504   box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
1505   transition: 0.3s !important;
1506 }
1507 .createActionModal h3.mainHead{
1508   text-transform: uppercase;
1509   margin-bottom: 6px;
1510   font-size: 14px;
1511   font-weight: bold;
1512   text-align: center;
1513   color: #C1CDDD;
1514 }
1515 .createActionModal h1{
1516   margin-bottom: 21px;
1517   font-size: 22px;
1518   font-weight: bold;
1519   text-align: center;
1520 }
1521 .createActionModal .carousel-inner{
1522   height: 510px;
1523 }
1524 .createActionModal .skip-btn{
1525   float: unset;
1526   width: auto;
1527   color: #1273EB;
1528   font-weight: normal !important;
1529   font-size: 13px;
1530   border: solid 1px #F1F2FA;
1531   border-radius: 2px;
1532 }
1533 .createActionModal .skip-btn:hover{
1534   background: #1273EB;
1535   color: #fff;
1536   box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
1537 }
1538
1539 .actionType,
1540 .actionType:hover{
1541   text-align: center;
1542   line-height: 40px;
1543   background-position: center 40px;
1544   background-repeat: no-repeat;
1545   background-size: 144px 172px;
1546 }
1547 .actionType h3,
1548 .actionType p{
1549   margin: 0;
1550 }
1551 .actionType h3{
1552   text-transform: uppercase;
1553   font-size: 13px;
1554   font-weight: bold;
1555 }
1556 .actionType p{
1557   font-size: 13px !important;
1558   line-height: 24px;
1559 }
1560 .actionType .btn,
1561 .actionType:hover .btn{
1562   opacity: 0;
1563   position: absolute;
1564   bottom: 0;
1565   left: 30% !important;
1566   margin-bottom: 26px;
1567   width: 100px;
1568   height: 30px;
1569   background: #1B3E6F;
1570   color: #fff;
1571   font-size: 12px;
1572   font-weight: bold;
1573   border-radius: 15px !important;
1574   -webkit-transform: translateY(-20%);
1575           transform: translateY(-20%);
1576           -webkit-transition: all 0.3s ease-in-out;
1577   transition: all 0.3s ease-in-out;
1578 }
1579 .actionType:hover .btn{
1580   opacity: 1;
1581   -webkit-transform: translateY(0);
1582           transform: translateY(0);
1583 }
1584 .actionType.custom{
1585   background-image: url(/assets/img/icon-action-custom.svg);
1586 }
1587 .actionType.custom:hover{
1588   cursor: pointer;
1589   background-image: url(/assets/img/icon-action-custom-hover.svg);
1590 }
1591 .actionType.default{
1592   background-image: url(/assets/img/icon-action-default.svg);
1593 }
1594 .actionType.default:hover{
1595   cursor: pointer;
1596   background-image: url(/assets/img/icon-action-default-hover.svg);
1597 }
1598 .actionType.recent{
1599   background-image: url(/assets/img/icon-action-recent.svg);
1600 }
1601 .actionType.recent:hover{
1602   cursor: pointer;
1603   background-image: url(/assets/img/icon-action-recent-hover.svg);
1604 }
1605 .actionType.import{
1606   background-image: url(/assets/img/icon-action-import.svg);
1607 }
1608 .actionType.import:hover{
1609   cursor: pointer;
1610   background-image: url(/assets/img/icon-action-import-hover.svg);
1611 }
1612 .createActionModal .carousel-indicators{
1613   margin: 0;
1614 }
1615 .createActionModal .carousel-indicators li{
1616   margin: 0;
1617   padding: 0;
1618   text-indent: 0;
1619   border: 0;
1620 }
1621 .createActionModal .back{
1622   position: fixed !important;
1623   top: 83px;
1624   width: auto;
1625   padding:0 !important;
1626 }
1627
1628 .actionFormWrapper{
1629   width: 60%;
1630   margin: 0 auto;
1631 }
1632 .createActionModal .form-control.customAction{
1633   width: 55%;
1634   margin: 70px auto;
1635   padding-left: 0;
1636   border-radius: 0;
1637   border: 0;
1638   border-bottom: solid 1px #E0E8F2;
1639   color: #1B3E6F !important;
1640   font-size: 14px;
1641 }
1642 .createActionModal .form-control:focus{
1643   border-bottom: solid 1px #1B3E6F;
1644   background: transparent !important;
1645   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1646   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1647   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
1648   text-shadow: none;
1649 }
1650 .createActionModal .form-control::placeholder{
1651   color: #C3CDDB;
1652
1653 }
1654 .createActionModal .submit,
1655 .createActionModal .submit:hover{
1656   float: unset;
1657   width: 100px;
1658   height: 30px;
1659   background: #1B3E6F;
1660   color: #fff;
1661   font-size: 12px;
1662   font-weight: bold;
1663   border-radius: 15px !important;
1664 }
1665 .actionlabel{
1666   margin-right: 2px;
1667   color: #C3CDDB;
1668   font-size: 11px;
1669   font-weight: bold;
1670 }
1671 .form-control.searchInput,
1672 .form-control.searchInput:focus{
1673   float: right;
1674   width: 250px !important;
1675   height: 30px !important;
1676   padding-left: 32px !important;
1677   border: solid 1px #E0E8F2 !important;
1678   border-radius: 2px !important;
1679   background: url(../src/assets/img/icon-search-light.svg) 9px center no-repeat !important;
1680   font-size: 13px !important;
1681   color: #1B3E6F;
1682 }
1683 .actionsListScroll{
1684   height: 228px;
1685   max-height: 228px;
1686   overflow: auto;
1687 }
1688 .createActionModal .actionName{
1689   margin-bottom: 15px;
1690   padding: 9px 18px;
1691   box-shadow: 0 2px 6px rgba(47,83,151,0.15);
1692 }
1693 .createActionModal p.selectedActions{
1694   margin-top: 20px;
1695   margin-bottom: 10px;
1696   color: #8D9FB7;
1697   font-size: 13px;
1698 }
1699 .createActionModal .sort-packages .dropdown{
1700   width: 60%;
1701 }
1702 .createActionModal .sort-packages .dropdown-text::after {
1703   right: 6px;
1704 }
1705 .createActionModal .sort-packages .dropdown-content{
1706   width: 100%;
1707 }
1708 .createActionModal .folder-upload-text button{
1709   float: unset;
1710 }
1711 /* Border Fade */
1712 .border-fade {
1713   display: inline-block;
1714   transition-duration: 0.3s;
1715   transition-property: box-shadow;
1716   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1717   transform: translateZ(0);
1718   box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
1719   /* Hack to improve aliasing on mobile/tablet devices */
1720 }
1721 .border-fade:hover {
1722   box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
1723   /* Hack to improve aliasing on mobile/tablet devices */
1724 }
1725 /*Content*/
1726
1727 /**Title Action Buttons**/
1728 .page-title-actions li{
1729   display: inline-block;
1730   text-align: center;
1731 }
1732 .title-action{
1733   -webkit-transition: box-shadow 0.2s ease;
1734   -moz-transition: box-shadow 0.2s ease;
1735   transition: box-shadow 0.2s ease;
1736   -webkit-backface-visibility: hidden;
1737   backface-visibility: hidden;
1738   border-radius: 50%;
1739   color: #6a75eb;
1740   display: inline-block;
1741   font-size: 0.889em;
1742   height: 4em;
1743   margin: 0 1em 1em;
1744   position: relative;
1745   text-align: center;
1746   text-transform: lowercase;
1747   width: 4em;
1748   line-height: 4em;
1749 }
1750 .title-action:before{
1751   -webkit-transition: all 0.2s ease;
1752   -moz-transition: all 0.2s ease;
1753   transition: all 0.2s ease;
1754   border-radius: 50%;
1755   bottom: 0;
1756   box-shadow: 0 0 0 1px #000;
1757   content: "";
1758   left: 0;
1759   position: absolute;
1760   right: 0;
1761   top: 0;
1762 }
1763 .title-action:hover{
1764   box-shadow: 0 0 0 7px #07819b;
1765   text-decoration: none;
1766 }
1767 .title-action:hover:before{
1768   -webkit-transform: scale(0.925);
1769   -moz-transform: scale(0.925);
1770   -ms-transform: scale(0.925);
1771   -o-transform: scale(0.925);
1772   transform: scale(0.925);
1773   box-shadow: 0 0 0 1px #07819b;
1774   opacity: 0.5;
1775 }
1776
1777 /*Animation Button*/
1778 /**Float**/
1779 .float {
1780   display: inline-block;
1781   transition-duration: 0.3s;
1782   transition-property: transform;
1783   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1784   transform: translateZ(0);
1785   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
1786 }
1787 .float:hover {
1788   transform: translateY(-5px);
1789 }
1790
1791 /*TOOLTIP*/
1792 /* Base styles for the element that has a tooltip */
1793 [data-tooltip],
1794 .tooltip {
1795   position: relative;
1796   cursor: pointer;
1797   text-align: center;
1798 }
1799
1800 /* Base styles for the entire tooltip */
1801 [data-tooltip]:before,
1802 [data-tooltip]:after,
1803 .tooltip:before,
1804 .tooltip:after {
1805   position: absolute;
1806   visibility: hidden;
1807   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1808   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
1809   opacity: 0;
1810   -webkit-transition:
1811           opacity 0.2s ease-in-out,
1812           visibility 0.2s ease-in-out,
1813           -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1814   -moz-transition:
1815           opacity 0.2s ease-in-out,
1816           visibility 0.2s ease-in-out,
1817           -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1818   transition:
1819           opacity 0.2s ease-in-out,
1820           visibility 0.2s ease-in-out,
1821           transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
1822   -webkit-transform: translate3d(0, 0, 0);
1823   -moz-transform:    translate3d(0, 0, 0);
1824   transform:         translate3d(0, 0, 0);
1825   pointer-events: none;
1826 }
1827
1828 /* Show the entire tooltip on hover and focus */
1829 [data-tooltip]:hover:before,
1830 [data-tooltip]:hover:after,
1831 [data-tooltip]:focus:before,
1832 [data-tooltip]:focus:after,
1833 .tooltip:hover:before,
1834 .tooltip:hover:after,
1835 .tooltip:focus:before,
1836 .tooltip:focus:after {
1837   visibility: visible;
1838   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
1839   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
1840   opacity: 1;
1841 }
1842
1843 /* Base styles for the tooltip's directional arrow */
1844 .tooltip:before,
1845 [data-tooltip]:before {
1846   z-index: 1001;
1847   border: 6px solid transparent;
1848   background: transparent;
1849   content: "";
1850 }
1851
1852 /* Base styles for the tooltip's content area */
1853 .tooltip:after,
1854 [data-tooltip]:after {
1855   z-index: 1000;
1856   padding: 8px 20px !important;
1857   width: auto;
1858   background-color: #fff !important;
1859   color: #1B3E6F;
1860   content: attr(data-tooltip);
1861   font-size: 12px;
1862   line-height: 1.2;
1863   border-radius: 3px;
1864 }
1865
1866 /* Directions */
1867
1868 /* Top (default) */
1869 [data-tooltip]:before,
1870 [data-tooltip]:after,
1871 .tooltip:before,
1872 .tooltip:after,
1873 .tooltip-top:before,
1874 .tooltip-top:after {
1875   bottom: 100%;
1876   left: 50%;
1877 }
1878
1879 [data-tooltip]:before,
1880 .tooltip:before,
1881 .tooltip-top:before {
1882   margin-left: 0;
1883   margin-bottom: -12px;
1884   border-bottom-color: #DEE8F3;
1885   border-bottom-color: rgba(222, 232, 243, 1.0);
1886 }
1887
1888 /* Horizontally align top/bottom tooltips */
1889 [data-tooltip]:after,
1890 .tooltip:after,
1891 .tooltip-top:after {
1892   margin-left: -50%;
1893 }
1894
1895 [data-tooltip]:hover:before,
1896 [data-tooltip]:hover:after,
1897 [data-tooltip]:focus:before,
1898 [data-tooltip]:focus:after,
1899 .tooltip:hover:before,
1900 .tooltip:hover:after,
1901 .tooltip:focus:before,
1902 .tooltip:focus:after,
1903 .tooltip-top:hover:before,
1904 .tooltip-top:hover:after,
1905 .tooltip-top:focus:before,
1906 .tooltip-top:focus:after {
1907   -webkit-transform: translateY(-12px);
1908   -moz-transform:    translateY(-12px);
1909   transform:         translateY(-12px);
1910 }
1911
1912 /* Left */
1913 .tooltip-left:before,
1914 .tooltip-left:after {
1915   right: 100%;
1916   bottom: 50%;
1917   left: auto;
1918 }
1919
1920 .tooltip-left:before {
1921   margin-left: 0;
1922   margin-right: -12px;
1923   margin-bottom: 0;
1924   border-top-color: transparent;
1925   border-left-color: #fff;
1926   /* border-left-color: hsla(0, 0%, 20%, 0.9); */
1927 }
1928
1929 .tooltip-left:hover:before,
1930 .tooltip-left:hover:after,
1931 .tooltip-left:focus:before,
1932 .tooltip-left:focus:after {
1933   -webkit-transform: translateX(-12px);
1934   -moz-transform:    translateX(-12px);
1935   transform:         translateX(-12px);
1936 }
1937
1938 /* Bottom */
1939 .tooltip-bottom:before,
1940 .tooltip-bottom:after {
1941   top: 100%;
1942   bottom: auto;
1943   left: 20%;
1944 }
1945
1946 .tooltip-bottom:before {
1947   margin-top: -12px;
1948   margin-bottom: 0;
1949   border-top-color: transparent;
1950   border-bottom-color: #DEE8F3;
1951   border-bottom-color: rgba(222, 232, 243, 1.0);
1952 }
1953
1954 .tooltip-bottom:hover:before,
1955 .tooltip-bottom:hover:after,
1956 .tooltip-bottom:focus:before,
1957 .tooltip-bottom:focus:after {
1958   -webkit-transform: translateY(12px);
1959   -moz-transform:    translateY(12px);
1960   transform:         translateY(12px);
1961 }
1962
1963 /* Right */
1964 .tooltip-right:before,
1965 .tooltip-right:after {
1966   bottom: 50%;
1967   left: 20%;
1968 }
1969
1970 .tooltip-right:before {
1971   margin-bottom: 0;
1972   margin-left: -12px;
1973   border-top-color: transparent;
1974   border-right-color: #fff;
1975   /* border-right-color: hsla(0, 0%, 20%, 0.9); */
1976 }
1977
1978 .tooltip-right:hover:before,
1979 .tooltip-right:hover:after,
1980 .tooltip-right:focus:before,
1981 .tooltip-right:focus:after {
1982   -webkit-transform: translateX(12px);
1983   -moz-transform:    translateX(12px);
1984   transform:         translateX(12px);
1985 }
1986
1987 /* Move directional arrows down a bit for left/right tooltips */
1988 .tooltip-left:before,
1989 .tooltip-right:before {
1990   top: 3px;
1991 }
1992
1993 /* Vertically center tooltip content for left/right tooltips */
1994 .tooltip-left:after,
1995 .tooltip-right:after {
1996   margin-left: 0;
1997   margin-bottom: -16px;
1998 }
1999
2000 /*TooltipModule - Shady*/
2001 .tooltip.in {
2002   opacity: 1.0 !important;
2003   filter:alpha(opacity=100) !important;
2004 }
2005 .tooltip:before,
2006 .tooltip:after{
2007   width: 100% !important;
2008 }
2009 .tooltip .tooltip-inner{
2010   width: auto !important;
2011   max-width: 280px !important;
2012   text-align: left!important;
2013   /* color:#1B3E6F;
2014   background-color: #fff !important; */
2015   color:#1B3E6F;
2016   background-color: #C3CDDB !important;
2017   border: solid 1px #C3CDDB;
2018   border-radius: 3px !important;
2019   border-top-left-radius: 0 !important;
2020   font-size: 12px;
2021   opacity: 1.0 !important;
2022 }
2023
2024 .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
2025   border-top-color: #C3CDDB !important;
2026 }
2027 .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
2028   border-right-color: #C3CDDB !important;
2029 }
2030 .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
2031   border-bottom-color: #C3CDDB !important;
2032 }
2033 .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
2034   border-left-color: #C3CDDB !important;
2035 }
2036
2037 .btn{
2038 padding-right: 20px !important;
2039 padding-left: 20px !important;
2040
2041 }
2042 .btn.border-radius{
2043   border-radius: 20px !important;
2044 }
2045 .btn-primary{
2046     background-color: #1273EB !important;
2047     border-color: #1273EB !important;
2048 }
2049 .btn-primary:hover {
2050   background-color: #0069d9 !important;
2051   border-color: #0062cc !important;
2052 }
2053 .btn + .btn{
2054   margin-left: 10px;
2055 }
2056 .package-view-button button{
2057   width: 150px;
2058   float: right;
2059 }
2060 .package-view-button{
2061   margin-top: 6px;
2062 }
2063 .package-view-button .btn{
2064   padding: 6px 21px;
2065   border-radius: 18px;
2066   font-size: 13px !important;
2067 }
2068 .package-view-button .btn:hover{
2069   opacity: .9;
2070 }
2071 .package-view-button .btn-primary{
2072   background-color: #1B3E6F !important;
2073   border-color: #1B3E6F !important;
2074 }
2075 .package-view-button .btn-enrich,
2076 .package-view-button .btn-enrich:focus,
2077 .modal-footer .btn-primary.btn-enrich{
2078   background: #EB9A34 !important;
2079   border-color: #EB9A34 !important;
2080   color: #fff;
2081   outline: none !important;
2082 }
2083 .package-view-button .btn-deploy{
2084   background-color: #1273EB !important;
2085   border-color: #1273EB !important;
2086   color: #fff !important;
2087   /* background-color: #fff !important;
2088   border-color: #D0DFF1 !important;
2089   color: #1B3E6F !important; */
2090 }
2091 .package-view-title {
2092   font-size: 11px;
2093   color: #1B3E6F;
2094   font-weight: bold;
2095   margin-bottom: 5px;
2096   margin-top: 20px;
2097 }
2098 .package-view-title+p{
2099   font-size: 11px;
2100   margin-bottom: 0px;
2101 }
2102 .package-view-title+ul{
2103   margin-bottom: 0px;
2104 }
2105 .package-view-button .btn-outline-secondary i{
2106   font-size: 18px;
2107   margin-right: 4px;
2108 }
2109 .card.creat-card{
2110   margin: 0;
2111   border-radius: 2px;
2112   border: 0;
2113   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2114 }
2115 .card.creat-card .single-line{
2116   padding: 15px 25px 15px;
2117 }
2118 .card.creat-card .single-line-model{
2119   padding: 0px;
2120 }
2121 .card.creat-card .editor-container{
2122   padding: 25px;
2123 }
2124 .single-line label{
2125   margin-bottom: 0px;
2126 }
2127 .single-line-model label{
2128   margin-bottom: 0px;
2129   border-bottom: 1px solid #FAFAFA;
2130   padding: 15px 25px;
2131 }
2132 .single-line-model .label-name{
2133   width: 325px;
2134 }
2135 .single-line-model .label-input{
2136   width: calc(100% - 325px);
2137 }
2138 .single-line-model input{
2139   border-bottom: 1px solid #FAFAFA !important;
2140   padding: 15px 25px 15px 0px;
2141 }
2142 .customKeyTitle span{
2143   color: #C3CDDB !important;
2144   font-size: 11px;
2145 }
2146 .single-line-model input:focus,
2147 .single-line-custom-key input:focus{
2148   border-bottom-color: #1B3E6F !important;
2149   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2150   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2151   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6);
2152 }
2153 .model-note-container{
2154   width: calc(100% - 325px);
2155   padding: 0px 25px 0px 0px ;
2156   margin-left: 325px;
2157 }
2158 .error-message{
2159   font-size:11px ;
2160   color: #FF6469;
2161 }
2162 .tages-container{
2163   margin-bottom: 25px;
2164 }
2165 .tag-notes{
2166   font-size: 11px;
2167   color: #C3CDDB;
2168   padding: 5px 25px 5px 0px;
2169   margin-bottom: 5px;
2170 }
2171   .single-tage{
2172     background: #E0E8F2;
2173     font-size: 13px;
2174     color: #1B3E6F;
2175     border-radius: 50px;
2176     padding: 5px 10px;
2177     margin-right:10px;
2178     margin-bottom: 10px;
2179   }
2180   .single-tage a{
2181     color: #1B3E6F;
2182     font-size: 14px;
2183   }
2184   .label-name{
2185     width: 300px;
2186     display: inline-block;
2187     margin-bottom: 0px;
2188     font-size: 13px;
2189     font-weight: bold;
2190   }
2191   .label-name span{
2192     color:#FF6469 ;
2193   }
2194   .delete-key{
2195     color: #FF6469;
2196     font-size: 10px;
2197     background: #FFE6E7;
2198     border: 1px solid #FFC9CB;
2199     padding: 3px 10px 2px;
2200     margin-left: 10px;
2201     border-radius: 5px;
2202   }
2203   .delete-key:hover{
2204     color: #C94448;
2205     background: #FFC9CB;
2206     border: 1px solid #FF6469;
2207     text-decoration: none;
2208   }
2209   .label-input{
2210     width: calc(100% - 300px);
2211     display: inline-block;
2212   }
2213 .form-check-input{
2214   margin-left: 0px !important;
2215   margin-top: 2px !important;
2216 }
2217 .form-check-input+span{
2218   margin-left: 20px;
2219   margin-right: 50px;
2220   font-size: 13px;
2221   display: flex;
2222 }
2223 .form-check-input+span i{
2224   margin-right: 5px;
2225   margin-left: 5px;
2226 }
2227
2228 .label-input input{
2229   margin-bottom: 0px;
2230   outline: 0px;
2231   border: 0px;
2232   font-size: 14px;
2233   width: 100%;
2234   color: #1B3E6F;
2235   transition: all 250ms ease-out;
2236 }
2237 .label-input input:focus{
2238   border-bottom: solid 1px #1B3E6F;
2239   background: transparent !important;
2240   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2241   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2242   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8);
2243   text-shadow: none;
2244 }
2245 .label-input input:disabled{
2246   background: #fff;
2247   opacity: .5;
2248 }
2249 .label-input input[type=radio]{
2250   width: auto;
2251 }
2252 .label-input input[type=radio]+span{
2253   font-size: 12px;
2254   display: block;
2255   margin-right: 100px;
2256 }
2257 .single-line select{
2258   margin-bottom: 0px;
2259   padding-left: 10px;
2260   padding-right: 50px;
2261   outline: 0px;
2262   border: solid 1px #EEF4F9;
2263   background: none;
2264   background: url(/assets/img/arrow.svg) 90% center #F4F9FE no-repeat;
2265   background-size: 10px;
2266   width: auto;
2267   -webkit-appearance: none;
2268   -moz-appearance: none;
2269   text-indent: 0;
2270   text-overflow: '';
2271   font-size: 13px;
2272   color: #1B3E6F;
2273 }
2274 .single-line select:focus{
2275   box-shadow: 0 0 0 0;
2276 }
2277 .single-line select option:first-child{
2278   color: #C3CDDB;
2279 }
2280 .single-line-model input::placeholder{
2281   font-size: 14px;
2282   color: #C3CDDB;
2283 }
2284 .single-line-model.error{
2285   color:#FF6469;
2286 }
2287 .single-line-model.error input,
2288 .label-input input.ng-invalid{
2289   box-shadow: none;
2290   color:#FF6469;
2291   border-bottom: 1px solid #FF6469 !important;
2292 }
2293 .single-line .custom-key{
2294   background: none;
2295   border: 0px;
2296   color:#1273EB ;
2297   font-size: 15px;
2298 }
2299 .single-line .custom-key:focus{
2300   outline: none;
2301 }
2302 .creat-container{
2303   padding:70px 100px 70px 70px;
2304   position: relative;
2305 }
2306 .single-custom-key{
2307   width: 100%;
2308   margin-bottom: 21px;
2309 }
2310 .single-line-custom-key{
2311   width: 45%;
2312   display: inline-block;
2313 }
2314 .single-line-custom-key-delete{
2315   width: 10%;
2316   display: inline-block;
2317   border-bottom: 1px solid #FAFAFA;
2318   padding: 13px 12px 14px;
2319 }
2320 .single-line-custom-key label{
2321   width: 150px;
2322   margin-bottom: 0px;
2323   border-bottom: 1px solid #FAFAFA;
2324   padding: 15px 25px;
2325 }
2326 .single-line-custom-key input{
2327   border-bottom: 1px solid #FAFAFA !important;
2328   padding: 15px 25px 15px 0;
2329 }
2330 .single-line-custom-key input::placeholder{
2331   font-size: 14px;
2332   color: #C3CDDB;
2333 }
2334 .single-line-custom-key .label-input{
2335   width: calc(100% - 150px);
2336 }
2337 .single-line-custom-key .label-name span{
2338   color: #C3CDDB !important;
2339   margin-right: 20px;
2340 }
2341 .custom-key-delete{
2342   background: transparent;
2343   color: #FF6469;
2344   outline: 0px;
2345   border: 0px;
2346 }
2347 .custom-key-delete:focus{
2348   outline: 0px;
2349   border: 0px;
2350 }
2351 hr{
2352   margin-top: 0rem !important;
2353   margin-bottom: 0rem !important;
2354   border-top: 1px solid #efefef !important;
2355 }
2356 .creat-action-container{
2357   position: fixed;
2358   right: 0px;
2359   top: 104px;
2360   width: 130px;
2361   text-align: center;
2362 }
2363 .action-button{
2364   display: inline-block;
2365   width: 70px;
2366   margin-bottom: 12px;
2367   color: #BABBC3 !important;
2368   font-size: 10px;
2369   font-weight: bold;
2370   background: transparent;
2371   border: 0;
2372   padding: 0;
2373 }
2374 .action-button:disabled,
2375 .action-button:disabled:hover{
2376   cursor: unset;
2377   opacity: .5 !important;
2378 }
2379 .action-button:hover{
2380   text-decoration: none;
2381   cursor: pointer;
2382 }
2383 .action-button i{
2384   background: #fff;
2385   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2386   width: 40px;
2387   height: 40px;
2388   text-align: center;
2389   line-height: 40px;
2390   border-radius: 40px;
2391   color: #1B3E6F;
2392   font-size: 17px;
2393   display: inline-block;
2394 }
2395 .action-button i:hover{
2396   background: #dee2e6;
2397 }
2398 .action-button i.icon-save-sm{
2399   background: #1273EB;
2400   color: #fff;
2401   font-size: 11px;
2402 }
2403 .action-button i.icon-discard-sm{
2404   font-size: 11px;
2405   color: #C3CDDB;
2406 }
2407 .action-button.save{
2408   color: #1273EB !important;
2409 }
2410 .action-button.save:hover{
2411   opacity: .9;
2412 }
2413 .action-button.delete i{
2414   color: #BABBC3;
2415 }
2416 .action-button.delete:hover,
2417 .action-button.delete:hover .icon-delete-sm{
2418   color: #FF6469 !important;
2419 }
2420 .mode-icon{
2421   font-size: 20px;
2422 }
2423
2424 /*MODAL*/
2425 .modal-dialog{
2426   margin-top: 60px !important;
2427 }
2428 .modal{
2429   z-index: 11000000 !important;
2430   background: rgba(27, 62, 111, 0.10) !important;
2431 }
2432 .modal-content{
2433   border-radius: 2px !important;
2434   border: 0 !important;
2435   box-shadow: 0 2px 6px rgba(47, 83, 151, .10);;
2436 }
2437 .modal-title{
2438   font-size: 14px !important;
2439 }
2440 .modal-body{
2441   padding: 1.5rem 1.5rem 1rem !important;
2442 }
2443 .enrichModal .modal-dialog{
2444   max-width: 60% !important;
2445 }
2446 .modal-body p{
2447   font-size: 14px;
2448 }
2449 .modal-body p span{
2450   color: #FF6469;
2451 }
2452 .modal-header{
2453   border-bottom-color: #ECEDF2 !important;
2454   padding: .7rem 1.5rem !important;
2455 }
2456 .modal-footer{
2457   padding-top: 0 !important;
2458   border-top: 0 !important;
2459 }
2460 .modal-footer .btn{
2461   padding: 8px 15px;
2462   font-weight: bold;
2463   font-size: 12px;
2464   border: 0 !important;
2465 }
2466 .modal-footer .btn-primary{
2467   background-color: #1B3E6F !important;
2468 }
2469 .modal-footer .btn-secondary,
2470 .modal-footer .btn-secondary:hover{
2471   background-color: transparent;
2472   color: #1273EB;
2473   opacity: .8;
2474 }
2475 .modal-footer .btn-secondary:hover{
2476   opacity: 1;
2477 }
2478 .modal-footer .btn-secondary:active{
2479   background-color: #E7F1FC !important;
2480   color: #1B3E6F !important;
2481 }
2482 .btn-modal-remove-file:hover{
2483   cursor: pointer;
2484 }
2485 .action-button span{
2486   width: 100%;
2487   display: inline-block;
2488   margin-top: 5px;
2489 }
2490 .creat-action-container hr{
2491   margin: 0 46px;
2492   padding-bottom: 18px;
2493 }
2494 .btn-link:hover, .btn-link:focus{
2495   text-decoration: none !important;
2496 }
2497 .btn-link::before{
2498   content: "\f107";
2499   font-family:'FontAwesome';
2500   position: relative;
2501   margin-right: 20px;
2502 }
2503 .btn-link.collapsed::before{
2504   content: "\f105";
2505   font-family:'FontAwesome';
2506   position: relative;
2507   margin-right: 25px;
2508 }
2509 .btn-link i{
2510   margin-right: 10px;
2511 }
2512 .ngx-file-drop__content{
2513   background: #F4F9FE;
2514   padding: 20px;
2515   height: auto !important;
2516   display: inline-block !important;
2517   width: 100%;
2518 }
2519 .ngx-file-drop__drop-zone{
2520   border: 1px dashed #D7E7F9 !important;
2521   border-radius: 0px !important;
2522   height: auto !important;
2523 }
2524 .folder-upload{
2525   width: 100%;
2526   margin: 15px auto 18px;
2527   display: inline-block;
2528   text-align: center;
2529 }
2530 .btn-group-sm>.btn, .btn-sm{
2531   font-size: 12px;
2532 }
2533 .create-title{
2534   margin-bottom: 0;
2535   font-size: 14px;
2536   font-weight: bold;
2537   /* text-transform: uppercase; */
2538   line-height: 32px;
2539 }
2540 .folder-upload-text{
2541   margin-top: 10px;
2542   width: 100%;
2543   display: inline-block;
2544   text-align: center;
2545   color:#242424 ;
2546   font-size: 14px;
2547 }
2548 .folder-upload-text button{
2549   margin-left: 10px;
2550   font-size: 12px;
2551 }
2552 .folder-upload-type{
2553   color:#A4B2C6 ;
2554   font-size: 10px;
2555   font-weight: bold;
2556   width: 100%;
2557   display: inline-block;
2558   text-align: center;
2559 }
2560 .upload-table{
2561   margin: 15px 0 0;
2562 }
2563 .upload-table tr{
2564   border: dashed 1px #D7E7F9;
2565 }
2566 .upload-table tr th{
2567   border-bottom: solid 1px #F4F9FE !important;
2568 }
2569 .upload-table .table thead th{
2570   padding: 6px 9px;
2571   border-top: 0px !important;
2572   font-weight: normal;
2573   font-size: 13px;
2574 }
2575 .upload-table .table thead th:first-child{
2576   width: 24px;
2577   padding-right: 0;
2578 }
2579 .upload-table tr:last-child th{
2580   border-bottom: 0 !important;
2581 }
2582 .upload-table .table{
2583   margin-bottom: 0px !important;
2584 }
2585 .nav-tabs .nav-link{
2586   position: relative;
2587 }
2588 .nav-tabs .nav-link.tab-done{
2589   padding-left: 40px !important;
2590 }
2591 .nav-tabs .nav-link.tab-done::after{
2592   content: "\f058";
2593   position: absolute;
2594   font-family: 'FontAwesome';
2595   left: 17px;
2596   font-size: 16px;
2597   top: 11px;
2598   color: #66BB00;
2599 }
2600 .authentication-container-all{
2601   background: #F4F9FE;
2602   border:1px solid #D0DFF1 ;
2603   flex: 1;
2604   width: 100%;
2605 }
2606 .authentication-header{
2607   width: 100%;
2608   background: #fff;
2609   font-size: 12px;
2610   color: #C3CDDB;
2611   font-weight: bold;
2612   padding: 10px 20px ;
2613 }
2614 .authentication-search{
2615   width: 100%;
2616   background: #fff;
2617   font-size: 12px;
2618   color: #C3CDDB;
2619   font-weight: bold;
2620   position: relative;
2621 }
2622 .authentication-search::after{
2623   content: "\f002";
2624     font-family: 'FontAwesome';
2625     position: absolute;
2626     left: 20px;
2627     top: 11px;
2628 }
2629 .authentication-search input{
2630   width: 100%;
2631   background: #fff;
2632   font-size: 12px;
2633   color: #C3CDDB;
2634   font-weight: bold;
2635   padding: 10px 20px 10px 35px;
2636   border: 0px;
2637   border-top: 1px solid #D7E7F9;
2638 }
2639 .authentication-search input::placeholder{
2640   color: #D0D7E4;
2641   font-size: 10px;
2642   font-weight:100;
2643 }
2644 .authentication-accordion{
2645   width: 100%;
2646   padding: 20px;
2647   max-height: 300px;
2648   overflow: auto;
2649 }
2650 .authentication-accordion .card{
2651   border-radius: 0px !important;
2652   margin-bottom: 10px !important;
2653 }
2654 .authentication-accordion .card-header{
2655   padding: 0px !important;
2656   background: #fff !important;
2657   border-radius: 0px !important;
2658   font-size: 18px;
2659   font-weight: bold;
2660 }
2661 .authentication-accordion .card-header .btn-link{
2662   color: #1B3E6F;
2663   width: 100%;
2664   text-align: left;
2665   padding: 9px 0px !important;
2666   font-size: 13px;
2667   font-weight: bold;
2668 }
2669 .authentication-accordion .custom-control{
2670   display: inline-block;
2671 }
2672 .authentication-accordion .btn-link::before{
2673   margin-right: 10px;
2674 }
2675 .authentication-accordion .btn-link.collapsed::before{
2676   margin-right: 14px;
2677 }
2678 .template-mapping-accordion{
2679   width: 100%;
2680 }
2681 .templateNote{
2682   font-size: 12px;
2683   color: #C1CDDD;
2684 }
2685 .card-header .btn.regularTitle{
2686   padding-left: 0 !important;
2687   padding-right: 0 !important;
2688   color: #1B3E6F;
2689   font-size: 13px;
2690   font-weight: bold;
2691 }
2692 .template-mapping-accordion .accordian-title{
2693   color: #C3CDDB !important;
2694   font-size: 12px !important;
2695   font-weight: normal !important;
2696 }
2697 .card{
2698   border-radius: 2px;
2699   border: 0;
2700   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2701   border: 0px !important;
2702 }
2703 .card-header{
2704   padding: 0px 25px !important;
2705   background: #F4F9FE !important;
2706   border-radius: 0px !important;
2707   border-bottom: 1px solid #ECEDF2 !important;
2708 }
2709 .template-mapping-accordion .card-body{
2710   padding: 20px 26px 0 !important;
2711   font-size: 14px;
2712 }
2713 .card-header .btn-link{
2714   color: #1B3E6F;
2715   width: 100%;
2716   text-align: left;
2717   padding: 9px 0px !important;
2718   font-size: 13px;
2719   font-weight: bold;
2720 }
2721 .accordion .card{
2722   margin-bottom: 0px !important;
2723   border-top: 1px solid #ECEDF2 !important;
2724 }
2725 .accordion > .card > .card-header{
2726   padding: 0 !important;
2727 }
2728 .template-mapping-accordion .card{
2729   margin-bottom: 25px !important;
2730 }
2731 .custom-control{
2732   display: inline-block;
2733 }
2734 .btn-link::before{
2735   margin-right: 10px;
2736 }
2737 .btn-link.collapsed::before{
2738   margin-right: 14px;
2739 }
2740 .drap-drop-action{
2741   padding: 12px 20px 9px 20px;
2742   color: #C3CDDB;
2743   cursor:move;
2744   font-size: 15px;
2745 }
2746 .modal-title {
2747   font-size: 13px;
2748   font-weight: bold;
2749 }
2750 .select-type{
2751   background: #F4F9FE;
2752   border: 1px solid #D7E7F9;
2753   padding: 10px;
2754   text-align: center;
2755   color: #1273EB;
2756   font-size: 15px;
2757   width: 100%;
2758   position: relative;
2759 }
2760 .select-type:hover, .select-type.active{
2761   background: #1B3E6F;
2762   border: 1px solid #D7E7F9;
2763   color: #fff;
2764   text-decoration: none;
2765 }
2766 .select-type-icon{
2767   font-size: 35px;
2768 }
2769 .select-type::before{
2770   content: '';
2771   border: 1px solid #1273EB;
2772   width: 18px;
2773   height: 18px;
2774   border-radius: 18px;
2775   display: inline-block;
2776   left: 10px;
2777   position: absolute;
2778 }
2779 .select-type:hover::before, .select-type.active::before{
2780   border: 1px solid #fff;
2781 }
2782 .select-type.active::after{
2783   content: '';
2784   background: #fff;
2785   width: 12px;
2786   height: 12px;
2787   border-radius: 18px;
2788   display: inline-block;
2789   left: 13px;
2790   position: absolute;
2791   top: 13px;
2792 }
2793 .ace_scroller{
2794   overflow: auto !important;
2795 }
2796 .ace_print-margin{
2797   left: 100% !important;
2798   background: #eee !important;
2799 }
2800 .ace_content{
2801   width: 100% !important;
2802 }
2803 .ace_editor{
2804   height: 55vh !important;
2805   line-height: 25px;
2806   border: 1px solid #ECEDF2;
2807   background-color: #fff;
2808   color: #1B3E6F !important;
2809 }
2810 .ace_gutter{
2811   background: #E0E8F2 !important;
2812   border-right: 0px !important;
2813   color: #1B3E6F !important;
2814 }
2815 .ace_gutter-active-line{
2816   background-color: #265699 !important;
2817   color: #fff;
2818 }
2819 .ace_cursor{
2820   color: #265699 !important;
2821 }
2822 .ace-tm .ace_marker-layer .ace_active-line{
2823   background: #F4F9FE !important;
2824 }
2825 .breadcrumb-header{
2826   padding: 0px;
2827   margin: 0px;
2828 }
2829 .breadcrumb-header li{
2830   list-style: none;
2831   display: inline-block;
2832   font-size: 14px;
2833 }
2834
2835 .breadcrumb-header li:last-child::after{
2836   display: none;
2837 }
2838
2839 .breadcrumb-header li:last-child{
2840 /* background: #F4F9FE; */
2841 border-radius: 50px;
2842 color: #C3CDDB;
2843 padding: 0 10px 0 0;
2844 }
2845 .breadcrumb-header li:first-child,
2846 .breadcrumb-header li:first-child a{
2847   font-size: 16px;
2848   font-weight: bold;
2849   padding: 0px;
2850   color: #1B3E6F !important;
2851   border-radius: 0px;
2852   background: transparent;
2853 }
2854 .create-template-import{
2855   width: 100%;
2856   margin: 30px 0px 10px ;
2857 }
2858
2859 .create-template-import a:hover{
2860   text-decoration: none;
2861 }
2862 .mapping-source-load{
2863   color: #1B3E6F;
2864   font-size: 10px;
2865   font-weight: bold;
2866   display: inline-block;
2867   vertical-align: top;
2868   margin-top: 20px;
2869   margin-bottom: 10px;
2870   margin:15px 30px 20px;
2871 }
2872 .mapping-source-load:hover{
2873   text-decoration: none;
2874 }
2875 .mapping-source-load i {
2876   color: #1B3E6F;
2877   font-size: 36px;
2878   padding: 10px;
2879   border-radius: 100px;
2880   width: 70px;
2881   height: 70px;
2882   display: inline-block;
2883   line-height: 52px;
2884   margin-bottom: 20px;
2885 }
2886 .mapping-source-load:hover i{
2887   background: #F4F9FE;
2888 }
2889 .mapping-source-load:hover span{
2890   color: #1273EB;
2891 }
2892 .source-load-note{
2893   color:#C3CDDB ;
2894   font-size: 8px;
2895 }
2896 .mapping-source-load.hover-disable{
2897   opacity: .5;
2898 }
2899 .mapping-source-load.hover-disable:hover span{
2900   color: #1B3E6F;
2901 }
2902 .mapping-source-load.hover-disable:hover i{
2903   background: transparent;
2904 }
2905 .template-mapping-list{
2906   background: #F4F9FE;
2907   border: 1px solid #E9F3FF;
2908   padding: 5px 10px;
2909   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
2910   width: 100%;
2911   display: inline-block;
2912   margin-bottom: 20px;
2913   color: #1B3E6F;
2914 }
2915 .template-mapping-list:hover,
2916 .template-mapping-list.active {
2917   /* background: #1B3E6F;  */
2918   text-decoration: none;
2919   /* color: #fff !important; */
2920   border-radius: 4px;
2921   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.3);
2922 }
2923 .template-mapping-list p,
2924 .template-mapping-list:hover p{
2925   margin-bottom: 0;
2926   width: 60%;
2927   display: inline-block !important;
2928 }
2929 .template-mapping-list:hover p{
2930   width: 90%;
2931 }
2932 .template-mapping-list:hover{
2933   opacity: .9;
2934 }
2935
2936 .template-mapping-list span{
2937   background: #fff;
2938   border: solid 1px #E9F3FF;
2939   color: #2A81ED;
2940   font-size: 9px;
2941   float: right;
2942   border-radius: 50px;
2943   padding: 3px 10px;
2944   margin-left: 5px;
2945 }
2946 .template-mapping-list:hover span{
2947   display: none;
2948 }
2949 .deleteTemplate{
2950   display: none;
2951   position: absolute;
2952   right: 21px;
2953   top: 2px;
2954   border: 0;
2955   background: transparent;
2956 }
2957 .deleteTemplate i{
2958   color: #FF6469 !important;
2959   font-size: 16px;
2960 }
2961 .template-mapping-list:hover .deleteTemplate{
2962   display: inline;
2963 }
2964 .max-height-list{
2965   max-height: 232px;
2966   padding-bottom: 5px !important;
2967   overflow: auto;
2968 }
2969 .create-template-mapping-button{
2970   background: #C3CDDB;
2971   border-radius: 50px;
2972   font-size: 12px;
2973   font-weight: bold;
2974   padding: 10px 20px;
2975   margin-bottom: 20px;
2976     display: inline-block;
2977     cursor: pointer;
2978 }
2979 .create-template-mapping-button i{
2980 margin-right: 5px;
2981   }
2982 .view-package-container{
2983   padding: 20px 56px;
2984 }
2985 .package-type-icon{
2986   color: #1B3E6F;
2987   background: #C1CDDD;
2988   width: 48px;
2989   height: 48px;
2990   border-radius: 48px;
2991   display: inline-block;
2992   text-align: center;
2993   line-height: 48px;
2994   font-size: 20px;
2995   /* margin-right: 20px; */
2996 }
2997 .defintionsNote{
2998   padding-left: 0;
2999 }
3000 .defintionsNote li{
3001   line-height: 24px;
3002   list-style: none;
3003   font-size: 13px;
3004 }
3005 .package-name-container{
3006   width: calc(100% - 60px);
3007   display: inline-block;
3008 }
3009 .package-name{
3010   font-size: 16px;
3011   color: #1B3E6F;
3012   font-weight: bold;
3013   margin-top: 3px;
3014 }
3015 .package-name span{
3016   font-size: 11px;
3017 }
3018 .package-name i{
3019   font-size: 12px;
3020   color: #C3CDDB;
3021   margin-left: 5px;
3022 }
3023 .deply-status-icon{
3024   margin-right: 4px;
3025   width: 1.6%;
3026   vertical-align: baseline;
3027 }
3028 .package-description{
3029   color: #D0D7E4;
3030   font-size: 12px;
3031   font-weight: normal;
3032 }
3033 .package-auth-info{
3034   font-size: 11px;
3035 }
3036 .package-auth-info p{
3037   margin-bottom: 5px;
3038 }
3039 .package-auth-info div{
3040   padding-left: 25px;
3041   border-right: solid 1px #F4F9FE;
3042 }
3043 .package-auth-info div:first-child{
3044   padding-left: 15px;
3045 }
3046 .package-auth-info .col-4:first-child{
3047   padding-left: 15px;
3048 }
3049 .package-auth-info div:last-child{
3050   border-right: 0;
3051 }
3052 .package-auth-info .package-contributers{
3053   margin-bottom: 0 !important;
3054 }
3055 .package-auth-info .package-contributers button img{
3056   width: 20px;
3057   height: 20px;
3058 }
3059 .template-mapping-action{
3060   margin-bottom: 20px;
3061 }
3062 .template-mapping-action button{
3063   border-radius: 50px;
3064   padding: 4px 20px;
3065   font-size: 13px;
3066 }
3067 .template-mapping-action .btn-primary{
3068   background:#5DBDBA !important ;
3069   border-color:#5DBDBA !important ;
3070   color: #fff !important ;
3071 }
3072 .template-mapping-action .btn-outline-secondary{
3073   background:#fff !important ;
3074   border-color:#ECEDF2 !important ;
3075   color: #C3CDDB !important ;
3076 }
3077 .template-mapping-action .btn-outline-secondary:hover{
3078   color: #1B3E6F !important;
3079 }
3080 .table-container{
3081   width: 100%;
3082 }
3083 /*
3084    server-side-angular-way.component.css
3085 */
3086 .no-data-available {
3087   text-align: center;
3088 }
3089
3090 /*
3091    src/styles.css (i.e. your global style)
3092 */
3093 .dataTables_empty {
3094   display: none;
3095 }
3096 .dataTables_length,
3097 .dataTables_filter{
3098   margin-bottom: 6px;
3099   color: #1B3E6F !important;
3100   font-size: 13px;
3101   /* font-weight: bold; */
3102 }
3103
3104 .dataTables_filter input{
3105   color: #1B3E6F;
3106   background: url(../src/assets/img/icon-search.svg) 9px center no-repeat;
3107   padding: 4px 9px 4px 24px !important;
3108   border: solid 1px #ECEDF2;
3109   border-radius: 4px;
3110 }
3111 .dataTables_filter input:focus{
3112   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3113 }
3114 .mapping-table th,
3115 .mapping-table td{
3116   width: auto !important;
3117   padding: 7px 20px 7px 0 !important;
3118   border-bottom: solid 1px #ECEDF2 !important;
3119   font-size: 13px;
3120 }
3121 .mapping-table th:first-child,
3122 .mapping-table td:first-child{
3123   padding-left: 20px !important;
3124 }
3125 .mapping-table thead th{
3126   border-bottom-color: #ECEDF2 !important;
3127 }
3128 .mapping-table tbody tr:hover{
3129   background-color: #F4F9FE !important;
3130 }
3131 .mapping-table th{
3132   padding-top: 10px !important;
3133   padding-bottom: 10px !important;
3134   background: #F4F9FE;
3135 }
3136 .mapping-table td{
3137   border-top: 0 !important;
3138 }
3139 table.dataTable.no-footer{
3140   margin-bottom: 9px;
3141   border-bottom: solid 1px #ECEDF2 !important;
3142 }
3143 .dataTables_info{
3144   padding-top: 12px;
3145   color: #1B3E6F !important;
3146   font-size: 13px;
3147   font-weight: bold;
3148 }
3149 .dataTables_wrapper .dataTables_paginate,
3150 .dataTables_wrapper .dataTables_paginate a.paginate_button,
3151 .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
3152 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
3153   margin-bottom: 3px;
3154   color: #1B3E6F !important;
3155   font-size: 13px;
3156   font-weight: bold;
3157   border: 0 !important;
3158 }
3159 .dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
3160   border: 0;
3161   color: #1B3E6F !important;
3162   background: none !important;
3163 }
3164 .dataTables_wrapper .dataTables_paginate a.paginate_button{
3165   padding: 0.4em .9em !important;
3166 }
3167 .dataTables_wrapper .dataTables_paginate a.paginate_button.current{
3168   color: #1B3E6F !important;
3169   background: #F4F9FE !important;
3170   border: solid 1px #EEF4F9 !important;
3171   border-radius: 100% !important;
3172   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
3173   outline: 0;
3174 }
3175 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
3176   opacity: .6;
3177 }
3178 .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
3179   cursor: default;
3180   background: none !important;
3181   border: 0 !important;
3182 }
3183 .mapping-table .form-control,
3184 .mapping-table .custom-select{
3185   padding: 10px 6px;
3186   border-color: #EEF4F9;
3187   font-size: 14px;
3188   line-height: 12px;
3189   color: #1B3E6F;
3190 }
3191 .mapping-table .form-control{
3192   box-shadow: 0 2px 4px rgba(47,83,151,0.1);
3193 }
3194 .mapping-table tbody tr:hover .form-control:focus,
3195 .mapping-table tbody tr:hover .custom-select{
3196   background-color: #fff !important;
3197 }
3198 .mapping-table .custom-select{
3199   background-color: #F4F9FE;
3200   color: #1B3E6F;
3201 }
3202 .mapping-table .form-control:disabled{
3203   padding-left: 0;
3204   box-shadow: none;
3205   border: 0;
3206   background: transparent !important;
3207   color: #1B3E6F;
3208 }
3209
3210 /* Windows View as 150% */
3211 @media (resolution: 150dpi) {
3212   /* @media (-webkit-device-pixel-ratio: 1.5) { */
3213   .body-container > .container{
3214     max-width: 960px !important;
3215   }
3216 }
3217 /* Extra small devices (portrait phones, less than 576px) */
3218 @media (max-width: 575.98px) {
3219   .page-title{
3220     padding: 18px;
3221   }
3222 }
3223
3224 /* Small devices (landscape phones, 576px and up) */
3225 @media (min-width: 576px) and (max-width: 767.98px) {
3226
3227 }
3228
3229 /* Medium devices (tablets, 768px and up) */
3230 @media (min-width: 768px) and (max-width: 991.98px) {
3231
3232 }
3233
3234 /* Large devices (desktops, 992px and up) */
3235 @media (min-width: 992px) and (max-width: 1199.98px) {
3236
3237 }
3238
3239 /* Extra large devices (large desktops, 1200px and up) */
3240 @media (min-width: 1200px) {
3241
3242 }
3243
3244
3245
3246
3247
3248
3249
3250
3251
3252
3253
3254
3255
3256
3257
3258
3259
3260
3261
3262
3263
3264