:root {
    --rz-primary: #4088BD;
    --rz-checkbox-checked-background-color: #4088BD;
    --rz-primary-light: #4088BD;
    --rz-profile-menu-top-item-background-color: #ffffff00;
}
.rz-dialog-titlebar, .rz-dialog-side-titlebar {
    BACKGROUND: #4088BD;

}
.rz-dialog-title, .rz-dialog-side-title {
    color: white !important;
  
    margin-bottom: 20px;
}
.rz-dialog-titlebar-close {
    margin-bottom: 20px;
    cursor: pointer;
}
.rz-dialog-mask {
    opacity: 0.7;
}

.rz-dialog-titlebar-close .rzi-times, .rz-dialog-side-titlebar-close .rzi-times {
    font-size: var(--rz-dialog-close-font-size);
    color: white;
    font-weight:900;
    vertical-align: var(--rz-dialog-close-vertical-align);
}
.BtnItruck {
    background: #3E3936 !important;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    border-radius: 9px;
}
.text-gray {
    color: gray;
}

.rz-dialog-content, .rz-dialog-side-content{
    padding-top:1px;
    padding-bottom:30px
}
.rz-form-field-helper {
    padding: var(--rz-form-field-helper-padding);
    z-index: 2 !important;
}
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Estilos por defecto (PC) */
.containerCel {
    padding-top: 20%;
}

.LogoTelefono {
    display: block;
    margin: 0 auto;
}

/* Media query para teléfonos */
@media only screen and (max-width: 768px) {
    .containerCel {
        padding-top: 10%;
    }

    .LogoTelefono {
        text-align: center;
    }
}



.backgroundCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}


.TextWhite {
  
    color: #ffffff !important
}
.TextGre {
    color: #373737 !important
}


.custom-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-notification {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    text-align: center;
    position: relative;
}

    .custom-notification h2 {
        color: #198754;
    }

    .custom-notification span {
        background-color: #f0f0f0;
        padding: 5px;
        border-radius: 5px;
    }

    .custom-notification button {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #198754;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

.progress-bar {
    width: 100%;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 15px;
}

.progress-fill {
    height: 100%;
    background-color: #198754;
    transition: width 0.1s linear;
}


.header-info {
    display: flex;
    justify-content: center; /* Centrar el contenido horizontalmente */
    align-items: center; /* Centrar el contenido verticalmente */
    background-color: #2C2C2C; /* Fondo oscuro */
    padding: 10px 20px;
    border-radius: 15px;
}
@media only screen and (max-width: 768px) {
    .header-info {
        display: none !important;
    }
}

    .header-info a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: 1rem;
        margin: 0 15px; /* Espacio entre los elementos */
        display: inline-flex;
        align-items: center;
    }

        .header-info a:first-child {
            border-right: 2px solid #555; /* Línea divisoria entre los elementos */
            padding-right: 15px;
            margin-right: 15px;
        }

        .header-info a:last-child {
            padding: 5px 10px;
            background-color: #FFD700; /* Color dorado para destacar */
            border-radius: 15px; /* Borde redondeado */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
        }

            .header-info a:last-child:hover {
                background-color: #4088BD; /* Color más oscuro al pasar el mouse */
                box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
                transition: background-color 0.3s ease, box-shadow 0.3s ease;
            }

.header-info {
    display: flex;
    justify-content: center; /* Centrar el contenido horizontalmente */
    align-items: center; /* Centrar el contenido verticalmente */
    background-color: #2C2C2C; /* Fondo oscuro */
    padding: 10px 20px;
    border-radius: 15px;
}

    .header-info a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: 1rem;
        margin: 0 15px; /* Espacio entre los elementos */
        display: inline-flex;
        align-items: center;

    }

        .header-info a:first-child {
            border-right: 2px solid #555; /* Línea divisoria entre los elementos */
            padding-right: 15px;
            margin-right: 15px;
        }

.license {
    padding: 5px 10px;
    border-radius: 15px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.license-profesional {
    background-color: #4A90E2 !important; /* Azul más suave para Academic */
    color: #FFFFFF !important; /* Blanco */
}

.license-essential {
    background-color: #7B8E98 !important; /* Gris azulado para Basic */
    color: #FFFFFF !important; /* Blanco */
}

.license-enterprise {
    background-color: #34A853 !important; /* Verde vibrante para Enterprise */
    color: #FFFFFF !important; /* Blanco */
}

.license-free {
    background-color: #00BFA5 !important; /* Verde agua para Free */
    color: #FFFFFF !important; /* Blanco */
}

.license-premium {
    background-color: #4088BD !important; /* Dorado más suave para Premium */
    color: #2C2C2C !important; /* Oscuro para contraste */
}

.license-pro {
    background-color: #E53935 !important; /* Rojo vivo para Pro */
    color: #FFFFFF !important; /* Blanco */
}

.license-trial {
    background-color: #198754 !important; /* Naranja suave para Trial */
    color: white !important; /* Oscuro para contraste */
}

.license-default {
    background-color: #495057 !important; /* Gris oscuro pero no completamente negro */
    color: #FFFFFF !important; /* Blanco */
}


.rz-tooltip-content {
    background-color: #d41355;
    color: var(--rz-text-contrast-color);
}
.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: #333333;
}

.rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active {
    background-color: #4088bd59;
}


.rz-alert .rz-alert-title {
    color: #ffffff;
}
.rz-alert.rz-warning.rz-shade-lighter {
    --rz-alert-background-color: rgb(200 184 81);
    --rz-alert-color: #ffffff;
    --rz-alert-title-color: #ffffff;
    --rz-alert-icon-color: #ffffff;
}
.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active {
    background-color: rgb(255 255 255 / 20%);
    color: #ffffff;
    background-image: none;
    box-shadow: none;
}
.rz-button.rz-variant-text.rz-warning.rz-shade-darker {
    color: #ffffff;
}

.rz-alert.rz-info.rz-shade-lighter {
    --rz-alert-background-color: rgb(251 253 255 / 20%);
    --rz-alert-color: #ffffff;
    --rz-alert-title-color: #ffffff;
    --rz-alert-icon-color: #ffffff;
}
.rz-button.rz-variant-text.rz-info.rz-shade-darker {
    color: #ffffff;
}

/* Ocultar en teléfonos (pantallas menores o iguales a 767px) */
@media only screen and (max-width: 767px) {
    .ocultar-en-telefono {
        display: none;
    }

    .custom-header {
        flex-direction: column;
    }

    .custom-buttons {
        padding-top: 20px
    }

    .custom-main-cards {
        display: block;
    }

    .custom-main-cards {
    
        align-items: normal;
    }
    .custom-main {
    
        margin-left: 0px !important;
    
    }

    .custom-container {
        grid-template-columns: repeat(1, 1fr) !important; /* 1 columna en pantallas pequeñas */
        padding-top: 20px; /* Ajuste del padding para pantallas pequeñas */
    }
    .List-dashboard-container {
        
        gap: 0px !important;
    
    }
}

.mobile-header-info {
    display: none;
    justify-content: center; /* Centrar el contenido horizontalmente */
    align-items: center; /* Centrar el contenido verticalmente */
    background-color: #373737; /* Fondo oscuro */
    padding: 10px 20px;
}

@media only screen and (max-width: 768px) {
    .mobile-header-info {
        display: flex !important;
    }
}

.mobile-header-info a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px; /* Espacio entre los elementos */
    display: inline-flex;
    align-items: center;
}

    .mobile-header-info a:first-child {
        border-right: 2px solid #555; /* Línea divisoria entre los elementos */
        padding-right: 15px;
        margin-right: 15px;
    }

    .mobile-header-info a:last-child {
        padding: 5px 10px;
        background-color: #FFD700; /* Color dorado para destacar */
        border-radius: 15px; /* Borde redondeado */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    }

        .mobile-header-info a:last-child:hover {
            background-color: #4088BD; /* Color más oscuro al pasar el mouse */
            box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

.license-cards-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.license-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    max-width: 48%;
}

.license-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.license-info {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #333;
}

    .license-info i {
        margin-right: 10px;
        color: #4088BD;
    }

    .license-info span {
        font-size: 0.9em;
    }


 
.animated-text {
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
.rz-button.rz-info.rz-shade-darker:hover {
     background-color: #E53935;  
}

.ItLicen-price-carousel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* Ensure content outside the container is hidden */
}

.ItLicen-price-content {
    text-align: center;
    flex-grow: 1;
    overflow: hidden; /* Hide overflow content to keep only active slide visible */
}

.ItLicen-price-slider {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition for slide effect */
}

.ItLicen-price-slide {
    min-width: 100%; /* Each slide takes full width of the container */
    box-sizing: border-box;
}

