.login-layout {
    background-image: url('../../images/bg.jpg');
    background-size: cover;
}

.login-layout .login-logo {
    width: 80%;
    max-width: 320px;
}

.public-layout {
    --bs-border-color: #dce3ee;
    --bs-border-radius: 0.625rem;
    --bs-border-radius-lg: 0.875rem;
    min-height: 100vh;
    background: #304fba url('../../images/bg.jpg') center top / cover no-repeat;
}

.public-page {
    max-width: 52rem;
}

.public-page--narrow {
    max-width: 32rem;
}

.public-page-logo {
    width: 5rem;
    height: auto;
    flex-shrink: 0;
}

.public-page .card-header,
.public-page .card-body {
    overflow-wrap: anywhere;
}

.public-layout .card {
    --bs-card-border-width: 1px;
    --bs-card-border-color: rgba(220, 227, 238, 0.9);
    --bs-card-border-radius: 0.875rem;
    box-shadow: 0 12px 40px rgba(14, 30, 76, 0.18);
}

.public-layout :where(.form-control, .form-select) {
    border-color: var(--bs-border-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.public-layout :where(.form-control, .form-select):focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}

.public-layout .btn {
    border-radius: var(--bs-border-radius);
}