body {
    background:#111111;
    font-family: 'DM Sans', sans-serif;
    font-size:16px;
    transition:linear 0.2s;
    color: #F9F9F9;
    box-sizing: border-box;
}

* {
    margin:0;
    padding:0;
    transition: 0.2s
}

p { padding:5px 0 }

.flex-container {
    width:100%;
    display:flex;
    flex-direction: column;
    box-sizing: border-box;
}

.flex-row {
    width:100%;
    display:flex;
    flex-direction: row;
    box-sizing: border-box;
}

.flex-column {
    display:flex;
    flex-direction: row;
    box-sizing: border-box;
}

.inner {
    width:100%;
    display:flex;
    box-sizing: border-box;
    padding:10px 30px;
    box-sizing: border-box;
}

.main { padding:80px 0 0 0}

.center { align-items:center }
.top { align-items:flex-start }
.end { align-items:flex-end }

.justify-center { justify-content:center }
.justify-left { justify-content:left }
.justify-right { justify-content:right }

.sb { justify-content:space-between }
.sa { justify-content:space-around }
.ss { justify-content:space-stretch }

.half { width:50%; display:flex; flex-wrap:wrap; }
.third { width:33%; display:flex; flex-wrap:wrap; }
.quarter { width:25%; display:flex; flex-wrap:wrap; }
.quinto { width:20%; display:flex; flex-wrap:wrap;}
.dois-quintos { width:40%; display:flex; flex-wrap:wrap; }
.tres-quintos { width:60%; display:flex; flex-wrap:wrap; }



.nav-mobile {
    padding: 30px;
}

.user-icon {
    width: 32px;
    height: 32px;
    border-radius: 980px;
}

.user-icon.big {
    width: 64px;
    height: 64px;
    border-radius: 980px;
}

.titulo h1 {
    font-size: 2em;
}



/* HEADER */

#header-desktop { 
    display: flex;
    padding:20px 30px;
}

#header-mobile, .nav-mobile { display: none }

#titulo {
    padding: 10px 30px;
}

.header {
    width: 100%;
    position: fixed;
    top:0;
    background: #111111;
    font-size: 0.9em;
    margin: 0;
    padding:;
}

.header .nav a, .header.mobile .nav a, .nav a {
    text-decoration: none;
    background:#232323;
    color:#F9F9F9;
    border:1px solid #232323;
    border-radius:980px;
    padding:8px 16px;
    margin:0;
    line-height: 2.5em;
    hyphens: none !important;
    white-space: nowrap !important;
}

.header .nav a:visited, .header.mobile .nav a:visited, .nav a:visited {
    background:#232323;
    color:#F9F9F9;
}

.header .nav a:hover, .header.mobile .nav a:hover, .nav a:hover {
    color:#F9F9F9;
    border:1px solid #444444;
}

.header .nav a.active, .header.mobile .nav a:active, .nav a:active {
    border:1px solid #0071E3;
    background: #0071E3;
    color:#F9F9F9;
}

.header .nav-mobile a.active, .header.mobile .nav a.active {
    border:1px solid #0071E3;
    background: #0071E3;
    color:#F9F9F9;
}



ul.nav-top {
    display: flex;
    flex-direction: row;
    list-style-type:none;
    padding:0 auto;
}

ul.nav-top li {
    padding: 0 10px 0 0;
}

.search {
    margin-right:20px
}

.search svg{
    fill: #D2D2D7;
}

.search input[type="text"], .search select {
    font-family: 'Urbanist', sans-serif;
    width: 250px;
    padding: 10px 16px ;
    margin:0;
    background:#232323;
    outline: none;
    border:1px solid #232323;
    border-radius: 980px;
    font-size:0.9em;
    color:#F9F9F9;
    
}

.search button[type="submit"]{
    width: 40px;
    height: 40px;
    margin:0 -46px;
    border:1px solid transparent;
    border-radius: 980px;
    background:transparent;
    color:#F9F9F9;
    outline:none;
    font-size:0.9em
}

/* DASHBOARD */

.dash-cards {
    width: 100%;
    display: flex;
    flex:1;
    gap: 5px 5px;
    overflow-x: auto;
}

.dash-cards::-webkit-scrollbar {
    display: none;
}

.dash-card {
    min-height:33vh;
    max-width:20vw;
    background: #232323;
    border-radius: 30px;
    border: 2px solid #232323;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-basis: 20vw;
    flex-grow: 1;
    padding: 20px;
    margin:0;
    color:#F9F9F9;
}