.ItLicen-price {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.ItLicen-discount {
    color: green;
    font-weight: bold;
}

 

    .ItLicen-carousel-control.prev {
        position: absolute;
        left: 0;
    }

    .ItLicen-carousel-control.next {
        position: absolute;
        right: 0;
    }

    .ItLicen-carousel-control:hover {
        color: #495057;
    }


.ItLicen-carousel-control {
    background: none;
    border: none;
    font-size: 3em;
    cursor: pointer;
    color: #333;
    padding: 0 10px;
    font-weight: 900;
    z-index: 10; /* Ensure buttons are on top */
}


/* Estilos específicos para pantallas pequeñas (teléfonos) */
@media (max-width: 768px) {
    .ItLicen-price-carousel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100%; /* Asegura que el carrusel ocupe todo el ancho en teléfonos */
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .ItLicen-price-content {
        text-align: center;
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ItLicen-price-slider {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .ItLicen-price-slide {
        min-width: 100%;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centrar el contenido horizontalmente */
        justify-content: center; /* Centrar el contenido verticalmente */
    }

    .ItLicen-plan-feature {
        text-align: center; /* Centrar el texto dentro del plan */
    }

    .ItLicen-plan-feature-title {
        font-weight: bold;
        margin-bottom: 5px; /* Espacio entre el título y el precio */
    }

    .ItLicen-discount {
        margin-top: 10px; /* Espacio por encima del descuento */
        color: green;
        font-weight: bold;
        font-size: 1.2em; /* Aumentar un poco el tamaño del texto */
    }

    .ItLicen-carousel-control {
        background: none;
        border: none;
        font-size: 2.5em; /* Ajuste del tamaño del botón en móviles */
        cursor: pointer;
        color: #333;
        padding: 0 10px;
        font-weight: 900;
        z-index: 10;
    }

        .ItLicen-carousel-control.prev {
            position: absolute;
            left: 0;
        }

        .ItLicen-carousel-control.next {
            position: absolute;
            right: 0;
        }

        .ItLicen-carousel-control:hover {
            color: #495057;
        }
}

@media (max-width: 768px) {
    .license-card-container {
        display: flex !important;
        flex-direction: column; /* Cambia la dirección del flujo para que las tarjetas estén una debajo de otra */
        align-items: center; /* Opcional: centrar las tarjetas en el contenedor */
    }

    .license-card {
        max-width: 90%; /* Ajustar el ancho de la tarjeta para que no ocupe todo el ancho de la pantalla */
        margin-bottom: 15px; /* Espacio entre las tarjetas */
    }

    .license-cards-container {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-direction: column;
    }
}
.license-key {

    font-size: 1.2em; /* Ajustar el tamaño de la fuente según sea necesario */
    letter-spacing: 0.1em; /* Espaciado entre caracteres */
}
.masked-part {
    font-weight: bold; /* Negrita para destacar */
    font-size: 1.8em !important; /* Tamaño más grande para los asteriscos */
    line-height: 1 !important; /* Asegurar que no haya espacio extra */
    vertical-align: middle !important; /* Alinear verticalmente los asteriscos con el texto circundante */
    letter-spacing: -0.05em !important; /* Ajustar el espaciado para los asteriscos */
}

.rz-datatable-thead th, .rz-grid-table thead th {
    background-color: #504d4d;
    color: white !important;
}

    .rz-datatable-thead th .rz-column-title-content, .rz-grid-table thead th .rz-column-title-content {
       
        font-weight: 550;
        color: whitesmoke;
    }

.rz-pager-element, .rz-button {
    box-shadow: none;
}
.rz-datatable { 
    border-radius: 10px; 
  
}
.rz-pager-page.rz-state-active {
    background-color: #4088BD;
    color: #ffffff; 
}


 

.billing-section, .shipping-section {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

    .billing-section h4, .shipping-section h4 {
        margin-bottom: 10px;
        color: #4088BD;
    }



.rz-notification-warn .rz-notification-item {
    color: #000000;
    background-color: #FFEB3B;
}

.rz-notification-icon.rzi-exclamation-triangle {
    color: #675d4e;
    font-size: 40px;
}

.rz-notification-success .rz-notification-item {
    background-color: #00bf67;
    color: #ffffff;
}

 

.rz-notification-close {
    color: #050505;
    font-size:20px
}

.rz-notification-icon.rzi-check {
    color: #ffffff;
    font-size:40px;

}
.rz-notification-icon::after {
    content: '';
    display: inline-block;
    width: 1px; /* Grosor de la línea */
    height: 100%; /* Asegúrate de que cubra la altura del contenedor */
    background-color: rgb(251 253 255 / 20%); /* Color de la línea */
    margin-left: 3px;; /* Espacio a la izquierda del icono */
    
}
.rz-notification-icon.rzi-check:before {
    content: "check_circle";
}

.rz-notification-icon.rzi-times:before {
    content: "chat_error";
}

.rz-notification-error .rz-notification-item {
    color: #ffffff;
    background-color: #F44336;
    border-radius: 10px;
}

.rz-notification-item-wrapper {
    background-color: #f4433600;
}

.rz-notification-icon.rzi-times {
    color: white;
    font-size: 40px;
}

.rz-notification-info .rz-notification-item {
    color: white;
    background-color: #645f5f;
}

.rz-notification-icon.rzi-info-circle {
    color: white;
    font-size: 40px;
}

.rz-notification-item-wrapper {
  
    width: 100%;
}

.rz-button.rz-base.rz-shade-default {
    background-color: #7a7777;
    color: white; 
}

/* CSS personalizado para los botones */
.ItruckCardButtonCopy {
    background-color: #00bf67; /* Color verde */
    border: none;
    color: white;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px; /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Efecto al pasar el mouse */
}

    .ItruckCardButtonCopy:hover {
        background-color: #45a049; /* Color verde más oscuro al pasar el mouse */
        transform: scale(1.05); /* Efecto de agrandar ligeramente al pasar el mouse */
    }

    .ItruckCardButtonCopy i {
        margin-right: 8px; /* Espacio entre el icono y el texto */
    }

    .ItruckCardButtonCopy.centered {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }




.ItruckCardButton {
    background-color: #4088BD;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 4px 2px;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
}

 

    .ItruckCardButton:hover {
        background-color: #45a049; /* Color verde más oscuro al pasar el mouse */
        transform: scale(1.05); /* Efecto de agrandar ligeramente al pasar el mouse */
    }

    .ItruckCardButton i {
        transition: transform 0.3s ease;
        font-size: 1.25rem; /* Ajustar tamaño con unidades relativas */
    }

    .ItruckCardButton:hover i {
        transform: scaleX(-1); /* Voltea el icono horizontalmente */
    }



.ItruckCardButtonBack {
    background-color: #fe8600; /* Un color diferente, por ejemplo, naranja */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .ItruckCardButtonBack i {
        transition: transform 0.3s ease;
        font-size: 15px;
    }


    .ItruckCardButtonBack:hover i {
        transform: rotate(360deg);
    }

.ItruckCardButtonTrace {
    background-color: #4088BD;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .ItruckCardButtonTrace i {
        transition: transform 0.3s ease;
        font-size: 15px;
    }

    .ItruckCardButtonTrace:hover i {
        transform: rotate(360deg);
    }

.ItruckCardButtonTemplate {
    background-color: #a860d4; /* Color de fondo verde */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

.ItruckCardButtonPreview {
    background-color: #198754; /* Color de fondo verde */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

    .ItruckCardButtonPreview i {
        font-size: 15px;
        display: inline-block; /* Asegura que el icono se comporta como un elemento en línea-bloque */
    }

    .ItruckCardButtonPreview:hover i {
        animation: bounce 0.5s ease infinite alternate; /* Anima el ícono con un "salto" continuo */
    }

.ItruckCardButtonDanger {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

    .ItruckCardButtonDanger i {
        font-size: 15px;
    }

/* Definición de la animación */
@keyframes bounce {
    0% {
        transform: translateY(0); /* Posición inicial */
    }

    50% {
        transform: translateY(-5px); /* Salto hacia arriba */
    }

    100% {
        transform: translateY(0); /* Vuelve a la posición inicial */
    }
}



/* buton list*/



.round-buttonSintxt {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #4088BD;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-buttonSintxt i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #4088BD; /* Color del icono por defecto */
        z-index: 1;
    }


.round-buttonTwo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #4088BD;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-buttonTwo i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #4088BD; /* Color del icono por defecto */
        z-index: 1;
    }

    .round-buttonTwo:hover {
        width: 100px; /* Expande el botón en hover */
        border-radius: 15px; /* Cambia a forma rectangular */
        background-color: #4088BD;
        justify-content: flex-start; /* Alinea el contenido a la izquierda para que el texto aparezca junto al icono */
        padding-left: 10px; /* Agrega espacio a la izquierda para alinear el icono y el texto */
    }

        .round-buttonTwo:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
            transform: translateX(0); /* Ajusta la posición del icono para que esté junto al texto */
        }

    .round-buttonTwo span {
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        position: absolute;
        left: 35px; /* Alinea el texto más cerca del icono */
        color: white; /* Asegura que el texto sea visible en hover */
    }

    .round-buttonTwo:hover span {
        opacity: 1;
        transform: translateX(0);
    }



.round-buttonTree{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #4088BD;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-buttonTree i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #4088BD; /* Color del icono por defecto */
        z-index: 1;
    }

    .round-buttonTree:hover {
        width: 200px; /* Expande el botón en hover */
        border-radius: 15px; /* Cambia a forma rectangular */
        background-color: #4088BD;
        justify-content: flex-start; /* Alinea el contenido a la izquierda para que el texto aparezca junto al icono */
        padding-left: 10px; /* Agrega espacio a la izquierda para alinear el icono y el texto */
    }

        .round-buttonTree:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
            transform: translateX(0); /* Ajusta la posición del icono para que esté junto al texto */
        }

    .round-buttonTree span {
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        position: absolute;
        left: 35px; /* Alinea el texto más cerca del icono */
        color: white; /* Asegura que el texto sea visible en hover */
    }

    .round-buttonTree:hover span {
        opacity: 1;
        transform: translateX(0);
    }

/**/
.round-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #4088BD;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-button i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #4088BD; /* Color del icono por defecto */
        z-index: 1;
    }

    .round-button:hover {
        width:1500px; /* Expande el botón en hover */
        border-radius: 15px; /* Cambia a forma rectangular */
        background-color: #4088BD;
        justify-content: flex-start; /* Alinea el contenido a la izquierda para que el texto aparezca junto al icono */
        padding-left: 10px; /* Agrega espacio a la izquierda para alinear el icono y el texto */
    }

        .round-button:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
            transform: translateX(0); /* Ajusta la posición del icono para que esté junto al texto */
        }

    .round-button span {
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        position: absolute;
        left: 35px; /* Alinea el texto más cerca del icono */
        color: white; /* Asegura que el texto sea visible en hover */
    }

    .round-button:hover span {
        opacity: 1;
        transform: translateX(0);
    }

.round-button-danger {
    border-color: #dc3545;
}

    .round-button-danger i {
        color: #dc3545; /* Color del icono para el botón de eliminar */
    }

    .round-button-danger:hover {
        background-color: #dc3545;
    }

        .round-button-danger:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }


        /*rutas*/

.round-button-Rutas {
    border-color: #dca904;
}

    .round-button-Rutas i {
        color: #dca904; /* Color del icono para el botón de eliminar */
    }

    .round-button-Rutas:hover {
        background-color: #dca904;
    }

        .round-button-Rutas:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }

.round-button-Factura {
    border-color: #198754;
}

    .round-button-Factura i {
        color: #198754; /* Color del icono para el botón de eliminar */
    }

    .round-button-Factura:hover {
        background-color: #198754;
    }

        .round-button-Factura:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }

.round-button-NoVisto {
    border-color: #198754;
}

    .round-button-NoVisto i {
        color: #198754; /* Color del icono para el botón de eliminar */
    }

    .round-button-NoVisto:hover {
        background-color: #198754;
    }

        .round-button-NoVisto:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }



.round-button-Visto {
    border-color: #cccccc;
}

    .round-button-Visto i {
        color: #cccccc; /* Color del icono para el botón de eliminar */
    }

    .round-button-Visto:hover {
        background-color: #cccccc;
    }

        .round-button-Visto:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }


