/*Loading ring*/

.loadRing {
    display: inline-block;
    position: relative;
    width: 116px;
    height: 116px;
}
.loadRing.med {
    width: 85px !important;
    height: 85px !important;
}
.loadRing.small {
    width: 66px !important;
    height: 66px !important;
}
.loadRing.mini {
    width: 30px !important;
    height: 30px !important;
}
.loadRing div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 8px;
    border: 10px solid var(--primary-color);
    border-radius: 50%;
    animation: loadRingKeys 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--primary-color) transparent transparent transparent !important;

}
.loadRing.med div{
    width: 85px !important;
    height: 85px !important;
    margin: 4px !important;
    border-width: 8px !important;
}
.loadRing.small div{
    width: 60px !important;
    height: 60px !important;
    margin: 3px !important;
    border-width: 6px !important;
}
.loadRing.mini div{
    width: 26px !important;
    height: 26px !important;
    margin: 2px !important;
    border-width: 3px !important;
}

.loadRing div:nth-child(1) {
    animation-delay: -0.45s;
}
.loadRing div:nth-child(2) {
    animation-delay: -0.3s;
}
.loadRing div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes loadRingKeys {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}