:root {
    --esm-blue-primary: #0269d1;
    --esm-blue-primary-trans: rgba(2, 105, 209, .5);
    --esm-blue-primary-light: #68CFFF;
    --esm-blue-primary-dark: #00036B;
    --esm-font-color-default: #111111;
    --esm-white: #FFFFFF;
    --esm-black: #000000;
    --esm-error: #FF3300;
    --esm-urgent-priority: #FF0000;
    --esm-high-priority: #FFA500;
    --esm-medium-priority: #FFFF00;
    --esm-low-priority: #00FF00;
    --esm-grey-dark: #CCCCCC;
    --esm-grey-light: #F5F5F5;
    --esm-notifications-pink: #FF1493;

    /*Shadow RGB Black*/
    --esm-shadow-black: 0,0,0;

    /*Grid Variables*/
    --grid-width: 90%;
    --gutter-vertical: 6rem;
    --gutter-horizontal: 6rem;
    /*Font Size Variables*/
    --default-font-size: 1.6rem;


}

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

.user-auth__container {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 1 1fr;
    grid-template-columns: 1 1fr;
    background-color: var(--esm-grey-dark);
    justify-content: center;
    align-content: center;
}
.g-signin2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.user-auth__logo {
    height: 10rem;
    width: 10rem;
    fill: var(--esm-blue-primary);
    display: block;
    margin: 0 auto;
    margin: 3rem;
}

.user-auth__button {
    display: block;
    margin: 0 auto;
    border: none;
    background-color: var(--esm-blue-primary) !important;
    color: var(--esm-white);
    padding: .8rem;
    cursor: pointer;
    border-radius: 100px;
    text-decoration: none;
    text-align: center;
}

.user-auth__button:hover {
    box-shadow: 0 1rem .5rem rgba(var(--esm-shadow-black), .5) !important;
    transform: translate(0rem, -.2rem);
}

.noShow {
    display: none !important;
}

.loader__container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loader {
        border: 1.6rem solid var(--esm-grey-dark);
        border-radius: 50%;
        border-top: 1.6rem solid var(--esm-blue-primary);
        width: 8rem;
        height: 8rem;
        margin: 0 auto;
        animation: spin 1s linear infinite;
}
      
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}