/*  ====================================================================================================
    "types" part
    ==================================================================================================== */

section.sign-up {
    text-align: center;
}    

/*  ====================================================================================================
    "types" part
    ==================================================================================================== */

section.sign-up .types {
    text-align: left;
    border-radius: 5px;
    padding: 30px 20px;
    background-color: #3e3e3e;
    border: 1px solid var(--white);

    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------------------------------------------------------------------------------------------------- */

section.sign-up .types .heading {
    display: flex;
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------------- */

section.sign-up .types .heading > div {
    width: 270px;
    padding: 5px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 3px;
    border: 1px solid var(--white);
}

section.sign-up .types .heading > div:hover {
    background-color: #505050;
}

/* ---------------------------------------------------------------------------------------------------- */

section.sign-up .types.sign-up-clicked .heading .sign-up {
    background-color: #505050;
}

section.sign-up .types.sign-up-clicked .heading .sign-up a,
section.sign-up .types .heading .sign-up:hover a {
    color: var(--redLight);
}

/* ---------------------------------------------------------------------------------------------------- */

section.sign-up .types.login-clicked .heading .login {
    background-color: #505050;
}

section.sign-up .types.login-clicked .heading .login a,
section.sign-up .types .heading .login:hover a {
    color: var(--blue);
}

/*  ====================================================================================================
    "content" part
    ==================================================================================================== */

section.sign-up .types .content .sign-up,
section.sign-up .types .content .login {
    display: none;
    margin-top: 30px;
}

section.sign-up .types.sign-up-clicked .content .sign-up,
section.sign-up .types.login-clicked .content .login {
    display: block;
}

/* ---------------------------------------------------------------------------------------------------- */

section.sign-up .types .content > div > div:not(:last-child) {
    margin: 20px 0;
}
    
section.sign-up .types .content > div > div .text {
    margin-bottom: 5px;
}

section.sign-up .types .content > div > div .error-message {
    font-size: 15px;
    margin-bottom: 5px;
    color: var(--redLight);
}

section.sign-up .types .content > div > div .success-message {
    font-size: 15px;
    margin-bottom: 5px;
    color: var(--greenLight);
}

section.sign-up .types .content > div > div .text label {
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------------------- */

section.sign-up .types .content > div .submit {
    margin-top: 20px;
}

/*  ====================================================================================================
    "sign up" part
    ==================================================================================================== */

section.sign-up .types.sign-up-clicked .content .sign-up .gender .field {
    display: flex;
}
    
section.sign-up .types.sign-up-clicked .content .sign-up .gender .field > div {
    margin-right: 10px;
}