* {
  border: 0;
  margin: 0;
  padding: 0;
}

#subirAsistencia, button.btn-secondary, #calcular, #btnCalcularNota,#btnImprimirActa{
  background-color: var(--color-U-2);
  color: var(--color-U-1);;
  font-weight: 700;
  border-color: var(--color-U-2);
}

.ml11,.ml17,.ml18,.ml5,.ml12,.ml14{
  word-break: break-word;
  overflow-wrap: break-word;
}

button.btn-secondary:hover{
  background-color: var(--color-U-2);
  color: var(--color-U-1);;
  font-weight: 700;
  border-color: var(--color-U-2);
}

button.btn-secondary:active{
  background-color: var(--color-U-2);
  color: var(--color-U-1);;
  font-weight: 700;
  border-color: var(--color-U-2);
}

.prev-btn, .next-btn{
  background-color: var(--color-U-4);
  border-color: var(--color-U-4);
}
.prev-btn, .next-btn:hover{
  background-color: var(--color-U-4);
  border-color: var(--color-U-4);
}
.my-offcanvas {
  z-index: 2050; /* Ajusta este valor según sea necesario */
}
.texto_hipervinculo{
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
.encuadre-row{
  padding-left: 5em !important;
  padding-right: 5em;
}
#flexRadioDefault1{
  border-color: black;
}

body {
  display: flex;
  flex-direction: column;
}

.bodyLogin{
  background: #ffffff url('../../static/img/portadad1.png') center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}



#wrapper {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

.cardFormulariosUIA{
  background-color: #FFE186;
  border-radius: 25px;
}

#imgPP, #imgSP, #imgTP, #imgCP, #imgQP, #imgSeP{
width: 500px;
}

.links a,
#perfilLink {
  text-decoration: none;
}
#perfilLink:hover{
  color: #666768;
}
#linkCambio, #cambioPassPerfil{
  background-color: #000;
  color: white;
  text-decoration: none;
  padding: 5px;
  cursor: pointer;
}
.loginCard,
.registroCard,
.cardContra,
.cardpassResetD,
.cardpassConfirm,
.cardpassComple,
.cardUbica,
.cardFormularios,
.cardPerfilCol,
.cardPagoExi,
.cardpagoDen,
.cardpagoNT,
 .cardTarjetaPago,
 .cardContraP,
 .cardPerfilCol{
  box-shadow: -1px 15px 30px -10px black;
  background-color: #ffffff;
}
.formCard{
  background-color: #ecedf1;
}

.login,
.registroPr,
.cambioContra,
.passResetD,
.passConfirm,
.passComple,
.perfilP,
.perfilH,
.pagoExi,
.pagoExiH,
.pagoDen,
.pagoDenH,
.pagoNT,
.pagoNTH,
.tarjetaPago,
.tarjetaPagoH,
.cambioContraP,
.filtroTableE{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.tab-content{
  width: 100%;
}

.loginH,
.registroPrH,
.cambioContraH,
.passResetDH,
.passConfirmH,
.passCompleH,
.formProsHS,
.cardPerfilCol,
.pagoExiHS,
.pagoDenHS,
.pagoNTHS,
.tarjetaPagoHS,
.cambioContraPH,
.filtroTableH {
  align-self: center;
}

.rowFormaularios{
  width: 100%;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  border-radius: 25px;
  padding: auto;
}

.buttonCollapsePago:not(.collapsed) {
background-color: #ecedf1;
color: #000;
font-weight: 600;
}

.buttonCollapsePago{
  background-color: #faf2f2;
  color: #000;
  font-weight: 600;
}

.buttonCollapsePago:focus{
  z-index: 3;
  border-color: transparent; 
  outline: 0; 
  box-shadow: none;
}


.cardPerfilCol{
  background-color: #ffffff;
}

#linkmercadeo {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  font-size: 17px;
  font-weight: 700;
}

#linkLogin{
  text-decoration: none;
  color: var(--color-U-1) !important;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  transition: transform 80ms ease-in;
}

#linkLogin:active{
  transform: scale(0.95);
}

#cambioPassPerfil{
  text-decoration: none;
  color: white !important;
  font-size: 17px;
  border-radius: 20px !important;
  font-weight: 500;
}

#cambioPassPerfil:hover{
  background-color: #FED141;
  color: rgb(0, 0, 0) !important;
  font-weight: 500;
}

#infoCardTitleCuenta {
  font-weight: bold;
}

#infoCardTitle,
#infoCardText {
  color: #000;
  text-decoration: none;
}

.misCursoTabla,
.tablaPlan {
  border-radius: 10px;
  overflow: hidden;
}

/*footer*/
.main-footer {
  background-color: #ffcf43;
  color: #444343;
}

.links a:hover:not(.active) {
  background-color: var(--color-U-1);
  border-radius: 5px;
  color: white;
}

footer .row a {
  color: #444343;
}
#copyrigth{
  margin: 0;
  padding: 0;
  font-weight: bold;
}

/*footer*/

/*Contacto*/
.cardContact, .cardPolitica, .cardTermino{
  background-color: #ecedf1;
}

#rowContacto{
  width: 100%;
  height: 100%;
}
#rowInfoContacto{
  width: 100%;
}

.cardContac{
  background-color: #f0ecf4;
}

.infoTextContact{
  font-size: 1.25em;
}

.divContactInfo{
  height: 30px;
}

.btnContac{
  text-decoration: none;
}
.nav-pills .btnContac:not(.active):hover {
  color: white;
}
.nav-pills .btnContac.active{
  background-color: #f0d58a !important;
  width: 100%;
  border-radius: 25px;
  color: #1D1D26;
  font-size: 1.25em;
  font-weight: 700;
}

.nav-pills .btnContac{
  background-color: #838587;
  width: 100%;
  border-radius: 25px;
  color: white;
  font-size: 1.25em;
  font-weight: 700;
}

#btnContacCon {
  width: 370px !important;
}

.nav-pills .btnContac:hover{
  background-color: #666768;
}
#contactName{
  color: #000 !important;
  
}