@media (max-width: 768px) {
    .mobile-indicator {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .mobile-indicator {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }

    .show-on-mobile {
        display: block;
    }
}

@media (min-width: 769px) {
    .hide-on-mobile {
        display: block;
    }

    .show-on-mobile {
        display: none;
    }
}
.rz-cell-filter .rz-cell-filter-label > .rzi { 
    color: #000000;
    font-weight: 900;
    cursor:pointer
}

.rz-datatable-thead th, .rz-grid-table thead th {
     border-bottom: 1px solid #787575;
}

.rz-sortable-column .rzi-sort-asc {
    color: white;
}
.rz-sortable-column .rzi-sort-desc {
    color: white
}

.switch-container {
    padding: 1rem;
    background-color: #f5f5f560;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.switch-label {
    font-size: 1rem;
    font-weight: 550;
    color: #333;
}

.custom-switch {
    width: 50px;
    height: 20px;
    position: relative;
    background-color: #ccc; /* Default background for inactive state */
    border-radius: 15px;
    transition: background-color 0.3s ease-in-out;
}

  
    
 
.rz-switch.rz-switch-checked .rz-switch-circle:before {
    background: #4CAF50;
    transform: translateX(2rem);
}

.custom-switch.rz-switch-checked {
    background-color: #b8efbb; /* Green background when checked */
}






.client-list-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.title-section {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.iva-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.iva-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.iva-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.iva-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.iva-year-filter {
    width: 140px;
}

.iva-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.iva-quarter-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.iva-content {
    padding-top: 15px;
}

.iva-overview {
    background-color: #f8fbff;
    border: 1px solid #e0e8f3;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px rgba(64, 136, 189, 0.08);
}

.iva-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.iva-result-label {
    font-size: 0.85rem;
    color: #6c7b89;
    margin-top: 0.35rem;
}

.iva-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.iva-summary-card {
    background-color: #ffffff;
    border: 1px solid #d9e3f2;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: 0 6px 18px rgba(22, 64, 129, 0.08);
}

.iva-summary-positive {
    border-color: #4caf50;
}

.iva-summary-negative {
    border-color: #ff7043;
}

.summary-label {
    font-size: 0.85rem;
    color: #6c7b89;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f3a5f;
}

.ItruckCardButton {
    background-color: #4088BD; /* Use a more subtle yellow */
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.tooltipLicencia {
    visibility: hidden;
    width: 150px;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the badge */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    white-space: nowrap;
}

.custom-badge {
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
}

    .custom-badge:hover .tooltipLicencia {
        visibility: visible;
        opacity: 1; /* Show the tooltip with a fade-in effect */
    }

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .client-list-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .title-section {
        width: 100%;
        justify-content: space-between;
    }

    .ItruckCardButton {
        margin-top: 0;
        margin-left: 10px;
    }

    .custom-badge {
        margin-left: 0;
        margin-top: 10px;
    }
}
.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter {
    background-color: #4088BD;
    color: #ffffff; 
}
.rz-apply-filter .rz-button-text {
    visibility: hidden; /* Hide the original text */
    position: relative;
}

    .rz-apply-filter .rz-button-text::after {
        content: 'Buscar'; /* Replace 'New Text' with your desired text */
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-weight: 600;
        text-align: center;
        visibility: visible;
        font-size: 12px;
    }
/* Hide the original text */
.rz-clear-filter .rz-button-text {
    visibility: hidden;
    position: relative;
}

    /* Inject new text using the ::after pseudo-element */
    .rz-clear-filter .rz-button-text::after {
        content: 'Limpiar'; /* Replace 'Limpiar' with your desired translation */
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        visibility: visible;
        font-size: 12px;
        font-weight: 600;
    }


.round-button-gold {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #4088BD;
    background-color: #4088BD;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-button-gold i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #ffffff; /* Icono blanco por defecto */
        z-index: 1;
    }

    .round-button-gold:hover {
        width: 130px; /* Expande el botón en hover para mostrar el texto */
        border-radius: 15px; /* Cambia a forma rectangular */
        background-color: white; /* Fondo blanco en hover */
        justify-content: flex-start; /* Alinea el contenido a la izquierda */
        padding-left: 10px; /* Espacio a la izquierda para el icono y el texto */
    }

        .round-button-gold:hover i {
            color: #4088BD; /* Color del icono dorado en hover */
            transform: translateX(0); /* Ajusta la posición del icono */
        }

    .round-button-gold span {
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        position: absolute;
        left: 35px; /* Alinea el texto más cerca del icono */
        color: #333333; /* Color del texto dorado en hover */
    }

    .round-button-gold:hover span {
        opacity: 1;
        transform: translateX(0);
    }

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .round-button-gold {
        width: 93px; /* Siempre mostrar el botón expandido en móviles */
        border-radius: 15px;
        justify-content: flex-start;
        padding-left: 10px;
        font-size: 14px;
    }

        .round-button-gold i {
            color: white; /* Icono dorado en móviles */
            margin-right: 10px;
            font-size: 14px;
        }

        .round-button-gold span {
            opacity: 1;
            transform: translateX(0);
            position: static; /* Alinea el texto junto al icono */
      
            color: white;
        }

    .button-containerCe{
        padding-top:10px;
    }

    .iva-header {
        flex-direction: column;
        align-items: stretch;
    }

    .iva-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .iva-summary-grid {
        grid-template-columns: 1fr;
    }
}


.rz-column-resizer {
 
    width: 1px;
    background: #5e6565;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
    background-color: #4088bd59;
    color: var(--rz-panel-menu-item-2nd-level-active-color);
    font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight);
}
    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
        color: black;
    }


.rz-calendar-view td .rz-state-active, .rz-calendar-view td .rz-state-active.rz-calendar-today {
    color: var(--rz-datepicker-calendar-selected-color);
    background-color: #4088BD;
    padding: var(--rz-datepicker-calendar-item-padding);
    box-shadow: none;
}

.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight {
    background-color: #4088BD80;
    color: black;
    box-shadow: var(--rz-dropdown-item-selected-shadow);
    font-weight:600;
    border-radius: 0;
}
.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, .rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, .rz-calendar-view td .rz-state-active.rz-calendar-today:hover {
    color: var(--rz-datepicker-calendar-selected-hover-color);
    background-color: #4088BD;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-top-width: 0;
    border: 3px solid #ddb100;
    border-radius: 10px 10px 0 0; /* Redondeado en la parte superior */
}
.rz-tabview-nav .rz-tabview-selected {
    color: #555;
    position: relative;
    background-color: #4088BD;
}


.CustomTabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffffff;
    padding: 10px;
}

 

.CustomTab {
    padding: 10px 15px; /* Reducido para hacer los tabs más compactos */
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-right: 2px; /* Espaciado reducido entre los tabs */
    background-color: #f1f1f1;
    color: #7a7a7a;
}

    .CustomTab i {
        margin-right: 8px; /* Espaciado entre el icono y el texto */
    }

.CustomTabInactive:hover {
    background-color: #e0e0e0;
}

.CustomTabActive {
    background-color: #4088BD;
    color: white;
    border: 1px solid #4088BD;
    border-bottom: none;
    z-index: 10;
}

.CustomTabDisabled {
    background-color: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
}

.NavButton {
    background-color: #4088BD;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

    .NavButton:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }

    .NavButton:hover:not(:disabled) {
        background-color: #ff9800;
    }

.CustomTabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    padding: 10px;
}

.CustomTabContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 2px solid #4088BD;
    /* padding-left: 10px; */
    /* padding-right: 10px; */
    padding-top: 10px;
    border-top: 1px solid #f3f3f3;
    z-index: 1;
}

.CustomTab {
    padding: 14px 20px;
    cursor: pointer;
    font-size: 1em;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    display: flex;
    align-items: center;
    font-weight: 600;
    background-color: #f1f1f1;
    color: #7a7a7a;
}

/* Ajuste en el espaciado de los tabs */
.CustomTabContainer .CustomTab {
    margin-right: 20px; /* Espaciado reducido entre los tabs */
}

.CustomTab i {
    margin-right: 8px; /* Espaciado entre el icono y el texto */
    font-size: 1.5em;
}

.CustomTabInactive:hover {
    background-color: #e0e0e0;
}

.CustomTabActive {
    background-color: #4088BD;
    color: white;
    border: 1px solid #4088BD;
    border-bottom: none;
    z-index: 10;
}

.CustomTabDisabled {
    background-color: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
}

.NavButton {
    background-color: #4088BD;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 30%;
    cursor: pointer;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

    .NavButton:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }

    .NavButton:hover:not(:disabled) {
        background-color: #ff9800;
    }

.CustomTabContent {
    width: 100%;
    box-shadow: none; /* Eliminado para un aspecto más plano */
    margin-top: 0; /* Alineado correctamente con los tabs */
    position: relative;
    z-index: 1;
}

/* Media query para modo móvil */
@media (max-width: 768px) {
    .CustomTabContainer {
        justify-content: space-between; /* Para centrar los elementos de las pestañas en móviles */
    }

    .CustomTab {
        display: none; /* Oculta las pestañas en modo móvil */
    }

    .CustomTabActive {
        display: flex; /* Solo muestra la pestaña activa en modo móvil */
        margin-left:25px;
    }

    .NavButton {
        display: flex; /* Asegura que las flechas de navegación estén visibles en móvil */
    }
}
/* Ocultar completamente la barra de desplazamiento en WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 1px; /* Ocultar la barra de desplazamiento vertical */
    height: 1px; /* Ocultar la barra de desplazamiento horizontal */
}

/* Estilo para navegadores Firefox */
* {
    scrollbar-width: none; /* Ocultar la barra de desplazamiento en Firefox */
}

/* Opcional: Eliminar el área reservada para el track en WebKit */
::-webkit-scrollbar-track {
    background: transparent; /* Asegura que el track sea transparente */
}

.ItCuadro-containerSumary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 16px; /* Ajusta según sea necesario */
    padding: 10px;
    background-color: transparent; /* Fondo opcional */
    border-radius: 5px; /* Bordes redondeados opcionales */
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.ItCuadro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px; /* Ajusta según sea necesario */
    padding: 10px;
    background-color: transparent; /* Fondo opcional */
    border-radius: 5px; /* Bordes redondeados opcionales */
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.ItCuadro-text {
    font-size: 18px; /* Tamaño del texto de la fecha */
    font-weight: bold;
    color: #494848;
}

.ItCuadro-label {
    font-size: 12px; /* Tamaño del texto "Fecha Actual" */
    color: #494848; /* Ajusta el color si es necesario */
}

.text-green {
    color: green;
}
 
.text-red {
    color: red;
}

.rz-dialog{
    width : 60% !important
}
.info-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas para la mayoría de las secciones */
    gap: 1rem;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.info-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.info-value {
    font-size: 1rem;
    color: #555;
}

/* Asegurar que la sección de notas ocupe una fila completa */
.info-notes {
    grid-column: 1 / -1; /* Hace que la sección de notas ocupe toda la fila */
}

