/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/Roboto300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Roboto400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/Roboto500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html,
body {
  background: #fafafa;
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: #424242;

  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}
.cursorPointer {
  cursor: pointer;
}

.w-100 {
  width: 100% !important;
}

.displayflex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.fontWeight400 {
  font-weight: 400;
}

.marginTop10 {
  margin-top: 10px;
}

hr.hrorange {
  margin: 0;
  border-color: #f57f17;
}

.leaflet-container {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #424242;
}
.leaflet-popup-content,
.mapboxgl-popup {
  width: 300px !important;
  max-width: 300px !important;
}

.rwcluster {
  background-color: rgba(115, 165, 236, 0.3);
  background-clip: padding-box;
  border-radius: 20px;
}

.rwcluster div {
  background-color: rgba(115, 165, 236, 1);
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 15px;
  font: 12px "Roboto" sans-serif;
}

.rwcluster span {
  font-weight: bold;
  color: #ffffff;
  line-height: 30px;
}

/*ClusterNummern Platzierung*/

.clusternumber {
  padding-left: 76.5%;
  padding-top: 62.5%;
  font-size: 9px;
  color: white;
}

.clusternumber10 {
  padding-left: 71%;
  padding-top: 64.75%;
  font-size: 8px;
  color: white;
}

.clusternumber100 {
  padding-left: 68%;
  padding-top: 63.4%;
  font-size: 8px;
  color: white;
}

.clusternumber1000 {
  padding-left: 63.5%;
  padding-top: 63%;
  font-size: 8px;
  color: white;
}

/*cluster pie charts colours*/
.pie-inner-circle {
  fill: #fff;
}

.category-grey {
  fill: #b0bec5;
  background: #b0bec5;
}
.category-green {
  fill: #5eab37;
  background: #5eab37;
}
.category-orange {
  fill: #f57f17;
  background: #f57f17;
}
.category-red {
  fill: #cf232a;
  background: #cf232a;
}

.category-lightblue {
  fill: #b0d4e9;
  background: #b0d4e9;
}
.category-blue {
  fill: #3182bd;
  background: #3182bd;
}
.category-darkblue {
  fill: #053362;
  background: #053362;
}

.hr {
  border: 0;
  border-top: 1px solid #eee;
  height: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 0.5em;
  -webkit-margin-start: auto;
  -webkit-margin-end: auto;
}

.willkommen_page_container {
  overflow-y: auto;
  max-height: calc(90vh - 20px - 35px - 35px);
}
@media (max-width: 768px) {
  .willkommen_page_container {
    max-height: calc(100vh - 20px - 35px - 35px - 5px);
  }
}
.willkommen_navigation_button {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  border: 2px solid #76c54d;
  cursor: pointer;
}
.willkommen_navigation_button:hover {
  background: #76c54d;
}
.willkommen_navigation_button.active {
  border: 2px solid #5eab37;
  background: #5eab37;
}
.willkommen_baustelle_icon {
  height: 40px;
  border: 1px solid black;
  border-radius: 5px;
  margin-right: 5px;
}

#iconcontainer {
  width: 60px;
  height: 100vh;
  background-color: rgb(93, 172, 51);
  display: inline-block;
  float: left;
}

.icons,
.logo {
  border: 0;
  border-bottom: 1px solid #eee;
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #ececec;
  display: inline-block;
  text-align: center;
}

.logo img {
  width: auto;
  height: inherit;
}

.icons.active {
  background-color: rgb(63, 116, 35);
}

.icons:hover {
  background-color: rgb(90, 144, 62);
}

.icons {
  cursor: pointer;
}

.fa.fa-map-marker {
  font-size: 30px;
  line-height: inherit;
}
.fa.fa-filter {
  font-size: 30px;
  line-height: inherit;
}

.fa.fa-envelope {
  font-size: 30px;
  line-height: inherit;
}

.fa.fa-info-circle {
  font-size: 30px;
  line-height: inherit;
}

.fa.fa-question-circle {
  font-size: 30px;
  line-height: inherit;
}

.fa.fa-user-circle-o {
  font-size: 30px;
  line-height: inherit;
}

.marker-cluster {
  background-clip: padding-box;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}
.marker-cluster div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;

  text-align: center;
  border-radius: 15px;
  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
  line-height: 30px;
}

#textcontainer {
  width: 0px;
  height: 100vh;
  display: inline-block;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1000;
}

.inhaltmaplayers {
  width: 100%;
  height: inherit;
  display: none;
  padding: 10px;
  max-height: 100vh;
  overflow: auto;
}

.inhaltemailalerts {
  width: 100%;
  height: inherit;
  display: none;
  padding: 10px;
}

.inhaltinfo {
  width: 100%;
  height: inherit;
  display: none;
  padding: 10px;
}

#map {
  border: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}

#map.baustelleMelden {
  border: 0.75rem solid #5eab37;
}

#menu {
  max-height: 100vh;
  width: 33.33%;
  max-width: 400px;
  min-width: 320px;

  position: absolute;
  top: 0;
  z-index: 1005;

  display: flex;
  flex-direction: column;
}

