div#login-section, div#logged-in-section, div#reset-section {
    padding: 20px 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}

div#logged-in-section {
    background: #40bd95;
}

#login-section h3, #reset-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

#login-section input, #reset-section input {
    background: #fff;
    padding: 7px 10px;
    margin: 5px 0;
    border: 1px solid #232e3c;
    border-radius: 4px;
    width: 100%;
}
button#login-button, button#reset-button {
    background: #ccc;
    padding: 10px;
    width: 80%;
    margin: 1rem 0;
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
    background: #232e3c;
    color: #fff;
}

button#login-button:hover, button#login-button:focus, button#reset-button:hover, button#reset-button:focus {
    cursor: pointer;
    background: #187a5b;
}

/* USER MENU - V1 */

div#user {
    position: relative;
}

.user-profile--icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M20 22h-2v-2a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v2H4v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2zm-8-9a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");
    background-size: contain;
    height: 16px;
    width: 16px;
    margin-right: 10px;
}

div#user:focus-within div#user-profile, div#user:hover div#user-profile, div#user:focus div#user-profile {
    background: #41bd95;
    border-radius: 4px 4px 0 0;
    color: #232e3c;
}

div#user:focus-within .user-profile--icon, div#user:focus .user-profile--icon, div#user:hover .user-profile--icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M20 22H4v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2zm-8-9a6 6 0 1 1 0-12 6 6 0 0 1 0 12z' fill='rgba(35,46,60,1)'/%3E%3C/svg%3E");
}

div#user:focus-within div#user-menu, div#user:hover div#user-menu {
    visibility: visible;
}

div#user-menu {
    visibility: hidden;
    position: absolute;
    background: #41bd95;
    right: 0;
    min-width: 300px;
    border-radius: 6px 0 6px 6px;
}

div#logged-in-section {
    padding: 0;
    margin-bottom: 0;
    border: 0;
    border-radius: 4px 0 4px 4px;
    background: none;
}

#logged-in-section li {
    list-style: none;
    margin: 0;
    background: #41bd95;
    padding: 10px 15px;
    color: #232e3c;
    font-size: 0.875rem;
    cursor: pointer;
}

#logged-in-section li:first-child {
    border-radius: 6px 0 0 0;
}

#logged-in-section li:last-child {
    border-radius: 0 0 6px 6px;
}

#logged-in-section li:hover, #logged-in-section li:focus {
    background: #0d7c58;
    color: #fff;
}

.just-login, .forgot-password {
    font-size: 13px;
    text-decoration: underline;
    display: inline-block;
    padding: 5px;
}

.just-login:hover, .just-login:focus, .forgot-password:hover, .forgot-password:focus {
    background: #187a5b;
    cursor: pointer;
    color: white;
}