/*COLORS*/

:root{
  /*
  --blueDark:#242d4c;
  --orange: #FF8E45;
  */
  --gris:#384951;
  --amarillo:#d7b516;
  --verde:#63bb6c;
  --rojo:#f65655;
  

  --grisCartaDocumentos:#606060;
  --excel:#1E6E42;
  --blueDark2:#0580CC;
  --blueDark:#204376;
  --blue: #025BAD;
  --blueOriginal: #025BAD;
  --orange: #f58220;
  --gray:#e5e6e7;
  --orangeDark: #994721;
  --blueLight: #099FFF;
  --fullWhite:#FFFFFF;
  --white:#EEEEEE;
  --whiteDark:#CCCCCC;
  --whiteDark2:#dcddee;
  --correct:#138496;
  --correctDark:#005577;
  --default:#4a4a4a;
  --defaultDark:#252525;
  --grayDark:#252f3c;
  --grayLight:#2f3b49;
  --comment:orange;
  --commentDark:orangered;
  --error:#ff0000;
  --errorDark:#c82333;
  --badValidation:purple;
  --badValidationDark:rgb(95, 9,31);

  font-family: 'fedrasansbook';


}

  .whiteText{
    color:white;
  }

  .verdeBtn{
    background-color:#63bb6c;
    color:white;
  }

  .verdeBtn:hover{
    background-color:var(--correct);
    color:white;
  }

  .verdeBackground{
    background-color:var(--correct);
    color:white;
  }

  .grayLightBackground{
    background-color:var(--grayLight);
    color:white;
  }
  


  .transparent{
    background:none;
  }
  .gris{
    background-color:#384951;
    color:white;
  }
  .amarillo{
    background-color:#d7b516;
    color:black;
  }
  .verde{
    background-color:#63bb6c;
    color:var(--defaultDark);
  }
  .rojo{
    background-color:#f65655;
    color:white;
  }

  .grisCartaDocumentos{
    background-color:var(--grisCartaDocumentos);
    color:white;
  }  

  .defaultBackground{

    background-color: var(--default);
    color: white;

  }

  .lightGrayBackground{
    background-color: var(--grayLight);
    color: white;
  }

  .grayDarkBackground{
    background-color: var(--grayDark);
    color: white;
  }

  .blueDark{
    background-color: var(--blueDark);
    color: white;
  }
  .blueDark2{
    background-color: var(--blueOriginal);
    color: white;
  }

  .blueDark3{
    background-image: linear-gradient(-65deg, rgba(2, 91, 173,0.4) 30%, rgba(2, 91, 173,1) 50%);
    /*background-color: white;*/
    color: white;
  }


  .blue{
    background-color: var(--blue);
    color: white;
  }
  .orange{
    background-color: var(--orange);
    color: white;
  }
  .gray{
    background-color: var(--gray);
    color: black;
  }
  .orangeDark{
    background-color: var(--orangeDark);
    color: white;
  }
  .blueLight{
    background-color: var(--blueLight);
    color: black;
  }
  .fullWhite{
    background-image: linear-gradient(to top, rgba(255,255,255,0.4), rgba(255,255,255,1));
    /*background-color: white;*/
    color: black;
  }
  .white{
    background-color: var(--white);
    color: black;
  }
  .whiteDark{
    background-color: var(--whiteDark);
    color: black;
  }
  .correct{
    background-color: var(--correct);
    color: white;
  }
  .correctDark{
    background-color: var(--correctDark);
    color: white;    
  }
  .default{
    background-color: var(--default);
    color: white;
  }
  .defaultDark{
    background-color: var(--defaultDark);
    color: white;
  }
  .comment{
    background-color: var(--comment);
    color: black;
  }
  .commentDark{
    background-color: var(--commentDark);
    color: white;
  }
  .error{
    background-color: var(--error);
    color: white;
  }

  .badValidation{
    background-color: var(--badValidation);
    color: white;
  }

  .errorDark{
    background-color: var(--errorDark);
    color: white;
  }

  .blue:hover{
    background-color: var(--blueDark);
    color: white;
  }

  .orange:hover{
    background-color: var(--errorDark);
    color: white;
  }

  .default:hover{
    background-color: var(--defaultDark);
    color: white;
  }

  .correct:hover{
    background-color: var(--correctDark);
    color: white;
  }

  .commentDark:hover{
    background-color: var(--commentDark);
    color: white;
  }

  .badValidation:hover{
    background-color: var(--badValidationDark);
    color: white;
  }

  

