.login-container { position: relative; display: flex; color: #FFF; }
.login-section { position: relative; padding: 60px 60px 0; width: 50%; }
.login-container.business, .login-container.private { padding-top: 6vw; }
.login-section.other { display: flex; background: rgba(var(--color), .25); flex-direction: column; }
.login-section-title { display: flex; font-size: 3.5rem; line-height: 1.25em; flex-direction: column; align-items: center; }
.login-section-title.other { display: block; font-size: 1.75rem; text-align: center; }
.login-section-title-highlight-container { position: relative; display: inline-block; white-space: nowrap; }
.login-section-title-highlight-container.login { display: block; width: fit-content; }
.login-section-title-highlight-container:after { content: ''; position: absolute; bottom: 0; left: 0; width: 200px; max-width: 75%; height: 5px; background: rgb(var(--color)); }
.login-section-title-highlight { display: inline-block; padding: 10px; letter-spacing: 1px; background: rgba(var(--color), .5); clip-path: polygon(0 5px, calc(100% + 5px) 0, 100% calc(100% - 5px), 0 100%); }
.login-section-abstract { margin: 50px 0; font-size: 1.25rem; letter-spacing: 1.5px; line-height: 1.75rem; text-align: center; }
.login-section-abstract-highlight { position: relative; color: #FFF; font-weight: 700; text-decoration: none; white-space: nowrap; }
.login-section-abstract-highlight:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 150px; max-width: 66.6666%; height: 3px; background-color: rgb(var(--color)); }
.login-section-field { display: block; padding: 22px 50px; margin: 25px 0; width: 100%; color: #FFF; font-size: 1.125rem; background-color: transparent; border: 1px solid #FFF; border-radius: 10px; outline: none; transition: .125s; }
.login-section-field:focus { border-color: rgb(var(--color)); }
.login-section-field.error { border-color: red; }
.login-section-field::placeholder { color: #FFF; font-size: 1.125rem; font-family: "Comfortaa", sans-serif; opacity: 1; }
.login-button { display: block; padding: 13px 50px; width: 100%; color: #FFF; font-size: 1.125rem; font-family: inherit; text-align: center; text-decoration: none; background: rgba(var(--color), .5); border-radius: 10px; border: 1px solid rgb(var(--color)); cursor: pointer; transition: .125s; }
.login-button.other { background: transparent; }
.login-section-image-container { margin: auto -125px 0; padding-top: 50px; }
.login-section-image { display: block; width: 100%; height: auto; }

@media (pointer: fine) {
    .login-button:hover { background-color: rgb(var(--color)); }
}

@media (max-width: 1599px) {
    .login-section { padding-inline: 75px; }
    .login-section-image-container { margin-inline: -75px; }
}

@media (max-width: 767px) {
    .login-container { display: block; }
    .login-section { width: unset; }
    .login-section.other { padding-block: 50px; }
    .login-section-image-container { display: none; }
}

@media (max-width: 639px) {
    .login-section { padding-inline: 25px; }
    .login-section-title { font-size: 2rem; }
    .login-section-title.other { font-size: 1.25rem; }
    .login-section-abstract,
    .login-section-field,
    .login-section-field::placeholder { font-size: .9375rem; }
}


@media (max-width: 1536px) {
	.login-container.business, .login-container.private { padding-top: 6vw; }
}

@media (max-width: 1280px) {
	.login-container.business, .login-container.private { padding-top: 8vw; }
}

@media (max-width: 1024px) {
	.login-container.business, .login-container.private { padding-top: 10vw; }
}

@media (max-width: 768px) {
	.login-container.business, .login-container.private { padding-top: 11vw; }
}

@media (max-width: 640px) {
	.login-container.business, .login-container.private { padding-top: 14vw; }
}