#menu.overflow {
  overflow-y: auto;
}
.menu {
  z-index: 1001;
}
.menutext {
  margin-left: 48px;
  line-height: 28px;
}
.menutext.sub {
  margin-left: 90px;
}
.menutext.maintext {
  font-size: 22px;
  line-height: 50px;
}
.menu.main {
  grid-row-start: 1;
  grid-row-end: 2;
  cursor: pointer;
}
.menu.sub {
  font-weight: 100;
}
.menu.sub.content {
  padding: 10px 0 10px 48px;
  height: auto;
}
.menu.sub.hide {
  display: none;
}
.menu.sub.options {
  border-bottom: 0.5px solid #fafafa;
  cursor: pointer;
}
.menurighticon {
  float: right;
  width: 20px;
  height: 20px;
  margin-top: -25px;
  margin-right: 10px;
}
.menurighticon.main {
  float: right;
  width: 40px;
  height: 40px;
  margin-top: -45px;
  margin-right: 0;
}

#modalbody {
  -webkit-overflow-scrolling: touch;
}

.menulefticon {
  float: left;
  width: 30px;
  margin-left: 48px;
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.rotate135 {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.rotate270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.mypopup {
  font-size: 12px;
}

.popup-beschriftung {
  font-weight: bold;
}

table {
  border-spacing: 10px 0px !important;
  border-collapse: inherit;
}

th.check {
  width: 20px !important;
  height: 20px !important;
  border: 1px solid #b0bec5;
  border-radius: 2.5px;
  margin-right: 2px;
  position: relative;
  display: block;
  cursor: pointer;
}

#check {
  min-width: 20px;
  min-height: 20px;

  background-color: black;
}

.table {
  text-align: center;
  margin-bottom: 0;
}

.mapboxgl-popup-content {
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: #424242;
}

.spider-leg-container {
  width: 1px;
  height: 1px;
  overflow: visible;
  will-change: transform;
}

.spider-leg-container:hover {
  cursor: pointer;
}

.spider-leg-container .spider-leg-pin {
  position: relative;
  z-index: 1;
}

.spider-leg-container .spider-leg-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: #343434;
  opacity: 0.45;
  transform-origin: bottom;
  z-index: 0;
  height: 0;
}

.spider-leg-container:hover .spider-leg-line {
  opacity: 1;
}

/* Animations specific styles */

.spider-leg-container.animate {
  -webkit-transition: margin 0.15s linear;
  -moz-transition: margin 0.15s linear;
  -ms-transition: margin 0.15s linear;
  -o-transition: margin 0.15s linear;
  transition: margin 0.15s linear;
}

.spider-leg-container.initial,
.spider-leg-container.exit {
  margin-left: 0 !important;
  margin-top: 0 !important;
  height: 0;
}

.spider-leg-container.animate .spider-leg-line {
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;

  -webkit-transition-delay: inherit;
  -moz-transition-delay: inherit;
  -ms-transition-delay: inherit;
  -o-transition-delay: inherit;
  transition-delay: inherit;
}

.spider-leg-container.animate.initial .spider-leg-line,
.spider-leg-container.animate.exit .spider-leg-line {
  height: 0 !important;
}

.modal-backdrop .in {
  display: none;
}
.modal-open .modal {
  overflow-y: hidden;
}
.modal {
  position: absolute;
  padding: 0 !important;
}

/* #page1{ */
#kachelmenu {
  overflow-y: auto;
  width: 100%;
  height: 300px;
}

textarea {
  height: 24px;
  width: 80%;
  padding: 3px;
  border: 0;
  border-bottom: 1px solid #5eab37;
  outline: none;
  resize: none;
  overflow: hidden;
}

.pagethreecube {
  background-color: #fafafa;
}
.pagethreecube.active {
  background-color: #5eab37;
}

.slider31context {
  height: 100%;
}

