:root {
  --primary: #0AA1FF;
  --primaryHover: #0089DE;
  --secondary: #E6E8EC;
  --secondaryHover: #CBCBCB;
  --white: #FFF;
  --whiteHover: #E6E6E6;
  --dark: #12263A;
  --darkHover: #4E4E4E;
  --green: #27C400;
  --greenHover: #35B216;
  --yellow: #ffc423;
  --yellowHover: #cf9a15;
  --red: #FF3239;
  --redHover: #E13D42;
  --visited: #832FCD;
  --visitedHover: #6210AE;
}

.map-layout {
  border-radius: 25px;
  text-align: center;
  background: white;
}

.map-label {
  margin: 17px;
}

.map-action {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  text-align: center;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.map-action-error {
  background: var(--red);
}

.map-action-error:hover {
  background: #f86;
  color: #ff8;
}

.map-action-new {
  background: var(--green);
}
.map-action-new:hover {
  background: var(--greenHover);
}


.map-layout.site {
  position: relative;
  width: fit-content;
  border: 1px dashed black;
  color: var(--dark);
  margin: 32px;
}

.map-layout.park {
  border: 1px solid black;
  color: var(--dark);
  position: relative;
  margin: 32px;
}

.map-layout.hover {
  cursor: pointer;
  background: var(--whiteHover);

}

.map-layout.selected {
  background: var(--visited);
  color: var(--white);
  border-color: var(--white);;
}
.map-layout.selected:hover {
  background: var(--visitedHover);
  color: var(--white);
  border-color: var(--white);;

}

.map-inner-park {
  display: inline-block;
}

.map-lanes {
  margin-left: 8px;
  margin-right: 8px;
}

.map-lanes.exit {
    vertical-align: bottom;
}

.map-lanes.rotate {
  display: inline-block;
  position: absolute;
  margin-left: 0px;
  margin-right: 0px;
}

.map-lanes.entry.rotate {
  transform: rotate(90deg);
  transform-origin: center left;
  left: 0px;
}

.map-lanes.exit.rotate {
  transform: rotate(-90deg);
  transform-origin: center right;
  right: 0px;
}

.map-lane {
  display: inline-block;
  background: var(--secondary);
  border: 1px solid black;
  border-radius: 4px;
  margin-left: 16px;
  margin-right: 16px;
  padding-left: 2px;
  padding-right: 2px;
}

.map-lane.entry {
  vertical-align: top;
  margin-top: -12px;
  border: 1px solid green;
  color: green;
}

.map-lane.exit {
  vertical-align: bottom;
  margin-bottom: -12px;
  border: 1px solid red;
  color: red;
}

.map-lane.entry.rotate {
  transform: rotate(180deg);
  transform-origin: center;
  margin-top: 0px;
}

.map-lane.exit.rotate {
  margin-bottom: 0px;
}

.map-lane.transit {
  vertical-align: top;
  margin-top: -12px;
  border: 1px solid blue;
  color: blue;
}

.map-lane.hover {
  cursor: pointer;
  background: var(--secondaryHover);
}

.map-lane.selected {
  background: var(--visited);
  color: var(--white);
}
.map-lane.hover.selected {
  background: var(--visitedHover);
  color: var(--white);
}