/* Francisco Nassif */

body{
    margin: 0;
    padding: 0;
    background-color: rgb(15, 15, 15);
    justify-content: center;
    padding-top:1.2em;
    padding-left:1.2em;
    padding-right:1.2em;
    font-family: 'NexaLight',Arial, sans-serif;
}

/* Para activar el sistema */
input[type=text]{
    display: none;
}
#recargar{
    position: -webkit-sticky; /* Safari */
    position: fixed;
    /* position: absolute; */
    width: 4vw;
    height: 4vw;
    right: 25px;
    top: 30px;
}


/* Mensaje principal */
#contenedorPrincipal{
    background-color: rgb(36, 34, 43);
    width: 100%;
    border-radius: 2.5vw;
    text-align: center;
    padding-bottom: 2vh;
    padding-top: 1.8vh;
    margin-bottom: 0.5vh;
}
#contenedorPrincipal #encabezados{
    display: flex;
    flex-direction: column;
    padding-left: 3vw;
    padding-right: 3vw;
}
#contenedorPrincipal #encabezados #titulo{
    color: white;
    font-family: 'NexaRg', Arial, sans-serif;
    font-size: 4vw;
    margin-bottom: 0.5vh;
}
#contenedorPrincipal #encabezados #parrafo{
    color: white;
    font-family: 'NexaLight', Arial, sans-serif;
    font-size: 2.5vw;
}

/* Contenido de primer año */
#contenedorPrimerAnio{
    background-color: rgb(235, 56, 56);
    width: 100%;
    border-radius: 2.5vw;
    /* text-align: center; */
    padding-bottom: 2vh;
    padding-top: 1.8vh;
    margin-bottom: 0.5vh;    
}
#contenedorPrimerAnio #encabezados{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    margin-bottom: 1vh;
}
#contenedorPrimerAnio #encabezados label{
    color: white;
    font-size: 3.5vw;
}
#contenedorPrimerAnio #materias{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 0.2vh;
}
#contenedorPrimerAnio #materias #materia{
    background-color: rgb(196, 41, 41);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.6vh;
    padding-bottom: 1.6vh;
    display: flex;
    align-items: center;
    /* espaciado entre materias */
    margin-bottom: 0.2vh;
}
#contenedorPrimerAnio #materias #materia #nombreMateria{
    color: white;
    font-size: 3.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
}

#contenedorPrimerAnio #materias #materia #condiciones{
    display: flex;;
    justify-content: center;
}
#contenedorPrimerAnio #materias #materia #condiciones #checkboxIzquierda{
    width: 8vw;
    height: 8vw;
    margin-right: 1.2vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(170, 29, 29);
}
#contenedorPrimerAnio #materias #materia #condiciones #checkboxIzquierda:checked{
    border: 1.5vw solid rgb(170, 29, 29); 
    background-color: rgb(255, 255, 255);
}
#contenedorPrimerAnio #materias #materia #condiciones #checkboxDerecha{
    width: 8vw;
    height: 8vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(170, 29, 29);
}
#contenedorPrimerAnio #materias #materia #condiciones #checkboxDerecha:checked{
    border: 1.5vw solid rgb(170, 29, 29); 
    background-color: rgb(255, 255, 255);
}
#contenedorPrimerAnio #materias #DivisorMateria{
    background-color: rgb(196, 41, 41);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.2vh;
    padding-bottom: 1.2vh;
    display: flex;
    align-items: center;
    margin-bottom: 0.2vh;
}
#contenedorPrimerAnio #materias #DivisorMateria #MensajeDivisor{
    color: white;
    font-size: 2.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
    text-align: center;
}

/* Contenido de segundo año */
#contenedorSegundoAnio{
    background-color: rgb(3, 123, 221);
    width: 100%;
    border-radius: 2.5vw;
    /* text-align: center; */
    padding-bottom: 2vh;
    padding-top: 1.8vh;
    margin-bottom: 0.5vh;    
}
#contenedorSegundoAnio #encabezados{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    margin-bottom: 1vh;
}
#contenedorSegundoAnio #encabezados label{
    color: white;
    font-size: 3.5vw;
}
#contenedorSegundoAnio #materias{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 0.2vh;
}
#contenedorSegundoAnio #materias #materia{
    background-color: rgb(0, 99, 179);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.6vh;
    padding-bottom: 1.6vh;
    display: flex;
    align-items: center;
    /* espaciado entre materias */
    margin-bottom: 0.2vh;
}
#contenedorSegundoAnio #materias #materia #nombreMateria{
    color: white;
    font-size: 3.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
}
#contenedorSegundoAnio #materias #materia #condiciones{
    display: flex;;
    justify-content: center;
}
#contenedorSegundoAnio #materias #materia #condiciones #checkboxIzquierda{
    width: 8vw;
    height: 8vw;
    margin-right: 1.2vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(1, 82, 147);
}
#contenedorSegundoAnio #materias #materia #condiciones #checkboxIzquierda:checked{
    border: 1.5vw solid rgb(1, 82, 147); 
    background-color: rgb(255, 255, 255);
}
#contenedorSegundoAnio #materias #materia #condiciones #checkboxDerecha{
    width: 8vw;
    height: 8vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(1, 82, 147);
}
#contenedorSegundoAnio #materias #materia #condiciones #checkboxDerecha:checked{
    border: 1.5vw solid rgb(1, 82, 147); 
    background-color: rgb(255, 255, 255);
}
#contenedorSegundoAnio #materias #DivisorMateria{
    background-color: rgb(0, 99, 179);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.2vh;
    padding-bottom: 1.2vh;
    display: flex;
    align-items: center;
    margin-bottom: 0.2vh;
}
#contenedorSegundoAnio #materias #DivisorMateria #MensajeDivisor{
    color: white;
    font-size: 2.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
    text-align: center;
}

