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

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

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

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

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

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

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

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

@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%;
    }

    .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);
    min-height: 76px;
}

.header>div{
    min-height: 76px;
}


.logo img {
    width: 3rem;
}

/* 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);
}

/* 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-form {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #f9fafb;
}

.box-form p {
    margin: 0;
}

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

.box-form input[type="file"] {
    padding: .375rem .75rem;
}

.box-form input[type="radio"],
.box-form input[type="checkbox"] {
    padding: initial;
    width: 1rem;
}

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

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

.box-form button.btn-invisible {
    background-color: #ffffff00;
}

.box-form button.btn-invisible:hover {
    background-color: hsla(0, 0%, 0%, 0.25);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

    border-radius: 0.375rem;

    resize: none;
}

.box-form table {
    white-space: nowrap;
}

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

.box-form table.user-table .icon-status {
    text-align: center;
}
.box-form table.user-table .icon-status>i {
    -webkit-text-stroke: 1px;
}

.box-form table.user-table td.limited {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-form table.user-table td.limited-small {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-form table.status-table,
.box-form table.status-table th,
.box-form table.status-table td {
    background-color: transparent !important;
    text-align: center;
}

.box-form table.status-table td {
    width: 50%;
}

.box-form table.status-table td>p.success {
    color: green;
}

.box-form table.status-table td>p.error {
    color: red;
}

.box-form table.status-table td i {
    font-size: larger;
}

.box-form table td.limited {
    max-width: 150px;
}

/* DataTable Style */
.dataTables_length select {
    width: 60px !important;
    padding: 2px;
    font-size: 14px;
    text-align: center;
}

.dataTables_filter input {
    width: 260px !important;
    padding: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 5px !important;
    padding: 5px 10px !important;
    margin: 2px !important;
    min-width: 36px !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: rgb(13, 110, 253) !important;
    color: white !important;
    font-weight: bolder;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background-color: transparent !important;
    color: rgb(102, 102, 102) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgb(11, 94, 215) !important;
    color: white !important;
}


.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-blue {
    color: white;
    background-color: #1e96cf;
}

.text-bg-darkblue {
    color: white;
    background-color: #00758f;
}

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

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

/* CUSTOM MODAL */
#alertModal .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 {
    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;
}