/* Colors */
:root {
    --blue25: #effbff;
    --blue50: #e0f8ff;
    --blue200: #8eddf9;
    --blue400: #00a0d6;
    --blue700: #005d92;
    --blue900: #0d234b;
    --gray25: #f9f8f8;
    --gray50: #f3f2f2;
    --gray200: #d3cecb;
    --gray400: #969087;
    --gray700: #5e554a;
    --gray900: #2d2013;
    --warning: #ff3333;
    --coral900: #500715;
    --dark700: #343434;
    --dark900: #1d1d1d;
    /* Light Theme */
    --primary-background-color: var(--gray25);
    --primary-color: white;
    --primary-text-color: var(--gray900);
    --primary-border-color: var(--gray200);
    --primary-header-color: var(--blue900);
    --element-on-primary: var(--dark900);
    --element-on-secondary: #d9d9d9;
    --secondary-color: var(--blue50);
    --secondary-background-color: var(--gray50);
    --secondary-header-color: var(--blue700);
    --secondary-border-color: #0000001a;
    --secondary-text-color: var(--gray25);
    --header-color: var(--blue700);
}


/* Dark Theme */
[data-theme="dark"] {
    --primary-background-color: #292929;
    --primary-text-color: var(--gray25);
    --primary-error-text-color: var(--warning);
    --primary-color: var(--dark900);
    --primary-border-color: var(--blue700);
    --primary-header-color: var(--gray25);
    --element-on-primary: var(--blue700);
    --element-on-secondary: var(--dark700);
    --input-highlight-color: var(--gray700);
    --secondary-color: var(--dark700);
    --secondary-background-color: var(--dark700);
    --secondary-header-color: var(--gray25);
    --secondary-border-color: var(--gray400);
    --secondary-text-color: var(--gray25);
    --warning-color: var(--coral900);
}

html {
    font-size: 62.5%;
    /* sets 1rem to 10px */
    height: 100%;
}

body {
    height: 100%;
    font-size: 1.6rem;
    /* ~16px */
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--primary-background-color);
}

@media only screen and (max-width: 480px) {
    [data-theme="dark"] {
        --primary-background-color: #000000;
        --primary-color: #292929;
        --secondary-color: var(--dark700);
        --secondary-background-color: var(--dark700);
    }

    html[data-ui="app"][data-theme="dark"] {
        --primary-color: #000000;
    }

    html[data-ui="app"][data-theme="light"] {
        --primary-color: white;
        --primary-background-color: white;
    }

    body {
        background-color: var(--primary-color);
    }
}

.adyen-checkout__card__form span,
p {
    color: var(--element-on-primary);
}

/* Ovverride the default Adyen styles */
#card-container .adyen-checkout__label__text,
#card-container .adyen-checkout-form-instruction {
  font-size: 1.4rem;
}

#card-container .adyen-checkout-contextual-text {
    font-size: 1rem;
}

.nav-dropdown-content nav div div button>span:first-child {
    background: #b8272700;
    border-color: var(--primary-border-color);
}

h1:focus-visible {
    outline: none !important;
}

[data-theme="dark"] p,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] legend,
[data-theme="dark"] span:not(a span, button span),
[data-theme="dark"] label,
[data-theme="dark"] pn-button button.pn-button-light span,
[data-theme="dark"] pn-button a.pn-button-light,
[data-theme="dark"] pn-button .pn-button[data-appearance="light"],
[data-theme="dark"] pn-text-link a {
    color: var(--primary-text-color) !important;
}

[data-theme="dark"] pn-button button.pn-button-light .pn-button-bg:after,
[data-theme="dark"] pn-button a.pn-button-light .pn-button-bg:after,
[data-theme="dark"] pn-button .pn-button[data-appearance="light"] .pn-button-bg,
[data-theme="dark"] .pn-modal>.pn-modal-close-button {
    background: var(--secondary-color) !important;
    border-color: var(--primary-text-color) !important;
    border: none;
}