.titulo_registro{
  font-size: 30px;
  font-weight: 700;

}

#iconContac{
  color: white;
  font-size: 20px;
  margin-left: 4px;
  margin-top: 4px;
  padding-top: 4px;
  padding-bottom: 5px;
}

.menuReg{
  font-weight: 600;
}

/*Contacto*/

/*Accesibilidad*/
.accesibilidad-dark {
  background-color: #343a40;
}

.accesibilidad-content {
  color: white;
}

/*Accesibilidad*/
.principal {
  width: 100%;
  height: 100%;
}

/*Login*/
.uiaBoton{
  display: flex;

}
.colorCardBontones{
  background-color: #f0ecf4;
  width: 270px;
  height: 40px;
  padding-top: 3px;
  border-radius: 15px;
  margin-left: 20px;
}
.colorCardBontonPass{
  background-color: #f0ecf4;
  height: 40px;
  border-radius: 15px;
}
#iconBotones{
  color: #444343;
  font-size: 25px;
}

.uiaBotones{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#imgLoginUIA{
  margin-top: 5px;
  width: 490px
}
.logo{
  width: 490px
}
.nameUIA{
  width: 70%;
  background-color: #000;
  color: #ffff;
  padding-left: 20px;
  padding-top: 5px;
  border-top-left-radius: 25px;
  display: flex;
    align-items: center;
}
.textUIALogin{
  font-size: 35px;
}
#formRegistro{
background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    text-align: center;
}
#formPassword{
  text-align: center;
}
.arrowName{
  background-color: #ffe293;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10%;
  padding-top: 10px;
}

.arrowName i{
  text-align: center;
  align-items: center;
  font-size: 43px;
}


.cardLoginUia{
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
            0 10px 10px rgba(0, 0, 0, 0.22);
  width: 80%;
  border: white;
  background-color: #ffffff;
  border-radius: 20px;
}

.cardFormUIA, .cardPolitica, .cardTermino{
  width: 90%;
  box-shadow: 0px 0px 23px 14px #d4d4d3;
}
.cardAdminS{
  box-shadow: 0px 1px 15px 11px #a0a09e;
  width: 80%;
  border: white;
  background-color: #f0ecf4;
  border-radius: 20px;
}
.modal_primer_ingreso .modal-header, #modal_contactenos .modal-header{
  border: none !important;
}

.labelForms{
  background-color: #646568;
  border-radius: 20px;
  padding-left: 7px;
  width: 90%;
  color: white;
}

#convalidacion, #asesor{
  border: 1px solid #848688;
}

.formsIcons{
  color: white;
}

.circle {
  position: relative;
  button {
		position: absolute;
		top: 12px;
		left: 0;
		width: 100%;
		text-align: center;
		line-height: 45px;
		font-size:15px;
    font-weight: 600;
	}
  .btn {
    border: none;
  }
  .btn:disabled{
    border: none;
  }
}
#titulobachillerto{
  height: 35px;
}

input[type=file]::file-selector-button {
  background-color: #848688;
  color: #000;
  font-weight: 600;
}

#floatingInput::placeholder,#floatingPassword::placeholder{
  font-size: 22px;
  color: #bbb9bd;
}
.btn-login{
  border-radius: 20px;
  border: 1px solid #FED141;
  background-color: #FED141;
  color: #000000 !important;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 80ms ease-in;
}

.btn-login:hover{
  background-color: #000000 !important;
  border: 1px solid #000000;
  color: white !important;
}

.botonIniciar .btn{
  padding: 0;
}
.botonIniciar .btn:hover{
  background-color: #FED141;
}
#iconLogin{
 color: white;
 font-size: 30px;
 margin-top: 5px;
 margin-left: 4px;

}
#iconGenro{
  color: white;
}
.textoPassSend {
  margin-left: 15px;
  margin-top: 2px;
  font-size: 24px;
  font-weight: 600;
}

.textoPassConfirm{
  margin-top: -5px;
}

#iconLoginPass{
  margin-left: 20px;
  margin-top: -3px;
  color: white;
}
#iconConfirm{
  color: white;
}
.textoLoginPass{
  margin-left: 22px;
  margin-top: -3px;
}
#passIcon{
  font-size: 25px;
  margin-top: 5px;
  margin-left: 4px;
  color: white;
}
.textoLogin{
  margin-left: 50px;
  margin-top: -3px;
}
.microsoft {
  border-radius: 50px;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  max-width: 230px;
  max-height: 60px;
  justify-content: center;
  align-items: center;
  margin: auto;
}

#imgMicrosoft {
  max-width: 220px;
  max-height: 55px;
  margin-right: 11px;
}

.pass, #loginIcons{
  width: 40px;
  background-color: transparent;
  border: none;
  font-size: 30px;
  color: var(--color-U-2);

}

#basic-addon1 {
  width: 40px;
  background-color: transparent;
  border: none;
  font-size: 30px;
  margin-right: 15px;
  color: var(--color-U-2);

}

.btn-success-terms{
  border-radius: 20px;
  border: 1px solid #198754;
  background-color: #198754;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 80ms ease-in;

}

.btn-success-terms:hover{
  background-color: #136941 !important;
  border: 1px solid #136941;
  color: white !important;
}

.btn-success-terms:active{
  transform: scale(0.95);
}

.btn-success-terms:focus{
  outline: none;
}

#telefono,
#fechaNa,
#colegio,
#fechagrad,
#ingresoEco,
#telefono2,
#genero,
#fechanacimiento,
#segundoapellido,
#primerapellido,
#nombre,
#identificacion,
#tipo,
#direccion_exacta,
#provincia_select,
#canton_select,
#nombre_edit,
#distrito_select,
#correo,
#password1,
#password2,
#id_new_password1,
#id_new_password2,
#categorias,
#periodos,
#carrera,
#periodos_select,
#carreras_select,
#floatingInputNombre,
#floatingInputIdent,
#floatingInputTelefono,
#floatingInputEmail,
#floatingComprobante,
#floatingImagenComprobante,
.tarjetaInputs,
#asunto,
#tipoTrato,
#trato2,
#horario,
#id_old_password{
  height: 50px;
  background-color: #dfdfdf;
  border: none;
  border-radius: 20px;
}

