* {
    outline: 0 !important;
}

html {
    overflow-x: hidden;
}

body {
    font-size: 15px !important;

}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;700&display=swap');

.nav-sidebar>.nav-item .nav-icon.fa,
.nav-sidebar>.nav-item .nav-icon.fab,
.nav-sidebar>.nav-item .nav-icon.far,
.nav-sidebar>.nav-item .nav-icon.fas,
.nav-sidebar>.nav-item .nav-icon.glyphicon,
.nav-sidebar>.nav-item .nav-icon.ion {
    font-size: 1rem !important;
}

.nav-sidebar>.nav-item>.nav-treeview {
    padding-left: 15px;
}

/* SWEET ALERT CONF */
.swal2-popup {
    font-family: inherit;
    font-size: 15px !important;
}

.swal2-popup.swal2-toast {
    cursor: pointer;
    max-width: 400px;
}

.swal2-popup.swal2-toast .swal2-content {
    text-align: left;
    margin-left: 10px;
    word-wrap: anywhere;
}

/* END SWEET ALERT CONF */
.layout-external-page {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 90vh;
}

.layout-external-page .main-footer {
    margin-left: 0px !important;
}

.layout-external-page .error-page {
    -ms-flex-align: center;
    align-items: center;
    background: #e9ecef;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(100vh - 55px);
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0px;
    width: 100%;
    overflow-y: auto;
}

.layout-external-page .error-page .error-box {
    width: 600px;
    max-width: calc(100% - 15px);
}

.btn-warning {
    color: #fff !important;
}

.brand-link {
    display: flex;
    align-items: center;
}

.brand-link .brand-image {
    max-width: 90%;
}


/*formatação input number*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}


/*tabela layout*/

thead {
    color: #5a5a5a !important;
    font-weight: 200 !important;
    font-family: 'Asap', sans-serif !important;

}

.tdLayout {
    vertical-align: middle !important;
    padding: 8px !important;
}

.nomeFantasia {
    color: #17a2b8;
}


td {
    line-height: 1.1 !important;
}

label {
    font-family: 'Asap', sans-serif !important;
}

.nav-item {
    font-family: 'Asap', sans-serif !important;
}


.nav-tabs .nav-item .active {
    background-color: #17a2b8 !important;
    color: #fff !important;
    border: solid 1px #17a2b8 !important;
}

.nav-tabs .nav-item :hover {
    border-bottom: solid 1px transparent !important;
}

.nav-item .navForm {
    color: #17a2b8 !important;
    background-color: #fff;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
}

.cardConteudo {
    background-color: #fff !important;
    border-left: 1px solid rgba(0, 0, 0, .125);
    border-right: 1px solid rgba(0, 0, 0, .125);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

#btnModalSocio {
    display: inline !important;
    margin-top: 4.48% !important;
    border: none !important;
    height: 1.84rem;
    background: #17a2b8 !important;
    color: #fff !important;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
    border-radius: 4px;
}

#btnModalSocio:hover {
    display: inline !important;
    margin-top: 4.48% !important;
    height: 1.84rem;
    background: #fff !important;
    color: #17a2b8 !important;
    border: solid 1px #17a2b8 !important;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
    border-radius: 4px;
}

.close {
    outline: 0px auto -webkit-focus-ring-color !important;
    outline-offset: 0px !important;
}



.animationFadeIn {
    animation: fadeIn .5s;
    -webkit-animation: fadeIn .5s;
    -moz-animation: fadeIn .5s;
    -o-animation: fadeIn .5s;
    -ms-animation: fadeIn .5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


label {
    color: #000 !important;
    font-weight: 500 !important;
}

.obrigatorio {
    color: #000 !important;
    font-weight: 600 !important;
}

.input-icon~i {
    position: absolute;
    bottom: 24px;
    right: 24px;
}

.cats-tree {
    max-height: 450px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.cats-tree ul {
    padding-left: 5px;
    list-style: none;
}

.cats-tree ul li {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.cats-tree ul li>h6 span {
    cursor: pointer;
    user-select: none;
}

.cats-tree ul li:before {
    position: absolute;
    top: 15px;
    left: 0;
    width: 10px;
    height: 2px;
    margin: auto;
    content: '';
    background-color: #333;
    box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.15)
}

.cats-tree ul li:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    height: 100%;
    content: '';
    background-color: #333;
    box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.15)
}

.cats-tree ul li:last-child:after {
    height: 15px;
}

input.text-normal {
    text-transform: none;
}

input {
    text-transform: uppercase;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    text-transform: none;
}

::placeholder {
    /* Recent browsers */
    text-transform: none;
}

/*CHECKBOX ALERTA*/
.swal2-checkbox {
    display: none !important;
}


input [type='text'] {
    text-transform: uppercase !important;
}


.btn-ativo {
    padding: .3rem .7rem .3rem .7rem !important;
    border: 1px solid transparent;
    background: #aeffc2;
    color: #0bad34;
    border-radius: 4px;
    width: 6rem;
    font-weight: 600;
}


.btn-ativo:hover {
    border: 1px solid #00cc33;
    background: transparent;
    color: #00cc33;

}

.btn-inativo {
    padding: .3rem .7rem .3rem .7rem;
    border: 1px solid transparent;
    background: #ffa4b6ad;
    color: #ff0033;
    border-radius: 4px;
    width: 6rem;
    font-weight: 600;
}


.btn-inativo:hover {
    border: 1px solid #ff0033;
    background: transparent;
    color: #ff0033;

}

