.titulo {
    text-align: center;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;
}

/** Estilos oceanflight **/
body {
    font-family: 'Roboto', sans-serif !important;
    color: #3a3434 !important;
    font-size: 14px !important;
}

.cont-logo {
    text-align: center;
    padding: 7px !important;
}


.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.logo {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    background-image: linear-gradient(to right, #11306D, #21618C, #5FCE90); /* El gradiente */
        -webkit-background-clip: text; /* Para Safari */
        background-clip: text; /* Clip del fondo al texto */
        color: transparent; /* Hace el texto transparente para mostrar el fondo */
        display: inline-block; /* Necesario para que el clip funcione */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 20%);
}

.logo-operator {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #11306D;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    transform: rotate(-3deg);
    text-decoration: underline;
    margin-top: 10px;
}


.user-text {
    font-size: 14px;
}

.body-content {
    background-color: white !important;
}

.navbar-sup {
    background-image: linear-gradient(to right, #11306D, #21618C, #5FCE90);
    color: #FFFFFF;
    max-height: 45px;
}

.nav-link-sub {
    color: #FFFFFF !important;
}

.navbar-list {
    background-image: linear-gradient(to right, #11306D, #21618C, #5FCE90);
    color: #FFFFFF !important;
    border: 0px;
}

.badge-count-item i{
    color: #11306D !important;
}

.font-footer {
    font-size: 12px;

    a {
        color: #4a4a4a !important;
    }
}

.item-counter {
    display: flex;
    align-items: center; /* Esto alinea los hijos del flex-container verticalmente en el centro */
    gap: 10px; /* Añade un pequeño espacio entre el texto y el badge, ajustable a tu diseño */
}

.badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 80% !important;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    background-color: #2ECC71; /* color de fondo */
    color: white; /* color del texto */
}


/** icons **/
.icon-custom {
    font-size: 16px !important;
}

/** estilos listados **/
.title-dashboard {
    font-weight: bold;
    font-size: 16px;
    font-family: 'Roboto', sans-serif !important;
    color: #4a4a4a !important;
}

.datagrid {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background-color: white !important;
    overflow: hidden;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /**min-height: 250px;**/
    box-shadow: 0 2px 2px rgba(0, 0, 0, .25), 0 2px 10px rgba(0, 0, 0, .22) !important;
}

.datagrid table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}


.datagrid table td, .datagrid table th {
    padding: 3px 10px;
}

.datagrid table thead th {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #11306D;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: bold !important;
}

.datagrid table thead th:first-child {
    border: none;
}

.datagrid table tbody td {
    font-size: 12px;
    font-weight: normal;
}

.datagrid table tbody .alt td {
    background: #dcdcdc;
}

.datagrid table tbody td:first-child {
    border-left: none;
}

.datagrid table tbody tr:last-child td {
    border-bottom: none;
}

.datagrid table tfoot td div {
    border-top: 0px solid #11306e;
    background: #ffffff;
}

.datagrid table tfoot td {
    padding: 0;
    font-size: 12px
}

.datagrid table tfoot td div {
    padding: 2px;
    margin: 20px 10px 10px 10px;
}

.datagrid table tfoot td ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}

.datagrid table tfoot li {
    display: inline;
}

.datagrid table tfoot li a {
    text-decoration: none;
    display: inline-block;
    padding: 2px 8px;
    margin: 1px;
    color: #FFFFFF;
    border: 1px solid #11306D;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #11306D;
}

.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover {
    text-decoration: none;
    border-color: #11306D;
    color: #11306D;
    background: none;
    background-color: #FFFFFF;
}

.active {
    background-color: #fff !important;
    color: #4a4a4a !important;
}

.btn-action {
    background-color: #11306D !important;
    border: 1px solid #11306D !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    padding: 2px 12px !important;
    width: 100%;
}

.btn-action:hover {
    background-color: white !important;
    border: 1px solid #11306D !important;
    color: #11306D !important;
    font-weight: bold;
    font-size: 10px !important;
    padding: 2px 12px !important;
}

/** estados de los diferentes elementos del listado **/

.label-status {
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    padding: 4px;
    color: black;
    margin: 0px 2px;
}

.status-INIT {
    background-color: #96B6C5;
}

.status-EDIT {
    background-color: #ADC4CE;
}