/*FONTS*/
@font-face{
  font-family: 'fedrasansbook';
  src: url(../fonts/fedrasansbook.ttf);
}

@font-face{
  font-family: 'fedrasansbookitalic';
  src: url(../fonts/fedrasansbookitalic.ttf);
}

@font-face{
  font-family: 'fedrasanslight';
  src: url(../fonts/fedrasanslight.ttf);
}


@font-face{
  font-family: 'fedrasanslightitalic';
  src: url(../fonts/fedrasanslightitalic.ttf);
}


@font-face{
  font-family: 'reey';
  src: url(../fonts/Reey-Regular.otf);
}

@font-face{
  font-family: 'town';
  src: url(../fonts/town-10-display-black.otf);
}


.fedra{
  font-family: fedrasansbook;
}

.fedraItalic{
  font-family: fedrasansbookitalic;
}

.fedralight{
  font-family: fedrasanslight;
}

.fedraLightItalic{
  font-family: fedrasanslightitalic;
}

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

/*SCROLLBAR*/
/* Track */
::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.30); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  /*background: #555; */
  background: var(--blueDark2); 
}


/*LABEL*/



.smallLabel{
  color:orange;
}


/*BUTTONS*/

.btnTransparent{
  background:transparent;
}

.btnTransparent:hover{
  background:var(--orange);
  color:white;
}


.btnFlatTop{
  
  font-family: fedrasanslight;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 5px;
  
  border-top-right-radius: 0px;
  border-bottom-right-radius: 5px;

  border:none;
  line-height: 32px;
  cursor: pointer;
  
}

.btnFlatTopRight{
  
  font-family: fedrasanslight;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 5px;
  
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;

  border:none;
  line-height: 32px;
  cursor: pointer;
  
}

.btnFlatTopLeft{
  
  font-family: fedrasanslight;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  
  border-top-right-radius: 0px;
  border-bottom-right-radius: 5px;

  border:none;
  line-height: 32px;
  cursor: pointer;
  
}


.btnFlatBottom{
  
  font-family: fedrasanslight;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 0px;
  
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0px;

  border:none;
  line-height: 32px;
  cursor: pointer;
  
}

.btnFlatBottomRight{
  
  font-family: fedrasanslight;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 0px;
  
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;

  border:none;
  line-height: 32px;
  cursor: pointer;

  overflow:hidden;
  
}


.btnFlatRight{
  
  font-family: fedrasanslight;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;

  border:none;
  line-height: 32px;
  cursor: pointer;
  overflow:hidden;
  
}


.btnFlatLeft{
  
  font-family: fedrasanslight;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border:none;
  line-height: 32px;
  cursor: pointer;
  
}

.btnFlat{
  font-family: fedrasanslight;
  border:none;
  line-height: 32px;
  cursor: pointer;
}

.btn{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  
}


.btn:hover{
  background-color: var(--default);
  color:white;
}


.btnWhite{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  background-color: var(--whiteDark);
  color:black;
}


.btnWhite:hover{
  background-color: var(--blue);
  color:white;
}


.btnWhiteSmall{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 15px;
  cursor: pointer;
  color:black;
  background-color: var(--whiteDark);
  
}

.btnWhiteSmall:hover{
  color:white;
  background-color: var(--defaultDark);
}


.btnLightGray{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:black;
  background-color: var(--whiteDark2);
  
}

.btnLightGray:hover{
  color:black;
  background-color: var(--white);
}



.btnBlue{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--blue);
  
}

.btnBlue:hover{
  background-color: var(--blueDark);
}


.btnWhite{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:black;
  background-color: var(--fullWhite);
  
  border:solid 1px lightgray;
  padding:-1px;
}

.btnWhite:hover{
  background-color: var(--whiteDark2);
  color:black;
}


.btnBlueDark{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--blueDark);
  
}

.btnBlueDark:hover{
  background-color: var(--blue);
}


.btnGris{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--gris);
  
}

