#preloader {
     position: fixed;
     top: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     background-color: #f8f6f4;
     z-index: 9999;
 }

 .loader {
     transform: rotateZ(45deg);
     perspective: 1000px;
     border-radius: 50%;
     width: 48px;
     height: 48px;
     color: #F9BC16;
 }

 .loader:before,
 .loader:after {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: inherit;
     height: inherit;
     border-radius: 50%;
     transform: rotateX(70deg);
     animation: 1s spin linear infinite;
 }

 .loader:after {
     color: #0F98C8;
     transform: rotateY(70deg);
     animation-delay: .4s;
 }

 @keyframes rotate {
     0% {
         transform: translate(-50%, -50%) rotateZ(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotateZ(360deg);
     }
 }

 @keyframes rotateccw {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(-360deg);
     }
 }

 @keyframes spin {

     0%,
     100% {
         box-shadow: .2em 0px 0 0px currentcolor;
     }

     12% {
         box-shadow: .2em .2em 0 0 currentcolor;
     }

     25% {
         box-shadow: 0 .2em 0 0px currentcolor;
     }

     37% {
         box-shadow: -.2em .2em 0 0 currentcolor;
     }

     50% {
         box-shadow: -.2em 0 0 0 currentcolor;
     }

     62% {
         box-shadow: -.2em -.2em 0 0 currentcolor;
     }

     75% {
         box-shadow: 0px -.2em 0 0 currentcolor;
     }

     87% {
         box-shadow: .2em -.2em 0 0 currentcolor;
     }
 }

 /**Spinner ring */
 .lds-ring {
     display: inline-block;
     position: relative;
     width: 20px;
     height: 20px;
 }

 .lds-ring div {
     box-sizing: border-box;
     display: block;
     position: absolute;
     width: 15px;
     height: 15px;
     margin: 8px;
     border: 5px solid #fff;
     border-radius: 50%;
     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
     border-color: #ADD8E6 transparent transparent transparent;
 }

 .lds-ring div:nth-child(1) {
     animation-delay: -0.45s;
 }

 .lds-ring div:nth-child(2) {
     animation-delay: -0.3s;
 }

 .lds-ring div:nth-child(3) {
     animation-delay: -0.15s;
 }

 @keyframes lds-ring {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }


 /*---custom css **/
 .form-control.is-valid,
 .was-validated .form-control:valid {
     border-color: #e9edf6 !important;
 }

 .form-check-input.is-valid:checked,
 .was-validated .form-check-input:valid:checked {
     background-color: #1a4082 !important;
 }


 .form-check-input:checked {
     background-color: #1a4082 !important;
     border-color: #1a4082 !important;
 }

 .form-check-input.is-valid,
 .was-validated .form-check-input:valid {
     border-color: #e9edf6 !important;
 }

 .btn-primary {
     background-color: #1a4082 !important;
     border-color: #1a4082 !important;
 }

 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active,
 .btn-primary.active,
 .open>.dropdown-toggle.btn-primary {
     color: #fff !important;
     ;
     background-color: #0b3a67 !important;
     border-color: #285e8e !important;
     /*set the color you want here*/

 }

 .text-primary {
     color: #1a4082 !important;
     opacity: 1;
 }