h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #c0307e;
    background-position-y: 1rem;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    font-family: Arial;
}

.euclaim-icon {
    width: 20px;
    height: 20px;
}

:root {
    /* EUclaim colors */
    --euclaim-white: #FFFFFF;
    --euclaim-blue-lighter: #f2f9fc;
    --euclaim-blue-light: #d3e8f2;
    --euclaim-blue: #005F96;
    --euclaim-green-lighter: #eafff3;
    --euclaim-green: #C9EAE3;
    --euclaim-green-dark: #7ED2C1;
    --euclaim-green-darker: #55baa5;
    --euclaim-brown-lighter: #FEF0C9;
    --euclaim-brown: #8B4A2F;
    --euclaim-red-lighter: #FFEDED;
    --euclaim-red: #D72F36;
    --euclaim-purple-lighter: #F4EBFF;
    --euclaim-purple: #483880;
    --euclaim-pink-lighter: #f1cddf;
    --euclaim-pink: #C0307E;
    /* EUclaim variables */
    --euclaim-background: var(--euclaim-white);
    /* Overwrite Radzen color variables */
    --rz-primary-lighter: var(--euclaim-blue-lighter);
    --rz-primary-light: var(--euclaim-blue-light);
    --rz-primary: var(--euclaim-blue);
    --rz-on-primary-lighter: var(--euclaim-blue);
    --rz-secondary-lighter: var(--euclaim-green-lighter);
    --rz-secondary: var(--euclaim-green);
    --rz-secondary-dark: var(--euclaim-green-dark);
    --rz-secondary-darker: var(--euclaim-green-darker);
    --rz-on-secondary: var(--rz-primary);
    --rz-info-lighter: var(--euclaim-purple-lighter);
    --rz-info: var(--euclaim-purple);
    --rz-danger-lighter: var(--euclaim-red-lighter);
    --rz-danger: var(--euclaim-red);
    --rz-warning-lighter: var(--euclaim-brown-lighter);
    --rz-on-warning-lighter: var(--euclaim-brown);
    --rz-warning: var(--euclaim-brown);
    --rz-body-background-color: var(--euclaim-background);
    --rz-button-border-radius: 50px;
    /*Text default font and color*/
    --rz-body-font-size: 1rem;
    --rz-text-font-family: "PFDINTextPro";
    --rz-text-color: var(--euclaim-blue);
    --rz-text-title-color: var(--euclaim-blue);
    /*Modal / Dialog*/
    --rz-dialog-mask-background-color: var(--euclaim-blue);
    --rz-dialog-title-color: var(--euclaim-blue);
    --rz-dialog-close-color: var(--euclaim-blue);
    --rz-dialog-close-hover-color: var(--euclaim-blue-light);
    --rz-dialog-border-radius: 8px;
    /*Uploud field*/
    --rz-upload-choose-background-color: unset;
    --rz-upload-choose-hover-background-color: var(--rz-primary);
    /*Check box*/
    --rz-checkbox-checked-background-color: var(--rz-primary);
    --rz-checkbox-checked-icon-background-color: var(--rz-primary);
    --rz-checkbox-checked-color: var(--euclaim-white);
    /*Textbox*/
    --rz-input-background-color: var(--euclaim-white);
    --rz-input-placeholder-color: var(--rz-primary);
    /* Cards */
    --rz-border-radius: 8px;
    --rz-card-border: 1px solid var(--euclaim-blue-light);
    /* Content width */
    --euclaim-content-width: min(1160px, calc(100vw - 2rem));
    /* Form panels */
    --rz-dropdown-panel-border: 1px solid var(--rz-primary);
    --rz-datepicker-panel-shadow: none;
    --rz-datepicker-panel-border: 1px solid var(--rz-primary);
    /* Notifications with toasters */
    --rz-notification-success-background-color: var(--euclaim-green);
    --rz-notification-success-color: var(--euclaim-blue);
    --rz-notification-success-icon-color: var(--euclaim-blue);
    --rz-notification-error-background-color: var(--euclaim-red);
}

    :root * {
        font-weight: normal;
        text-transform: none;
    }

/* Removes the default Radzen background image */
body {
    background: none !important;
}

.rz-body {
    padding: 0;
}

/* Keep everything inside the card and button borders */
.rz-card,
.rz-button {
    overflow: hidden;
}

/* Correct the offset of the button text relative to the icon */
.rz-button-text {
    margin-top: 2px;
}

@font-face {
    font-family: "PFDINTextPro";
    src: url('/fonts/PFDINTextPro-Regular.woff') format('woff');
}

@font-face {
    font-family: "PFDINTextProLight";
    src: url('/fonts/PFDINTextPro-Light.woff') format('woff');
}

:root *::selection {
    background: #3c69cf;
    color: white;
}

/*to make the background of a modal dialog darker*/
.rz-dialog-mask {
    opacity: 0.8;
}

.font-light {
    font-family: "PFDINTextProLight";
}

p {
    font-size: 1rem;
}

/* Removes the double border from selected fields. */
.rz-form .rz-form-row .rz-textbox,
.rz-textarea,
.rz-dropdown {
    border: 1px solid var(--rz-primary-light) !important; /* Light border by default. */
    box-shadow: none !important; /* Removes the double border from selected fields. */
}

    .rz-form .rz-form-row .rz-textbox:hover,
    .rz-form .rz-form-row .rz-textbox:focus,
    .rz-form .rz-form-row .rz-textbox:has(.rz-state-focused),
    .rz-textarea:hover,
    .rz-textarea:focus,
    .rz-textarea:has(.rz-state-focused),
    .rz-dropdown:hover,
    .rz-dropdown:focus,
    .rz-dropdown:has(.rz-state-focused) {
        /* Blue border when field is hovered over or selected. */
        border-color: var(--rz-primary) !important;
        box-shadow: none !important; /* Removes the double border from selected fields. */
    }

    .rz-form .rz-form-row .rz-textbox:has(.invalid),
    .rz-textarea:has(.invalid),
    .rz-dropdown:has(.invalid) {
        /* If the form field contains an input with the .invalid class, the border becomes red. */
        border-color: var(--rz-danger) !important;
        box-shadow: none !important /* Removes the double border from selected fields. */
    }

.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value {
    background-color: var(--rz-primary);
}

/* Prevent the browser from adding a light blue background color for autofilled fields like accounts and addresses */
/* Note: setting the background-color directly does not work. It has to be a transition. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

@media (max-width: 767px) {
    .rz-calendar-header {
        /* Border radius of the to part of a date picker dropdown. Prevents the content from covering the border. */
        border-radius: var(--rz-border-radius);
    }
}

@media (max-width: 767px) {
    :root {
        --rz-timeline-axis-size: 2rem;
    }

    .rz-body {
        padding: 0;
    }

    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        position: absolute;
        width: 90% !important;
        inset-block-start: unset !important;
        border-radius: var(--rz-dialog-border-radius);
    }
}

.error-close-button {
    margin-top: -5px;
    margin-right: -15px;
}
