.loading-container {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.8);
	padding: 20px;
	border-radius: 10px;
	z-index: 9999; 
}

.loading-solicitud-container {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #63b8d4;
            padding: 20px;
            border-radius: 10px;
            z-index: 9999; 
        }

.loading {
	border: 8px solid #f3f3f3;
	border-top: 8px solid #800080; 
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
	z-index: 9999; 
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------------------------------------------------------- */

section.q-layout__section {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%; /* Ajuste para que abarque todo el espacio */
        }


/* ------------------------------------------------------------------------------------------------------------- */

#wave {
  position: absolute;
  width: 200%;
  height: 100%;
  background: linear-gradient(45deg, rgba(147, 39, 145, 0.8), rgba(11, 118, 155, 0.8));
  animation: moveWave 10s linear infinite;
  transition: background 0.5s ease-in-out;
  box-shadow: 0 0 10px rgba(147, 39, 145, 0.8), 0 0 10px rgba(11, 118, 155, 0.8);
}

@keyframes moveWave {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
}


/* ------------------------------------------------------------------------------------------------------------- */

#banner2 {
    background: linear-gradient(to left, rgba(147, 39, 145, 0.8), rgba(11, 118, 155, 0.8));
    background-size: 200% 100%;
    animation: gradientMovement 3s infinite, borderRadiusMovement 10s infinite, colorMovement 6s infinite alternate;
    color: white; 
    border-radius: 10px; 
}

@keyframes gradientMovement {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}

@keyframes borderRadiusMovement {
    0% {
        border-radius: 10px; /* Radio inicial de los bordes */
    }
    25% {
        border-radius: 50px 10px 30px 20px; /* Valores aleatorios para cada borde */
    }
    50% {
        border-radius: 10px; /* Solo el primer borde hace efecto */
    }
    75% {
        border-radius: 30px 20px 50px 10px; /* Valores aleatorios para cada borde */
    }
    100% {
        border-radius: 10px; /* Vuelve al radio inicial al final de la animación */
    }
}

@keyframes colorMovement {
    0%, 100% {
        background-position: 100% 0;
    }
    50% {
        background-position: 0 0;
    }
}


@keyframes borderMove {
    0% {
        border-radius: 25% 0 0 0;
    }
    25% {
        border-radius: 0 25% 0 0;
    }
    50% {
        border-radius: 0 0 25% 0;
    }
    75% {
        border-radius: 0 0 0 25%;
    }
    100% {
        border-radius: 25% 0 0 0;
    }
}