[data-theme="dark"] pn-button .pn-button[data-appearance="light"] .pn-button-bg:after {
    background-color: var(--primary-text-color) !important;
    opacity: 0.1 !important;
}


[data-theme="dark"] pn-icon path {
    fill: var(--primary-text-color) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] .nav-dropdown-content-container,
[data-theme="dark"] .nav-dropdown-content button {
    background: var(--secondary-color) !important;
}

[data-theme="dark"] pn-radio-button input[type=radio]:hover+label .pn-radio-outer,
[data-theme="dark"] pn-checkbox input[type=checkbox]:hover+label.pn-checkbox {
    background: var(--input-highlight-color);
}

[data-theme="dark"] pn-button button.pn-button-light .pn-button-bg,
[data-theme="dark"] pn-button button.pn-button-light:focus .pn-button-bg,
[data-theme="dark"] pn-button a.pn-button-light .pn-button-bg,
[data-theme="dark"] pn-button a.pn-button-light:focus .pn-button-bg,
[data-theme="dark"] .pn-radio-outer:not(:hover),
[data-theme="dark"] pn-checkbox input[type=checkbox]:not(:checked, :hover)+label.pn-checkbox,
[data-theme="dark"] pn-button .pn-button[data-appearance="light"]:focus .pn-button-bg::after {
    border-color: var(--secondary-border-color);
    background: var(--secondary-color);
}

[data-theme="dark"] pn-button button.pn-button-light:focus .pn-button-bg,
[data-theme="dark"] pn-button a.pn-button-light:focus .pn-button-bg,
[data-theme="dark"] pn-button .pn-button[data-appearance="light"]:focus .pn-button-bg::after {
    -webkit-box-shadow: 0 0 0 0.2rem var(--secondary-border-color), 0 0 0 0.4rem var(--secondary-color);
    box-shadow: 0 0 0 0.2rem var(--secondary-border-color), 0 0 0 0.4rem var(--secondary-color);
}


[data-theme="dark"] pn-radio-button input[type=radio]:checked:not(:hover)+label .pn-radio-outer,
[data-theme="dark"] pn-checkbox input[type=checkbox]:checked:not(:hover)+label.pn-checkbox {
    border-color: var(--primary-border-color) !important;
}

[data-theme="dark"] pn-input input:active,
[data-theme="dark"] pn-input input:focus,
[data-theme="dark"] pn-radio-button input[type=radio]:focus+label .pn-radio-outer,
[data-theme="dark"] pn-radio-button input[type=radio]:active+label .pn-radio-outer,
[data-theme="dark"] pn-checkbox input[type=checkbox]:focus+label.pn-checkbox,
[data-theme="dark"] pn-checkbox input[type=checkbox]:active+label.pn-checkbox {
    -webkit-box-shadow: 0 0 0 0.1rem var(--secondary-border-color), 0 0 0 0.3rem #005d92 !important;
    box-shadow: 0 0 0 0.1rem var(--secondary-border-color), 0 0 0 0.3rem #005d92 !important;
    background: var(--input-highlight-color);
}

[data-theme="dark"] pn-input input {
    border-color: var(--primary-border-color);
    background-color: var(--secondary-color) !important;
    color: var(--secondary-color);
}

[data-theme="dark"] pn-input.error input {
    border: 0.065em solid var(--primary-error-text-color);
}

[data-theme="dark"] pn-input.error label,
[data-theme="dark"] pn-input.error small {
    color: var(--primary-error-text-color);
}

[data-theme="dark"] .adyen-checkout__label__text,
[data-theme="dark"] pn-toast .content,
[data-theme="dark"] .input-container input,
[data-theme="dark"] pn-icon path {
    color: var(--primary-text-color) !important;
}

[data-theme="dark"] pn-toast {
    background: var(--warning-color) !important
}

