/*------------------------------------*\
            BASIC STYLING
\*------------------------------------*/

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    --Fonts-Font-Family: "Fira Sans", sans-serif;
    --Fonts-h1: 22px;
    --Fonts-h2: 20px;
    --Fonts-p: 14px;

    --Fill-Information-strong: #7E47CC;
    --Fill-Information-weak: #f8f6fc;
    --Fill-Brand-strong: #3761EE;
    --Fill-Brand-weak: #f5f7fe;
    --Fill-Error-strong: #C73A3A;
    --Fill-Error-weak: #fff6f6;
    --Fill-Success-strong: #067A57;
    --Fill-Success-weak: #f2fcf9;
    --Fill-Warning-strong: #8F6C1A;
    --Fill-Warning-weak: #fffcf4;

    --Text-Default: #5a5a5a;
    --Text-Default-Secondary: #000C33;
}

body {
    font-family: var(--Fonts-Font-Family, "Fira Sans"), sans-serif !important;
    font-weight: normal !important;
    color: var(--Text-Default) !important;
    font-size: 14px !important; /* 14px is the default font size */
    line-height: 1.5 !important; /* 21px */
}

/*------------------------------------*\
            WIDTH & HEIGHT
\*------------------------------------*/
.w-4 {
    width: 1rem !important; /* 16px */
}

.w-6 {
    width: 1.5rem !important; /* 24px */
}

.w-8 {
    width: 2rem !important; /* 32px */
}

.w-16 {
    width: 4rem !important; /* 64px */
}

.w-25 {
    width: 25% !important;
}

.w-33 {
    width: 33% !important;
}