.btnGris:hover{
  background-color: var(--defaultDark);
}


.btnAmarillo{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:black;
  background-color: var(--amarillo);
  
}

.btnAmarillo:hover{
  background-color: var(--orange);
}


.btnVerde{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--verde);
  
}

.btnVerde:hover{
  background-color: var(--correct);
}

.btnRojo{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--rojo);
  
}

.btnRojo:hover{
  background-color: var(--error);
  color:white;
}

.btnRojoObservacion{

  background:#ea4335;
  color:white;

}

.btnRojoObservacion:hover{

  background:var(--rojo);

}

.btnBlueDark2{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--blueDark2);
  
}

.btnBlueDark2:hover{
  background-color: var(--blueDark);
}

.btnDefault{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--default);
  
}

.btnDefault:hover{
  background-color: var(--defaultDark);
}


.btnComment{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:black;
  background-color: var(--comment);
  
}

.btnComment:hover{
  background-color: var(--commentDark);
}


.btnOrange{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--orange);
  
}

.btnOrange:hover{
  background-color: var(--orangeDark);
}

.btnCbtnOrangeDark:hover{
  background-color: var(--orangeDark);
}


.btnOrangeDark{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--orangeDark);
  
}

.btnCbtnOrangeDarkomment:hover{
  background-color: var(--orange);
}

.btnCommentDark{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--commentDark);
  
}

.btnCommentDark:hover{
  background-color: var(--comment);
}


.btnBadValidation{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--badValidation);
  
}

.btnBadValidation:hover{  
  background-color: var(--badValidationDark);
}


@keyframes whiteToOrange {
  
  0%,100% {
  background-color: white;
  color:black;
  }
  50% {
  background-color: orange;
  color:white;
  }

}



.btnWhiteOrange{

font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:black;
  background-color: white;
  animation-name: whiteToOrange;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

.btnWhiteOrange:hover{
  background-color: #025BAD;
  color:white;
}



.btnCorrect{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--correct);
  
}

.btnCorrect:hover{
  background-color: var(--correctDark);
}

.btnClose{
  color: var(--error);
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  margin:3px;
}

.btnClose :hover{
  background-color: transparent;
  border: none;
  color:var(--defaultDark);
  cursor: pointer;
  font-size: 1.5rem;
}

.btnError{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  background-color: var(--error);
  color:white;
  
}

.btnError:hover{
  
  background-color: var(--errorDark);
}

.btnWide{
  display: block;
  margin:0 auto;
  border-radius: 5px;
  border:none;
  width:100%;
  line-height: 32px;
}

.primary{

  background-color: #025BAD;
  color:white;

}

.primary:hover{
  transition: 0.4s;
  background-color: #099FFF;
  color:white;
}

.secondary{
  background-color: var(--orange);
  color:white;
}

.secondary:hover{
  transition: 0.4s;
  background-color: #994721;
  color:white;
}

/*Borders*/

.rBorder{
  border-radius: 5px;
}

/*DIRECTION*/

.center{
  /*text-align:center;*/
  display:block;
  margin:0 auto;
}

.tCenter{
  /*text-align:center;*/
  text-align:center;
}

.tLeft{
  /*text-align:center;*/
  text-align:left;
}
.tRight{
  /*text-align:center;*/
  text-align:right;
}

.aLeft{
  text-align:left;
}
.aRight{
  text-align:right;
}
/*COLS*/

.formLabel{
  text-align: left;
  min-width:9%;
  display:block;
  font-size:100%;
}


.formCol{

  display: inline-block;
  margin:0 auto;  

}

.formRow{

  display: block;
  margin:0 auto;
  width:95%;
  vertical-align:top;

}


.hoverable{
  transition: height 2s;
}

.hoverable:hover{
  height: 100%;
}



.hoverable > .displayHover{
  display:none;      
}

.hoverable:hover > .displayHover {  
  display:block;
}


.col3{
  box-sizing: border-box;
  min-width:3%; 
  max-width:3%; 
  vertical-align: top;
}

.col5{
  box-sizing: border-box;
  min-width:5%;
  max-width:5%;
  vertical-align: top;
}

.col7{
  box-sizing: border-box;
  min-width:5%;
  max-width:5%;
  vertical-align: top;
}

