html.dark {
    .startpageContainer h1,
    .startpageContainer h1 span,
    .startpageContainer a:not(.button) {
        color : var(--brand-text-color);
    }
}

main {
    .wrapper {
        height : 100%;
    }
    
    .startpage {
        display       : grid;
        height        : 100%;
        align-content : center;
    }
}

.startpageContainer {
    color                 : var(--light-text-color);
    display               : grid;
    grid-template-columns : 1fr 1.5fr;
    grid-column-gap       : 3.125rem;
    grid-template-areas   : 'form picture';
}

.startpage form {
    grid-area   : form;
    display     : grid;
    align-items : center;
}


.startpageContainer > div {
    grid-area   : picture;
    display     : grid;
    align-items : center;
    height      : 100%;
}

.startpageContainer > div img {
    width : 100%;
}

.startpage {
    
    main a.button,
    .layout_v4 main a.button,
    .startpageContainer a.button,
    button,
    input.loginButton {
        background : color-mix(in oklab, var(--button-bg-color) 100%, white 30%);
        
        &:hover {
            background : color-mix(in oklab, var(--button-bg-color) 100%, white 10%);
        }
    }
    
    label {
        background            : rgba(0, 0, 0, 0.25);
        border-radius         : var(--default-border-radius);
        margin-top            : 1rem;
        padding               : 0.2rem 1rem;
        display               : grid;
        grid-template-columns : 1.825rem auto;
        align-items           : center;
        color                 : var(--accent-text-color);
        
        input[type=text],
        input[type=password],
        .gm-password .input-group {
            border      : 0;
            padding     : 0;
            display     : flex;
            align-items : center;
            
            &:focus {
                border : 0;
            }
            
            .input-append, .input-prepend {
                padding : 0;
            }
            
            &.disabled {
                svg {
                    opacity : 0.5;
                }
                
                .input-append, .input-prepend {
                    background-color : transparent;
                }
            }
            
        }
        
    }
}

label .mask {
    background-color : var(--main-gold-color);
}


.layout_v4 {
    .main-wrapper {
        height : 100%;
    }
    
    .startpage {
        
        .startpageContainer {
            align-content : center;
            height        : 100%;
            
            input[type=text],
            input[type=password],
            .gm-password .input-group {
                min-height    : 2.43rem;
                width         : 100%;
                border-radius : 0;
                background    : transparent;
                color         : #fff;
                font-size     : 1rem;
                box-shadow    : none;
                
                &:focus, &.error {
                    border : 0 !important;
                }
                
                svg {
                    fill : var(--main-gold-color);
                }
                
                &:focus-within {
                    border : 0;
                }
                
                &::placeholder {
                    color       : color-mix(in oklab, #fff 100%, black 30%) !important;
                    font-weight : 400;
                    font-size   : 1rem;
                }
                
                &.error::placeholder {;
                    color : var(--red-color);
                }
                
                &:placeholder-shown {
                    text-overflow : ellipsis;
                }
            }
        }
    }
}

.startpageContainer h1 {
    font-size      : 1.5rem;
    text-transform : uppercase;
    margin         : 3.75rem 0 1.25rem 0;
    color          : var(--light-text-color);
    
    > span {
        display        : block;
        font-size      : 0.8rem;
        color          : var(--light-text-color);
        font-weight    : 300;
        opacity        : 0.8;
        text-transform : none;
    }
}


.startpageContainer .newPassword {
    margin-top : 0.5rem;
}

.hr {
    margin-top          : 2rem;
    margin-bottom       : 1rem;
    border-bottom-color : var(--light-text-color);
    opacity             : 0.3;
}

.links {
    margin      : 1.5rem 0 1rem 0;
    display     : grid;
    align-items : center;
    
}

main .startpageContainer a:not(.button) {
    color     : var(--light-text-color);
    opacity   : 0.8;
    font-size : 0.9rem;
}

main .links a::after {
    background-color : var(--light-text-color);
}

.others {
    margin-bottom : 1.25rem;
}

.button {
    width : 100%;
}


.startPageError {
    display               : grid;
    align-items           : center;
    grid-template-columns : 3.75rem auto;
    width                 : 100%;
    background-color      : var(--error-color);
    border-radius         : var(--default-border-radius);
    padding               : 1.25rem;
    color                 : #fff;
    margin                : 2.5rem 0 0 0;
}

.startPageError .errorSign::before {
    content       : '!';
    color         : var(--error-color);
    display       : block;
    height        : 0;
    width         : 0;
    line-height   : 0;
    font-weight   : 700;
    font-size     : 1.875rem;
    text-indent   : -0.25rem;
    border        : 1.25rem solid var(--body-bg-color);
    border-radius : 50%;
}

.startpage .icon {
    fill : color-mix(in oklab, var(--main-gold-color) 100%, white 50%) !important;
}


.goldBar {
    display         : grid;
    height          : 100%;
    width           : 100%;
    background      : url('../../../../images/layout_v4/gold_bar.webp') no-repeat center center;
    background-size : 70%;
}

.startpageContainer input:-webkit-autofill {
    -webkit-text-fill-color : #ffffff !important;
    transition              : background-color 99999999s ease-in-out 0s !important;
    caret-color             : #ffffff !important;
}

@media only screen and (max-width : 900px) {
    .startpageContainer {
    }
    
    .startpageContainer > div {
        margin-bottom : 1rem;
    }
}

@media only screen and (max-width : 1400px) {
    
    .goldBar {
        background-size : 80%;
    }
}

@media only screen and (max-width : 800px) {
    
    .startpageContainer > div {
        margin-bottom : 5rem;
    }
}

@media only screen and (max-width : 700px) {
    .startpageContainer {
        grid-template-columns : 1fr;
        grid-auto-rows        : auto;
        grid-template-areas   :
            'picture'
            'form';
    }
    
    .startpageContainer h1 {
        margin-top : 0;
        font-size  : 1.8rem;
    }
    
    .startpageContainer > div {
        margin-bottom : 0;
        height        : auto;
    }
    
    .startpage form {
        grid-template-columns : unset;
    }
}