@font-face {
    font-family: 'Futura Std Book';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: local('Futura Std Book'), url('/fonts/FuturaStdBook.woff') format('woff');
}
@font-face {
    font-family: 'Futura Std Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Futura Std Medium'), url('/fonts/FuturaStdMedium.woff') format('woff');
}
@font-face {
    font-family: 'Futura Std Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Futura Std Bold'), url('/fonts/FuturaStdBold.woff') format('woff');
}

@font-face {
    font-family: 'Futura Std Bold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Futura Std Bold Oblique'), url('/fonts/FuturaStdBoldOblique.woff') format('woff');
}
@font-face {
    font-family: 'Futura Std Medium Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Futura Std Medium Oblique'), url('/fonts/FuturaStdMediumOblique.woff') format('woff');
}
    
@font-face {
    font-family: 'Futura Std Extra Bold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Futura Std Extra Bold Oblique'), url('/fonts/FuturaStdExtraBoldOblique.woff') format('woff');
}
@font-face {
    font-family: 'Futura Std Light Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Futura Std Light Oblique'), url('/fonts/FuturaStdLightOblique.woff') format('woff');
}

@font-face {
    font-family: 'Futura XBlk BT Extra Black';
    font-style: normal;
    font-weight: normal;
    src: local('Futura XBlk BT Extra Black'), url('/fonts/FuturaExtraBlackFont.woff') format('woff');
}
:root {
    --spacer: 1rem;
    --border-padding: 2rem;
    --clr-green: #45FE79;
    --clr-lightgreen: #D0FFDD;
    --clr-grey: #E9E9E9;
    --clr-bg-grey: #F5F5F5;
    --clr-light-black: #232323;
    --clr-btn-green: #45FE79;
    --clr-btn-gray: #D9D9D9;
    --clr-black: #000000;
    --clr-btn-pleasa: #FF00FF;
    --clr-hover-pleasa: #5D055D;
    --clr-bg-grey: #E5E7EB;
    --clr-bg-pleasa: #FFF0FF;
    --ff-roboto: "Roboto", sans-serif;
    --ff-syne: "Syne", sans-serif;
    --ff-futura-std: "Futura Std Medium", sans-serif;
    --ff-futura-extra-black: "Futura XBlk BT Extra Black", sans-serif;
    --ff-futura-bold-std: "Futura Std Bold", sans-serif;
    --ff-futura-std-oblique: "Futura Std Medium Oblique", sans-serif;
    --ff-futura-light-oblique: "Futura Std Light Oblique", sans-serif;
    --ff-futura-bold-oblique: "Futura Std Bold Oblique", sans-serif;
    --ff-futura-extra-bold-oblique: "Futura Std Extra Bold Oblique", sans-serif;
    /* small screen font-sizes */
    --fs-200: 0.6rem;
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.375rem;
    --fs-600: 1.75rem;
    --fs-700: 2rem;
    --fs-900: 2.125rem;
    --fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;
    --fw-400: 400;
    --fw-300: 300;
    --lh-500: 1rem;
    --lh-700: 2rem;
    --lh-900: 3rem;
    --right-padding: 0rem;
}


@media (min-width: 992px) {
    :root {
        --fs-200: 0.75rem;
        --fs-500: 1.75rem;
        --fs-600: 2.125rem;
        --fs-700: 3rem;
        --fs-900: 4rem;
        --lh-500: 1.5rem;
        --lh-700: 3rem;
        --lh-900: 4rem;
        --border-padding: 3rem;
    }
}

@media (min-width: 1400px) {
    :root {
        --fs-600: 2.5rem; /* big headline */
        --fs-700: 3.75rem; /*DESKTOP/Headline 2 */
        --fs-900: 5rem; /* big big headline*/
        --lh-500: 1.875rem;
        --lh-600: 3.125rem; /* big headline */
        --lh-700: 4.5rem; /*DESKTOP/Headline 2 */
        --lh-900: 6rem; /* big big headline*/
    }
}
/* reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
dl,
dd,
ul,
li,
figure {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input {
    -webkit-border-radius: 0;
    border-radius: 0;
}

input,
button,
textarea,
select {
    font: inherit;
}

body {
    line-height: 1.3;
    font-family: var(--ff-syne);
    font-size: var(--fs-400);
    font-weight: var(--fw-300);
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}

input::placeholder {
    color: #000;
    font-family: Roboto;
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.125rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000000s ease-in-out 0s;
}

input:focus,
input:hover {
    outline-color: var(--clr-green);
    border-color: var(--clr-green);
}

input.pleasa:focus,
input.pleasa:hover {
    outline-color: var(--clr-btn-pleasa);
    border-color: var(--clr-btn-pleasa);
}

input[type="checkbox"]:checked {
    background-color: var(--clr-green);
    accent-color: var(--clr-green);
}
input.pleasa {    
    color: var(--clr-black);
    border: 1px solid var(--clr-bg-pleasa);
    font: var(--ff-futura-std);
}

h1,
h2,
h3 {
    font-family: var(--ff-syne);
    font-weight: var(--fw-200);
}

a {
    font-family: var(--ff-syne);
    font-weight: var(--fw-500);
    color: var(--clr-black);
    text-decoration: none;
    font-size: 1.125rem;
    line-height: 1.35rem;
}

/* Font override utility classes */
.futura-std {
    font-family: var(--ff-futura-std) !important;
}

