@font-face{
  font-family: "Nunito";
  src: url("../fonts/nunito/static/Nunito-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "Roboto";
  src: url("../fonts/roboto/Roboto-Regular.ttf") format("truetype");
}


 

body {
  font-family: "Roboto", sans-serif;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
/*
.btn-link-hover-color{
  color: #292D32;
  background-color: #292D32;
}*/

h3{
  color: #292D32;
  font-family: Nunito;
  font-size: 15px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
}

h5{
  color: #000;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: normal;
}

h5.roboto{
  color: #000;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 12px; /* 85.714% */
  letter-spacing: 0.15px;
}

h6{
  color: #92929D;
  font-family: Nunito;
  font-size: 12px;
  font-style: normal;
  font-weight: 400 !important; 
  line-height: normal;
}

h6.blue{
  color: #0162DD;
  font-family: Nunito;
  font-size: 12px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: normal;
}

.photo {
  width: 100%;
  height: 100%;
  background: rgba(3, 28, 70, 0.57);
  border-radius: 51px 0px 0px 51px;
}

.student-logo {
  width: 659px;
  height: 100%;  
  background: url('../images/smiling-woman-having-break-university-big.png');
  border-radius: 51px 0px 0px 51px;
  background-size: cover;
  flex-shrink: 0;
 }

 .div-logo{
  margin-top: 10em;
 }

 .welcome-title{
  color: var(--Primary-One, #083A50);
  font-family: Nunito;
  font-size: 24px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
  margin-top: 1em;
}

.header-title{
  color: #FFF;
  font-family: Nunito;
  font-size: 28px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
}

.agree-policy{
  color: #B3B3B3;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.14px;
}


.form-control{
  color: var(--Secondary-color-text, #92929D);
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500 !important; 
  line-height: 24px; 
  letter-spacing: 0.15px;
}

.form-check-label-unchecked{
  color: #92929D !important;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600 !important;
  /* line-height: 20px; */
  letter-spacing: -0.14px;
  margin-left: 10px;  
}

.form-check-label{
  color: #083A50;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600 !important;
  /* line-height: 20px; */
  letter-spacing: -0.14px;
  margin-left: 10px;  
}

.detail-text{
  color: #083A50;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: normal !important;
  /* line-height: 20px; */
  letter-spacing: -0.14px;
  margin-left: 10px;  
}


.label-small{
  color: #000;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 12px; /* 85.714% */
  letter-spacing: 0.15px;  
}

header{
  background-image: url('../images/young-couple-buying-car-in-car-showroom.jpg');
  border-radius: 0px 0px 40px 40px;
  background-repeat: no-repeat;
  height: 105.503px;
  flex-shrink: 0;
 /* background: linear-gradient(182deg, #01152E -246.38%, rgba(0, 32, 74, 0.00) 68.44%); */
}

.div-header{
  border-radius: 0px 0px 40px 40px;
  background: rgba(3, 28, 70, 0.57);
  height:inherit;
}

.login-name{
  color: var(--Primary-One, #083A50);
  font-family: Nunito;
  font-size: 15px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
}

.logo-container{
  height: 132.653px;
  padding: 25px 0px 30.653px 7px;
  justify-content: flex-end;
  align-items: center;
}

.div-issues{
  width: 456px;
  height: 457px;
  flex-shrink: 0;  
  border-radius: 4px;
  background: #F1F4F9;
 }

#btn-submit-application{
  width: 456px !important;
}

.div-issues-text{
  width: 384px;
  flex-shrink: 0;
}

.small-text{
  color: #B3B3B3;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 19.6px; /* 140% */
}

.medium-lg-text{
  color: #333;
  text-align: center;
  font-family: Nunito;
  font-size: 20px;
  font-style: normal;
  font-weight: 600 !important;
  line-height: normal;
}

.medium-sm-text{
  color: #333;
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 600 !important;
  line-height: normal;
}

.metrics{
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.metrics {
 /* width: 559px; */
  height: 79px;
  flex-shrink: 0;
  border-radius: 8px;
}

.visit-label{
  color: var(--Primary-One, #083A50);
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 19.6px; /* 108.889% */
}

.btn{
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;  /*700 valor en figma */  
  line-height: 26px; /* 185.714% */
  border-radius: 8px;
}

.btn-primary{
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;  /*700 valor en figma */
  line-height: 26px; /* 185.714% */
  letter-spacing: 0.46px;
  text-transform: uppercase;  
  border-radius: 8px;
/*  background: #0162DD;   pendiente hover color*/
  /* Elevation/2 */
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);  
}

/*
.btn-outline-primary{
  width: inherit;
  height: 37px;
} */

.btn-outline-primary:disabled{
  border: 1px solid #D9D9D9;
  background: #FBFDFE;
  color: #D9D9D9;
}

.text_disabled{
  color: #D9D9D9;
}

.logo-header{
  display: flex;
  width: 104px; height: 98px;
  padding: 13px 15px 12px 15px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.div-upload{
  display: flex;
 /* width: 668px; */
  padding: 16px 16px 16px 16px; 
  justify-content: center;
  align-items: flex-end;
 /* gap: 63px; */

  border-radius: 4px;
  border: 1px dashed #D9D9D9;
  background: #FFF;  
}

.upload-image{
  width: 48px;
  height: 48px;
  margin-right: 15px;
  flex-shrink: 0;
}

.upload-btn{
    position: relative;
    overflow: hidden;
}

.upload-btn input{
  position: absolute;
  font-size: 50px;
  opacity: 0;  
  right: 0;
  top: 0;
}

.upload_dropZone {
  background-color: transparent;
  outline: 2px dashed var(--colorPrimaryHalf,white);
  outline-offset: -12px;
  transition:
      outline-offset 0.2s ease-out,
      outline-color 0.3s ease-in-out,
      background-color 0.2s ease-out;
  }

.upload_dropZone.highlight {
  outline-offset: -4px;
  outline-color: var(--colorPrimaryNormal, #0162DD);
  background-color: var(--colorPrimaryEighth, #D9D9D9);
}

.form-floating>.form-control, .form-floating>.form-select{
  height: calc(2.3rem + 2px);
}

.form-floating>label {
  color: var(--Secondary-color-text, #92929D);
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  padding: .5rem .75rem;
}

.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
  opacity: 1; 
  top: -4px;
  left:8px;
  padding: 0px;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
  background: white;
  height: fit-content;
}

.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
   padding-top: 0px; 
   padding-bottom: 0px; 
}

.nonfloating-label{
    top: -12px;
    left: 10px;  
    color: var(--Secondary-color-text, #92929D);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;     
}

.nonfloating-label{
  color: var(--Secondary-color-text, #92929D);
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;        
}

.accordion-button {
  color: #292D32;
  font-family: Nunito;
  font-size: 15px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
  padding: 1rem 0px 1rem;  
}

.editOption{
  width: 85%;
  height: 24px;
  margin-left: 5px;
  position: relative;
  top: -30px

}

.saveContinue{
  width: fit-content !important;
  font-family: Nunito;
  font-size: 16px !important;
  color: #0162DD;
}

.toast-container {
  position: fixed;
  right: 650px;
  top: 20px;
  z-index: 1070;
}

.toast:not(.showing):not(.show) {
  display: none !important;
}

.loader-window {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000000 !important;
  background: rgba(54, 70, 93, 0.95); 
  opacity: 0.6;
}
.loader {
  position: absolute;
  top:50%;
  left:50%;
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #0d6efd;
  width: 60px;
  height: 60px;
  margin-top:-30px;
  margin-left:-30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
/*  left: -25px;
  margin-top: 5px;  */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  z-index: 1;
}

/*
.toast {
  left: 50%;
  position: fixed;
  transform: translate(-50%, 0px);
  z-index: 9999;
} */

.toast-fixed {
  position:fixed; 
  top: 20%; 
  right: 0px;
  width: inherit !important;
  min-width: 350px;
  z-index:9999; 
}


.customtooltip {
  position: relative;
  display: inline-block;
}

.customtooltip .customtooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.customtooltip .customtooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.customtooltip:hover .customtooltiptext {
  visibility: visible;
  opacity: 1;
}     


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


@media (max-width: 991.98px) {
  .main{
    order: 2;
  }
  .side{
    order: 1;
    height: 245px;
  }
  .photo {
    width: 100%;
    background: rgba(3, 28, 70, 0.57);
    border-radius: 0px 0px 51px 51px;    
  }  
  .student-logo{
    width: 100%;
    border-radius: 0px 0px 51px 51px;
    background-repeat: no-repeat;
  }  
  
  .welcome-title{
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 30px;
    font-style: normal;
  }
  
  .div-logo{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    margin-top: 2em;
    margin-left: 1px;
  }  
  
  .logo-init{
    max-width: 100px;
  }

  .register-label{
    color: #30242A;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600 !important;
    line-height: 19.6px; /* 122.5% */
  }

  .row{
    --bs-gutter-x:0;
  }

  .div-form{
    margin-top: 1em;
  }

  .header-main{
    background-image: url('../images/young-couple-buying-car-in-car-showroom_small.jpg');
    background-repeat: no-repeat;
    height: 265px;
    flex-shrink: 0;
    margin: 5px;
    background-size: cover;
  }

  .div-issues{
    width: inherit;
    height: 208px;
    flex-shrink: 0;
    justify-content: start !important;
    align-content: start !important;
  }

  #btn-submit-application{
    width: 100% !important;
  }

  .toast-container {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 999;
  }

  .next_button, .submit_button{
    width: 100% !important;
  }
/*
  .header-title{
    display: block;
  }
*/
}

/* Desktop Styles lg */
@media only screen and (min-width: 992px) {
  /*.header-title{
    display: none;
  }*/
}