/*****************************************************************************************************************************************/
/*Studio Manager Logo Spinner*/

.outsideSpinner {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--studio-manager-spinner-background-color);
    width: calc(var(--studio-manager-spinner-width) + (calc((var(--studio-manager-spinner-width) / 100) * 10)));
    height: calc(var(--studio-manager-spinner-width) + (calc((var(--studio-manager-spinner-width) / 100) * 10)));
    border-radius: 10px;
    padding: 2px;
    margin: 10% auto;
}

.outsideSpinnerSmall {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--studio-manager-spinner-background-color);
    width: calc(var(--studio-manager-spinner-sm-width) + (calc((var(--studio-manager-spinner-sm-width) / 100) * 10)));
    height: calc(var(--studio-manager-spinner-sm-width) + (calc((var(--studio-manager-spinner-sm-width) / 100) * 10)));
    border-radius: 10px;
    padding: 2px;
    margin: 10% auto;
}

.nospin {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.nospinSmall {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.logospinner {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: calc(var(--studio-manager-spinner-width) /100);
    animation: spinnerContinual;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: spinnerContinual;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

    .logospinner.red.thin {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-thinborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-red-color) transparent transparent #f43b2b;
    }

    .logospinner.blue.thin {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-thinborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-blue-color) transparent transparent #12131f;
    }

    .logospinner.white.wide {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-borderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-white-color) transparent transparent #fffbec;
    }

    .logospinner.blue.wider {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-wideborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-blue-color) transparent transparent #12131f;
    }

    .logospinner.white.wider {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-wideborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-white-color) transparent transparent #fffbec;
    }

.nospin.red.thin {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-thinborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-red-color);
}

.nospin.blue.thin {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-thinborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-blue-color);
}

.nospin.white.wide {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-borderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-white-color);
}

.nospin.blue.wider {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-wideborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-blue-color);
}

.nospin.white.wider {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-wideborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-white-color);
}


.logospinnerSmall {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /*margin: calc(var(--studio-manager-spinner-sm-width) /100);*/
    animation: spinnerContinual;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: spinnerContinual;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

    .logospinnerSmall.red.thin {
        border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-thinborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-red-color) transparent transparent #f43b2b;
    }

    .logospinnerSmall.blue.thin {
        border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-thinborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-blue-color) transparent transparent #12131f;
    }

    .logospinnerSmall.white.wide {
        border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-borderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-white-color) transparent transparent #fffbec;
    }

    .logospinnerSmall.blue.wider {
        border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-wideborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-blue-color) transparent transparent #12131f;
    }

    .logospinnerSmall.white.wider {
        border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-wideborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-white-color) transparent transparent #fffbec;
    }

.nospinSmall.red.thin {
    border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-thinborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-red-color);
}

.nospinSmall.blue.thin {
    border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-thinborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-blue-color);
}

.nospinSmall.white.wide {
    border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-borderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-white-color);
}

.nospinSmall.blue.wider {
    border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-wideborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-blue-color);
}

.nospinSmall.white.wider {
    border: calc((var(--studio-manager-spinner-sm-width) / 200) * var(--studio-manager-spinner-sm-wideborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-white-color);
}

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

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

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

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