@media screen and (max-width: 768px) {
    .info-section {
        grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
    }

    .info-item {
        padding: 15px;
    }

    .info-label {
        font-size: 1.1rem;
    }

    .info-value {
        font-size: 1rem;
    }
}

 
.text-Darknegro {
    color: #2C2C2C;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

.rz-timeline-item:before { 
    height: 10px  !important
 
}




.rz-timeline-row .rz-timeline-item.Completo:before {
    background-color: green;
    height: 10px !important;
}

@media screen and (max-width: 768px) {
    .rz-timeline-item:before {
        height: 100% !important;
    }

    .rz-timeline-item.Completo:before {
        background-color: green;
    }

    .rz-timeline-column .rz-timeline-item:before {
        width: 5px;
        
    }
}

    .itruckMaps-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.6);
        padding-top: 60px;
    }

    .itruckMaps-modal-content {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid #ccc;
        width: 90%;
        max-width: 900px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .itruckMaps-close {
        color: #444;
        float: right;
        font-size: 24px;
        font-weight: bold;
        margin-top: -10px;
    }

        .itruckMaps-close:hover,
        .itruckMaps-close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

    .itruckMaps-modal-title {
        font-size: 24px;
        margin-bottom: 15px;
        color: #333;
        text-align: center;
    }

    .itruckMaps-modal-body {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

    .itruckMaps-left {
        flex: 1;
        min-width: 300px;
    }

    .itruckMaps-right {
        flex: 1;
        min-width: 300px;
    }

    .itruckMaps-info {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    }

        .itruckMaps-info legend {
            font-size: 18px;
            font-weight: bold;
            color: #4088BD;
        }

        .itruckMaps-info p {
            font-size: 16px;
            margin: 10px 0;
            color: #555;
        }

    /* Sección del Clima */
    .itruckMaps-weather {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

        .itruckMaps-weather legend {
            font-size: 18px;
            font-weight: bold;
            color: #4088BD;
        }

    .itruckMaps-weather-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .itruckMaps-weather-column {
        flex: 1;
        text-align: center;
        padding: 0 10px;
    }

    .itruckMaps-weather-icon {
        flex: 0 0 150px; /* Ampliar la columna del ícono */
        text-align: center;
    }

        .itruckMaps-weather-icon img {
            max-width: 220px; /* Ampliar el tamaño máximo del ícono */
            max-height: 220px;
            margin: auto;
            height: 90px;
        }

    .itruckMaps-weather-content p {
        margin: 5px 0;
        font-size: 16px;
        color: #555;
    }

    /* Sección del Mapa */
    .itruckMaps-modal-map {
        text-align: center;
    }

        .itruckMaps-modal-map img {
            max-width: 100%;
            max-height: 400px;
            border-radius: 8px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        }

    /* Diseño Responsive */
    @media screen and (max-width: 768px) {
        .itruckMaps-modal-body {
            flex-direction: column;
        }

        .itruckMaps-modal {
            padding-top: 110px;
        }

        .itruckMaps-modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #ccc;
            width: 90%;
            max-width: 900px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            height: 1150px !important;
        }

        .itruckMaps-left,
        .itruckMaps-right {
            max-width: 100%;
        }



        .itruckMaps-weather-column,
        .itruckMaps-weather-icon {
            text-align: center;
            padding: 5px 0;
        }

            .itruckMaps-weather-icon img {
                margin-bottom: 10px;
            }

        .itruckMaps-modal-map img {
            max-height: 100% !important;
            
            height: 400px !important;
            width: 100% !important;
        }

        .itruckMaps-close {
            font-size: 54px;
        }
    }


.custom-link {
    color: #4088BD; /* Color del enlace normal */
    text-decoration: none; /* Quitar subrayado */
    font-weight: bold; /* Hacer el texto en negrita */
}

    .custom-link:visited {
        color: #4088BD; /* Color del enlace visitado */
    }

    .custom-link i {
        margin-right: 5px; /* Espacio entre el icono y el texto */
        color: #555; /* Color del icono */
    }

    /* Cambia el color al pasar el ratón por encima */
    .custom-link:hover {
        color: #555; /* Color al pasar el mouse */
        text-decoration: underline; /* Subrayado al pasar el mouse */
    }
    .custom-link i:hover {
        color: #555; /* Color al pasar el mouse */ 
    }


.rz-timepicker .rz-button-md {
    
    background: #4088BD;
}




.itruckMapsRutas {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.itruckMapsRutasleft {
    flex: 1;
    min-width: 300px;
}

.itruckMapsRutasright {
    flex: 1;
    min-width: 300px;
}

.itruckMapsRutasinfo {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

    .itruckMapsRutasinfo legend {
        font-size: 18px;
        font-weight: bold;
        color: #4088BD;
    }

    .itruckMapsRutasinfo p {
        font-size: 16px;
        margin: 10px 0;
        color: #555;
    }


.info-sectionTwo {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Tres columnas de igual tamaño */
    gap: 1rem;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top:15px;
}

    .info-sectionTwo > div:nth-child(1) {
        grid-column: 1 / 2; /* Coloca el primer elemento en la primera columna */
        text-align: left; /* Alinea el contenido del primer elemento a la izquierda */
    }

    .info-sectionTwo > div:nth-child(2) {
        grid-column: 3/ 4; /* Coloca el segundo elemento en la segunda columna */
        text-align: center; /* Centra el contenido del segundo elemento */
    }
 


.info-itemTwo {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.info-labelTwo {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.info-valueTwo {
    font-size: 1rem;
    color: #555;
}


#autocomplete {
    width: 100%;
  
    font-size: 12px;
  
     
    border-radius: 4px;
    margin-bottom: 10px;
  
}


/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
    .itruckMapsRutas {
        flex-direction: column; /* Cambia a una columna en pantallas más pequeñas */
        gap: 10px; /* Reduce el espacio entre los elementos */
    }

    .info-sectionTwo {
        grid-template-columns: 1fr 50px; /* Una columna principal y una más pequeña para el ícono */
        gap: 0.5rem;
    }

        .info-sectionTwo > div:nth-child(1) {
            font-size: 0.9rem; /* Reduce el tamaño de la fuente para ahorrar espacio */
        }

        .info-sectionTwo > div:nth-child(2) {
            grid-column: 2 / 3;
            justify-self: flex-end; /* Alinea el botón a la derecha */
        }
}

@media (max-width: 480px) {
    .itruckMapsRutasinfo p {
        font-size: 14px; /* Ajusta el tamaño del texto en pantallas muy pequeñas */
    }
}
 

/* Contenedor general que contiene todas las facturas */
.itruckFact-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas para pantallas grandes */
    gap: 20px;
    width: 100%;
    max-width: 1200px; /* Limita el ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor */
  
}

/* Estilos del ticket con el tema ItruFact */
.itruckFact-ticket {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    position: relative;
    font-family: 'Roboto', sans-serif;
    overflow: hidden; /* Para asegurar que los elementos no se salgan del contenedor */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Añade espacio entre las secciones */
}

.itruckFact-view-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background-color: #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.itruckFact-header h1 {
    font-size: 22px;
    margin-bottom: 5px;
    text-align: center;
    color: #333;
}

.itruckFact-header p {
    text-align: center;
    margin: 5px 0;
    font-size: 14px;
    color: #777;
}

.itruckFact-info p {
    font-size: 15px;
    margin: 5px 0;
    color: #555;
}

.itruckFact-total p {
    font-size: 16px;
    margin: 5px 0;
    text-align: right;
    color: #333;
}

    .itruckFact-total p strong {
        color: #111;
    }

.itruckFact-footer {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: #888;
}

/* Estilo para borde recortado con tema ItruFact */
.itruckFact-ticket::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to right, transparent 50%, #fff 50%);
    background-size: 10px 20px; 
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .itruckFact-container {
        grid-template-columns: repeat(1, 1fr); /* Una columna en pantallas pequeñas */
    }

    .itruckFact-ticket {
        padding: 15px;
        gap: 10px; /* Espacio entre secciones reducido para pantallas pequeñas */
    }
}


.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active {
    background-color: #4088bd59;
    border-color: #4088bdff;
    color: #000000;
    font-weight: 600;
}

.rz-event-content {
    background: #4088BD; 
    color: white; 
    overflow: hidden;
}

.rz-scheduler a.rz-event-list-btn { 
    color: #607D8B; 
}
.rz-scheduler a.rz-event-list-btn:hover {
    color: #ff9800;
}

.custom-timeline {
    position: relative;
    padding: 20px 0;
    max-width: 700px;
    margin: 0 auto;
}

    .custom-timeline::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 0;
        left: 5px; /* Centra la línea en relación al marcador */
        width: 2px;
        background: #ddd;
    }

.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    padding-left: 10px; /* Ajusta el padding para que el contenido no se salga */
}

.timeline-marker {
    width: 12px;
    height: 12px;
    background-color: #CDC040;
    border-radius: 50%;
    position: absolute;
    left: 0px; /* Alinea el marcador con la línea */
    top: 0px;
    border: 2px solid white;
    box-shadow: 0 0 0 3px #CDC040;
}

.past-task .timeline-marker {
    background-color: #ccc;
    box-shadow: 0 0 0 3px #aaa;
}

.timeline-content {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.timeline-date {
    font-weight: bold;
    font-size: 0.9rem;
    color: #4088BD;
    margin-bottom: 5px;
}

.timeline-details {
    flex-grow: 1;
}

.timeline-title {
    margin: 0;
    font-size: 0.8rem;
    color: #333;
}

/* Responsive Design */
@media (max-width: 767px) {
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 15px; /* Ajuste para dispositivos pequeños */
    }

    .timeline-marker {
        left: 1px; /* Ajusta el marcador para dispositivos pequeños */
    }

    .timeline-content {
        padding: 5px;
        flex-direction: column;
        align-items: flex-start;
    }

    .timeline-date {
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

    .timeline-title {
        font-size: 0.95rem;
    }
    .custom-content {
    padding: 10px !important;
}
}





/* Tareas pasadas */
.past-task .timeline-marker {
    background-color: #aaa; /* Gris */
    box-shadow: 0 0 0 3px #aaa;
}

/* Tareas próximas, en 1 días  */
.red-task .timeline-marker {
    background-color: #c10e34; /* Amarillo */
    box-shadow: 0 0 0 3px #c10e34;
}

/* Tareas próximas, en 3 días o menos */
.warning-task .timeline-marker {
    background-color: #4088BD; /* Amarillo */
    box-shadow: 0 0 0 3px #4088BD;
}

/* Tareas próximas, en 7 días o menos */
.upcoming-task .timeline-marker {
    background-color: #ff6600; /* Naranja */
    box-shadow: 0 0 0 3px #ff6600;
}

/* Tareas futuras, más de 7 días */
.future-task .timeline-marker {
    background-color: #28a745; /* Verde */
    box-shadow: 0 0 0 3px #28a745;
}

/* Estilo para el fondo del modal */
.NotiModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Mostrar el modal */
.NotiModal-show {
    display: block;
}

/* Ocultar el modal */
.NotiModal-hide {
    display: none;
}

/* Contenido del modal */
.NotiModal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
}

/* Botón de cierre del modal */
.NotiModal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .NotiModal-close:hover,
    .NotiModal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }


/* Modal General */
.ITDoc-modal-visible {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.ITDoc-modal-hidden {
    display: none;
}

.ITDoc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
}

.ITDoc-modal-content {
    background-color: #fff;
    position: relative;
    margin: 50px auto;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80%; /* Limitar la altura máxima del modal */
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Habilitar scroll dentro del modal si el contenido es mayor */

    border-bottom: 4px solid #4088BD;
}