#telefono:focus,
#fechaNa:focus,
#correoP:focus,
#colegio:focus,
#fechagrad:focus,
#ingresoEco:focus,
#telefono2:focus,
#genero:focus,
#fechanacimiento:focus,
#segundoapellido:focus,
#primerapellido:focus,
#nombre:focus,
#identificacion:focus,
#tipo:focus,
#nombre_edit:focus,
#direccion_exacta:focus,
#provincia_select:focus,
#canton_select:focus,
#distrito_select:focus,
#correo:focus,
#password1:focus,
#password2:focus,
#id_new_password1:focus,
#id_new_password2:focus,
#categorias:focus,
#periodos:focus,
#carrera:focus,
#periodos_select:focus,
#carreras_select:focus,
#floatingInputNombre:focus,
#floatingInputIdent:focus,
#floatingInputTelefono:focus,
#floatingInputEmail:focus,
#floatingComprobante:focus,
#floatingImagenComprobante:focus,
.tarjetaInputs:focus,
#asunto:focus,
#tipoTrato:focus,
#trato2:focus,
#horario:focus,
#id_old_password:focus {
  outline: 1px solid #ffd142;
  border-color: #ffd142;
  box-shadow: 0 0 1px #ffd142;
}

#telefono:focus,
#telefono2:focus,
#genero:focus,
#fechanacimiento:focus,
#segundoapellido:focus,
#primerapellido:focus,
#nombre:focus,
#identificacion:focus,
#tipo:focus,
#direccion_exacta:focus,
#provincia_select:focus,
#canton_select:focus,
#distrito_select:focus,
#correo:focus,
#password1:focus,
#password2:focus,
#id_new_password1:focus,
#id_new_password2:focus,
#categorias:focus,
#periodos:focus,
#carrera:focus,
#periodos_select:focus,
#carreras_select:focus,
#floatingInputNombre:focus,
#floatingInputIdent:focus,
#floatingInputTelefono:focus,
#floatingInputEmail:focus,
#floatingComprobante:focus,
#floatingImagenComprobante:focus,
.tarjetaInputs:focus,
#asunto:focus,
#tipoTrato:focus,
#trato2:focus,
#horario:focus,
#id_old_password:focus{
  outline: 1px solid #ffd142;
  border-color: #ffd142;
  box-shadow: 0 0 1px #ffd142;
}
#periodos:focus, #carrera:focus{
  border: none;
}

#formProspecto input[type=file],#formProspecto input[type=text], #formProspecto .select2-container .select2-selection--single, #formProspecto select,#formProspecto input[type=date]{
  height: 40px !important;
  background-color: #dfdfdf;
  border: none;
  border-radius: 20px;
}

#formProspecto input[type=file]:focus, #formProspecto input[type=date]:focus,#formProspecto .select2-container .select2-selection--single:focus, #formProspecto select:focus{
  outline: 1px solid #ffd142;
  border-color: #ffd142;
  box-shadow: 0 0 1px #ffd142;
}

#mensaje{
  box-shadow: 9px 10px 17px 1px inset #cecece;
}

#floatingPassword,
#floatingInput {
  height: 50px;
  border-radius: 12px;
  margin-left: 15px;
  box-shadow: 9px 10px 17px 1px inset #cecece;
}

.inputPerfil{
  height: 35px;
  background-color: #dfdfdf;
}

.inputPerfil:focus{
  outline: 1px solid #ffd142;
  border-color: #ffd142;
  box-shadow: 0 0 1px #ffd142;
}
.profile-button{
  background-color: #f0d58a;
  height: 53px;
  border-radius: 25px;
}

.inputPerfil:focus{
  background-color: #dfdfdf;
  outline: 1px solid #ffd142;
  border-color: #ffd142;
  box-shadow: 0 0 1px #ffd142;
}

#zoomIn, #zoomOut, #refres{
  cursor: pointer;
}

#items{
  border-radius: 4px;
}

.grid {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
}

.grid .item {
  display: inline-block;
  width: auto;
  box-sizing: content-box;
}

.btnCambioCurso{
  background: var(--color-U-6);
  font-size: 15px;
  font-weight: 600;
}

.btnCambioCurso:hover, .btnCambioCurso:focus, .btnCambioCurso:active{
  background: var(--color-U-6);
}

.btn-successMa, #facturaButton, .infoTextContactBtn, .profile-button, .btnEnviarSolicitiCambio{
  border-radius: 20px;
  border: 1px solid #FED141;
  background-color: #FED141;
  color: #000000 !important;
  font-size: 0.725em;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 80ms ease-in;
}

.entrance-anim .card{
  border-color: transparent;
}

.btn-successMa{
  font-size: 14px;
}

#flexCheckDefault, #flexRadioCompania{
  border: 1px solid #000;
}

.btn-successMa:hover, #facturaButton:hover,.infoTextContactBtn:hover, .profile-button:hover, .btnEnviarSolicitiCambio:hover, .profile-buttonFoto:hover{
  background-color: #000000 !important;
  border: 1px solid #000000;
  color: white !important;
}

.btn-successMa:active, #facturaButton:active, .infoTextContactBtn:active, .profile-button:active, .btnEnviarSolicitiCambio:active, .profile-buttonFoto:active {
  transform: scale(0.95);
}

.btn-successMa:focus, #facturaButton:focus, .infoTextContactBtn:focus, .profile-button:focus, .btnEnviarSolicitiCambio:focus, .profile-buttonFoto:focus {
  outline: none;
}


.profile-buttonFoto{
  border-radius: 20px;
  border: 1px solid #FED141;
  background-color: #FED141;
  color: #000000;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 80ms ease-in;
}

#iconPerfil{
  color: white;
  
 }
 #habilitarDireccion, #habilitarContactos{
  border: 1px solid #000;
 }
 .textoPerfil{
  margin-left: 20px;
}

