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

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