:root {
    /*set Browser-Color (e.g. scrollbars)*/
    color-scheme: light;

    /*CSS-variables of Materiall*/
    --mdc-theme-primary: #145D87;
    --mdc-theme-on-primary: #FFFFFF;
    --mdc-theme-secondary: #333E48;
    --mdc-theme-on-secondary: #FFFFFF;
    --mdc-theme-surface: #FFFFFF;
    --mdc-theme-on-surface: #000000;
    --mdc-theme-background: #FFFFFF;
    --mdc-theme-on-background: #000000;
    --mdc-theme-error: #932121;
    --mdc-theme-on-error: #FFFFFF;
    --mdc-theme-text-hint-on-background: rgba(0,0,0,0.87);
    --mdc-theme-text-primary-on-background: rgba(0,0,0,0.87);
    --mdc-theme-text-secondary-on-background: rgba(0,0,0,0.87);
    --mdc-theme-text-disabled-on-background: rgba(0,0,0,0.87);
    --mdc-theme-text-icon-on-background: rgba(0,0,0,0.87);
    --mdc-checkbox-unchecked-color: rgba(0,0,0,0.87);
    --mdc-checkbox-checked-color: var(--mdc-theme-secondary);
    --mdc-checkbox-disabled-color: rgba(0,0,0,0.87);
    --mdc-checkbox-ink-color: rgba(255,255,255,0.87);
    --mdc-theme-text-primary-on-light: rgba(0,0,0,0.87);
    --mdc-theme-text-secondary-on-light: rgba(0,0,0,0.87);
    --mdc-theme-text-hint-on-light: rgba(0,0,0,0.87);
    --mdc-theme-text-disabled-on-light: rgba(0,0,0,0.7);
    --mdc-theme-text-icon-on-light: rgba(0,0,0,0.87);
    --mdc-theme-text-icon-on-dark: rgba(255,255,255,0.87);
    --mdc-theme-text-disabled-on-dark: rgba(255,255,255,0.87);
    --mdc-theme-text-hint-on-dark: rgba(255,255,255,0.87);
    --mdc-theme-text-secondary-on-dark: rgba(255,255,255,0.87);
    --mdc-theme-text-primary-on-dark: #FFFFFF;
    --mdc-ripple-hover-opacity: 0.09;
    --mdc-ripple-press-opacity: 0.15;
    --mdc-ripple-color: rgba(0,0,0,0.87);
    --mdc-text-button-label-text-color: var(--mdc-theme-primary);
    --mdc-text-button-hover-state-layer-color: var(--mdc-theme-primary);

    /*Additional colors used by multiple components (in light they mostly match materials default-value)*/
    --dmc-theme-on-background12: rgba(0,0,0,0.87);/*e.g. disabled button*/
    --dmc-theme-background12: rgba(255,255,255,0.87);
    --dmc-theme-background32: rgba(255,255,255,0.87);
    --dmc-theme-on-background32: rgba(0,0,0,0.87);
    --dmc-theme-background38: rgba(255,255,255,0.87);
    --dmc-theme-on-background38: rgba(0,0,0,0.87);
    --dmc-theme-background50: rgba(255,255,255,0.87);
    --dmc-theme-on-background50: rgba(0,0,0,0.87);
    --dmc-theme-background54: rgba(255,255,255,0.87);
    --dmc-theme-on-background54: rgba(0,0,0,0.87);
    --dmc-theme-background60: rgba(255,255,255,0.87);
    --dmc-theme-on-background60: rgba(0,0,0,0.87);/*e.g. unselected tab or textfield*/
    --dmc-theme-background62: rgba(255,255,255,0.87);
    --dmc-theme-on-background62: rgba(0,0,0,0.87);
    --dmc-theme-background70: rgba(255,255,255,0.87);
    --dmc-theme-on-background70: rgba(0,0,0,0.87);
    --dmc-theme-background87: rgba(255,255,255,0.87);
    --dmc-theme-on-background87: rgba(0,0,0,0.87);

    --dmc-theme-disabled-text: rgba(0,0,0,0.7);
    --dmc-theme-disabled-background: #cccccc;
    --dmc-theme-on-disabled-background: rgba(0,0,0,0.7);
    --dmc-theme-chip-color: #cccccc;
    --dmc-theme-on-chip-color: rgba(0,0,0,1);
    --dmc-theme-chip-selected: var(--mdc-theme-primary);
    --dmc-theme-on-chip-selected: rgba(255,255,255,1);
    --dmc-theme-snackbar: #333333;
    --dmc-theme-snackbar-action: #86D4F1;
    --dmc-theme-progress: #e6e6e6;
    --dmc-theme-primary-transparent: rgba(20, 93, 135, 0.12);
    --dmc-theme-green: #358438;
    --dmc-theme-on-green: #FFFFFF;
    --dmc-theme-green-transparent: rgba(53, 132, 56 , 0.12);
    --dmc-theme-yellow: #C15806;
    --dmc-theme-on-yellow: #FFFFFF;
    --dmc-theme-yellow-transparent: rgba(193, 88, 6 ,0.12);
    --dmc-theme-red-transparent: rgba(147, 33, 33 ,0.12);
    --dmc-theme-smoke: #f5f5f5;
    /*--dmc-theme-on-smoke: #8f8f8f;*/

    --dmc-theme-elevation--z1: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z2: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z3: 0px 3px 3px -2px rgb(0 0 0 / 20%), 0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z4: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z5: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 5px 8px 0px rgb(0 0 0 / 14%), 0px 1px 14px 0px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z6: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z7: 0px 4px 5px -2px rgb(0 0 0 / 20%), 0px 7px 10px 1px rgb(0 0 0 / 14%), 0px 2px 16px 1px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z8: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z9: 0px 5px 6px -3px rgb(0 0 0 / 20%), 0px 9px 12px 1px rgb(0 0 0 / 14%), 0px 3px 16px 2px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z10: 0px 6px 6px -3px rgb(0 0 0 / 20%), 0px 10px 14px 1px rgb(0 0 0 / 14%), 0px 4px 18px 3px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z11: 0px 6px 7px -4px rgb(0 0 0 / 20%), 0px 11px 15px 1px rgb(0 0 0 / 14%), 0px 4px 20px 3px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z12: 0px 7px 8px -4px rgb(0 0 0 / 20%), 0px 12px 17px 2px rgb(0 0 0 / 14%), 0px 5px 22px 4px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z13: 0px 7px 8px -4px rgb(0 0 0 / 20%), 0px 13px 19px 2px rgb(0 0 0 / 14%), 0px 5px 24px 4px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z14: 0px 7px 9px -4px rgb(0 0 0 / 20%), 0px 14px 21px 2px rgb(0 0 0 / 14%), 0px 5px 26px 4px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z15: 0px 8px 9px -5px rgb(0 0 0 / 20%), 0px 15px 22px 2px rgb(0 0 0 / 14%), 0px 6px 28px 5px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z16: 0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z17: 0px 8px 11px -5px rgb(0 0 0 / 20%), 0px 17px 26px 2px rgb(0 0 0 / 14%), 0px 6px 32px 5px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z18: 0px 9px 11px -5px rgb(0 0 0 / 20%), 0px 18px 28px 2px rgb(0 0 0 / 14%), 0px 7px 34px 6px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z19: 0px 9px 12px -6px rgb(0 0 0 / 20%), 0px 19px 29px 2px rgb(0 0 0 / 14%), 0px 7px 36px 6px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z20: 0px 10px 13px -6px rgb(0 0 0 / 20%), 0px 21px 33px 3px rgb(0 0 0 / 14%), 0px 8px 40px 7px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z21: 0px 10px 13px -6px rgb(0 0 0 / 20%), 0px 21px 33px 3px rgb(0 0 0 / 14%), 0px 8px 40px 7px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z22: 0px 10px 14px -6px rgb(0 0 0 / 20%), 0px 22px 35px 3px rgb(0 0 0 / 14%), 0px 8px 42px 7px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z23: 0px 11px 14px -7px rgb(0 0 0 / 20%), 0px 23px 36px 3px rgb(0 0 0 / 14%), 0px 9px 44px 8px rgb(0 0 0 / 12%);
    --dmc-theme-elevation--z24: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);


    --dmc-theme-shell-color: ;

    --dmc-theme-primary-rgb: 20,93,135;
    --dmc-theme-on-primary-rgb: 255,255,255;
    --dmc-theme-secondary-rgb: 51,62,72;
    --dmc-theme-on-secondary-rgb: 255,255,255;
    --dmc-theme-surface-rgb: 255,255,255;
    --dmc-theme-on-surface-rgb: 0,0,0;
    --dmc-theme-background-rgb: 255,255,255;
    --dmc-theme-on-background-rgb: 0,0,0;
    --dmc-theme-error-rgb: 147,33,33;
    --dmc-theme-on-error-rgb: 255,255,255;

    --dmc-theme-opacity-0: 0.87;
    --dmc-theme-opacity-4: 0.87;
    --dmc-theme-opacity-12: 0.87;
    --dmc-theme-opacity-26: 0.87;
    --dmc-theme-opacity-32: 0.87;
    --dmc-theme-opacity-38: 0.87;
    --dmc-theme-opacity-42: 0.87;
    --dmc-theme-opacity-50: 0.87;
    --dmc-theme-opacity-54: 0.87;
    --dmc-theme-opacity-60: 0.87;
    --dmc-theme-opacity-62: 0.87;
    --dmc-theme-opacity-70: 0.87;
    --dmc-theme-opacity-87: 0.87;

    --dv-focus-border-outline: 2px solid var(--mdc-theme-primary, #145D87);
    --dv-active-outline: 2px solid var(--mdc-theme-secondary, #333E48);
    --dv-focus-border-default-offset: -2px;
    --dv-focus-border-outer-offset: 3px;
}

.v-input--is-focused, .v-field--focused  {
    outline: var(--dv-focus-border-outline, 2px solid var(--mdc-theme-primary, #1F89C3));
    outline-offset: var(--dv-focus-border-default-offset, -2px);
}

*:focus:not(.dvelopAccessibilityNoFocusBorder) {
    outline: var(--dv-focus-border-outline, 2px solid var(--mdc-theme-primary, #1F89C3)) !important;
    outline-offset: var(--dv-focus-border-default-offset, -2px) !important;
}

.dvelopA11yFocusBorderOffset:focus:not(.dvelopAccessibilityNoFocusBorder) {
    outline-offset: var(--dv-focus-border-outer-offset, 3px);
}

.dvelop-a11y__active-element-outline {
    outline: var(--dv-active-outline, 2px solid var(--mdc-theme-secondary, #333E48));
    outline-offset: var(--dv-focus-border-default-offset, -2px);
}

.mdc-button--raised:focus:not(.dvelopAccessibilityNoFocusBorder) {
    outline-offset: var(--dv-focus-border-outer-offset, 3px);
}