.form-container {
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(211, 211, 211, 0.1);
    max-width: 400px;
}

.brand-logo {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 10px;
}

.logo-img {
    width: 30px;
    height: 30px;
    margin-right: 4px;
}

.hidden {
    display: none;
}


.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check {
    display: none;
}


.login-form .group .button {
    background: var(--border-cyan);
}

.login-form .group label .icon {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    background: var(--text-grey);
}

.login-form .group label .icon:before,
.login-form .group label .icon:after {
    content: '';
    width: 10px;
    height: 2px;
    background: var(--white);
    position: absolute;
    transition: all .2s ease-in-out 0s;
}

.login-form .group label .icon:before {
    left: 3px;
    width: 5px;
    bottom: 6px;
    transform: scale(0) rotate(0);
}

.login-form .group label .icon:after {
    top: 6px;
    right: 0;
    transform: scale(0) rotate(0);
}

.login-form .group .check:checked + label {
    color: var(--white);
}

.login-form .group .check:checked + label .icon {
    background: var(--border-cyan);
}

.login-form .group .check:checked + label .icon:before {
    transform: scale(1) rotate(45deg);
}

.login-form .group .check:checked + label .icon:after {
    transform: scale(1) rotate(-45deg);
}