*, *::before, *::after {
 font-size               : 1em;
 box-sizing              : border-box;
 margin                  : 0;
 padding                 : 0;
 outline                 : none;
 vertical-align          : middle;
 text-rendering          : optimizeLegibility;
 -webkit-font-smoothing  : antialiased;
 -moz-osx-font-smoothing : grayscale;
}

body {
 margin      : 0;
 padding     : 0;
 min-height  : 100vh;
 font-family : var(--fontFamilyRegular);
}

h2, p {
 margin : 10px;
}

select {
 color            : var(--blanco);
 min-width        : 20%;
 cursor           : pointer;
 padding          : 15px;
 border           : 1px solid var(--quaternaryColor);
 padding          : 4px 5px !important;
 border-radius    : 3px;
 background-color : var(--quaternaryColor);
}

.inputMacAddress {
 color            : var(--negro);
 width            : 80%;
 border           : 1px solid var(--grisA7);
 padding          : 4px 5px !important;
 font-size        : .9em;
 text-align       : center;
 line-height      : 25px;
 border-radius    : 3px;
 background-color : var(--blanco);
}

.inputMacAddress:hover, .inputMacAddress:focus, select:hover {
 border : 1px solid var(--borderMacAddress);
}

/*
 Esto crea un contenedor general de todo del 100%.
*/
#contenedorPrincipal {
 position         : absolute;
 width            : 100%;
 height           : 100vh;
 overflow         : hidden;
 background-color : var(--primaryColor);
}

.bienvenido {
 color          : var(--tertiaryColor);
 padding-top    : 5px;
 font-family    : var(--fontFamilyMedium);
 letter-spacing : 2px;
}

.bienvenida {
 color          : var(--negro);
 text-align     : center;
 font-family    : var(--fontFamilyLight);
 letter-spacing : 1px;
}

.top, .bottom {
 position         : absolute;
 top              : 0;
 left             : 0;
 width            : 100vw;
 height           : 50vh;
 opacity          : 0;
 z-index          : 10;
 background-color : var(--primaryColor);
}

.top {
 /*border-bottom : 1px solid #CCC;*/
}

.bottom {
 top: 50vh;
 /*border-top : 1px solid #CCC;*/
}

.top img, .bottom img {
 position : absolute;
 left     : 0;
 right    : 0;
 bottom   : 0;
 margin   : 0 auto;
 width    : 294px;
 height   : 146px;
}

.bottom img {
 top    : 0;
 height : 148px;
}

.login, .loginUsuario {
 display        : flex;
 align-items    : center;
 flex-direction : column;

 position : absolute;
 top      : 15%;
 left     : 0;
 width    : 100%;
 height   : 100vh;
 padding  : 20px;
 z-index  : 20;
}

.contInput, .contMessage, .contMessageErrorManual {
 width            : 400px;
 border           : 1px solid var(--grisClaro);
 margin           : 5px;
 padding          : 0 15px 0 15px;
 border-radius    : var(--borderRadius);
 background-color : var(--blanco);
}

.contMessage img, .contMessageErrorManual img {
 opacity  : 1;
}

.contMessage, .contMessageErrorManual {
 height          : 200px;
 display         : flex;
 align-items     : center;
 flex-direction  : column;
 justify-content : center;
 font-size       : .8em;
}

.contMessageErrorManual {
 width  : 450px;
 height : 300px;
}

.flexColumn {
 display         : flex;
 align-items     : center;
 flex-direction  : column;
 justify-content : center;
}

.flexRow {
 display         : flex;
 align-items     : center;
 flex-direction  : row;
 justify-content : center;
}

.contMessage div, .contMessageErrorManual div {
 padding-bottom : 20px;
}

.contInput input {
 color            : var(--oscuro);
 width            : 80%;
 border           : none;
 margin           : 5px;
 padding          : 15px;
 outline          : none;
 font-weight      : bold;
 background-color : transparent;
}

.contInput input::placeholder {
 color       : var(--inactivoOscuro);
 opacity     : .6;
 font-weight : normal;
}

.contButton, .contButton20 {
 width      : 400px;
 margin-top : 5px;
}

.contDoubleButton {
 position : relative;
 width    : 220px;
 margin   : 15px 20px 0 0;
}

.contDoubleButton span {
 position   : absolute;
 width      : 100%;
 text-align : center;
 top        : 20px;
 z-index    : -100;
}

.contDoubleButton:last-child {
 margin-right : 0;
}

.contButton input, .contButton20 input, .contDoubleButton input {
 color            : var(--blanco);
 width            : 100%;
 cursor           : pointer;
 padding          : 15px;
 border           : 1px solid var(--quaternaryColor);
 font-weight      : bold;
 font-size        : 18px;
 border-radius    : var(--borderRadius);
 background-color : var(--quaternaryColor);
}

.contDoubleButton input {
 margin-top       : 30px;
 min-height       : 100px;
 border           : none;
 border-bottom    : 2px solid transparent;
 outline          : none;
 text-decoration  : none;
 background-color : transparent;
}

.contDoubleButton input:active, .contDoubleButton input:hover {
 border-bottom : 2px solid var(--blanco);
 transition    : border-bottom 0.3s ease-in;
}

.contButton20 {
 text-align : center;
}

.contButton20 input {
 width  : 360px;
}

.copyright {
 color      : var(--versionColor);
 font-size  : 12px;
 margin-top : 15px;
 text-align : center;
}

.copyright span.material-icons {
 vertical-align : middle;
}

.CPadB10 {
 padding-bottom : 10px;
}

.CPadB20 {
 padding-bottom : 20px;
}

.CPadT20 {
 padding : 20px;
}

.CPadTp20 {
 padding-top : 20px;
}

.warning, .todoOK {
 color       : var(--rojo);
 width       : 100%;
 padding     : 0;
 font-size   : 12px;
 font-weight : bold;
 text-align  : center;
}

.todoOK {
 color : var(--verde);
}

.negrita {
 font-weight : bold;
}

.macAddress {
 color       : var(--macAddress);
 width       : 180px;
 font-weight : bold;
 padding-top : 5px;

 display       : flex;
 align-content : space-around;
}

.macAddress > span {
 flex-basis : 70%;
 text-align :  right;
}

.macAddress > a {
 flex-basis : 30%;
 text-align :  center;
}

.tcenter {
 text-align : center;
}

.versionFooter {
 position      : fixed;
 bottom        : 0;
 right         : 0;
 color         : var(--versionColor);
 width         : 100%;
 font-size     : 12px;
 height        : 25px;
 text-align    : right;
 padding-right : 10px;
}

@media (max-width: 640px) {
 h2.bienvenido + div.flexRow {
  width: 80%;
 }
}

@media (max-width: 480px) {
 .contInput {
  width: 90%;
 }
 .contButton {
  width: 90%;
 }
 h2.bienvenido + div.flexRow  {
  flex-direction: column;
 }
 h2.bienvenido + div.flexRow .contDoubleButton {
  margin-right: 0;
 }
}