@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300&family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&family=Montserrat&family=Poppins:wght@300&family=Source+Sans+3&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*/
:root {
    --mud-palette-table-lines: black !important;
    --colorSecundarioTitulos: #1089B8;
    --buttonBgColor: #158BB9;
    --buttonTextColor: rgba(255, 255, 255, 1);
    --tableSubtitleColor: rgba(99, 175, 65, 1);
    --colorFondoGeneral: rgba(248, 248, 248, 1);
    --colorFondoTextInput: rgba(237, 237, 237, 1);
    --colorPlaceHolderTextInput: #B9B9B9;
    --colorScrollBars: #158BB9;
    --colorBordeFilas: #EDEDED;
    --fondoTablasList: #F8F8F8;
    --colorFondoCabeceraBloquesForm: #96CFEA;
    --headerNavHeight: 75px;
    --footerHeight: 60px;
}

* {
    scrollbar-color: var(--colorScrollBars) white !important;
    font-family: 'Montserrat';
}

.invalid,
.error-input {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.bg-light-red {
    background-color: #f36767 !important;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

a {
    text-decoration: none !important;
    transition: background-color ease 0.5s;
}

    a.active {
        background-color: rgba(216, 216, 216, 1);
    }

.mud-select,
.mud-picker-inline {
    flex-grow: 0 !important;
}

.mud-input-control.mud-select,
.mud-input-control.mud-picker-inline {
    flex-grow: 1 !important;
}
/*PAGINA*/
.default-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--buttonBgColor);
    color: var(--buttonTextColor);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 300;
    padding: 1px 12px;
    border-radius: 4px;
}

    .default-button:hover, .bt-modal:hover {
        color: var(--buttonTextColor);
    }

.layoutPages > form {
    height: 100%;
}

.cabeceraPage {
    display: flex;
    height: 70px;
    align-items: center;
}

    .cabeceraPage > div {
        flex: 1;
    }

        .cabeceraPage > div:first-child {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: flex-start;
        }

.textVolverAtras {
    color: #6F6F6F;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cabeceraPage > div:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: end;
}

.titlePage {
    color: #000;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.bodyPage {
    border: solid 1px black;
    height: calc(100% - 90px);
    max-height: calc(100% - 90px);
    width: 100%;
    overflow-y: auto;
    background-color: #EBEBEB;
}