.slider31context.carmiddle {
  width: 20%;
  background-image: url(../profund_svg/auto_01.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.slider31context.arrow {
  width: 5%;
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: left;
}
.slider31context.arrow.leftgreen {
  background-image: url(../profund_svg/pfeil_fahrbahnbreite_links_green.svg);
}
.slider31context.arrow.leftorange {
  background-image: url(../profund_svg/pfeil_fahrbahnbreite_links_orange.svg);
  visibility: hidden;
}
.slider31context.arrow.leftred {
  background-image: url(../profund_svg/pfeil_fahrbahnbreite_links_red.svg);
  visibility: hidden;
}
.slider31context.arrow.rightgreen {
  background-image: url(../profund_svg/pfeil_fahrbahnbreite_links_green.svg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}
.slider31context.arrow.rightorange {
  background-image: url(../profund_svg/pfeil_fahrbahnbreite_rechts_orange.svg);
  background-position: right;
  visibility: hidden;
}
.slider31context.arrow.rightred {
  background-image: url(../profund_svg/pfeil_fahrbahnbreite_links_red.svg);
  visibility: hidden;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}

.slider32context {
  height: 100%;
  display: inline-block;
}
.slider32context.green {
  width: 35%;
  color: #5eab37;
  font-size: 14px;
}
.slider32context.thumb {
  width: 30%;
  position: initial;
  padding-left: 15px;
}
.slider32context.red {
  width: 35%;
  color: #cf232a;
  font-size: 14px;
  text-align: right;
}

.detailedslider31 {
  height: 100%;
  display: inline-block;
}
.detailedslider31.car {
  width: 40%;
  background-image: url(../profund_svg/auto_01.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
}
.detailedslider31.bark {
  width: 15%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}
.detailedslider31.bark.green {
  background-image: url(../profund_svg/Schutzeinrichtung.svg);
}
.detailedslider31.bark.orange {
  background-image: url(../profund_svg/Schutzeinrichtung_orange.svg);
  visibility: hidden;
}
.detailedslider31.bark.red {
  background-image: url(../profund_svg/Schutzeinrichtung_red.svg);
  visibility: hidden;
}

.correctlengthpic {
  width: 100px;
  height: 100%;
  display: inline-block;
  background-image: url(../profund_svg/km_laenge.svg);
  background-repeat: no-repeat;
  background-size: 95%;
  background-position: center;
  text-align: center;
  vertical-align: bottom;
}
.correcttrafficguidepic {
  width: 30%;
  height: 100%;
  display: inline-block;
  background-image: url(../profund_svg/spurverengung.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.verkehrslagen {
  width: 25%;
  height: 100%;
  display: inline-block;
}
.verkehrslagen.bild {
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.verkehrslagen.bild.wenig {
  background-image: url(../profund_svg/fahrtinfo/verkehrsaufkommen_01.svg);
}
.verkehrslagen.bild.wenig.active {
  background-image: url(../profund_svg/fahrtinfo/verkehrsaufkommen_01_on.svg);
}
.verkehrslagen.bild.mittel {
  background-image: url(../profund_svg/fahrtinfo/verkehrsaufkommen_02.svg);
}
.verkehrslagen.bild.mittel.active {
  background-image: url(../profund_svg/fahrtinfo/verkehrsaufkommen_02_on.svg);
}
.verkehrslagen.bild.dicht {
  background-image: url(../profund_svg/fahrtinfo/verkehrsaufkommen_03.svg);
}
.verkehrslagen.bild.dicht.active {
  background-image: url(../profund_svg/fahrtinfo/verkehrsaufkommen_03_on.svg);
}
.verkehrslagen.bild.stau {
  background-image: url(../profund_svg/fahrtinfo/verkehrsaufkommen_stau.svg);
}
.verkehrslagen.bild.stau.active {
  background-image: url(../profund_svg/fahrtinfo/verkehrsaufkommen_stau_on.svg);
}
.verkehrslagen.text {
  text-align: center;
}

.wetter {
  width: 59px;
  height: 100%;
  display: inline-block;
}
.wetter.up {
  width: 50%;
}
.wetter.up.bild,
.wetter.down.bild {
  height: 64px;
  margin: 0;
}
.wetter.text {
  text-align: center;
}

.wetter.down {
  width: 100%;
}
.wetter.bild {
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.wetter.bild.tag {
  background-image: url(../profund_svg/fahrtinfo/tag_off.svg);
}
.wetter.bild.tag.active {
  background-image: url(../profund_svg/fahrtinfo/tag_on.svg);
}
.wetter.bild.nacht {
  background-image: url(../profund_svg/fahrtinfo/nacht_off.svg);
}
.wetter.bild.nacht.active {
  background-image: url(../profund_svg/fahrtinfo/nacht_on.svg);
}
.wetter.bild.trocken {
  background-image: url(../profund_svg/fahrtinfo/trocken_off.svg);
}
.wetter.bild.trocken.active {
  background-image: url(../profund_svg/fahrtinfo/trocken_on.svg);
}
.wetter.bild.nass {
  background-image: url(../profund_svg/fahrtinfo/nass_off.svg);
}
.wetter.bild.nass.active {
  background-image: url(../profund_svg/fahrtinfo/nass_on.svg);
}
.wetter.bild.nebel {
  background-image: url(../profund_svg/fahrtinfo/nebel_off.svg);
}
.wetter.bild.nebel.active {
  background-image: url(../profund_svg/fahrtinfo/nebel_on.svg);
}
.wetter.bild.frostschnee {
  background-image: url(../profund_svg/fahrtinfo/frost_schnee.svg);
}
.wetter.bild.frostschnee.active {
  background-image: url(../profund_svg/fahrtinfo/frost_schnee_on.svg);
}

.baustellebekannt {
  width: 30%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.baustellebekannt.yes {
  background-image: url(../profund_svg/button_ja_off.svg);
}

.baustellebekannt.yes.active {
  background-image: url(../profund_svg/button_ja_on.svg);
}
.baustellebekannt.no {
  background-image: url(../profund_svg/button_nein_off.svg);
}
.baustellebekannt.no.active {
  background-image: url(../profund_svg/button_nein_on.svg);
}

.fahrstreifencont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1% 7.5%;
  cursor: pointer;
  position: relative;
}
.fahrstreifendetailed {
  width: calc(100% - 40px);
  font-size: 13px;
}
.fahrstreifendetailed.circle {
  border: 1px solid;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.fahrstreifendetailed.circle.red {
  border-color: #cf232a;
}
.fahrstreifendetailed.circle.red.active {
  background-color: #cf232a;
}
.fahrstreifendetailed.circle.green {
  border-color: #5eab37;
}
.fahrstreifendetailed.circle.green.active {
  background-color: #5eab37;
}
.fahrstreifendetailed.square {
  border: 1px solid;
  border-radius: 5%;
  width: 20px;
  height: 20px;
}
.fahrstreifendetailed.square.red {
  border-color: #cf232a;
}
.fahrstreifendetailed.square.red.active {
  background-color: #cf232a;
}
.fahrstreifendetailed.square.green {
  border-color: #5eab37;
}
.fahrstreifendetailed.square.green.active {
  background-color: #5eab37;
}
.fahrstreifendetailed.wechsel,
.fahrstreifen.ueberholen {
  color: #5eab37;
}
.fahrstreifendetailed.nein {
  color: #5eab37;
}

.fahrstreifendetailed.text {
  color: #cf232a;
}

.schutzeinrichtung {
  width: 50%;
  height: 100%;
}
.schutzeinrichtung.bild {
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  cursor: pointer;
}
.schutzeinrichtung.text {
  text-align: center;
}
.schutzeinrichtung.bild.wandartig {
  background-image: url(../profund_svg/schutzeinrichtung_wandartig.svg);
}
.schutzeinrichtung.bild.wandartig.active {
  background-image: url(../profund_svg/schutzeinrichtung_wandartig_on.svg);
}
.schutzeinrichtung.bild.durchbrochen {
  background-image: url(../profund_svg/schutzeinrichtung_durchbrochen.svg);
}
.schutzeinrichtung.bild.durchbrochen.active {
  background-image: url(../profund_svg/schutzeinrichtung_durchbrochen_on.svg);
}

.halfcar {
  background-image: url(../profund_svg/auto_outline.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
  width: 125px;
  height: 125%;
}

.rows {
  font-weight: 600;
  font-size: 15px;
  width: 100%;
  padding: 0 5%;
  margin: 1em 0;
  text-align: center;
}

#bundeslaender,
#startende,
#autobahn {
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  border: 1px black solid;
  border-radius: 2.5px;
  display: inline-block;
  margin-right: 2px;
  vertical-align: middle;
}

.autobahnnummer {
  width: 50px;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 2.5px;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}
.autobahnnummer.blue {
  background-color: blue;
}
.autobahnnummer.yellow {
  background-color: #ffc402;
}

.autobahnnummer.deactive {
  background-color: grey;
}

#controlshowautobahn {
  cursor: pointer;
  color: #0000ff;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 220px;
  max-width: 220px;
  max-height: 110.667px;
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
}
.dropdown-content a {
  color: black;
  padding: 6px 8px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #b0bec5;
}
.dropshow {
  display: block;
}

.invalid {
  color: #cf232a !important;
  border-color: #cf232a !important;
}

input[name="inputdestination"],
input[name="inputdelay"],
input[name="inputtoloc"],
input[name="inputfromloc"] {
  border: none;
  border-bottom: 1px solid #5eab37;
  padding: 0;
  outline: none;
  height: 35px;
}
input[name="inputlength"],
input[name="inputbreite"] {
  border: none;
  padding: 0;
  outline: none;
  height: 35px;
  width: 45px;
  margin-top: 15px;
  margin-left: -10px;
  background-color: transparent;
  text-align: right;
}

input[name="inputtolocnumb"],
input[name="inputfromlocnumb"] {
  border: none;
  border: 1px solid #5eab37;
  border-radius: 50%;
  outline: none;
  height: 30px;
  width: 30px;
  text-align: center;
  margin-top: 5px;
  padding: 0;
}

input[name="inputspeed"] {
  border: none;
  border-radius: 50%;
  border: 5px solid #cf232a;
  outline: none;
  height: 40px;
  width: 40px;
  text-align: center;
}

input[name="loc"] {
  margin-top: 10px;
  position: absolute;
  width: 100px;
  -webkit-transition: width 0.35s ease-in-out;
  transition: width 0.35s ease-in-out;
}
input[name="loc"]:focus {
  width: 140px;
}

input[name="locto"] {
  margin-top: 10px;
  position: absolute;
  width: 60px;
  -webkit-transition: width 0.35s ease-in-out;
  transition: width 0.35s ease-in-out;
}
input[name="locto"]:focus {
  width: 140px;
}

input[name="locfrom"] {
  margin-top: 10px;
  position: absolute;
  width: 60px;
  -webkit-transition: width 0.35s ease-in-out;
  transition: width 0.35s ease-in-out;
}
input[name="locfrom"]:focus {
  width: 140px;
}

/*login modal*/
input[type="user"],
input[type="password"],
input[name="email"],
input[name="verwaltungNeueEMail"],
input[name="verwaltungAlteEMail"],
input[name="verwaltungBenutzerEMail"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  outline: none;
}

/* Set a style for all buttons */
button {
  background-color: #4caf50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.mapboxgl-ctrl-group > button {
  margin: 0;
}

button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: 120px;
  padding: 10px 18px;
  background-color: #f44336;
}

.signupbtn {
  width: 245px;
  padding: 10px 18px;
}

.register {
  width: calc(100% - 125px);
  min-width: 120px;
  padding: 10px 18px;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.modalcontainer {
  padding: 15px;
}
.modalcontainer.footer {
  background-color: #f1f1f1;
  padding-bottom: 50px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.logmodal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content/Box */
.logmodal-content {
  background-color: #fefefe;
  margin: 5vh auto;
  border: 1px solid #888;
  width: auto;
  max-width: 500px;
  min-width: 380px;
  max-height: 90vh;
  border-radius: 15px;
  -webkit-overflow-scrolling: touch;
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.userTab {
  width: calc(100% / 3);
  text-align: center;
  border-right: 1px solid #f57f17;
  cursor: pointer;
}
.userTab:hover {
  background-color: #ffd4ae;
}
.userTab.active {
  background-color: #f57f17;
  color: #fafafa;
}
.userTab.deactive {
  font-style: italic;
}
.userTabContent {
  height: auto;
  width: auto;
  overflow-y: auto;
  padding: 0 10px;
  max-height: calc(90vh - 80px);
}
@media (max-width: 767px) {
  .userTabContent {
    max-height: calc(100vh - 80px);
  }
}

#logout {
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

#regcont {
  width: calc(100% - 50px);
  margin: 25px;
  overflow-y: auto;
  max-height: calc(90vh - 25px);
  height: 100%;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}

#foreward,
#send,
#sendbig,
#startfeedback,
#fastfeedback {
  text-align: center;
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#showkachelmenu {
  width: 100%;
  height: 418.4px;
  display: none;
  margin-top: -55px;
  overflow: auto;
}

.kachelrow {
  width: 100%;
  height: calc(100% / 3);
}
.kachel {
  width: calc(100% / 3);
  height: 100%;
  display: inline-block;
  border: 1px solid #b0bec5;
  float: left;
  text-align: center;
  font-size: 13px;
  color: #b0bec5;
  line-height: 30px;
  cursor: pointer;
}
.kachel.active {
  border-color: #5eab37;
  color: #5eab37;
}
.kachelimagecontainer {
  width: calc(100% / 2);
  height: calc(100% / 2);
  position: relative;
  margin-left: 25%;
  margin-top: 10%;
  background-position: center;
  background-repeat: no-repeat;
}

.kachelimagecontainer[data="basisdaten"] {
  background-image: url(../profund_svg/kachelicons/baustellenmann.svg);
}
.kachelimagecontainer[data="basisdaten"].active {
  background-image: url(../profund_svg/kachelicons/baustellenmann_on.svg);
}
.kachelimagecontainer[data="fahrtinfo"] {
  background-image: url(../profund_svg/kachelicons/infos_zur_fahrt.svg);
}
.kachelimagecontainer[data="fahrtinfo"].active {
  background-image: url(../profund_svg/kachelicons/infos_zur_fahrt_on.svg);
}
.kachelimagecontainer[data="verkehrsfuehrung"] {
  background-image: url(../profund_svg/kachelicons/verkehrsfuehrung.svg);
}
.kachelimagecontainer[data="verkehrsfuehrung"].active {
  background-image: url(../profund_svg/kachelicons/verkehrsfuehrung_on.svg);
}
.kachelimagecontainer[data="tempolimit"] {
  background-image: url(../profund_svg/kachelicons/tempolimit.svg);
}
.kachelimagecontainer[data="tempolimit"].active {
  background-image: url(../profund_svg/kachelicons/tempolimit_on.svg);
}
.kachelimagecontainer[data="fahrbahnbreite"] {
  background-image: url(../profund_svg/kachelicons/fahrbahnbreite.svg);
}
.kachelimagecontainer[data="fahrbahnbreite"].active {
  background-image: url(../profund_svg/kachelicons/fahrbahnbreite_on.svg);
}
.kachelimagecontainer[data="baustellenlaenge"] {
  background-image: url(../profund_svg/kachelicons/baustellenlaenge.svg);
}
.kachelimagecontainer[data="baustellenlaenge"].active {
  background-image: url(../profund_svg/kachelicons/baustellenlaenge_on.svg);
}
.kachelimagecontainer[data="schutzeinrichtung"] {
  background-image: url(../profund_svg/kachelicons/schutzeinrichtung.svg);
}
.kachelimagecontainer[data="schutzeinrichtung"].active {
  background-image: url(../profund_svg/kachelicons/schutzeinrichtung_on.svg);
}
.kachelimagecontainer[data="meinung"] {
  background-image: url(../profund_svg/kachelicons/ihre_meinung.svg);
}
.kachelimagecontainer[data="meinung"].active {
  background-image: url(../profund_svg/kachelicons/ihre_meinung_on.svg);
}

#foreward.active {
  background-color: #5eab37;
}
.modal-footer.feedback {
  display: none;
}
.modalbodyheader {
  width: 100%;
}
.modalbodyheader.feedback {
  height: 53px;
}
.modalbodyheadercontent {
  display: inline-block;
  width: 70%;
  height: calc(100% + 16px);
  overflow-x: scroll;
  white-space: nowrap;
  overflow-y: hidden;
}
@media (max-width: 768px) {
  .modalbodyheadercontent {
    height: 100%;
  }
}
.modalbodyheadercontent.active {
  color: rgb(97, 172, 58);
}

.bewertungsheader {
  height: 53px;
  overflow: hidden;
}

.headiconcontainer {
  display: none;
  width: calc(100% / 4);
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
}
.headiconcontainer.active {
  display: inline-block;
}

.headiconcontainer[data="basisdaten"] {
  background-image: url(../profund_svg/kachelicons/baustellenmann.svg);
}
.headiconcontainer[data="basisdaten"].active.selected {
  background-image: url(../profund_svg/kachelicons/baustellenmann_orange.svg);
}
.headiconcontainer[data="fahrtinfo"] {
  background-image: url(../profund_svg/kachelicons/infos_zur_fahrt.svg);
}
.headiconcontainer[data="fahrtinfo"].active.selected {
  background-image: url(../profund_svg/kachelicons/infos_zur_fahrt_orange.svg);
}
.headiconcontainer[data="verkehrsfuehrung"] {
  background-image: url(../profund_svg/kachelicons/verkehrsfuehrung.svg);
}
.headiconcontainer[data="verkehrsfuehrung"].active.selected {
  background-image: url(../profund_svg/kachelicons/verkehrsfuehrung_orange.svg);
}
.headiconcontainer[data="tempolimit"] {
  background-image: url(../profund_svg/kachelicons/tempolimit.svg);
}
.headiconcontainer[data="tempolimit"].active.selected {
  background-image: url(../profund_svg/kachelicons/tempolimit_orange.svg);
}
.headiconcontainer[data="fahrbahnbreite"] {
  background-image: url(../profund_svg/kachelicons/fahrbahnbreite.svg);
}
.headiconcontainer[data="fahrbahnbreite"].active.selected {
  background-image: url(../profund_svg/kachelicons/fahrbahnbreite_orange.svg);
}
.headiconcontainer[data="baustellenlaenge"] {
  background-image: url(../profund_svg/kachelicons/baustellenlaenge.svg);
}
.headiconcontainer[data="baustellenlaenge"].active.selected {
  background-image: url(../profund_svg/kachelicons/baustellenlaenge_orange.svg);
}
.headiconcontainer[data="schutzeinrichtung"] {
  background-image: url(../profund_svg/kachelicons/schutzeinrichtung.svg);
}
.headiconcontainer[data="schutzeinrichtung"].active.selected {
  background-image: url(../profund_svg/kachelicons/schutzeinrichtung_orange.svg);
}
.headiconcontainer[data="meinung"] {
  background-image: url(../profund_svg/kachelicons/ihre_meinung.svg);
}
.headiconcontainer[data="meinung"].active.selected {
  background-image: url(../profund_svg/kachelicons/ihre_meinung_orange.svg);
}

.modal-body {
  overflow: auto;
  max-height: calc(100vh - 90px);
  padding: 0;
}

@media (max-width: 768px) {
  .modal-body.feedback {
    height: calc(100vh - 117px - 75px);
  }
}

/* #page1{ */
.modalbodypage {
  overflow-y: auto;
}

.footertextcontainer {
  width: 100%;
  text-align: center;
}

.star {
  color: yellow;
  position: absolute;
  margin-top: -55px;
  background-color: #053362;
  width: 40px;
  border-radius: 17.5px;
  margin-left: 25px;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
.startest {
  position: absolute;
  margin-top: 42.5px;
  background-color: white;
  width: 50px;
  border: 1px solid #000;
  color: black;
  border-radius: 17.5px;
  margin-left: -50px;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
  z-index: -1000;
}
.startext {
  font-family: "Roboto", sans-serif;
  display: inline;
}
.zapfentest {
  background-color: #cf232a;
  border: 2.5px solid #cf232a;
  color: #fff;
  position: absolute;
  height: 18px;
  text-align: center;
  border-radius: 22px;
  margin-left: 25px;
  margin-top: -55px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  white-space: pre;
}

.white-gradient {
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  position: absolute;
  width: 55px;
  height: 25px;
}

.button {
  cursor: pointer;
}

.timeline {
  margin-top: 5px;
  height: 5px;
  min-width: 5%;
  max-width: 84%;
}
.timeline.left {
  background-color: #cf232a;
}
.timeline.passed {
  background-color: #b0bec5;
}
.timelinepoint {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.timelinepoint.start {
  border: 1px solid #b0bec5;
  background-color: #b0bec5;
}
.timelinepoint.end {
  border: 1px solid #cf232a;
  background-color: #cf232a;
}
.timelinedivider {
  width: 1%;
  height: 15px;
  background-color: black;
  display: inline-block;
}

.direction {
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../profund_svg/pfeil_anschlussstellen_test.svg);
}

.margincontainer {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
}

.marginbottom20 {
  margin-bottom: 20px;
}
.marginbottom30 {
  margin-bottom: 30px;
}

.pointer {
  cursor: pointer;
}

.textcenter {
  text-align: center;
}

.flexcontainer {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.padding {
  padding: 0 7.5%;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.flexcolumn {
  flex-direction: column;
}

.flexstart {
  justify-content: start;
}
.flexcenter {
  justify-content: center;
}
.flexbetween {
  justify-content: space-between;
}
.flexaround {
  justify-content: space-around;
}
.flexevenly {
  justify-content: space-evenly;
}
.flextextcontainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#iconparameter label {
  cursor: pointer;
}

label {
  font-weight: 300;
}

#datetimepicker_ende,
#datetimepicker_start {
  min-width: 100px;
  max-width: 135px;
  text-align: center;
}

.select-location {
  display: block;
  height: 100%;
  width: calc(100% - 15px);
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 7.5px;
  border: none;
  border-bottom: 1px solid #5eab37;

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%235EAB37%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  padding-right: 35px;
}
.select-location::-ms-expand {
  display: none;
}
.select-location:focus {
  outline: none;
}
.select-location option {
  font-weight: normal;
}

.gridcontainer {
  display: grid;
  grid-template-rows: 42.5px;
  grid-template-columns: 1fr;
  grid-auto-rows: 50px;
  grid-gap: 0px;
}

.bewertungscontainer {
  max-height: 100%;
  min-height: 480px;
  width: 370px;
  min-width: 320px;
  z-index: 1006;
  position: absolute;
  top: 0;
}
.bewertungscontainer.hide {
  display: none;
}
.bewertungsgrid {
  background-color: white;
  border-bottom: 1px solid #b0bec5;
  border-right: 1px solid #b0bec5;
  border-bottom-right-radius: 30px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#closeBewertung,
.closepop {
  cursor: pointer;
}

/*
######################
Switch 2 Options
######################
*/
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 22px;
}
.switch input {
  display: none;
}
.yesnocheck,
.selectall {
  position: absolute;
  cursor: pointer;
  top: 7px;
  left: 0;
  right: 0;
  bottom: -7px;
  background-color: #b0bec5;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:focus + .yesnocheck,
input:checked + .selectall {
  box-shadow: 0 0 1px #5eab37;
}
input:checked + .yesnocheck,
input:checked + .selectall {
  background-color: #5eab37;
}
.yesnocheck.round,
.selectall.round {
  border-radius: 34px;
}
.yesnocheck,
.selectall {
  position: absolute;
  cursor: pointer;
  top: 7px;
  left: 0;
  right: 0;
  bottom: -7px;
  background-color: #b0bec5;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .yesnocheck:before,
input:checked + .selectall:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.yesnocheck.round:before,
.selectall.round:before {
  border-radius: 50%;
}
.yesnocheck:before,
.selectall:before {
  position: absolute;
  content: "";
  left: 3px;
  width: 15px;
  height: 15px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

/*
######################
Switch 3 Options
######################
*/
.switch-toggle {
  width: 200px;
  position: relative;
  display: block;
  padding: 0 !important;
  background-color: #fafafa;
  border: 1.5px solid #b0bec5;
  border-radius: 15px;
  max-width: 275px;
}

.switch-toggle input {
  position: absolute;
  left: 0;
  opacity: 0;
}

.switch-toggle label {
  width: 33.33%;
  color: black;
  text-align: center;
  line-height: 2em;
  vertical-align: middle;
}

.switch-toggle label:not(.disabled) {
  cursor: pointer;
}

.switch-toggle input + label {
  position: relative;
  z-index: 2;
  display: block;
  float: left;
  padding: 0 0.5em;
  margin: 0;
  text-align: center;
}
.switch-toggle input:checked + label {
  color: #fafafa;
}

.switch-toggle::after {
  clear: both;
  content: "";
  display: table;
}

.switch-toggle a {
  width: 30.33%;
  height: 80%;
  border-radius: 15px;
  background-color: #f57f17;
  position: absolute;
  top: 10%;
  left: 0;
  padding: 0;
  z-index: 1;
  display: block;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#selectallresult {
  width: 190px;
}

.popuprow {
  width: 100%;
  position: relative;
}

.leaflet-control {
  border-radius: 20px;
}
.leaflet-touch .leaflet-bar {
  border-color: #6d7375;
}

.locateBackground {
  background-image: url(../profund_svg/fadenkreuz.svg);
  background-size: contain;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  color: #6d7375;
}
.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: #6d7375;
}

.divider {
  content: 0;
  height: 0.25px;
  margin: 5px 0;
  border-bottom: 1px solid #b0bec5;
}

.tick {
  background-color: #6d7375;
  width: 1px;
  height: 5px;
}
.tick.large {
  height: 10px;
}

.containerLegendeFilter {
  min-width: 250px;
  max-height: 430px;
  background-color: #50575a;
  border-bottom-left-radius: 30px;
  z-index: 1000;
  top: 0;
  right: 0;
  position: absolute;
  display: grid;
  grid-template-rows: 30px;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(30px, auto);
  grid-gap: 0px;
}
#contentfilter > table > thead > tr > td.first {
  border-top: none;
}

#autobahnfilterrowcontent,
#datumfilterrowcontent,
#bundeslandfilterrowcontent {
  max-height: 87px;
  overflow-y: auto;
}

.tabinfo {
  width: 50%;
  height: 100%;
  background-color: #b0bec5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tabinfo.active {
  background-color: #4e5457;
  color: white;
}

.contentinfo {
  color: white;
}

.filterbubble {
  width: calc(100% / 2.05);
  height: 30px;
  background-color: grey;
  margin-bottom: 5px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.filterbubbletext {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#contextMenu {
  width: 190px;
  background-color: #fafafa;
  z-index: 1005;
  position: relative;
  padding: 10px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.contextMenuOption {
  height: 25px;
  width: 100%;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contextMenuOption:hover {
  background-color: #e3e3e3;
}

#profileMainButton {
  height: 30px;
  font-weight: 100;
  z-index: 1005;
  position: relative;
  background-color: #76c54d;
  color: #fafafa;
  border-bottom-right-radius: 30px;
}

.timehelper {
  background-color: #4e5457;
  border-radius: 15px;
  color: #fafafa;
  min-width: 80px;
  width: 30%;
  height: 25px;
  text-align: center;
  cursor: pointer;
}
.timehelper.deactive {
  background-color: #b0bec5;
}

.memopic {
  display: none;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(./../profund_svg/microphone_on.svg);
}
.memopic#memopicMap {
  z-index: 2000;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 150px;
  height: 200px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .memopic#memopicMap {
    width: unset;
    height: 100vh;
    top: 0;
    right: 0;
    background-color: #fff;
  }
}

#memoMap {
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
  z-index: 1000;
}
@media (max-width: 767px) {
  #memoMap {
    width: 75px;
    height: 75px;
  }
}

.legendeButtonMobile {
  position: absolute;
  right: 10px;
  top: 60px;
  background-color: #ffffff;

  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.legendeButtonMobile .image {
  height: 100%;
  display: flex;
  justify-content: center;
  background-image: url(./../profund_svg/menuicons/baseline-info.svg);
  background-repeat: no-repeat;
  background-position: center;
}

#mapBaustelleMelden {
  z-index: 1005;
  position: absolute;
  bottom: 1.5rem;
  right: 3.5rem;
  width: 3rem;
  height: 3rem;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.5);
}
#mapBaustelleMelden img {
  width: 75%;
  height: 75%;
  margin-left: 12.5%;
  margin-top: 12.5%;
}
#mapBaustelleMeldenMarker {
  display: none;
  z-index: 1005;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, calc(-50% - 20.5px));
  width: 25px;
  height: 41px;
}

#mapBaustelleMeldenHeader {
  display: none;
  height: 4.5rem;
  padding-left: 0.5rem;
  font-size: 1.5rem;
  background: #5eab37;
  color: #fff;
}
#mapBaustelleMeldenHeader .baustelleMeldenButton {
  background: #fff;
  color: #5eab37;
  border-radius: 1rem;
  cursor: pointer;
}

@-moz-document url-prefix() {
  #hoeheFlexcontainer,
  #hoeheSlider {
    width: 75% !important;
    margin-left: 15% !important;
  }
  #hoeheFlexcontainer {
    margin-top: -20% !important;
    padding: 0 5% !important;
  }
  #hoeheGrid {
    margin-top: -10px !important;
    grid-template-rows: 55px !important;
  }
}

@media (max-width: 768px) {
  #menu,
  #profileMainButton {
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
  .bewertungscontainer {
    width: 100%;
    height: 100%;
  }
  .bewertungsgrid {
    height: 100%;
    border-bottom-right-radius: unset;
  }
  .containerLegendeFilter {
    top: 49.6px;
    min-width: 125px;
  }
  .logmodal-content {
    width: 100%;
    height: 100% !important;
    overflow: auto;
    border-radius: 0;
    min-width: 0px;
    margin: 0;
    max-width: none;
    max-height: 100vh;
  }
  .modalcontainer.footer {
    border-radius: unset;
  }
}