.top_area_container {
    margin-top: var(--spacing-xxl);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.body_container {
    line-height: 20px;
    margin-bottom: 20px;
}

.body_container img {
    max-width: 100%;
}

.login_text {
    margin-bottom: var(--spacing-sm);
}

.ds_dot {
    font-weight: bold;
    color: var(--color-primary);
}

.user_name_input,
.password_input {
    width: 100%;
    padding: var(--spacing-xs);
    background-color: var(--color-neutral-lighter);
    color: var(--color-secondary);
    border: 1px solid var(--color-neutral-border);
}

.user_name_input {
    margin-bottom: var(--spacing-sm);
}

.password_submit_container {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.login_button {
    color: var(--color-accent);
    background-color: var(--color-neutral-light);
    border: 1px solid var(--color-neutral-border);
    padding: var(--spacing-xs) var(--spacing-md);
    cursor: pointer;
}

.comments_title_container {
    margin-bottom: 8px;
}

.error_message {
    color: var(--color-accent);
}

.footer_container {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-sm);
}

.footer_text {
    flex: 1;
    margin-right: var(--spacing-xl);
    border-top: 1px dotted var(--color-neutral-border-light);
    padding-top: var(--spacing-lg);
    order: 0;
    font-size: var(--font-size-small);
    color: var(--color-footer-text);
}

.logo_mail_container {
    display: flex;
}

.info_email {
    color: var(--color-accent);
    text-decoration: none;
    order: -1;
    margin-bottom: var(--spacing-lg);
}


.logo_image {
    height: 28px;
    margin-bottom: 8px;
}

.logo_container {
    border-top: 2px solid var(--color-neutral-border-dark);
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    width: auto;
    margin-bottom: var(--spacing-xl);
}

.inputs_container {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
    border-top: 1px dotted var(--color-neutral-border-light);
    border-bottom: 1px dotted var(--color-neutral-border-light);
}


@media screen and (min-width: 768px) {
    .container {
        width: 900px;
        margin: 0 auto;
    }

    .top_area_container {
        flex-direction: row;
    }

    .logo_container {
        flex: 1;
        margin-right: var(--spacing-xl);
        margin-bottom: 0;
        border-bottom: 1px dotted var(--color-neutral-border-light);
    }

    .inputs_container {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-xl);
        border-top: 2px solid var(--color-neutral-border-dark);
        width: 220px;
    }

    .body_container {
        margin-right: 240px;
    }

    .maintainer_logo {
        width: 220px;
        display: block;
        margin-left: auto;
    }

    .footer_container {
        flex-direction: row;
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .footer_text {
        border-top: 1px dotted var(--color-neutral-border-light);
        order: 0;
    }

    .info_email {
        width: 220px;
        border-top: 1px dotted var(--color-neutral-border-light);
        order: 0;
        margin-bottom: 0;
        padding-top: var(--spacing-lg);
    }
}