/* *************************************************************************** */
/*Login Formular*/
.LoginFormAltert {
  text-align: center;
  color: red;
}
form#login {
  width: 50%;
  padding: 0px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 25%;
  border: 3px solid #9F9F9F;
  border-radius: 10px;
  background: #fff;
}
@media screen and (max-width: 640px) {
  form#login {
    width: 90%;
    margin-left: 5%;
  }
}
.container_login, form#login h2 {
  padding: 16px;
}
form#login input[type=text],
form#login input[type=email],
form#login input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  font-size: 1em;
  border-radius: 5px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
form#login button {
  font-size: 1em;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}
button:hover { opacity: 0.8; }
a.pass_forgot:link,
a.pass_forgot:visited,
a.pass_forgot:link,
a.pass_forgot:active {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-decoration: none;
  margin-top: 10px;
  color: #00BF00;
}
a.pass_forgot:hover {
  opacity: 0.8;
  color: #005F00;
  text-decoration: underline;
}

/* *************************************************************************** */
/* *************************************************************************** */
/* *************************************************************************** */
/* Formatierung Aussencontainer  old cont_table */
.ContainerFormular  {
  width: 500px;
  padding: 15px;
  margin: 10px; /* abstand nach aussen */
  background-color: #fff;/* #DFDFDF; */
  border: 1px solid #8F8F8F;
  box-shadow: 5px 5px 5px #7F7F7F;
  border-radius: 10px;
}
.ContainerFormular h1, h2, h3, h4, h5, h6 {
  color: #00A0FF; /* #fff */
  /*
  text-shadow: 1px 1px 1px #4E68EB,
               1px -1px 1px #4E68EB,
              -1px 1px 1px #4E68EB,
              -1px -1px 1px #4E68EB;
            */
  margin: 0 0 30px 10px;
}
.ContainerFormular h3 img {
  margin-right:20px;
}
@media screen and (max-width: 640px) {
  .ContainerFormular {
    width: 90%;
    margin: 2%;
    padding: 10px;
  }
}
/* ************************************************* */
/* Formatiert Button und links die ussehn wie Button */
.ContainerFormular button, 
.aButton, 
.buttontypesubmit, 
.Routenbau button, 
.RoutenbauModalSL button, 
.SecurityQuest button {
  width: 300px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #2F2F2F;
  padding: 5px;
  border-radius: 5px;
  color:#FFFFFF;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 1px  1px 1px #2F2F2F,
               1px -1px 1px #2F2F2F,
              -1px  1px 1px #2F2F2F,
              -1px -1px 1px #2F2F2F;
  box-shadow: 3px 3px 3px #7F7F7F;
  /* background-color: #4CAF50; */
  background: linear-gradient(to bottom, #7eb981, #378d3c 80%);
  cursor: pointer;
  margin-left: 3%;
}
@media screen and (max-width: 640px) {
  .buttontypesubmit {
    width: 200px;
  }
}
.aButton { width:288px; }
.aButtonLink {  text-decoration: none;}
a:hover.aButtonLink { opacity: 0.8;  }

/* Links die mit Buttonstyle V2 versehen werden */
.ButtonV2 a {
  border-radius: 5px;
  padding: 7px 15px 7px 15px;
  margin: 0 5px 0 0;
  width: 222px;
  text-align: center;
  border: 1px solid #6F6F6F;
  color:#FFFFFF;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 1px  1px 1px #2F2F2F,
               1px -1px 1px #2F2F2F,
              -1px  1px 1px #2F2F2F,
              -1px -1px 1px #2F2F2F;
  /* background-color: #4CAF50; */
  background: linear-gradient(to bottom, #7eb981, #378d3c 80%);
}
.ButtonV2 a:hover {
  opacity: 0.8;
}
@media screen and (max-width: 640px) {
  .ButtonV2 a {
    padding: 5px 0 5px 0;
    width: 45%;
  }
  .ButtonV2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
/* ************************************************* */
/* Formularfelder formartierung */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
}
/* Gild fuer alle Selects */
select {
  padding: 0.5em;
  font-family: Verdana;
  margin: 5px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #2F2F2F;
  border-radius: 4px;
}
.ContainerFormular input[type=text],
.ContainerFormular input[type=email],
.ContainerFormular input[type=password],
.ContainerFormular input[type=number],
.ContainerFormular input[type=search],
.ContainerFormular input[type=color],
.ContainerFormular input[type=time],
.ContainerFormular input[type=date],
.ContainerFormular textarea,
.ContainerFormular select,
.ContainerFormular fieldset,
.ContainerFormular details,
.Routenbau input[type=date],
.Routenbau input[type=text],
.Routenbau input[type=search],
.Routenbau select,
.Rechner input[type=number],
.Rechner input[type=text] {
  width: 80%;
  padding: 0.5em;
  font-family: Verdana;
  /* width: 70%; */
  margin: 5px;
  font-size: 14px;
  background: #FFF;
  border: 1px solid #2F2F2F;
  border-radius: 4px;
}

.Routenbau input[type=date],
.Routenbau input[type=text],
.Routenbau input[type=search],
.Routenbau select {
  width: 95%;
}
/* kein Ahnung -> Search Feld is Standart iwi groeßer */
.Routenbau input[type=search] {
  width: 91%;
}

/* color speziefisch -> muss groeßer gemacht werden*/
.ContainerFormular input[type=color] {
  width: 150px;
  height: 35px;
}
.ContainerFormular select { width: 83%; }

.ContainerFormular input[type=time] , .ContainerFormular input[type=date] {
  text-align: center;
}
.ContainerFormular input[type=time] { width: 120px; }
.ContainerFormular input[type=date] { width: 160px; }

@media screen and (max-width: 640px) {
  .ContainerFormular input[type=time] {
    width: 80px;
    padding: 0.35em;
    margin: 2px;}
  .ContainerFormular input[type=date] {
    width: 100px;
    padding: 0.35em;
    margin: 2px;}
}
/*************************************** */
/* Input Benennung */
.fancy-input {
  margin: 1em 0 1em 0;
  position: relative;

  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 15px 0 0 0;
}
.fancy-input label, .ContainerFormular summary {
  position: absolute;
  z-index: 0;
  color: #666;
  background: #fff;
  padding: 0 0.5em;
  font-size: 0.95em;
  top: -0.6em;
  left: 4em;
}
.fancy-input label {
  display: flex;
  flex-direction:row;
  justify-content:flex-start;
  text-decoration: none;
}
/* Benennung rueckt nur in fieldset mehr nach links
  da kein tooltip vorhanden ist und die posit beeinfluss */
.ContainerFormular fieldset .fancy-input label,
.ContainerFormular details .fancy-input label {
  left: 1em;
}
.ContainerFormular fieldset {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  }
.ContainerFormular legend {
  color: #666;
  background: #fff;
  padding: 0 0.5em;
  font-size: 1.1em;
  top: -0.6em;
  left: 4em;
}
/* zeigt bei required meldung an */
.ContainerFormular input:required + span::before,
.ContainerFormular select:required + span::before {
	position: relative;
  vertical-align:top;
  left: 3px;
	content: "✗";
	color: red;
}
.ContainerFormular input:required:valid + span::before,
.ContainerFormular select:required:valid + span::before {
	content: "✔";
	color: green;
}
.ContainerFormular .dauer {
  width: 120px;
}
@media screen and (max-width: 640px) {
  .ContainerFormular .dauer {
    width: 90%;
  }
}
#hide1M3, #hide2M3, #hide3M3, #hide4M3 {
  display: none;
}
/* ************************************************* */
/* Kurs Termin spezifische Formatierung*/
.bemerkung {
  width: 100%;
  text-align: right;
  font-style: italic;
  font-size: 80%;
}
.ButtonNeuerTermin {
  text-align: center;
  font-size: 16px;
  border: 1px solid #2F2F2F;
  margin:3px;
  padding: 5px;
  border-radius: 6px;
  color:#FFFFFF;
  text-decoration: none;
  box-shadow: 3px 3px 3px #7F7F7F;
  background-color: #00A0FF;
  cursor: pointer;
}
@media screen and (max-width: 640px) {
  .ButtonNeuerTermin { font-size: 20px; }
}
.TerminDel {
  position: relative;
  cursor: pointer;
  width: 30px;
  left: 400px;
  top:   30px;
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}
/* Add media queries for smaller screens */
@media screen and (max-width:650px) {
  .TerminDel {
    left: 180px;
  }
}
/* *************************************
/* Routenbau */

.sliderV1 {
  margin-top: 30px;
  position: relative;
  left: 10px;
  top: 30px;
  z-index: 0;
  -webkit-appearance: none;
}
.sliderV1 + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.3;
  padding-left:70px;
  position: relative;
  margin-top: -30px;
}
.sliderV1 + label:before {
  width: 50px;
  height: 20px;
  border-radius: 20px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}
.sliderV1 + label:after {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}
.sliderV1:checked + label:before {
  background-color: #2b8718;
}
.sliderV1:checked + label:after {
  margin: 0 0 0 30px;
}
/* *************************************
/* Routenbau Autovervollstaendigung*/

.autocomplete {
  /*the container must be positioned relative:*/
  z-index: 0;
  position: relative;
  display: inline-block;
  width: 100%;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}