.col10{
  box-sizing: border-box;
  min-width:10%;  
  max-width:10%;
  vertical-align: top;
}

.col12{
  box-sizing: border-box;
  min-width:12%;  
  max-width:12%;
  vertical-align: top;
}

.col13{
  box-sizing: border-box;
  min-width:13%;  
  max-width:13%;
  vertical-align: top;
}

.col14{
  box-sizing: border-box;
  min-width:14%;  
  max-width:14%;
  vertical-align: top;
}

.col15{
  box-sizing: border-box;
  min-width:15%;  
  max-width:15%;
  vertical-align: top;
}

.col165{
  box-sizing: border-box;
  min-width:16.5%;
  vertical-align: top;
}

.col18{
  box-sizing: border-box;
  min-width:18%;  
  vertical-align: top;
}

.col20{
  box-sizing: border-box;
  min-width:20%;
  max-width:20%;
  vertical-align: top;
}

.col22{
  box-sizing: border-box;
  min-width:22%;  
  vertical-align: top;
}

.col225{
  box-sizing: border-box;
  min-width:22.5%;  
  vertical-align: top;
}

.col23{
  box-sizing: border-box;
  min-width:23%;
  vertical-align: top;
}

.col24{
  box-sizing: border-box;
  min-width:24%;  
  vertical-align: top;
}

.col25{
  box-sizing: border-box;
  min-width:25%;
  max-width:25%;  
  vertical-align: top;
}

.col27{
  box-sizing: border-box;
  min-width:27%;
  max-width:27%;
  vertical-align: top;
}


.col30{
  box-sizing: border-box;
  min-width:30%;  
  max-width:30%;  
  vertical-align: top;
}

.col33{
  box-sizing: border-box;
  min-width:33%;  
  max-width:33%;  
  vertical-align: top;
}

.col35{
  box-sizing: border-box;
  min-width:35%;  
  max-width:35%;  
  vertical-align: top;
}
.col40{
  box-sizing: border-box;
  min-width:40%;  
  max-width:40%;  
  vertical-align: top;
}    

.col425{
  box-sizing: border-box;
  min-width:42.5%;
  max-width:42.5%;  
  vertical-align: top;
}

.col45{
  box-sizing: border-box;
  min-width:45%;
  max-width:45%;  
  vertical-align: top;
}

.col46{
  box-sizing: border-box;
  min-width:46%;
  max-width:46%;  
  vertical-align: top;  
}

.col48{
  box-sizing: border-box;
  min-width:48%;
  max-width:48%;  
  vertical-align: top;  
}

.col49{
  box-sizing: border-box;
  min-width:49%;
  max-width:49%;  
  vertical-align: top;  
}

.col495{
  box-sizing: border-box;
  min-width:49.5%;
  max-width:49.5%;  
  vertical-align: top;  
}

.col50{
  box-sizing: border-box;
  min-width:50%;  
  max-width:50%;
  vertical-align: top;
}

.col52{
  box-sizing: border-box;
  min-width:52%;  
  vertical-align: top;
}

.col55{
  box-sizing: border-box;
  min-width:55%;  
  vertical-align: top;
}
.col58{
  box-sizing: border-box;
  min-width:58%; 
  max-width:58%; 
  vertical-align: top;
}
.col60{
  box-sizing: border-box;
  min-width:60%;
  max-width:60%;  
  vertical-align: top;
}
.col65{
  box-sizing: border-box;
  min-width:65%;
  max-width:65%;  
  vertical-align: top;
}
.col70{
  box-sizing: border-box;
  min-width:70%;
  max-width:70%;
  vertical-align: top;
}

.col75{
  box-sizing: border-box;
  min-width:75%;  
  max-width:75%;
  vertical-align: top;
}


.col80{
  box-sizing: border-box;
  min-width:80%;  
  max-width:80%;
  vertical-align: top;
}

.col85{
  box-sizing: border-box;
  min-width:85%;  
  max-width:85%;
  vertical-align: top;
}

.col858{
  box-sizing: border-box;
  min-width:85.89%;  
  vertical-align: top;
}

.col88{
  box-sizing: border-box;
  min-width:88%; 
  max-width:88%; 
  vertical-align: top;
}

