@media screen (hover: no) { 
	2body { font-size: 2rem; }
}

@media (max-width: 3cm){
	body {
		background-color: red;	
		2color: white;
		font-size: 1cm;
	}
}

@font-face {
  font-family: "proxima-regular";
  src: url("fonts/proxima-regular.otf");
}



html{
	font-size: 100%;
	2font-size: 1cm;
}

body {
	2background-color: rgb(110,110,110);
	background-color: #ECCCB6ff;
	background-color: rgb(240,240,240);
	background-color: rgb(230,230,230);
	2background-color: aliceblue;
	margin: 0px;
	2color: rgb(255,255,255);
	2font-family: verdana;
	2font-family: cursive;
	2font-family: serif;
	font-family: proxima-regular, Segoe UI,Verdana,Arial,Helvetica,sans-serif;
	font-family: proxima-regular;
	2margin-top: 2em; --UserBar;
	margin-bottom: 2em; --app-bar;
	2padding-bottom: 2em;
	2min-width: 44em;
	2font-size: medium;
	overflow-x: hidden;
}

label { font-size: 0.9em; }
label::after { content: ':'; }


#LogoBanner {
	2min-width: 44em;
	position: relative;
	2display: flex;
	2justify-content: space-between;
	min-height: 6em;
	background-color: rgb(0,170,55);
	2background-image: url(./images/logo.svg); --TODO seperate div;
	background-repeat: no-repeat;
	background-position: 20% 0;
	2padding-bottom: 1em;
	margin-bottom: 1em;
	font-family: sans-serif;
}
#LogoBanner.landing2 {
	background-image: none;
	2background-image: url('images/pexels.com/pexels-photo-2678301.jpeg');
	2background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 5%, #f69d3c 6%);
	background: repeating-linear-gradient(25deg, #3ff7a6, #2ba821 5%, #f69d3c 6%);
	background: repeating-linear-gradient(23deg, #00b000, #006600 7%, #00ff66 8%);
	background: repeating-linear-gradient(23deg, #00b000, #006600 7%, #00b000 9%);
	background: repeating-linear-gradient(23deg, #00b000, #006600 17%, #00b000 29%);
	background: repeating-linear-gradient(23deg, #009000, #006600 17%, #009000 29%);

}

#LogoBanner img {
	height: 6em;
	2width: 1em;
	padding: 0.2em;
}

#LogoBanner #domain {
	padding-right: 3em;
	padding-left: 1em;
}
#LogoBanner #domain div {
	font-size: 0.7rem;
	color: blue;
}
#LogoBanner #domain span {
	2color: #79d1cf;
	color: #c9f1df;
	color: #89e1df;
	color: #c0f0ff;
	2color: white;
	font-size: 3rem;
	font-weight: bold;
	font-style: italic;
}

#Session {
	position: relative;
	margin: 1em;
	color: white;	
	2font-weight: bold;
	cursor: pointer;
	white-space: no-brake;
	line-height: 2em;
}
#Session>a {
	background-color: green;
	padding: 0.2em;
	padding-right: 0.5em;
	padding-left: 0.5em;
	border-radius: 1em;
	2border: solid red;
}
#Session #Name2 {
	border-bottom-right-radius: 0em;
	border-bottom-left-radius: 0em;
	padding-left: 2em;
	padding-right: 2em;
}

#Session #Name2 {
	position: absolute;
	top:0;
	right: 0;
	z-index: 1;
}

#LogoBanner #CPanel {
	position: absolute;
	right: 0em;
	top: 100%;
	border-top-right-radius: 0;
	2color: white;
	padding: 0.2em 1em;
	background-color: green;
	z-index: 1;
}
#LogoBanner #CPanel a{
	display: block;
	padding-bottom: 0.4em;
	white-space: nowrap;
}

#SmallLogin {
	opacity: 0.7;
	margin: 1em;
}
#SmallLogin input{
	width: 8em;
	2background-color: lightgrey;
	background-color: white;
}

.round {
	border-radius: 0.4em;
}

