/* GENERAL */
:root {
    /* COLOR */
    --contrast-main-color: #0DA5FF; /* #1E2A4D */
    --main-color: #0065A1; /* #1E2A4D */
    --main-hover-color: #213A6F;
    --light-main-color: #1E2A4D2c;
    --unfocus-color: #E7E9EA;
    --text-color: white;
    --correct-color: #00a179;
    --light-text-color: white;
    --dark-text-color: black;
    --alert-color: #D1111D;
    --warning-color: #FCBF0C;
    --background-color: #f5f5f7;

    /* TEXT */
    --title-size: 1.9rem;
    --small-title-size: 1rem;
    --paragraph-size: 1.4rem;
    --small-paragraph-size: 1.1rem;

    /* ORIGINALES */
    /* --title-size: 2rem;
    --small-title-size: 1.1rem;
    --paragraph-size: 1.5rem;
    --small-paragraph-size: 1.2rem; */
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    /* Conversión 10px = 1rem! */
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--background-color);
    margin: 0 auto;
    position: relative;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'navbar title'
                         'navbar content';
    max-width: 1920px;
    height: 100vh;
    overflow: hidden;
}

p,
td,
th,
input,
select,
option {
    font-size: var(--paragraph-size);
}

thead{
    position: relative;
    z-index: 1;
}

td{
    border: 0.1rem solid #d7d7d7;
    border-top: none;
    border-bottom: none;
}

table tbody tr:hover {
    background-color: #b9b9b9;
}

.cei-row{
    display: flex;
    flex-direction: row;
}

.text{
    font-size: var(--paragraph-size);
}