.textoPago{
  margin-left: 7px;
}
/*Login*/
.btn-CorreoContact{
  background-color: rgba(240, 213, 138, 1) !important;
  color: #000;
  border: none;
}
.btn-CorreoContact:hover{
  color: #000;
}
/*RegistroPro*/
.btn-registrar{
  background-color: rgba(240, 213, 138, 1) !important;
  color: #000;
  border: none;
}
.btn-registrar.disabled{
  background-color: rgba(240, 213, 138, 1) !important;
  color: #000;
  border: none;
}

.btn-registrar:hover{
  background-color: #FED141;
  border: none;
  color: #000;
}
.btn-next-back-Re{
  background-color: #f0d58a;
  border: none;
  border-radius: 20px;
  color: #000;
  padding: 16px;
}

.btn-next-back-Re.disabled{
  background-color: rgba(240, 213, 138, 1) !important;
  color: #000;
}
.btn-next-back-Re:hover{
  background-color: #FED141;
  border: none;
  color: #000;
}

#Código1,
#Código2,
#Código3,
#Código4 {
  width: 40px;
  
}

#input1,#input2,#input3,#input4{
  margin-left: 15px;
  height: 50px;
  background-color: #dfdfdf;
  border: none;
  border-radius: 12px;
}

#input1:focus, #input2:focus, #input3:focus, #input4:focus {
  outline: 1px solid #ffd142;
  border-color: #ffd142;
  box-shadow: 0 0 1px #ffd142;
}

/*RegistroPro*/


/*menuAdmin*/
.navbar-nav .navAd.active,
.navbar-nav .navAd.show {
  background-color: var(--color-U-7);
  color: #fff;
}

.menusidebar .nav-link {
  border-radius: 0.25rem;
}

.form-label{
  font-weight: 600;
}

/*menuAdmin*/

/*menu*/
.iconh2{
  font-size: 25px;
}
.main-header{
 background-color: var(--color-U-1) !important;
}
.navHeaderIcon i,
.navHeaderIcon span {
  color: white;
}

.main-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
  height: 110px;
}

#social-sidebar {
  right: 0;
  position: fixed;
  top: 30%;
  z-index: 9999;
  height: 100%;
}

#prematriculaBtn {
  font-weight: 500;
  background: #f0d58a;
  background: linear-gradient(90deg, rgba(129, 230, 217, 1) 0%, rgba(79, 209, 197, 1) 100%);
  border: none;
  box-shadow: 4px 4px 4px rgba(79, 209, 197, .64);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  animation: pulse 2s infinite;
}

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

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

/*menu*/

/*mercadeo*/

.card-footer {
  justify-content: space-around;
  text-align: center;
  display: flex;
  padding: 10px;
}

.modal-confirm {
  color: #636363;
  width: 400px;
}

.modal-confirm .modal-content {
  padding: 20px;
  border-radius: 5px;
  border: none;
  text-align: center;
  font-size: 14px;
}

.modal-confirm .modal-header {
  border-bottom: none;
  position: relative;
}

.modal-confirm .icon-box {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  z-index: 9;
  text-align: center;
  border: 3px solid #f15e5e;
}

.modal-confirm h4 {
  text-align: center;
  font-size: 26px;
  margin: 30px 0 -10px;
}

.modal-confirm .modal-body {
  color: #999;
}

.modal-confirm .modal-footer {
  border: none;
  text-align: center;
  border-radius: 5px;
  font-size: 13px;
  padding: 10px 15px 25px;
}

.modal-confirm .btn,
.modal-confirm .btn:active {
  color: #fff;
  border-radius: 4px;
  background: #60c7c1;
  text-decoration: none;
  transition: all 0.4s;
  line-height: normal;
  min-width: 120px;
  border: none;
  min-height: 40px;
  border-radius: 3px;
  margin: 0 5px;
}

.modal-confirm .btn-secondary {
  background: #c1c1c1;
}

.modal-confirm .btn-danger {
  background: #f15e5e;
}

/*mercadeo*/

/*Sidebar*/
[class*=sidebar-dark-] .sidebar a {
  color: #888a8c;
}
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
  background-color: #000 !important;
  color: white;
}
.sidebar-dark-primary{
 background-color: white !important;
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
  background-color: #000 !important;
  color: white;
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active i,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active i {
  color: var(--color-U-2);
}

.sidebar-bottom {
  position: fixed;
  bottom: 0;
  width: 230px;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.list-unstyled>.nav-item>.nav-link.active {
  background-color: #000 !important;
  color: white;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.list-unstyled>.nav-item>.nav-link.active i {
  color: var(--color-U-2);
}

[class*=sidebar-dark] .user-panel {
  border-bottom: none;
}

.line {
  background-color: darkgray;
  opacity: 0.4;
  margin-top: 9.7px;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.list-unstyled>.nav-item>.secondSubmenu>.nav-item>.nav-link.active {
  background-color: var(--color-U-1) !important;
  color: #fff;
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.list-unstyled>.nav-item>.secondSubmenu>.nav-item>.nav-link.active i{
  color: var(--color-U-2);
}

/*Sidebar*/

/*mediaMenu*/
#social-sidebar {
  right: 0;
  position: fixed;
  top: 30%;
  z-index: 9999;
}

.liSocial, .liPreM{
  list-style-type: none;
}

#social-sidebar li:first-child a {
  border-top-left-radius: 5px;
}
.liSocial a i{
  font-size: 20px;
}
#social-sidebar a {
  color: #444343;
  text-decoration: none;
  display: block;
  height: 45px;
  width: 25px;
  font-size: 15px;
  line-height: 50px;
  position: relative;
  text-align: center;
  cursor: pointer;
}

#social-sidebar li:last-child a {
  border-bottom-left-radius: 5px;
}

#social-sidebar a[class*="facebook"]:hover,
#social-sidebar a[class*="facebook"] span,
#social-sidebar a[class*="facebook"] span:before {
  background-color: #1877F2;
  color: white;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#social-sidebar a[class*="instagram"]:hover,
#social-sidebar a[class*="instagram"] span,
#social-sidebar a[class*="instagram"] span:before {
  background-image: linear-gradient(to right, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
  background-image: linear-gradient(to top, #F58529, #DD2A7B, #8134AF, #515BD4);
  color: white;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#social-sidebar a[class*="twitter"]:hover,
#social-sidebar a[class*="twitter"] span,
#social-sidebar a[class*="twitter"] span:before {
  background-color: #55ACEE;
  color: white;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* Color de inicio del degradado */
}

#social-sidebar a[class*="tiktok"]:hover,
#social-sidebar a[class*="tiktok"] span,
#social-sidebar a[class*="tiktok"] span:before {
  background-color: var(--color-U-1);
  color: white;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#social-sidebar a[class*="chatBot"]:hover,
#social-sidebar a[class*="chatBot"] span,
#social-sidebar a[class*="chatBot"] span:before {
  background-color: #74ac9c;
  color: white;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* Color de inicio del degradado */
}

/*mediaMenu*/

/*Legal*/

.divLegalHover {
  background-color: rgba(240, 213, 138, 1) !important;
  border-radius: 50px;
  padding: 5px;
  color: #000;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.divLegalHover:hover {
  background-color: #FED141 !important;
  border-radius: 50px;
  padding: 5px;
  color: #000;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.divLegalHover:active {
  background-color: #FED141 !important;
  border-radius: 50px;
  padding: 5px;
  color: #000;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.wrapper{
  background-color: #ecedf1;
}
/*Legal*/
.content-header{
  display: none;
}
/*Prospecto*/
#formCarreraBtn{
  width: 100%;
}
#formCarrera{
  background: #ffffff url('../../static/img/carrera.png') center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