.w-49 {
    width: 49% !important; /* 49% is used for the 2 column layout */
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.w-full {
    width: 100% !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.mw-100 {
    max-width: 100% !important;
}

.mh-100 {
    max-height: 100% !important;
}

.vh-100 {
    height: 100vh !important;
}

.vw-100 {
    width: 100vw !important;
}

/*------------------------------------*\
          MARGINS & PADDING
\*------------------------------------*/

.m-0 {
    margin: 0 !important;
}

.mt-0,
.my-0 {
    margin-top: 0 !important;
}

.mr-0,
.mx-0 {
    margin-right: 0 !important;
}

.mb-0,
.my-0 {
    margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
    margin-left: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.mt-1,
.my-1 {
    margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
    margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
    margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
    margin-left: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
    margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
    margin-left: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.mt-3,
.my-3 {
    margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
    margin-right: 1rem !important;
}

.mb-3,
.my-3 {
    margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
    margin-left: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.mt-4,
.my-4 {
    margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
    margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
    margin-left: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-5,
.my-5 {
    margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
    margin-right: 3rem !important;
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
    margin-left: 3rem !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-0,
.py-0 {
    padding-top: 0 !important;
}

.pr-0,
.px-0 {
    padding-right: 0 !important;
}

.pb-0,
.py-0 {
    padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
    padding-left: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.pt-1,
.py-1 {
    padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
    padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
    padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
    padding-left: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.pt-2,
.py-2 {
    padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
    padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
    padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
    padding-left: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.pt-3,
.py-3 {
    padding-top: 1rem !important;
}

.pr-3,
.px-3 {
    padding-right: 1rem !important;
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
    padding-left: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.pt-4,
.py-4 {
    padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
    padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
    padding-left: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-5,
.py-5 {
    padding-top: 3rem !important;
}

.pr-5,
.px-5 {
    padding-right: 3rem !important;
}

.pb-5,
.py-5 {
    padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
    padding-left: 3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mt-auto,
.my-auto {
    margin-top: auto !important;
}

.mr-auto,
.mx-auto {
    margin-right: auto !important;
}

.mb-auto,
.my-auto {
    margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
}

/*------------------------------------*\
                TEXT
\*------------------------------------*/

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.nowrap {
    white-space: nowrap !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.font-weight-light {
    font-weight: 300 !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.font-italic {
    font-style: italic !important;
}

.text-white {
    color: #fff !important;
}

.text-default {
    color: var(--Text-Default) !important;
}

.text-default-secondary {
    color: var(--Text-Default-Secondary) !important;
    opacity: 65% !important;
}

.text-primary {
    color: #007bff !important;
}

a.text-primary:hover, a.text-primary:focus {
    color: #0062cc !important;
}

.text-blue {
    color: #3866c6 !important;
}

.text-secondary {
    color: #6c757d !important;
}

a.text-secondary:hover, a.text-secondary:focus {
    color: #545b62 !important;
}

.text-success {
    color: #28a745 !important;
}

a.text-success:hover, a.text-success:focus {
    color: #1e7e34 !important;
}

.text-info {
    color: #17a2b8 !important;
}

a.text-info:hover, a.text-info:focus {
    color: #117a8b !important;
}

.text-warning {
    color: #ffc107 !important;
}

a.text-warning:hover, a.text-warning:focus {
    color: #d39e00 !important;
}

.text-danger {
    color: #dc3545 !important;
}

a.text-danger:hover, a.text-danger:focus {
    color: #bd2130 !important;
}

.text-light {
    color: #f8f9fa !important;
}

a.text-light:hover, a.text-light:focus {
    color: #dae0e5 !important;
}

.text-dark {
    color: #343a40 !important;
}

a.text-dark:hover, a.text-dark:focus {
    color: #1d2124 !important;
}

.text-muted {
    color: #6c757d !important;
}

.text-hide {
    color: transparent !important;
    text-shadow: none !important;
    background-color: transparent !important;
    border: 0 !important;
}

.text-lg {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.75rem !important; /* 28px */
}

.break-words {
    overflow-wrap: break-word !important;
}

.text-ellipsis {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/*------------------------------------*\
              VISIBILITY
\*------------------------------------*/

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

/*------------------------------------*\
              TABLES
\*------------------------------------*/

tr.even {
    background-color: #f8f9fa;
}

/*------------------------------------*\
              POSITIONING
\*------------------------------------*/

.float-right {
    float: right !important;
}

.absolute {
    position: absolute !important;
}

.relative {
    position: relative !important;
}

.fixed {
    position: fixed !important;
}

.-bottom-1 {
    bottom: -0.25rem !important;
}

.left-16 {
    left: 4rem !important; /* 64px */
}

/*------------------------------------*\
              HOVER
\*------------------------------------*/

.hv-pointer:hover {
    cursor: pointer !important;
}

/*------------------------------------*\
              FLEX
\*------------------------------------*/
.flex {
    display: flex !important;
}

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

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

.flex-col {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.gap-1 {
    gap: 0.25rem !important; /* 4px */
}

.gap-2 {
    gap: 0.5rem !important; /* 8px */
}

.gap-3 {
    gap: 0.75rem !important; /* 12px */
}

.gap-4 {
    gap: 1rem !important; /* 16px */
}

.gap-5 {
    gap: 1.25rem !important; /* 20px */
}

.gap-6 {
    gap: 1.5rem !important; /* 24px */
}

.gap-7 {
    gap: 1.75rem !important; /* 28px */
}

.gap-8 {
    gap: 2rem !important; /* 32px */
}

.gap-12 {
    gap: 3rem !important; /* 48px */
}

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

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

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

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

.justify-between {
    justify-content: space-between !important;
}
/*------------------------------------*\
              CURSOR
\*------------------------------------*/
.cursor-pointer {
    cursor: pointer !important;
}
/*------------------------------------*\
              ROUNDING
\*------------------------------------*/
.rounded-lg {
    border-radius: 0.5rem !important; /* 8px */
}

.rounded-t-lg {
    border-top-left-radius: 0.5rem !important; /* 8px */
    border-top-right-radius: 0.5rem !important; /* 8px */
}

.rounded-full {
    border-radius: 9999px !important;
}
/*------------------------------------*\
              BACKGROUND
\*------------------------------------*/
.bg-white {
    background-color: var(--white) !important;
}

.bg-default {
    background-color: #F5F6FA !important;
}

.bg-black {
    background-color: #000 !important;
}

.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.bg-red-500 {
    background-color: #e1272b !important;
}

.bg-blue-500 {
    background-color: #4299e1 !important;
}

.hover-bg-red-600:hover {
    background-color: #b41f22 !important;
}

.hover-bg-blue-600:hover {
    background-color: #2b6cb0 !important;
}

.hover-bg-gray-400:hover {
    background-color: #d1d5db !important;
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px) !important;
}
/*------------------------------------*\
              VISIBILITY
\*------------------------------------*/
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}
/*------------------------------------*\
              TRANSITION
\*------------------------------------*/
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.duration-200 {
    transition-duration: 200ms !important;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/*------------------------------------*\
              TRANSFORM
\*------------------------------------*/
.hover-scale-105:hover {
    transform: scale(1.05) !important;
}

.rotate-180 {
    transform: rotate(180deg) !important;
}
/*------------------------------------*\
                BORDER
\*------------------------------------*/
.border {
    border-width: 1px !important;
    border-style: solid !important;
}

.border-gray-300 {
    border-color: #d6d6d6; !important;
}

/*------------------------------------*\
            FULL CLASSES
\*------------------------------------*/
.button-primary {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: normal !important;
    background-color: #4680f7 !important;
    color: #fff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    border: 0 !important;
}

.button-primary:hover, .button-primary:focus {
    background-color: #3866c6 !important;
}

.button-primary:disabled {
    background-color: #b1c4e0 !important;
    color: #fff !important;
    cursor: default !important;
}

.button-success {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: normal !important;
    background-color: #39a65f !important;
    color: #fff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    border: 0 !important;
}

.button-success:hover, .button-success:focus {
    background-color: #2e854c !important;
}

.button-success:disabled {
    background-color: #b1e0c4 !important;
    color: #fff !important;
    cursor: default !important;
}

.button-danger {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: normal !important;
    background-color: #e1272b !important;
    color: #fff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    border: 0 !important;
}

.button-danger:hover, .button-danger:focus {
    background-color: #b41f22 !important;
}

.button-danger:disabled {
    background-color: #e0b1b1 !important;
    color: #fff !important;
    cursor: default !important;
}

.button-neutral {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: normal !important;
    background-color: #ffffff !important;
    color: #2c2c2c !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 0 0 1px #4680f7 inset !important;
    border: 0 !important;
}

.button-neutral:hover, .button-neutral:focus {
    background-color: #f3f3f3 !important;
    box-shadow: 0 0 0 1px #3866c6 inset !important;
    border: 0 !important;
}

.button-neutral:disabled {
    color: #6b6b6b !important;
    cursor: default !important;
    opacity: 0.6 !important;
}

.button-neutral:disabled,
.button-neutral:disabled:hover,
.button-neutral:disabled:focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 1px #b1c4e0 inset !important;
}

.button-stealth {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: normal !important;
    background-color: transparent !important;
    color: #4680f7 !important;
    text-decoration: underline !important;
    padding: 0.5rem 1rem !important;
    border: 0 !important;
}

.button-stealth:hover, .button-stealth:focus {
    background-color: #e6e8f0 !important;
    border-radius: 0.25rem !important;
}

.header-font {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: bold !important;
    color: #334681 !important;
    letter-spacing: 0 !important;
}

.header-font h1 {
    font-size: 26px !important;
    line-height: 31px !important;
}

.header-font h2 {
    font-size: 22px !important;
    line-height: 28px !important;
}

.header-font h3 {
    font-size: 20px !important;
    line-height: 24px !important;
}

.header-font h4 {
    font-size: 18px !important;
    line-height: 22px !important;
}

.body-font {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: normal !important;
    color: #5a5a5a !important;
}

.body-font p,
.body-font a {
    font-size: 14px !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
}

.input-primary {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: normal !important;
    background-color: #fff !important;
    color: #5a5a5a !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid #adadad !important;
}

/* ------------------------------------*\
              PAGE SCROLL
\*------------------------------------*/

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-visible {
    overflow: visible !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overflow-y-hidden {
    overflow-y: hidden !important;
}

.overflow-x-visible {
    overflow-x: visible !important;
}

.overflow-y-visible {
    overflow-y: visible !important;
}

.overflow-x-scroll {
    overflow-x: scroll !important;
}

.overflow-y-scroll {
    overflow-y: scroll !important;
}

.scroll-smooth {
    scroll-behavior: smooth !important;
}

.scroll-auto {
    scroll-behavior: auto !important;
}

/* ------------------------------------*\
                 FILTERS
\*------------------------------------*/

.grayscale {
    filter: grayscale(100%) !important;
}

.blur-lg {
    filter: blur(16px) !important;
}

/* ------------------------------------*\
              CUSTOM ESF
\*------------------------------------*/

.dataTables_wrapper .dataTables_length select {
    font-family: "Fira Sans", sans-serif !important;
    font-weight: normal !important;
    background-color: #fff !important;
    color: #5a5a5a !important;
    padding: 0.5rem 2rem 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid #adadad !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%234680f7%22%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: .9rem;
    appearance: none;
}

.search-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23588cf7' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-position: 98%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

.esignflow-card {
    display: flex;
    width: 180px;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;

    border-radius: 8px;
    border: 1px solid rgba(0, 23, 102, 0.10);
    background: #FFF;

    /* Shadow/Raised */
    box-shadow: 0 2px 4px -2px rgba(0, 29, 128, 0.05), 0 4px 8px -2px rgba(0, 29, 128, 0.05);
}

.esignflow-card:hover {
    scale: 1.02;
    background-color: #e6e8f0;
}

.esignflow-card:focus {
    scale: 1.02;
    background-color: #e6e8f0;
    border: 1px solid #5c7eee;
}

.esignflow-card:active {
    scale: 1;
    background-color: #d1d3e0;
    border: 1px solid #5c7eee;
}

.esignflow-icon-wrapper {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;

    border-radius: 100px;
    border: 1px solid rgba(0, 23, 102, 0.10);
}

/*
Dit zorgt ervoor dat enkele divs de volledige breedte van het scherm innemen
Dit is een oplossing om DNN layout te omzeilen
Door fixed widths wordt anders de DNN container te klein
 */
.dnn-width-fix {
    height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

.dnn-width-fix > div {
    width: 25rem !important;
}

.esignflow-input {
    min-height: 2.25rem; /* 36px */
    border: 1px solid rgba(0, 18, 77, 0.40);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}

.esignflow-input:focus {
    border-color: #5c7eee;
    box-shadow: 0 0 0 1px rgba(92, 126, 238, 0.5);
}

.esignflow-input::placeholder {
    color: rgba(0, 18, 77, 0.40);
    opacity: 1; /* Override default opacity */
}

.esignflow-input:disabled {
    background-color: #f5f6fa;
    color: rgba(0, 18, 77, 0.40);
    border-color: rgba(0, 18, 77, 0.40);
    cursor: not-allowed;
}

.dnnFormItem {
    position: relative;
}

.form-validation-error {
    position: absolute;
    top: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--Fill-Error-weak, #fff4f4);
    color: var(--Fill-Error-strong, #C73A3A);
    border: 1px solid var(--Fill-Error-strong, #C73A3A);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.95em;
    margin-left: 8px;
    box-shadow: 0 2px 6px rgba(211,47,47,0.08);
    max-width: 320px;
    word-break: break-word;
    text-align: left;
}

.form-validation-error::before {
    content: "⚠️";
    font-size: 1.1em;
    margin-bottom: 6px;
}

/* ------------------------------------*\
                TITLES
\*------------------------------------*/

h1 {
    all: unset !important;
    /* h1/Bold */
    font-family: var(--Fonts-Font-Family, "Fira Sans"), sans-serif !important;
    font-size: var(--Fonts-h1, 22px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important; /* 33px */
}

h2 {
    all: unset !important;
    /* h2/Bold */
    font-family: var(--Fonts-Font-Family, "Fira Sans"), sans-serif !important;
    font-size: var(--Fonts-h2, 20px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important; /* 30px */
}

h3 {
    all: unset !important;
    /* h3/Bold */
    font-family: var(--Fonts-Font-Family, "Fira Sans"), sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important; /* 27px */
}

h4 {
    all: unset !important;
    /* h4/Bold */
    font-family: var(--Fonts-Font-Family, "Fira Sans"), sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important; /* 24px */
}

h5 {
    all: unset !important;
    /* h5/Bold */
    font-family: var(--Fonts-Font-Family, "Fira Sans"), sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important; /* 21px */
}

p {
    all: unset !important;
    /* p/Regular */
    font-family: var(--Fonts-Font-Family, "Fira Sans"), sans-serif !important;
    font-size: var(--Fonts-p, 14px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 150% !important; /* 21px */
}

/* ------------------------------------*\
                DIALOG
\*------------------------------------*/

dialog[open] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(2px);
    border: none;
}

.ticket-dialog {
    width: 40rem;
}

.ticket-dialog-content {
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
}

/* ------------------------------------*\
              NOTIFICATIONS
\*------------------------------------*/

.v2-notification-information {
    padding: 1rem;
    color: var(--Text-Default-Secondary) !important;
    background-color: var(--Fill-Information-weak);
    border-radius: 0.5rem;
    border: 1px solid var(--Fill-Information-strong);
    border-left: 5px solid var(--Fill-Information-strong);
}

.v2-notification-brand {
    padding: 1rem;
    color: var(--Text-Default-Secondary) !important;
    background-color: var(--Fill-Brand-weak);
    border-radius: 0.5rem;
    border: 1px solid var(--Fill-Brand-strong);
    border-left: 5px solid var(--Fill-Brand-strong);
}

.v2-notification-error {
    padding: 1rem;
    color: var(--Text-Default-Secondary) !important;
    background-color: var(--Fill-Error-weak);
    border-radius: 0.5rem;
    border: 1px solid var(--Fill-Error-strong);
    border-left: 5px solid var(--Fill-Error-strong);
}

.v2-notification-success {
    padding: 1rem;
    color: var(--Text-Default-Secondary) !important;
    background-color: var(--Fill-Success-weak);
    border-radius: 0.5rem;
    border: 1px solid var(--Fill-Success-strong);
    border-left: 5px solid var(--Fill-Success-strong);
}

.v2-notification-warning {
    padding: 1rem;
    color: var(--Text-Default-Secondary) !important;
    background-color: var(--Fill-Warning-weak);
    border-radius: 0.5rem;
    border: 1px solid var(--Fill-Warning-strong);
    border-left: 5px solid var(--Fill-Warning-strong);
}