/* Add here all your CSS customizations */
.preview {
    text-align: center;
    overflow: hidden;
    width: 160px; 
    height: 160px;
    margin: 10px;
    border: 1px solid red;
}

/* Reducir fuente general */
.bootstrap-datetimepicker-widget {
    font-size: 11px !important;
}

/* Reducir ancho del popup */
.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 200px !important;
    padding: 2px !important;
}

/* Reducir tamaño de celdas */
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 11px !important;
}

/* Reducir tamaño de span en selector de horas/meses/años */
.bootstrap-datetimepicker-widget table td span {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    margin: 1px !important;
    font-size: 11px !important;
}

/* Ajustar los botones de navegación (flechas) */
.bootstrap-datetimepicker-widget .picker-switch td span {
    height: 2em !important;
    line-height: 2em !important;
    font-size: 11px !important;
}

/* Ajustar horas/minutos */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    font-size: 1em !important;
    width: 40px !important;
}

/* Reducir botones de acción */
.bootstrap-datetimepicker-widget button[data-action] {
    padding: 4px 6px !important;
    font-size: 11px !important;
}