.section-login {
    background: url('../img/Equipe-Medica.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-login::after {
    background: rgba(15, 45, 100, 0.5);
    width: 100%;
    height: 100vh;
    content: '';
}

.frase-login {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    left: 4rem;
    top: 4rem;
    font-size: 40px;
    width: 50%;
    font-family: 'Rubik', sans-serif !important;
}

.box-login {
    height: 80%;
    border-radius: 25px;
    width: 27rem;
    border: 1px solid #dedede;
    background: #fff;
    display: flex;
    justify-content: space-around;
    position: absolute;
    right: 3rem;
    align-items: center;
    flex-direction: column;
    padding-bottom: 1.5rem;
}



.login-main {
    background: #000;
}

.input-login {
    width: 100%;
    margin: .4rem 0;
    border: none;
    background-color: transparent;

}

.div-input-login {
    width: 70%;
    border: 1px solid #cecbcb9a;
    padding: 0px 15px;
    border-radius: 35px;
    margin: 0 auto;

}

.div-input-login-clean {
    width: 75%;
    padding: 0px 15px;
    margin-top: 1rem !important;
    border-radius: 35px;
    margin: 0 auto;

}

.div-input-login-clean a {
    font-size: 13px;
    color: #C49150 !important;
}

.div-btn-login button {
    border: none;
    color: #fff;
    margin: .3rem;
    padding: .3rem .7rem;
    border-radius: 15px;
    width: 9.8rem;
    font-weight: bold;
    outline: none;
}

.div-btn-login a {
    border: none;
    color: #fff;
    margin: .3rem;
    border-radius: 15px;
    font-weight: bold;
    outline: none;
    width: 15rem !important;
    text-decoration: none;
}

.div-btn-login .btn-entrar-login {
    background: linear-gradient(to right, #FDD378, #C49150);
}

.div-btn-login .btn-cadastrar-login {
    background: linear-gradient(to right, #033659, #002A45);
}

.flex {
    display: flex;
    justify-content: center;
}


.login-logo-new {
    max-width: 12rem;
}

.div-inputs-login {
    width: 100%;
}

.div-input-login label {
    position: absolute;
    left: 5rem;
}



.div-input-login-clean label {
    color: #C49150 !important;
}

@media (max-width: 976px) {
    .box-login {
        width: 96% !important;
        justify-content: center;
        align-items: center;
        right: 2% !important;

    }

    .div-btn-login button {
        width: 100%;
    }

    .section-login::after {
        width: 100% !important;
    }

    .btn-entrar-login,
    .btn-cadastrar-login,
    .div-btn-login a {
        width: 100% !important;
    }

    .btn-entrar-login,
    .btn-cadastrar-login {
        margin: 20px 0px !important;
    }

    .version {
        margin-top: 1.5rem;
    }

    .div-btn-login {
        width: 70%;
    }

    .btn-cadastrar-login {
        margin: 0 auto !important;
    }

    .frase-login {
        display: none;
    }

}


b {
    font-weight: 600 !important;
}


.values {
    vertical-align: middle !important;
}



.btnCidadesPertencentes {
    background: #17a2b886;
    color: #fff;
    border: none;
}

.btnCidadesPertencentes:hover {
    background: #033659;
    color: #fff;
    border: none;
}


.dflex {
    display: flex !important;
}

.dfcenter {
    justify-content: center !important;
}

.itemscenter {
    align-items: center !important;
}

.inputAddCidadesRegiao {
    max-width: 95%;
}

.btnAddCidadesRegiao {
    border: none;
    background: #002A45;
    padding: 0.23rem .4rem;
    border-radius: 4px;
    margin-left: 1.2rem;

}


.btnAddCidadesRegiao i {
    color: #fff !important;
}



.fontGrey {
    color: #5a5a5a;
}

.card-footer-pers {
    display: flex;
    justify-content: end;
}

.btnNewReg {
    margin-right: 1rem;
}

.btnPesquisarReg {
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}



.swal2-cancel {
    margin-right: 1.5rem !important;

}

.btn-success,
.swal2-cancel {
    margin-bottom: 1rem;
}

.nmFantasiaList {
    color: #17a2b8;
}


.btnEditarIcon {
    color: #ffc107;
    background-color: transparent;
    border: none;
    outline: none;
}

.btnExcluirIcon {
    color: #E63946;
    background-color: transparent;
    border: none;
    outline: none;
}


.valign {
    vertical-align: middle !important;
}


.alert {
    text-align: center !important;
    color: #bd2935 !important;
    font-weight: 600;
}

.alert>b {
    font-weight: 700 !important;
}


/* Estilos gráfico dashboard */

.periodo-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

#periodo-atual {
    font-size: 18px;
    font-weight: bold;
    padding: 0 10px;
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.breadcrumb-item {
    color: #7f8c8d;
    cursor: pointer;
}

.breadcrumb-item.active {
    color: #2c3e50;
    font-weight: bold;
}

/* Gráfico */
.chart-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    position: relative;
    min-height: 400px;
    margin-bottom: 20px;
}

#loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 15px 30px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#no-data-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #7f8c8d;
    font-style: italic;
}

/* Informações do gráfico */
.chart-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.total-box {
    background-color: #ecf0f1;
    padding: 10px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.total-label {
    font-weight: bold;
}

.total-value {
    font-size: 20px;
    color: #2c3e50;
}

/* Utilitários */
.hidden {
    display: none;
}

/* Responsividade */
@media (max-width: 768px) {
    .periodo-selector {
        margin-top: 10px;
    }

    .chart-info {
        flex-direction: column;
        gap: 15px;
    }

    #back-button {
        width: 100%;
        margin-top: 10px;
    }

    #btn-voltar {
        width: 100%;
    }
}

/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Estilos para barras do gráfico */
.chart-bar:hover {
    opacity: 0.8;
    cursor: pointer;
}