/* Contenido de tercer año */
#contenedorTercerAnio{
    background-color: rgb(142, 29, 218);
    width: 100%;
    border-radius: 2.5vw;
    /* text-align: center; */
    padding-bottom: 2vh;
    padding-top: 1.8vh;
    margin-bottom: 0.5vh;    
}
#contenedorTercerAnio #encabezados{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    margin-bottom: 1vh;
}
#contenedorTercerAnio #encabezados label{
    color: white;
    font-size: 3.5vw;
}
#contenedorTercerAnio #materias{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 0.2vh;
}
#contenedorTercerAnio #materias #materia{
    background-color:  rgb(105, 14, 165);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.6vh;
    padding-bottom: 1.6vh;
    display: flex;
    align-items: center;
    /* espaciado entre materias */
    margin-bottom: 0.2vh;
}
#contenedorTercerAnio #materias #materia #nombreMateria{
    color: white;
    font-size: 3.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
}
#contenedorTercerAnio #materias #materia #condiciones{
    display: flex;;
    justify-content: center;
}
#contenedorTercerAnio #materias #materia #condiciones #checkboxIzquierda{
    width: 8vw;
    height: 8vw;
    margin-right: 1.2vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color:  rgb(78, 6, 126);
}
#contenedorTercerAnio #materias #materia #condiciones #checkboxIzquierda:checked{
    border: 1.5vw solid rgb(78, 6, 126); 
    background-color: rgb(255, 255, 255);
}
#contenedorTercerAnio #materias #materia #condiciones #checkboxDerecha{
    width: 8vw;
    height: 8vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(78, 6, 126);
}
#contenedorTercerAnio #materias #materia #condiciones #checkboxDerecha:checked{
    border: 1.5vw solid rgb(78, 6, 126);
    background-color: rgb(255, 255, 255);
}
#contenedorTercerAnio #materias #DivisorMateria{
    background-color: rgb(105, 14, 165);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.2vh;
    padding-bottom: 1.2vh;
    display: flex;
    align-items: center;
    margin-bottom: 0.2vh;
}
#contenedorTercerAnio #materias #DivisorMateria #MensajeDivisor{
    color: white;
    font-size: 2.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
    text-align: center;
}
#contenedorTercerAnio #materias #materia #nombreMateria #explicacion{
    color: white;
    font-size: 2.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    /* margin-right: 5vw; */
}

/* Contenido de cuarto año */
#contenedorCuartoAnio{
    background-color: rgb(32, 175, 56);
    width: 100%;
    border-radius: 2.5vw;
    /* text-align: center; */
    padding-bottom: 2vh;
    padding-top: 1.8vh;
    margin-bottom: 0.5vh;    
}
#contenedorCuartoAnio #encabezados{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    margin-bottom: 1vh;
}
#contenedorCuartoAnio #encabezados label{
    color: white;
    font-size: 3.5vw;
}
#contenedorCuartoAnio #materias{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 0.2vh;
}
#contenedorCuartoAnio #materias #materia{
    background-color:  rgb(27, 143, 46);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.6vh;
    padding-bottom: 1.6vh;
    display: flex;
    align-items: center;
    /* espaciado entre materias */
    margin-bottom: 0.2vh;
}
#contenedorCuartoAnio #materias #materia #nombreMateria{
    color: white;
    font-size: 3.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
}
#contenedorCuartoAnio #materias #materia #condiciones{
    display: flex;;
    justify-content: center;
}
#contenedorCuartoAnio #materias #materia #condiciones #checkboxIzquierda{
    width: 8vw;
    height: 8vw;
    margin-right: 1.2vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color:  rgb(24, 122, 40);
}
#contenedorCuartoAnio #materias #materia #condiciones #checkboxIzquierda:checked{
    border: 1.5vw solid rgb(24, 122, 40);
    background-color: rgb(255, 255, 255);
}
#contenedorCuartoAnio #materias #materia #condiciones #checkboxDerecha{
    width: 8vw;
    height: 8vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(24, 122, 40);
}
#contenedorCuartoAnio #materias #materia #condiciones #checkboxDerecha:checked{
    border: 1.5vw solid rgb(24, 122, 40);
    background-color: rgb(255, 255, 255);
}
#contenedorCuartoAnio #materias #DivisorMateria{
    background-color: rgb(27, 143, 46);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.2vh;
    padding-bottom: 1.2vh;
    display: flex;
    align-items: center;
    margin-bottom: 0.2vh;
}
#contenedorCuartoAnio #materias #DivisorMateria #MensajeDivisor{
    color: white;
    font-size: 2.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
    text-align: center;
}
#contenedorCuartoAnio #materias #materia #nombreMateria #explicacion{
    color: white;
    font-size: 2.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    /* margin-right: 5vw; */
}