.status-PENDING {
    background-color: #9ED2BE;
}

.status-INPROCESING {
    background-color: #C8E4B2;
}
.status-IN_PROCESS {
    background-color: #C8E4B2;
}

.status-FAILED {
    background-color: #FF9B9B;
}

.status-PENDING_GET_ALL_CONTRACTS {
    background-color: #CDC2AE;
}

.status-PENDING_NO_GET_PACKAGE_INSURANCE {
    background-color: #ECE5C7;
}

.status-PENDING_NO_GET_PACKAGE {
    background-color: #CDC2AE;
}

.status-PENDING_NO_GET_INSURANCE {
    background-color: #D7C0AE;
}

.status-PENDING_NO_GET_INSURANCE_ATOL {
    background-color: #6D6875;
}

.status-PENDING_NO_GET_ATOL {
    background-color: #F8F6F4;
}

.status-PENDING_NO_GET_PACKAGE_ATOL {
    background-color: #B7B7B7;
}

.status-DONE {
    background-color: #79AC78;
}

.status-NONE {
    background-color: #F8F6F4;
}

.status-PREBOOKING_CONFIRMED {
    background-color: #73A9AD;
}

.status-BOOKING_CONFIRMED {
    background-color: #116A7B;
}


/** Estilos etiquetas de stages**/

.stage-tag {
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    padding: 4px;
    color: black;
    margin: 0px 2px;

}

.stage-DRAFT {
    background-color: #E0E0E0;
}

.stage-PREBOOKING {
    background-color: #A7C7E7;
}

.stage-PAYMENT {
    background-color: #B8E0D2;
}

.stage-BOOKING {
    background-color: #8AB6D6;
}

.stage-COMPLETED {
    background-color: #A4D4AE;
}

.stage-FAILED {
    background-color: #EAB0D9;
}

.stage-CANCELLED {
    background-color: #FFCDB2;
}

.stage-CONTRACTING {
    background-color: #FFF5B7;
}

.version-tag {
    background-color: black !important;
    color: white !important;
}

/** estilos de los filtros**/
.modal-content {
    min-height: 200px;
}

.custom-modal-body {
     min-height: 40vh; /* 50% de la altura de la ventana del navegador */
}

.btn-action-filter {
    background-color: #11306D !important;
    border: 1px solid #11306D !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    padding: 4px 12px !important;
}

.btn-action-filter:hover {
    background-color: white !important;
    border: 1px solid #11306D !important;
    color: #11306D !important;
    font-weight: bold;
    font-size: 14px !important;
    padding: 4px 12px !important;
}

.btn-filter-delete {
    font-size: 14px !important;
}

.cont-filters {
    font-size: 14px !important;
}

.lbl-filter {
    font-size: inherit;
}

.select-filter {
    font-size: inherit;
}

#clearFilters {
    font-size: inherit;
}

#searchButton {
    font-size: inherit;
}

.clear_filters {
    font-size: 14px !important;
}

.input-smaller {
        height: 32px !important;
}

/** estilos de los links en los listados de drafts **/
.link-draft {
    color: #4a4a4a !important;
}
.link-draft:hover{
    color: black !important;
}

/** Interfaz Login**/
.body-login {
    background-image: url("{% static 'images/aeropuerto.webp' %}"); /* Ruta a tu imagen de fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.logo-login {
    font-family: 'Arial', sans-serif; /* Esta es una fuente común, pero puedes elegir cualquier otra */
    font-size: 24px; /* Ajusta el tamaño de la fuente a tu preferencia */
    color: black; /* Establece el color del texto a negro */
    font-weight: bold; /* Hace que el texto sea más grueso */
    text-transform: uppercase; /* Opcional: transforma el texto a mayúsculas para un efecto de logo */
    letter-spacing: 2px; /* Opcional: aumenta el espaciado entre letras */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombreado gris */
}


.btn-login {
    background-color: #11306D !important;
    color: #ffffff !important;
}

.btn-login:hover {
    background-color: #ffffff !important;
    color: #11306D !important;
    border: 1px solid #11306D !important;
    font-weight: bold !important;
}

/** detail package**/
.title-detail {
    font-size: 60px !important;
}

#toastsContainerTopRight{
    margin-top: 50px !important;
}

