body{font-family:arial, sans-serif;background-color:white;
	--default-text-color:#01b1af;
	--default-label-color:#00837c;
	--default-header-color:steelblue;
	--default-background-color:steelblue;
	--default-button-background-color:PaleTurquoise;
	--default-button-border-color:steelblue;
	--default-button-border-radius:5px;
	--default-border-color:DodgerBlue;
	--default-warning-color:red;
	--default-currentrecord-background-color:lightgreen;
	--default-dropzone-color:yellow;
}

#divRoot{display:grid;grid-template-areas: "headerleft headercenter headerright"
		"topleft topcenter topright"
		"bottomleft bottomcenter bottomright";
		column-gap:25px;row-gap:25px;
}
@media only screen and (hover:hover) and (pointer:fine){
	.width150{width:150px}
	div.spaltenselector{max-width:95%;padding:7px}

	div.flexouter{display:flex;flex-wrap:wrap;gap:10px}
	.two-digit{width:3em}
	.four-digit{width:4em}	
	body{font-size:12px;--client-device:desktop}
	#divRoot{grid-template-rows:auto 40px auto}
	#intranetLeftStripe{grid-area:topleft / topleft / bottomleft / bottomleft}
	#intranetHeaderMobile{display:none}
	#intranetMain{grid-area:bottomcenter / bottomcenter / bottomright / bottomright}
	#intranetMainWide{grid-area:bottomcenter / bottomcenter / bottomright / bottomright}
	#intranetTopmenu{grid-area:topcenter / topcenter / topright / topright}
	#intranetTopmenuWide{grid-area:topcenter / topcenter / topright / topright}
	#loginBody{width:max-content}
	#loginBody > form > div > div:first-child{text-align:right}
	#headerMobile{font-size:5em}
	#headerMobile p{font-size:.4em}
	button.new_entry,input.new_entry{;margin:7px 0 7px 0;cursor:pointer}
}
@media only screen and (hover:hover) and (pointer:fine) and (max-width:1200px){
	#divRoot{grid-template-columns:160px auto 250px}
	#headerCenter p{margin-top:25px}
}
@media only screen  and (hover:hover) and (pointer:fine) and (min-width:1201px){
	#divRoot{grid-template-columns:200px auto auto}
}
@media only screen  and (hover:none) and (pointer:coarse){
	body{--client-device:mobile}
	.two-digit{width:2em}
	.four-digit{width:4em}
	.width150{width:450px}
	input[type=checkbox]{transform:scale(3);margin: 15px 25px 15px 15px}
		
	div.letterSelector{margin-left:15px;border-width:3px !important;width:90%}
	div.letterSelector > form > input[type=submit]{margin-right:10px}
	div.spaltenselector{overflow:visible;margin:15px 35px 15px 15px;width:85%;padding:20px;border-width:3px !important}
	div.spaltenselector > div > form{padding:0px}
	div.spaltenselector > form > div{overflow:visible;height:max-content;margin:3px 0 3px 20px}
	div.spaltenselector > div > div{padding:25px}
	div.subspalten{border-width:3px !important;padding:7px}
	div.subspalten > h3{margin:0;padding:0}
	table.fixedlayout button[type=submit]{background-color:transparent;border:none}
/*	table.fixedlayout{table-layout:auto}
	table.fixedlayout tr > td{overflow-wrap:anywhere} */
	#divRoot{grid-template-columns:200px auto auto;grid-template-rows:auto 60px auto;}
	#headerMobile{font-size:3em}
	#headerMobile > p{font-size:.5em;margin-left:50px}
	#intranetMain{grid-area:bottomleft / bottomleft  / bottomright / bottomright;margin-left:3%}
	#intranetMainWide{grid-area:bottomleft / bottomleft / bottomright / bottomright}
	#intranetTopmenu{grid-area:topleft / topleft / topright / topright}
	#intranetTopmenuWide{grid-area:topleft / topleft / topright / topright}

	#intranetLeftStripe{grid-area:topleft / topleft / bottomcenter / bottomcenter;font-size:36px}
	#intranetHeaderMobile{position:absolute;left:0;top:0;width:100%;display:flex}
	#intranetHeaderMobile img{width:100px;padding:10px}
	#loginBody{width:85%}
	#loginBody input{font-size:1.3em}
	#loginBody > form > div:nth-child(5) > div:first-child{width:5em;text-align:center}
	#loginBody > form > div:nth-child(6) > div:first-child{width:5em;text-align:center}
	#divRoot.mediahidden > #headerRight{display:none}
	button.new_entry,input.new_entry{font-size:1.2em;margin:15px;border-width:3px !important}
	svg.tableheader{font-size:.6em}
}

