/*COLORS*/

:root{
  /*
  --blueDark:#242d4c;
  --orange: #FF8E45;
  */
  /*--blueDarkOriginal:#204376;
  */

  --grisCartaDocumentos:#606060;

  --blueDark2:#1955A9;
  --blueDark3:#2d61ac;
  --blueDark:#0580CC;
  
  --blueOriginal: #025BAD;
  --blue: #2779c4;
  --blue2: #cde7ff;
  
  --orange: #f58220;
  --gray:#e5e6e7;
  --orangeDark: #994721;
  --blueLight: #099FFF;
  --fullWhite:#FFFFFF;
  --white:#EEEEEE;
  --whiteDark:#CCCCCC;
  --correct:rgb(19, 132, 150);
  --correctDark:#005577;
  --default:#4a4a4a;
  --defaultDark:#252525;
  --comment:orange;
  --commentDark:orangered;
  --error:rgb(255, 0, 0);
  --errorDark:#c82333;
  font-family: 'fedrasansbook';


}

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

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

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

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

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

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

  .blueDark{
    background-color: var(--blueDark);
    color: white;
  }
  .blue{
    background-color: var(--blue);
    color: white;
  }
  .orange{
    background-color: var(--orange);
    color: black;
  }
  .gray{
    background-color: var(--gray);
    color: black;
  }
  .orangeDark{
    background-color: var(--orangeDark);
    color: black;
  }
  .blueLight{
    background-color: var(--blueLight);
    color: black;
  }
  .fullWhite{
    background-color: white;
    color: black;
  }
  .white{
    background-color: var(--white);
    color: black;
  }
  .whiteDark{
    background-color: var(--whiteDark);
    color: black;
  }

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

  .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: black;
  }
  .error{
    background-color: var(--error);
    color: white;
  }
  .errorDark{
    background-color: var(--errorDark);
    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);
}


.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: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

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

/*Borders*/

.rBorder{
  border-radius: 5px;
}

/*BUTTONS*/

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

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




.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);
}


.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(--comment);
}


.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);
}


.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);
}


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

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


.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);
}

.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;
}


/*GradientBackground*/

.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;
}

/*DIRECTION*/

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

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

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


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

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

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

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

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

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

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

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

.col39{
  box-sizing: border-box;
  width:39%;  
  vertical-align: top;
}    

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

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

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

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

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

.col60{
  box-sizing: border-box;
  width:60%;
  vertical-align: top;
}

.col65{
  box-sizing: border-box;
  width:65%;
  vertical-align: top;
}

.col70{
  box-sizing: border-box;
  width:70%;
  vertical-align: top;
}

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


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

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

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

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

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

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

.leftSeparator{
  margin-left:2.5%;
}

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



/*HEIGHTS*/

.h25{
  min-height: 25%;
  max-height: 25%;
}

.h50{
  min-height: 50%;
  max-height: 50%;
}

.h75{
  min-height: 75%;
  max-height: 75%;
}

.h100{
  height: 100%;
  max-height: 100%;
}

.midHeight{
  min-height: 70vh;
}


.fullHeight{

  min-height: 100vh;

}

/*DISPLAY*/

.block{
  display:block;
}

.row{
  display: inline-block;
}

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

.right{
  float:right;
}

/*Square*/

.square{
  margin-right:5px;
  font-size: 175%;
  vertical-align: top;
  color: var(--blue);

}

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






/*GLASS*/
.glass{
    
  background: rgba(255,255,255,0.30);    
  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);

}

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

.iconBrand{
  width:15vw;  
  margin:5px;  
}
/*DIVIDERS*/

.divider10{

  padding-bottom:3px;  
  margin-top: 3px;
  margin-bottom: 3px;
  min-height:10px;

}

.dividerBlack{

  padding-bottom:3px;
  border-bottom: solid 3px var(--defaultDark);
  margin-top: 3px;
  margin-bottom: 3px;
  min-height:3px;

}

.dividerWhite{

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

}

.pageContainer{

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

/*FREESPACES*/

.bottomSpace{
  margin-bottom:30px;
}

.separator{

  width:0%;
  display:none;
  min-height:30px;

}

.colSeparator{
  display:inline-block;
  width:2.5%;
  background:black;
  min-height: 2.5px;
}


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

.gradientBackground2{
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  max-height: 10vh;

}

.title{

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

}

.titleBlack{

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

}


.subtitle{

  font-family: 'fedrasansbookitalic';
  font-size: 1.5rem;
  color:white;
  margin-top:5px;
  margin-bottom:5px;

}

.subtitleBlack{

  font-family: 'fedrasansbookitalic';
  font-size: 1.5rem;
  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;

}

.overflowHid{
  overflow:hidden;
}

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

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


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

}

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


.inputCorrect{
  vertical-align: top;
  width:99%;
  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:99%;
  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);
}




.input::placeholder {
  color: var(--default);
  font-size: 1rem;
}

.inputSelect{
  vertical-align: top;
  width:100%;
  min-height: 29px;
  font-size: 0.85rem;
  
  background:white;
  /*background-color: rgba(150,150,150,0.20);*/  
  border:solid 1px rgb(220,220,220);
  border-radius: 5px;
  outline: none;
  margin-right:0px;
  margin-bottom: 3px;

}


.inputSelect::placeholder {
  color: var(--default);
  font-size: 1rem;
}


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



.inputSelectCorrect{
  background:white;
  vertical-align: top;
  width:100%;
  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);
}



.scrollPanel{

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

}

.blockRow{
  width:100%;
  display:block;
  min-height:32px;
}

.formRow{

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

}

.formCol{

  display: inline-block;
  margin:0 auto;  

}


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

}

.modal{
  display:block;
  margin:0 auto;
  position:fixed;
  top:0;
  left:0;
  z-index:200;
  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;

}

/*Padding*/

.padd10{
  padding:10px;
}

/*Transitions*/
.transShort{
  transition: background-color 2s ease-out;
}

.fromWhiteToBlueDark{
  animation-name: fromWhiteToBlueDarkAnimation;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes fromWhiteToBlueDarkAnimation {
  0%   {
    background-color: var(--white);
  }
  
  100%{    
    /*background-color: var(--blue);*/
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  }
}

.fromBlueDarkToWhite{
  animation-name: fromBlueDarkToWhiteAnimation;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}


@keyframes fromBlueDarkToWhiteAnimation {
  0%{    
    background-color: var(--blue);
  }
  100%{
    background-color: var(--white);
  }
}

.navBar{
  height:80px;
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  z-index:100;
}

.navTitle{
  font-size:1.7rem;
  
}

@media (min-width: 851px) {

  .hideDesktop{
    display:none;
  }

}


@media (max-width: 850px) {
  
  .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%;
  
  }

  .colSm10{
    min-width:10%;
    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;
  }

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

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

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

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

  .navTitle{
    font-size:1rem;
    
  }
  
  .rowm{
    display:inline-block;
  }  

  .hideMobile{
    display: none;
  }


}