.loader {
    display: none;
    position: fixed;
    width: 100vw;
    height: calc(100vh);
    background: transparent;
    transition: all 0.2s ease;
    z-index: 1055;
}

.loader .loader-circle, .loader .loader-circle::before, .loader .loader-circle::after {
    border: 2px solid transparent;
}

.loader-circle {
    position: relative;
    width: 50px;
    height: 50px;
    top: calc(50% - 45px);
    left: calc(50% - 30px);
    z-index: 1006;
}

.loader-content {
    width: 160px;
    position: absolute;
    bottom: -19px;
    left: calc(50% - 80px);
    color: #b3b0b0;
    text-align: center;
    font-size: 12.5px;
}

.loader.active {
    background: rgba(0, 0, 0, 0.7);
    display: block;
}

.loader-circle::before {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border-radius: 50%;
    border-top: 2px solid #2073c5 !important;
    border-right: 2px solid #2073c5 !important;
    animation: spin1 1.5s linear infinite;
}

.loader-circle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    border-top: 2px solid #00b7ff !important;
    border-right: 2px solid #00b7ff !important;
    animation: spin2 1s linear infinite;
}

@keyframes spin1 {
    100%{transform: rotate(360deg);filter: hue-rotate(360deg)};
    /* 20% {transform: rotate(150deg)}
    40% {transform: rotate(300deg)}
    80% {transform: rotate(300deg)}
    100% {transform: rotate(360deg)} */
}

@keyframes spin2 {
    /* 0% {transform: rotate(-30deg)}
    20% {transform: rotate(-30deg);
         border-color: transparent transparent #00b7ff #00b7ff}
    21% {border-color: orange orange transparent transparent}
    40% {transform: rotate(-30deg)}
    60% {transform: rotate(120deg);
        border-color: orange orange transparent transparent}
    61% {border-color: transparent transparent orange orange}
    80% {transform: rotate(270deg)} */
    100%{transform: rotate(360deg);filter: hue-rotate(360deg)};
}


/* .load-process {
    display: none;
    position: fixed;
    width: 100vw;
    height: calc(100vh);
    background: rgba(0, 0, 0, 0.7);
    z-index: -10;
    transition: all 0.2s ease;
}

.loader {
    position: absolute;
    border: 12px solid #efefef;
    border-radius: 25%;
    width: 80px;
    height: 80px;
    top: calc(45% - 40px);
    left: calc(50% - 40px);
    z-index: 999;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
} */


.lds-ring {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    top: calc(50% - 45px);
    left: calc(50% - 30px);
    z-index: 1006;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 3px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff 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);
    }
}
.loader .spinner-icon, .loader .spinner-icon::before, .loader .spinner-icon::after {
    border: 2px solid transparent;
}

.loader .spinner-icon {
    width: 50px;
    height: 50px;
    position: absolute;
    top: calc(50% - 75px);
    left: calc(50% - 35px);
    /* margin: -50px 0 0 -50px; */
    -webkit-animation: spin 2s linear infinite;
    animation: spinner-icon 1.7s linear infinite;
}

.loader .spinner-content {
    position: absolute;
    width: 161px;
    color: #b3b0b0;
    top: calc(50%);
    left: calc(50% - 81px);
    text-align: center;
}

.loader .spinner-icon, .loader .spinner-icon::before, .loader .spinner-icon::after {
    border-radius: 50%;
    border-top-color: #00b7ff;
}

.loader .spinner-icon::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spinner-icon 1.5s linear infinite;
}

.loader .spinner-icon::before
{
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    -webkit-animation: spin 3s linear infinite;
    animation: spinner-icon 3s linear infinite;
}

@keyframes spinner-icon {
    100%{transform: rotate(360deg);filter: hue-rotate(360deg)};
}