.ITDoc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .ITDoc-modal-header h5 {
        margin: 0;
        font-size: 1.25rem;
    }

.ITDoc-modal-body {
    margin-top: 20px;
}

.ITDoc-close-btn {
    background-color: #4088BD; /* Color del botón */
    border: none; /* Sin bordes */
    color: #fff; /* Color de la "X" en blanco */
    font-size: 1.5rem; /* Tamaño de la fuente para la "X" */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    width: 40px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    border-radius: 50%; /* Hace el botón redondo */
    display: flex; /* Usar flexbox para centrar la "X" */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

    .ITDoc-close-btn:hover {
        background-color: #366FA0; /* Un color más oscuro al hacer hover */
    }

/* Área de carga de imagen */
.ITDoc-upload-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ITDoc-image-upload-box {
    width: 100%;
    height: 200px;
    border: 2px dashed #4088BD;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #4088BD;
    background-color: #f7faff;
    border-radius: 12px;
    transition: background-color 0.3s;
}

    .ITDoc-image-upload-box:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }

.ITDoc-uploaded-img {
    max-width: 100%;
    max-height: 300px; /* Limitar la altura de la imagen dentro del modal */
    height: auto;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Contenedor de la imagen */
.ITDoc-image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Overlay sobre la imagen */
.ITDoc-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro transparente */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 12px;
}

.ITDoc-image-container:hover .ITDoc-image-overlay {
    opacity: 1; /* Mostrar el overlay al pasar el ratón sobre la imagen */
}

/* Icono de eliminar (la X) */
.ITDoc-remove-icon {
    font-size: 2rem;
    cursor: pointer;
}

/* Botón personalizado */
.ITDoc-btn-custom {
    padding: 10px 20px;
    background-color: #4088BD;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}

    .ITDoc-btn-custom:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }

/* Acciones de subir */
.ITDoc-upload-actions {
    margin-top: 20px;
}


/* Overlay de carga que cubre toda la pantalla */
.ITDoc-fullscreen-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Asegurar que esté por encima de todo el contenido */
}

/* Contenido dentro del overlay (spinner y texto) */
.ITDoc-loading-content {
    text-align: center;
    color: white;
}

/* Spinner para mostrar la carga */
.ITDoc-spinner {
    border: 8px solid #4088BD;
    border-top: 8px solid #4088BD;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spinS 1s linear infinite;
}

/* Animación del spinner */
@keyframes spinS {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Estilos personalizados para el modal */
.modal-it {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
}

.modal-content-it {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.close-it {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close-it:hover,
    .close-it:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

/* Imagen responsive */
.img-responsive-it {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


.WizardITruck {
  
    margin: 0 auto;
 
    padding: 20px; 
}

.wizard-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .wizard-header .step {
        width: 33%;
        text-align: center;
        padding: 10px;
        color: #aaa; /* Color inactivo */
        position: relative;
        font-size: 14px;
    }

        .wizard-header .step i {
            font-size: 30px;
            display: block;
            margin-bottom: 5px;
            color: #aaa; /* Color inactivo */
            transition: color 0.3s ease;
        }

        .wizard-header .step.active {
            color: #4088BD; /* Color activo para el texto */
         
        }

            .wizard-header .step.active i {
                color: #4088BD; /* Color activo para el icono */
            }

        .wizard-header .step:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            width: 1px;
            height: 50px;
            background-color: #4088BD;
            transform: translateY(-50%);
        }

        .wizard-header .step:last-child:after {
            display: none;
        }

.wizard-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px; 
    text-align: center;
}

.relo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight:600;
    font-size:2em;
}

.btnredondo {
    display: inline-block;
    margin-left: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: #4088BD;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.btn-wizard {
    padding: 10px 20px;
    background-color: #4088BD;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    transition: background-color 0.3s;
}

    .btn-wizard:hover {
        background-color: #4088BD;
    }

    .btn-wizard:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

@media (max-width: 768px) {
    .WizardITruck {
        padding: 15px;
    }

    .wizard-header .step {
        font-size: 14px;
    }
}


.containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Para pantallas grandes */
    gap: 20px;
    padding: 20px;
}

/* Imagen a la izquierda */
.image-containerExtra {
    position: relative;
    width: 100%; /* Ajusta el ancho según sea necesario */
    max-width: 600px; /* Máximo ancho */
    overflow: hidden;
}

    .image-containerExtra img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease, transform-origin 0.3s ease; /* Transición suave */
    }

    /* Aplica el zoom en hover */
    .image-containerExtra.zoom img {
        transform: scale(1.5); /* Ajusta el nivel de zoom */
    }

/* Formularios a la derecha */
.form-containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para PC */
    gap: 10px;
}



/* Formularios a la derecha */
.form-containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para PC */
    gap: 10px;
}

@media (max-width: 768px) {
    .containerExtra {
        grid-template-columns: 1fr; /* Una columna para pantallas pequeñas */
    }

    .form-containerExtra {
        grid-template-columns: 1fr; /* Los campos en una sola columna en móviles */
    }
}


.linea-texto-linea {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

    .linea-texto-linea::before,
    .linea-texto-linea::after {
        content: "";
        flex-grow: 1;
        height: 1px;
        background-color: #000;
        margin: 0 10px;
    }

    .linea-texto-linea span {
        font-size: 18px;
        font-weight: bold;
    }


.factura-containerDos {
    margin-left: auto;
    margin-right: 0;
    margin-top: 20px;
    text-align: right;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    width:90%
}

.factura-container {
    margin-left: auto;
    margin-right: 0;
    margin-top: 20px;
    text-align: right;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.factura-item {
    margin-bottom: 10px;
    font-size: 16px;
}

    .factura-item span {
        font-weight: bold;
    }

.factura-total {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}
.imagezoo {
    max-width: 100%; /* Asegura que la imagen no exceda el tamaño del contenedor */
    height: auto; /* Mantiene la relación de aspecto de la imagen */
    display: block; /* Evita espacios en línea debajo de la imagen */
    border-radius: 8px; /* Bordes redondeados */
    object-fit: cover; /* Opcional: ajusta la imagen dentro de su contenedor */
}


.zoom-area {
    position: absolute;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: 1px solid #000;
    display: none;
    pointer-events: none;
    border-radius: 30%; /* Circular */
}

#zoom-image {
    position: absolute;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}


.texrregister {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: black
}

.grid-containerBTNCua {
    display: grid;
    grid-template-columns: 1fr; /* Por defecto una sola columna */
    gap: 10px; /* Espacio entre los elementos */
    justify-content: end;
}

 
.button-containerD {
    display: flex;
    justify-content: center;
}

.button-container {
    display: flex;
    grid-template-columns: repeat(3, 1fr); /* Cuatro columnas */
    justify-content: end;
    gap: 10px; /* Espacio entre los botones */
}


.grid-containerBTNtre {
    display: flex;
    gap: 10px; /* Espacio entre los elementos */
    justify-content: end;
    grid-template-columns: repeat(3, 1fr); /* Cuatro columnas */
}
 

 
.grid-containerBTNDos {
    display: grid;
    grid-template-columns: 1fr; /* Por defecto una sola columna */
    gap: 10px; /* Espacio entre los elementos */
    justify-content: end;
}

.button-container2 {
    display: flex;
    grid-template-columns: repeat(4, 1fr); /* Cuatro columnas */
    justify-content: end;
    gap: 10px; /* Espacio entre los botones */
}
@media (max-width: 768px) {
    .grid-containerBTNDos {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: end;
    }
    .button-container2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Cuatro columnas */
        justify-content: end;
        gap: 10px; /* Espacio entre los botones */
    }
    .grid-containerBTNtre {
        display: GRID;
        gap: 10px;
        justify-content: end;
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-containerBTNCua {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: end;
    }
}



/* Estilos generales para el fondo del modal */
.ModalDemo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo ligeramente oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
z-index: 9991;
}
.rz-dropdown-panel {
    box-sizing: content-box;
    padding: var(--rz-dropdown-panel-padding);
    z-index: 99999 !important;
}
.rz-notification {
    box-sizing: border-box;
    position: fixed;
    z-index: 9992;
    inset-block-start: 100px;
    inset-inline-end: 1rem;

}

@media (max-width: 768px) {
    /* Contenido del modal */
    .ModalDemo-content {
       
        width:  100% !important;
      
    }

}

    /* Contenido del modal */
.ModalDemo-content {
    background-color: white;
    width: 40%; /* Ajustado para un tamaño más pequeño */
    max-width: 600px;
    padding: 0; /* Sin relleno para manejar los elementos internos */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Para manejar el borde redondeado en el header */
    position: relative;
    border-bottom: 4px solid #4088BD;
}

    /* Encabezado del modal con fondo azul */
    .ModalDemo-header {
        background-color: #4088BD; /* Azul similar al de la imagen */
        padding: 15px;
        color: white; /* Texto blanco */
        text-transform: uppercase;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .ModalDemo-header h2 {
            margin: 0;
        }

    .ModalDemo-close {
        background: none;
        border: none;
        font-size: 34px;
        cursor: pointer;
        color: white;
        font-weight: 700;
    }

    /* Cuerpo del modal */
    .ModalDemo-body {
        padding: 20px; /* Espacio interno */
    }

        .ModalDemo-body form {
            display: flex;
            flex-direction: column;
            gap: 20px; /* Espacio entre los campos */
        }
/*
        .ModalDemo-body input {
            width: 100%;
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
        }*/

        /* Botón personalizado */
        .ModalDemo-body button {
            background-color: #4e4e4e; /* Color oscuro */
            color: white; /* Texto en blanco */
            border: none;
            padding: 15px;
            text-transform: uppercase; /* Texto en mayúsculas */
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
            width: 100%;
            font-size: 1rem;
        }

            /* Hover del botón */
            .ModalDemo-body button:hover {
                background-color: #333333;
            }

    /* Estilo del botón de cierre */
    .ModalDemo-close:hover {
        color: #ffffff88; /* Color de hover para el botón de cierre */
    }


.ModalBien-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; 
}

.ModalBien-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
    border-bottom: 4px solid #4088BD;
}

.ModalBien-header h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.ModalBien-body {
    margin-top: 15px;
}

.ModalBien-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

.ModalBien-body p {
    font-size: 16px;
    color: #555;
    margin: 0;
}

.ModalBien-footer {
    margin-top: 20px;
}

 
    .ModalBien-button

{
    background-color: #4088BD;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

.ModalBien-button i {
    margin-left: 10px;
    animation: moveRight 1s infinite linear; /* Animación continua */
}

.ModalBien-button:hover i {
    animation-play-state: paused; /* Pausa la animación en hover */
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px); /* Mueve el ícono hacia la derecha */
    }

    100% {
        transform: translateX(0); /* Vuelve a la posición original */
    }
}

.ModalBien-button:hover {
    background-color: #4088bdc2;
}


    

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.form-containerVertitcal {
    width: 100%; 
    margin: 0 auto; 
    gap: 10px;
    display: grid; 
    gap: 10px;
}


