* { font-family: Verdana,Geneva,sans-serif; color: #6c6d74; font-size: 14px }
div.header { }

body { margin: 0; }

.page { display: flex; flex-direction: column; min-height: 100vh; padding: 0; margin: 0; }


.navbar { background-color: white; font-size: 22px; font-weight: 500; margin: auto }
.navbar ul { display: flex; list-style-type: none; margin: auto; padding: 0; overflow: hidden; justify-content: center; }
.navbar li { display: inline; }
.navbar li a { font-size: 22px; color: #b4b5ba; display: inline-block; text-decoration: none; padding: 1em 1em; text-align: center }
.navbar li a:hover { color: #2d2e33; }
.navbar li a.active { color: #2d2e33; }
.navbar .languageManagement { top: 0em; right: 6em; width: 6em; position: absolute }
.currentLanguage { width: 3em; display: flex !important; justify-content: right; }
.currentLanguage:hover { cursor: pointer; }
ul.languages { width: 8em; list-style: none; margin: 0; padding: 0; position: absolute; right: 3.5em; top: 5em; background: #fff; border: 1px solid #000; }
ul.languages li { padding: 1em 0em 1em 0.5em; display: flex; }
ul.languages li:hover { cursor: pointer; background-color: #b4b5ba }
ul.languages li span { display: flex; align-self: center; }
.language a { padding: 10px 10px; display: block; }
.languages .flag-small { width: 1.5em; padding-right: 0.5em; }
.flag-big { width: 2.5em; height: 2em; }

.backgroundImg { position: fixed; z-index: -1; width: 100%; height:100%; }
.backgroundImg img { height:100%; }
#languageScreen[data-expanded="0"], #languageScreenFooter[data-expanded="0"] { display: none; }

div.footer { left: 0; width: 100%; height: 8em; margin-top: auto; padding: 0; /*position:absolute;*/ background-color: #f7f7f7; display: flex; flex-direction: row; margin-bottom: 0; padding-bottom: 0 }
div.footerMenu { display: flex; flex-direction: row; margin: auto; justify-content: center; align-content: center }
div.footerEntry { display: flex; padding: 0em 0.4em; }
div.footerEntry a { text-decoration: none; font-size: 16px; font-weight: 400; color: #b4b5ba; }
div.footerEntry a:hover { text-decoration: underline; color: #6c6d74; }
div.footerHeader { display: flex; padding: 0em 0.4em; color: #2d2e33; align-self: center }
div.footerHeader { font-size: 11px; line-height: 1.4; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }
.inactive { display: none !important; }

/*
div.table { display: table; }
div.tr { display: table-row; }
div.td { display: table-cell; padding: 0.5em; padding-right: 1.1em; padding-left: 1.1em; }
div.th { display: table-cell; padding: 0.5em; padding-right: 1.1em; padding-left: 1.1em; font-weight: bold; }*/


.grid-table { display: grid; width: 100%; row-gap: 1em }
.grid-table .tableHeader { font-weight: bold; }
.grid-table .col1 { grid-column-start: 1; grid-column-end: 2; }
.grid-table .col2 { grid-column-start: 2; grid-column-end: 3; }
.grid-table .col3 { grid-column-start: 3; grid-column-end: 4; }
.grid-table .col4 { grid-column-start: 4; grid-column-end: 5; }
.grid-table .col5 { grid-column-start: 5; grid-column-end: 6; }
.grid-table .fullRow { grid-column-start: 1; grid-column-end: 6; }

.hidden { display: none !important; }
.divider { border-right: solid black 2px; }

.tooltip { }
.tooltip .tooltiptext { visibility: hidden; width: auto; background-color: #666; text-align: center; padding: 0.5em 0em; color: #fff; opacity: 0; position: absolute; z-index: 1; margin-right: 3em }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

div.header div.image { position: absolute; width: 20%; left: 2em; top: 7em; z-index: -1 }
div.header div.image img { width: 100% }

div.events { padding-top: 2em; padding-bottom: 2em; }
div.eventSelection { background-color: white; margin: auto; margin-top: 0em; width: 40%; min-width: 40em; display: flex; flex-direction: column; padding-bottom: 1em; }
div.eventSelection h2 { margin-left: auto; margin-right: auto; font-size: 18px; border: solid 1px; align-content: center; padding: 0.4em }
div.eventSelection ul { list-style-type: none; padding-right: 40px }
div.eventSelection .event div { height: 2em; padding: 0.4em }
div.eventSelection .event { border: solid 0.1em #6c6d74; text-decoration: none; display: flex; flex-direction: row; margin: auto; padding: 0.2em; margin-top: 0.5em; }
div.eventSelection div.event { background-color: #aaa; }
div.eventSelection li a.event:hover { color: #2d2e33; border: solid 0.2em #2d2e33; padding: 0.15em }
div.eventSelection .event div.image { height: 5em; width: 5em; display: flex; align-self: center; }
div.eventSelection .event div.eventName { display: flex; align-self: center; }
div.eventSelection .trafficLight { display: flex; margin-left: auto; margin-right: 1em; align-self: center; /*width: 3em !important; height:3em !important; border-radius: 1.5em !important; padding:0 !important;*/ }


div.registration { padding-top: 2em; padding-bottom: 2em; }
div.eventRegistration { border: solid 1px black; background-color: white; margin: auto; width: 40%; min-width: 50em; -webkit-box-shadow: 5px 5px 30px 5px rgba(0,0,0,0.51); box-shadow: 5px 5px 30px 5px rgba(0,0,0,0.51); }

div.eventRegistration div.validationResult { width: 100%; display: flex; color: red; font-size: 18px; font-weight: bold; justify-content: flex-end }
div.eventRegistration div.title { display: flex; flex-direction: row; padding-top: 2em; padding-left: 2em; }
div.eventRegistration h2 { display: flex; align-self: center; font-size: 18px; border: solid 1px; align-content: center; padding: 0.4em; justify-content: center; }
div.eventRegistration div.image { height: 7em; width: 7em; display: flex; align-self: center; margin-left: auto; translate: 2.5em -4em; }
div.eventRegistration form { padding: 0em 2em; margin-bottom: 3em; }
div.eventRegistration div.step { display: flex; flex-direction: column; }
div.eventRegistration div.step .row { display: flex; padding: 0.25em; }
div.eventRegistration div.step div.category { padding: 1em 0em; flex-grow: 2; font-weight: bold; }
div.eventRegistration div.step div.subcategory { padding: 1em 0em 1em 0em; flex-grow: 2; font-weight: bold; text-decoration: underline; color: green; }
div.eventRegistration div.step div.eventBlockName { display: table-caption; width: 200%; padding: 1em 0em 1em 0em; font-weight: bold; text-decoration: underline; color: green; }
div.eventRegistration div.step div.eventInfo { font-style: italic; color: red; margin-top: -0.7em; }
div.eventRegistration div.step .name { width: 20%; min-width: 11em; display: flex; align-self: center; }
div.eventRegistration div.step .value { width: 80%; display: flex; align-self: center; }
div.eventRegistration div.step .value input { width: 100%; height: 2em; }
div.eventRegistration div.step .value select { width: 100%; height: 2em; background-color: white }
div.eventRegistration div.step .ogs div.ogsOption { display: flex; flex-direction: row; align-items: center; padding: 0.1em; margin: 0.4em; }
div.eventRegistration div.step .ogs div.ogsOption label { display: flex; flex-shrink: 0; }
div.eventRegistration div.step .ogs div.ogsOption input { display: flex; height: auto; }
div.eventRegistration div.step .radio div.radioOption { display: flex; flex-direction: row; align-items: center; padding: 0.1em; margin: 0.4em; }
div.eventRegistration div.step .radio div.radioOption label { display: flex; flex-shrink: 0; }
div.eventRegistration div.step .radio div.radioOption input { display: flex; height: auto; }
div.eventRegistration div.step .calender { display: flex; padding: 1%; }
div.eventRegistration div.step .remark { width: 100%; }
div.eventRegistration div.step .remark textarea { width: 100%; height: 10em; }
div.eventRegistration div.step .checkbox { display: flex; align-items: center; padding: 0.5em; }
div.eventRegistration div.step .eventblock { height: 1.2em; width: 1.2em; }
div.eventRegistration div.step .checkbox input[type=checkbox] { margin-right: 0.5em; width: 1.3em; height: 1.3em; flex-shrink: 0 }
div.eventRegistration div.step hr { width: 100%; margin-top: 3em; margin-bottom: 2em; }
div.eventRegistration input:invalid { border-color: orange; border-style: solid; border-width: 0.3em }
div.ogsOption:has(input:invalid) { border-color: orange; border-style: solid; border-width: 0.3em }
div.radioOption:has(input:invalid) { border-color: orange; border-style: solid; border-width: 0.3em }
div.eventRegistration input.submit { background-color: lightgreen; margin-top: 2em; width: 100%; height: 3em; border: solid 1px black; width: 40%; font-size: 12px; font-weight: bold; }
div.eventRegistration input.submit:hover { cursor: pointer; background-color: #ff9e45; }
div.eventRegistration .summary div.row div.name { font-weight: bold; }
div.eventRegistration div.finalstep { min-height: 10vh }
div.eventRegistration div.finalstep .successEvent { flex-direction: column; display: flex; padding: 0.5em; border: solid; margin: 0.2em; }
div.eventRegistration div.finalstep .errorEvent { flex-direction: column; display: flex; padding: 0.5em; border: solid; margin: 0.2em; }
div.eventRegistration div.finalstep div.registrationMessage { align-self: center; }
div.eventRegistration div.popup { position: absolute; padding: 2em; margin-left: 22em; background: #FFF; z-index: 20; border: solid black 1px }
div.eventRegistration div.popup img { scale: 1.2 }
div.eventRegistration .grid-table .col1 { padding-left: 1em; }

div.participationOverview { margin-top: 2em; margin-bottom: 2em; display: flex; }
div.myRegistration { margin: auto; padding: 1em; display: flex; flex-direction: column; background: white; border: solid black 1px; width: 30%; min-width: 50em; }
div.myRegistration h2 { margin-left: auto; margin-right: auto; font-size: 18px; border: solid 1px; align-content: center; padding: 0.4em }
div.myRegistration div.subcategory { padding: 1em 0em 1em 0em; flex-grow: 2; font-weight: bold; text-decoration: underline; color: green; }
div.myRegistration div.row { display: flex; padding: 0.25em; flex-direction: row; width: 100% }
div.myRegistration div.name { display: flex; padding: 0.25em; align-self: center; font-weight: bold; width: 20%; }
div.myRegistration div.value { display: flex; padding: 0.25em; align-self: center; }
div.myRegistration div.info { display: flex; padding: 0.25em; align-self: center; justify-content:center; font-style:italic}
div.myRegistration div.registrations { flex-direction:column!important}
div.myRegistration .registrationRow { display: flex; flex-direction: row; background: #f7f7f7; align-items:center; padding:0.2em;}
div.myRegistration .tableHeader { font-weight:bold; background:white !important; padding-bottom:0.4em; }
div.myRegistration div.registrations .col1 { width: 40%; }
div.myRegistration div.registrations .col2 { width: 20%; }
div.myRegistration div.registrations .col3 { width: 20%; }

div.myRegistration div.grid-table { display: grid; row-gap:0.3em }
div.myRegistration div.grid-table div { padding-bottom: 0.3em; padding-top: 0.3em; }
div.myRegistration div.grid-table .header { font-weight: bold; background: white}

div.verifycationpage { margin-top: 2em; margin-bottom: 2em; display: flex; }
div.verifyRegistration { margin: auto; padding: 1em; display: flex; flex-direction: column; background: white; border: solid black 1px; width: 30%; min-width: 50em; }
div.verifyRegistration .pageHeader { } 

div.faqPage { padding: 2em; }
div.faq { width: 40%; padding: 2em; margin: auto; background: white; display: flex; flex-direction: column }
div.pageHeader { margin: auto; border: solid black 1px; padding: 0.4em 1em; }
ul.faqItems { list-style: none; display: flex; flex-direction: column; padding: 0.2em }
.faqItems .faqItem { margin-top: 0.5em; padding: 1em; display: flex; flex-direction: column; border: solid black 1px; }
.faqItems .faqItem div { padding: 0.4em }
.faqItems .faqItem div.question { font-weight: bold; font-size: 1.2em; cursor: pointer; }

.material-symbols-outlined { cursor: pointer; }
/*TODO Ampel*/
.css-trafficLight { display: inline-block; width: 30px; min-width: 30px; height: 90px; border-radius: 6px; position: relative; background-color: black; zoom: 1.7; }

.css-trafficLight span,
.css-trafficLight:before,
.css-trafficLight:after { content: ""; color: white; position: absolute; border-radius: 15px; width: 22px; height: 22px; left: 4px; }

.css-trafficLight:before { top: 6px; background-color: red; background-color: dimgrey; }

.css-trafficLight:after { top: 34px; background-color: yellow; background-color: dimgrey; }

.css-trafficLight span { top: 62px; background-color: green; background-color: dimgrey; }

.trafficLightRed:before { background-color: red; box-shadow: 0 0 20px red; }

.trafficLightYellow:after { background-color: yellow; box-shadow: 0 0 20px yellow; }

.trafficLightGreen span { background-color: limegreen; box-shadow: 0 0 20px limegreen; }