.cont-detail {
    background-color: white !important;
    overflow: hidden;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2) !important;
    max-width: 98%;
    padding: 20px;
    font-size: 16px;
    margin-bottom: 50px !important;
    min-height: 80vh !important;
}

.cont-detail-title h1 {
    font-size: 32px;
    color: #3a3434;
    font-weight: bold;
}

/** Estilos botones del modal edit**/
.btn-action-edit-cancel {
    color: #FFFFFF !important;
    font-size: 14px !important;
    padding: 4px 12px !important;
}

.btn-action-edit-cancel:hover {
    background-color: white !important;
    border: 1px solid black !important;
    color: black !important;
    font-weight: bold;
    font-size: 14px !important;
    padding: 4px 12px !important;
}
.btn-action-edit-book {
    color: #FFFFFF !important;
    font-size: 14px !important;
    padding: 4px 12px !important;
}

.btn-action-edit-book:hover {
    background-color: white !important;
    border: 1px solid black !important;
    color: black !important;
    font-weight: bold;
    font-size: 14px !important;
    padding: 4px 12px !important;
}

/** estilos de los botones de acción del detalle **/
.cont-btn-details{
    text-align: end;
}

.modal-body-detail {
    max-height: calc(100vh - 210px); /* 100vh es el 100% de la altura de la ventana de visualización */
    overflow-y: auto; /* Habilita el desplazamiento vertical si el contenido es más alto que max-height */
}

/* Estilo general para la barra de desplazamiento */
.modal-body::-webkit-scrollbar {
    width: 8px; /* ancho de la barra de desplazamiento vertical */
    height: 8px; /* altura de la barra de desplazamiento horizontal */
}

/* Handle (la parte que se desplaza de la barra) */
.modal-body::-webkit-scrollbar-thumb {
    background-color: darkgrey; /* color del handle */
    border-radius: 0; /* redondeo de las esquinas del handle */
    border: 2px solid transparent; /* opcional: borde transparente para un efecto de "padding" dentro de la barra */
    background-clip: content-box; /* asegura que el 'padding' (espacio) no sea coloreado */
}

/* Track (la pista por donde se desplaza el handle) */
.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1; /* color de fondo de la pista */
    border-radius: 0; /* redondeo de las esquinas de la pista */
    box-shadow: inset 0 0 5px grey; /* sombra interior para dar profundidad */
}

/* Handle en hover */
.modal-body::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a0; /* color del handle al pasar el mouse */
}

.label-info-draft{
    font-size: 12px;
    font-weight: bold;
    border-radius: 2px;
    text-align: center;
    padding: 2px 6px;
    color: #E6B800;
}

/** estados de los diferentes elementos del listado **/
.label-status-detail {
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
    text-align: center;
    padding: 2px 6px;
    color: black;
}


.cont-detail-actions {
    text-align: end;
}

.link-back a {
    color: #3a3434 !important;
    font-weight: bold;
    font-size: 16px;
}

.link-back a:hover {
    color: black !important;
    font-weight: bold;
    font-size: 12px;
}

.field-detail {
    font-size: 15px;
    font-weight: bold;
    color: #3a3434;
    margin-top: 10px;
}
.field-value {
    /*font-weight: bold;*/
    /*background-color: #f9f9f9;*/
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 5px;
    font-size: 18px;
    color: #3a3434;
}

.field-value.highlight {
    background-color: #ffeb3b;
}

.btn-tool {
    color: black !important;
}

.cont-section-detail {
    width: 90% !important;
}

.row-detail {
    padding: 0px 16px !important;
    font-size: 16px !important
}

.item-detail-list {
    background-color: #11306D !important;
    border: 0px;
}

.card {
    border-bottom: 1px solid !important;
    border-radius: 0px !important;
    box-shadow: none !important;

}

.card-header {
    border-bottom: 0px !important;
    padding: 10px !important;
    background-color: #11306D !important;
}
.card-header-segment{
    background-color: #41729F !important;
    color: #FFFFFF; !important;
    font-size: 16px !important;
}

