﻿.custom-loader {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-loader .custom-loading {
    height: 80px;
    width: 80px;
    border: 7px solid #87CEFA;
    transform: rotate(45deg);
    border-radius: 0 50% 50% 50%;
    position: relative;
    animation: move 0.5s linear infinite alternate-reverse;
}

.custom-loader .custom-loading::before {
    content: "";
    position: absolute;
    height: 55%;
    width: 55%;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: #87CEFA;
    border-bottom-color: #87CEFA;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes move {
    to {
        transform: translateY(15px) rotate(45deg);
    }
}