@keyframes zoomAnimation {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 120%;
  }
}

#formCarrera:hover,#formMicro:hover,#formPosgrado:hover,#formTecnico:hover,#formCusroL:hover {
  animation: zoomAnimation 5s infinite alternate;
  background-size: 120%;
}


#formMicro{
  background: #ffffff url('../../static/img/micromas.png') center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#formPosgrado{
  background: #ffffff url('../../static/img/posgrado.png') center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#formTecnico{
  background: #ffffff url('../../static/img/tecnicos.png') center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#formCusroL{
  background: #ffffff url('../../static/img/cursoL.png') center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.h2Prospecto{
  color: white;
}
.formHeigth{
  width: 19%;
  height: 530px;
  cursor: pointer;
}

.card-link{
  background-color: #000;
}

#formCarreraLink{
  width: 75%;
  border-radius: 20px;
  color: white;
  padding-top: 3px;
  padding-left: 7px;
  cursor: pointer;
  box-shadow: white;
  box-shadow: 0px 0px 23px 2px rgba(255,255,255,0.75);
}

.formCarreraIcon{
  color: var(--color-U-2);
}

.border-primerIngreso {
  border-color: var(--color-U-6);
}

.card-wr-bg:hover {
  background-color: #FED141;
  cursor: pointer;
  transition: all 1s ease;
  transform: scale(1.04);
}

.bg-primerIngreso {
  background-color: var(--color-U-6);
}

.border-posgrado {
  border-color: var(--color-U-3);
}

.card-s-bg:hover {
  background-color: #9b9bc4;
  cursor: pointer;
  transition: all 1s ease;
  transform: scale(1.04);
}

.bg-posgrado {
  background-color: var(--color-U-3);
}

.border-CursosLibres {
  border-color: var(--color-U-7);
}

.card-d-bg:hover {
  background-color: #ff8e59;
  cursor: pointer;
  transition: all 1s ease;
  transform: scale(1.04);
}

.bg-CursosLibres {
  background-color: var(--color-U-7);
}

#infoCardTitle,
#infoCardText {
  color: #000;
  text-decoration: none;
}

#infoCardTextModal {
  cursor: pointer;
}

#cardFooterP div:last-child {
  border-right: none;
}

#cardFooterP div {
  flex-grow: 1 !important;
  border-right: 1px solid #dbdbdb;
}

.select2-container .select2-selection--single {
  width: 100% !important;
  color: #000;
  height: 40px !important;
  padding: 5px;
}

.select2-selection__arrow {
  display: none;
}

/*Prospecto*/

/*ModalNoticia*/
#modalContN {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #888888 #f0f0f0;
}

#modalHeaderN {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1000;
}

/*ModalNoticia*/

/*Publicidad*/
#imgPu {
  height: 700px;
  width: 100%;
}
/*Publicidad*/

/*Suficiencia*/
.button-div {
  width: 130px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

/*Suficiencia*/

/*Financiamiento*/
.colorBox1 {
  background-color: #f0d58a !important;
}

.colorBox2 {
  background-color: #f0d58a !important;
}

.card-box {
  position: relative;
  color: #000;
  padding: 5px 10px 5px;
  margin: 10px 0px;
  border-radius: 30px;
  box-shadow: -1px 15px 30px -10px black;
}

.card-box:hover, .card-boxEs:hover {
  text-decoration: none;
  color: #000;
}

.card-box .inner, .card-boxEs .inner {
  padding: 10px;
}

.card-box h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
  padding: 0;
  text-align: left;
}

.card-box p{
  font-size: 15px;
}

.card-box .icon {
  position: absolute;
  top: auto;
  bottom: 8px;
  right: 10px;
  z-index: 0;
  font-size: 42px;
  color: rgba(0, 0, 0, 0.15);
}


.card-box:hover .icon i {
  font-size: 50px;
  transition: 1s;
  -webkit-transition: 1s;
}

.card-margin .card-header.no-border {
  border: 0;
}

.estadoFin {
  color: #3bb80a;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-primary {
  margin: 10px;
}

#verMas {
  background-color: #f0d58a;
  color: #000;
  font-weight: 600;
  border-radius: 50px;
}

.b-bottom {
  border-bottom: 2px dotted black;
  padding-bottom: 20px;
}

.smalltotal {
  font-size: 16px;
  font-weight: 600;
}