@media only screen  and (hover:none) and (pointer:coarse) and (max-width:999px){
	body,select,button,input{font-size:28px;margin-left:10px}
}

@media only screen  and (hover:none) and (pointer:coarse) and (min-width:1000px){
	body,select,button,input{font-size:24px}
}

#loginBody{border:2px solid var(--default-border-color);border-radius:5px;box-shadow:silver 15px 15px 10px;padding:25px}
#loginBody > form > div{display:flex;gap:15px;margin-bottom:1.7em}
#loginBody > form > div > div:first-child{padding-top:5px}

#loginBody > form > div:nth-child(3) > div:first-child{flex-basis:7em}
#loginBody > form > div:nth-child(4) > div:first-child{flex-basis:7em}
#loginBody > form > div:nth-child(3) > div:nth-child(2){flex-basis:18em}
#loginBody > form > div:nth-child(4) > div:nth-child(2){flex-basis:18em}
#loginBody > form > div:nth-child(5) > div:nth-child(2){flex-basis:90%}
#loginBody > form > div:nth-child(5) > div:nth-child(2) p{margin:8px}
#loginBody > form > div:nth-child(6) > div:nth-child(2){flex-basis:90%}
#loginBody > form > div:nth-child(6) > div:nth-child(2) p{margin:8px}
#loginBody > form > div:nth-child(7){margin-left:25px}


#loginBody input[type=submit]{color:white;background-color:var(--default-background-color)}

#mobileMain{grid-area:topleft / topleft / bottomright /bottomright}
#mobileMain{width:99%;font-size:36px}

div.mobileEditNew textarea, div.mobileEditNew  input:not(.two-digit,.four-digit,div.letterSelector input){width:100%}
div.mobileEditNew textarea, div.mobileEditNew  input, div.mobileEditNew select{font-size:1em}
div.mobileEditNew > form > div > div{background-image:linear-gradient(steelblue,AliceBlue);border-radius:10px;padding-bottom:15px}
div.mobileEditNew > form > div > div:not(:last-child){margin-bottom:50px}
div.mobileEditNew > form > div > div > div:first-child{width:100%;color:navy;color:White;background-color:Transparent;font-style:italic;text-align:left;padding:10px 10px 10px 30px;margin:0;border-radius:10px 10px 0 0}
div.mobileEditNew > form > div > div > div:nth-child(3){font-size:24px;width:min-content;min-width:70%}
div.mobileEditNew > form > input{margin:50px 0 50px 0;color:white;background-color:var(--default-background-color)}

#headerImage{grid-area:headerleft}
#headerMobile{grid-area:headercenter;color:var(--default-background-color);text-align:center;font-weight:bold;cursor:pointer}
#headerRight{grid-area:headerright}

#headerImage img{width:100%}
#headerRight div{padding:3px 7px 3px 7px;border-radius:3px;margin-bottom:7px}
#headerRight div:not(.warning){background-color:var(--default-background-color);color:white}
#headerRight div.warning{color:background-color:var(--default-warning-color)}
#headerRight a{padding:3px 7px 3px 7px;border-radius:3px}
#headerRight div:not(.warning) a{color:white;background-color:var(--default-background-color)}
#headerRight div.warning a{color:var(--default-warning-color)}



#headerRight button{padding:3px 7px 3px 7px;border:none;background-color:var(--default-background-color);color:white;border-radius:3px;margin-top:7px;cursor:pointer}
#intranetSmallStripe{background-color:var(--default-background-color);border-top-right-radius:5px}
#intranetLeftStripe{background-color:var(--default-background-color);border-top-right-radius:5px;z-index:1}
#intranetLeftmenu{z-index:3;padding-left:25px}
#intranetLeftmenu button{background-color:transparent;border:none;color:white;cursor:pointer}
#intranetLeftmenu table tr td{line-height:2em}
#intranetLeftmenu a{color:white;font-weight:bold}
#intranetLeftmenu a:hover{color:#fbb809}
#intranetTopmenu,#intranetTopmenuWide{display:flex}
#intranetTopmenu div,#intranetTopmenuWide div,#intranetMain h3{background-color:var(--default-background-color);color:white;padding:3px 7px 3px 7px;border-radius:3px}
#intranetMain h3.warning{color:var(--default-warning-color);background-color:white}