main {
    /* padding-left: 21rem; */
    padding: 1rem;
    height: 100%;
    grid-area: content;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.main-two-rows{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'element-1'
                         'element-2';
    gap: 1rem;
}

.main-two-columns{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows:1fr;
    grid-template-areas: 'element-1 element-2';
    gap: 1rem;
}
.main-two-rows .main-element-1,
.main-two-columns .main-element-1{
    grid-area: element-1;
    /* height: 100%; */
    box-sizing: border-box;
    overflow: auto;
}

.main-two-rows .main-element-2,
.main-two-columns .main-element-2{
    grid-area: element-2;
    /* height: 100%; */
    box-sizing: border-box;
    overflow: auto;
}

/* RESET CLASES BOOTSTRAP */
.modal{
    padding-top: 5rem;
}
.btn-primary{
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-primary:hover{
    background-color: var(--main-color);
    opacity: 70%;
}

.btn-primary:focus{
    background-color: var(--main-color);
    opacity: 70%;
    box-shadow: 0 0 0 0.25rem #1E2A4D40;
}

.btn-danger{
    background-color: var(--alert-color);
}

.btn-warning{
    background-color: var(--warning-color);
}

.page-item.active .page-link{
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.page-link,
.page-link:hover{
    color: var(--main-color);
}

.form-select,
.form-control{
    font-size: var(--paragraph-size);
}

.form-control:focus{
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.25rem #1E2A4D40;
}

.nav-tabs{
    background-color: white;
}

/* .nav-pills{
    border-bottom: 0.1rem solid var(--light-main-color);
} */

.nav-tabs .nav-link,
.nav-pills .nav-link{
    color: var(--main-color);
    font-size: var(--paragraph-size);
}

.nav-tabs .nav-link:hover{
    background-color: var(--light-main-color) !important;
    color: var(--main-color);
}

.nav-pills .nav-link:hover{
    background-color: var(--background-color) !important;
}

.nav-pills .nav-link.active{
    background-color: transparent !important;
    color: var(--main-color);
    border: 0.1rem solid #dee2e6;
    border-bottom: none;
    position: relative;
}

.nav-pills .nav-link.active::after {
    content: '';
    width: 100%;
    height: 0.2rem;
    position: absolute;
    bottom: -0.1rem;
    left: 0;
    right: 0;
    background-color: white;
}

.tab-content{
    padding: 1rem;
    border: 0.1rem solid #dee2e6;
    /* border-top: none; */
}

.tab-content.top-border{
    border-top: 0.1rem solid #dee2e6;
}

.dropdown-toggle::after{
    transform: rotate(-90deg);
}

.dropdown-toggle.show::after{
    transform: rotate(0deg);
}

input[type=checkbox]:checked,
input[type=radio]:checked,
.form-check-input:checked{
    background-color: var(--main-color);
    border-color: var(--main-color);
    accent-color: var(--main-color);
}

/* FIN DEL RESET DE LAS CLASES DE BOOTSRAP */

/* CLASES GENERALES */
.sticky-td{
    position: sticky;
    left: 0;
    background-color: var(--background-color);
}

.small-title {
    font-size: var(--small-title-size);
    color: var(--main-color);
}

.information-text {
    font-size: var(--small-title-size);
    font-weight: bold;
    padding-left: 0.2rem;
    margin: 0;
}

.warning-text {
    color: var(--alert-color);
}

/* RADIO BUTTONS & CHECKBOX */
.label-buttons input[type="radio"],
.label-buttons input[type="file"] {
    opacity: 0;
    position: fixed;
    width: 0;
}
.label-buttons .label-button {
    display: inline-block;
    padding: 0 1rem;
    font-size: var(--paragraph-size);
    border: 0.1rem solid #ced4da;
    margin-right: 1rem;
    border-radius: 0.2rem;
    height: max-content;
    /* iOS Safari */
    -webkit-touch-callout: none;
    /* Safari */
    -webkit-user-select: none;
    /* Konqueror HTML */
    -khtml-user-select: none;
    /* Old versions of Firefox */
    -moz-user-select: none;
    /* Internet Explorer/Edge */
    -ms-user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    user-select: none;
}
.label-buttons .label-button:hover {
   background-color: var(--light-main-color);
}
.label-buttons input[type="radio"]:checked + label,
.label-buttons input[type="checkbox"]:checked + label {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: white;
}

.label-buttons input[type="checkbox"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.noselect,
.prevent-select {
    /* iOS Safari */
    -webkit-touch-callout: none;
    /* Safari */
    -webkit-user-select: none;
    /* Konqueror HTML */
    -khtml-user-select: none;
    /* Old versions of Firefox */
    -moz-user-select: none;
    /* Internet Explorer/Edge */
    -ms-user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    user-select: none;
}

/* width */
/* ::-webkit-scrollbar {
    width: 1rem;
} */

/* Track  TODA LA BARRA (EL FONDO)*/
/* ::-webkit-scrollbar-track {
    background: white;
    border-radius: 0.5rem;
} */

/* Handle EL INDICADOR DEL SCROLL*/
/* ::-webkit-scrollbar-thumb {
    background: var(--light-main-color);
    border-radius: 0.1rem;
} */

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
    background: var(--main-color);
} */

/* CONTENEDOR PRINCIPAL */
.main-wrapper,
.content-wrapper {
    padding: 2rem;
    box-sizing: border-box;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    /* overflow: hidden; */
}

/* TITULO DE LA SECCION */
.title-section {
    grid-area: title;
    background-color: white;
    color: var(--text-color);
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    transition: 0.2s all ease;
    box-shadow: 0 0.1rem 1rem rgb(0 0 0 / 20%);
}

.title-section button {
    display: none;
    background-color: transparent;
    border: none;
}

.title-section button svg {
    fill: var(--main-color);
    height: 3rem;
    width: 3rem;
}

.title-section h2 {
    font-size: var(--title-size);
    margin: 0;
    padding-left: 1rem;
    flex-shrink: 0;
    color: var(--main-color);
    font-weight: bold;
}

/* MODAL */
.modal-title {
    font-size: 1.8rem;
    font-weight: bold;
}

.modal-description {
    font-size: 1.6rem;
}

.modal-form-label {
    font-size: 1.4rem;
}

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

.input-group .input-modal {
    width: 100%;
    font-size: 1.6rem;
}

form .modal-footer {
    padding: 1rem 0;
}

.modal-footer .btn {
    font-size: 1.4rem;
}

.cei-button {
    padding: 0.5rem 1rem;
    border: 0.1rem;
    font-size: var(--small-paragraph-size);
    background-color: var(--main-color);
    color: white;
    width: 100%;
    border-radius: 0;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    box-shadow: 0.1rem 0.1rem 0.6rem rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    
    /* iOS Safari */
    -webkit-touch-callout: none;
    /* Safari */
    -webkit-user-select: none;
    /* Konqueror HTML */
    -khtml-user-select: none;
    /* Old versions of Firefox */
    -moz-user-select: none;
    /* Internet Explorer/Edge */
    -ms-user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    user-select: none;
}

.warning-button{
    background-color: var(--warning-color);
}

.danger-button{
    background-color: var(--alert-color);
}

.cei-button:hover{
    color: white !important;
    opacity: 80%;
}

.disabled{
    cursor: default;
    pointer-events: none;
    opacity: 0.4;
}

.cei-unfocus-button {
    color: black;
    background-color: transparent;
    border: 0.1rem solid var(--unfocus-color);
}

.cei-button:disabled{
    background-color: #cfcfcf !important;
}

.secondary-button{
    border: 0.1rem solid var(--main-color);
    color: var(--main-color);
    background-color: transparent;
}

.secondary-button:hover{
    color: var(--main-color) !important;
    background-color: #1e2a4d49;
}

.text-button{
    color: var(--main-color);
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.text-button:hover{
    color: var(--main-color) !important;
    background-color: #1E2A4D2c;
}

.secondary-button.warning-button{
    border-color: var(--warning-color);
    background-color: transparent;
    color: var(--warning-color);
}

.secondary-button.warning-button:hover{
    color: var(--warning-color) !important;
    background-color: #FCBF0C38 !important;
}

.secondary-button.danger-button{
    border-color: var(--alert-color);
    background-color: transparent;
    color: var(--alert-color);
}

.secondary-button.danger-button:hover{
    color: var(--alert-color) !important;
    background-color: #d1111e38;
}

.text-button.warning-button{
    color: var(--warning-color);
}

.text-button.warning-button:hover{
    color: var(--warning-color) !important;
    background-color: #FCBF0C38;
}

.text-button.danger-button{
    color: var(--alert-color);
}

.text-button.danger-button:hover{
    color: var(--alert-color) !important;
    background-color: #d1111e38;
}

.buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
    gap: 0.5rem;
    margin-top: 2rem;
}

.alone-button{
    grid-column-start: 1;
    grid-column-end: 3;
}

.right-button{
    grid-column: 2;
}

.cei-modal {
    padding: 1rem;
    margin: 0.5rem;
}

.cei-modal h5 {
    font-size: var(--title-size);
    font-weight: bold;
    margin-bottom: 1rem;
}

.cei-modal table {
    font-size: var(--paragraph-size);
    width: 100%;
}

.cei-modal table thead {
    position: sticky;
    top: 0;
    background-color: white;
}

.cei-modal table tbody tr:not(:last-of-type) {
    border-bottom: 0.1rem dotted black;
}

.cei-modal table tfoot {
    border-top: 0.1rem solid black;
}

.cei-modal i {
    font-size: var(--small-paragraph-size);
    color: var(--main-color);
    text-align: justify;
    margin-top: 1rem;
}

.cei-modal input {
    font-size: var(--paragraph-size);
    margin-bottom: 2rem;
}

.hide {
    display: none !important;
}

.hidden-input{
    display: none;
    opacity: 0%;
    width: 0;
}

.input-wrapper{
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.input-wrapper .title{
    color: var(--main-color);
    font-size: var(--small-paragraph-size);
}

fieldset {
    min-width: initial;
    padding: 1rem;
    border: 0.1rem solid #ced4da;
}

fieldset legend {
    width: fit-content;
    padding: 0 0.5rem;
    float: none;
}

.cei-modal #costs-tbody td {
    width: 25%;
}

.toast {
    background-color: var(--main-color);
    color: white;
    font-size: var(--min-paragraph-size);
}

.cei-card {
    background: white;
    box-shadow: 0.1rem 0.1rem 1rem rgb(0 0 0 / 20%);
    box-sizing: border-box;
    padding: 1rem;
}

.main-wrapper .table-wrapper,
.content-wrapper .table-wrapper {
    overflow: auto;
    height: 100%;
    position: relative;
}

.enable-scroll,
.cei-allow-scroll {
    overflow: hidden;
}

.main-wrapper .table-wrapper table,
.content-wrapper .table-wrapper table {
    box-sizing: border-box;
    margin-top: 1rem;
}

.main-wrapper .table-wrapper table thead,
.content-wrapper .table-wrapper table thead {
    background-color: white;
    /* border-bottom: 0.2rem solid var(--main-color); */
    position: sticky;
    top: 0;
    height: 4rem;
    box-sizing: border-box;
}

.main-wrapper .table-wrapper table thead::after,
.content-wrapper .table-wrapper table thead::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 0.2rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--main-color);
}

main table tr:nth-child(2n),
main table tr:nth-child(2n) {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
}

td table thead{
    background-color: transparent !important;
    position: relative !important;
    z-index: 0 !important;
}

td table thead::after{
    display: none !important;
}

td table {
    margin-top: 0 !important;
    border-collapse: collapse;
    width: 100%;
}

td table th,
td table td{
    border: 0.1rem solid #d7d7d7;
}

td table tr:hover{
    background-color: initial !important;
}

.thead-sticky{
    position: sticky;
    top: 0;
    background-color: var(--background-color);
}

.td-sticky{
    position: sticky;
    left: 0;
    background-color: var(--background-color);
}

table tbody tr:hover .td-sticky{
    background-color: #b9b9b9;
}

.subtable{
    display: table;
    margin-top: 0;
    border-collapse: collapse;
    width: 100%;
}

.subhead{
    display: table-header-group;
    background-color: transparent;
    position: relative;
    z-index: 0;
}

.subtbody{
    display: table-row-group;
}

.subtr{
    display: table-row;
}

.subth{
    font-weight: bold;
}

.subth,
.subtd{
    display: table-cell;
    vertical-align: inherit;
    border: 0.1rem solid #d7d7d7;
}

.subtfoot{
    display: table-footer-group;
}

.select-option-wrapper{
    position: relative;
}

.select-option .cei-button{
    margin-bottom: 0.5rem;
    text-align: left;
    align-items: start;
}

/* ANIMACION DE CARGA */
.lds-ring,
.lds-cross {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--main-color) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

.lds-cross div{
    height: 100%;
    width: 1rem;
    background: var(--alert-color);
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}

.lds-cross div:nth-child(1) {
    transform: rotate(45deg);
}

.lds-cross div:nth-child(2) {
    transform: rotate(-45deg);
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* END LOADING ANIMATION */

/* RESPONSIVO */
@media screen and (max-width: 1024px) {
    body{
        height: initial;
        overflow: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            'title'
            'content';
    }

    main {
        padding: 0;
    }

    .main-two-columns{
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: 'element-1'
                            'element-2';
    }

    .title-section {
        padding: 0;
        position: sticky;
        top: 0;
        background-color: var(--background-color);
        z-index: 1049;
    }

    .title-section button {
        padding: 1rem;
        display: initial;
    }
}

@media screen and (max-width: 500px){
    .cei-button{
        padding: 1rem;
    }
}

/* IMPRESION */
@media print {
    main {
        padding-left: 0;
    }

    .input-wrapper-search {
        display: none;
    }
}

/* @media (prefers-color-scheme: dark) {
    /* PRUEBA MODO OSCURO * /
    .navbar{
        background-color: var(--main-hover-color) !important;
    }

    body,
    option{
        background-color: #030303;
    }

    .title-section,
    .main-element-1,
    .main-element-2,
    .modal-content{
        background-color: #2e2e2e;
    }

    .form-control,
    .form-select,
    fieldset{
        background-color: transparent !important;
        border-color: var(--main-color);
    }
    
    .small-title,
    .title-section h2,
    .modal-title{
        color: var(--contrast-main-color) !important;
    }

    .title-section button svg{
        fill: var(--contrast-main-color) !important;
    }

    p,
    td,
    th,
    input,
    select,
    option,
    label,
    select,
    input,
    textarea,
    legend {
        color: #FFF !important;
    }

    .secondary-button{
        border-color: var(--contrast-main-color) !important;
        color: var(--contrast-main-color) !important;
    }
} */