[template] { display: none !important; } 
.hidden, [hidden]  {
	display: none;
	2transition-property: opacity;
	2transition-duration: 10s;
	2opacity: 0;
}
:target .hidden  {
	display: block;
}
.faded  { opacity: 0.6; }
:hover > .faded  { opacity: 1; }



.section.moto {
	2margin: 1.5em;
	padding-top: 3em;
	padding-bottom: 3em;
}
.spacer {height: 2em; width:2em; }
.divider {
	height: 1em; width: 100%;
	background-color: rgba(0,0,0, 0.25);
}

.margin > * {
	margin: 0.5em;
	2margin-left: 0;
	2margin-right: 0;
}

.margin-bottom > * { margin-bottom: 0.5em; }
.margin-right > * { margin-right: 0.5em; }
.margin-around { margin: 1em; }


.app {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	--margin: 1em;
	--border: 1px red solid;
	background-color: rgba(140,140,140, 1);	
}

textarea, input, button {
	2font-size: 26px;
	2font-size: 1rem;
}
textarea {
	border-radius: 0.4em;
	max-width: 80vw;
}
textarea, input {
	background-color: rgba(240,240,240, 0.1);
	background-color: rgba(100,140, 140, 0.1);
	color: inherit;
	border-bottom-color: rgba(0,0,0, 1);
	border-right-color: black;
}
.automargin input { margin-bottom: 0.5em; }

input {
	background-color: rgba(255,255,255, 1);
	2margin-bottom: 0.5em;
	border-radius: 1em;
	padding: 0.2em;
	padding-left: 1em;
}
input[type="submit"], input[type="button"], button {
	border-color: rgba(0,0,0,1);
	border-top-color: rgba(0,0,0,1);
	background-color: rgba(60, 200, 60, 0.9);
	padding: 0.2em;
	padding-left: 1em;
	padding-right: 1em;
	border-radius: 0.8em;
	cursor: pointer;
	color: black;
}
button.go {
	padding: 1em;
	border-radius: 28em;
	font-weight: bold;
}


textarea[disabled],
[fake-disabled],
input[disabled] {
	border: none;
	background-color: rgba(100,140, 140, 0.1);
}
input[disabled], [fake-disabled] {
	text-align : center;
	2border-radius: 0.4em;
}
[fake-disabled]:focus{
	border: unset;
	background-color: white;
}

ul, ol{
	list-style: none;
	padding: 0em;
	margin: 0;
}


.center { text-align : center; }
.center-vertically {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.right { text-align : right; }
.left { text-align : left; }
.bold { font-weight : bold; }
.small { font-size : 0.7em; }
.big { font-size : 1.2em; }

.mb1 {margin-bottom: 0.5em}
.mb2 {margin-bottom: 1.0em}
.mb3 {margin-bottom: 1.5em}
.fill {
	position: absolute;
	top:0; left:0;
	width: 100%;
	height: 100%;
	2border: solid red;
	2margin: 0;
}


.flex {	display: flex;  flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}
.flex-reverse {
	display: flex;
	flex-direction: row-reverse;
}
.flex-center {
	display: flex;
	justify-content: center;
}
.flex-right {
	display: flex;
	justify-content: right;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.glue { flex-grow: 1; }
.glue1 { flex-grow: 1; }
.glue2 { flex-grow: 2; }

.flex *{
	2flex-grow: var(--flg, auto)
}
.border{
	border: 1px solid;
	2margin: 0px;
}
.border1{ border-width: 1px; border-style: solid; }
.border2{ border-width: 2px; border-style: solid; }

.border-dot { border: 1px dotted; }
.border-dash { border-style: dashed; }

.icon {
	width: 2em;
	2height: 1em;
}

.map {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.stars {
	color: rgb(250,220,0);
	background-color: grey;
	border-radius: 0.8em;
	padding: 0.2em;
	font-weight: bold;
	font-size: 1.1em;
	2letter-spacing: .2em;
	2text-align: center;
	display: inline-block;
	min-width: 1.3em;
}
.stars span,.stars def {
	font-size: 0.8em;
}

OO.stars::after {
	content: '.';
	position: relative;
	left: -0.7em;
	font-size: 1em;
}



#Map img { border: none; }

input.small{
	width: 6em;
}
input[type="number"]{
	width: 6em;
}

[href]{
	text-decoration: unset;
	color: unset;
}
*[link]{
	color: blue;
	text-decoration: underline dashed;
	2text-decoration: underline solid;
	2text-decoration-stlye:dashed;
}
*[link2]{
	2color: blue;
	text-decoration: underline dashed;
	2text-decoration: underline solid;
	2text-decoration-stlye:dashed;
}

[onclick]{
	cursor: pointer;
}

#UserBar {
	position: fixed;
	top: 0px;
	width: 100%;
	min-height: 2em;
	height: 2em;
	margin: 0px;
	background-color: rgba(20,50,140, 0.9);
	background-color: rgba(0,170,55, 0.9);
	2background-image: linear-gradient(rgba(20,50,140, 1.0), rgb(200,50,40));
	padding-bottom: 0.2em;
	color: white;
	font-weight: bold;
	z-index: 10;
}
#UserBarPlaceholder { height: 2em }

#ChatBox * { margin: 0em; }
#ChatBox {
	display: none;
	position: fixed;
	bottom: 0px;
	right: 0px;
	2width: 100%;
	2height: 2em;
	margin: 0px;
	background-color: rgb(110,130,115, 0.9);
	background-color: rgb(190,220,195, 0.95);
	2padding-bottom: 0.2em;
	padding: 0.2em;
	z-index: 11;
}

#ChatBox .subchat{
	margin-bottom: 0.6em;
	padding: 0.1em;
	2border: 1px black solid;
	border-radius: 0.4em;
}

