@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/AlegreyaSans-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/AlegreyaSans-Bold.ttf") format("truetype");
  font-weight: 700;
}

:root {  
    --pf-v5-global--FontFamily--text: 'Alegreya Sans', sans-serif;  
    --pf-v5-global--FontFamily--heading: 'Alegreya Sans', sans-serif;  
    --pf-v5-global--FontFamily--redhattext: 'Alegreya Sans', sans-serif;  
    --pf-v5-global--FontFamily--redhatdisplay: 'Alegreya Sans', sans-serif;
    
    --pf-v5-global--primary-color--100: #A13333;
    --pf-v5-global--primary-color--200: #b13434;

    --pf-v5-global--link--Color: #A13333;
    --pf-v5-global--link--Color--hover: #b13434;
    --pf-v5-global--link--Color--light: #A13333;
    --pf-v5-global--link--Color--light--hover: #b13434;
    --pf-v5-global--link--Color--dark: #A13333;
    --pf-v5-global--link--Color--dark--hover: #b13434;
    --pf-v5-global--link--Color--visited: #7f2a2a;

    --pf-v5-global--active-color--100: #8f2d2d;

    --pf-v5-global--primary-color--light-100: #c04545;
    --pf-v5-global--primary-color--dark-100: #7a2626;
}

:where(.pf-v5-theme-dark) {
    --pf-v5-global--BackgroundColor--100: #151515;
    --pf-v5-global--BackgroundColor--200: #1b1b1b;
    --pf-v5-global--BackgroundColor--300: #222222;
    --pf-v5-global--BackgroundColor--400: #2a2a2a;

    --pf-v5-global--Color--100: #f0f0f0;
    --pf-v5-global--Color--200: #c7c7c7;
    --pf-v5-global--Color--300: #9a9a9a;

    --pf-v5-global--BorderColor--100: #3a3a3a;
    --pf-v5-global--BorderColor--200: #4a4a4a;
    --pf-v5-global--BorderColor--300: #5a5a5a;

    --pf-v5-global--primary-color--100: #c04545;
    --pf-v5-global--primary-color--200: #d65a5a;
    --pf-v5-global--primary-color--300: #A13333;

    --pf-v5-global--link--Color: #d65a5a;
    --pf-v5-global--link--Color--hover: #ff7a7a;
    
    --pf-v5-global--disabled-color--100: #6a6a6a;
    --pf-v5-global--disabled-color--200: #4a4a4a;
}

/* base font size to scale properly, because global variables are in rem */
html {
    font-size: 21px;
}

/* inputs font/size */
.pf-v5-c-form-control, .pf-v5-c-helper-text, .pf-v5-c-input-group .pf-v5-c-button {  
    font-size: var(--pf-v5-global--FontSize--xs);  
}


/* ========== login.css ========== */

/* custom background */
.login-pf body {
    background: url("../img/bcc_background.png") no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}


/* ========== styles.css ========== */

.pf-v5-c-login__main-header {
    /* border-top: 4px solid var(--keycloak-card-top-color); */
    border-top: none;
}

/* center header after moving language list */
@media (min-width: 768px) {  
    div.pf-v5-c-login__main-header {  
        grid-template-columns: 1fr;  
        justify-items: center;  
    }  
}

/* login button */
#kc-login {  
    --pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--sm);  
    --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--md);  
    --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--md);
}

/* dark triangle in login button corner */
#kc-login::after {
    content: "";
    position: absolute;
    inset: auto 0 0 auto !important;
    right: 0;
    bottom: 0;

    border-width: 0 0 1.5rem 3rem;
    border-style: solid;
    border-color: transparent transparent #313235 transparent;
}

#kc-login:disabled::after {
    border-color: transparent transparent var(--pf-v5-c-button--disabled--BackgroundColor) transparent;
}


/* Footer spacings */  
.pf-v5-c-login__main-footer-band {  
    --pf-v5-c-login__main-footer-band--PaddingTop: var(--pf-v5-global--spacer--xs);  
}
.pf-v5-c-login__main-footer-band:first-child {  
    margin-block-start: var(--pf-v5-global--spacer--sm);  
}


/* ========== custom classes ========== */

/* left side icon in username/password inputs */
.custom-input-with-icon {
  position: relative;
}
.custom-input-with-icon .custom-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--pf-v5-global--Color--200);
  z-index: 1;
}
.custom-input-with-icon input {
  padding-left: var(--pf-v5-global--spacer--xl)
}