.loader * {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
    
    font-family: initial;
    font-size: initial;
    font-weight: initial;
    text-align: start;
    line-height: initial !important;
    white-space: initial;
    
    list-style-type: none;
    border: initial;
    border-radius: initial;
    outline: initial;
    color: initial;
    background-color: initial;
    box-shadow: initial;
    
    cursor: initial;
    appearance: auto;
}

input:focus, textarea:focus {
    outline: 0;
}


.loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50000000000;

    display: none;
    height: 100%;
    width: 100%;

    background-color: rgba(0, 0, 0, 0.4);
}

.loader[active] {
    display: grid;
    place-items: center;
}

.loader-body {
    position: relative;

    width: 16px;
    height: 16px;

    border-radius: 50%;
    background: #f76c26;
}



.loader-body:before,
.loader-body:after {
    content: "";

    position: absolute;

    border-radius: 50%;
    inset: 0;
    background: #FFF;

    animation: rotate 1s ease infinite;

    transform: rotate(0deg) translate(30px);
}

.loader-body:after {
    animation-delay: 0.5s
}

@keyframes rotate {
    100% {
        transform: rotate(360deg) translate(30px)
    }
}