:root {
    --defaultBlue: rgb(30, 150, 207);
    
    --windowsColor: rgb(30, 150, 207);
    --ubuntuColor: rgb(233, 84, 32);
}

body {
    margin: 0;
    padding: 0;
    
    background-color: #e2e8f0;

    font-family: "Poppins", sans-serif;
    color: black;
}

/* MONITOR */
@media (min-width: 768px) {
    /* Borda à direita para telas médias e maiores */
    .custom-border-end {
        border-right: 1px solid #dee2e6;
    }

    .custom-container-half {
        max-width: 480px;
    }

    .custom-container-bighalf {
        max-width: 720px;
    }

    .custom-container {
        max-width: 960px;
    }

    .custom-container-mid {
        max-width: 1280px;
    }

    .custom-container-big {
        max-width: 1440px;
    }

    .custom-bagde {
        width: max-content;
    }

    .img-large {
        width: 50%;
    }

    .logo {
        font-size: 1.5rem;
        letter-spacing: -0.025rem;
    }
}

/* SMARTPHONE */
@media (max-width: 767.98px) {
    /* Borda embaixo para telas menores */
    .custom-border-bottom {
        padding-bottom: 1rem;
        border-bottom: 1px solid #dee2e6;
    }

    .custom-bagde {
        width: 100%;
    }

    .img-large {
        width: 100%;
    }

    h2.title {
        text-align: center;
    }

    .logo {
        font-size: 1.25rem;
        letter-spacing: -0.025rem;
    }
}


/* MENU SUPERIOR */
.header {
    font-size: 1.15rem;
    font-weight: 600;
    background-color: #ffffff;
    box-shadow: 0px -3px 20px 0px rgba(142, 142, 142, 1);
}


.logo img {
    width: 3rem;
    margin-right: 0.5rem;
}

/* Estilos para o menu em telas maiores */
.nav-top a {
    color: rgba(0, 0, 0, 0.7);
    text-decoration: inherit;
    margin-right: 1.5rem;
}

.nav-top a:hover {
    color: rgb(30, 150, 207);
}

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.3;
    color: black;
    text-decoration: none;
}

/* Esconder o menu normal e mostrar o burger em telas pequenas */
.burger-menu {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

/* Estilos para o menu mobile */
.nav-top-mobile a {
    color: rgba(0, 0, 0, 0.7);
    text-decoration: inherit;
    margin: 0.5rem 0;
}

.nav-top-mobile {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: none; /* Ocultar o menu mobile por padrão */
    font-weight: 600;
    box-shadow: 0px 12px 20px -6px rgba(142, 142, 142, 1);
}

/* Mostrar o menu mobile quando ativo */
.nav-top-mobile.d-block {
    display: flex;
    flex-direction: column;
}

/* CORPO DA PÁGINA */
.box {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #f9fafb;
}

.box .badge {
    min-width: 50px;
}

.box li.dash-line {
    border-bottom: 1px dotted rgb(185, 185, 185);
}

.box li.nav-item.dash-line:hover  {
    background-color: rgba(173, 220, 243, 0.6);
}


.box p {
    margin: 0;
}

.box input,
.box select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #d0d0d0;
}

.box input.empty,
.box select.empty {
    border-color: #f37b0a;
    outline: 3px solid rgba(243, 123, 10, 0.4);
}

.box input.error {
    border-color: red;
    outline: 3px solid rgba(255, 0, 0, 0.4);
}

.box .check-unavailable {
    padding: 0.5rem 0.75rem;
    color: red;
    font-weight: bold;
}

.box .check-empty {
    padding: 0.5rem 0.75rem;
    color: #f37b0a;
    font-weight: bold;
}

.box .check-available {
    padding: 0.5rem 0.75rem;
    color: green;
    font-weight: bold;
}


/* REQUISITOS SENHA */
.box #password-requirements {
    list-style: none;
    padding-left: 0;
    font-weight: 500;
}

.box #password-requirements i {
    -webkit-text-stroke: 1px;
}

.box #password-requirements li {
    color: red;
}

.box #password-requirements li.valid{
    color: green;
}

.box .icon {
    fill: black;
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 0.5rem;
}

.box .icon.white {
    fill: white;
}

.box .icon-lg {
    width: 40%;
    height: 40%;
}

.box textarea {
    width: 100%;
    padding: 0.5rem;

    border-radius: 0.375rem;

    resize: none;
}

.box table {
    white-space: nowrap;
}

.box table.custom-table,
.box table.custom-table th,
.box table.custom-table td {
    background-color: transparent !important;
    margin-bottom: 0;
}

.f-red {
    fill: red;
}

.f-orange {
    fill: orange;
}

.f-blue {
    fill: rgb(30, 150, 207);
}

.f-green {
    fill: green;
}

.result-test {
    font-size: 1.5rem;
    font-weight: bold;
}

.result-test .error {
    text-align: center;
    color: red;
}

.result-test .warning {
    text-align: center;
    color: orange;
}

.result-test .pendent {
    text-align: center;
    color: rgb(30, 150, 207);
}

.result-test .success {
    text-align: center;
    color: green;
}

.result-test a,
.result-test p {
    font-size: 1.1rem;
}

.hidden {
    display: none;
}

.text-bg-purple  {
    color: white;
    background-color: rgb(119, 0, 255);
}

.text-bg-orange {
    color: white;
    background-color: #f37b0a;
}

.text-bg-new {
    color: #ff8f00;
    background-color: #ff910048;
}

.text-bg-update {
    color: #1d9200;
    background-color: #1d920048;
}

/* CUSTOM MODAL */
#alertModal .modal-content,
#formModal .modal-content {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

#alertModal .modal-content .modal-icon,
#formModal .modal-content .modal-icon {
    color: #fff;
    background: rgb(30, 170, 241);
    font-size: 60px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -3.5rem;
}

.modal-backdrop.show{ 
    opacity: 0.2;
}

.col-middle {
    display: grid;
    place-items: center;
    padding: 0;
}

.big-button {
    height: 100%;
    aspect-ratio: 1;
    padding: 20px;

    display: grid;
    place-items: center;

    text-decoration: none;
    /* color: black; */
    color: var(--btn-color);
    font-weight: 600;
    font-size: 1.2rem;

    border-radius: 50%;
    border-width: 5px;
    border-style: solid;

    /* border-color: black; */
    border-color: var(--btn-color);

    transition: all linear 0.25s;

    --btn-color: black;
    --btn-color-active: black;
}

.big-button:hover {
    background-color: var(--btn-color);
    border-color: var(--btn-color);

    svg {
        fill: white;
    }
}

.big-button:active {
    background-color: var(--btn-color-active);
}

.add-button {
    display: flex;
    align-items: center;
    border-radius: 25px;
    border: 0;
    background-color: #00000000;
    color: black;
}

.add-button:hover {
    background-color: var(--defaultBlue);
}