[data-theme="dark"] .adyen-checkout__input {
    color: var(--element-on-primary) !important;
    background: var(--secondary-color) !important;
    border-color: var(--secondary-border-color) !important;
}

[data-theme="dark"] .chckt-input-field--error {
    color: var(--warning-color) !important;
}

[data-theme="dark"] pn-modal div.pn-modal,
[data-theme="dark"] pn-modal div[slot="buttons"] {
    background-color: var(--primary-color) !important;
    border-color: var(--secondary-border-color) !important;
}

[data-theme="dark"] .pn-modal>.pn-modal-close-button:hover {
    background-color: var(--gray900) !important;
}

.DarkBackground {
    background-color: var(--primary-background-color);
}

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

@font-face {
    font-family: "PostNordSans";
    src: url("https://portal.postnord.com/fonts/PostNordSans-Light.woff2") format("woff2"),
        url("https://portal.postnord.com/fonts/PostNordSans-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "PostNordSans";
    src: url("https://portal.postnord.com/fonts/PostNordSans-LightItalic.woff2") format("woff2"),
        url("https://portal.postnord.com/fonts/PostNordSans-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "PostNordSans";
    src: url("https://portal.postnord.com/fonts/PostNordSans-Regular.woff2") format("woff2"),
        url("https://portal.postnord.com/fonts/PostNordSans-Regular.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "PostNordSans";
    src: url("https://portal.postnord.com/fonts/PostNordSans-RegularItalic.woff2") format("woff2"),
        url("https://portal.postnord.com/fonts/PostNordSans-RegularItalic.woff") format("woff");
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "PostnordSans";
    src: url("https://portal.postnord.com/fonts/PostNordSans-Medium.woff2") format("woff2"),
        url("https://portal.postnord.com/fonts/PostNordSans-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "PostnordSans";
    src: url("https://portal.postnord.com/fonts/PostNordSans-MediumItalic.woff2") format("woff2"),
        url("https://portal.postnord.com/fonts/PostNordSans-MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "PostnordSans";
    src: url("https://portal.postnord.com/fonts/PostNordSans-Bold.woff2") format("woff2"),
        url("https://portal.postnord.com/fonts/PostNordSans-Bold.woff") format("woff");
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: "PostnordSans";
    src: url("https://portal.postnord.com/fonts/PostNordSans-BoldItalic.woff2") format("woff2"),
        url("https://portal.postnord.com/fonts/PostNordSans-BoldItalic.woff") format("woff");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

body,
button,
input {
    font-family: "PostNordSans", "Verdana", sans-serif;
}

/* This resolves in issues for some of the components. */
/* @supports (font: -apple-system-body) { */
/*   /* :root { */ */
/*   /*   font-size: 16px; */ */
/*   /* } */ */
/*   html { */
/*     font: -apple-system-body !important; */
/*     font-size: 100%; */
/*   } */
/*   body { */
/*     font-size: 1rem; */
/*   } */
/* } */

#root {
    height: 100%;
}

#root>div>pn-spinner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#root .transitionContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 1em;
    text-align: center;
    gap: 2.4rem;
    height: 100%;
}

#App .appUI button,
#App .appUI div.pn-button-bg {
    border-radius: 0.5em;
    border: none;
}

#App .appUI pn-button .pn-button[data-appearance="light"] .pn-button-bg {
    background-color: var(--gray50);
}

#App .appUI pn-button .pn-button[data-appearance=light] .pn-button-bg:after {
  background-color: var(--gray200);
}

@media only screen and (max-width: 480px) {
    #root {
      height: 100%;
    }

    * {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
        user-drag: none;
        -webkit-user-drag: none;
    }

    [data-theme="dark"] pn-modal div.pn-modal,
    [data-theme="dark"] pn-modal div[slot="buttons"] {
        border: none !important;
    }

    [data-theme="dark"] pn-modal div[slot="buttons"] {
        flex-direction: column-reverse;
    }
}