:root {
    --primary: #477DB8;
    --primary-dark: #654997;
    --secondary: #477DB8;
    --highlight: #0F63A0;
    --light: whitesmoke;
    --dark: #4d4d4d;
    --red: #EA0029;
    --yellow: #FDB602;
    font-size: 18px;
    --navbar-height: 82px;
}
body {
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1a1a1a;
    text-align: left;
    background-color: #fff;
}
label {
    margin-bottom: 6px;
    display: inline-block;
}
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
*::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 20px;
    border: 3px solid #fafafa;
}
.loginPage {
    display: grid;
    grid-template-columns: 1fr;
    color: #333;

    background-color: var(--primary);
    background-image: url(img/image.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom right;
    /* padding-bottom: 350px; */
}

@media (min-width: 767px) {
    .loginPage {
        grid-template-columns: minmax(360px, 37%) 1fr;
        background-attachment: fixed;
        background-size: auto 100%;
        padding-bottom: 0;
    }
}

.loginPage__column {
    min-height: 100vh;
    padding: 40px 5%;
    background-color: var(--primary-dark);
    background-image: url(img/login-pattern2.png), url(img/login-pattern.png);
    background-size: 100% 26%, cover;
    background-position: top center, center;
    background-repeat: no-repeat;
    box-shadow: 0px 8px 12px 6px hsla(0, 0%, 0%, 0.15), 0px 4px 4px hsla(0, 0%, 0%, 0.3);
}

@media (min-width: 640px) {
    .loginPage__column {
        background-size: 100% 170px, cover;
    }
}

.loginPage__container {
    max-width: 440px;
    margin-left:auto;
    margin-right: auto;
    padding: 10px 20px 20px;
}

.loginPage__header {
    text-align: center;
    margin-bottom: 15px;
}

.loginPage__logo {
    max-width: 100%;
    width: 240px;
    text-align: center;
    margin-bottom: 70px;
}

.loginPage__title {
    color: white;
    text-align: center;
    margin-bottom: 30px;
}

.potentialidplist {
    text-align: center;
}

.potentialidp {
    display: inline-block;
}

.signInAnotherAccount {
    margin-bottom: 40px;
}

.signIn__formGroup {
    margin-bottom: 20px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.signIn__formGroup label {
    color: white;
}

.signIn__formGroup:last-child {
    margin-bottom: 10px;
}

.rememberpass {
    margin-bottom: 15px;
    color: white;
}

.signIn__buttonContainer {
    text-align: center;
}

.signIn__buttonContainer button {
    color: white;
}

.signIn__buttonContainer button:hover {
    color: white;
}

.signIn__button {
    margin: 0 0 20px;
}

.forgetpass {
    margin-bottom: 10px;
}

.forgetpass a,
.forgetpass a:hover,
.forgetpass a:focus {
    color: white;
    text-decoration: underline;
}

.cookies {
    color: white;
}

.loginPage__cookies {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.loginPage__cookies:hover::before {
    content: "Este sitio utiliza dos cookies: La cookie esencial es la de sesión, normalmente llamada MoodleSession. Debe permitir que su navegador la acepte para poder mantener el servicio funcionando mientras navega el sitio. Cuando sale de la plataforma o cierra su navegador la 'cookie' se destruye (en su navegador y en el servidor). La otra 'cookie', normalmente llamada MOODLEID o similar, es para su comodidad. Se limita a recordar su nombre de usuario dentro del navegador. Esto significa que cuando regresa al sitio, se escribirá automáticamente su nombre en el campo nombre de usuario Si desea mayor seguridad no utilice esta opción: sólo tendrá que escribir su nombre manualmente cada vez que quiera iniciar sesión.";
    font-size: 14px;
    line-height: 1.2;
    position: absolute;
    z-index: 9;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 280px;
    height: 150px;
    overflow: auto;
    background-color: #fff;
    padding: 3px;
    border-radius: 8px;
    border: 5px solid #fff;
    box-shadow: 0 0 6px hsla(0, 0%, 0%, .2);
}

.loginPage__cookies .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.tool_dataprivacy {
    display: none;
    text-align: center;
    margin-bottom: 10px;
}

.loginPage__imgColumn {
    position: sticky;
    top: 0;
    height: 77vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

@media (min-width: 640px) {
    .loginPage__imgColumn {
        height: 100vh;
    }
}

.loginPage__image {
    width: 80%;
    max-height: 90vh;
    max-width: 90vh;
}
h2 {
    color: #477DB8;
}
h2, .h2 {
    font-size: 2rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: .5rem;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #477DB8; 
}
.signIn__button {
    margin: 0 0 20px;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #1a1a1a;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .58rem .993rem;
    font-size: 1rem;
    line-height: 1.2;
    border-radius: 20px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
    background: #7c1698;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 3px 1px rgba(0, 0, 0, .15);
}
.d-none {
    display: none !important;
}