.col90{
  box-sizing: border-box;
  min-width:90%;  
  max-width:90%;
  vertical-align: top;
}

.col92{
  box-sizing: border-box;
  min-width:92%;  
  max-width:92%;  
  vertical-align: top;
}

.col93{
  box-sizing: border-box;
  min-width:93%;  
  max-width:93%;  
  vertical-align: top;
}

.col95{
  box-sizing: border-box;
  min-width:95%;  
  max-width:95%;  
  vertical-align: top;
}

.col96{
  box-sizing: border-box;
  min-width:96%;  
  max-width:96%;  
  vertical-align: top;
}

.col98{
  box-sizing: border-box;
  min-width:98%;  
  max-width:98%;  
  vertical-align: top;
}


.fullWidth{
  box-sizing: border-box;
  min-width:100%;  
  vertical-align: top;
}

.leftSeparator{
  margin-left:2%;
}

.view{  
  box-sizing: border-box;
  width:86vw;  
  vertical-align: top;
}

.showMobile{
  display: none;
}

.showMobileRow{
  display: none;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}


.hideDesktop{
  display:none;
}

.hideScroll{
  overflow:unset;
}

.stickyDesktop{

  position:sticky;

}

.flexDesktop{
  display:flex;
}




@media (max-width: 800px) {

  .scrollMobile{
    overflow-y:auto;
    max-height: 100vh;
  }

  .formRow{

    display: block;
    margin:0 auto;
    width:95%;
  
  }

  .colSm0{
    min-width:0%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm10{
    min-width:10%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }


  .colSm15{
    min-width:15%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm20{
    min-width:20%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm30{
    min-width:30%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm40{
    min-width:40%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm45{
    min-width:45%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm50{
    min-width:50%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm80{
    min-width:80%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm90{
    min-width:90%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm95{
    min-width:95%;
    display: block;    
    margin:0 auto;
    /*
    margin-top:10px;
    */
  }


  .colSm100{
    min-width:100%;  
    display: block;    
  }

  
  .rowm{
    display:inline-block;
  }
  
  
  
  .showMobile{
    display: block;
  }

  .showMobileRow{
    display: inline-block;
  }

  .hideMobile{
    display: none;
  }

  .smTCenter{
    text-align: center;
  }

}

@media (max-width: 550px) {

  .subtitleSize{

    font-size: 1.2rem;

  }


  .visible1{

    display:none;

  }

  .visible2{

    display:block;

  }

  .visible3{

    display:none;

  }

  .labelSize{
    font-size:0.6rem;
  }
  .fieldSize{

    font-size: 0.6rem;
    
  }
  
  .btnIconSize{

    font-size:110%;
    margin:2px;

  }

  .fSize1rem{
    font-size: 1rem;
  }
  
  .fSize2rem{
    font-size: 2rem;
  }
  
  .fSize08rem{
    font-size: 0.8rem;
  }
  
  .scrollDesktop{
    overflow-y: unset;
  }

  .navBar{
    height:60px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
    padding: 0px;
  }

  .iconBrand{
    margin:0;
    margin-top:3px;
    width:27vw;  
    
  }

  .colSeparator{
    display:none;
    max-width:0%;
    max-height:0%;
  }

  .formRow{

    display: block;
    margin:0 auto;
    width:95%;
  
  }

  .smRight{
    float:right;
  }

  .smLeft{
    float:left;
  }

  .smCenter{
    /*text-align:center;*/
    display:block;
    margin:0 auto;
  }
  
  .tSmCenter{
    /*text-align:center;*/
    text-align:center;
  }


  .tSmLeft{
    text-align: left;
  }

  .tSmRight{
    text-align: right;
  }

  .col50{
  }

  .colSm10{
    width:10%;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm20{
    width:20%;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm25{
    width:25%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm30{
    width:30%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm40{
    width:40%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm45{
    width:45%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm48{
    width:48%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm50{
    width:50%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm60{
    width:60%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm70{
    width:70%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm75{
    width:75%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm80{
    width:80%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm90{
    width:90%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm94{
    width:94%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm95{
    width:95%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm99{
    width:99%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm100{
    min-width:100%;  
    display: block;
  }


  .colSmMin10{
    min-width:10%;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin20{
    min-width:20%;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin25{
    min-width:25%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin30{
    min-width:30%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin45{
    min-width:45%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin50{
    min-width:50%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin60{
    min-width:60%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin70{
    min-width:70%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin75{
    min-width:75%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin80{
    min-width:80%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin90{
    min-width:90%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin94{
    min-width:94%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin95{
    min-width:95%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin99{
    min-width:99%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin100{
    min-width:100%;  
    margin:0 auto;   
  }

  .navTitle{
    font-size:1rem;
    
  }

  .jumboText{
    font-size: 1.5rem;
  }
  
  .rowm{
    display:inline-block;
  }
  
  .from0toFull{
    animation-name: from0toFullAnimation;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    
  }
  
  @keyframes from0toFullAnimation {
    0%   {
      height: 0vh;
    }
    
    100%{
      height: 25vh;
      /*max-height:25vh;*/
    }
  }

  

  .hideMobile{
    display: none;
  }

  .scrollMobile{
    overflow-y: auto;
  }

  .titleSize{

    font-size: 1.3rem;
  
  }
  
  .subtitleSize{
  
    font-size: 1.1rem;
  
  }

  .hideStickyMobile{

    position:inherit;
  
  }

  /*Oferta cursos buttons*/
  


}


@media (max-width: 350px) {

  .subtitleSize{

    font-size: 1.6rem;

  }

  .visible1{

    display:none;

  }

  .visible2{

    display:none;

  }

  .visible3{

    display:block;

  }

  .labelSize{
    font-size:0.6rem;
  }
  .fieldSize{

    font-size: 0.6rem;
    
  }

  .btnIconSize{

    font-size:110%;
    margin:2px;

  }

  .fSize1rem{
    font-size: 1rem;
  }
  
  .fSize2rem{
    font-size: 2rem;
  }
  
  .fSize08rem{
    font-size: 0.8rem;
  }

  .scrollDesktop{
    overflow-y: unset;
  }
  
  .navBar{
    height:60px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
    padding: 0px;
  }

  .iconBrand{
    margin:0;
    margin-top:3px;
    width:27vw;  
    
  }

  .colSeparator{
    display:none;
    max-width:0%;
    max-height:0%;
  }

  .formRow{

    display: block;
    margin:0 auto;
    width:95%;
  
  }

  .smRight{
    float:right;
  }

  .smLeft{
    float:left;
  }

  .smCenter{
    /*text-align:center;*/
    display:block;
    margin:0 auto;
  }
  
  .tSmCenter{
    /*text-align:center;*/
    text-align:center;
  }


  .tSmLeft{
    text-align: left;
  }

  .tSmRight{
    text-align: right;
  }

  .col50{
  }

  .colSm10{
    width:10%;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm20{
    width:20%;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm25{
    width:25%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm30{
    width:30%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm40{
    width:40%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm45{
    width:45%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm48{
    width:48%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm50{
    width:50%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm60{
    width:60%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm70{
    width:70%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm75{
    width:75%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm80{
    width:80%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm90{
    width:90%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm94{
    width:94%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm95{
    width:95%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm99{
    width:99%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSm100{
    min-width:100%;
    display: block;   
  }

  .colSmMin10{
    min-width:10%;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin20{
    min-width:20%;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin25{
    min-width:25%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin30{
    min-width:30%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin45{
    min-width:45%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin50{
    min-width:50%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin60{
    min-width:60%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin70{
    min-width:70%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin75{
    min-width:75%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin80{
    min-width:80%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin90{
    min-width:90%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin94{
    min-width:94%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin95{
    min-width:95%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin99{
    min-width:99%;
    margin:0 auto;
    margin-top:10px;
  }

  .colSmMin100{
    min-width:100%;  
    margin:0 auto;   
  }

  .navTitle{
    font-size:1rem;
    
  }

  .jumboText{
    font-size: 1.5rem;
  }
  
  .rowm{
    display:inline-block;
  }
  
  .from0toFull{
    animation-name: from0toFullAnimation;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    
  }
  
  @keyframes from0toFullAnimation {
    0%   {
      height: 0vh;
    }
    
    100%{
      height: 25vh;
      /*max-height:25vh;*/
    }
  }

  

  .hideMobile{
    display: none;
  }

  .scrollMobile{
    overflow-y: auto;
  }

  .titleSize{

    font-size: 1.3rem;
  
  }
  
  .subtitleSize{
  
    font-size: 1.1rem;
  
  }

  .hideStickyMobile{

    position:inherit;
  
  }
  /*Oferta cursos buttons*/
  


}

/*HEIGHTS*/
.midHeight{
  min-height: 60vh;
}

.fullHeight{
  min-height: 100vh;
  max-height: 100vh;

}

/*DISPLAY*/

.block{
  display:block;
}

.row{
  display: inline-block;
}

/*FLOATS*/
.left{
  float:left;
}

.right{
  float:right;
}

/*GLASS*/
.glass{
  background:rgb(47, 59, 73);  
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  min-height: 50vh;
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;    
  border: 1px solid rgba(255,255,255,0.18);

}
.glass1{
    
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  border-radius: 10px;
  padding:5px;
  border: 1px solid rgba(255,255,255,0.18);

}


.glass2{
    
  background: rgb(220, 221, 238, 0.8);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  border-radius: 10px;
  padding:10px;
  border: 1px solid rgba(255,255,255,0.18);

}

/*ICONS*/
.iconContainer{
  width:90%;
  margin:10px auto;
  text-align:center;  
}

.iconBrand{
  width:5vw;
  height:6vw;
  margin:0 auto;
}
/*DIVIDERS*/
.dividerWhite{

  padding-bottom:3px;
  border-bottom: solid 3px var(--white);

}

.pageContainer{

  margin:0 auto;
  margin-top:10px;
  padding: 5px;
  /*border-radius: 5px;*/
  min-height:85vh;
  width:98%;
  
  
  /*
  border-radius: 10px;  
  border: 1px solid rgba(255,255,255,0.18);*/
  /*background: rgba(255,255,255,0.25); */
  
  /*background:rgb(47, 59, 73);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);    
  */     
}

/*FREESPACES*/

.bottomSpace{
  margin-bottom:30px;
}

.separator{

  width:100%;
  display:block;
  min-height:30px;

}


.gradientBackground{
  background-image: url(../img/gradient2.png);
  background-size:100% 100%;
  max-height: 10vh;
}

.gradientOrange{

  background: linear-gradient(45deg,rgba(3, 176, 211, 0) 18%, rgba(245,130,32,1) 31%, rgba(245,130,32,1) 77%, rgba(0, 212, 255, 0) 90%);

  /*background-image: linear-gradient(-45deg, rgba(245,130,32,0.3) 30%, rgba(245,130,32,1) 40%);*/
    /*background-color: white;
    background: rgb(245,130,32);
    */
    color: white;
}

.gradientColor{
  background-color: #08AEEA;
  background-image: linear-gradient(315deg, #08AEEA 0%, #2AF598 100%);
}

.gradientColor:nth-child(2n+1){
  background-color: #08aeea;
  background-image: linear-gradient(135deg, #2AF598 25%, #FFE32C 100%);
}

.gradientColor:nth-child(3){
  background-color: #FFE53B;
  background-image: linear-gradient(135deg, #FFE53B 0%, #FF2525 74%);
}

.gradientColor:nth-child(4){
  background-color: #ff1919;
  background-image: linear-gradient(135deg, #ff1919 0%, #B721FF 100%);

}

.gradientColor:nth-child(5){
  background-color: #b721ff;
  background-image: linear-gradient(135deg, #b721ff 0%, #2BFF88 100%);

}

.gradientColor:nth-child(6){
  background-color: #2bff88;
  background-image: linear-gradient(135deg, #2bff88 0%, #b5fffc 100%);

}

.gradientColor2{
  background-color: #FFDEE9;
  background-image: linear-gradient(315deg, #FFDEE9 0%, #B5FFFC 100%);
}


.title{

  font-family: 'fedrasansbook';
  font-size: 1.5rem;  

}




.titleBlack{

  font-family: 'fedrasansbook';
  font-size: 1.5rem;
  color:black;

}


.titleBlueDark{

  font-family: 'fedrasansbook';
  font-size: 1.5rem;
  color:var(--blueDark);

}


.subtitle{

  font-family: 'fedrasansbook';
  font-size: 1rem;
  color:white;

}

.subtitleBlack{

  font-family: 'fedrasansbookitalic';
  font-size: 1.2rem;
  color:black;
  margin-top:5px;
  margin-bottom:5px;

}


.subtitleBlueDark{

  font-family: 'fedrasansbookitalic';
  font-size: 1.2rem;
  color:var(--blueDark);
  margin-top:5px;
  margin-bottom:5px;

}

.lightModePageBackground{
  /*background-color: white;*/
  background: #8e9eab;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #eef2f3, #ccd0d1);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #eef2f3, #ccd0d1); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*
  background: #8e9eab;
  background: -webkit-linear-gradient(to bottom, #eef2f3, #8e9eab);
  background: linear-gradient(to bottom, #eef2f3, #8e9eab);
  */



  
  color: black;
}

.lightModeContainerBackground{
  background-color:var(--white);
  color:black;
}

.lightModeInput{
  background-color: white;
  color:black;
}


.darkModePageBackground{
  background-color: var(--grayDark);
  color: white;
}

.darkModeContainerBackground{
  background-color:var(--grayLight);
  color:black;
}

.darkModeInput{
  background-color: rgba(150,150,150,0.20);
  color:white;
}

.input{

  width:97%;
  line-height: 25px;
  border-radius: 5px;
  background-color: white;
  border:solid 1px rgb(220,220,220);
  outline: none;
  margin-bottom: 10px;
  font-size: 0.85rem;

}

.input:hover{
  outline: 1px solid var(--orange);
}


.inputSelect{

  width:101.169%;
  min-height: 29px;
  border-radius: 5px;
  background-color: white;
  border:solid 1px rgb(220,220,220);
  outline: none;
  margin-right:0px;
  margin-bottom: 10px;

}

.inputSelect:hover{
  outline: 1px solid var(--orange);
}


.inputSelectCorrect{
  background:white;
  vertical-align: top;
  width:97%;
  min-height: 33px;
  font-size: 0.85rem;
  
  /*background-color: rgba(19, 132, 150,0.60);*/
  
  border:solid 1px rgb(220,220,220);
  border-bottom:solid 5px rgb(19, 132, 150);
  border-radius: 5px;
  outline: none;
  margin-right:0px;
  margin-bottom:0px;
  

}


.inputSelectCorrect::placeholder {
  color: var(--correct);
  font-size: 1rem;
}


.inputSelectCorrect:hover{
  outline: 1px solid var(--orange);
}


.inputCorrect{
  vertical-align: top;
  width:97%;
  line-height: 25px;
  font-size: 0.85rem;
  /*background-color: rgba(19, 132, 150,0.60);*/
  border:solid 1px rgb(220,220,220);
  border-bottom:solid 5px rgb(19, 132, 150);
  border-radius: 5px;
  outline: none;
  margin-bottom: 3px;

}

.inputCorrect:hover{
  outline: 1px solid var(--orange);
}


.inputError{
  vertical-align: top;
  width:97%;
  line-height: 25px;
  font-size: 0.85rem;
  
  border:solid 1px rgb(220,220,220);
  border-bottom:solid 5px rgb(255, 0, 0);
  border-radius: 5px;
  outline: none;
  margin-bottom: 3px;

}

.inputError:hover{
  outline: 1px solid var(--orange);
}


.fontError{
  color:var(--error);
}

.fontCorrect{
  color:var(--correct);
}

.fontBlueDark{
  color:var(--blueDark);
}

.fontBlue{
  color:var(--blue);
}

.fontWhite{
  color:var(--white);
}
.fontBlack{
  color:black;
}

.scrollPanel{

  max-height:50vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top:20px;
  padding-left: 0px;
  padding-right: 0px;
  

}

.formRow{

  display: block;
  margin:0 auto;
  width:95%;

}


.listCard{
  padding: 5px;
  display:block;
  width:95%;
  margin: 0 auto;
  margin-top:5px;  
  color:white;
  border-radius:5px;

}

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

.modal{
  display:block;
  margin:0 auto;
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  width:80vw;
  min-height:60vh;
  background: rgba(255,255,255,0.80);    
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  border-radius: 10px;
  border: solid 2px rgba(0,0,0,0.30);
  overflow: hidden;

}



/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}