/***    3-Farb-Konzept    ***/  
/* Main Primary color */
.rgba-primary-0 { color: rgba(226,213, 34,1) }	/*  mittel      */
.rgba-primary-1 { color: rgba(255,246,121,1) }  /*  sehr hell   */
.rgba-primary-2 { color: rgba(240,229, 77,1) }  /*  hell        */
.rgba-primary-3 { color: rgba(180,169, 14,1) }  /*  dunkel      */
.rgba-primary-4 { color: rgba(142,132,  0,1) }  /*  sehr dunkel */
/* Main Secondary color (1) */
.rgba-secondary-1-0 { color: rgba(177,216, 32,1) }	
.rgba-secondary-1-1 { color: rgba(218,246,117,1) }
.rgba-secondary-1-2 { color: rgba(196,230, 74,1) }
.rgba-secondary-1-3 { color: rgba(139,173, 14,1) }
.rgba-secondary-1-4 { color: rgba(107,135,  0,1) }
/* Main Secondary color (2) */
.rgba-secondary-2-0 { color: rgba(226,182, 34,1) }	
.rgba-secondary-2-1 { color: rgba(255,224,121,1) }
.rgba-secondary-2-2 { color: rgba(240,203, 77,1) }
.rgba-secondary-2-3 { color: rgba(180,142, 14,1) }
.rgba-secondary-2-4 { color: rgba(142,109,  0,1) }

:root {
  --me-button0: rgba(226,182, 34,1);
  --me-button1: rgba(255,224,121,1);
  --me-button2: rgba(240,203, 77,1);
  --me-button3: rgba(180,142, 14,1);
  --me-button4: rgba(142,109,  0,1);
  --form-control-color:  red;          /** Checkbox     **/
}



.aLink  {text-decoration:none; color:black;}
.aLink:hover {color:red;}

table.edit {border-collapse:collapse; margin:0 auto; border:2px solid var(--me-color3); background-color:gold;}
  table.edit th {padding:0.1em 0.5em; color:black; font-weight:normal;  letter-spacing:0.1em; text-align:right; text-shadow: 0 -1px 1px #333;}
  table.edit td {padding:0.1em 0.5em; text-align:left;}
  table.edit a  {text-decoration:none; }
  table.edit td a:hover {color:red; }
  table.edit td a:visited {}
  table.edit td hr {border-color:var(--me-color1);}
  table.edit caption {
      font-size:1.5em;
      letter-spacing: 0.5em;
      font-weight:bold;
      color: white;
      text-shadow: 0 -1px 1px #333;
      background: linear-gradient( var(--me-color2), var(--me-color1), var(--me-color3)); 
      vertical-align: middle;
  }
  

.popupImg {
  max-width:600px;
  max-height:600px;
  border;none;
}

.frame  {padding:0; text-align:center;}

.seitenSteuerung1  {font-size:80%;}
.seitenSteuerung3  {font-size:150%;  font-weight:bold;}

.textoverflow { 
	max-width: 20.0em;
  text-align:left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}
.line-clamp {
  max-width: 40.0em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}


.ttipDiv  {
  background-color: var(--me-color1);
  border:  2px solid red;
  margin:0; 
  padding:0; 
}
.ttipFig  {
  background-color:var(--me-color4);
  margin:0;
  padding:0;
  border:2px solid var(--me-color1);
}
.ttipFig img {max-width:1000px; padding:0; margin:0;}
.ttipCap  {
  font-size:1.4em;
  max-width:585px;
  color:black;
  margin:5px;
}

.ttipTxt  {
  font-size:1.4em;
  max-width: 45em;
  padding: 2.0em;
  background-color:var(--me-color4);
  border:2px solid var(--me-color1);
}


.txtedit, .comedit  {
  border:1px solid var(--me-color3);
  background-color:var(--me-color4);
  font-size:1.0em;
  resize: none;
  overflow: auto;
  outline: none;
  height:8em;     /** enstricht 6 Zeilen, scrollen ab 7. Zeile  **/
  width: 51em;
  padding:1ex;
}
.comedit  { 
  height:2.7em;   /** entsrpicht 2 Zeilen, scrollen ab 3. Zeile **/
}   

input {    
  font-family: 
     -apple-system,        /** Safari for OS X and iOS (San Francisco) **/
     BlinkMacSystemFont,   /** Chrome < 56 for OS X (San Francisco) **/
     "Segoe UI",           /** Windows **/
     Roboto,               /** Android **/
     "Helvetica Neue",     /** Basic web fallback **/
     Arial, 
     sans-serif;  
  font-size:1.0em;
  background-color:var(--me-color4);
  border:1px solid var(--me-color3);
  cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input:invalid{
 color:red;
}
input[type="number"]  {  
  -moz-appearance: textfield;
  width:9em;
}
input[type="date"], 
input[type="time"]  {  
  width:9em;
}
.form-control {
  font-style:italic;
  font-size: 0.8em;
  line-height: 1.0;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}
input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: var(--me-bgcolor);
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: none;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}
input[type="checkbox"]::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
}
input[type="checkbox"]:checked::before {
  transform: scale(1);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:var(--me-color3);
  font-size:80%;
  text-align:center;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:var(--me-color3);
  font-size:80%;
  text-align:center;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color:var(--me-color3);
  font-size:80%;
  text-align:center;
}

.edLatLong  {
  width:20em;
}
.comment  { 
  font-size: 80%; 
  font-style:italic; 
  padding: 0 1em;
}

 /* Customize the Radio label */
.container {
  display: block;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.4em;
  cursor: pointer;
  font-size: 1.0em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 1.0em;
  width: 1.0em;
  background-color: var(--me-color4);
  border-radius: 50%;
}

/* On mouse-over, add a background color */
.container:hover input ~ .checkmark {
  background-color: var(--me-color3);
}

/* When the radio button is checked, add a background */
.container input:checked ~ .checkmark {
  background-color:var(--me-color4);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: red;
} 

.buttonEd { 
      font-size:1.0em;
      margin: 4px 0;
      padding: 0.8em 0.4em;
      border: 1px solid var(--me-color3);
      background:linear-gradient(var(--me-button0),var(--me-button1),var(--me-button1),var(--me-button2),var(--me-button2),var(--me-button4));
      border-radius: 4px 4px 4px 4px; 
      text-shadow: 0 -1px 1px #333; 
      letter-spacing: 0.1em;
      width:6.0em;
      cursor: pointer;
} 
.buttonEd:hover {background: linear-gradient(rgba(200,0,0,1),rgba(220,0,0,1),rgba(255,0,0,1),rgba(255,30,0,1),rgba(255,0,0,1),rgba(220,0,0,1),rgba(200,0,0,1)); } 

.button2 { 
      font-size:0.8em;
      margin: 3px 1px;
      padding: 3px 3px;
      border: 1px solid var(--me-color3);
      background:  var(--me-color1) linear-gradient( var(--me-color2), var(--me-color1), var(--me-color3));
      border-radius: 4px 4px 4px 4px; 
      text-shadow: 0 -1px 1px #333; 
      letter-spacing: 0.05em;
      width:5.0em;
      cursor: pointer;
} 
.button2:hover {background:red;}


#map {
   height: 295px;
   width: 295px;
}