/* Oceanbox Keycloak Login Theme
 *
 * Branding aligned with oceanbox.io:
 *   Primary teal:    #0bb4aa
 *   Dark teal:       #37746F
 *   Deep blue:       #031275
 *   Background:      #f9fafd
 *   Text:            #101010
 */

:root {
    --pf-v5-global--primary-color--100: #0bb4aa;
    --pf-v5-global--primary-color--200: #099e95;
    --pf-v5-global--link--Color: #0bb4aa;
    --pf-v5-global--link--Color--hover: #031275;
}

.login-pf body {
    background: #f9fafd url("../img/oceanbox-bg.png") no-repeat center bottom fixed;
    background-size: cover;
    height: 100%;
}

/* Login container layout */
.pf-v5-c-login__container {
    grid-template-columns: 34rem;
    grid-template-areas: "header"
                         "main";
}

/* Logo */
div.kc-logo-text {
    background-image: url('../img/oceanbox-logo-text.png');
    height: 80px;
    width: 360px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 auto;
}

div.kc-logo-text span {
    display: none;
}

/* Header */
#kc-header-wrapper {
    font-size: 29px;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2em;
    white-space: normal;
    color: #37746F !important;
    text-align: center;
}

/* Login card */
.pf-v5-c-login__main {
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Primary button */
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: #0bb4aa;
    --pf-v5-c-button--m-primary--hover--BackgroundColor: #099e95;
    --pf-v5-c-button--m-primary--active--BackgroundColor: #37746F;
    --pf-v5-c-button--m-primary--focus--BackgroundColor: #099e95;
    border-radius: 4px;
}

/* Links */
.pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: #0bb4aa;
    --pf-v5-c-button--m-link--hover--Color: #031275;
}

a {
    color: #0bb4aa;
}

a:hover {
    color: #031275;
}

/* Form inputs */
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea {
    border-radius: 4px;
}

#kc-recovery-codes-list {
    columns: 2;
}

#certificate_subjectDN {
    overflow-wrap: break-word;
}

hr {
    margin-top: var(--pf-v5-global--spacer--sm);
    margin-bottom: var(--pf-v5-global--spacer--md);
}

@media (min-width: 768px) {
    div.pf-v5-c-login__main-header {
        grid-template-columns: 70% 30%;
    }
}