/*LISTA*/
.cabeceraListado {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    padding-right: 21px;
    padding-left: 10px;
    border: 1px solid black;
    background-color: white;
}

    .cabeceraListado > div:first-child > span {
        color: #000;
        font-family: Poppins;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

/*Tabla*/
.bodyListado {
    height: 100%;
    overflow-y: auto;
}

    .bodyListado .mud-table-cell {
        border-color: var(--colorBordeFilas);
    }

.headlessTableRow {
    border-style: solid;
    border-width: 1px;
    border-color: var(--colorBordeFilas);
    background-color: white;
    height: 20px;
    padding: 0px 12px;
}

.cursor-pointer:hover {
    cursor: pointer;
}

.w-max-content {
    width: max-content;
}

.titulosListado {
    display: flex;
    height: 48px;
    padding-right: 50%;
    align-items: center;
    justify-content: space-between;
    padding-left: 57px;
    background-color: white;
    border: solid 1px black;
}

    .titulosListado > div:not(:first-child) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.colLeftFila > div:not(:first-child) {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titulosListado > div:first-child {
    flex: 1;
    display: flex;
    justify-content: start;
    align-items: center;
}

.colLeftFila > div:first-child {
    flex: 1;
    display: flex;
    justify-content: start;
    align-items: center;
}


.footerListado {
    display: flex;
    justify-content: end;
    padding: 20px 0px;
}

    .footerListado > a, .footerListado > button {
        padding: 5px 0px;
        text-decoration: none;
        width: 100px;
    }


.lista {
    height: calc(100% - 48px);
    max-height: calc(100% - 48px);
    overflow-y: auto;
}

.filaLista {
    display: flex;
    justify-content: space-between;
    height: 48px;
    background-color: white;
    border: 1px solid black;
}

.colLeftFila {
    display: flex;
    width: 50%;
    padding-left: 57px;
    align-items: center;
    justify-content: space-between;
}

.colRightFila {
    display: flex;
    width: 50%;
    align-items: center;
    padding-right: 18px;
    padding-left: 250px;
    justify-content: space-between;
}

    .colRightFila > a, .colRightFila > button {
        display: flex;
        width: 124px;
        height: 32px;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
        background-color: white;
        color: black;
    }




/*MODAL DELETE*/
.contentModalDelete {
    padding: 20px;
}

.mud-dialog.contentModalDelete .mud-dialog-content {
    padding-right: 50px;
    padding-left: 50px;
    text-align: center;
}

.mud-dialog.contentModalDelete .mud-dialog-actions {
    display: flex;
    justify-content: end;
    align-items: center;
}

.contentModalDelete > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
}

/*READ*/
.cabecerarRead {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: start;
    padding-left: 26px;
    border: 1px solid black;
    background-color: white;
}

    .cabecerarRead span {
        color: #000;
        font-family: Poppins;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.bodyRead {
    height: calc(100% - 120px);
    max-height: calc(100% - 120px);
    overflow-y: auto;
    border: solid 1px black;
}

.readInfoGeneral {
    padding-top: 15px;
    padding-left: 26px;
    padding-bottom: 15px;
    padding-right: 26px;
    border: 1px solid black;
    background-color: #F8F8F8;
}

.establecimientosInfoGeneral {
    padding-left: 26px;
    padding-top: 28px;
    padding-bottom: 30px;
    padding-right: 26px;
    border: 1px solid black;
    background-color: #F8F8F8;
}

.containerEstablecimientos > div {
    padding-top: 5px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 4px;
    background-color: white;
    border: 1px solid black;
    margin-bottom: 5px;
}

.w-10 {
    width: 10%;
}
/*
.listFormacionesAsignadas {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

    .listFormacionesAsignadas > div {
        display: flex;
        max-width: 400px;
        border: 1px solid black;
        margin-top: 5px;
    }

        .listFormacionesAsignadas > div > button, .listFormacionesAsignadas > div > span {
            text-align: left;
            color: #000;
            font-family: Josefin Sans;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .listFormacionesAsignadas > div > span {
            margin-right: 20px;
            flex:80%;
        }
*/
.selectAndBtn {
    display: flex;
    margin-top: 20px;
}

    .selectAndBtn > div:first-child {
        flex: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .selectAndBtn > div:nth-child(2) {
        flex: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        border: 1px solid black;
    }

        .selectAndBtn > div:nth-child(2) > button {
            color: #000;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.height-30px {
    height: 30px !important;
}

.height-200px {
    height: 200px;
}

.minHeight-200px {
    min-height: 200px;
}

.maxHeight-200px {
    max-height: 200px;
}

.w-40 {
    width: 40%;
}

.w-55 {
    width: 55%;
}

.w-65 {
    width: 65%;
}

.w-85 {
    width: 85%;
}

.w-250px {
    width: 250px;
}

.fontSize-12px {
    font-size: 12px;
}

.fontSize-14px {
    font-size: 14px;
}


.fontSize-16px {
    font-size: 16px;
}

.fontSize-17px {
    font-size: 17px;
}

.fontSize-18px {
    font-size: 18px;
}

.fontSize-20px {
    font-size: 20px;
}

.fontSize-24px {
    font-size: 24px;
}

.fw-600 {
    font-weight: 600;
}

.btnCancelOkModals {
    width: 160px;
    border: solid 1px black;
    text-align: center;
}

.borderRadiusNone {
    border-radius: 0 !important;
}

.mudSelect {
    background-color: transparent !important;
}

    .mudSelect > div > div:first-child {
        border: 1px solid black !important;
        background-color: white;
    }

    .mudSelect.mud-input-control {
        margin-top: 0;
        padding: 0 !important;
    }

        .mudSelect.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
            margin-top: 0;
        }

    .mudSelect.mud-select .mud-select-input .mud-input-slot {
        padding: 0.5rem;
    }

.mudDatePickerSinMargen > div {
    margin: 0 !important;
}

    .mudDatePickerSinMargen > div > div {
        margin: 0 !important;
    }

        .mudDatePickerSinMargen > div > div > div {
            margin: 0 !important;
            padding-left: 4px;
        }

.mudDatePickerSinMargenTextCenter input {
    text-align: center;
}

.mudDatePickerSinMargenTextDark input {
    color: black !important;
}

.placeholderDark::placeholder {
    color: black;
}

.mudDatePickerSinMargenTextDark input::placeholder {
    color: black !important;
}

.btnDeleteElementList {
    border: solid 1px black;
    padding: 0px 0px 0px 0px;
    height: 20px;
    width: 20px;
    padding-bottom: 3px;
}

    .btnDeleteElementList > span {
        font-size: 35px;
        font-weight: 100;
    }

.mud-button-root.boton-tipos-puntos-actuacion-tarea:disabled {
    background-color: #F0F0F0;
    color: var(--mud-palette-text-primary) !important;
}

.mud-expand-panel.padding-header-expansion-panel-registros .mud-expand-panel-header {
    padding: 0px 12px;
}

.containerBody > .mud-drawer.mud-drawer-responsive,
.containerBody > .mud-drawer.mud-drawer-persistent {
    height: auto;
}

button[disabled]:hover {
    cursor: default;
}

.containerNavLeft {
    height: calc(100vh - var(--headerNavHeight));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    overflow-y: auto;
}

    .containerNavLeft .opcion-menu a {
        padding: 15px;
        display: flex;
        align-items: center;
        column-gap: 5px;
        border-radius: 4px;
    }

        .containerNavLeft .opcion-menu a.active {
            background-color: #D5EDF6;
        }

    .containerNavLeft .opcion-menu > a > img,
    .containerNavLeft .mud-expand-panel .mud-expand-panel-header {
        width: 20px;
    }

    .containerNavLeft .opcion-menu > a > span,
    .containerNavLeft .mud-expand-panel .mud-expand-panel-header {
        font-size: 15px;
        font-family: 'Poppins',sans-serif;
        font-weight: 600;
    }

    .containerNavLeft .mud-expand-panel-content {
        padding-right: 0px !important;
    }

        .containerNavLeft .mud-expand-panel-content .opcion-menu > a {
            padding: 10px 0px 10px 10px;
        }

            .containerNavLeft .mud-expand-panel-content .opcion-menu > a > img {
                width: 15px;
            }

            .containerNavLeft .mud-expand-panel-content .opcion-menu > a > span {
                font-size: 14px;
            }

.navLefFooter {
    margin: 0px 10px;
    padding: 10px 0px 15px 0px;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: rgba(235, 235, 235, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 3px;
}

    .navLefFooter > span {
        font-size: 14px;
        color: rgba(146, 146, 146, 1);
        font-family: 'Poppins', sans-serif;
        font-weight: 200;
    }

    .navLefFooter > img {
        height: 36px;
    }

.containerQuestions {
    width: 50px;
    border-radius: 60px;
    margin: 30px auto 0 auto;
}

    .containerQuestions > span {
        font-size: 20px;
    }

.containerBody {
    width: 100%;
    height: calc(100vh - var(--headerNavHeight));
    max-height: calc(100vh - var(--headerNavHeight));
    display: flex;
}

.pageContent {
    height: calc(100vh - var(--headerNavHeight));
    max-height: calc(100vh - var(--headerNavHeight));
    width: 100%;
    overflow-y: auto;
}

.footer {
    position: absolute;
    bottom: 0px;
    left: 50%;
    height: var(--footerHeight);
}

    .footer > img {
        height: 100%;
        padding: 15px 0;
    }

.containerPagesBody {
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.layoutPages {
    height: 100%;
    padding: 0px;
}

.containerNavTop {
    height: var(--headerNavHeight);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 1px solid black;
}

.btnUser {
    height: 30px;
    padding: 0 5px 0 5px;
    border: solid black 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btnUser > span {
        color: #000;
        text-align: center;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.btnHmbg {
    height: 30px;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-evenly;
}

    .btnHmbg > div {
        height: 2px;
        width: 30px;
        background-color: black;
    }

        .btnHmbg > div:last-child {
            width: 24px;
            background-color: #1089B8;
        }

.loginBody {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--colorFondoGeneral);
}

.containerLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
    padding: 90px 100px;
    background-color: white;
    box-shadow: 0px 4px 4px 0px #D2D2D240;
}

    .containerLogin img {
        width: 100%;
        margin-bottom: 30px;
    }

.loginButton {
    font-size: 18px !important;
    padding: 7px 10px !important;
}

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

.campo-login {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
}

    .campo-login > label {
        padding-left: 10px;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: black;
    }

.olvidadoContraText {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

    .olvidadoContraText a {
        color: #1E7ACF !important;
        text-decoration: underline !important;
    }

.footerLogin {
    position: absolute;
    height: 5vh;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4vh;
}


.loginInput {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    background-color: white !important;
}


.containerLogoHosbec {
    width: 621px;
    height: 261px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px black;
    margin-bottom: 27px;
}

    .containerLogoHosbec > span {
        color: #000;
        text-align: center;
        font-family: Poppins;
        font-size: 48px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.bt-nuevo-elemento {
    font-size: 17px;
    font-weight: 500;
    padding: 3px 12px;
}

.row-buttons-container {
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: 8px;
}

.table-button {
    width: 100px;
    column-gap: 5px;
}

.buscador {
    width: 220px;
    display: flex;
    align-items: center;
    padding: 3px 20px;
    column-gap: 15px;
    background-color: var(--colorFondoTextInput);
    border-radius: 4px;
}

    .buscador > img {
        width: 14px;
    }

    .buscador > input {
        all: unset;
        background: none;
        min-width: 0px;
        border-style: none;
        font-size: 17px;
        flex: 1 1 0px;
        transform: translateY(2px);
    }

        .buscador > input::placeholder {
            color: var(--colorPlaceHolderTextInput);
        }

.body-general {
    background-color: var(--colorFondoGeneral);
    padding: 24px 20px 0px 20px;
    height: 100%;
}

/*Forms*/
.container-form {
    padding: 0px 15px;
    background-color: white;
    height: calc(100% - var(--footerHeight));
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 4px 0px #D2D2D240;
}

.titulo-pagina {
    display: flex;
    column-gap: 15px;
    align-items: center;
    font-size: 32px;
    color: black;
    font-family: 'Poppins',sans-serif;
    font-weight: 600;
}

    .titulo-pagina > a {
        text-decoration: none;
        color: black;
    }

        .titulo-pagina > a:hover {
            text-decoration: none;
            color: #0a58ca;
        }

    .titulo-pagina > span:nth-child(n+2) {
        color: var(--colorSecundarioTitulos);
    }

/*Cabecera forms*/
.cabecera-estandar {
    padding: 10px 0px 10px 5px;
}

.cabecera-botones {
    padding: 10px 0px 10px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .cabecera-botones > div:nth-child(2) {
        display: flex;
        align-items: center;
        column-gap: 5px;
    }

/*Contenido Forms*/
.contenido-form {
    height: 100%;
    overflow-y: auto;
}

.cabecera-bloque-form,
.modalBase .mud-dialog-title {
    padding: 15px 15px;
    background-color: var(--colorFondoCabeceraBloquesForm);
    border-radius: 4px;
    box-shadow: 0px 1px 4px 0px #D2D2D240;
    display: flex;
    align-items: center;
}

    .cabecera-bloque-form > img{
        height:16px;
    }

    .modalError .mud-dialog-title {
        background-color: #e57158;
    }

.cabecera-bloque-form > span,
.modalBase .mud-dialog-title h6 {
    color: black;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}


.bloque-form {
    background-color: var(--colorFondoGeneral);
    /*margin: 15px 0px;*/
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px #D2D2D240;
}

.filaForm {
    margin: 0px;
    margin-top: 15px;
    padding: 0px;
    row-gap: 12px;
}

    .filaForm:first-child {
        margin-top: 0px;
    }



.campo-form {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    padding-left: 20px;
    padding-right: 0px;
}

.filaForm .campo-form:first-child {
    padding-left: 0px;
}

.campo-form > label,
.campo-form-registro .unidad {
    padding-left: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #424242;
}

.campo-form:has(input:not(.campo-readonly):disabled) label,
.campo-form:has(textarea:not(.campo-readonly):disabled) label,
.campo-form:has(.campo-calculado-registros) label {
    color: #9F9F9F;
}

.campo-form-registro {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

    .campo-form-registro > label {
        padding-left: 0px;
    }

.campo-text, .campo-textarea {
    font-size: 18px;
    padding: 7px 10px;
    font-weight: 400;
    width: 100%;
    background-color: var(--colorFondoTextInput);
    border-radius: 10px;
    font-family: 'Poppins',sans-serif;
    color: #828282;
}

    .campo-text::placeholder {
        color: var(--colorPlaceHolderTextInput);
    }

    .campo-text:disabled,
    .campo-textarea:disabled,
    .campo-calculado-registros {
        color: #B5B5B5;
        background-color: #DADADA;
    }

.campo-form-registro .campo-text {
    width: 100px;
}

.campo-textarea {
    height: 120px;
}

.campo-selectable {
    background: white;
    margin: 0px !important;
    border-radius: 10px;
}

    .campo-selectable .mud-input-text {
        margin: 0px !important;
        padding: 9px 10px;
    }

    .campo-selectable .mud-input-slot {
        margin: 0px !important;
        padding: 0px !important;
        font-size: 18px !important;
        font-family: 'Poppins',sans-serif !important;
    }

    .campo-selectable .mud-input-underline:before {
        border-width: 0px !important;
    }

.campo-fecha {
    font-size: 18px;
    padding: 4px 10px;
    font-weight: 400;
    width: 100%;
    background-color: var(--colorFondoTextInput);
    border-radius: 10px;
    font-family: 'Poppins',sans-serif;
    color: #828282;
}

    .campo-fecha .mud-input-underline:before {
        border-bottom: 0px !important;
    }


.button-underTable-container {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 15px;
}

.button-anyadir-tabla-form {
    padding: 2px 15px;
    font-size: 18px;
}

.footer-contenido-form {
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: 15px;
    padding: 20px 0px;
}

.button-footer-contenido-form {
    font-size: 15px;
    width: 120px;
    padding: 6px;
}

/*Cabecera Tablas*/
.bodyListado .mud-table-head tr th {
    background-color: var(--colorFondoCabeceraBloquesForm);
}

/*.bodyListado .mud-table-head .mud-table-row .mud-table-cell:first-of-type{
    border-radius: 10px 0 0 10px;
}
.bodyListado .mud-table-head .mud-table-row .mud-table-cell:last-of-type {
    border-radius: 0 10px 10px 0;
}*/

.bodyListado .mud-table-head .mud-table-sort-label,
.bodyListado .mud-table-head th {
    font-weight: 700 !important;
    font-family: 'Poppins',sans-serif;
    color: black !important;
    font-size: 16px;
}

.btLogoNavBar {
    display: flex;
    column-gap: 10px;
}

    .btLogoNavBar img {
        height: 32px;
    }

    .btLogoNavBar div {
        height: 32px;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .btLogoNavBar span:first-child {
        font-weight: 700;
        font-size: 16px;
        font-family: 'Poppins',sans-serif;
        line-height: 16px;
    }

    .btLogoNavBar span:nth-child(2) {
        font-weight: 600;
        font-size: 16px;
        font-family: 'Poppins',sans-serif;
        color: #1089B8;
        line-height: 18px;
    }

.containerBuscador {
    font-size: 17px;
    font-weight: 500;
    padding: 3px 12px;
}

.bgAzulHeader {
    background-color: var(--colorFondoCabeceraBloquesForm) !important;
}

.md-button {
    font-size: 17px;
    padding: 3px 17px;
}

.bt-modal {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: var(--buttonBgColor) !important;
    color: var(--buttonTextColor) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 300 !important;
    border-radius: 4px !important;
    padding: 0px 31px !important;
    font-size: 18px !important;
    text-transform: none !important;
    line-height: 1.75;
}

.bt-peligro {
    background-color: #AF4E41 !important;
}

.bt-cancelar {
    background-color: #AF4E41 !important;
}

.modalBase {
    padding: 20px;
}

.mud-dialog-container:has(>.modalBase) .mud-overlay {
    background-color: #2fbdf982;
}

.modalBase .mud-dialog-content {
    padding: 0px !important;
}


.mud-dialog-container:has(>.modalError) .mud-overlay {
    background-color: #ec2a0069;
}

.errorTextModalError {
    color: #E04928;
    display: block;
}

.modalCamposWidth {
    width: 600px;
}

.dialog-buttons-container {
    display: flex;
    justify-content: end;
    column-gap: 10px;
}

.dialog-text {
    font-family: 'Poppins',sans-serif;
    color: #777777;
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 40px;
}

.btFiltro {
    height: 30.3px;
    aspect-ratio: 1/1;
    padding: 4px;
}

    .btFiltro > img {
        width: 100%;
    }

.expandPanel .mud-expand-panel {
    border-color: var(--colorBordeFilas) !important;
}


.cabecera-puntos-actuacion-sizing > span {
    text-transform: none;
    font-size: 18px;
}

.row-puntos-actuacion {
}

.bloque-puntos-actuacion {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding-left: 20px;
}

row-puntos-actuacion .bloque-puntos-actuacion:first-child {
    padding-left: 0px;
}

.container-puntos-actuacion {
    padding: 10px;
    border-radius: 4px;
    background-color: white;
    height: 200px;
    overflow-y: auto;
}

    .container-puntos-actuacion:has(.boton-punto-actuacion:disabled) {
        background-color: lightgray;
    }

.boton-punto-actuacion {
    width: 100%;
    padding: 5px;
    border-style: none;
    border-radius: 4px;
    font-family: 'Poppins',sans-serif;
    background-color: transparent;
    text-align: start;
    justify-content: start;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}



    .boton-punto-actuacion:hover:not(:disabled) {
        background-color: #EDEDED;
        cursor: pointer;
    }

    .boton-punto-actuacion.selected {
        background-color: #EDEDED;
    }

.cabecera-bloque-ptsacc {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--colorFondoCabeceraBloquesForm);
    border-radius: 4px;
    box-shadow: 0px 1px 4px 0px #D2D2D240;
    padding: 0px 15px;
}

    .cabecera-bloque-ptsacc > span {
        color: black;
        font-size: 16px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
    }

.inputPuntoActuacion {
    background-color: transparent;
    font-size: 16px;
    width: 100%;
}

.bt-anyadir-puntos-actuacion {
    background-color: white;
    font-family: "Poppins",sans-serif;
    border-radius: 10px;
    font-weight: 600;
    padding: 5px 10px;
}

.textPreModal {
    text-align: center;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin: 15px 15px 0px 15px;
}

.campo-navbar-establecimiento {
    display: flex;
    align-items: center;
    column-gap: 20px;
    background-color: #eceff7;
    border-radius: 10px;
    padding-left: 20px;
}

    .campo-navbar-establecimiento > img {
        width: 30px;
    }

    .campo-navbar-establecimiento .campo-selectable {
        background-color: transparent;
    }

.leftNavTopContainer {
    display: flex;
    column-gap: 30px;
    align-items: center;
}

.py-50px {
    padding-bottom: 50px;
    padding-top: 50px;
}

.registro-iniciado {
    background-color: var(--colorFondoCabeceraBloquesForm) !important;
    border-color: var(--colorSecundarioTitulos) !important;
}

.registro-finalizado {
    background-color: #63AF4166 !important;
    border-color: #63AF41 !important;
}

.w-fit-content {
    width: fit-content !important;
}

.texto-roles-menu {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 45vw;
}

.helpButton {
    width: 20px;
    margin: 10px;
    opacity: 0.4;
}

    .helpButton:hover {
        opacity: 1;
    }

.driver-popover {
    background-color: #298ee5;
    color: white;
}

.driver-popover-arrow {
    border-right-color: #298ee5;
}

.driver-popover-footer button {
    color: white;
    font-size: 13px;
    background-color: transparent;
    text-shadow: none;
}

    .driver-popover-footer button:hover {
        color: #298ee5;
        background-color: white;
    }


.w-max-100 {
    max-width: 100%;
}

.divChildren-divChildren-w-100 > div > div {
    width: 100%;
}

.buttonSubir {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--buttonBgColor);
    color: var(--buttonTextColor);
    font-family: 'Montserrat',sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 7px 20px;
    border-radius: 4px;
    column-gap: 5px;
}

    .buttonSubir:disabled {
        background-color: #979797;
    }

.documentoSubidoContainer {
    background: white;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: var(--buttonBgColor);
    display: flex;
    width: fit-content;
}

.documento {
    padding: 10px;
    display: flex;
    color: var(--buttonBgColor);
    justify-content: center;
    align-items: center;
    column-gap: 2px;
}

.documentoDeleteBt {
    border-style: solid;
    border-width: 0 0 0 1px;
    color: var(--buttonBgColor);
    padding: 10px;
}

.checkboxTitulo .mud-checkbox {
    font-family: 'Poppins';
    flex-direction: row-reverse;
}

.checkboxCampo .mud-typography-body1 {
    font-family: 'Poppins',sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: black;
}

.checkboxCampo .mud-disabled .mud-typography-body1 {
    color: #9F9F9F;
}

.font-Montserrat {
    font-family: 'Poppins',sans-serif;
}

.font-sans3 {
    font-family: 'Poppins',sans-serif;
}

/*VERSIÓN MÓVIL*/
@media (max-width: 767px) {
    :root {
        --headerNavHeight: 45px;
    }

    /*Layout*/
    .containerPagesBody {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .layoutPages {
        height: fit-content;
    }

    .footer {
        width: 100%;
        position: inherit;
        display: flex;
        align-items: end;
        justify-content: center;
        left: initial;
    }

    .body-general {
        padding: 0px;
    }

    .container-form {
        padding: 0px 5px;
        height: auto;
    }
    /*Layout*/

    /*Navbar*/
    .campo-navbar-establecimiento {
        display: none;
    }
    /*  .containerNavTop{
        flex-direction:row-reverse;
    }*/
    .btLogoNavBar img {
        height: 16px;
    }

    .btLogoNavBar div {
        display: none;
    }
    /*.containerBody aside {
        left:auto !important;
        right:0 !important;
    }*/
    /*TODO: Esto es para evitar que cuando abrimos el menu salga el overlay de los dialogos que provoca que al clickar en este elemento se cierre el menu pero pero el boton de abrir y cerrar se queda como si estuviese abierto por lo que para volver abrirlo abria que darle 2 veces en vez de 1*/
    .containerBody > .mud-overlay.mud-drawer-overlay.mud-overlay-drawer.mud-drawer-pos-left.mud-drawer-overlay--open.mud-drawer-overlay-responsive.mud-drawer-overlay-md {
        /*display: none;*/
    }
    /*Navbar*/




    /*Formularios*/
    .containerBody .mud-main-content, .contenido-form {
        width: 100%;
    }

    .contenido-form {
        overflow-y: unset;
    }

    .cabecera-bloque-form,
    .modalBase .mud-dialog-title {
        padding: 10px 10px;
    }

        .cabecera-bloque-form > span,
        .modalBase .mud-dialog-title h6 {
            font-size: 14px;
        }

    .dialog-buttons-container > button > span {
        font-size: 16px;
    }

    .mud-dialog .mud-dialog-title {
        padding: 4px 14px;
    }

    .modalBase {
        padding: 10px;
    }

        .modalBase.mud-dialog-width-full {
            width: 100% !important;
        }

    .modalCamposWidth {
        max-width: 96% !important;
    }

    .titulo-pagina {
        font-size: 14px;
    }

    .campo-form {
        padding-left: 0px;
    }

        .campo-form > label,
        .campo-form-registro .unidad {
            font-size: 14px;
        }

    .bloque-form {
        padding: 15px 10px;
    }

/*    .campo-form {
        margin-bottom: 10px;
    }
*/
    .campo-form-registro {
        align-items: start !important;
    }

    .row > * {
        padding-right: 0;
        padding-left: 0;
    }
    /*Formularios*/

    /*Listados*/
    .bodyListado .mud-select, .bodyListado .mud-table-smalldevices-sortselect {
        display: none !important;
    }

    .bodyListado > .mud-table-body {
        border-top: none !important;
    }

    .bodyListado .mud-table-cell {
        padding: 8px 8px !important;
        display: flex !important;
        flex-direction: column;
        align-items: start !important;
    }

    .bodyListado td:before {
        font-weight: 800 !important;
    }
    /*Listados*/

    .w-100-movil {
        width: 100% !important;
    }
}

/*Laptop*/
@media (max-width: 1550px) {
    .fs-laptop-11 {
        font-size: 11px !important;
    }
}

.expandPanelDocsHosbec .mud-expand-panel-header {
    background-color: var(--buttonBgColor);
    color: white;
}

.filaExpandibleBorder:not(:last-child) {
    border-bottom: 1px solid #d2d2d2;
}

.w-100px {
    width: 100px;
}

.w-112px {
    width: 112px;
}

.fs-20px {
    font-size: 20px;
}

.fs-17px {
    font-size: 17px !important;
}

.fs-15px {
    font-size: 15px;
}

.fs-13px {
    font-size: 13px !important;
}

.text-muted-apagado {
    color: #cacacaa6;
}

.min-width-600px {
    min-width: 600px !important;
}




/*Tabla Calendario*/
.tablaCalendario {
    text-align: center;
    border: 1px solid #313131;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
    overflow: hidden;
}


    .tablaCalendario .headerMes {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20px;
        font-weight: 600;
        border-bottom: 1px solid #313131;
        padding: 5px 15px;
        background-color: var(--buttonBgColor);
        color: white;
    }

    .tablaCalendario .tableContainer {
        width: 100%;
        padding: 15px;
    }

    .tablaCalendario .cabeceraDias th {
        border-style: solid;
        border-color: #cccccc;
        border-width: 0px 1px 0px 1px;
    }

        .tablaCalendario .cabeceraDias th:first-child {
            border-width: 0px;
        }

        .tablaCalendario .cabeceraDias th:not(:first-child) {
            width: 2.5%;
        }

    .tablaCalendario td {
        border: solid 1px #cccccc;
        padding: 5px 0px;
        font-size: 15px;
        font-weight: 600;
    }

    .tablaCalendario td {
        border: solid 1px #cccccc;
        padding: 5px 0px;
        font-size: 15px;
        font-weight: 600;
    }

        .tablaCalendario td.resaltado {
            outline: 1px solid blue;
        }

        .tablaCalendario td:first-child {
            border-left: 0px;
            padding-right: 5px;
        }

        .tablaCalendario td.active1 {
            border-left-width: 1px;
            border-right-width: 0px;
        }

        .tablaCalendario td.active2 {
            border-left-width: 0px;
            border-right-width: 0px;
        }

        .tablaCalendario td.active3 {
            border-left-width: 0px;
            border-right-width: 1px;
        }

        .tablaCalendario td.active4 {
            border-left-width: 1px;
            border-right-width: 1px;
        }


.tooltip-custom {
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: none;
    z-index: 1000;
    pointer-events: none;
    max-width: 200px;
}


.colorBtnEnviar {
    background-color: var(--colorScrollBars);
}


    .colorBtnEnviar{
        background-color: var(--colorScrollBars) !important;
        border-radius: 2px;
        color: white !important;
        border: none;
        font-weight: 600;
        font-size: 24px;
    }



html, body {
    height: 100% !important;
}

.bgFormulario, .bgFormulario:focus{
    background-color: #EDEDED;
}

.cabeceraHome {
    background-color: #ffffff; /* Color de fondo del menú */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Sombras: desplazamiento horizontal, desplazamiento vertical, desenfoque, color */
    /* Otros estilos de tu menú */
}

.bloque-form-2 {
    padding: 15px 15px;
    border-radius: 5px;
}

.btnSubmitHome {
    font-family: 'Poppins', sans-serif;
    background-color: #4BC783;
    color: white;
    border: none;
    font-size: 19px;
    font-weight: 400;
    border-radius: 5px;
    padding: 5px;
}


.colorAceptarCondiciones {
    color: #ADADAD !important;
}
.divTablet {
    display: none;
}

.w-70{
    width:70%;
}

.ocultarIconosTablet{

}

@media (min-width: 768px) {
    .bloque-form-2 {
        display:flex;
    }
    .divTablet {
        display: flex !important;
        flex: 1;
    }
    .divTablet > div {
        border-radius:5px;
    }
    .bloque-form-2 > .bloque-form {
        flex:2;
    }

    .ocultarIconosTablet {
        display:none !important;
    }
}

.w-80 {
    width: 80%;
}

.h-80{
    height:80%;
}

.padding-20-20 {
    padding: 20px 20px;
}

.borderRadius5px{
    border-radius:5px;
}

.divOcultoMovil {
    display:none;
}

@media (max-width: 767px) {
    .divOcultoMovil {
        display: flex !important;
        padding-bottom:10px;
    }

    .padding-20-20 {
        padding: 10px 10px;
    }

    .footerText {
        font-size: 16px !important;
        font-family: "Montserrat", sans-serif;
    }

    .wrap-text {
        white-space: normal;
        overflow-wrap: break-word;
        font-size: 16px !important;
    }

}


/*.footerZBE {
    margin-top:50px;
    padding:20px;
    background-color: #EDEDED;
}*/

.footerZBE {
    padding: 20px;
}

.footerText {
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
    text-align: justify;
}

.wrap-text {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    font-size: 24px;
}


.cabeceraPadding {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


@media (max-width: 340px) 
{
    .wrap-text {
        white-space: normal;
        overflow-wrap: break-word;
        font-size: 14px !important;
    }
}

.bgFormularioMudBlazoDate > .mud-input-control {
    background-color: #EDEDED;
}

.imageHotelContainer{
    width: 100px;
    height: 150px;
    background:white;
    border-radius: 5px;
    object-fit:contain;
}

.ms-1px{
    margin-left:1px !important;
}

.form-control::placeholder {
    color : #ADADAD;
}


.formParent {
    
    width:100%;
    background: #F8F8F8;
    padding:10px;
    border-radius:5px;
}

.formInnerParent {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px #D2D2D240;
}

.condiciones {
    text-decoration: underline;
    cursor: pointer;
}

.condiciones:hover{
    color:blue;
}

.ff-Poppins{
    font-family: 'Poppins', sans-serif !important;
}

@media (min-width: 768px) {
    .cabecera-bloque-form > img{
        height:19px;
    }

    .cabecera-bloque-form {
        gap:5px;
    }

    .imageHotelContainer{
        width: 150px;
    }

    .fs-lg-14px{
        font-size:14px !important;
    }

    
    .flex-md-row {
        flex-direction: row !important;
    }

    .w-md-30{
        width:30% !important;
    }

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

    .footerText{
        font-size:10px;
    }

    .w-md-100{
        width:100% !important;
    }
}

@media(min-width: 1000px) {
    .footerText {
        font-size: 15px;
    }
}

.parkingsParent {
    background: white;
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tabsParking{
    width:100%;
    display:flex;
}

.tabParking {
    flex: 1 0 0;
    padding: 10px 10px 20px 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 5px 5px 0px 0px;
    font-weight:600;
    color:black;
}
    .tabParking.selected {
        background: #F0F0F0;
    }

    .tabParking > img{
        height:13px;
    }

.listaParkings {
    height:100%;
    background: #F0F0F0;
    padding: 10px;
    display:flex;
    flex-direction: column;
    gap: 10px;
    border-radius:5px;
}

.parkingsParent:has(.tabParking.selected:first-child) .listaParkings{
    border-radius: 0px 5px 5px 5px;
}

.parkingsParent:has(.tabParking.selected:nth-child(2)) .listaParkings {
    border-radius: 5px 0px 5px 5px;
}
.parkingElement {
    width: 100%;
    background: white;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: start;
    gap: 15px;
}
    .parkingElement > img {
        aspect-ratio: 1/ 1;
        width: 30%;
        max-width: 270px;
        border-radius: 5px;
        object-fit: cover;
    }

.contenedorInfoParking {
    padding-top:5px;
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content:start;
    font-size: 14px;
    color: #424242;
}
    .contenedorInfoParking > span:first-child{
        font-weight:600;
        margin-bottom:5px;
    }



@media(min-width: 800px){
    .tabParking {
        font-size:20px;
        gap:15px;
    }

        .tabParking > img {
            height: 17px;
        }

    .listaParkings{
        padding:20px;
        gap:20px;
    }

    .parkingElement {
        gap: 30px;
        padding: 15px;
    }
    .contenedorInfoParking {
        font-size: 20px;
    }
}