@font-face {
    font-family: "Noto Sans";
    src: url("https://static.ableseportal.de/fonts/notosans/NotoSans-Light.woff2") format('woff2'),
         url("https://static.ableseportal.de/fonts/notosans/NotoSans-Light.woff") format('woff');
    font-weight: 300;
}

@font-face {
    font-family: "Noto Sans";
    src: url("https://static.ableseportal.de/fonts/notosans/NotoSans-Regular.woff2") format('woff2'),
         url("https://static.ableseportal.de/fonts/notosans/NotoSans-Regular.woff") format('woff');
    font-weight: normal 400;
}

@font-face {
    font-family: "Noto Sans";
    src: url("https://static.ableseportal.de/fonts/notosans/NotoSans-Regular.woff2") format('woff2'),
         url("https://static.ableseportal.de/fonts/notosans/NotoSans-Regular.woff") format('woff');
    font-weight: 500;
}

@font-face {
    font-family: "Noto Sans";
    src: url("https://static.ableseportal.de/fonts/notosans/NotoSans-SemiBold.woff2") format('woff2'),
         url("https://static.ableseportal.de/fonts/notosans/NotoSans-SemiBold.woff") format('woff');
    font-weight: 600;
}


@font-face {
    font-family: "Noto Sans";
    src: url("https://static.ableseportal.de/fonts/notosans/NotoSans-Bold.woff2") format('woff2'),
         url("https://static.ableseportal.de/fonts/notosans/NotoSans-Bold.woff") format('woff');
    font-weight: 700;
}

html {

    /* colors */
    
	--header: 255,255,255;
	--header-light: 255,255,255;
	--header-lighter: 255,255,255;
	--header-text: 150,175,199;
	--header-text-light: 218,227,235;
	--header-text-lighter: 255,254,254;
	--background: 242,241,241;
	--background-light: 254,255,255;
	--background-lighter: 254,255,255;
	--primary: 227,6,19;
	--primary-light: 249,53,64;
	--primary-lighter: 250,98,107;
	--accent: 0,78,147;
	--accent-light: 0,101,191;
	--accent-lighter: 0,117,220;
	--secondary: 0,76,151;
	--secondary-light: 0,98,196;
	--secondary-lighter: 0,113,226;
	--main: 51,51,51;
	--main-light: 66,66,66;
	--main-lighter: 76,76,76;
	--header-item-background: 255,255,255;
	--header-item-background-light: 255,255,255;
	--header-item-background-lighter: 255,255,255;
	--header-item-text: 0,0,0;
	--header-item-text-light: 0,0,0;
	--header-item-text-lighter: 0,0,0;
	--header-item-background-active: 255,255,255;
	--header-item-background-active-light: 255,255,255;
	--header-item-background-active-lighter: 255,255,255;
	--header-item-text-active: 227,6,19;
	--header-item-text-active-light: 249,53,64;
	--header-item-text-active-lighter: 250,98,107;




}


/* styles */

body { font-family: 'Noto Sans', sans-serif; } div {color: #000;} .text-gray-400 { color: #4A4A49 !important } div[role=button].text-gray-300, button.text-gray-300, button.text-gray-100 { color: #4A4A49 !important } 
h1, h2, h3, h4 { font-family: 'Noto Sans', sans-serif; font-weight: 700;  }
h1, h2 {color: #E30613;}
.main-screen .main--content-wrapper {background-color: rgb(242,241,241);}
button.button--ghost:not(.button-primary), .login-screen input.form-input, .sidebar input {border-color: #000; }
.icon-buttons button.text-gray-300 {color: #000 !important}
.form-input:focus {border-color: #000; border-width: 2px;}
input::placeholder, .placeholder-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-300, .text-gray-400, .button--disabled, .description, .markdown-viewer h3 {color: #000 !important}
button.button {border-radius: 4em; font-weight: 600;}
button.button--disabled .button-text-wrapper {color: #000;}
.job-comment li[data-headlessui-state="active"], .job-comment li[data-headlessui-state="active selected"], .job-comment li[data-headlessui-state="active selected"] .text-primary {background-color: rgba(var(--primary), 1); color: white;}
.text-header_item_text {font-weight: 600; font-size: 19px;}
.text-header_item_text:hover {font-weight: 600; color: rgb(227,6,19)}
.text-header_item_text_active {font-weight: 600 !important; font-size: 19px;}
.bg-blue-100 div {color: white;}
.main-screen .bg-yellow-100 { background-color: #FFD90080; color: black; }
.main-screen .bg-green-200 { background-color: #81BC0080; color: black; }
.main-screen .bg-red-100 { background-color: #E3061380; color: black; }
.main-screen .bg-blue-100 { background-color: #39C3E6; color: black; }
.bg-blue-100 div, .bg-yellow-100 div, .bg-red-100 div, .bg-green-200 div { color: black; }
.form-input { background-color: #fff; border-radius: 0; border: 1px solid silver; }
.text-electric-meter, .text-green-500 { color: #81BC00; }
.text-gas-meter { color: #FFD900; }
.text-heat-meter { color: #E30613; }
.text-water-meter { color: #39C3E6; }
.border-electric-meter { border-color: #81BC00; }
.border-gas-meter { border-color: #FFD900; }
.border-heat-meter { border-color: #E30613; }
.border-water-meter { border-color: #39C3E6; }
.bg-electric-meter { background-color: #81BC0080; }
.bg-gas-meter { background-color: #FFD90080; }
.bg-heat-meter { background-color: #E3061380; }
.bg-water-meter { background-color: #0057D980; }
.list-separator { background-color: #81BC00; }
.list-separator > span { color: white; filter: contrast(1000%) saturate(0) invert(1); }
.notification--title { color: black; }
i {font-weight: bold !important; font-style: normal !important;}
.required-field-asterix {color: #4A4A49 !important;}
.markdown-viewer h3 {text-align: left}
.markdown-viewer h4 {text-align: left}
.high-contrast button.button:not(.button--ghost):not(.button--disabled):not(.button--primary) {color: white; background-color: white; filter: none; border: 1px solid black;}
.high-contrast button.button.button--disabled {color: #999; background-color: white; filter: none; border: 1px solid #999;}
.high-contrast div[role=complementary] button.bg-accent {filter: none !important; } .high-contrast div[role=complementary] button.bg-accent .text-white {color: white}
.high-contrast button .button-text-wrapper {filter: none !important;}
.high-contrast button.button:not(.button--ghost):not(.button--disabled):not(.button--primary) { color: black; background-color: white; } 
.high-contrast button.button--ghost, body.high-contrast button.button--ghost, .high-contrast button.button.button--disabled, .high-contrast button.button:not(.button--ghost):not(.button--disabled):not(.button--primary) { border-width: 2px !important } 
.high-contrast button.button--primary, .high-contrast button.button--primary .button-text-wrapper  { color: white !important; background-color: rgba(var(--primary), 1) !important; filter: none;} 
.accessibility-custom-content h1 {margin: 2em 0 1em; }
.accessibility-custom-content p {margin-bottom: 0.5em; }
.accessibility-custom-content ul {margin-bottom: 1em; }
.accessibility-custom-content li {list-style: disc; list-style-position: outside; margin-left: 24px}