.dash-line {
    width: 100%;
    display:flex;
    gap:3px;
}

.dash-space {
    display: flex;
    flex-wrap: wrap;
    gap:3px;
    margin-bottom:3px;
    overflow: hidden;
}

.dash-card:hover {
    border:2px solid #35ce8d
}

.dash-card.blue {
    background:#0071E3;
    color:#ffffff;
    border:2px solid #0071E3;

}

.dash-card.blue:hover {
    border:2px solid #E7E5E6
}

.dash-card.grey {
    background:#E7E5E6;
    color:#232323;
    border:2px solid #E7E5E6;
}

.dash-card.grey:hover {
    border:2px solid #35ce8d
}

.dash-badge {
    width: 26px;
    height: 26px;
    fill:#0071E3;
}

.dash-icon {
    width: 36px;
    height: 36px;
    border:3px solid #666666;
    border-radius:980px;
    text-align:center;
    vertical-align:20em;
    color:#232323
}

.dash-btn svg {
    fill:#666666;
}

.dash-btn.blue svg {
    fill:#F9F9F9;
    margin-top:8px
}

.dash-icon.valor {
    background: #35ce8d;
    border:3px solid #F1F1F1;
}

.dash-icon.blue {
    border: 3px solid #F9F9F990;
}

.dash-icon svg {
    margin-top: 10px;
    fill:#666666
}

.dash-icon.grey svg {
    fill:#666666
}


.dash-icon.blue svg {
    fill:#F9F9F995
}

.dash-icon.valor svg {
    fill:#232323
}

.dash-card h2 {
    line-height: 0.8em;
}

.dash-card h2::after {
    color:#F9F9F9;
    font-size:0.4em;
    line-height:0;
    width: 22px;
    height: 22px;
    border-radius: 980px;
    margin-left:-8px;
    vertical-align: 1.2em;
    opacity:0.9
}

.dash-card h2.grow::after {
    content: "+";
    background:#35ce8d;
    border:2px solid #35ce8d;
    padding:0px 8px;

}

.dash-card h2.down::after {
    content: "-";
    background:#ff674d;
    border:2px solid #ff674d;
    padding:0px 9px;
}

.dash-card h3 {
    font-weight: 600;
}

.dash-value {
    font-size:4em;
}

.dash-label {
    color:#ACACAC;
}

.dash-label.blue {
    color:#F9F9F9
}

.title  {
    width: 100%;
    padding-bottom: 20px;
}


/* TABELA DO FOLLOW DE APROVADOS */

/* TABELA DA VISÃO GERAL */

.table-follow {
    padding: 30px;
}

.linha-clicavel {
    cursor: pointer;
}

.table-follow table a :hover { color:#FFFFFF }

.table-follow table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.7em;
    border-radius:4px;
  }

.coluna-esquerda { text-align:left !important }

.table-follow table th {
    padding:12px 20px;
    border: 1px solid #ccc;
    background: #0071E3;
    color:#FFFFFF;
    border:1px solid #00000020;
    text-align: center !important;
    font-size: 1em;

}

.table-follow table thead:hover {
    background: #FFFFFF; /* cor de fundo para a linha em hover */
    color: #FFFFFF;
}

.table-follow table tr:nth-child(odd) {
    background-color: #F1F1F110; /* cor de fundo para linhas ímpares */
}
  
.table-follow table tr:nth-child(even) {
    background-color: #F1F1F108; /* cor de fundo para linhas pares */
}

.table-follow table tr:hover {
    background: #0071E3; /* cor de fundo para a linha em hover */
    border:1px solid #0071E3;
    color: #FFFFFF;
}

.table-follow table td {
    padding: 8px;
    border: 1px solid #00000020;
    white-space: nowrap;
}

.table-follow table td>p { white-space: nowrap;}

.table-thumb {
    background: #0071E3;
    width: 16px;
    height: 16px;
    margin: 0 10px auto 10px;
    border:1px solid #0071E3;
    border-radius: 980px;
    vertical-align: text-bottom;
}

tr.linha-clicavel:hover .table-thumb {
    border:1px solid #FFFFFF;
}

span.table-label {
    font-size: 0.6em;
    font-weight:bold;
    border:1px solid #0071E3;
    padding:6px 10px 5px 10px;
    border-radius: 980px;
    text-transform: uppercase;
    letter-spacing:0.1em;
    hyphens: none !important;
    white-space: nowrap !important;
}

.table-label.producao {
    background: #0071E3;
    color:#FFFFFF;
    border:1px solid #0071E350;
}
tr.linha-clicavel:hover .table-label.producao{
    border:1px solid #FFFFFF;
}