.futura-bold-std {
    font-family: var(--ff-futura-bold-std) !important;
}

.futura-std-oblique {
    font-family: var(--ff-futura-std-oblique) !important;
}

.futura-extra-black {
    font-family: var(--ff-futura-extra-black) !important;
}
.green {
    color: var(--clr-green);
}

.light-black {
    color: var(--clr-light-black);
}

a:hover,
a:focus {
    font-weight: var(--fw-700);
}
/*a:not(.btn):hover,
a:not(.btn):focus {
    text-decoration: underline;
    font-weight: var(--fw-700);
}
*/
p {
    font-family: var(--ff-roboto);
    font-size: var(--fs-300);
    font-weight: var(--fw-300);
    line-height: 1.2rem;
}

.text-danger {
    color: red;
    font-family: var(--ff-roboto);
    font-size: var(--fs-400);
}

    .text-danger.pleasa {
        color: var(--clr-hover-pleasa);
        font-family: var(--ff-futura-std);
        font-size: var(--fs-400);
    }

.alert {
    color: red;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.invalid {
    outline: 1px solid #e50000;
}
/** Standard form settings */
.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/** Standard border box for form pages */
.border-box {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid black;
    border-top: 0px solid black;
}

    .border-box .border-box--center {
        width: 50%;
        max-width: 45rem;
    }

@media screen and (max-width: 992px) {
    .border-box .border-box--center {
        width: 100%;
        border: 0px solid black;
    }

    .big-big-headline {
        line-height: 3rem;
    }
}

.border-box .border-box--center .padding-box {
    padding: 1.5rem;
    gap: 1rem;
    width: 100%;
}

    .border-box .border-box--center .padding-box .title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        font-size: var(--fs-600);
        font-weight: var(--fw-600);
        line-height: 3rem;
    }

.btn {
    display: inline-block;
    text-decoration: none;
    padding: 1rem;
    /*    padding: 0.8em 2em;*/
    background-color: var(--clr-green);
    color: var(--clr-black);
    
    font-size: var(--fs-300);
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: 1.2rem;
    border: 1px solid transparent;
    text-align: center;
}

.btn-disabled {
    background-color: var(--clr-lightgreen);
}

.btn-white {
    background-color: white;
    border: 1px solid var(--clr-black);
}

.btn-secondary {
    height: 55px;
    padding: 1rem;
    background-color: var(--clr-bg-grey);
    border: 1px solid transparent;
}

.btn-black {
    color: var(--clr-green);
    background-color: var(--clr-light-black);
    border: 1px solid var(--clr-green);
}
.btn-pleasa-primary {
    background-color: var(--clr-btn-pleasa);
    color: white;
    border: 1px solid var(--clr-black);
    font-family: var(--ff-roboto);
    font-size: var(--fs-300);
    font-weight: var(--fw-600);
}

.btn:hover,
.btn-secondary:hover,
.btn:focus
.btn-secondary:focus {
    cursor: pointer;
    font-weight: var(--fw-600); /**Keep same font-weight **/
    /* color: var(--clr-primary-400);*/
    border-color: var(--clr-light-black);
}

.btn-white:hover,
.btn-white:focus {
    background-color: var(--clr-green);
    border-color: var(--clr-light-black);
}

.btn-black:hover,
.btn-black:focus {
    background-color: var(--clr-green);
    border-color: var(--clr-light-black);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

.btn-pleasa-primary:hover {
    background-color: var(--clr-hover-pleasa);
    cursor: pointer;
   /* transform: translateY(-1px);*/
}

.dialog .btn-black:hover,
.dialog .btn-black:focus {
    color: var(--clr-green);
    background-color: var(--clr-light-black);
    border-color: var(--clr-light-black);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}


.button-size {
    width: 12rem;
    flex-shrink: 0;
}
/* Utility classes */
.mb-05 {
    margin-bottom: 0.5rem;
}
.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}

.me-1 {
    margin-right: 1rem;
}
.ps-1 {
    padding-left: 1rem;
}
.pr-1 {
    padding-right: 1rem;
}
.pr-2 {
    padding-right: 2rem;
}
.pr-6 {
    padding-right: 6rem;
}
.pt-1 {
    padding-top: 1rem;
}

.pb-1 {
    padding-bottom: 1rem;
}

.pt-2 {
    padding-top: 2rem;
}
.pb-2 {
    padding-bottom: 2rem;
}

.p-1 {
    padding: 1rem;
}

.p-2 {
    padding: 2rem;
}
.p-3 {
    padding: 3rem;
}
.p-4 {
    padding: 4rem;
}