/* Contenedor principal */
.profile-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* Líneas a los lados */
.line {
    width: calc(50% - 100px); /* Ajustamos el ancho para que las líneas se unan al arco sin tocar el perfil */
    height: 1px;
    background-color: #cdcbcb;
    position: relative;
    z-index: 1;
}

/* Círculos en los extremos de las líneas */
.circle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #cdcbcb;
    border-radius: 50%;
    position: absolute;
    top: -7px;
}

.left-line .circle {
    left: 0px; /* Posicionamos el círculo al extremo izquierdo */
}

.right-line .circle {
    right: 0px; /* Posicionamos el círculo al extremo derecho */
}

/* Contenedor del perfil (imagen o inicial) */
.profile-container {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin: 0 20px; /* Espacio a los lados para evitar que el perfil toque las líneas */
}

/* Imagen de perfil */
.profile-image-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #cdcbcb;
    overflow: hidden;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Inicial del perfil */
.profile-initial-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #4088BD; /* Aseguramos el color de fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #4088BD; /* Borde azul */
}

.profile-initial {
    color: white;
    font-size: 40px;
    font-weight: bold;
    text-align: center; /* Asegura que la inicial esté centrada */
}

/* Arco que conecta las líneas */
.arc {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 100px;
    background-color: transparent;
    border: 1px solid #cdcbcb;
    border-radius: 100px 100px 0 0;
    border-bottom: none;
    z-index: 1;
}

/* Hover que aparece al pasar sobre el perfil */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
}

.profile-container:hover .hover-overlay {
    display: flex;
}

.hover-overlay i {
    color: white;
    font-size: 24px;
}

/* Ícono de lápiz siempre visible para editar la imagen */
.edit-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 4;
}

    .edit-icon i {
        color: white;
        font-size:10px;
    }

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    .line {
        width: 111px;
    }

    .circle {
        width: 15px;
        height: 15px;
    }

    .arc {
        width: 120px;
        height: 66px;
    }

    .profile-container {
        width: 87px;
        height: 80px;
    }

    .profile-initial {
        font-size: 30px;
    }

    .profile-wrapper {
        padding-top: 40px;
    }
}


.form-containerAD {
    max-width: 400px; /* Ajusta el ancho máximo para centrarlo */
    margin: 0 auto; /* Centra el contenedor */
    display: flex;
    flex-direction: column; /* Asegura que los elementos estén en columna */
    gap: 15px; /* Espacio entre los campos */

    padding-top: 10px;
}

.fomDivBt {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}


.fomDivBtCenter {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 768px) {
    /* Para pantallas más pequeñas, como teléfonos móviles */
    .form-containerAD {
        width: 100%; /* Asegura que ocupe todo el ancho en móvil */
        max-width: 100%; /* Anula el ancho máximo en dispositivos pequeños */
        padding: 0px; /* Añade un poco de espacio a los lados en móvil */
    }
    .fomDivBt {
        justify-content: center;
    }
   
}
 
/* Estilos del modal */
.ModalGlobal-visible {
    display: flex;
}

.ModalGlobal-hidden {
    display: none;
}

/* Fondo del modal */
.ModalGlobal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Contenedor del modal */
.ModalGlobal-content {
    background-color: white;
    width: 40%;
    max-width: 600px;
    max-height: 90vh; /* Limitar la altura del modal */
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    border-bottom: 4px solid #4088BD;
    display: flex;
    flex-direction: column;
}

/* Header del modal */
.ModalGlobal-header {
    background-color: #4088BD;
    padding: 15px;
    color: white;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .ModalGlobal-header h2 {
        margin: 0;
    }

.ModalGlobal-close {
    background: none;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: white;
    font-weight: 700;
}

    .ModalGlobal-close:hover {
        color: #ffffff88;
    }

/* Cuerpo del modal con scroll habilitado */
.ModalGlobal-body {
    padding: 20px;
    overflow-y: auto; /* Habilitar el scroll dentro del cuerpo del modal */
    flex-grow: 1;
    max-height: calc(90vh - 80px); /* Ajustar la altura teniendo en cuenta el header */
    scrollbar-width: auto; /* Sobrescribir el ocultamiento global */
}

    /* Sobrescribir los estilos del scrollbar para el modal */
    .ModalGlobal-body::-webkit-scrollbar {
        width: 4px; /* Mostrar el scroll de nuevo */
    }

    .ModalGlobal-body::-webkit-scrollbar-thumb {
        background: #4088bd91; /* Color del scroll */
        border-radius: 0px;
    }

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .ModalGlobal-content {
        width: 90%;
        max-height: 90vh;
    }
}



.no-permission-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-color: #f8f9fa;
}

.no-permission-card {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
    border-bottom: 8px solid #4088BD;
}

    .no-permission-card h1 {
        font-size: 2rem;
        color: #dc3545; /* Color de alerta */
    }

    .no-permission-card p {
        margin: 1rem 0;
        font-size: 1.1rem;
        color: #333;
    }

.btn-back {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #4088BD;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

    .btn-back:hover {
        background-color: #4088BD;
    }

.containerEpsacioTres {
    display: flex;
    justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    align-items: center; /* Alinea verticalmente en el centro si los elementos tienen alturas diferentes */
    flex-wrap: wrap; /* Permite que los elementos se ajusten a la siguiente línea si no caben */
    width: 100%; /* Ajusta esto según el contenedor que quieras usar */
    gap: 10px; /* Añade espacio entre los elementos */
}
@media (max-width: 768px) {
    .containerEpsacioTres {
        justify-content: flex-start; /* Alinea los elementos al inicio */
    }

        /* Cada elemento tomará el 48% del ancho para que haya dos en una fila */
        .containerEpsacioTres > * {
            flex: 1 1 48%; /* Cada elemento ocupa el 48% del ancho */
            margin-bottom: 10px; /* Añade un poco de espacio inferior */
        }
}
@media (max-width: 768px) {
    .containerEpsacioTres {
        justify-content: flex-start; /* Alinea los elementos al inicio */
    }

        /* Cada elemento tomará el 48% del ancho para que haya dos en una fila */
        .containerEpsacioTres > * {
            flex: 1 1 48%; /* Cada elemento ocupa el 48% del ancho */
            margin-bottom: 10px; /* Añade un poco de espacio inferior */
        }
}


.TBRol-role-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Encabezado solo para pantallas grandes */
.TBRol-permission-header {
    display: none; /* Por defecto no mostrar */
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    font-weight: bold;
    border-bottom: 2px solid #4088bd;
    white-space: nowrap;
    background: #4088bd;
    color: white;
    border-radius: 10px;
}

/* Elementos individuales de permiso */
.TBRol-permission-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.TBRol-module-name {
    flex: 1 1 200px;
    font-weight: bold;
    margin-bottom: 0;
}

.TBRol-permission-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 100px;
    justify-content: space-between;
}

/* Etiquetas para nombres de acciones en pantallas pequeñas */
.TBRol-label {
    display: none;
}

/* Mostrar el encabezado y ocultar las etiquetas en pantallas grandes */
@media (min-width: 768px) {
    .TBRol-permission-header {
        display: flex;
    }
  

    .TBRol-permission-switch-header {
        flex: 1 1 100px;
        text-align: center;
    }

    .TBRol-module-name {
        flex: 1 1 200px;
    }

    .TBRol-permission-switch {
        flex: 1 1 100px;
        justify-content: center;
    }

    /* Ocultar las etiquetas en pantallas grandes */
    .TBRol-label {
        display: none;
    }
}

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .TBRol-permission-header {
        display: none; /* Ocultar encabezado en pantallas pequeñas */
    }

    .TBRol-permission-item { 
        align-items: flex-start;
    }

    .TBRol-permission-switch {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .TBRol-label {
        display: inline-block; /* Mostrar las etiquetas junto a los switches */
        margin-right: 10px;
    }

    .TBRol-module-name {
        flex: 1 1 200px;
        font-weight: bold;
        margin-bottom: 0;
        position: relative; /* Necesario para que la pseudo-clase ::after se posicione correctamente */
    }

        .TBRol-module-name::after {
            content: ""; /* No mostramos texto, solo la línea */
            display: block;
            width: 100%; /* Línea ocupará el ancho del contenedor */
            height: 1px; /* Altura de la línea */
            background-color: #4088BD; /* Color claro para la línea */
            position: absolute;
            bottom: -5px; /* Ajustar la distancia desde la parte inferior del texto */
            left: 0;
        }
}


.RolView {
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    background-color: #4088bd;
    color: white;
 
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 2fr));
    gap: 20px;
}

.status-grid-item {
    background-color: #7fc7fc17;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

    .status-grid-item i {
        font-size: 24px;
        color: #28a745; /* Color inicial del ícono */
        margin-right: 10px; /* Espacio entre ícono y número */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .status-grid-item:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.status-amount {
    font-size: 24px;
    font-weight: bold;
    color: #3d4451;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.status-description {
    font-size: 14px;
    color: #98a6ad;
    margin-top: 5px;
}

/* Colores personalizados para cada ícono */
.status-grid-item:nth-child(1) i {
    color: #28a745; /* Verde para Activos */
}

.status-grid-item:nth-child(2) i {
    color: #f44336; /* Rojo para Inactivos */
}

.status-grid-item:nth-child(3) i {
    color: #ffc107; /* Amarillo para Mantenimiento */
}

.status-grid-item:nth-child(4) i {
    color: #4088BD; /* Azul para En Ruta */
}

.ItemIco {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    .status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50%, 2fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {

    .status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80%, 2fr));
        gap: 20px;
    }
}



.custom-linkHome {
    color: #555; /* Color del enlace normal */
    text-decoration: none; /* Quitar subrayado */
    font-weight: bold; /* Hacer el texto en negrita */
}

    .custom-linkHome:visited {
        color: #555; /* Color del enlace visitado */
    }

    .custom-linkHome i {
        margin-right: 5px; /* Espacio entre el icono y el texto */
        color: #555; /* Color del icono */
    }

    /* Cambia el color al pasar el ratón por encima */
    .custom-linkHome:hover {
        color: #555; /* Color al pasar el mouse */
        text-decoration: none; /* Subrayado al pasar el mouse */
    }

    .custom-linkHome i:hover {
        color: #555; /* Color al pasar el mouse */
    }
.link-plain {
    color: black; /* El color que quieres para el texto */
    text-decoration: none; /* Elimina el subrayado */
}

    .link-plain:visited {
        color: black; /* Color cuando el enlace ya ha sido visitado */
    }

    .link-plain:hover {
        color: black; /* Color cuando el mouse está sobre el enlace */
        text-decoration: none; /* Asegura que no aparezca subrayado en hover */
    }

    .link-plain:active {
        color: black; /* Color cuando se hace clic en el enlace */
        text-decoration: none; /* Asegura que no haya subrayado al hacer clic */
    }