/* BREADCRUMBS */

.breadcrumbs { font-size:0.7em; text-transform:uppercase; letter-spacing:1px; line-height:23px; color:#F1F1F130 }
.breadcrumbs a { color:#F1F1F130; text-decoration:none; }
.breadcrumbs a:hover { color:#0071E3 }

.btn-blue {
    font-size: 17px;
    font-weight: 400;
    background-color: #0071E3;
    color:#FFFFFF;
    text-decoration:none;
    border:1px solid #0071E3; 
    border-radius: 980px;
    padding: 11px 17px 11px 17px;
    transition:0.2s;
    hyphens:none !important;
}

.btn-blue:hover {
    border:1px solid #0071E3;
    background: #FFFFFF;
    color:#0071E3;
    
}

/* TOP PALESTRANTES DO MÊS */

.dash-cards {
    padding: 10px 0 0 10px;
}

.top-card {
    text-align: center;
    padding: 7px;
}

.top-card .user-icon {
    width: 72px;
    height: 72px;
    margin: 10px 0 -8px 0;
    border: 1px solid #111111;
}

.top-card:first-child .user-icon{
    border: 4px solid #35ce8d;
}

.top-card p {
    font-size: 0.7em;
    margin-top: 6px;
}

.top-value {
    background: #11111199;
    border:1px solid #0071E3;
    border-radius: 980px;
    font-size: 0.8em;
    padding: 3px 9px;
    margin:0 0 0 -30px; 
    color:#F9F9F9;
    font-weight: bold;
    text-align: left;
}
/*
.top-value {
    background: #00000099;
    border:2px solid #444444;
    border-radius:980px;
    padding: 4px 10px;
    color:#F9F9F9;
    font-weight: bold;
}*/



select#consulta{
    border-radius:980px;
    padding:
}

form#consulta-mes submit {
    background: #F1F1F1;
    border-radius:0 980px 980px 0;
}


.section {
    background: #FFFFFF;
    border: 1px solid #73737330;
    padding: 25px 20px 15px 20px;
    margin:0 0 20px 0;
    border-radius:4px 
}

.end {
    align-items:flex-end;
}

.logo{
    font-weight: bold;
    color:#F9F9F9
}

ul.logo {
    display:flex;
    list-style-type: none;
    gap:8px;
    font-size:1.1em;
    justify-content: center;
}


.debug { border:1px solid green }
.sigo { font-weight:bold }



/* LOGIN PAGE */

.login {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.login-card {
    min-height:62vh;
    min-width:22vw;
    max-width: 22vw;
    background: #none;
    border-radius: 30px;
    border: 2px solid #232323;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-basis: auto; /* default value */
    flex-grow: 1;
    padding:40px 30px;
    margin:0;
    color:#F9F9F9
}

.login svg{
    fill: #D2D2D7;
}

.login h1 {
    line-height:35px;
    margin-top: 20px;
}

.login input[type="text"], .login input[type="password"] {
    font-family: 'DM Sans', sans-serif;
    width: 88%;
    padding: 10px 16px ;
    margin:5px 0;
    background:#232323;
    outline: none;
    border:1px solid #232323;
    border-radius: 980px;
    font-size:0.9em;
    color:#F9F9F9;
    
}

.login input[type="submit"]{
    height: 40px;
    border:1px solid transparent;
    border-radius: 980px;
    padding: 11px 22px;
    background:#0071E3;
    color:#F9F9F9;
    outline:none;
    font-size:0.9em;
    margin:10px 0 0 0
}

.login .dash-senha {
    padding:20px 0 0 0;
    font-size:0.8em;
}

.login a {
    color:#666666;
    text-decoration: none;
}

.login a:hover {
    color:#0071E3
}

/* FOOTER */

.footer {
    background:#D2D2D750;
    font-size: 0.8em;
    padding: 20px 0;
    margin:0;
    border-top: 1px solid #D2D2D7;
}

.header-mobile {
    padding: 0;
}



/* INICIO DO CODIGO PARA MOBILE */ 

@media (max-width: 960px) {
    /* Estilos para dispositivos com largura igual ou inferior a 375 pixels */
    /* Adicione aqui os estilos específicos para iPhones */

    #header-desktop { display: none }

    #header-mobile, .nav-mobile {
        display: flex;
        padding: 20px 20px;
        z-index: 999;
    }

    ul.logo {
        font-size:1.3em;
    }

    #nav-back svg {
        fill: #F9F9F9;
        width: 26px;
        height: 26px;
    }

    #titulo { padding: 0 20px }

    .header.mobile .nav a {
        text-decoration: none;
        background:#232323;
        color:#F9F9F9;
        border:1px solid #444444;
        border-radius:980px;
        padding:8px 16px;
        margin:0;
    }
    
    .header.mobile .nav a:visited {
        background:#232323;
        color:#F9F9F9;
    }
    
    .header.mobile .nav a:hover {
        color:#F9F9F9;
        border:1px solid #444444;
    }
    
    .header.mobile .nav a:active {
        border:1px solid #0071E3;
        background: #0071E3;
        color:#F9F9F9;
    }
    
    .header.mobile .nav a.active {
        border:1px solid #0071E3;
        background: #0071E3;
        color:#F9F9F9;
    }

    .inner {
        padding: 0 10px;
    }

    ul.nav-top li {
        padding: 0 6px 0 0;
    }

    .nav-mobile {
        display: flex;
        margin: 0;
        padding:35px 10px;
        overflow-x: auto;
        z-index:998;
    }

    .nav-mobile::-webkit-scrollbar {
        display: none;
    }
    
    .nav-mobile a {
        text-decoration: none;
        background:#232323;
        color:#F9F9F9;
        border:1px solid #333333;
        border-radius:980px;
        padding:8px 16px;
        margin:0;
    }

    .nav-mobile a:active {
        border:1px solid #0071E3;
        background: #0071E3;
        color:#F9F9F9;
    }

    .nav-mobile a.active {
        border:1px solid #0071E3;
        background: #0071E3;
        color:#F9F9F9;
    }


    /* CARDS DASHBOARD */

    .dash-cards {
        padding: 0 10px;
        margin-bottom: 30px; }

    .dash-card {
        min-width: 50vw;
        max-width: 50vw;
        max-height: 27vh;
        min-height: 27vh;
        box-sizing: border-box;
        padding:18px 18px 0 18px;
    }

    .dash-value {
        font-size: 2.3em;
    }

    .dash-card h2.grow::after {
        padding:0px 5px;
    
    }
    
    .dash-card h2.down::after {
        padding:0px 6px;
    }

    .dash-card h3 {
        font-size: 1.2em;
    }

    .dash-icon {
        border:1px solid #666666;
    }

    .dash-btn {
        border:0;
        margin:5px 5px;
    }

    .dash-icon svg {
        margin-top: 6px;
        fill:#666666
    }

    /* PALESTRANTES AREA */

    .dash-card.palestrantes {
        min-height:10vh;
        background: #232323;
        border-radius: 30px;
        border: 2px solid #232323;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        flex-basis: 40%; /* default value */
        flex-grow: 1;
        padding: 20px;
        margin:0;
        color:#F9F9F9
    }

    /* LOGIN AREA */

    .login {
        height: 100vh;
    }

    .login-card {
        min-height:70vh;
        min-width:85vw;
        max-width:85vw;
        background: none;
        border-radius: 30px;
        border: 2px solid #232323;
        box-sizing: border-box;
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        flex-basis: auto; /* default value */
        flex-grow: 1;
        padding:40px 30px 20px;
        margin:0;
    }

    .login input[type="text"], .login input[type="password"] {
        padding: 15px 16px ;
        margin:5px 0;
        font-size:1em;
    }
    
    .login input[type="submit"]{
        height: 40px;
        padding: 12px 22px;
        font-size:1em;
        margin:10px 0 0 0
    }
    
    .dash-line {
        width: 100%;
        display:flex;
        height: fit-content;
    }
    
    .dash-space {
        display: flex;
        flex-wrap: nowrap;
        gap:3px;
        margin-bottom:3px;
        overflow: hidden;
        flex:1
    }
    
    .dash-card:hover {
        border:2px solid #35ce8d
    }
    
    .dash-card.blue {
        background:#0071E3;
        color:#ffffff;
        border:2px solid #0071E3;
    
    }
    
    .dash-card.blue:hover {
        border:2px solid #E7E5E6
    }
    
    .dash-card.grey {
        background:#E7E5E6;
        color:#232323;
        border:2px solid #E7E5E6;
    }
    
    .dash-card.grey:hover {
        border:2px solid #35ce8d
    }
    
    .dash-icon {
        width: 28px;
        height: 28px;
        border:3px solid #666666;
        border-radius:980px;
        text-align:center;
        vertical-align:20em;
        color:#232323
    }

    .footer {
        background:none;
        border:0
    }




}