.sppiner-main {
    width: 100px;
    height: 110px;
    border-radius: 100%;
    position: fixed;
    top: 45%;
    left: calc(50% - 50px);
}

.spinner-container {
    background-color: #000000ba;
    z-index: 9 !important;
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
}

.circle {
    width: 100%;
    height: 100%;
    position: absolute;
}

    .circle .inner {
        width: 105%;
        height: 95%;
        border-radius: 100%;
        border: 5px solid #C733F5;
        border-right: none;
        border-top: none;
        background-clip: padding;
        box-shadow: inset 0px 0px 10px #6b0b89;
    }

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.circle:nth-of-type(0) {
    transform: rotate(0deg);
}

.circle:nth-of-type(0) .inner {
        -webkit-animation: spin 2s infinite linear;
        animation: spin 2s infinite linear;
    }

.circle:nth-of-type(1) {
    transform: rotate(70deg);
}

.circle:nth-of-type(1) .inner {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.circle:nth-of-type(2) {
    transform: rotate(140deg);
}

.circle:nth-of-type(2) .inner {
        -webkit-animation: spin 2s infinite linear;
        animation: spin 2s infinite linear;
    }

.spinner-main {
    -webkit-animation: spin 5s infinite linear;
    animation: spin 5s infinite linear;
}

#spinner-text {
    font-family: Poppins-SemiBold, Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
    font-size: 17px;
    position: fixed;
    top: 59%;
    left: calc(50% - 50px);
}


@font-face {
    font-family: 'Garet-Book';
    src: url('../../Content/assets/vendor_assets/fonts/garet/Garet-Book.ttf') format('truetype');
}

@font-face {
    font-family: 'ExensaGrotesk-ExtraBold';
    src: url('../../Content/assets/vendor_assets/fonts/ExensaGrotesk/ExensaGrotesk-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-Bold';
    src: url('../../Content/assets/vendor_assets/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('../../Content/assets/vendor_assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
}