body {
}

input[type='text'], input[type='password'] {
    /*display:none;*/
}

.spacer {
    width: 20px;
}

.center {
    text-align: center;
}

.row-1 {
    height: calc(100vh - 220px);
}

.login-div, .register-div, .forgat-password-div {
    max-height: 0px;
    max-width: 0px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: max-width ease-in-out 0.5s, max-height ease-in-out 0.5s
}

    .login-div.on, .register-div.on, .forgat-password-div.on {
        max-height: 360px;
        max-width: 100%;
        margin-top: 50px;
    }


    .login-div .submit-login,
    .reset-password,
    .show-register-btn {
        background-color: #115F8B;
        height: 60px;
        width: 100%;
        max-width: 300px;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 8px;
        color: #FFF;
        font-size: 1.3em;
        font-family: 'Assistant-Bold';
        border: none;
        outline: none;
    }


.show-register-btn {
    color: #9BFF12 !important;
    background-color: #434343 !important;
    font-size: 1em !important;
    width: auto !important;
    padding: 0 15px;
    font-family: 'Assistant-Regular' !important;
}

.not-register-message {
    font-family: 'Assistant-Regular';
}

.forgat-password-message, .image-back, .show-new-account-div {
    cursor: pointer;
}

.forgat-password-div,
.register-div {
    width: 100%;
    overflow: hidden;
    /*transition: height 0.3s ease-in-out;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-family: Assistant-Regular;
    position: relative;
}

.image-back {
    vertical-align: middle;
    position: absolute;
    left: 0;
}

.username-and-password {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

    .username-and-password input {
        width: 100%;
    }

    .username-and-password .one-input {
        width: 100%;
    }

.show-new-account-div {
    background-color: var(--unnamed-color-434343);
    height: 60px;
    width: 100%;
    max-width: 230px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 8px;
    color: #9BFF12;
    font-size: 30px;
    font-family: 'Assistant-Bold';
    border: none;
    outline: none;
}

@media only screen and (max-width: 500px) {
    .row-1 {
        flex-direction: column;
        padding: 0 16px;
        height: calc(100vh + 60px);
    }


    .top-menu, .row-1 {
        min-width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .top-menu {
        padding: 0;
        display: flex;
        justify-content: center;
    }
}