@font-face {
    font-family: AvenirNext;
    src: local("Avenir Next LT Pro"),
        url("../fonts/AvenirNext_Variable.ttf") format("truetype");
}

/* Scaling factors. */
/**
Scale factor to INCREASE size of interactive elements like buttons and other tab enabled items on
high DPI screens to improve touch targeting for users.
*/
@property --hit-scale-factor {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}
/**
 Scale factor to INCREASE spacing between interactive elements on high DPI screens. This is related
 to --hit-scale-factor, but improves targeting by decreasing the chance of accidentally hitting an
 adjacent element.
 */
@property --hit-spacing-factor {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}
/**
Scale factor to DECREASE space around scaled-up elements on high DPI screens to accommodate them
without overflow and should be used sparingly.
*/
@property --fit-spacing-factor {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}
/**
Scale factor to INCREASE font and icon size of elements on high DPI screens for better legibility.
Determining when to use this vs. --hit-scale-factor may be somewhat subjective, and property/element
-specific.
*/
@property --legibility-scale-factor {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}
/**
These are the base overrides for the Hive platform. They represent the most common factors used
in components, but can and should be overridden at the component level as needed.
We're overriding the properties to fit the scaling for a touch screen.
*/
@media (any-hover: none) {
    :root {
        --hit-scale-factor: 1.5;
        /* 50% larger hit targets */
        --hit-spacing-factor: 1.5;
        /* 50% larger spacing between hit targets */
        --fit-spacing-factor: 0.857;
        /* 15% less space between hit targets */
        --legibility-scale-factor: 1.25;
        /* 25% larger font and icon sizes */
    }
}

/* Generally applicable styles. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1 {
    font-size: calc(var(--legibility-scale-factor) * 2rem);
    font-weight: 600;
    margin-bottom: calc(var(--hit-spacing-factor) * 2.5rem);
    margin-top: 25px;
    text-align: center;
}

a {
    color: #e0902f;
}

label {
    display: inline-block;
    font-size: calc(var(--legibility-scale-factor) * 0.875rem);
    font-weight: 500;
    margin-bottom: 5px;
    vertical-align: middle;
}

label a {
    color: #333;
}

.checkbox label {
    margin-bottom: 0;
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"] {
    background-blend-mode: multiply;
    background: #fff;
    border-image-slice: unset;
    border-image-source: unset;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    box-shadow: inset 0.1px 1px 1px 0 rgba(0, 0, 0, 0.2),
        inset -0.1px 1px 1px 0 hsla(0, 0%, 100%, 0.75),
        inset 0 0 8px 0 rgba(89, 89, 89, 0.1);
    color: #000;
    font-size: calc(var(--legibility-scale-factor) * 0.875rem);
    height: calc(var(--hit-scale-factor) * 40px);
    line-height: 16px;
    margin: 0;
    min-height: auto;
    outline: none;
    padding: 4px 5px;
    position: relative;
    vertical-align: baseline;
    width: 100%;
}

input[type="email"]::selection,
input[type="number"]::selection,
input[type="password"]::selection,
input[type="search"]::selection,
input[type="tel"]::selection,
input[type="text"]::selection {
    background-color: #1a0dab;
    color: #fff;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus {
    background-blend-mode: multiply;
    background-image: linear-gradient(to bottom, white, white);
    border: solid 1px #f29f00;
}

input::placeholder {
    color: #aeadb1;
    font-family: AvenirNext, sans-serif;
    font-size: calc(var(--legibility-scale-factor) * 0.875rem);
}

input[type="submit"] {
    background-color: #f19e21;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-family: AvenirNext, sans-serif;
    font-size: calc(var(--legibility-scale-factor) * 15px);
    font-weight: 700;
    height: calc(var(--hit-scale-factor) * 40px);
    margin: 5px 0;
    text-align: center;
    width: 100%;
}

input[type="submit"]:disabled {
    background-color: #fbe1bc;
}

.checkbox-wrapper {
    display: flex;
    justify-content: flex-start;
}

.checkbox-wrapper > *:first-child {
    padding-right: 4px;
}

.checkbox-wrapper > *:last-child {
    padding-top: 1px;
}

.checkbox-wrapper > *:last-child label {
    font-weight: 550;
    vertical-align: top;
}

input[type="checkbox"] {
    appearance: none;
    background-image: url("../images/checkbox_unchecked.svg");
    background-repeat: no-repeat;
    background-size: contain;
    border: unset;
    cursor: pointer;
    height: 15px;
    padding: 0;
    vertical-align: middle;
    width: 15px;
}

input[type="checkbox"]:checked {
    background-image: url("../images/checkbox_checked.svg");
}

/* These are cancel buttons. To better fit with the login design language, we style it as a link. */
button[type="submit"] {
    background: none;
    border: none;
    color: #e0902f;
    cursor: pointer;
    font-size: 14px;
    font-weight: 550;
    padding: 0;
    text-decoration: underline;
}

