body {
}


#pnlEmpresas {
    width: 80%;
}


.modalBackground {
    background-color: black;
    filter: alpha(copacity=90) !important;
    opacity: 0.6 !important;
    z-index: 20;
}

.modalpopup {
    padding: 20px 0px 24px 10px;
    position: relative;
    margin: 0 auto;
    width: 50%;
    height: auto;
    background-color: white;
    border: 1px solid black;
}


.modalpopupConductores {
    padding: 0px 0px 0px 0px;
    max-width:100%;
    position: relative;
    margin: 0 auto;
    width: 60%;
    height: auto;
    background-color: white;
    border: 1px solid black;
}


@media (max-width: 768px) {
    .modalpopup {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .modalpopup {
        width: 95%; /* Ancho aún más reducido en móviles */
        padding: 10px; /* Menos padding */
    }
}

.modalpopup2 {
    max-width: 100%;
    width: 100%; /* Ajusta el ancho */
    height: auto; /* Permite que la altura se ajuste automáticamente */
    max-height: 95vh; /* Limita la altura máxima */
    overflow-y: auto; /* Agrega desplazamiento vertical */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para mayor atractivo */
    margin: auto; /* Centra el panel */
    padding: 20px; /* Espaciado interno */
    box-sizing: border-box; /* Incluye padding en el ancho total */
}

@media (max-width: 768px) {
    .modalpopup2 {
        width: 90%; /* Ancho en pantallas pequeñas */
        height: auto; /* Altura automática */
    }
}

@media (max-width: 480px) {
    .modalpopup2 {
        width: 95%; /* Ancho aún más reducido en móviles */
        padding: 10px; /* Menos padding */
        height:auto; 
    }
}

.dashboard {
    display: grid;
    padding: 20px;
}

.box {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



.box h2 {
    color: #333;
    font-size: 1.2em;
}

.box p {
    font-size: 1.5em;
    margin: 10px 0 0 0;
    font-weight: bold;
}

#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

/* Contenedor del Repeater */
.rpt-rutas-container {
    display: inline-flexbox;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente fila */
}

.ruta-item {
    width: 80%; /* Fuerza a cada item a ocupar la mitad del ancho */
    padding-right: 10px; /* Espacio entre columnas */
    margin-bottom: 10px; /* Espacio entre filas */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
    display: inline-flexbox; /* Alinea label y textbox horizontalmente */
    align-items: center; /* Centra verticalmente label y textbox (opcional) */
}

.ruta-label {
    flex-basis: 40%; /* Ancho del label */
    margin-right: 5px; /* Espacio entre label y textbox */
    text-align: left;
    font-weight: bold;
    font-size:medium;
}

.ruta-textbox {
    flex-grow: 1; /* El textbox ocupa el espacio restante */
    width: auto; /* Asegura que el ancho se ajuste al espacio disponible */
}

/* Opcional: CSS para los botones */
.fl-buttons .dxflItem_WithoutCaption > .dxflItemNestedControlContainer {
    text-align: right !important;
}

.fl-buttons .dxflItemNestedControlContainer {
    white-space: nowrap;
}

.fl-buttons .dx-button {
    margin-left: 5px;
}