.btn-detail-desplegar {
    padding: 0px !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/** Estilos de los vuelos **/

/* Estilos base para los tabs */
.nav-link-flights {
    color: #555 !important; /* Color del texto de los tabs */
    background-color: #f8f9fa !important; /* Color de fondo de los tabs */
    border: 1px solid #dee2e6 !important; /* Borde de los tabs */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important; /* Transición suave */
}

/* Cambia el color de fondo y del texto para el tab activo */
.nav-link-flights.active, .nav-link-flights:hover {
    color: white !important; /* Color del texto del tab activo */
    background-color: #4a4a4a !important; /* Color de fondo del tab activo */
    border-color: #4a4a4a !important; /* Color del borde del tab activo */
}

/* Estilos para los iconos de FontAwesome dentro de los tabs */
.nav-link-flights i {
    margin-right: 5px !important; /* Espacio a la derecha del icono */
}

/* Ajustes para cuando el tab está activo */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #FFFFFF !important;
    font-size: 16px !important;
    background-color: #41729F !important;
    border-color: #41729F #41729F #fff !important;
}

.card-segments {
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
    border-bottom: 0px !important;

}

.card-segments h3 {
    font-size: 16px !important;
}

.card-segments > .card-header {
    border-bottom: 1px #4a4a4a2b solid !important;

    h3 {
        font-size: 16px !important;
    }
}

.card-header-lef {
    text-align: left !important;
}

.card-header-right {
    text-align: end !important;

    img {
        width: 150px;
    }
}

.img-airline {
    width: 100px;
    margin-bottom: 10px;
}

.card-header-luggages {
    background: #40798C !important;
    color: #FFFFFF;

}

.card-header-included {
    background: #D4AF37 !important;
    color: black;

}

/** Estilos detalle de hotel **/
.card-reservation {
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
    border-bottom: 0px !important;
}
.card-reservation-header{
    background: #dcd0c0 !important;
}

.card-reservation h3 {
    font-size: 12px !important;
    padding: 2px 8px !important;
    margin-bottom: 0px !important;
}

.card-reservation > .card-header {
    padding: 8px !important;

    h3 {
        font-size: 14px !important;
        font-weight: bold;
    }
}

.card-header-service {
    background: #D5C7B9 !important;
    color: black;
    text-transform: capitalize;
    font-weight: bold;
}

/** pasdsengers **/
.card-passengers {
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
    border-bottom: 0px !important;

}

.card-passengers h3 {
    font-size: 14px !important;
}

.card-passengers > .card-header {
    padding: 8px !important;

    h3 {
        font-size: 14px !important;
    }
}

.card-header-passengers {
    background: linear-gradient(to bottom, #e6ebf0 0%, #ffffff 100%);
    color: black;
}

.row-passenger-list{
    font-size: 16px;
    font-weight: bold;
    color: #3a3434;
    border-bottom: 2px solid #4a4a4a;
    margin: 16px 0px;
}

.lead-lef {
    text-align: end !important;
}

.main-contact {
    font-size: 8px;
    color: #FFFFFF;
    background-color: #21618C !important;
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: bold;
}

.link-contract {
    color: #4a4a4a !important;
}

.link-contract:hover {
    color: black !important;
}

/* Personalizar el color de fondo y el texto de los tooltips */
.tooltip-inner {
    background-color: #5FCE90 !important; /* Cambia el color de fondo */
    color: #fff !important; /* Cambia el color del texto */
    font-size: 16px !important; /* Aumenta el tamaño del texto */
    border-radius: 6px !important; /* Bordes más redondeados */
}

/* Personalizar la flecha del tooltip */
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #5FCE90 !important; /* Debe coincidir con el color de fondo del tooltip */
}

.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #5FCE90 !important; /* Debe coincidir con el color de fondo del tooltip */
}

.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #5FCE90 !important; /* Debe coincidir con el color de fondo del tooltip */
}

.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #5FCE90 !important; /* Debe coincidir con el color de fondo del tooltip */
}

#pdfViewer{
    padding: 20px;
}


/* Estilos para la ventana modal */
.modal-header{
   background-color: #11306D !important;
    color: #FFFFFF !important;
    padding: 10px  20px !important;
    border-radius: 0px !important;
}

.modal-header .close{
    color: #FFFFFF !important;
}

.modal-title{
    font-size: 22px !important;
    font-weight: 500 !important;
}

.modal-body{
    padding: 40px !important;
}

.modal-body label{
    font-size: 18px !important;
    font-weight: 500 !important;
}


.modal-footer .btn-action-filter{
    font-size: 18px !important;
    font-weight: 500 !important;
}