.payment-icons i {
    font-size: 30px; /* Ajusta el tamaño de los iconos */
    color: #4088bd7a; /* Color de los iconos */
    margin-right: 15px; /* Añade espacio a la derecha de cada icono */
}

    .payment-icons i:last-child {
        margin-right: 0; /* Elimina el margen derecho del último ícono */
    }

    .payment-icons i:hover {
        color: #4088BD; /* Cambia el color al pasar el ratón por encima */
    }



.rz-accordion {
    box-sizing: border-box;
    border-radius: var(--rz-accordion-border-radius);
    /* box-shadow: var(--rz-accordion-shadow); */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

.RutI-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.RutI-row {
 
    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
}

.RutI-row-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

.RutI-circle {
    border: 2px solid #4088BD;
    border-radius: 50px;
    padding: 10px;
    text-align: center;
    width: 100%;
}

.docdriver {
    display: grid;
    grid-template-columns: 30% 67%;
    gap: 20px; /* Espacio entre columnas, puedes ajustarlo según tus necesidades */
}

@media (max-width: 768px) {
    .docdriver {
        grid-template-columns: 1fr; /* En pantallas pequeñas (celulares) será una sola columna */
    }
}

/* Encabezado */
.FacItruck-header {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas, cada una ocupa el 50% del ancho */
    gap: 5px; 
}

    .FacItruck-header p:nth-child(odd) {
        justify-self: start; /* Alinea a la izquierda */
    }

    .FacItruck-header p:nth-child(even) {
        justify-self: end; /* Alinea a la derecha */
    }


/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .FacItruck-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}
 
/* Tabla de items */
.FacItruck-items {
    margin-top: 20px;
}

.FacItruck-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.FacItruck-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    border-radius: 10px 10px 0 0; /* Bordes superiores redondeados */
    overflow: hidden; /* Para que el contenido no sobresalga de los bordes redondeados */
}

    .FacItruck-table thead {
        background-color: #504D4D;
        color: #ffffff;
    }
    .FacItruck-table th:first-child {
        border-top-left-radius: 10px; /* Esquina superior izquierda */
    }

    .FacItruck-table th:last-child {
        border-top-right-radius: 10px; /* Esquina superior derecha */
    }

    .FacItruck-table th, .FacItruck-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
        font-size: 14px;
        white-space: nowrap; /* Evitar que el texto se corte */
    }

    .FacItruck-table th {
        font-weight: 500;
    }

    .FacItruck-table tbody tr:hover {
        background-color: #f3f4f6;
    }

/* Ocultar columnas menos importantes en pantallas pequeñas */
@media (max-width: 768px) {
    .FacItruck-col-precio, .FacItruck-col-descuento {
        display: none;
    }

    .FacItruck-table {
        min-width: auto; /* Permitir que la tabla se ajuste al ancho disponible */
    }
}

/* Totales y Información Adicional */
.FacItruck-summary {
    display: grid;
    grid-template-columns: 30% 30% 1fr;
    gap: 30px;
    margin-top: 20px;
}

/* Ajuste para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .FacItruck-summary {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}


.FacItruck-additional-info2 {
    display: flex;
    flex-direction: column; /* Asegura que los elementos se muestren en columnas (uno debajo de otro) */
    gap: 10px; /* Espacio entre los elementos */
    margin-top: 0px; /* Margen superior opcional */
}
.FacItruck-additional-info {
    display: flex;
    flex-direction: column; /* Asegura que los elementos se muestren en columnas (uno debajo de otro) */
    gap: 10px; /* Espacio entre los elementos */
    margin-top: 20px; /* Margen superior opcional */
}

    .FacItruck-additional-info p {
        margin: 0;
    }

    .FacItruck-additional-info a {
        color: #4088BD; /* Color del enlace */
        text-decoration: none;
    }

        .FacItruck-additional-info a:hover {
            text-decoration: underline; /* Subraya el enlace al pasar el mouse */
        }

   

    .FacItruck-totals table {
        width: 100%;
    }

    .FacItruck-totals td {
        padding: 8px 0;
        font-size: 14px;
    }

        .FacItruck-totals td:first-child {
            text-align: left;
        }

        .FacItruck-totals td:last-child {
            text-align: right;
        }

.FacItruck-total-row td {
    font-size: 16px;
    font-weight: 700;
    border-top: 2px solid #e5e7eb;
    padding-top: 10px;
}

/* Pie de página */
.FacItruck-footer {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    color: #6b7280;
}

    .FacItruck-footer a {
        color: #3b82f6;
        text-decoration: none;
    }

        .FacItruck-footer a:hover {
            text-decoration: underline;
        }

/* Responsividad */
@media (max-width: 768px) {
    .FacItruck-company-info, .FacItruck-invoice-info, .FacItruck-additional-info, .FacItruck-totals {
        width: 100%;
    }

        .FacItruck-invoice-info h2, .FacItruck-invoice-info p {
            text-align: left;
        }

    .FacItruck-summary {
        flex-direction: column;
    }

    .FacItruck-additional-info {
        margin-bottom: 20px;
    }
}
.espacioCardFixbuton {
    margin-bottom: 50px;
}
@media (max-width: 768px) {
    .espacioCardFixbuton {
        margin-bottom: 60px;
    }
}
    .fixed-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%; /* Barra ocupa todo el ancho de la pantalla */
        background-color: #4088BD; /* Color de fondo */
        padding: 15px;
        text-align: center;
        border-top-left-radius: 10px;
    }

    .save-button {
        background-color: #fff; /* Color de fondo del botón */
        color: #4088BD; /* Color del texto */
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .save-button:hover {
            background-color: #e5e7eb; /* Cambia color en hover */
        }
.save-button i {
    margin-left: 10px;
    animation: moveRight 1s infinite linear; /* Animación continua */
}

        .save-button:hover i {
            animation-play-state: paused; /* Pausa la animación en hover */
        }

.FacItruck-totals {
    margin-top: 20px;
    width: 100%;
}

.FacItruck-totals-header {
    background-color: #4088BD; /* Color de fondo */
    color: white; /* Color del texto */
    font-size: 18px;
    padding: 10px;
    text-align: center;
    border-radius: 10px 10px 0 0; /* Bordes redondeados en la parte superior */
}

.FacItruck-total-row td {
    font-weight: bold;
    padding-top: 10px;
    border-top: 2px solid #e5e7eb;
}

@media (max-width: 1024px) {
    .FacItruck-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 20px;
    }
}

 


/* Estilos generales */
body.modalim-modal-open {
    overflow: hidden;
}

/* Contenedor de la imagen */
.modalim-image-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: auto;
}

/* Estilos para el overlay */
.modalim-image-overlay {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: zoom-in;
}

    /* Imagen inicial */
    .modalim-image-overlay img {
        width: 100%;
        display: block;
        border-radius: 8px;
    }

    /* Fondo oscuro sobre la imagen */
    .modalim-image-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
        border-radius: 8px;
        pointer-events: none; /* Permite que los clics pasen a través del overlay */
    }

/* Ícono de zoom */
.modalim-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px; /* Tamaño del ícono */
    color: #fff;
    pointer-events: none;
}

    /* Ajuste para el ícono de Font Awesome */
    .modalim-zoom-icon i {
        font-size: 50px;
    }

/* Estilos para el modal */
.modalim-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 98%); /* Fondo negro semitransparente */
    overflow: hidden; /* Oculta el scroll */
}

/* Barra de herramientas */
.modalim-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center; /* Centra los controles horizontalmente */
    z-index: 1001;
}