/* Styles for specific elements or classes. */
html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background-color: #eaeaea;
    color: #333;
    font-family: AvenirNext, sans-serif;
    font-size: 16px;
}

.login-page {
    align-items: center;
    background-image: url("../images/PL_Login_BackGround.svg");
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: space-between;
    position: relative;
}

.card {
    background-color: #fff;
    border-radius: 9px;
    box-shadow: 1.5px 1.5px 30px 0 rgba(0, 0, 0, 0.15);
    max-width: 575px;
    min-width: 450px;
    padding-top: calc(var(--legibility-scale-factor) * 4.69rem);
    padding-bottom: calc(var(--legibility-scale-factor) * 4.69rem);
    padding-left: calc(var(--legibility-scale-factor) * 4.69rem);
    padding-right: calc(var(--legibility-scale-factor) * 4.69rem);
}

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

.privacy-button {
    background-color: #fff;
    border: none;
    height: calc(var(--hit-scale-factor) * 20px);
    margin-left: calc(var(--hit-scale-factor) * -24px);
    margin-top: calc(var(--hit-scale-factor) * 10px);
    position: absolute;
    width: calc(var(--hit-scale-factor) * 20px);
    z-index: 2;
}

.privacy-icon {
    background-size: calc(var(--hit-scale-factor) * 20px);
    background-repeat: no-repeat;
    display: block;
    height: calc(var(--hit-scale-factor) * 20px);
    margin-left: calc(var(--hit-scale-factor) * -5px);
    width: calc(var(--hit-scale-factor) * 20px);
}

.privacy-icon-show {
    background-image: url("../images/eye.svg");
}

.privacy-icon-hide {
    background-image: url("../images/eye-slash.svg");
}

.login-settings {
    display: flex;
    flex-wrap: wrap;
    font-size: calc(var(--legibility-scale-factor) * 0.875rem);
    justify-content: space-between;
}

.radio label {
    cursor: pointer;
    margin-bottom: 0;
    padding-left: 20px;
}

#kc-header {
    background-image: url("../images/pl-dark-tm.svg");
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    margin-bottom: 5px;
    margin-left: 100px;
    margin-top: 5px;
    width: 100%;
}

#kc-header-wrapper {
    display: none;
}

.info-msg {
    font-size: 15px;
    margin-bottom: 30px;
}

.form-options {
    font-size: calc(var(--legibility-scale-factor) * 0.875rem);
    font-weight: 550;
    margin: 15px 0 5px;
    text-align: center;
}

#kc-form-buttons {
    margin-top: 60px;
}

footer {
    align-items: center;
    display: flex;
    font-size: 12.5px;
    height: 100px;
    justify-content: center;
}

footer > div {
    margin: 12.5px;
}

footer a {
    color: #333;
    text-decoration: none;
}

.alert-icon-wrapper {
    display: inline-block;
}

.error-icon {
    background-image: url("../images/icon-information-red.svg");
    display: block;
    max-height: 16px;
    max-width: 16px;
    min-height: 16px;
    min-width: 16px;
}

.alert-msg {
    color: #ff624d;
    font-size: 0.8em;
    margin-top: 0.5em;
    text-align: left;
}

.needs-error-icon {
    background-image: url("../images/icon-information-red.svg");
    background-position-x: 0;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-left: 20px;
}

.hidden {
    display: none;
}

@media screen and (max-width: 768px) {
    .card {
        padding-left: 1em;
        padding-right: 1em;
        min-width: unset;
        width: 100%;
    }
}