#selector-dias-horas {
    margin: 20px 0;
}

#datepicker {
    margin-bottom: 20px;
    width: 100%;
}

#selected-date {
    margin-top: 10px;
    font-weight: bold;
    color: #333;
}

#timepicker {
    width: 100%;
    padding: 5px;
}
.ui-datepicker-calendar td{
    text-align: center;
     padding: 10px !important;
}
.ui-state-default{
     background-color: red;
    color: white;
    display: inline-block;
    margin: 4px 4px;
    border-radius: 100px;
    min-width: 35px;
}
a.ui-state-default{
    background-color: #3b9a00;
    color: white;
    display: inline-block;
    margin: 4px 4px;
    border-radius: 100px;
    min-width: 35px;
}

.ui-state-default{
     padding:5px;
     display: inline-block;
}


/* Cambiar el fondo de las fechas seleccionables */
.ui-datepicker td  {
    padding:0px !important;
}

/* Asegurarse de que los elementos del encabezado estén alineados horizontalmente */
.ui-datepicker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

/* Poner el mes y el año centrados y en negrita */
.ui-datepicker-title {
    font-weight: bold;
    text-align: center;
    flex-grow: 1;
}

/* Alinear los botones de anterior y siguiente a los lados */
.ui-datepicker-prev {
    order: 1; /* El botón "Anterior" va primero */
}

.ui-datepicker-title {
    order: 2; /* El mes y el año van en el centro */
}

.ui-datepicker-next {
    order: 3; /* El botón "Siguiente" va al final */
}

.ui-datepicker-next
{
cursor: pointer;
}

.tablatr {
    display: flex;           /* Flexbox para que actúe como fila */
    width: 100%;             /* Hacer que ocupe el 100% del ancho del contenedor padre */
    flex-direction: row;     /* Asegurarse de que los elementos hijos (columnas) estén en fila */
}

.tablatd:first-child {
    flex: 0 0 50%;           /* El primer td tendrá un 70% de ancho */
}

.tablatd:last-child {
    flex: 0 0 50%;           /* El segundo td tendrá un 30% de ancho */
}

.tablatd {
    padding: 10px !important;           /* Espaciado interno opcional para las celdas */
    box-sizing: border-box;  /* Para incluir padding y borde en el ancho y alto */
}