.cardAbono .cardPerfilCol {
  min-height: 100%;
}

.payment-summary .card{
  height: 87%;
}

#matriculaP, #montoCuota,#cuotasVencidas,#cuotasVencer,#balance,#intereses,#morosidad,#saldoTotal,#interesC,#interesM{
  margin: 0px;
}

.payment-summary .sale {
  width: 100%;
  text-transform: uppercase;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5PX 0;
}

/*Financiamiento*/

/*MisCursos*/
/*Estudiante*/
#buttonHorario{
  cursor: pointer;
  background-color: #dfcfa3;
  color: #000;
}
#opcionPrematricula {
    cursor: pointer;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 6px;
    font-size: 18px;
    text-align: justify;
    font-weight: bold;
}

.buttonCarrera:disabled{
  background-color: #f0d58a;
  color: #000;
}
#PlanBody tr td{
  vertical-align: middle !important;
}
#modal_cambio .modal-lg{
  width: 70%;
}

#titleToast{
  font-size: 18px;
}

.fab-content {
  right: 10px;
  position: fixed;
  top: 75%;
  z-index: 9999;
  height: 38px;
  max-width: 160px;
  display: flex;
  background-color: #f0d58a ;
  border-radius: 25px;
  animation: myAnim 4s ease 0s infinite normal forwards;
}
@keyframes myAnim {
	0% {
            transform: scale(1);
        }
    
        50% {
            transform: scale(1.1);
        }
    
        100% {
            transform: scale(1);
    }
}

.textbtnPre{
  padding-left: 10px;
  padding-top: 3px;
  font-weight: 600;
}

.btn-infoH{
  background-color: var(--color-U-2);
  font-weight: bold;
  font-size: 14px;
}
.btn-infoH:hover{
  background-color: var(--color-U-2);
  font-weight: bold;
  font-size: 14px;
}
.buttonCarrera {
  background-color: #f0d58a;
  height: 40px;
  border-radius: 25px;
  padding: 10px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.btn-plan{
  background-color: #f0d58a;
  height: 40px;
  border-radius: 25px;
  padding: 10px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.btn-plan:hover{
  background-color: #FED141;
  color: #000;
}

.buttonCarrera:hover {
  background-color: #FED141;
  color: #000;
}

#datosHeader {
  background-color: #000;
  color: #f0d58a;
  font-weight: 600;
}

.card-header-tabs .tabsHT.active{
  background-color: var(--color-U-2);
  font-weight: bold;
}

.card-header-tabs .tabsHT{
  background-color: #f5f5f5;
  font-weight: 500;
  color: var(--color-U-1);
}

.misCursoTabla, .misHorarios, .cursoTabla{
  width: 100%;
  border-radius: 20px;
}
#tabla_cursos{
  box-shadow: 0px 1px 7px 12px #e4e3e3;
  width: 100%;
}
#datos {
  background-color: #fcf2d7;
  color: #000;
  font-weight: 600;
}

/*Estudiante*/
/*MisCursos*/

/*Plan*/
/*Estudiante*/
#planHeader {
  background-color: white;
}

.tablaPlan th {
  border-bottom: none;
  background-color: #000;
  color: white;
}

.tablaPlan td {
  font-size: 15px;
  color: black;
  line-height: 1.4;
  background-color: #dddbdc;
}

#PlanBody tr {
  overflow: hidden;
  border-bottom: 10px solid #fff;
  border-radius: 10px;
}

#PlanBody td {
  border: solid 1px transparent;
  border-style: solid none;
  padding-top: 5px;
  padding-bottom: 5px;
}

/*Estudiante*/
/*Plan*/

/*EnvioCorreo*/
/*Profesor*/
.select2-container--default .select2-dropdown .select2-search__field:focus,
.select2-container--default .select2-search--inline .select2-search__field:focus {
  outline: 0;
  border: 1px solid transparent;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 10px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #FE5000 !important;
  color: #000;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-top: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  background-color: #FE5000 !important;
  padding-right: 7px !important;
  color: red !important;
}
#divFile {
  background-color: rgba(32,33,36,0.122);
  border-radius: 50px;
}
#closeFile {
  cursor: pointer;
}
/*EnvioCorreo*/
/*Profesor*/

/*Toast*/
#liveToast {
  width: 290px;
}
.toast-header {
  background-color: #000;
  color: var(--color-U-2);
}
#img_check {
  max-width: 45px;
  max-height: 45px;
}
small {
  font-size: 14px;
}
/*Toast*/
/*Soporte*/
/*Estadisticas*/

.colorBoxES1{
  background-color: var(--color-U-5) !important;
}

.colorBoxES2{
  background-color: var(--color-U-3) !important;
}

.colorBoxES3{
  background-color: var(--color-U-4) !important;
}

.colorBoxES4{
  background-color: var(--color-U-6) !important;
}

.card-boxEs {
  position: relative;
  color: #fff;
  padding: 5px 10px 5px;
  margin: 10px 0px;
  border-radius: 0.5rem;
  box-shadow: -1px 15px 30px -10px black;
}

.card-boxEs h3 {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 8px 0;
  padding: 0;
  text-align: left;
}

.card-boxEs p{
  font-size: 1rem;
}
.card-boxEs .icon {
  position: absolute;
  top: auto;
  bottom: 8px;
  right: 10px;
  z-index: 0;
  font-size: 62px;
  color: rgba(0, 0, 0, 0.15);
}
.card-boxEs:hover .icon i {
  font-size: 75px;
  transition: all .3s linear;
}
/*Estadisticas*/
.boxEsta{
  display: flex;
  justify-content: center;
}
/*Soporte*/
.mobilTextEs, .mobilButtonEs{
display: none;
}
#containerMobil{
  display: none;
}
#carouselBasicExample{
overflow: hidden;
}

#firstImg, #secondImg{
  height: 500px; /* o el alto deseado */
  max-height: 500px;
}
.carousel-item,
.carousel-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}
  .imgC {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Tamaño y estilo para las imágenes secundarias */
  .imgCP {
    width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen sin deformarla */
  object-position: center; /* Centra la imagen dentro del div */
  display: block;
    cursor: pointer;
}
#secondImg .row{
  height: 100%;
}
.divinterno{
  height: 240px;
}