/* Botón de cierre */
.modalim-close {
    position: absolute;
    top: 8px;
    right: 29px;
    background-color: #4088BD;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para los controles de zoom */
.modalim-zoom-controls {
    display: flex;
    gap: 10px;
}

    .modalim-zoom-controls button {
        background-color: #4088BD; /* Color del botón */
        border: none; /* Sin bordes */
        color: #fff; /* Color del texto en blanco */
        font-size: 1.5rem; /* Tamaño de la fuente */
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 5px;
    }

        .modalim-zoom-controls button:hover {
            background-color: #66a9de;
        }

/* Contenedor de la imagen dentro del modal */
.modalim-modal-content-container {
    width: 100%;
    height: calc(100% - 60px); /* Resta la altura de la barra de herramientas */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 60px; /* Evita que la imagen se superponga con la barra */
}

/* Imagen dentro del modal */
.modalim-modal-content {
    max-width: 100%;
    max-height: 100%;
    cursor: grab; /* Indica que se puede arrastrar */
    transition: transform 0.25s ease; /* Suaviza el zoom */
    border-radius: 8px;
}

    /* Cursor durante el arrastre */
    .modalim-modal-content:active {
        cursor: grabbing;
    }

/* Estilos responsivos */
@media (max-width: 600px) {
    /* En dispositivos móviles */
    .modalim-toolbar {
        justify-content: space-between; /* Distribuye espacio entre los elementos */
        padding: 0 10px;
    }

    .modalim-close {
        position: static;
        order: 2;
    }

    .modalim-zoom-controls {
        order: 1;
    }
}


/* Contenedor principal simula un fieldset */
.custom-fieldset {
    border: 2px solid #cccccc6e;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    margin-bottom: 20px;
    padding-top: 30px; /* Espacio para que el título se superponga */
}

/* Encabezado simula el legend */
.custom-legend {
    position: absolute;
    top: -15px; /* Levanta el legend simulado sobre el borde */
    left: 20px;
    background-color: white;
    padding: 0 10px; /* Espacio alrededor del texto para superponer sobre la línea */
    display: flex;
    align-items: center;
    width: calc(100% - 40px); /* Asegura que el botón esté alineado a la derecha */
    z-index: 1;
}

/* Título del legend */
.legend-title {
    font-weight: bold;
    font-size: 16px;
    z-index: 1;
}

/* Línea entre el título y el botón */
.legend-line {
    flex-grow: 1;
    height: 1px;
    background-color: #ccc;
    margin: 0 10px; /* Espaciado entre el título y el botón */
}

/* Botón de edición */
.edit-button {
    background-color: #34A853;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Icono dentro del botón */
    .edit-button i {
        font-size: 1.2em;
    }

    /* Efecto hover en el botón */
    .edit-button:hover {
        background-color: #34A853;
    }


/* Botón de edición */
.edit-button2 {
    background-color: #e87608;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Icono dentro del botón */
    .edit-button2 i {
        font-size: 1.2em;
    }

    /* Efecto hover en el botón */
    .edit-button2:hover {
        background-color: #e87608;
    }

/* Contenido dentro del fieldset */
.fieldset-content {
    padding-top: 10px;
}

    /* Estilos para las etiquetas dentro del contenido */
    .fieldset-content div {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

        .fieldset-content div strong {
            margin-right: 5px;
        }

/* Icono de edición junto al teléfono */
.edit-icon {
    margin-left: 10px;
    color: #4088BD;
    text-decoration: none;
    cursor: pointer;
}

    .edit-icon i {
        font-size: 16px;
    }

    .edit-icon:hover {
        color: #4088bd90;
    }

/* Estilos responsivos */
@media (max-width: 600px) {
    .custom-legend {
        flex-wrap: wrap;
    }

    .legend-title {
        margin-bottom: 5px;
    }

    .edit-button {
        margin-top: 5px;
    }

    .fieldset-content div {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-icon {
        margin-left: 0;
        margin-top: 5px;
    }
}

.form-group-custom {
    padding: 7px;
    /* border: 1px solid #dcdcdc; */
    border-radius: 4px;
    /* display: inline-block; */
    width: 95%;
    /* margin-bottom: 10px; */
    /* margin-top: 20px; */
}

    .form-group-custom label {
        display: block;
        font-size: 14px;
        color: #999999;
        margin-bottom: 5px;
    }

.form-control-custom {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    color: #333333;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    box-sizing: border-box;
}

.switch-containerBorde {
    padding: 0.5rem;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}

.switch-containerTow {
    display: flex;
    justify-content: space-between;
    align-items: center;
 
}

.zoom-controls {
    display: flex;
    justify-content: flex-end;
}

.zoom-btn {
    background-color: #4088BD;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

    .zoom-btn:hover {
        background-color: #346a8c;
    }


.FacRepor-container {
    border: 1px solid #919090; 
    padding: 10px;
}

.btnfac {
    background-color: #e7650d !important;
}

.btnDEsc {
    background-color: #ffb71c !important;
}

.FacRepor-header {
    background-color: #4088BD;
    padding: 20px;
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.FacRepor-logo {
    width: 100px;
}

.FacRepor-invoice-title {
    font-size: 36px;
    font-weight: bold;
}

.FacRepor-invoice-details {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

    .FacRepor-invoice-details div {
        margin-bottom: 10px;
    }

    .FacRepor-invoice-details p {
        margin: 0;
        font-size: 14px;
    }

.FacRepor-invoice-number {
    font-size: 14px;
    background-color: #4088BD;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}

.FacRepor-table-container {
    margin-top: 20px;
}

.FacRepor-summary {
    margin-top: 20px;
    justify-content: space-between;
    display: grid;
    grid-template-columns: 70% 30%; /* Primera columna al 70%, segunda al 30% */
}

 

.FacRepor-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    color: #777;
}

    .FacRepor-footer a {
        color: #00385c;
        text-decoration: none;
    }

/* Botones flotantes */
.FacRepor-floating-buttons {
    position: fixed;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.FacRepor-button {
    background-color: #00385c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

    .FacRepor-button:hover {
        background-color: #002d4a;
    }

.FacItruck-totals-headertow {
    background-color: #4088BD; /* Color de fondo */
    color: white; /* Color del texto */
    font-size: 18px;
    padding: 10px;
    text-align: center; 
}

.FacItruck-total-row td {
    font-weight: bold;
    padding-top: 10px;
    border-top: 2px solid #e5e7eb;
}

.invoice-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    color: #333;
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.invoice-company {
    text-align: left;
}

    .invoice-company h2 {
        font-size: 24px;
        margin: 0;
    }

.invoice-info p {
    margin: 5px 0;
}

.invoice-client {
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 20px;
}

    .invoice-client h3 {
        margin: 0;
        font-size: 18px;
    }

.invoice-items table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.invoice-items th, .invoice-items td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.invoice-items th {
    background-color: #f2f2f2;
}

.invoice-summary {
    text-align: right;
    margin-bottom: 20px;
}

    .invoice-summary p {
        margin: 5px 0;
        font-size: 16px;
    }

.invoice-footer {
    text-align: center;
    font-size: 12px;
    color: #666;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.invoice-status {
    padding: 5px 10px;
    border-radius: 5px;
}

    .invoice-status.paid {
        background-color: #4CAF50;
        color: white;
    }

    .invoice-status.pending {
        background-color: #FFC107;
        color: white;
    }

    .invoice-status.cancelled {
        background-color: #F44336;
        color: white;
    }
.TituloCompnay {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px;
    display: inline-flex;
    align-items: center;
}

.beta-badge {
    top: 16%;
    left: 13%;
    background-color: #ff00009c;
    color: #fff;
    font-size: 1em;
    /* width: 40%; */
    font-weight: bold;
    padding: 5px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* border-radius: 3px; */
    /* transform: rotate(45deg); */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.EfficContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.EfficFolder, .EfficFile {
    width: 100px;
    height: 140px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    position: relative;
}

    .EfficFolder:hover, .EfficFile:hover {
        background-color: #e0e0e0;
    }

.EfficFolderIcon, .EfficFileIcon {
    font-size: 40px;
    margin-bottom: 10px;
    color: #4088BD;
    cursor: pointer;
}

.EfficFolderName, .EfficFileName {
    border-top: 1px solid #ddd;
    font-size: 1em;
    color: #000000;
    /* background-color: #4088BD; */
    /* border-radius: 12px; */
     padding: 5px 10px; 
    /* display: inline-block; */
    font-weight: 500;
    font-family: Arial, sans-serif;
}

.DOC-button-delete {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-color: red;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .DOC-button-delete:hover {
        background-color: darkred;
    }

.EfficBackButton {
    margin-bottom: 20px;
    background-color: #4088BD;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

    .EfficBackButton:hover {
        background-color: #0056b3;
    }

.modal-reporte-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden; /* Ocultar por defecto */
    opacity: 0; /* Transición suave */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .modal-reporte-overlay.show {
        visibility: visible; /* Mostrar cuando la clase "show" esté presente */
        opacity: 1;
    }

    .modal-reporte-overlay.hide {
        visibility: hidden; /* Ocultar cuando la clase "hide" esté presente */
        opacity: 0;
    }

.modal-reporte {
    background-color: white;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    position: relative;
}

.modal-reporte-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.modal-close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

    .modal-close-button:hover {
        color: red;
    }

.modal-reporte-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


 /* Modal específico para la gestión de empresas del usuario */
.CompanyModal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.CompanyModal-content {
    background-color: white;
    width: 40%;
    max-width: 600px;
    max-height: 90vh;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    border-bottom: 4px solid #4088BD;
    display: flex;
    flex-direction: column;
}

.CompanyModal-header {
    background-color: #4088BD;
    padding: 15px;
    color: white;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.CompanyModal-close {
    background: none;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: white;
    font-weight: 700;
}

.CompanyModal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    max-height: calc(90vh - 80px);
}

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


.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
    color: #000000 !important;
    font-weight: 600 !important
}

.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td:not(.rz-frozen-cell) {
    background-color: rgb(64 210 90 / 12%) !important;
    color: black !important;
}

.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end {
    padding-top: 0rem !important;
}


.DOC-search-container {
    position: relative;
    max-width: 300px;
    margin: 0 auto 1rem;
}

.DOC-search-container i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.DOC-search {
    width: 100%;
    padding: 8px 8px 8px 32px;
    border: 1px solid #ccc;
    border-radius: 8px;
}


.iva-quarter-selector {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    gap: 10px;
}

.quarter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #e0e0e0;
    color: black;
}

    .quarter-btn.active {
        background-color: #4088BD;
        color: white;
    }

.iva-header {
    display: flex;
/*    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;*/
}

.iva-header-title {
    font-weight: bold;
}

.iva-amount {
    font-size: 24px;
    color: #4088BD;
}


.edit-button3 {
    background-color: #4088BD;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iva-quarter-selector {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    gap: 10px;
}

.quarter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #e0e0e0;
    color: black;
}

    .quarter-btn.active {
        background-color: #4088BD;
        color: white;
    }

.iva-overview {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

    .iva-overview > div {
        flex: 1;
        padding: 10px;
    }

        .iva-overview > div:not(:last-child) {
            border-right: 1px solid #e0e0e0;
        }

.iva-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iva-header-title {
    font-weight: bold;
}

.iva-amount {
    font-size: 24px;
    color: #4088BD;
}

.iva-summary-item {
    display: flex;
    align-items: center;
}


.modal-email-sender {
    max-width: 1100px;
    width: 95%;
}

.invoice-email-modal-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
}

.invoice-email-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-right: 1px solid #e0e0e0;
    padding-right: 16px;
}

.invoice-email-composer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recipient-group label,
.template-selector label,
.email-template-header label,
.email-preview-wrapper label {
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.template-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.template-selector-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
}

.template-switch {
    --rz-switch-background-on: #4088bd;
    --rz-switch-border-on: #4088bd;
}

.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    min-height: 40px;
    background: #fff;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag {
    background-color: #4088bd;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.tag-secondary {
    background-color: #6c757d;
}

.remove-tag {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
}

.recipient-group input,
.template-selector input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 5px;
    font-size: 14px;
    min-width: 120px;
}

.template-helper {
    color: #666;
    font-size: 12px;
}

.email-editor-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.email-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.email-preview-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.email-preview {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    background: #f8f9fa;
    max-height: 320px;
    overflow: auto;
}

.invoice-email-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.email-subject-preview {
    color: #666;
    font-size: 12px;
}

@media (max-width: 992px) {
    .invoice-email-modal-grid {
        grid-template-columns: 1fr;
    }

    .invoice-email-sidebar {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding-right: 0;
        padding-bottom: 16px;
    }
}
.invoice-email-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1100;
    animation: invoice-email-fade-in 150ms ease-in;
}

.invoice-email-modal {
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
    max-width: 1100px;
    width: 100%;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: invoice-email-slide-up 200ms ease-out;
}

.invoice-email-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 60%);
}

    .invoice-email-modal__header h2 {
        margin: 0;
        font-size: 1.35rem;
        font-weight: 600;
        color: #0f172a;
    }

.invoice-email-modal__close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 150ms ease, transform 150ms ease;
}

    .invoice-email-modal__close:hover,
    .invoice-email-modal__close:focus {
        color: #0f172a;
        transform: scale(1.05);
    }

.invoice-email-modal__body {
    padding: 1.5rem 1.75rem 1.75rem;
    overflow: auto;
}

    .invoice-email-modal__body::-webkit-scrollbar {
        width: 10px;
    }

    .invoice-email-modal__body::-webkit-scrollbar-track {
        background: #f8fafc;
        border-radius: 999px;
    }

    .invoice-email-modal__body::-webkit-scrollbar-thumb {
        background: #cbd5f5;
        border-radius: 999px;
    }

@keyframes invoice-email-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes invoice-email-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .invoice-email-modal {
        max-width: 95vw;
    }

    .invoice-email-modal__body {
        padding: 1.25rem;
    }
}

@media (max-width: 768px) {
    .invoice-email-modal {
        border-radius: 16px;
    }

    .invoice-email-modal__header {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
    }

        .invoice-email-modal__header h2 {
            font-size: 1.1rem;
        }

    .invoice-email-modal__body {
        padding: 1rem 1.25rem 1.5rem;
    }
}

@media (max-width: 576px) {
    .invoice-email-modal {
        max-height: calc(100vh - 1.5rem);
    }
}