#intranetTopmenu div:not(:first-child),#intranetTopmenuWide div:not(:first-child){margin-left:7px}
#intranetTopmenu a,#intranetTopmenuWide a{color:white}
#leftSpaltenSelect{position:absolute;top:500px;left:10px;width:120px;padding:15px 0 25px 5px}
#leftSpaltenSelect p{margin-bottom:0;padding-bottom:0;color:white}
#leftSpaltenSelect td{color:white;padding:0 3px 0 3px}
#leftSpaltenSelect td.noBGcolor{background-color:white;color:black;padding:0}
#leftSpaltenSelect input, #intranetHeader input{border:none;color:white;cursor:pointer;font-weight:bold}
/*#intranetMain table{border:1px solid var(--default-border-color);border-radius:3px}*/
#intranetMain h3{margin:35px 0 8px 0;width:max-content}
#feedback{left:300px;top:180px;display:none;z-index:100 !important}
#feedbackBackground{position:fixed;top:0;left:0;width:100%;height:100%;background-color:silver;opacity:0.8;display:none;}

div.standardForm label{display:grid;grid-template-columns: 125px auto;margin-bottom:15px;column-gap:15px}
div.standardForm label div:first-child{grid-column:1;text-align:right}
div.standardForm label div:nth-child(2){grid-column:2}

.warning{color:red}
.error{color:red}
.info{color:green}
.top{vertical-align:top}
.right{text-align:right}
.center{text-align:center}
.verticalmiddle{vertical-align:middle}
.dark{background-color:LightCyan}
.bold{font-weight:bold}
.digital{font-family:courier,serif}
.width30{width:30px}
.width50{width:50px}
.width60{width:60px}
.width80{width:80px}
.width100{width:100px}
.width120{width:120px}
.width180{width:180px}
.width200{width:200px}
.width220{width:220px}
.width250{width:250px}
.width300{width:300px}
.width400{width:400px}
.smaller8{font-size:.8em}
.red{color:red}
.borderred{border-color:red}
.blue{color:blue}
.green{color:green}
.gray{color:gray}
.magenta{color:magenta}
.orange{color:orange}
.width80prozent{width:80%}
.breakword{overflow-wrap:anywhere}
.noborder{border:none;background-color:transparent !important}
.bordersilver{border:1px solid silver}
.overflowhidden{overflow:hidden}
.overflowauto{overflow:auto}
.pointer{cursor:pointer}
.jq_link{cursor:pointer}
.hidden{display:none}
.select{font-size:1.1em;background-color:var(--default-currentrecord-background-color)}
div.mediahidden{display:none}
table tr.sonntag{color:red}
table tr.sonntag td{border-top:1px solid red;border-bottom:1px solid red}

input.tag[type="number"]{width:3em}
input.jahr[type="number"]{width:5em}
select.monat{font-size:15px}
input.loeschen[type="submit"]{color:var(--default-warning-color);background-color:white}
a{text-decoration:none;color:mediumblue}
input.jq_json_input{display:block}
details > summary{cursor:pointer}

/* popup Window */
div.pWWindow{position:absolute;background-color:white;opacity:1;border:3px solid var(--default-border-color);box-shadow:silver 5px 5px 15px;z-index:5;border-radius:10px}
div.pWHeader{display:flex;width:100%;height:2em;background-color:var(--default-background-color);opacity:1;border-radius:7px 7px 0 0;cursor:pointer}
div.pWError{height:30px;background-color:red;opacity:1;border-radius:7px 7px 0 0}
div.pWHeaderLeft{position:absolute;left:0;top:0;width:99%;height:2em;color:white;padding:5px 0 2px 10px}
div.pWHeaderClose{position:absolute;right:5px;color:azure;cursor:pointer;font-size:1.5em}
div.pWHeaderClose:hover{color:black;font-size:1.6em}
div.pWBody{background-color:white;opacity:1;padding:3em 10px 20px 12px;border-radius:0 0 7px 7px}
div.pWBody form{display:inline}
:is(div.pWBody > form, div.pWBody details > form) > input[type=submit]:not(.noindent){margin-left:120px}
:is(div.pWBody > form, div.pWBody details > form) > input[type=submit]:not(.loeschen){background-color:var(--default-button-background-color)}
div.pWBody table th form > input[type=submit]{margin-left:0}
:is(div.pWBody, div.pWBody details) > button.delete{margin-left:120px;color:var(--default-warning-color)}
div.pWBody > form input[type=file]::file-selector-button{background-color:var(--default-button-background-color);border-radius:var(--default-button-border-radius)}
div.pWBody > h3{margin-left:80px;color:var(--default-header-color)}
div.pWBody > h3:first-child{margin-top:0}
div.pWBody > p{margin-left:80px;}
div.pWBody > form > table tr td{padding:7px}
div.pWBody input[type=submit]{cursor:pointer;border-color:var(--default-button-border-color);border-radius:var(--default-button-border-radius)}
div.pWBody button{cursor:pointer;background-color:var(--default-button-background-color);border-radius:var(--default-button-border-radius)}

