/*
* Loader
*/
:root {
    --brandBlue: #3D8BCC;
}

.loader-input {
    position: absolute;
    top: 25px;
    right: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader .loader-outer, .loader-input .loader-outer {
    position: absolute;
    border: 4px solid var(--brandBlue);
    border-left-color: transparent;
    border-bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: loader-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
}
.loader .teeth , .loader-input  .teeth {
    width: 50px;
    height: 50px;
    animation: loader-breathing 2s ease-out infinite normal;
}
@keyframes loader-outter {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loader-breathing {
    0% {
        transform: scale(0.8);
    }
    25% {
        transform: scale(1);
    }
    60% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.8);
    }
}