.indicator-progress {
    display: none
}

[data-odm-indicator=on] > .indicator-progress {
    display: inline-block
}

[data-odm-indicator=on] > .indicator-label {
    display: none
}

.spinner-wrapper {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100vw;
    height: 100vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .5;
}

.form-control:disabled {
    background-color: #eff5f6; /* Color de fondo gris claro */
    color: #6c757d; /* Color del texto gris oscuro */
    border-color: #eff5f6; /* Color del borde */
    cursor: not-allowed; /* Muestra un cursor de "no permitido" */
}

input.form-control:read-only {
    background-color: #eff5f6; /* Color de fondo gris claro */
    color: #6c757d; /* Color del texto gris oscuro */
    border-color: #eff5f6; /* Color del borde */
    cursor: not-allowed; /* Muestra un cursor de "no permitido" */
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.indicator-proccess {
    display: flex; /* Activa el modelo flexbox */
    align-items: center; /* Alinea verticalmente al centro */
    gap: 10px; /* Espacio entre los elementos */
    color: green;
}

.icono-click {
    cursor: pointer;
    transition: transform 0.2s;
}

    .icono-click:hover {
        transform: scale(1.2);
    }

.icon-name {
    font-size: 0.85rem;
    word-break: break-all;
}

/*Lo pongo asi porque en modales se ve debajo, por lo mientras no se me ocurre*/
.modal .datepicker-dropdown,
.modal .select2-container,
.datepicker-dropdown {
    z-index: 1061 !important;
}

td {
    text-transform: uppercase
}

.form-control:not(.minuscula),
.select2-container {
    text-transform: uppercase !important;
}

.align-button {
    padding-top: 35px !important;
    text-align: right;
}

.align-div {
    padding-top: 10px !important;
}

.align-input {
    padding-top: 30px !important;
}

.centrarElementos {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.label-required::after {
    content: '*';
    color: #ed5e49;
    margin-left: 5px;
    font-weight: bold;
    font-size: 15px;
}

.dt-rowReorder-float-parent {
    z-index: 1064 !important;
    position: absolute;
}

#modalcatalogSelect {
    z-index: 2000 !important;
}

#modalcatalogFilter {
    z-index: 2000 !important;
}

#CabeceraCorridaModal {
    z-index: 1061 !important;
}

#RutasModal {
    z-index: 1062 !important;
}

#mdRuta {
    z-index: 1063 !important;
}

#mdlHorarioAutoriza {
    z-index: 1061 !important;
}

.swal2-container {
    z-index: 2001 !important
}

.fotosOperador {
    width: 200px !important;
    height: 200px !important;
}

.fotosOperadorMini {
    height: 130px !important;
}

.negrita {
    font-weight: 500 !important;
}

textarea {
    resize: none;
}

.ui-timepicker-container {
    z-index: 1060 !important; /* Mayor que Bootstrap modal (1050) */
}

.labelSmall {
    font-size: smaller;
}