/* Contenido de quinto año */
#contenedorQuintoAnio{
    background-color: rgb(241, 166, 25);
    width: 100%;
    border-radius: 2.5vw;
    /* text-align: center; */
    padding-bottom: 2vh;
    padding-top: 1.8vh;
    margin-bottom: 0.5vh;    
}
#contenedorQuintoAnio #encabezados{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    margin-bottom: 1vh;
}
#contenedorQuintoAnio #encabezados label{
    color: white;
    font-size: 3.5vw;
}
#contenedorQuintoAnio #materias{
    /* background-color: black; */
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 0.2vh;
}
#contenedorQuintoAnio #materias #materia{
    background-color:  rgb(218, 141, 0);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.6vh;
    padding-bottom: 1.6vh;
    display: flex;
    align-items: center;
    /* espaciado entre materias */
    margin-bottom: 0.2vh;
}
#contenedorQuintoAnio #materias #materia #nombreMateria{
    color: white;
    font-size: 3.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
}
#contenedorQuintoAnio #materias #materia #condiciones{
    display: flex;;
    justify-content: center;
}
#contenedorQuintoAnio #materias #materia #condiciones #checkboxIzquierda{
    width: 8vw;
    height: 8vw;
    margin-right: 1.2vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color:  rgb(194, 126, 0);
}
#contenedorQuintoAnio #materias #materia #condiciones #checkboxIzquierda:checked{
    border: 1.5vw solid rgb(194, 126, 0);
    background-color: rgb(255, 255, 255);
}
#contenedorQuintoAnio #materias #materia #condiciones #checkboxDerecha{
    width: 8vw;
    height: 8vw;
    border-radius: 1.8vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(194, 126, 0);
}
#contenedorQuintoAnio #materias #materia #condiciones #checkboxDerecha:checked{
    border: 1.5vw solid rgb(194, 126, 0);
    background-color: rgb(255, 255, 255);
}
#contenedorQuintoAnio #materias #DivisorMateria{
    background-color: rgb(218, 141, 0);
    border-radius: 1.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 1.2vh;
    padding-bottom: 1.2vh;
    display: flex;
    align-items: center;
    margin-bottom: 0.2vh;
}
#contenedorQuintoAnio #materias #DivisorMateria #MensajeDivisor{
    color: white;
    font-size: 2.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    margin-right: 5vw;
    text-align: center;
}
#contenedorQuintoAnio #materias #materia #nombreMateria #explicacion{
    color: white;
    font-size: 2.5vw;
    /* background-color: antiquewhite; */
    width: 100%;
    /* margin-right: 5vw; */
}

/* Mensaje final */
#contenedorMensaje{
    /* background-color: rgb(36, 34, 43); */
    background: rgb(233,224,120);
    background: -moz-radial-gradient(circle, rgba(233,224,120,1) 0%, rgba(233,165,27,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(233,224,120,1) 0%, rgba(233,165,27,1) 100%);
    background: radial-gradient(circle, rgba(233,224,120,1) 0%, rgba(233,165,27,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e9e078",endColorstr="#e9a51b",GradientType=1);

    width: 100%;
    border-radius: 2.5vw;
    text-align: center;
    padding-bottom: 2vh;
    padding-top: 1.8vh;
    margin-bottom: 0.5vh;
}
#contenedorMensaje #encabezados{
    display: flex;
    flex-direction: column;
    padding-left: 3vw;
    padding-right: 3vw;
}
#contenedorMensaje #encabezados #titulo{
    color: white;
    font-family: 'NexaRg', Arial, sans-serif;
    text-shadow: 1px 2px 0px rgba(0,0,0,0.28);
    font-size: 4vw;
    margin-bottom: 0.5vh;
}
#contenedorMensaje #encabezados #parrafo{
    color: white;
    font-family: 'NexaLight', Arial, sans-serif;
    text-shadow: 1px 2px 0px rgba(0,0,0,0.28);
    font-size: 2.5vw;
}