.noticiasCard{
  width: 23%;
  border-radius: 25%;
}
.imgCR{
  border-radius: 5px;
}
.noticiaCard{
  width: 100%;
  height: 300px;
}

.tituloNo{
  z-index: 1;
  color: #fff;
  width: 90%;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.botonN{
  z-index: 1;
  color: #000;
  font-weight: bold;
  width: 37%;
  background-color: var(--color-U-2);
  border-color: var(--color-U-2);
}
.botonN:hover{
  z-index: 1;
  color: #000;
  font-weight: bold;
  width: 37%;
  background-color: var(--color-U-2);
  border-color: var(--color-U-2);
}
.botonN:focus{
  z-index: 1;
  color: #000;
  font-weight: bold;
  width: 37%;
  background-color: var(--color-U-2);
  border-color: var(--color-U-2);
}

.wrapperN {
  width: 100%;
}

.wrapperN p {
  text-align: justify;
  text-indent: 2em;
}

.wrapperN img {
  width: 40%;
  height: 40%;
  float: left;
  margin: 0 2rem 1rem 0;
}

.wrapperNoticia {
  width: 23%;
  height: 300px;
  padding: 10px;
}

#error-section{
  padding: 0;
  margin: 0;
}

.pError{
  list-style:none;
  padding: 8px;
  text-align: justify;
}

.buttonCarrera:focus{
  background-color: #f0d58a;
  color: #000;
}

.box {
  position: relative;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  .hide { opacity: 0; }
  
  .frame {
    position: absolute;
    border: 1px solid #fff;
    z-index: 2;
  }
  
  .imgCR {
    filter: brightness(50%);
    transition: all .3s ease-in-out;
  }
  .imgCP {
    transition: all .3s ease-in-out;
  }
}

.zoom-out {
  .frame {
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
  
  h2 { 
    font-size: 20px; 
    font-weight: bold;
    letter-spacing: 1px;
  }

  
  img { transform: scale(1.1); }
  &:hover img { 
    transform: scale(1);
  }
}

.modalPublicidad {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modalPublicidad .modal-content {
  max-width: 90%;
  max-height: 90%;
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

.close {
  color: #fff;
  font-size: 40px;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

.close:hover {
  color: #fff;
}

.rowNoticia{
  height: 100%;
}
.colPublicidad{
  display: flex;
  justify-content: end;
  align-items: end;
  padding: 0;
  margin-left: -15px;
}

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: var(--color-U-1);        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: var(--color-U-6);    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
}
/*Media Query*/
@media (min-width: 150px) and (max-width: 320px) {
  .textoLogin{
    margin-left: 0;
  }
  .colorCardBontones{
    width: 100% !important;
    margin-left: 0;
    height: auto;
  }
  #imgMicrosoft{
    max-width: 150px;
  }
  .login {
    width: 90%;
    margin: 50px 0 0 16px;
  }
  .formHeigth{
    width: 45%;
    height: 530px;
  }

  #formCarreraLink{
    width: 100% !important;
    font-size: 11px;
  }

  .formCarreraIcon{
    display: none;
  }
}

@media (max-width: 767px) {
  .grid{
    display: flex;
    flex-direction: column;
  }
  #opcionPrematricula {
    padding-right: 13px; /* Ajustar el máximo si es necesario */
  }
  #secondImg{
    display: none;
  }
  .publicidades{
    max-width: 95%;
  }
  .wrapperN img {
    width: 100%;
    height: 100%;
    float: left;
    margin: 0 2rem 1rem 0;
  }
  .noticiasCard, .wrapperNoticia{
    width: 100%;
  }
  #basic-addon1{
    display: none !important;
  }
  .alertMobil{
    width: 325px;
  }
  .inputMobil{
    width: 310px;
  }
  #containerMobil{
    display: block;
    height: 800px;
  }
  #container{
    display: none;
  }

  .flip-container {
    perspective: 1000px;
    height: 100vh;
  }

  .flipper {
    width: 100% !important;
    height: 100vh;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
    
    transition: 0.6s;
    transform-style: preserve-3d;
  }

  .flip-card {
    background-color: transparent;
    width: 100%;
    height: 100vh;
    perspective: 1000px;
    margin: 0 auto;
}

.front,
.back {
	backface-visibility: hidden;
}

.front{
  width: 100%;
  height: 100vh;
  position: absolute;
	transform: rotateY(0deg);
}

.back {
  width: 100%;
  height: 100vh;
  position: absolute;
    transform: rotateY(180deg);
}

.flip{
  transform: rotateY(180deg);
}

  .loginUIA{
    height: auto;
  }
  .img-logo {
width: 300px;
  }
  .sign-in-container {
    width: 100%;
  }
  .mobilTextEs, .mobilButtonEs{
    display: block;
    }
    .mobilRigth{
      display: none;
    }
  #imgPP, #imgSP, #imgTP, #imgCP, #imgQP, #imgSeP{
    width: 250px;
    }

  .ml11, .ml14, .ml5, .ml12, .ml17, .ml18{
    text-align: center;
    margin-top: 20px !important;
    font-size: 20px !important;
  }
  
  .colorCardBontones{
    width: 90%;
  }
  .profile-button {
    height: auto;
    font-size: 16px;
  }
  .content{
    width: 100%;
  }
  .divContactInfo{
  height: auto;
  margin-bottom: 5px;
}

  .nav-pills .btnContac.active{
    width: 100%;
  }
  #formCarreraLink{
    width: 100%;
  }
  .formHeigth{
    width: 45%;
    height: 530px;
  }
  .loginLogoUIA{
    width: 90%;
    margin: auto;
  }
  .cardLoginUia{
    width: 90%;
   }
  .nameUIA{
    border-top-left-radius: 20px;
    width: 99%;
    margin-left: 2px;
  }
  .cardLoginUia{
    margin: auto;
  }
  .arrowName{
    display: none;
  }
  .textUIALogin{
    font-size: 20px;
  }
  .registroPr {
    width: 90%;
    height: auto;
    margin: 50px 0 0 16px;
  
  }

  .passConfirmH {
    width: 90%;
    height: auto;
    margin: 50px 0 0 0;
  }

  .passResetDH,
  .passCompleH {
    width: 90%;
    
  }

  .cambioContraPH{
    width: 95%;
    height: auto;
    margin: 50px 0 0 0;
  }

  .mobile-hide {
    display: none !important;
  }

  .tablaPlan td {
    background-color: transparent;
  }

  #aprovado {
    background-color: #cdfcba;
  }

  #matriculable {
    background-color: #b8e6fd;
  }

  #noMatriculable {
    background-color: #d1d1cf;
  }
  .icon{
    display: none;
  }
  .boxEsta{
    display: initial;
    justify-content: initial;
  }
}

