html, body {
    height: 100%;
    margin: 0;
    color: #333;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
.form-container {
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 4rem;
    width: auto;
    max-width: 600px;
    margin: auto;
    margin-top: 5rem;
    margin-bottom: 2rem;
    font-size: 16px;
    border-top: 5px solid #ff9900;
}
.form-container.success {
    border-top: 5px solid #107b00 !important;
}
.form-container.error {
    border-top: 5px solid #f00 !important;
}
.form-footer {
    margin-top: 40px;
}
.text-success {
    color: #107b00;
}
.text-error {
    color: #f00;
}
.width-100 {
    width: 100%;
}

/* The following styles are for the language menu */
.language-menu {
    padding: 20px 30px;
    padding-bottom: 6px;
    cursor: pointer;
}
.language-menu>div:not(:first-child)::before {
    content: '|';
    margin: 0 4px;
}
.language-menu>div.lang-active {
    text-decoration: underline;
}

/** mobile **/
@media (max-width:767px) {
    .el-notification.right {
        top: 10% !important;
        right: inherit !important;
        left: 5% !important;
        width: 40em !important;
    }
    .language-menu {
        justify-content: flex-start;
    }
}