@font-face {
    font-family: Eurostile;
    /*noinspection CssUnknownTarget*/
    src: url("../font/EurostileLTStd.otf") format("opentype");
}

:root {
    --color-px-lighter: #F1F6F3;
    --color-px-light: #AFC2B5;
    --color-px-dark: #728174;
    --color-px-darker: #5A786D;

    --color-primary: var(--color-px-dark);
    --color-secondary: var(--color-px-light);

    --color-orange: #E17009;
    --color-orange-light: #ffc107;
    --color-red: #D13913;
    --color-red2: #AA2704;
    --color-green: #008000;
    --color-green-light: #32CD32;
    --color-bp-blue: #137CBD;
    --color-grey-dark: #707070;
    --color-grey: #c0c0c0;
    --color-grey-medium: #D9D9D9;
    --color-grey-eee: #EEEEEE;
    --color-grey-light: #f2f2f2;
    --color-almost-white: #FAFAFA; /* This is taken from reset.css so it match the default body foreground color */
    --color-almost-black: #1c2127; /* This is taken from reset.css so it match the default body foreground color */
    --color-required-background: #FFF5F5;

    --color-text-white: var(--color-almost-white);
    --color-text-black: var(--color-almost-black);
    --color-text-faded: var(--color-grey);
}

body {
    height: 100%;
    max-height: 100%;
}

.px-form-group {
    margin-bottom: 15px;
}

.px-template-outer {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.px-template-top, .px-template-bottom {
    padding: 20px;
}

.px-template-top {
    height: 720px;
    background: url('../img/background.webp') center;
    background-size: cover;
    align-items: center;
    display: flex;
    justify-content: center;
}

.px-template-top-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 25px;
}

.px-card {
    width: 400px;
    background: var(--color-almost-white);
    padding: 0;
}

.px-card-title {
    font-family: Eurostile, serif;
    background: var(--color-primary);
    color: var(--color-almost-white);
    padding: 10px 20px;
    font-size: 24px;
    text-align: center;
}

.px-card-content {
    padding: 20px;
}

.px-template-bottom {
    flex: 1;
    text-align: center;
    background: var(--color-almost-white);
}

.px-app-buttons {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    gap: 20px;
}

.px-app-buttons a img {
    height: 60px;
}

.px-support {
    padding-bottom: 10px;
}

.px-support span {
    white-space: nowrap;
}

.px-copyright {
    color: var(--color-primary);
    text-align: center;
}

.px-login-left {
    max-width: 585px;
    background: var(--color-almost-white);
}

.px-login-left h2,
.px-login-left h3 {
    font-family: Eurostile, serif;
    color: var(--color-px-darker);
}

.px-login-left h2 {
    margin: 0;
    font-weight: bold;
}

.px-login-left h3 {
    margin-bottom: 0;
}

.px-login-error {
    color: var(--color-orange);
    font-weight: bold;
    text-align: center;
}

.kc-info-wrapper {
    background: var(--color-grey-eee);
    padding: 20px;
}

/* TODO Remove after SSO migration */
.px-login-left {
    display: none;
}

@media screen and (max-width: 1050px) {
    .px-login-left {
        display: none;
    }
}

.px-message {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    font-weight: bold;
    align-items: start;
}

.px-message .px-message-icon {
    font-size: 18px;
}

.px-message-success {
    background: #f3faf2;
    color: #1e4f18
}

.px-message-success .px-message-icon {
    color: #3e8635;
}

.px-message-warning {
    background: #fdf7e7;
    color: #795600
}

.px-message-warning .px-message-icon {
    color: #f0ab00;
}

.px-message-error {
    background: #faeae8;
    color: #a30000
}

.px-message-error .px-message-icon {
    color: #c9190b;
}

.px-message-info {
    background: #e7f1fa;
    color: #002952
}

.px-message-info .px-message-icon {
    color: #2b9af3;
}

/* Remove Arrows/Spinners - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove Arrows/Spinners - Firefox */
input[type=number] {
    -moz-appearance: textfield;
}