/*=======================
   License:     LGPLv3 (Licencia Pública General Reducida de GNU)
   License URI: https://www.gnu.org/licenses/lgpl-3.0-standalone.html
   ================================================================================================ */

:root {
	/*
    --blue-dark: #153a63;
    --blue-light: #1f88c9;
    --module1: #1a2e7e;
    --module2: #105baf;
    --module3: #0790bc;
    --module4: #00bae1;
    --lesson1-dark: ;
    --lesson1-light: ;
    --lesson2-dark: ;
    --lesson2-light: ;
    --lesson3-dark: ;
    --lesson3-light: ;
    --lesson4-dark: ;
    --lesson4-light: ;
    --lesson5-dark: ;
    --lesson5-light: ;
    --lesson6-dark: ;
    --lesson6-light: ;
    --orange-dark: #ff5202;
    --orange-light: #ff7c00;
    --yellow-dark: #f5b518;
    --yellow-light: #ffff00;
    */
   --white: #ffffff;
   --gray-dark: #666666;
   --gray-light: #e9e9e9;
   --blue: #15317e;
   --purple: #2b00b5;
   --yellow: #fcc602;
}


/*=======================
   Definición de estilos CSS de la plantilla
========================================================================== */

.formulario .input-field {
   border-bottom: 1px solid var(--gray-dark);
   border-left: 1px solid var(--gray-dark);
   border-right: 1px solid var(--gray-dark);
   margin: 0;
   padding: 0;
}
.formulario .input-field:first-child {
   border-top: 1px solid var(--gray-dark);
}
.formulario .input-field label {
   padding-left: 1rem;
   top: 14px;
}
.formulario .input-field input {
   border-bottom: none;
   border-left: 5px solid var(--gray-dark);
   font-size: 15px;
   height: 2.4rem;
   margin: 0;
   padding-left: .5rem;
   padding-top: .75rem;
   width: calc(100% - 12px);
}
.formulario .input-field input:not(.browser-default):focus:not([readonly]) {
   border-bottom: none;
   border-left: 5px solid var(--purple);
   -webkit-box-shadow: none;
   box-shadow: none;
}
.formulario .input-field input.valid[type="text"]:not(.browser-default),
.formulario .input-field input.valid[type="password"]:not(.browser-default) {
   border-bottom: none;
   border-left: 5px solid green;
   -webkit-box-shadow: none;
   box-shadow: none;
}
.formulario .input-field input.invalid[type="text"]:not(.browser-default),
.formulario .input-field input.invalid[type="password"]:not(.browser-default) {
   border-bottom: none;
   border-left: 5px solid red;
   -webkit-box-shadow: none;
   box-shadow: none;
}
.formulario .input-field input.valid[type="text"]:not(.browser-default) + label,
.formulario .input-field input.valid[type="password"]:not(.browser-default) + label {
   color: green;
}
.formulario .input-field input.invalid[type="text"]:not(.browser-default) + label,
.formulario .input-field input.invalid[type="password"]:not(.browser-default) + label {
   color: red;
}
.formulario .input-field input:not(.browser-default):focus:not([readonly]) + label {
	color: var(--purple);
}
.formulario .check-field div:first-child {
   padding-right: 0;
}
.formulario .check-field div:last-child {
   padding-left: 0;
}
.formulario .check-field div a {
   color: var(--gray-dark);
   font-size: .8rem;
}
.formulario .check-field input[type="checkbox"] + span:not(.lever) {
   font-size: .8rem;
   height: 20px;
   line-height: 20px;
   padding-left: 20px;
}
[type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after {
   border-radius: 0;
   height: 18px;
   width: 18px;
}
[type="checkbox"].filled-in:checked + span:not(.lever)::after {
   background-color: var(--purple);
   border: 2px solid var(--purple);
   border-radius: 0;
   height: 18px;
   width: 18px;
}
.formulario .button-field {}
.formulario .button-field button {
   background-color: var(--purple);
   border-radius: 0;
   color: var(--gray-light);
   margin: 2px;
   outline: 2px solid var(--purple);
}
.formulario .button-field button:hover, 
.formulario .button-field button:focus {
	background-color: var(--gray-light);
   color: var(--purple);
}
.toast {
   background-color: var(--yellow);
   color: var(--purple);
}
.toast .toast-action {
   background-color: var(--purple);
   border-radius: 0;
   margin-right: 0;
}


/*=======================
   Media queries para estilos CSS de la plantilla
========================================================================== */

@media(orientation:landscape) {}

@media(orientation:portrait) {}

@media(max-width:600px) {}
@media(min-width:601px) {}

@media(max-width:992px) {}
@media(min-width:993px) {}

@media(max-width:1200px) {}
@media(min-width:1201px) {}