/* ------------------------------------------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
  background-color: #d3d3d3; 
  border-radius: 6px;
  transition: background-color 0.3s ease; 
}

::-webkit-scrollbar-thumb:hover {
  background-color: #097499; 
}
scrollbar-width: thin;
scrollbar-color: #d3d3d3 #f1f1f1; 


::-moz-scrollbar-track {
  background-color: #f1f1f1; 
}


::-moz-scrollbar-thumb {
  background-color: #d3d3d3; 
  border-radius: 6px;
  transition: background-color 0.3s ease; 
}

::-moz-scrollbar-thumb:hover {
  background-color: #097499; 
}
/*    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa      */ 
.buttonIngresar {
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
	box-sizing: border-box;
	cursor: pointer;
	font-family: "Akzidenz Grotesk BQ Medium", -apple-system,
		BlinkMacSystemFont, sans-serif;
	font-size: 18px;
	font-weight: 400;
	outline: none;
	outline: 0;
	padding: 10px 25px;
	text-align: center;
	transform: translateY(0);
	transition: transform 150ms, box-shadow 150ms;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.buttonIngresar:hover {
	box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
	transform: translateY(-2px);
}
.buttonSiguiente {
	background-color: #63297B;
	border: 1px solid #63297B;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font-family: "Akzidenz Grotesk BQ Medium", -apple-system,
		BlinkMacSystemFont, sans-serif;
	font-size: 18px;
	font-weight: 400;
	outline: none;
	outline: 0;
	padding: 10px 25px;
	text-align: center;
	transform: translateY(0);
	transition: transform 150ms, box-shadow 150ms;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.buttonSiguiente:hover {
	box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
	transform: translateY(-2px);
}
.buttonInicio {
	background-color: #2E6D90;
	border: 1px solid #2E6D90;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font-family: "Akzidenz Grotesk BQ Medium", -apple-system,
		BlinkMacSystemFont, sans-serif;
	font-size: 18px;
	font-weight: 400;
	outline: none;
	outline: 0;
	padding: 10px 25px;
	text-align: center;
	transform: translateY(0);
	transition: transform 150ms, box-shadow 150ms;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}


.buttonAnular {
	background-color: red;
	border: 1px solid red;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font-family: "Akzidenz Grotesk BQ Medium", -apple-system,
		BlinkMacSystemFont, sans-serif;
	font-size: 18px;
	font-weight: 400;
	outline: none;
	outline: 0;
	padding: 10px 25px;
	text-align: center;
	transform: translateY(0);
	transition: transform 150ms, box-shadow 150ms;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}


.buttonCerrarModal {
	background-color: #985CA8;
	border: 1px solid #985CA8;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font-family: "Akzidenz Grotesk BQ Medium", -apple-system,
		BlinkMacSystemFont, sans-serif;
	font-size: 18px;
	font-weight: 400;
	outline: none;
	outline: 0;
	padding: 10px 25px;
	text-align: center;
	transform: translateY(0);
	transition: transform 150ms, box-shadow 150ms;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.buttonInicio:hover {
	box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
	transform: translateY(-2px);
}

.buttonAnular:hover {
	box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
	transform: translateY(-2px);
}
.buttonCerrarModal:hover {
	box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
	transform: translateY(-2px);
}
@media ( min-width : 768px) {
	.buttonIngresar {
		padding: 10px 30px;
	}
	.buttonSiguiente {
		padding: 10px 30px;
	}
	.buttonInicio {
		padding: 10px 30px;
	}
}
.section-wrapper {
	overflow: hidden;
	position: relative;
}
.container {
    display: flex;
    width: 100%; 
    max-width: 100%;
    transition: transform 0.5s ease;
}
.column {
	width: 100%; 
	flex: 0 0 100%; 
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	position: relative;
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.column.show {
	opacity: 1;
	transform: translateX(0);
}
.column::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px; 
	background-image: linear-gradient(to right, #6F297C, #6F297C);
}
.column:nth-child(2)::before {
	background-image: linear-gradient(to right, #6F297C, #3A86A1);
}

.column:nth-child(3)::before {
	background-image: linear-gradient(to right, #3A86A1, #3A86A1);
}

.datetime-input {
	display: flex;
	align-items: center;
}
.datetime-input label {
	margin-right: 10px;
	font-family: 'Gotham', sans-serif;
	text-align: left;
	font-weight: normal;
}
.datetime-input input {
	border: none;
	padding: 5px;
}



@import
	url('https://fonts.googleapis.com/css2?family=Gotham:wght@300&display=swap')
	;

.custom-button {
	display: inline-block;
	padding: 10px 20px;
	font-family: 'Gotham', sans-serif;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: none;
	color: #6F297C;
	background-color: #EEEEEE;
	transition: background-color 0.3s, color 0.3s;
}

.cuadroCalculadora1 {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.cuadroCalculadora2 {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}

/* Estilos de las etiquetas */
.custom-labelT1, .custom-labelB1 {
	font-family: 'Gotham', sans-serif;
	font-size: 12px;
	color: #6F297C;
	margin: 5px;
}

.custom-labelT2, .custom-labelB2 {
	font-family: 'Gotham', sans-serif;
	font-size: 12px;
	color: #55568E;
	margin: 5px;
}

#titulo {
	display: block;
	text-align: left;
	font-family: "Gotham", sans-serif;
	font-weight: normal;
	font-size: 32px;
	color: #691D75;
}

#tituloResumen {
	display: block;
	text-align: center;
	font-family: "Gotham", sans-serif;
	font-weight: normal;
	font-size: 32px;
	color: #691D75;
}

#titulo1 {
	display: block;
	text-align: center;
	font-family: "Gotham", sans-serif;
	font-weight: normal;
	font-size: 18px;
	color: #691D75;
}

.modalHome {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: auto;
}

.modal-content {
    background-color: #ffffff;
    width: 90%; /* Ahora se usa un ancho relativo */
    max-width: 600px; /* Limita el ancho máximo */
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}


@keyframes fadeIn {from { opacity:0;
}to {
	opacity: 1;
}
}

#adjuntar {
	border: 2px dashed #6F297C;
	padding: 20px;
	text-align: center;
	margin-bottom: 20px;
}

#adjuntar input[type=file] {
	display: none;
}

#adjuntar label {
	cursor: pointer;
	background-color: #6F297C;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
}

#miniaturas {
	display: flex;
	flex-wrap: wrap;
}

