/*--------------------------------------------------------------
    Loader
--------------------------------------------------------------*/

    .pre-loader { height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999991; }

    .loader-inner { padding: 25px; position: absolute; left: 50%; top: 50%; text-align: center; width: 100%; }
 
    
    .wdt-droplet {
        border-radius: 5px 90%;
        border-style: solid;
        border-width: 3px;
        border-color: var(--wdtBodyBGColor);
        height: clamp(2.1875rem, 1.8392rem + 1.5924vw, 3.75rem);/*35-60px*/
        margin: auto;
        width: clamp(2.1875rem, 1.8392rem + 1.5924vw, 3.75rem);/*35-60px*/
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: left top;
        opacity: 0;
    }
    
    .wdt-droplet1 {
        background: var(--wdtTertiaryColor);
        animation: spin 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0s;
    }
    
    .wdt-droplet2 {
        background: var(--wdtPrimaryColor);
        animation: spin2 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.05s;
    }
    
    .wdt-droplet3 {
        background: var(--wdtTertiaryColor);
        animation: spin3 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.1s;
    }
    
    .wdt-droplet4 {
        background: var(--wdtPrimaryColor);
        animation: spin4 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.15s;
    }
    
    .wdt-droplet5 {
        background: var(--wdtTertiaryColor);
        animation: spin5 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.2s;
    }
    
    .wdt-droplet6 {
        background: var(--wdtPrimaryColor);
        animation: spin6 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.25s;
    }
    
    .wdt-droplet7 {
        background: var(--wdtTertiaryColor);
        animation: spin7 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.3s;
    }
    
    .wdt-droplet8 {
        background: var(--wdtPrimaryColor);
        animation: spin8 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.35s;
    }
    
    .wdt-droplet9 {
        background: var(--wdtTertiaryColor);
        animation: spin9 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.4s;
   }
    
    .wdt-droplet10 {
        background: var(--wdtPrimaryColor);
        animation: spin10 3s ease infinite;
        animation-fill-mode: forwards;
        animation-delay: 0.45s;
    }
    
    @keyframes spin {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(324deg) scale(1);
        transform: rotate(324deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(324deg) scale(1);
        transform: rotate(324deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin2 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(288deg) scale(1);
        transform: rotate(288deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(288deg) scale(1);
        transform: rotate(288deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin3 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(252deg) scale(1);
        transform: rotate(252deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(252deg) scale(1);
        transform: rotate(252deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin4 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(2160deg) scale(1);
        transform: rotate(216deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(216deg) scale(1);
        transform: rotate(216deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin5 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin6 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(144deg) scale(1);
        transform: rotate(144deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(144deg) scale(1);
        transform: rotate(144deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin7 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(108deg) scale(1);
        transform: rotate(108deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(108deg) scale(1);
        transform: rotate(108deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin8 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(72deg) scale(1);
        transform: rotate(72deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(72deg) scale(1);
        transform: rotate(72deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin9 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(36deg) scale(1);
        transform: rotate(36deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(36deg) scale(1);
        transform: rotate(36deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    
    @keyframes spin10 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }
    20% {
        opacity: 100;
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }
    60% {
        opacity: 100;
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.01);
        transform: rotate(720deg) scale(0.01);
    }
    }
    

/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/

    .pre-loader { background-color: var(--wdtBodyBGColor); }