div.pWBody :is(button.firstRight,button.secondRight){cursor:pointer;background-color:var(--default-button-background-color);border-color:var(--default-button-border-color);position:absolute;right:15px}
div.pWBody button.firstRight{top:3em}
div.pWBody button.secondRight{top:6em}
div.pWBody hr{border:1px dashed silver;margin:20px}
div.pWBackground{position:fixed;top:0;left:0;width:100%;height:100%;background-color:silver;opacity:0.4;display:none}
div.pWBody > div.flexouter{margin-top:15px;width:max-content;max-width:1000px}
div.pWBody > div.flexouter > div{border:1px solid var(--default-border-color);border-radius:5px;padding:0 12px 7px 12px}
div.pWBody > div.flexouter > div > h4{color:var(--default-text-color);font-style:italic;margin-bottom:5px}
div.pWBody > form > div.standardDetails > fieldset{border:1px solid var(--default-border-color);border-radius:5px}
div.pWBody div.json_updown{display:flex}
div.pWBody div.json_updown button{border:none;background-color:transparent}
div.pWBody img:not(.fullwidth){max-width:300px}

table.fixed{table-layout:fixed}
table.standardList tr:nth-child(2n){background-color:LightCyan}
table.standardList th{text-align:left;color:navy}
table.standardList th:not(.verticalmiddle){vertical-align:top}
table.standardList th input[type=submit]{border:none;background-color:transparent;color:red;cursor:pointer}
table.standardList th span.selectedCol{background-color:var(--default-background-color);color:white;padding:2px 5px 2px 5px;z-index:5;border-radius:3px}
table.standardList tr td{vertical-align:top;padding:5px}
table.standardList td form input[type=submit]{border:none;background-color:transparent;cursor:pointer}

table.standardList tr td:not(.jq_nolink):first-child {cursor:pointer}
table.standardList tr td.currentRecord{background-color:var(--default-currentrecord-background-color)}
table.standardList img{max-width:150px;max-height:150px}

