.colored-square {
  width: 80px;
  height: 80px;
  background-color: #BB8588;
  float: right;
  position: relative;
  margin-top: 8px;
  background-image: url('logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.colored-square::before,
.colored-square::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #49495c;; /* Color of the lines */
}

.colored-square::before {
    top: 75px; /* Adjust the top position of the first line */
}

.colored-square::after {
    top: 65px; /* Adjust the top position of the second line */
}

body {
  font-family: Arial, sans-serif;
  width: 60vw;
  max-width: 800px;
  min-width: 300px;
  height: 100vh;
  margin: 0 auto;
  background-color: #49495c;
  color: #f2f4f3;
  font-family: Tahoma;
  font-size: 16px;
  padding-bottom: 2em;
}

h1, p {
  margin: 1em auto;
  text-align: left;
}

textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input {
  margin: 10px 0 0 0;
  width: 60%;
  min-height: 2em;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
  }

button{
    display: block;
    width: 30%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #ffffff;
    border-color: white;
    min-width: 100px;
}
#buttonSearch{
  width: 20%;
}

#buttonCurrentLocation{
  width: 37%;
  font-size: 0.7rem;
  display: inline-block;
  min-height: 2.8em;
}


.selected-range {
  margin-bottom: 10px;
}

.circle-outer {
  position: relative;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
  
}
.circle {
  position: absolute;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
  left: -26px;
  top: -43px;
  
}

.grat {
  position: absolute;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
  background: lightgray;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 1);
  left: 74px;
  top: 60px;
}

.no-shadow {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 1);
}

li .background {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 1);
  border: 1px solid black;
  background: lightgray;
}

.background.dark {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 1);
}

h3 {
  text-align: center;
  color: #49495c;
}

.content {
  position: absolute;
  z-index: 30;
  text-align: center;
  width: 30px;

}
.content.one {
  right: 23%;
  top: 23%;
}
.content.two {
  right: 15.5%;
  top: 43%
}
.content.three {
  right: 23%;
  bottom: 19%
}
.content.four {
  bottom: 11%;
  right: 45%
}
.content.five {
  bottom: 19%;
  left: 23%
}
.content.six {
  top: 43%;
  left: 16%
}
.content.seven {
  top: 23%;
  left: 23%
}
.content.eight {
  bottom: 69.5%;
  left: 45%
}
li:first-child .background {
  transform: rotate(22.5deg) skewY(-45deg);
}
li:nth-child(2) .background {
  transform: rotate(67.5deg) skewY(-45deg);
}
li:nth-child(3) .background {
  transform: rotate(112.5deg) skewY(-45deg);
}
li:nth-child(4) .background {
  transform: rotate(157.5deg) skewY(-45deg);
}
li:nth-child(5) .background {
  transform: rotate(202.5deg) skewY(-45deg);
}
li:nth-child(6) .background {
  transform: rotate(247.5deg) skewY(-45deg);
}
li:nth-child(7) .background {
  transform: rotate(292.5deg) skewY(-45deg);
}
li:nth-child(8) .background {
  transform: rotate(337.5deg) skewY(-45deg);
}

#line1, #line2, #angabenOhneGewaehr, #weFoundAddress {
  display: none;
}

.map-form {
  /* Add your form-specific styles here */
  display: inline-block;
  margin: 0;
}

.map-button {
  /* Add your button-specific styles here */

  border: none;             /* Remove border */
  color: white;             /* White text */
  padding: 10px 20px;       /* Some padding */
  text-align: center;       /* Center the text */
  text-decoration: none;    /* Remove underline */
  display: inline-block;    /* Get the elements inline */
  font-size: 16px;          /* Increase font size */
  margin: 4px 2px;          /* Add some margin */
  cursor: pointer;          /* Add a pointer cursor on hover */
  border-radius: 5px;       /* Rounded corners */
}

.map-button:hover {
  background-color: #9fbb85; /* Darker green on hover */
}

table {
  border-collapse: collapse;
  margin: 20px 0;
  text-align: left;
}

th, td {
  padding: 12px;
  border: 3px solid #3B3B4F;
}

#outputKlettersteige {
  min-height: 100px;
}

.nobr { white-space: nowrap }

#language-switcher {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 16px;
}

#language-switcher span {
  cursor: pointer;
  padding: 5px;
}

#language-switcher span:hover {
  color: #BB8588;
}