.small-screen i{
    color: #203A81 !important;
    font-size: 1em;
}

.small-screen button{
    top: 23px !important;
}

.small-screen.loginModal{
    width: 90% !important;
    margin-top: 10px !important;
}

#login-form-container {
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.loginModal{
    border-radius: 10px;
}

#login-form-toggle {
    display: flex;
    margin-bottom: 5px;
}

#login-form-container .toggle-button {
    flex: 1;
    padding: 10px;
    border: none;
    background-color: #9cd1ff;
    cursor: pointer;
    transition: background-color 0.3s;
}

#login-form-container .login-form-active {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #0056b3;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#login-form-container input[type="email"],
#login-form-container input[type="date"],
#login-form-container input[type="password"],
#login-form-container input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#login-form-container button, #logout-form-container button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #007bff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 5px;
}

#toggle-login, #toggle-register{
    margin: 0px 5px;
}

#login-form-container button:hover {
    background-color: #0056b3;
    color: white;
}

#login-form button,
#register-form button,
#logout-form-container button{
    color: white;
}



.success-display-element{
    text-align: center;
    color: #134d13;
    background: #80d780;
    padding: 5px;
    border-radius: 10px;
    width: auto;
    margin: auto;
    word-wrap: break-word;
    text-overflow: ellipsis;
}

.error-display-element{
    text-align: center;
    color: #601515;
    background: #d78080;
    padding: 5px;
    border-radius: 10px;
    width: auto;
    margin: auto;
    word-wrap: break-word;
    text-overflow: ellipsis;
}

.success-display-element:empty,
.error-display-element:empty{
    padding: 0;
    display: none;
}

.logout-form-user-message{
    font-size: 20pt;
}

#error-form{
    margin-top: 10px !important;
}

.login-modal-header-logged-in{
    display: none;
}