/*
 * Login page styles (templates/login.html).
 *
 * Moved out of the page's inline <style> block and style="" attributes so
 * the page can be served with a strict Content-Security-Policy (no
 * 'unsafe-inline' in style-src). Linked after style.css/bootstrap-grid.css,
 * i.e. the same cascade position the inline block had.
 */

.loginValidation a:focus,.loginValidation a:active{
    color: #DE350B !important;
}
.login-content .login-content-left .introducingImageChat li {
    font-family: Euclid Circular B;
    color: #FFD62B;
    font-weight: 600;
    font-size: clamp(20px, 2vw, 29px);
    line-height: 1.4;
}
.login-content .login-content-left .introducingImageChat ul {
    list-style: disc;
    padding-left: 42px;
}
.login-content .login-content-left .introducingImageChat h4 {
    font-family: Euclid Circular B;
    color: #FFFFFF;
    font-weight: 600;
    font-size: clamp(20px, 1.9vw, 27px);
    line-height: 1.6;
}
.login-content .login-content-left .introducingImageChat div {
    color: #F2F2F2;
    font-family: Euclid Circular B;
    font-size: clamp(15px, 1.6vw, 23px);
    font-weight: 500;
    padding-top: 20px;
    line-height: 1.5;
}
.learn_more {
    color: #FFFFFF;
    font-family: Euclid Circular B;
    font-size: clamp(15px, 1.6vw, 23px);
}
/* The white card is position:absolute (right: 0, 60% wide, so its
   left edge sits at 40vw) and intentionally overlaps the gradient
   column; keep the column's CONTENT out of the overlap zone. */
.login-content .login-content-left .introducingImageChat,
.login-content .login-content-left .learn_more_div,
.login-content .login-content-left .ImageChatGif {
    max-width: calc(40vw - 106px);
}

@media (max-width: 1200px) {
    /* Stack the two panels; the separate mobile view was removed */
    #desktop-view.login-content {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    .login-content .login-content-left {
        width: 100% !important;
        position: static;
        height: auto;
        padding: 32px 24px !important;
    }
    .login-content .login-content-right {
        width: 100% !important;
        position: static;
        border-radius: 50px 50px 0 0;
        padding-bottom: 40px;
    }
    .login-content .login-content-left .introducingImageChat,
    .login-content .login-content-left .learn_more_div,
    .login-content .login-content-left .ImageChatGif {
        max-width: none;
    }
    .login-content .login-content-right .login-form-wrapper {
        width: 90% !important;
    }
    .login-content .login-content-right .copyright {
        margin: 40px auto 0 !important;
    }
    .ImageChatGif img {
        width: 100% !important;
        height: auto;
    }
}

/* Login button loading state */
.login-btn .loading-dots::after {
    content: '.';
    animation: dots 1.5s steps(3, end) infinite;
}
@keyframes dots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
    100% { content: '.'; }
}
.login-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

/*
 * Replacements for the former style="" attributes.
 * An inline declaration beats every non-!important stylesheet rule, and an
 * inline !important beats every stylesheet !important. The #desktop-view
 * id keeps these above all competing class-based rules in style.css and in
 * the block above, so each element renders exactly as it did inline.
 */
.gtm-noscript-frame {
    display: none;
    visibility: hidden;
}
#desktop-view .login-col-left {
    width: 45%;
}
#desktop-view .login-intro-flush {
    margin-bottom: 0px !important;
}
#desktop-view .login-learn-more-link {
    color: #FFD62B;
}
#desktop-view .login-poster-img {
    width: 90%;
}
#desktop-view .login-col-right {
    width: 60%;
}
#desktop-view .login-form-wrapper-narrow {
    width: 75%;
}
#desktop-view .login-sa-tile {
    margin-top: 25px;
}
#desktop-view .login-sa-title {
    color: #C800C3 !important;
}
#desktop-view .login-sa-btn {
    background: linear-gradient(90deg, #8020CF 0%, #FF00F8 100%);
}
#desktop-view .login-signup-hint {
    margin-top: 50px;
}
#desktop-view .login-tile-hidden {
    opacity: 0;
    visibility: hidden;
}
#desktop-view .login-heading-img {
    margin-bottom: 3vh;
}
#desktop-view .login-validation-shown {
    display: block;
}
#desktop-view .login-btn-loading-hidden {
    display: none;
}
/* was inline "margin: 170px auto 0 !important", which also overrode the
   max-width:1200px .copyright rule above; kept identical on purpose */
#desktop-view .login-copyright-offset {
    margin: 170px auto 0 !important;
}