html {
	/* Colors */
	--gray-10: #F2F2F2;
    --gray-20: #E3E3E3;
    --gray-30: #C9C9C9;
    --gray-40: #B0B0B0;
    --gray-50: #969696;
    --gray-60: #7D7D7D;
    --gray-70: #636363;
    --gray-80: #4A4A4A;
    --gray-90: #303030;
    --gray-100: #171717;
    
    --error-color: #EE0018;
    --error-color-50: color-mix(in srgb, var(--error-color), #ffffff 50%);
    --error-border-color: color-mix(in srgb, var(--error-color), #000000 20%);
    --error-panel-color: color-mix(in srgb, var(--error-color), #ffffff 90%);
    
    --fontBottomOffset: 0em;
	
	--color-1-bg: #303030;
    --color-1-fg: #FFFFFF;
    --color-2-bg: #004A80;
    --color-2-fg: #FFFFFF;
    --color-3-bg: #1D77C0;
    --color-3-fg: #FFFFFF;
    --color-4-bg: #2472B2;
    --color-4-fg: #FFFFFF;
    
    --color-1-bg-10: color-mix(in srgb, var(--color-1-bg), #ffffff 90%);
    --color-1-fg-10: color-mix(in srgb, var(--color-1-fg), #000000 90%);
    --color-1-bg-50: color-mix(in srgb, var(--color-1-bg), #ffffff 50%);
    --color-1-fg-50: color-mix(in srgb, var(--color-1-fg), #ffffff 50%);
    --color-1-bg-80: color-mix(in srgb, var(--color-1-bg), #ffffff 20%);
    --color-2-bg-90: color-mix(in srgb, var(--color-2-bg), #ffffff 10%);
    --color-2-bg-85: color-mix(in srgb, var(--color-2-bg), #ffffff 15%);
    --color-2-fg-85: color-mix(in srgb, var(--color-2-fg), #ffffff 15%);
    --color-2-bg-70: color-mix(in srgb, var(--color-2-bg), #ffffff 30%);
    --color-2-fg-70: color-mix(in srgb, var(--color-2-fg), #ffffff 30%);
    --color-2-bg-65: color-mix(in srgb, var(--color-2-bg), #ffffff 35%);
    --color-2-bg-80: color-mix(in srgb, var(--color-2-bg), #ffffff 20%);
    --color-2-bg-35: color-mix(in srgb, var(--color-2-bg), #ffffff 65%);
    --color-2-fg-35: color-mix(in srgb, var(--color-2-fg), #ffffff 65%);
    --color-2-bg-20: color-mix(in srgb, var(--color-2-bg), #ffffff 80%);
    --color-2-fg-20: color-mix(in srgb, var(--color-2-fg), #ffffff 80%);
    --color-2-bg-10: color-mix(in srgb, var(--color-2-bg), #ffffff 90%);
    --color-2-fg-10: color-mix(in srgb, var(--color-2-fg), #ffffff 90%);
    --color-2-bg-5: color-mix(in srgb, var(--color-2-bg), #ffffff 95%);
    --color-2-fg-5: color-mix(in srgb, var(--color-2-fg), #ffffff 95%);
    --color-3-bg-10: color-mix(in srgb, var(--color-3-bg), #ffffff 90%);
    --color-3-fg-10: color-mix(in srgb, var(--color-3-fg), #ffffff 90%);
    --color-3-bg-30: color-mix(in srgb, var(--color-3-bg), #ffffff 70%);
    --color-3-fg-30: color-mix(in srgb, var(--color-3-fg), #ffffff 70%);
    --color-4-bg-80: color-mix(in srgb, var(--color-4-bg), #ffffff 20%);
    --color-4-fg-80: color-mix(in srgb, var(--color-4-fg), #ffffff 20%);
    --color-4-bg-45: color-mix(in srgb, var(--color-4-bg), #ffffff 55%);
    --color-4-fg-45: color-mix(in srgb, var(--color-4-fg), #ffffff 55%);
    --color-4-bg-5: color-mix(in srgb, var(--color-4-bg), #ffffff 95%);
    
    /* Variables */
    --body-bg: #FFFFFF;
    --body-color: #000000;
    
    --standard-color: #000000;
    --standard-bg: #FFFFFF;
    --panel-bg: var(--color-2-bg-10);
    
    --header-border: var(--gray-30);
    --header-color: black;
    
    --footer-bg: var(--color-2-bg);
    --footer-color: var(--color-2-fg);
    
    --required-color: red;
    --link-color: var(--color-3-bg);
    
    --selected-bg: var(--color-2-bg);
    --selected-color: var(--color-2-fg);
    
    --logo-padding: 20px;
    --logo-padding-mobile: 10px;
    
    --download-panel-bg: var(--color-2-bg);
    --download-panel-color: var(--color-2-fg);
    
    --table-font-color: white;
    --table-icons-color: white;
    
    --dropzone-bg: var(--color-2-bg-5);
    --dropzone-color: var(--color-2-bg);
    --dropzone-hover-bg: var(--color-2-bg-10);
    --dropzone-icon-color: var(--color-3-bg);
    
    --btn-large-bg: var(--color-2-bg-5);
    --btn-large-color: var(--color-2-bg);
    --btn-large-hover-bg: var(--color-2-bg-10);
    
    --menu-bg: var(--color-2-bg);
    --menu-border: var(--color-2-bg-65);
    --menu-color: var(--color-2-fg);
    --menu-active-bg: var(--color-2-bg-80);
    --menu-active-color: var(--color-2-fg);
    --menu-sub-bg: var(--color-2-bg-90);
    
    --tooltip-bg: var(--body-bg);
    --tooltip-color: var(--body-color);
    
    --home-btn-primary-bg: var(--color-2-bg);
    --home-btn-primary-color: white;
    --home-btn-primary-hover-bg: var(--color-2-bg-85);
    --home-btn-secondary-bg: var(--color-2-bg-5);
    --home-btn-secondary-color: black;
    --home-btn-secondary-hover-bg: var(--color-2-bg-10);
    
    --settings-menu-color: black;
    --settings-menu-bg: var(--body-bg);
    --settings-menu-hover: var(--color-2-bg-5);
    
    --delete-link-color: var(--error-color);
    --delete-link-hover-color: var(--error-panel-color);
    
    --appointment-bg: var(--body-bg);
    --appointment-header-bg: var(--color-4-bg-80);
    --appointment-header-color: var(--color-4-fg);
    --appointment-header-pending-bg: var(--appointment-header-bg);
    --appointment-header-pending-color: var(--appointment-header-color);
    --appointment-header-cancelled-bg: var(--appointment-header-bg);
    --appointment-header-cancelled-color: var(--appointment-header-color);
    --appointment-header-past-bg: var(--gray-50);
    --appointment-header-past-color: white;
    --appointment-title-color: black;
    --appointment-subtitle-color: var(--gray-70);
    --appointment-status-cancelled-bg: #fde5e8;
    --appointment-status-cancelled-color: #EE0018;
    --appointment-status-booked-bg: #9cef9c;
    --appointment-status-booked-color: #152c15e3;
    --appointment-status-pending-bg: #E6EDFB;
    --appointment-status-pending-color: #0344CE;
    
    --card-bg: var(--standard-bg);
    --card-hover-bg: var(--color-4-bg-5);
    
    --follow-up-bg: #f8e9ec;
    --follow-up-color: #b80f2e;
    
    --bobbel-color: var(--color-1-fg);
    --bobbel-bg: var(--color-1-bg);
    --bobbel-border: var(--color-1-fg);
    
    --checkbox-bg: var(--body-bg);
    --checkbox-border: var(--color-3-bg);
    --checkbox-color: var(--color-3-bg);
    
    --datepicker-header-bg: var(--gray-10);
    --datepicker-header-color: var(--gray-60);
    --datepicker-btn-color: var(--color-3-bg);
    --datepicker-border: var(--gray-30);
    --datepicker-today-color: red;
    
    --input-bg: var(--gray-10);
    --input-color: var(--gray-100);
    --input-border-color: var(--gray-70);
    --input-hover-bg: var(--gray-10);
    --input-focus-bg: var(--gray-10);
    --input-focus-border-color: var(--color-1-bg);
    --input-placeholder: var(--gray-50);
    
    --btn-primary-bg: var(--color-1-bg);
    --btn-primary-color: var(--color-1-fg);
    --btn-primary-border: var(--color-1-bg);
    --btn-primary-hover-bg: var(--color-1-bg-80);
    --btn-primary-hover-color: var(--color-1-fg);
    --btn-primary-hover-border: var(--color-1-bg-80);
    
    --btn-error-bg: var(--error-color);
    --btn-error-color: white;
    --btn-error-border: var(--error-color);
    --btn-error-hover-bg: color-mix(in srgb, var(--btn-error-bg), #000000 10%);
    --btn-error-hover-color: white;
    --btn-error-hover-border: color-mix(in srgb, var(--btn-error-border), #000000 10%);
    
    --btn-secondary-bg: var(--color-1-fg);
    --btn-secondary-color: var(--color-1-bg);
    --btn-secondary-border: var(--color-1-bg);
    --btn-secondary-hover-bg: var(--color-1-bg-10);
    
    --btn-red-color: var(--error-color);
    --btn-red-border: var(--error-color);
    --btn-red-hover-bg: var(--error-panel-color);
    
    --btn-link-bg: var(--color-3-bg);
    --btn-link-color: var(--color-3-fg);
    --btn-link-border: var(--color-3-bg);
    --btn-link-hover-bg: var(--color-3-fg);
    --btn-link-hover-color: var(--color-3-bg);
    --btn-link-hover-border: var(--color-3-bg);
    
    --error-row-color: red;
    --error-message-color: var(--error-color);
    --timeslot-color: black;
    --panel-top-border: var(--gray-30);
    --bounce-bg: #333;
    --new-doc-marker: var(--color-1-bg);
    --newEntryMarker-color: #FF8F00;
}

@font-face {
	font-family: 'StandardFont';
	font-weight: normal;
	src: url('/medizinakte/javax.faces.resource/fonts/Inter-Regular.woff2.xhtml') format("woff2");
}

@font-face {
	font-family: 'StandardFont';
	font-weight: 500;
	src: url('/medizinakte/javax.faces.resource/fonts/Inter-Medium.woff2.xhtml') format("woff2");
}

@font-face {
	font-family: 'StandardFont';
	font-weight: 600;
	src: url('/medizinakte/javax.faces.resource/fonts/Inter-SemiBold.woff2.xhtml') format("woff2");
}

@font-face {
	font-family: 'StandardFont';
	font-weight: bold;
	src: url('/medizinakte/javax.faces.resource/fonts/Inter-Bold.woff2.xhtml') format("woff2");
}