@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


:root {
    --parchment-color-accent: #1DAFCC;
    --pf-global--primary-color--100: var(--parchment-color-accent);
    --pf-c-button--m-primary--BackgroundColor: #6DBE45;
    --pf-c-button--m-primary--Color: #FFFFFF;
    --pf-global--FontFamily--text: "Open Sans", Arial, Helvetica, sans-serif;
    --pf-c-button--BorderRadius: 5px;
    --pf-c-button--after--BorderRadius: 5px;
    --pf-global--primary-color--100: var(--parchment-color-accent);
    --pf-global--FontWeight--bold: 600;
}

.pf-c-form-control {
    --pf-c-form-control--LineHeight: 38px;
    --pf-c-form-control--OutlineOffset: -2px;
    --pf-c-form-control--focus--BorderBottomWidth: 1px;
}

.pf-c-button {
    --pf-c-button--m-control--focus--after--BorderBottomColor: var(--parchment-color-accent);
}

:focus-visible {
    outline-color: var(--parchment-color-accent);
}

:where(button,
input,
optgroup,
select,
textarea) {
    line-height: var(--pf-c-form-control--LineHeight);
    outline-color: var(--parchment-color-accent);
}

.pf-c-form-control, .pf-c-button {
    border-radius: var(--pf-c-button--BorderRadius);
}

.pf-c-button {
    outline-offset: 2px;
}

.pf-c-button:hover {
    cursor: pointer;
}

input.pf-c-form-control {
    border-color: #cfcfcf;
}

input.pf-c-form-control:focus {
    background-color: #f0fcff;
    box-shadow: rgb(0, 147, 178) 0px 0px 5px 0px;
    outline-width: 0;
}

input.pf-c-form-control:focus, input.pf-c-form-control:hover {
    border-bottom-color: var(--parchment-color-accent);
}

body {
    font-size: 16px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: #555555;
}

.login-pf, .login-pf body {
    background-image: none;
    background-color: #FFFFFF;
}

div.kc-logo-text {
    background-image: url('../img/parchment_logo_dark.png');
    background-size: contain;
}

/* form controls */
.login-pf-page .form-control {
    height: 50px;
    border-radius: 5px;
    font-size: 16px;
}

/* generic buttons */
.btn {
    font-size: 16px;
    line-height: 1.2em;
    border-radius: 5px;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline-offset: -1px;
}

/* large buttons */
.btn-group-lg>.btn, .btn-lg {
    padding: 14.5px 10px;
    font-size: 16px;
    line-height: 1.2em;
}

/* default buttons */
.btn-default {
    background: #1DAFCC;
    border-color: #1DAFCC;
    color: #FFFFFF;
}

.btn-default.active, .btn-default:active, .btn-default:focus, .btn-default:hover, .open .dropdown-toggle.btn-default {
    background: linear-gradient(#0093B2, #1DAFCC);
    border-color: #1DAFCC;
    color: #FFFFFF;
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    color: #FFFFFF;
}

/* primary buttons */
.btn-primary, .pf-c-button.pf-m-primary {
    background: #6DBE45;
    border-color: #6DBE45;
}

.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary {
    background: linear-gradient(#349106, #6DBE45);
    border-color: #6DBE45;
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #FFFFFF;
}

/* links */
a {
    color: #1DAFCC;
}

a:hover, .login-pf a:hover {
    color: #0093B2;
}

/* social buttons (i.e. login with google) */
.login-pf-page .login-pf-social-link a {
    border-radius: 4px;
    border: 1px solid #1DAFCC;
    background: #FFFFFF;
    color: #1DAFCC;
    box-shadow: none;
}

.login-pf-page .login-pf-social-link a:hover {
    background: linear-gradient(#0093B2, #1DAFCC) !important;
    color: #FFFFFF;
}

/* alerts */
.alert {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.alert>.pficon {
    position: static;
    padding-right: 15px;
}

/* alert(error) */
.alert-error {
    background: #CC1D22;
    border-color: #CC1D22;
    color: #FFFFFF;
}
.pficon-error-circle-o:before {
    color: inherit;
}

/* alert(info) */
.alert-info {
    background: #555555;
    border-color: #555555;
    color: #FFFFFF;
}
.alert .pficon-info {
    color: inherit;
}