@media only screen and (max-device-width: 767px) and (orientation: landscape){

  
  #basic-addon1{
    display: none !important;
  }
  .alertMobil{
    width: 325px;
  }
  .inputMobil{
    width: 310px;
  }
  #containerMobil{
    display: block;
    height: 800px;
  }
  #container{
    display: none;
  }

  .flip-container {
    perspective: 1000px;
    height: 800px;
  }

  .flipper {
    width: 100% !important;
    height: 800px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
    
    transition: 0.6s;
    transform-style: preserve-3d;
  }

  .flip-card {
    background-color: transparent;
    width: 100%;
    height: 800px;
    perspective: 1000px;
    margin: 0 auto;
}

.front,
.back {
	backface-visibility: hidden;
}

.front{
  width: 100%;
  height: 800px;
  position: absolute;
	transform: rotateY(0deg);
}

.back {
  width: 100%;
  height: 800px;
  position: absolute;
    transform: rotateY(180deg);
}

.flip{
  transform: rotateY(180deg);
}

  .loginUIA{
    height: auto;
  }
  .img-logo {
width: 300px;
  }
}

@media only screen and (max-device-width: 991px) and (orientation: landscape){
  .noticiasCard, .wrapperNoticia{
    width: 50%;
  }
  #basic-addon1{
    display: none !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(3, auto);
    gap: 10px;
  }

  .payment-summary .card{
    height: auto;
  }
  
  .grid .item {
    display: inline-block;
    width: auto;
    box-sizing: content-box;
  }

  #opcionPrematricula {
    padding-right: 13px; /* Ajustar el máximo si es necesario */
  }

  .noticiasCard, .wrapperNoticia{
    width: 40%;
  }

  .colPublicidad {
    margin-left: -12px;
}

  #container {
    max-width: 90%;
}


.img-logo {
  width: 320px;
  margin-bottom: 2em;
  vertical-align: middle;
}

.ml14, .ml5, .ml12, .ml17{
    text-align: center;
    margin-top: 20px !important;
    font-size: 37px !important;
  }

  .ml11{
    text-align: center;
    margin-top: 20px !important;
    font-size: 38px !important;
  }

  .ml18{
    text-align: center;
    margin-top: 20px !important;
    font-size: 35px !important;
  }
  
  .divContactInfo{
    height: auto;
    margin-bottom: 5px;
  }
  .cardLoginUia{
    width: 100%;
   }
   .nameUIA{
    width: 90%;
   }
   .formHeigth{
    width: 30%;
    height: 530px;
  }

  #formCarreraLink{
    width: 100%;
  }
 .modal_primer_ingreso{
  max-width: 90%;
 }
}

@media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
    .noticiasCard, .wrapperNoticia{
      width: 40% !important;
    }
    
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  .noticiasCard, .wrapperNoticia{
    width: 50%;
  }
/* Your Styles here */
.profile-button {
  height: auto;
  font-size: 16px;
}
#linkCambio, #cambioPassPerfil{
  height: auto;
  width: 100px;
}
.colNameUia{
  width: 100%;
}
.textUIALogin{
  font-size: 35px;
  margin-left: 20px;
 }

 .nav-pills .btnContac.active {
  font-size: 14px;
}
.nav-pills .btnContac  {
  font-size: 14px;
}
 
}

@media only screen and (min-width: 1001px) and (max-width: 1366px) {
  .grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(3, auto);
    gap: 10px;
  }
  
  .grid .item {
    display: inline-block;
    width: auto;
    box-sizing: content-box;
  }

  .colNameUia{
    width: 150%;
  }
  .cardLoginUia{
    width: 90%;
   }
   .nameUIA{
    width: 80%;
   }

   #formCarreraLink{
    width: 100%;
  }

  .ml14, .ml5, .ml12, .ml17{
    text-align: center;
    margin-top: 20px !important;
    font-size: 37px !important;
  }

  .ml11{
    text-align: center;
    margin-top: 20px !important;
    font-size: 38px !important;
  }

  .ml18{
    text-align: center;
    margin-top: 20px !important;
    font-size: 35px !important;
  }

}

@media screen and (min-width: 1700px)  {
  
  #cardFormularios {
    width: 500px;
  }
  .cardTarjetaPago {
    height: 500px;
  }
  #tarjetasCards {
    margin-top: 50px;
  }
  #imgLoginUIA{
    width: 700px;
  }

  .nameUIA{
    background-color: #000;
    color: #ffff;
    padding-left: 20px;
    padding-top: 5px;
    border-top-left-radius: 25px;
    display: flex;
      align-items: center;
      height: 80px;
  }
  .textUIALogin{
    font-size: 50px;
  }
  .cardLoginUia{
    width: 100%;
   }
   .nameUIA{
    width: 90%;
   }
   .formHeigth{
    width: 19%;
    height: 750px
  }

  #rowForm{
    max-width: 100%;
  }
  @media only screen and (min-width: 2240px) {
    #rowForm{
      max-width: 100% !important;
    }
    .formHeigth{
      width: 19%;
      height: 1000px;
    }
  }
}
/*Media Query*/