.subchat {
	display: block;
}

.subchat.open {	background-color: rgb(200,210,40, 0.6); }
.subchat.agreed { background-color: rgb(10,210,40, 0.6); }
.subchat.rejected { background-color: rgb(190,20,10, 0.6); }
.subchat.done {	background-color: rgb(110,110,110, 0.6); }

#ChatPicker {
	display: none;
	min-height: 15em;
}

#Chat {
	display: none;
	margin: 0.5em;
	min-height: 15em;
	width:10em;
	2background-color: rgb(110,130,115, 0.9);
	2background-color: rgb(180,210,185, 0.9);
	position: relative;
}
#Chat .title {
	margin-bottom: 1em;
	border-bottom: 2px solid green;
}

#Chat span{
	padding: 0.1em;
	padding-right: 0.5em;
	padding-left: 0.5em;
	border-radius: 0.4em;
}
#Chat .left span{
	background-color: rgba(0,0,0, 0.2);
}
#Chat .right span{
	background-color: rgba(0,150,0, 0.2);
}

#Chat input {
	position: absolute;
	bottom: 0em;
	width: 100%;
}


.map {
	z-index: 0;
}

#Map {
	2min-width: 44em;
	width: 90%;
	max-width: 60em;
	2width: 30em;
	height: 60vh;
	max-height: 40em;
	margin-top: 1em;
	margin-bottom: 1em;
}

#Map2 {
	width: 29em;
	height: 15em;
}

#Map .leaflet-control-attribution  {
	line-height: 2em;
	background-color: rgba(0,0,0,0);
}
#Map .leaflet-control-attribution:hover  { background-color: white; }

.leaflet-control-attribution attrShow vis{
	opacity: 1;
	font-weight: bold;
	font-size: 2em;
} 
.leaflet-control-attribution:hover attrShow vis{ display: none; }

.leaflet-control-attribution>attrShow>span {
	display: none;
}
.leaflet-control-attribution:hover>attrShow>span {
	display: inherit;
}

.need_auth, .authed .guest { display:none; }
.need_auth.authed { display: inherit; }
.auth_failed .guest {display: inherit; }


#MyClosedJobs li a,
#PostedJobs li a,
.completedJobs li a
{
	2background-color: rgba(90,210,130, 0.7);
	background-color: rgba(210,240,50, 0.6);
	border-radius: 0.8em;
	padding: 0.2em;
	padding-left: 1em;
	padding-right: 1em;

	2margin: 1em;
	background-color: rgba(90,210,130, 0.7);
	line-height: 2em;
}