.p-8 {
    padding: 8rem;
}

.gap-1 {
    gap: 1rem;
}

.gap-2 {
    gap: 2rem;
}

.gap-3 {
    gap: 3rem;
}

.gap-4 {
    gap: 4rem;
}
.fw-bold {
    font-weight: var(--fw-700);
}

/* Border helper classes */
.border {
    border: 1px solid;
}

.border-top-1 {
    border-top: 1px solid;
}

.border-top-2 {
    border-top: 2px solid;
}

.border-bottom-1 {
    border-bottom: 1px solid;
}

.border-bottom-2 {
    border-bottom: 2px solid;
}
/* Flex helpers*/
.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-flex-end {
    justify-content: flex-end;
}


.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.relative {
    position: relative;
}

.top-right {
    position: absolute;
    top: 0;
    right: 0;
}

    .top-right:hover {
        cursor: pointer;
    }

/* Make all items except first have a margin top */
.flow-content > * + * {
    margin-top: var(--flow-space, var(--spacer));
}

.flow-content--medium {
    --flow-space: 2.5rem;
}

.flow-content--large {
    --flow-space: 3rem;
}

.container {
    max-width: 120rem;
    min-width: 20rem;
    margin: 0 auto;
}

.width-40p {
    width: 40%;
}

.width-50p {
    width: 50%;
}

.width-60p {
    width: 60%;
}

.width-75p {
    width: 75%;
}


.width-100p {
    width: 100%;
}

.split {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 992px ) {
    .split {
        flex-direction: row;
    }
}

.order .row .value {
    color: var(--clr-light-black);
    text-align: right;
    font-family: var(--ff-roboto);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

.order .row .title {
    grid-column: span 2;
    color: #000;
    font-family: var(--ff-syne);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}


.order .row .header {
    color: var(--clr-light-black);
    font-family: var(--ff-roboto);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
}

.input {
    position: relative;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid black;
    height: 55px;
    margin-bottom: 1rem;
    padding: 1rem;
}

.big-number {
    font-feature-settings: 'case' on;
    font-family: var(--ff-syne);
    font-size: var(--fs-500);
    /*font-size: 1.8rem;*/
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: 2.25rem;
}

/* BIG BIG HEADLINE */
.biggest-headline {
    font-feature-settings: 'case' on;
    font-family: var(--ff-syne);
    font-size: var(--fs-900);
    font-style: normal;
    font-weight: var(--fw-700);
    line-height: var(--lh-900);
}
/* DESKTOP/Headline 2 */
.bigger-headline {
    font-family: var(--ff-syne);
    font-size: var(--fs-700);
    font-style: normal;
    font-weight: var(--fw-700);
    line-height: var(--lh-700);
}

/* DESKTOP/Big headline */
.big-headline {
    font-feature-settings: 'case' on;
    font-family: var(--ff-syne);
    font-size: var(--fs-700);
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: var(--lh-600);
}

.small-headline {
    font-size: var(--fs-600);
    font-weight: var(--fw-600);
    line-height: var(--lh-600);
    font-style: normal;
}

.medium-headline p {
    color: var(--clr-black);
    text-align: center;
    font-family: var(--ff-syne);
    font-size: 1.875rem;
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: 2.25rem;
}

.bread-copy p {
    color: var(--clr-black);
    font-size: 0.9375rem;
    /* font-size: var(--fs-300); */
    font-style: normal;
    font-weight: var(--fw-300);
    line-height: 1.125rem;
}

.blazored-icon {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}


/* Classes for dialogs */

.overlay {
    top: 0;
    left: 0;
    z-index: 100; /** or 1 */
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*    opacity: 0.5;
    background: var(--Grey-background, #F5F5F5);*/
    background-color: rgba(0,0, 0, 0.5);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.dialog {
    position: fixed;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    flex-shrink: 0;
    display: flex;
}

.dialog-border-box {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

.dialog-border-box--green {
    background-color: var(--clr-green);
    border: 1px solid black;
}


.dialog .title {
    font-size: var(--fs-600);
    font-weight: var(--fw-600);
/*    line-height: var(--lh-700);
*/}

.dialog .sub-title {
    font-size: var(--fs-500);
    font-weight: var(--fw-500);
    line-height: var(--lh-500);
}

.dialog .label {
    font-size: var(--fs-300);
    font-weight: var(--fw-300);
    line-height: var(--lh-300);
}
/** make input with transperant border and black highlight **/
.dialog .input {
    border: 0.5px solid transparent;
    background-color: #FFF; /* Equivalent to fill: #FFF; */
    border-width: 1px; /* Equivalent to stroke-width: 1px; */
    border-color: #BABABA; /* Equivalent to stroke: #BABABA; */
}
    .dialog .input:hover,
    .dialog .input:focus {
        border: 0.5px solid black;
        outline-color: initial;
        outline-width: 0.5px;
        border-color: var(--clr-black);
    }