/*----- ESTILOS USADOS EN LA PARTE PUBLIC  -----*/

html, body { height: 100%; }
/*0-ESTILOS GENERALES*/
body { font-family: 'Nunito Sans', sans-serif; color: #5b5b5b /*#828282*/; box-sizing: border-box; margin: 0; width: 100%; }

input, textarea, select { font-family: 'Nunito Sans', sans-serif; color: #828282; border-radius: 4px; }

textarea { width: 95%; margin-right: 5px; max-width: inherit; height: 60px; }

#imagenesDominioSlider, #imagenesCentroSlider { height: 400px }

.cover { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; }

#divCabeceraSlider { position: relative;  }
#encabezadoSlider { align-items: center; display: flex; flex-direction: column; gap: 2rem; height: auto; justify-content: center; padding: 1rem 0; position: absolute; text-align: center; width: 100%; z-index: 1000; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    #encabezadoSlider h1 { color: #ebebeb; font-size: clamp(2rem, 10vw, 3.125rem); margin: 0; padding: 0 1rem; text-shadow: 1px 1px #d7b601 }
    #encabezadoSlider h2 { align-items: center; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0 1rem }
    #encabezadoSlider a,
    #encabezadoSlider span { color: #d7b601; font-size: clamp(1rem, 5vw, 1.75rem); font-style: italic; text-shadow: 1px 1px #ebebeb }
.mail-encabezado { word-break: break-all }

.divCentroIzquierda { background-color: #ebebeb }
.divCentroIzquierda, .divCentroDerecha { text-align: center; /*display: flex;*/ padding: 20px; height: 450px; }

    .divCentroIzquierda h3, .divCentroDerecha h3 { font-size: 30px; margin: 15px; }
    .divCentroIzquierda .infoCentro, .divCentroIzquierda .mapaCentro, .divCentroDerecha .infoCentro, .divCentroDerecha .mapaCentro { width: 50%; display: inline-block }
    .divCentroIzquierda .mapaCentro { float: left; }
    .divCentroDerecha .mapaCentro { float: right; }

    .divCentroDerecha .separacion { margin-right: 20px; }
    .divCentroIzquierda .separacion { margin-left: 20px; }

.footerCentro { width: 100%; text-align: center; margin: 14px 0px 14px 0px; line-height: 24px }
.footerOpinion { font-size: 15px; font-weight:600; }
    .footerOpinion a:hover { color: darkturquoise; }
.footerOpinionMedia { color: darkturquoise; font-size: 28px; font-weight: bold; margin-bottom: 60px; }


.mapaCentro { height: 100%; }

.imagenesCentroSlider { height: 120px; margin-top: 20px; padding: 5px; }
.itemCentroSlider, .itemServicioSlider { padding: 3px; /*display: inline-block;*/ text-align: center; }
.itemServicioBonoSlider { padding: 3px; display: inline-block; text-align: center; position: sticky; top: 20px; max-width: 470px; }

.imagenesServicioSlider, .imagenesBonoSlider { height: 120px; margin-top: 20px; padding: 5px; width: 540px; }
.imagenesServicioSliderExtended { margin-top: 20px; padding: 5px; width: 418px; margin: 0 auto; }

a:link, a:visited { text-decoration: none; color: #828282; }
.enlaceBono:link, .enlaceBono:visited { color: darkturquoise; font-weight: bold; }

.lstHorasDisponibles { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 50px 50px; justify-items: center; }

.divCentroIzquierda .separacion, .divCentroDerecha .separacion { color: #d7b601; border-top-style: solid !important; border-top-width: 3px !important; margin-bottom: 15px; }

.divCentrado { margin: 0 auto; width: fit-content; /*max-width: 700px;*/ padding-top: 45px; background-color: white; }
    .divCentrado .element { margin-bottom: 8px; margin-left: 45px; margin-top: 25px; width: 520px; vertical-align: top; display: inline-block; }
        .divCentrado .element p { margin: 4px auto 4px auto; }

#divNumPersonas { font-size: 16px; }
#numPersonas { font-size: 25px; margin-top: 4px; }

#noDisponible, .elementoCentrado { text-align: center; }

#divServicios, #divDetallesPedido { display: inline-block; vertical-align: top; }
#divDetallesPedido { margin-top: 20px; }
#divBonos { display: inline-block; vertical-align: top; width: 400px; margin-left: 40px; }
#divBono { margin-left: 10px; }
#divDatosReserva { display: inline-block; vertical-align: top; margin: 8px auto auto 50px; width: 300px; }
#divDatosReserva2 { width: 285px; }
#divDatosPedido { display: inline-block; vertical-align: top; min-width: 350px; }
#divReservar { margin-top: 20px; }
#divBonoCliente { margin-bottom: 15px; }

.divServicioBono { margin-bottom: 60px; }
.divServicioBono h2 { /*margin-bottom: 30px;*/ margin-top: 0px; }
    .divServicioBono h2:hover { color: darkturquoise; }
    .divServicioBono h2 a:hover { color: darkturquoise; }
    .divServicioBono h2 a label { cursor: pointer; }

.divFoto, .divServicio, .divBono, .divBonoPedido, .divServicioPedido { display: inline-block; vertical-align: top; margin-top: 15px; }
.divBonoPedido, .divServicioPedido { /*width: 400px;*/ width: fit-content; max-width: 400px; }
    .divServicio p, .divBono p, .divBonoPedido p, .divServicioPedido p { margin: 5px auto; }
    .divBonoPedido p, .divServicioPedido p { font-size: 15px; }

.divOtrosServicios { padding-left: 16px; }

.divInfoPedido { min-height: 66px; }
.divInfoPedido .titulo, .divInfoBono .titulo { position: relative; }
.titulo p { margin: 4px auto; }
.titulo .titleElement { margin-right: 104px; display: inline-block; position: initial; /*min-height: 38px;*/ }
.titulo > button, .titulo > a { position: absolute; right: 5px; top: 5px; }
/*.divInfoPedido .reserva { text-align: right; margin-right: 5px; }*/
.divInfoPedido div, .divInfoBono div { font-size: 13px; }

.descriptionElementExtended { padding-top: 8px; padding-left: 16px; max-width: 500px; clear: both; margin-bottom: 50px; }
/*.descriptionElement { padding-top: 8px; padding-left: 16px; max-width: 500px; clear: both; height: 134px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: inherit; text-align: justify; }*/
.descriptionElement { padding: 8px 20px 0px 16px; min-height: 115px; /*min-height: auto;*/ max-width: 500px; text-align: justify; }
.descriptionElementBono { margin-bottom: inherit; /*min-height: 40px;*/ }
    .descriptionElementBono p { margin-bottom: 5px; font-size: 15px; font-style: italic; }
.v-ellipsis a { cursor: pointer; font-weight: bold; }
    .v-ellipsis a:hover { color: darkturquoise; }

.bonoElement { font-size: 14px; }

.divDatosReserva { display: inline-block; vertical-align: top; margin-left: 70px; margin-top: 80px; max-width: 200px; }
.divNumPersonas { font-size: 20px; }
.divisionServicios, .divisionBonos { color: #d7b601; border-top-style: solid !important; border-top-width: 3px !important; }
/*#divHorasDisponibles { max-width: 200px; }*/


.circuloLetra { border-radius: 50% 50% 50% 50%; align-items: center; display: flex; justify-content: center; background-color: white; width: 26px; height: 26px; margin-top: 3px; float: left; color: darkturquoise; }
#divMenuUsuario { display: none; position: absolute; right: 0px; top: 35px; width: 180px; background-color: #ffffff; border: 2px solid #e1e1e1; z-index: 5; }
    #divMenuUsuario ul { margin: 0px; list-style-type: none; padding: 0 }
        #divMenuUsuario ul li { border-bottom: 1px solid #e1e1e1; }
            #divMenuUsuario ul li a { line-height: 45px; display: block; font-size: 14px }
            #divMenuUsuario ul li :hover { background-color: #e7ffec }
            #divMenuUsuario ul li i { margin: 0px 6px 0px 6px; }

.headerPublic { /*float: right;*/ position: relative; font-size: 12px; }
    .headerPublic > a { float: right; color: #fff; text-align: center; padding-left: 5px; padding-right: 5px; line-height: 35px !important; }
    .headerPublic > a > span { margin-left: 4px; }
    .headerPublic > a i, .headerPublic > a:hover i { color: #fff; font-size: 1.5em; }
    .headerPublic > a:hover { color: #fff !important; }

a#btnPedidoHeader { background-color: #18C7B7; }
a#btnPedidoHeader:hover { background-color: #00F9F1 !important; color: #fff !important; }
a#btnPedidoHeader:active { background-color: #00B8FF !important; }

a#btnLogin, a#btnUsuario { background-color: #0ADB6C; }
a#btnLogin:hover, a#btnUsuario:hover { background-color: #00E522 !important; }
a#btnLogin:active, a#btnUsuario:active { background-color: #43FF00 !important; }


.headerBotones { /*float: right;*/ position: relative; font-size: 12px; /*clear:both;*/ }
    .headerBotones a { float: right; color: #fff; text-align: center; padding-left: 5px; padding-right: 5px; line-height: 35px !important; }
    .headerBotones a > span { margin-left: 4px; }
    .headerBotones a i , .headerBotones a:hover i { color: #fff; font-size: 1.5em; }
    .headerBotones a:hover { color: #fff !important; }

a.headerBoton { background-color: #3E76C4; }
a.headerBoton:hover { background-color: #0088FF !important; }
a.headerBoton:active { background-color: #0252FF !important; }

a#btnVolverCentro { background-color: #D281E2; }
a#btnVolverCentro:hover { background-color: #AE00D1 !important; }
a#btnVolverCentro:active { background-color: #884dff !important; }


.iconoPedido { font-size: -webkit-xxx-large; }
.datosPedido { width: 350px; }

.opcionesPago { margin-left: 20px; }
    .opcionesPago p { margin: 0px auto auto 10px; font-size: 15px; }
    .opcionesPago input { margin: 10px auto auto 10px; }
#totalPedido, #botonesPedido { margin-top: 15px; text-align: right; }

#divCargando { position: fixed; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); left: 0; top: 0; z-index: 10000; }
    #divCargando > div { padding: 30px 0; width: 260px; text-align: center; top: 50%; left: 50%; margin-left: -130px; margin-top: -75px; height: 140px; position: absolute; }
    #divCargando .fa { color: #0065e3; font-size: 70px; margin-bottom: 10px; }


/* VENTANA EMERGENTE PARA LAS RESERVAS */
.editcreate { max-width: 600px; margin: 0 auto; /*padding-top: 16px;*/ }
.editcreate2 { width: 550px; margin: 0 auto; padding-left: 15px; padding-bottom: 15px; padding-right: 15px; }

    .editcreate section, .editcreate2 section { box-sizing: border-box; border: solid 1px #dddddd; margin: 0 auto; border-radius: 5px; background-color: #fcfcfc; font-size: 13px; padding-left: 24px; }
        .editcreate section h3, .editcreate section p, .editcreate2 section h3, .editcreate2 section p { margin: 8px 0; }
        .editcreate section h5, .editcreate2 section h5 { margin: 0 auto; }
        .editcreate section:hover, .editcreate2 section:hover { background-color: #eeeeee; }
        .editcreate section input, .editcreate section textarea, .editcreate2 section input, .editcreate2 section textarea { border: solid 1px #cccccc; border-radius: 4px; padding-left: 5px; width: 95%; }
        .editcreate section h3 input, .editcreate2 section h3 input { width: auto !important; }

    .editcreate .check-box, .editcreate2 .check-box { text-align: left; display: inline-block; width: 13px; margin: 0; }
    .editcreate section h3, .editcreate2 section h3 { font-size: 14px; color: #999999; font-weight: bold; }
    .editcreate section:hover H3, .editcreate2 section:hover H3 { color: darkturquoise; }
    .editcreate section p, .editcreate2 section p { font-size: 14px; }


#divModificableReserva { display: inline-block; vertical-align: top; width: 340px; }
#divResumenReserva { display: inline-block; vertical-align: top; position: absolute; right: 5px; top: 5px; width: 250px; }
.contornoResumenReserva, .contornoDetallesPedido { box-sizing: border-box; border: solid 1px #dddddd; margin: 15px 5px 10px 10px; border-radius: 5px; background-color: #fcfcfc; font-size: 13px; padding-left: 14px; padding-right: 14px; }
    .contornoResumenReserva .check-box, .contornoModificableReserva .check-box { text-align: left; display: inline-block; width: 13px; margin: 0; }
.contornoModificableReserva .switch-input:checked ~ .switch-handle { left: 45px; }
.contornoModificableReserva .switch { width: 65px; height: 25px; }
.contornoModificableReserva .switch-handle { width: 23px; height: 23px; }
.contornoResumenReserva h3, .contornoModificableReserva h3 { font-size: 14px; color: #999999; font-weight: bold; margin-top: 0px; margin-bottom: 5px; }
    .contornoResumenReserva h3:hover, .contornoModificableReserva h3:hover { color: darkturquoise; }
.contornoResumenReserva p, .contornoModificableReserva p { font-size: 14px; }

#cmbRecursoEspacioSala, #cmbRecursoMesa, #cmbBonoCliente { width: 95%; font-size: 14px; }

#seccionPedidoReserva { font-size: 24px !important }
.otrosRecursos, .promociones { /*display: inline-block;*/ }
    .otrosRecursos label, .promociones label { font-size: 12px; font-style: italic; }
.partebaja { margin-top: 10px; /*margin-left: 70px;*/ }

.tituloResumenReserva, .tituloDetallesPedido { font-weight: bold; font-size: 18px; text-align: center; margin-top: 5px; }

/* ESTILOS PARA LOS BOTONES */
.botones { box-sizing: border-box; /*display: inline-block*/ }
    .botones a, .botones button { display: inline-block; font-size: 12px; box-sizing: border-box; color: #626262; font-weight: bold; background-color: #fff; border: 1px solid #e1e1e1; border-radius: 5px; margin-left: 10px; text-decoration: none; padding: 9px; text-align: center; box-shadow: 1px 1px 5px #666; }
        .botones a i, .botones button i { margin-right: 6px }
        .botones a:hover, .botones button:hover { background-color: #e7ffec; cursor: pointer }

.botonesTabla { box-sizing: border-box; /*display: inline-block*/ }
    .botonesTabla a, .botonesTabla button { width: 20% !important; float: left; margin: 5px 5px 5px 10px; display: inline-block; font-size: 12px; box-sizing: border-box; color: #626262; font-weight: bold; background-color: #fff; border: 1px solid #e1e1e1; border-radius: 5px; text-decoration: none; text-align: center; box-shadow: 1px 1px 5px #666; }
        .botonesTabla a i, .botonesTabla button i { margin-right: 6px }
        .botonesTabla a:hover, .botonesTabla button:hover { color: darkturquoise; background-color: #e7ffec; cursor: pointer }

.boton i { margin-right: 6px; }
.boton.soloIcono i { margin-right: 0; }
input[type="submit"], .boton { display: inline-flex; text-decoration: none; font-size: 14px; background-color: #0089c1; border: 1px solid #0078b0; color: #fff; padding: 6px 9px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; outline: none; cursor: pointer; -moz-transition: background 300ms, border 300ms, color 300ms; -webkit-transition: background 300ms, border 300ms, color 300ms; -o-transition: background 300ms, border 300ms, color 300ms; transition: background 300ms, border 300ms, color 300ms; }
    input[type="submit"]:hover, .boton:hover { background-color: #00679f; border-color: #00568e; }
    input[type="submit"]:active, .boton:active { background-color: #00457d; border-color: #00346c; }
    .boton.rojo { background-color: #bc0000; border-color: #ab0000; color: #fff; }
        .boton.rojo:hover { background-color: #9a0000; border-color: #890000; }
        .boton.rojo:active { background-color: #780000; border-color: #670000; }
    .boton.verde { background-color: #248924; border-color: #137813; color: #fff; }
        .boton.verde:hover { background-color: #026702; border-color: #015601; }
        .boton.verde:active { background-color: #004500; border-color: #003400; }
    .boton.naranja { background-color: #dc8900; border-color: #cb7800; color: #fff; }
        .boton.naranja:hover { background-color: #ba6700; border-color: #a95600; }
        .boton.naranja:active { background-color: #984500; border-color: #873400; }
    .boton.blanco { background-color: #fafafa; border-color: #e9e9e9; color: #444; }
        .boton.blanco:hover { background-color: #e9e9e9; border-color: #d8d8d8; color: #222; }
        .boton.blanco:active { background-color: #c7c7c7; border-color: #b6b6b6; }
    .boton.negro { background-color: #555555; border-color: #444444; color: #eee; }
        .boton.negro:hover { background-color: #333333; border-color: #222222; color: #fff; }
        .boton.negro:active { background-color: #111111; border-color: #000000; }

.ui-widget button { font-size: 14px !important; padding: 6px; }
/* FIN ESTILOS BOTONES */

/*1-2-Estilos tabla INDEX*/

.bloquetabla { padding: 1em; display: inline-block; width: 100%; box-sizing: border-box; margin-top: 0; }

.tablecontent { border: solid 1px #cccccc; background-color: #fefefe; border-radius: 5px; box-sizing: border-box; padding: 5px; }

.tabladata, .tabladataPaginated { width: 100% !important }
.header { text-align: left; }
.headerCentrada { text-align: center; }
table.dataTable tbody th, table.dataTable tbody td, table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td { padding: 0 0 !important; line-height: 35px }
    table.dataTable tbody td.centrado, table.dataTable thead th.centrado, table.dataTable tfoot th.centrado { padding: 0 0 !important; line-height: 35px; text-align: center; }
    table.dataTable tbody td a { width: 100%; display: block; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child { padding-left: 30px !important; }

.accionesTabla { text-align: center; }
    .accionesTabla a { /*display: inline;*/ width: auto !important; float: left; margin-right: 5px; }

@media (max-width:600px) {
    .tabladata tr { height: 30px; font-size: 12px; border-bottom: solid 1px #cccccc; border-top: solid 1px #cccccc; }

    a#btnPedidoHeader, a#btnLogin, a#btnUsuario, a#btnVolverCentro, a.headerBoton { width: 100%; }
    .circuloLetra { display: inline-flex; float: none; }

    #btnVolverBono { text-align: center; display: -webkit-box; text-align: -webkit-center; }
    #botonesPedido button { margin-top: 5px; margin-bottom: 5px; }

    .mail-encabezado { display: inline-block; }


}
/*Fin 1-2-estilos tabla INDEX*/


/* SWITCH */
.switch { position: relative; display: block; vertical-align: top; width: 100px; height: 30px; padding: 3px !important; margin: 0 10px 10px 0; background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px); -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; -moz-box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); cursor: pointer; }
.switch-input { position: absolute; top: 0; left: 0; opacity: 0; }
.switch-label { position: relative; display: block; height: inherit; font-size: 12px; background: #eceeef; -moz-border-radius: inherit; -webkit-border-radius: inherit; border-radius: inherit; -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); }
    .switch-label:before, .switch-label:after { position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; }
    .switch-label:before { content: attr(data-off); right: 11px; color: #aaaaaa; text-shadow: 0 1px rgba(255, 255, 255, 0.5); }
    .switch-label:after { content: attr(data-on); left: 11px; color: #ffffff; text-shadow: 0 1px rgba(0, 0, 0, 0.2); opacity: 0; }
.switch-input:checked ~ .switch-label { background: #009ac1; -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); }
    .switch-input:checked ~ .switch-label:before { opacity: 0; }
    .switch-input:checked ~ .switch-label:after { opacity: 1; }
.switch-input:disabled ~ .switch-handle { cursor: default; background: linear-gradient(to bottom, #dddddd 40%, #d0d0d0); background-image: -webkit-linear-gradient(top, #dddddd 40%, #d0d0d0); }
    .switch-input:disabled ~ .switch-handle:before { background: linear-gradient(to bottom, #cccccc, #dddddd); background-image: -webkit-linear-gradient(top, #cccccc, #dddddd); }
.switch-input:disabled ~ .switch-label { cursor: default; background: #cacccd; }
    .switch-input:disabled ~ .switch-label:before, .switch-input:disabled ~ .switch-label:after { color: #eceeef; }
.switch-handle { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0); background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0); -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }
    .switch-handle:before { content: ""; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; width: 12px; height: 12px; background: linear-gradient(to bottom, #eeeeee, #FFFFFF); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); }
.switch-input:checked ~ .switch-handle { left: 74px; -moz-box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); }
/* Transition
        ========================== */
.switch-label, .switch-handle { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

/*Fin SWITCH */

/* Mensaje emergente */
#divAlert { position: fixed; top: 0; width: 100%; font-size: 14px; color: #fff; z-index: 10001; text-align: left; padding: 25px 25px 25px 70px; background-position: 20px center; background-repeat: no-repeat; text-shadow: 0 0 5px rgba(0,0,0,.2); }
    #divAlert.divMargen { border-radius: 6px; }
    #divAlert.error { background-color: red; background-color: rgba(255,0,0,.8); }
    #divAlert.warn { background-color: #ffd232; background-color: rgba(255,210,50,.95); color: #000; }
    #divAlert.info { background-color: #009bdc; background-color: rgba(0,155,220,.95); }
    #divAlert.success { background-color: #96c800; background-color: rgba(150,200,0,.95); }
i.cerrarAlert { position: fixed; top: 0; right: 0; padding: 20px; font-size: 25px; }
    i.cerrarAlert:hover { cursor: pointer; }
/* FIN Mensaje emergente */

/* INICIO VALIDACIONES MVC*/

.validation-summary-errors { color: #b94a48; background-color: #f2dede; font-weight: bold; border-color: rgba(0,0,0,0.1); display: block; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height: 20px; }
    .validation-summary-errors ul { padding: 0; margin: 0; list-style-type: none; }
        .validation-summary-errors ul li { vertical-align: top; }
            .validation-summary-errors ul li:before { content: "\f06a"; font-family: 'Font Awesome 5 Free'; color: #b94a48; float: left; margin: 0 10px 0 10px; }
/* styles for validation helpers */
.field-validation-error { color: #b94a48 !important; font-weight: bold !important; }
.field-validation-valid { display: none; }
input.input-validation-error { border: 1px solid #b94a48 !important; background: #fff3f3 !important; }
input[type="checkbox"].input-validation-error { border: 0 none !important; }

input:focus:invalid, textarea:focus:invalid, input:focus:out-of-range { border-color: #b94a48 !important; background: #fff6f6 !important; }

/* FIN VALIDACIONES MVC */

.mensajeError { background-color: #f2dede; font-weight: bold; border-color: rgba(0,0,0,0.1); display: block; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height: 20px; }
    .mensajeError .tituloMensaje { color: #b94a48 !important; font-weight: bold !important; }
.mensajeCorrecto { background-color: #c9ffbf; font-weight: bold; border-color: rgba(0,0,0,0.1); display: block; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height: 20px; }
    .mensajeCorrecto .tituloMensaje { color: #207806 !important; font-weight: bold !important; }

.tituloMensaje { color: #ff0000 !important; font-weight: bold !important; font-size: larger; }


/* INICIO VENTANA POPUP */
.partebajaPopup { position: absolute; bottom: 5px; right: 10px; }
.camposPopup h4 { margin-bottom: 5px; margin-top: 10px; }
.popup { left: 0; position: absolute; top: 0; width: 100%; z-index: 1001; }
.content-popup { margin: 0px auto; margin-top: 120px; position: relative; padding: 10px; width: 500px; min-height: 250px; border-radius: 4px; background-color: #FFFFFF; box-shadow: 0 2px 5px #666666; }
    .content-popup h2 { color: #48484B; border-bottom: 1px solid #48484B; margin-top: 0; padding-bottom: 4px; }
.content-popup2 { margin: 0px auto; margin-top: 100px; position: relative; padding: 10px; width: 400px; min-height: 200px; border-radius: 4px; background-color: #FFFFFF; box-shadow: 0 2px 5px #666666; }
    .content-popup2 h2 { color: #48484B; border-bottom: 1px solid #48484B; margin-top: 0; padding-bottom: 4px; }
.popup-overlay { left: 0; position: absolute; top: 0; width: 100%; z-index: 999; display: none; background-color: #777777; cursor: pointer; opacity: 0.7; }
.close { position: absolute; right: 15px; }
/* FIN VENTANA POPUP */


.noVisible { display: none !important; }
.enLinea { display: inline-block !important; }

.event a { background-color: #5fba7d !important; color: #fff !important; }
    .event a:active { background-color: #54a46e !important; }
    .event a:hover { background-color: #54a46e !important; }

#datePickerReserva { text-align: -webkit-center; margin-top: 15px; margin-bottom: 15px; }
    #datePickerReserva .ui-state-active { background-color: #dc8900 !important; border-color: #cb7800; color: #fff; }
        #datePickerReserva .ui-state-active:active { background-color: #984500 !important; border-color: #873400; }
        #datePickerReserva .ui-state-active:hover { background-color: #ba6700 !important; border-color: #a95600; }

.horaSeleccionada { border-radius: 50%; color: #dc8900; background-color: white; float: right; position: relative; left: 0px; top: -40px; }
.horaDisponible { margin-top: 10px; display: inline-block; }
    .horaDisponible label { cursor: pointer }
.botonReserva { margin-top: 10px }
.botonMarcado { box-sizing: border-box; }
    .botonMarcado a, .botonMarcado button { display: inline-block; font-size: 12px; box-sizing: border-box; color: #dc8900; font-weight: bold; background-color: #fff; border: 1px solid #dc8900; border-radius: 5px; margin-left: 10px; text-decoration: none; padding: 9px; text-align: center; box-shadow: 1px 1px 5px #666; border-color: #dc8900; }
        .botonMarcado a i, .botonMarcado button i { margin-right: 6px }


.dialogReservaServicio, .dialogAvisoLegalPolitica { z-index: 1005 !important; }
 

.titleElement { font-size: 16px; color: #999999; font-weight: bold; }
    .titleElement:hover { color: darkturquoise; }
.titleElement2 { font-size: 18px; font-weight: bold; margin-top: 15px; }

.columnaComentario { max-width: 400px; }

/* MENÚ CUENTA USUARIO*/
/*.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; }
    .tab a { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 7px 16px; transition: 0.3s; font-size: 14px; }
    .tab a:hover { background-color: #ddd; }
    .tab a.active { background-color: #ccc; }*/

/* Style the tab content */
.contenido { display: inline-block; vertical-align: top; }
.tabcontent { display: none; padding: 6px 12px; /*border: 1px solid #ccc; border-top: none;*/ }


/*.tab { width: 200px; float:left; display: inline-block; }*/
.opciones { display:inline-block; position:sticky; top: 20px; }

.tab { width: 200px; padding: 3px; text-align: center; /*display: inline-block; position: sticky; top: 20px;*/ }
    .tab a { background-color: #eee; color: black; display: block; padding: 12px; text-decoration: none; }
    .tab a:hover { background-color: #ccc; }
    .tab a.active { background-color: #4CAF50; color: white; }

.contornoReservas, .contornoBonos { box-sizing: border-box; border: solid 2px #dddddd; margin: 0px 5px 10px 60px; border-radius: 5px; background-color: #fcfcfc; font-size: 13px; padding-left: 14px; padding-right: 14px; }

.opinion { margin: 50px 5px 15px 5px; }
.separador { margin-top: 60px; }

#btnVolverBono { margin-top: 16px; }

@media(max-width:950px) {
    .opciones { position: unset; display: block !important; margin: 0 auto; width: fit-content; padding-bottom: 30px; padding-top: 50px; }
    .contenido .contornoReservas, .contenido .contornoBonos { margin-left: 10px !important; }

    #divDatosReserva { margin: 0 auto; display: inherit; }
    #divServicios { display: inherit; }
}

@media(max-width:870px) {
    .itemServicioBonoSlider { position:unset; display: block !important; }
    .divServicioBono h2 { text-align: center; }
}

@media(max-width:816px) {
    .divCentroIzquierda, .divCentroDerecha { height: auto; display: block; padding: 10px; }
        .divCentroIzquierda .infoCentro, .divCentroIzquierda .mapaCentro, .divCentroDerecha .infoCentro, .divCentroDerecha .mapaCentro { width: 100%; }
        .divCentroIzquierda .mapaCentro, .divCentroDerecha .mapaCentro { height: 240px; }
        .divCentroIzquierda .infoCentro, .divCentroDerecha .infoCentro { padding-bottom: 20px; }
        .divCentroIzquierda .mapaCentro { float: inherit }
        .divCentroDerecha .mapaCentro { float: inherit }
        .divCentroDerecha .separacion, .divCentroIzquierda .separacion { margin-right: 0px; margin-left: 0px; }

    .divCentrado .element { /*width: inherit;*/ width: 96%; margin-left: 10px; display: unset; }

    #divBonos { width: 100% !important; margin-left: 0; }

    .content-popup { width: 400px; }
}

@media(max-width:600px) {

    #divModificableReserva { width: 330px; }
    #divResumenReserva { display: contents; }
    .partebaja { margin-top: 10px; margin-left: 100px; }

    .imagenesServicioSlider, .imagenesBonoSlider { width: 330px; }
    .imagenesServicioSliderExtended { width: 250px; }

    /*#encabezadoSlider { padding-top: 25px !important; }
        #encabezadoSlider h1 { font-size: 45px !important; }
        #encabezadoSlider h2, #encabezadoSlider a { font-size: 23px !important; }
*/
    .imagenServicioSliderExtended { height: 250px; }

    /*.imagenServicioSlider, .imagenBonoSlider { width: 70%; }*/

    .divServicioBono h2 { text-align: center; }

    #divBonos { width: 100% !important; }

    .boton { font-size: 13px; }

    .editcreate2 { width: 95%; }
}

@media(max-width:500px) {
    #divDatosPedido { min-width: 0; width: 97%; padding-left: 5px; padding-right: 5px; }
    .opcionesPago { margin-left: 10px; margin-right: 10px; }
    #politicaPrivacidad { text-align: right; font-size: smaller; }

    .content-popup { width: 320px; min-height: 200px; }
}

@media(max-width:380px) {

    #divPrincipal { max-height: 405px; }
    #divModificableReserva { width: 315px; }
    #divResumenReserva { display: contents; }
    .partebaja { margin-top: 10px; margin-left: 95px; margin-bottom: 10px; }

    .imagenesServicioSlider, .imagenesBonoSlider { width: 250px; }
    .imagenesServicioSliderExtended { width: 250px; }

    .editcreate i { padding: 24px 12px; }

    .imagenServicioSliderExtended { height: 250px; }
    /*#encabezadoSlider h2 { font-size: 20px; }*/
    .imagenServicioSlider, .imagenBonoSlider { width: 60%; }

   /* #encabezadoSlider { padding-top: 20px !important; }
        #encabezadoSlider h1 { font-size: 40px !important; }
        #encabezadoSlider h2, #encabezadoSlider a { font-size: 20px !important; }
*/
    .divServicioBono h2 { text-align: center; font-size: 18px; }
    #divBonos { width: 100% !important; }

    .titleElement { font-size: 14px; }

    .boton { font-size: 12px; }

    #divDatosReserva { /*margin: 5px auto auto 25px;*/ margin: 0 auto; display: inherit; text-align: center; }
    #numPersonas { font-size: 18px; }

    .content-popup { width: 280px; min-height: 180px; }
}

.ui-week-active a { border: 1px solid #003eff; background: #007fff; font-weight: normal; color: #fff; }