/* Alterações para responsividade - Jackson - 06/12/2023 */
.field-input {
    display: flex;
    gap: 1rem;
    align-items: center;
}

    .field-input div {
        width: 100%;
        max-width: 50%;
    }

@media only screen and (max-width: 768px) {
    .field-input div {
        max-width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    .field-input {
        flex-direction: column;
    }

        .field-input div {
            max-width: 100%;
        }
}

/* Pop-up de edição de apontamento */
#editBox {
    width: 100%;
    height: 90%;
    position: fixed;
    top: 2%;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
}

#formApontamentoDetalhadoEdicao {
    height: 100%;
    width: 90%;
}

.edit-modal {
    margin: 0 auto;
    width: 70%;
    height: min-content;
    overflow: auto;
    max-height: 90%;
    border-radius: 1rem;
    background: white;
    padding: 1.25rem;
    display: flex;
    gap: 4rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.75);
}


.edit-modal__title {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

.edit-modal__fields {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90%;
}

    .edit-modal__fields label {
        text-align: right;
    }

.btn-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
    .edit-modal {
        width: 90%;
    }

    .btn-group {
        flex-direction: column;
    }

    .edit-modal__fields label {
        text-align: left;
    }
}


/* Alterações para responsividade - Jackson - 22/08/2023*/

.horas-apontadas {
    background: transparent;
    display: flex;
    justify-content: flex-end;
}

    .horas-apontadas div {
        width: 100%;
        max-width: 300px;
        display: inline-flex;
        justify-content: space-between;
        gap: 2rem;
        font-size: 14px;
        background: #FFF;
        padding: 6px 18px;
        border: 1px solid #CCC;
    }

/* --- */

#topo {
    height: 130px;
    width: 100%;
    background-color: #f2f2f2;
    padding: 0 100px;
    display: flex;
    align-items: center;
}

div.logoff {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

.cabecalho {
    width: 100%;
    height: 20px;
    margin-top: 10px;
}

.conteudo {
    width: 100%;
    height: 100%;
    margin-top: 10px;
}

.rodape {
    text-align: center;
    font-size: 10px;
    font-style: italic;
    opacity: 5;
}

.esquerda {
    width: 50%;
    height: 100%;
    float: left;
    padding: 10px;
}

.direita {
    width: 50%;
    height: 100%;
    float: right;
    padding: 10px;
}

.esquerda-admin {
    width: 20%;
    height: 100%;
    float: left;
    padding: 10px;
}

.direita-admin {
    width: 80%;
    height: 100%;
    float: right;
    padding: 10px;
}

label {
    display: block;
    margin: 0 0 10px 0;
}

.table-fixed thead {
    width: 97%;
}

.table-fixed tbody {
    height: 230px;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
}

    .table-fixed tbody td, .table-fixed thead > tr > th {
        float: left;
        border-bottom-width: 0;
    }

/*table#table_year thead tr {
    width: 100%;
    display: inline-table;
}

table#table_year tbody tr {
    width: 100%;
    display: inline-table;
}

table#table_year {
    height: 300px;
}

table#table_year tbody {
    overflow-y: scroll;
    height: 200px;
    width: 100%;
    position: absolute;
}*/

.componente_data {
    width: 90px;
}

.inline {
    display: inline-block;
}

table {
    border-collapse: collapse;
    width: 100%;
}

    table#esquerda {
        width: 300px;
    }

    table#resumo {
        width: 100%;
    }

    table td {
        padding: 2px 0 2px 8px; /* pixels */
        border-right: 1px solid #D4D4D4; /* to avoid the hacks for the padding */
        border-bottom: 1px solid #D4D4D4;
    }

    table#historico_anual {
        height: 100px;
    }

.col-sm-2-time {
    width: 125px;
}

.col-sm-3-larger {
    width: 26%;
}

.field-validation-valid {
    display: block;
}

span.field-validation-valid {
    display: block;
}

/*the basics, and works for FF*/
#divProcessing {
    top: 0;
    left: 0;
    position: fixed;
    height: 100%;
    z-index: 9999;
    width: 100%;
    clear: none;
    background: #0F0F0F;
    opacity: 0.6;
    /*background-color:#666666;
	border:1px solid #000000;*/
}

/*IE will need an 'adjustment'*/
/** html #divProcessing {
    position: absolute;
    height: expression(document.body.scrollHeight >
    document .body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}*/

/*Início de folha de estila barra de navegação*/
.nav {
    width: 100%;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

    .nav li {
        float: left;
        width: 14.2857%;
        text-align: center;
    }

        .nav li a {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            font-weight: bold;
            color: #069;
            border-right: 1px solid #ccc;
        }

            .nav li a:hover {
                color: #c00;
                background-color: #fff;
            }

        .nav li ul {
            position: absolute;
            left: 0;
            background-color: #f2f2f2;
            padding: 0;
            display: none;
            z-index: 1;
        }

        .nav li:hover ul, .nav li.over ul {
            display: block;
        }

        .nav li ul li {
            border: 1px solid #c0c0c0;
            display: block;
            width: 100%;
            z-index: -1;
        }
/* Final estilo barra de navegação. */

#geral {
    background-color: #f2f2f2;
    width: 100%;
    padding: 20px 100px;
}

#rodape {
    width: 100%;
    padding: 10px;
    font-style: italic;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    color: #069;
    text-align: center;
}


hr {
    border-top: 1px solid #ccc;
}


/* Ajustes de responsividade */
@media screen and (max-width: 1024px) {
    /* Barra de navegação */
    .nav li {
        width: auto;
    }

        .nav li a {
            padding: 10px 20px;
        }

    /* Div Principal */
    #geral {
        padding: 20px;
    }

    .esquerda {
        width: 100%;
    }

    .direita {
        width: 100%;
        overflow: scroll;
    }

    .col-sm-2-time {
        width: 66.66666667%;
    }

    .fullwidth-button {
        width: 100%;
    }

    legend {
        padding: 0 20px;
        text-align: center;
    }

    .esquerda-admin {
        width: 100%;
    }
}


@media screen and (max-width: 768px) {
    /* Barra de navegação */
    .nav li {
        width: auto;
    }

        .nav li a {
            padding: 10px 20px;
        }

    /* Div Principal */
    #geral {
        padding: 20px;
    }

    .esquerda {
        width: 100%;
    }

    .direita {
        width: 100%;
        overflow: scroll;
    }

    .col-sm-2-time {
        width: 66.66666667%;
    }

    .fullwidth-button {
        width: 100%;
    }

    legend {
        padding: 0 20px;
        text-align: center;
    }

    .esquerda-admin {
        width: 100%;
    }
}


@media screen and (max-width: 600px) {
    .col-sm-2-time {
        width: auto;
    }

    .nav li a {
        padding: 10px;
    }

    #topo {
        gap: 4rem;
        justify-content: space-around;
    }

    .horas-apontadas div {
        max-width: 100%;
    }
}