.miniatura {
	width: 100px;
	height: 100px;
	margin: 5px;
	border: 1px solid #0098B4;
	overflow: hidden;
	position: relative;
	background-color: #0098B4;
	border-radius: 5px;
}

.miniatura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.miniatura .eliminar {
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 2px;
	border-radius: 50%;
	cursor: pointer;
	color: #6F297C;
}


#cancelarHeader {
    text-align: center;
    background-color: #691D75;
    color: #fff;
}

#fechaVuelta,
#horaVuelta {
    border: none;
    height: 40px;
}

#fechaIda,
#horaIda {
    border: none;
    height: 40px;
}

/* 777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 */
.containerPlataforma{
	width: 600px;

	
}

.file-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 10px;
	border: solid 1px;
	height: 250px;
}

.containerPlataforma {
	max-width: 80%; 
	margin: 0 auto;
	margin-top: 20px;
}

.custom-file-input01 {
	margin-top: 50px;
	width: 80%;
	max-width: 300px; 
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background-color: #6F297C;
	border: 2px solid #6F297C;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease,
		transform 0.2s ease;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-file-input01:hover {
	background-color: #8c3f9e;
	border-color: #8c3f9e;
}

.custom-file-input01:focus {
	border-color: #ffc107;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.custom-file-input01::file-selector-button {
	padding: 6px 10px;
}

.custom-file-input01::file-selector-button:hover {
	background-color: #8c3f9e;
}

.empty-icon01, .check-icon01 {
	margin-top: 5px; 
	font-size: 20px;
	color: gray;
	display: none;
}

.check-icon01 {
  color: green;
  font-size: 2em; 
}
.file-name01 {
	margin-top: 5px; 
	font-size: 16px;
	color: black;
	width: 80%; 
	max-width: 300px; 
/* 	border: solid 1px gray; */
	text-align: center; 
}  

.custom-file-input02 {
	margin-top: 50px;
	width: 80%;
	max-width: 300px; 
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background-color: #6F297C;
	border: 2px solid #6F297C;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease,
		transform 0.2s ease;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-file-input02:hover {
	background-color: #8c3f9e;
	border-color: #8c3f9e;
}

.custom-file-input02:focus {
	border-color: #ffc107;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.custom-file-input02::file-selector-button {
	padding: 6px 10px;
}

.custom-file-input02::file-selector-button:hover {
	background-color: #8c3f9e;
}

.empty-icon02, .check-icon02 {
	margin-top: 5px; 
	font-size: 20px;
	color: gray;
	display: none;
}

.check-icon02 {
  color: green;
  font-size: 2em; 
}
.file-name02 {
	margin-top: 5px; 
	font-size: 16px;
	color: black;
	width: 80%; 
	max-width: 300px; 
/* 	border: solid 1px gray; */
	text-align: center; 
}  


.custom-file-input03 {
	margin-top: 50px;
	width: 80%;
	max-width: 300px; 
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background-color: #6F297C;
	border: 2px solid #6F297C;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease,
		transform 0.2s ease;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-file-input03:hover {
	background-color: #8c3f9e;
	border-color: #8c3f9e;
}

.custom-file-input03:focus {
	border-color: #ffc107;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.custom-file-input03::file-selector-button {
	padding: 6px 10px;
}

.custom-file-input03::file-selector-button:hover {
	background-color: #8c3f9e;
}

.empty-icon03, .check-icon03 {
	margin-top: 5px; 
	font-size: 20px;
	color: gray;
	display: none;
}

.check-icon03 {
  color: green;
  font-size: 2em; 
}
.file-name03 {
	margin-top: 5px; 
	font-size: 16px;
	color: black;
	width: 80%; 
	max-width: 300px; 
/* 	border: solid 1px gray; */
	text-align: center; 
}  

.servicio-col {
        width: 5%; /* Ajusta este valor según sea necesario */
    }
    .planificacion-col {
        width: 15%; /* Ajusta este valor según sea necesario */
    }
    .tipo-vehiculo-col {
        width: 13%; /* Ajusta este valor según sea necesario */
    }
    .aeropuerto-col {
        width: 17%; /* Ajusta este valor según sea necesario */
    }
    .numVuelo-col {
        width: 16%; /* Ajusta este valor según sea necesario */
    }
    .fecha-col {
        width: 12%; /* Ajusta este valor según sea necesario */
    }
    .hora-col {
        width: 7%; /* Ajusta este valor según sea necesario */
    }
    .pasajeros-col {
        width: 16%; /* Ajusta este valor según sea necesario */
    }
    
    
    
    .aerolineaRe-col {
        width: 5%; /* Ajusta este valor según sea necesario */
    }
    .aeropuertoRe-col {
        width: 5%; /* Ajusta este valor según sea necesario */
    }
    .numVueloRe-col {
        width: 5%; /* Ajusta este valor según sea necesario */
    }
    .numTelRe-col {
        width: 5%; /* Ajusta este valor según sea necesario */
    }
     .comprobanteRe-col {
        width: 12%; /* Ajusta este valor según sea necesario */
    }
    .boletaRe-col {
        width: 12%; /* Ajusta este valor según sea necesario */
    }
    .cedulaRe-col {
        width: 12%; /* Ajusta este valor según sea necesario */
    }


.swal2-confirm.btn-red {
            background-color: red !important;
            border-color: red !important;
        }
        .swal2-actions button {
            margin: 0 10px;
        }



/* -------------------------------------------TEXTO---------------------------------------------- */
.bodyTexto {
    font-size: 18px;
    color: #1a1a1a; /* Gris muy oscuro, casi negro */
}


.subTituloTexto {
	font-size: 22px;
    color: #1a1a1a; /* Gris muy oscuro, casi negro */
}






/* Asegurar que el texto dentro del select sea negro */
select.form-control {
    color: #1a1a1a !important;
    font-size: 16px !important; Aumenta el tamaño de la fuente en un 50%
}

/* Asegurar que las opciones dentro del select sean negras */
select.form-control option {
    color: #1a1a1a !important;
}

/* En algunos navegadores, es necesario aplicar también a "selected" */
select.form-control option:checked {
    color: #1a1a1a !important;
}

/* Placeholder con color gris oscuro */
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: #1a1a1a !important; 
    opacity: 1; 
    font-size: 16px !important; Aumenta el tamaño del placeholder
}

/* Asegurar que al escribir, el texto siga siendo negro */
input.form-control:focus,
textarea.form-control:focus {
    color: #1a1a1a !important; 
    font-size: 16px !important; Aumenta el tamaño de la fuente en un 50%
}

#autocompleteVuelta:disabled {
  background-color: #fffff; /* color morado claro, por ejemplo */
  border-color: #6F297C;     /* mantén el borde morado */
  color: #6F297C;            /* texto morado */
  cursor: not-allowed;
  opacity: 0.5;              /* un poco transparente para mostrar deshabilitado */
}

#autocompleteIda:disabled,
#direccionIda:disabled {
  background-color: #fffff; /* color morado claro, por ejemplo */
  border-color: #6F297C;     /* mantén el borde morado */
  color: #6F297C;            /* texto morado */
  cursor: not-allowed;
  opacity: 0.5;              /* un poco transparente para mostrar deshabilitado */
}