* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --fundo-cinza: #fcfcfc;
    --branco: #fff;
    --azul-degrade: linear-gradient(150deg, rgba(116, 0, 184, 1) 32%, rgba(94, 96, 206, 1) 81%);
    --azul: #0077b6;
    --azul-escuro: #106390;
    --azul-opaco: #0076b62e;
    --cinza-borda: #e5e5e5;
    --cinza: #646464;
}

/* conteudo */
body {
    display: flex;
    flex-direction: column;
    bottom: 0;
    height: 100dvh;
    width: 100%;

    & .interface {
        margin: 0 auto;
        max-width: 1280px;
        padding: 1%;
        width: 100%;
    }

    & .conteudo {
        overflow: auto;
        height: calc(100% - 5rem);
        background-color: var(--fundo-cinza);
    }
}

#container-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background: #ffffffc6;
    backdrop-filter: blur(8px);
    z-index: 1000;

    .loader {
        width: 6rem;
        height: 6rem;
        border: .5rem solid rgba(0, 119, 182, 0.2);
        border-top-color: #0077b6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    & .container-bar {
        background-color: rgba(0, 119, 182, 0.2);
        height: .5rem;
        border-radius: 1rem;
        width: 20rem;

        & #progress-bar {
            width: 0%;
            height: 100%;
            background-color: #0077b6;
            border-radius: 1rem;
        }
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Para celulares (largura máxima de 600px) */
@media screen and (max-width: 600px) {
    body {
        .interface {
            padding: 5%;
        }
    }
}