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

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

    .loader {
        --path: var(--wdtHeadAltColor);
        --dot: var(--wdtSecondaryColor);
        --duration: 3s;
        width: 44px;
        height: 44px;
        position: relative;
        transform: rotate(180deg);
    }
    .loader:before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        position: absolute;
        display: block;
        background: var(--dot);
        top: 37px;
        left: 19px;
        transform: translate(-18px, -18px);
        -webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
                animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
    .loader svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    .loader svg rect,
    .loader svg polygon,
    .loader svg circle {
        fill: none;
        stroke: var(--path);
        stroke-width: 10px;
        stroke-linejoin: round;
        stroke-linecap: round;
    }
    .loader svg polygon {
        stroke-dasharray: 145 76 145 76;
        stroke-dashoffset: 0;
        -webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
                animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
    .loader-inner {
        height: 100%; display: flex; justify-content: center; align-items: center;
    }
    .loader.triangle {
        width: 48px;
    }
    .loader.triangle:before {
        left: 21px;
        transform: translate(-10px, -18px);
        -webkit-animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
                animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
    @-webkit-keyframes pathTriangle {
        33% {
            stroke-dashoffset: 74;
        }
        66% {
            stroke-dashoffset: 147;
        }
        100% {
            stroke-dashoffset: 221;
        }
    }
    @keyframes pathTriangle {
        33% {
            stroke-dashoffset: 74;
        }
        66% {
            stroke-dashoffset: 147;
        }
        100% {
            stroke-dashoffset: 221;
        }
    }
    @-webkit-keyframes dotTriangle {
        33% {
            transform: translate(0, 0);
        }
        66% {
            transform: translate(10px, -18px);
        }
        100% {
            transform: translate(-10px, -18px);
        }
    }
    @keyframes dotTriangle {
        33% {
            transform: translate(0, 0);
        }
        66% {
            transform: translate(10px, -18px);
        }
        100% {
            transform: translate(-10px, -18px);
        }
    }
    .loader {
        display: inline-block;
        margin: 0 16px;
    }
    html {
        -webkit-font-smoothing: antialiased;
    }
    * {
        box-sizing: border-box;
    }
    *:before, *:after {
        box-sizing: border-box;
    }
    body {
        min-height: 100vh;
        background: var(--wdtBodyBGColor);
        display: flex;
        justify-content: center;
        align-items: center;
    }