/*table.standardDetails tr td{vertical-align:top;line-height:1em}*/
/*table.standardDetails tr td:nth-child(2n-1){text-align:right;padding-right:7px;width:120px;color:#00837c}*/
table.standardDetails tr td{color:#00837c}
table.standardDetails tr td:first-child{text-align:right;padding-right:7px;vertical-align:top}
table.teamFeldDetails tr td:first-child{text-align:right;padding-right:7px;color:#00837c}
table.teamFeldDetails tr td:nth-child(2){width:210px}
table.standardDetails select{background-color:white;border-color:var(--default-background-color);border-radius:var(--default-button-border-radius)}

div.standardDetails > div,div.standardDetails > fieldset > div{display:flex;flex-wrap:wrap;border-radius:5px 5px 0 0}
div.standardDetails > div > div,div.standardDetails > fieldset > div > div{margin:7px}
div.standardDetails > div > div:first-child,div.standardDetails > fieldset > div > div:first-child{width:100px;text-align:right;padding-right:7px;color:var(--default-label-color)} 
div.standardDetails > fieldset{width:max-content}
div.standardDetails select{background-color:white;border-color:var(--default-background-color);border-radius:var(--default-button-border-radius)}
div.standardDetails + input[type=submit]{margin-top:10px}

table.mailinhaltDetails tr td:first-child{width:150px}
table.mailinhaltDetails tr td:nth-child(2){width:50px}

table.mailinhalt tr td:first-child{width:250px}
table.mailinhalt tr td:nth-child(2){width:150px}
table.mailinhalt tr td:nth-child(3){width:150px}

table.import{padding:7px}
table.import tr td:first-child{width:100px}

table.personen tr td:first-child{width:200px}
table.personen tr td:nth-child(2){width:200px}
table.personen tr td:nth-child(6){width:200px}

table.sactouren tr td:first-child{width:300px}
table.sactouren tr td:nth-child(2){width:150px}
table.sactouren tr td:nth-child(3){width:120px}
table.sactouren tr td:nth-child(4){width:120px}
table.sactouren tr td:nth-child(5){width:150px}

table.aufgaben tr td:first-child{width:200px}
table.aufgaben tr td:nth-child(2){width:300px}
table.aufgaben tr td:nth-child(3){width:120px}
table.aufgaben tr td:nth-child(4){width:120px}

table.reservationuebersicht div{cursor:pointer}
table.reservationuebersicht tr td:first-child{text-align:center;font-family:Courier}

div.spaltenselector{display:flex;flex-wrap:wrap;gap:15px;border:1px solid var(--default-border-color);border-radius:3px;height:max-content}
div.spaltenselector form:not(:first-child) span{margin-left:25px}
div.spaltenselector > form{display:flex;flex-wrap:wrap;gap:15px;height:max-content}
/* div.spaltenselector > form > div{overflow:visible;width:max-content;height:max-content;margin:3px 0 3px 20px} */
div.spaltenselector > form > div > div:first-child{font-style:italic;font-size:.8em}
div.spaltenselector > form > div > div{overflow:visible;width:max-content;height:max-content;margin-left:7px}
div.spaltenselector :is(button,input,select){background-color:white;border-color:var(--default-border-color);border-radius:3px}
div.subspalten{border:1px solid var(--default-border-color)}
#bilddropzone{border:1px solid var(--default-border-color);border-radius:3px}
div.dropzone{background-color:var(--default-dropzone-color);width:100px;padding:5px;margin:5px;border:1px dotted red}
/*#bilddropinput::file-selector-button{background-color:var(--default-button-background-color);border-radius:var(--default-button-border-radius);margin:5px}*/

div.spaltenselector > div > button{font-size:1.3em}
div.spaltenselector + table{margin-top:15px;font-size:.9em}


table.tableborder{border-collapse:collapse;border:1px solid silver}
table.tableborder tr{border:1px solid silver}
table.tableborder td{border:1px solid silver}

div.letterSelector{border:1px solid var(--default-border-color);padding:7px;margin-bottom:15px;border-radius:3px}
div.letterSelector input{border:none;background-color:transparent;color:red}
div.letterSelector span{border:1px solid green;color:green;padding:3px}
button.new_entry,input.new_entry{border:1px solid var(--default-border-color);background-color:transparent;color:red;font-weight:bold;border-radius:3px}

#userSettings{display:flex;flex-wrap:wrap}
#userSettings > div{border:1px solid var(--default-border-color);border-radius:5px;margin:0 25px 25px 0;padding:5px 25px 25px 25px}
#userSettings input[type=submit]{background-color:var(--default-button-background-color)}

#userSettings img{max-width:300px}


div.datumreiter > p{margin:0}
div.datumreiter > p:first-child{color:silver;font-size:.8em}

svg.tableheader text{fill:navy;font-weight:normal}

body > dialog{border:2px solid var(--default-border-color);border-radius:5px;padding:15px}
body > dialog > form{display:inline}
body > dialog > button{display:inline;margin-left:25px}
#fontsettingsDialog, #headerImage > dialog{border:2px solid var(--default-border-color);border-radius:5px;padding:15px}
#closeSettingsDialog{position:absolute;top:5px;right:5px}
#fontsettingsDialog select{background-color:white;border-color:var(--default-background-color);border-radius:var(--default-button-border-radius)}


div.listHeader{margin-left:10px;margin-bottom:15px;display:flex;justify-content:space-between;max-width:1000px}
div.listHeader > div > form > div{width:max-content;font-size:.8em;max-width:500px}
div.listHeader > div > form > div > div{display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:7px;padding-bottom:3px}
div.listHeader > div > form > div > div > div:first-child{width:max-content;text-align:right;padding-top:2px}
div.listHeader > div > form > div > div > div:nth-child(2){text-align:right}
div.listHeader > div > form select{border:1px DarkGreen solid;background-color:LemonChiffon;border-radius:3px}
div.listHeader > div:nth-child(2) > div{display:flex;justify-content:flex-end;column-gap:7px;padding-bottom:3px}