/*COLORS*/

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

    --advertencia: rgba(255, 228, 209, 0.9);
    --blueDaltor: rgb(10,32,135);
    --redDaltor: rgb(237,23,33);

    --metalBlueBg: #224c98;
    --metalGray:rgb(37, 47, 60);

    --gris:#384951;
    --amarillo:#d7b516;
    --verde:#63bb6c;
    --rojo:#f65655;
    --vino:#3A0603;

    --naranja:#f87102b3;
    
    --blue:#27338E;
    --red:#ED1C24;
    --yellow:#E5C95A;

    --azulClaro:#4D58FA;
    --gold:rgb(202, 182, 89);

    --bgDarkGray:rgb(240, 240, 240);


    --liceoWhite:#rgb(228,228,228);
    --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: 'lato';


  }


  
.textGradient {
  --_space: ;

  /*
  #d90234 ,
    #9f1728 15%,
    #69191d 30%,
    #371312 55%,
    #000000 100%
  */
  /*
  background: linear-gradient(135deg, #ffffc4 0.000%, #ff6164 50.000%, #b00012 100.000%);
  */

  background-image: linear-gradient(
    180deg var(--_space),
    #ffffc4 ,
    orange 35%,
    #ff6164 50%,
    #b00012 80%,
    #000000 100%
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports (background-image: linear-gradient(in oklch, #000, #fff)) {
  .text-gradient {
    --_space: in oklch;
  }
}


  @keyframes animate{

    0%, 90%{
      opacity: 1;
    }

    100%{

      opacity: 0;
      transform:
      translateZ(0vmin)
      rotateY(90deg)
      rotateX(var(--rx))
      translateZ(var(--x))
      scaleX(6);

    }

  }


  .mainBackground{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*background:white;*/
    opacity: 1;
    /*background:#000;*/
    
    /*overflow: hidden;*/

    
    /*
    background-image: 
    radial-gradient(circle at 40% 50%, #610b4b 0%, #a30d8a00 40%),
    radial-gradient(circle at 65% 60%, #420a50 0%, #580e7500 40%),
    radial-gradient(circle at 40% 60%, #076066 0%, #17777700 45%);
    background-blend-mode: screen;
    */

    background-image: 
    radial-gradient(circle at 40% 50%, #bb0707 0%, #29046400 40%),
    radial-gradient(circle at 65% 60%, #69050e 0%, #30059600 40%),
    radial-gradient(circle at 40% 60%, #ebdb06 0%, #66570200 45%);
    background-blend-mode: screen;
    

  }

  .star{

    
    width:1.5vmin;
    height: 1.5vmin;
    
    
    /*
    min-width: 15dvw;
    min-height: 15dvh;
    background: #fff;
    */

    
    transform:
    translateZ(-100vmin)
    rotateY(90deg)
    rotateX(var(--rx))
    translateZ(var(--x))
    scaleX(1);

    position: absolute;
    top: 0%;
    left: 0%;
    animation: animate 5s infinite ease-in;
    background: #fff;
    box-shadow: 0 0 20px rgb(10,239,255);
    

  }



  .css-selector {
    background: linear-gradient(270deg, #663024, #245a66, #66245b);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
  }

  @-webkit-keyframes AnimationName {
      0%{background-position:19% 0%}
      50%{background-position:82% 100%}
      100%{background-position:19% 0%}
  }
  @-moz-keyframes AnimationName {
      0%{background-position:19% 0%}
      50%{background-position:82% 100%}
      100%{background-position:19% 0%}
  }
  @keyframes AnimationName {
      0%{background-position:19% 0%}
      50%{background-position:82% 100%}
      100%{background-position:19% 0%}
  }

  .metalGradient {
  background: #D5DEE7;
  background: linear-gradient(
    to right,
    #D5DEE7,#E8EBF2,#E2E7ED
  );
  }

  

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

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

  .whiteText{
    color:white;
  }

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

  .verdeBtn:hover{
    background-color:var(--correct);
    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;
  }

  .grayDark{

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

  }


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

  .naranja{
    background-color: var(--naranja);
    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-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*/

.aldrich{

  font-family: 'aldrich';

}

.lato{

  font-family: 'lato';

}

.doto{

  font-family: 'doto';

}

.rationale{
  font-family: 'rationale';

}

.geo{
  font-family: 'geo';
}

.quicksand{
  font-family: 'quicksand';
}

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

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

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


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


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

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

@font-face{
  font-family: 'lato-bold';
  src: url('../fonts/Lato-Bold.ttf');
}

@font-face{
  font-family: 'lato-light';
  src: url('../fonts/Lato-Light.ttf');
}

@font-face{
  font-family: 'lato-italic';
  src: url('../fonts/Lato-Italic.ttf');
}

@font-face{
  font-family: 'lato-thin';
  src: url('../fonts/Lato-Thin.ttf');
}


/*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: 3px;
}

/*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;
  cursor:pointer;
}

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


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



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

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

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

.btnBlueDaltor:hover{
  font-family: lato;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--gold);  
}

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

.btnRedDaltor:hover{
  font-family: lato;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--gold);  
}


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


.btnGray{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  vertical-align: middle;
  color: var(--naranja);
  background-color: var(--grayLight);
  border:solid 1px white;
  padding:-1px;
}

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


.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{

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


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


.flexSpace{

  display: flex;
  justify-content: space-between;

}

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

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

.col8{
  box-sizing: border-box;
  min-width:8%;
  max-width:8%;
  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%;
  max-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%;
  max-width:22%;
  vertical-align: top;
}

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

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

.col24{
  box-sizing: border-box;
  min-width:24%;
  max-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;
}

.col32{
  box-sizing: border-box;
  min-width:32%;
  max-width:32%;
  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;
}

.col38{
  box-sizing: border-box;
  min-width:38%;
  max-width:38%;
  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;
}

.col78{
  box-sizing: border-box;
  min-width:78%;
  max-width:78%;
  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;
}

.col94{
  box-sizing: border-box;
  min-width:94%;  
  max-width:94%;
  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;
}

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


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

.leftSeparator{
  margin-left:2%;
}

.fullView{  
  box-sizing: border-box;
  width:100dvw;
  vertical-align: top;
}

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


/*HEIGHTS*/

.minHeight1500{
  min-height: 2500px;
}

.minHeight95{
  min-height: 98dvh;
}



.height10{
  min-height: 10dvh;
  max-height: 10dvh;
}

.height20{
  min-height: 20dvh;
  max-height: 20dvh;
}

.height30{
  min-height: 30dvh;
  max-height: 30dvh;
}

.height40{
  min-height: 40dvh;
  max-height: 40dvh;
}

.height50{
  min-height: 50dvh;
  max-height: 50dvh;
}

.midHeight{
  min-height: 60dvh;
}

.height70{
  min-height: 70dvh;
  max-height: 70dvh;
}

.height75{
  min-height: 75dvh;
  max-height: 75dvh;
}

.height78{
  min-height: 78dvh;
  max-height: 78dvh;
}

.height79{
  min-height: 79dvh;
  max-height: 79dvh;
}

.height795{
  min-height: 79.5dvh;
  max-height: 79.5dvh;
}

.height80{
  min-height: 80dvh;
  max-height: 80dvh;
}

.height85{
  min-height: 85dvh;
  max-height: 85dvh;
}

.height88{
  min-height: 88dvh;
  max-height: 88dvh;
}

.height90{
  min-height: 90dvh;
  max-height: 90dvh;
}

.height95{
  min-height: 95dvh;
  max-height: 95dvh;
}

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

}






/*DISPLAY*/

.block{
  display:block;
}

.row{
  display: inline-block;
}

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

.right{
  float:right;
}

.imgCover{
  background-color: white;
}


.imgCover:after{
  content: "";
  position: absolute;
  inset: -0.2px;
  background: linear-gradient(90deg, #07aeea 0.000%, #2bf598 100.000%);
  filter: blur(10.5px);
  z-index: 0;
}


.imgCover:hover::after {
  content: "";
  position: absolute;
  inset: -0.2px;
  background: linear-gradient(90deg, #07aeea 0.000%, #2bf598 100.000%);
  filter: blur(10.5px);
  z-index: -1;
}



/*GLASS*/
.glass{
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;
  border: 1px solid rgba(255,255,255,0.18);

}

.glassSimple{
  opacity: 0.8;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;    
  border: 1px solid rgba(255,255,255,0.18);

}

.glassSimple:hover::after {
  content: "";
  position: absolute;
  inset: -0.2px;
  /*
  background: linear-gradient(to bottom right,
          rgb(0, 255, 81), rgb(255, 213, 0));
  background: linear-gradient(135deg, #ffffc4 0.000%, #ff6164 50.000%, #b00012 100.000%);
  background: linear-gradient(135deg, #ffffc4 0.000%, #ff6164 100.000%,);
  */
  background: linear-gradient(135deg, #ffffc4 0.000%, #ff6164 50.000%, #b00012 100.000%);
  filter: blur(10.5px);
  z-index: -1;
}


.glassWarm{
  opacity: 0.8;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  background: linear-gradient(135deg, #ffffc4 0.000%, #ff6164 50.000%, #b00012 100.000%);
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;    
  border: 1px solid rgba(255,255,255,0.18);
}

.glassWarm:hover::after {
  content: "";
  position: absolute;
  inset: -0.2px;
  background: linear-gradient(135deg, #ffffc4 0.000%, #ff6164 50.000%, #b00012 100.000%);
  filter: blur(10.5px);
  z-index: -1;
}

.glassCool{
  opacity: 0.8;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  background: linear-gradient(90deg, #07aeea 0.000%, #2bf598 100.000%);
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;
  border: 1px solid rgba(255,255,255,0.18);
}

.glassCool:hover::after {
  content: "";
  position: absolute;
  inset: -0.2px;
  background: linear-gradient(90deg, #07aeea 0.000%, #2bf598 100.000%);
  filter: blur(10.5px);
  z-index: -1;
}


.glassPurple{
  opacity: 0.8;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  background: linear-gradient(45deg, #4159d0 0.000%, #c84fc0 50.000%, #ffcd70 100.000%);
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;    
  border: 1px solid rgba(255,255,255,0.18);
}

.glassPurple:hover::after {
  content: "";
  position: absolute;
  inset: -0.2px;
  background: linear-gradient(45deg, #4159d0 0.000%, #c84fc0 50.000%, #ffcd70 100.000%);
  filter: blur(10.5px);
  z-index: -1;
}


.glassLight{
  opacity: 0.8;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  background: linear-gradient(45deg, #8ec5fc 0.000%, #8dd3ff 25.000%, #a1d8ff 50.000%, #c1d2ff 75.000%, #e0c3ff 100.000%);
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;    
  border: 1px solid rgba(255,255,255,0.18);
}

.glassLight:hover::after {
  content: "";
  position: absolute;
  inset: -0.2px;
  z-index: -1;
  background: linear-gradient(45deg, #8ec5fc 0.000%, #8dd3ff 25.000%, #a1d8ff 50.000%, #c1d2ff 75.000%, #e0c3ff 100.000%);
  filter: blur(10.5px);
}



.glass1{
    
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.43);

  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.43);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.43);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.43); 
  
  border-radius: 5px;
  padding:5px;
  border: 1px solid rgba(255,255,255,0.18);
  border-left: 15px solid var(--blue);

}


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

}

.glass3{
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;
  
  border-left: 3px solid rgba(248, 113, 2, 0.7);
  border-bottom: 3px solid rgba(248, 113, 2, 0.7);

}

.glass4{
  background: none;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  margin: 0 auto;
  /*
  border-radius: 10px;
  */
  padding:10px;
  
  border-left: 3px solid rgba(248, 113, 2, 0.7);
  border-bottom: 3px solid rgba(248, 113, 2, 0.7);

}

.glass5{
  background: none;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(30,30,30,0.37);
  margin: 0 auto;
  /*
  border-radius: 10px;
  */
  padding:10px;
  
  border-left: 3px solid rgba(248, 113, 2, 0.7);
  border-top: 3px solid rgba(248, 113, 2, 0.7);

}

/*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;

}

.gradientWarm{
  background: linear-gradient(135deg, #ffffc4 0.000%, #ff6164 50.000%, #b00012 100.000%);
}

.gradientWarm div strong{
  color:orangered;
}

.gradientWarm div label{
  color:black;
}

.gradientCool{
  background: linear-gradient(90deg, #07aeea 0.000%, #2bf598 100.000%);
}

.gradientPurple{
  background: linear-gradient(45deg, #4159d0 0.000%, #c84fc0 50.000%, #ffcd70 100.000%);
}

.gradientLight{
  background: linear-gradient(45deg, #8ec5fc 0.000%, #8dd3ff 25.000%, #a1d8ff 50.000%, #c1d2ff 75.000%, #e0c3ff 100.000%);
}



.gradientBlackToBlue{
  background: black;
  background-image: linear-gradient(-60deg, #00396a 0.000%, black 50.000%);
}

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

.gradientOrange{
  background: rgb(245,130,32);
}

.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: 'lato';
  font-size: 1.5rem;  

}




.titleBlack{

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

}


.titleBlueDark{

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

}


.subtitle{

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

}

.subtitleBlack{

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

}


.subtitleBlueDark{

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

}


.headerText{
  font-size: 450%;
}

.headerTitleText{
  font-size: 325%;
}


.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: #FFFFFF;
  background: linear-gradient(120deg, rgba(255, 255, 255, 1) 0%, rgba(120, 120, 120, 1) 100%);
  border:solid 1px rgb(220,220,220);
  border-bottom:solid 5px rgb(120, 120, 120);
  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;
  transform: skew(-20deg);
  background-color: rgba(220,220,220,0.6);
  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;
  transform: skew(20deg);
  color:white;
  background: #138496;
  background: linear-gradient(90deg, rgba(19, 132, 150, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(255, 255, 255, 1) 100%);
  border:solid 1px rgb(220,220,220);
  border-bottom:solid 5px #138496;
  /*border-radius: 5px;*/
  outline: none;
  margin-bottom: 3px;

}

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

input[type="text"] {
  transform: skewX(-20deg); /* Skews the text along the X-axis by 10 degrees */
  padding-left:10px;
  /* You can also use skewY() for a vertical skew, or skew(Xdeg, Ydeg) for both */
}

input[type="number"] {
  transform: skewX(-20deg); /* Skews the text along the X-axis by 10 degrees */
  padding-left:10px;
  
  /* You can also use skewY() for a vertical skew, or skew(Xdeg, Ydeg) for both */
}

select {
  transform: skewX(20deg); /* Skews the text along the X-axis by 10 degrees */
  padding-left:10px;
  /* You can also use skewY() for a vertical skew, or skew(Xdeg, Ydeg) for both */
}

.inputError{
  vertical-align: top;
  width:97%;
  line-height: 25px;
  font-size: 0.85rem;
  transform: skew(20deg);
  color:white;
  background: #FF0000;
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(253, 29, 29, 1) 30%, rgba(252, 176, 69, 1) 100%);
  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;}


@media (max-width: 800px) {

  .headerText{
    font-size: 350%;
  }

  .headerTitleText{
    font-size: 350%;
  }

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

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

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

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

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

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

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

  .blockm{
    display:block;
  }

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

  .showMobileRow{
    display: inline-block;
  }

  .hideMobile{
    display: none;
  }

  .smTCenter{
    text-align: center;
  }

}

@media (max-width: 550px) {

  .headerText{
    font-size: 350%;
  }

  .headerTitleText{
    font-size: 350%;
  }

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

  .colSm30{
    width:30%;
    margin:0 auto;
    
  }
  .colSm33{
    width:33%;
    margin:0 auto;
    
  }

  .colSm40{
    width:40%;
    margin:0 auto;
    
  }

  .colSm45{
    width:45%;
    margin:0 auto;
    
  }

  .colSm48{
    width:48%;
    margin:0 auto;
    
  }

  .colSm50{
    width:50%;
    margin:0 auto;
    
  }

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

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

  .colSm90{
    width:90%;
    margin:0 auto;    
  }

  .colSm91{
    min-width:91%;
    width:91%;
    max-width:91%;
    margin:0 auto;    
  }

  .colSm92{
    min-width:92%;
    width:92%;
    max-width:92%;
    margin:0 auto;    
  }

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

  .colSm95{
    min-width:95%;
    display:block;
    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;
  }

  .blockm{
    display:block;
  }
  
  
  .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;
    max-height: 95vh;
  }

  .titleSize{

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

  .hideStickyMobile{

    position:inherit;
  
  }

  /*Oferta cursos buttons*/

  /*HEIGHTS*/

  .minHeight1500{
    min-height: 1500px;
  }

  .minHeight95{
    min-height: 95dvh;
  }


  .heightSm15{
    min-height: 15dvh;
    max-height: 15dvh;
  }

  .heightSm20{
    min-height: 20dvh;
    max-height: 20dvh;
  }


  .heightSm30{
    min-height: 30dvh;
    max-height: 30dvh;
  }

  .heightSm40{
    min-height: 40dvh;
    max-height: 40dvh;
  }

  .heightSm50{
    min-height: 50dvh;
    max-height: 50dvh;
  }

  .midHeightSm{
    min-height: 60dvh;
  }

  .heightSm70{
    min-height: 70dvh;
    max-height: 70dvh;
  }

  .heightSm75{
    min-height: 75dvh;
    max-height: 75dvh;
  }

  .heightSm78{
    min-height: 78dvh;
    max-height: 78dvh;
  }

  .heightSm79{
    min-height: 79dvh;
    max-height: 79dvh;
  }

  .heightSm795{
    min-height: 79.5dvh;
    max-height: 79.5dvh;
  }

  .heightSm80{
    min-height: 80dvh;
    max-height: 80dvh;
  }

  .heightSm85{
    min-height: 85dvh;
    max-height: 85dvh;
  }

  .heightSm88{
    min-height: 88dvh;
    max-height: 88dvh;
  }

  .heightSm90{
    min-height: 90dvh;
    max-height: 90dvh;
  }

  .heightSm95{
    min-height: 95dvh;
    max-height: 95dvh;
  }

  .fullHeightSm{
    /*
    min-height: 100dvh;
    max-height: 100dvh;
    */
    min-height: 100%;
  }
  


}

@media (max-width: 350px) {

  .headerText{
    font-size: 350%;
  }

  .headerTitleText{
    font-size: 350%;
  }


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

  .colSm85{
    min-width:85%;
    display: block;    
    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{
    min-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;
  }

  .blockm{
    display:block;
  }
  
  .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;
    max-height: 95vh;
  }

  .titleSize{

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

  .hideStickyMobile{

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

  /*HEIGHTS*/

  .minHeight1500{
    min-height: 1500px;
  }

  .minHeight95{
    min-height: 98dvh;
  }

  .heightSm15{
    min-height: 15dvh;
    max-height: 15dvh;
  }

  .heightSm20{
    min-height: 20dvh;
    max-height: 20dvh;
  }

  .heightSm30{
    min-height: 30dvh;
    max-height: 30dvh;
  }

  .heightSm40{
    min-height: 40dvh;
    max-height: 40dvh;
  }

  .heightSm50{
    min-height: 50dvh;
    max-height: 50dvh;
  }

  .midHeightSm{
    min-height: 60dvh;
  }

  .heightSm70{
    min-height: 70dvh;
    max-height: 70dvh;
  }

  .heightSm75{
    min-height: 75dvh;
    max-height: 75dvh;
  }

  .heightSm78{
    min-height: 78dvh;
    max-height: 78dvh;
  }

  .heightSm79{
    min-height: 79dvh;
    max-height: 79dvh;
  }

  .heightSm795{
    min-height: 79.5dvh;
    max-height: 79.5dvh;
  }

  .heightSm80{
    min-height: 80dvh;
    max-height: 80dvh;
  }

  .heightSm85{
    min-height: 85dvh;
    max-height: 85dvh;
  }

  .heightSm88{
    min-height: 88dvh;
    max-height: 88dvh;
  }

  .heightSm90{
    min-height: 90dvh;
    max-height: 90dvh;
  }

  .heightSm95{
    min-height: 95dvh;
    max-height: 95dvh;
  }

  .fullHeightSm{
    min-height: 100dvh;
    max-height: 100dvh;
  }

}