:root {
  --color--neutral-white: #ffffff;
  --color--neutral-extralightgrey: #f8f9f8;
  --color--neutral-lightgrey: #e6f0ea;
  --color--neutral-semilightgrey: #dae4de;
  --color--neutral-grey: #c6d5cc;
  --color--neutral-darkgrey: #595959;
  --color--neutral-extradarkgrey: #3f3f3f;
  --color--neutral-black: #000000;
  --color--primary-darkgreen: #002300;
  --color--primary-mediumgreen: #02640b;
  --color--primary-green: #78d700;
  --color--secondary-yellow: #e8c500;
  --color--secondary-purple: #8c8cff;
  --color--secondary-pink: #ffb9ff;
  --color--secondary-orange: #ff8c12;
  --color--secondary-cyan: #73beff;
  --color--secondary-blue: #12a0f3;
  --color--pastel-green: #f0ffe6;
  --color--pastel-yellow: #fffacd;
  --color--pastel-purple: #ebebff;
  --color--pastel-orange: #fff5eb;
  --color--pastel-pink: #fff0ff;
  --color--pastel-blue: #ebf5ff;
  --color--service-red: #a4280d;
  --color--service-orange: #d38003;
  --color--service-yellow: #d7c200;
  --highlight-green: linear-gradient(
    to top,
    rgb(118 197 18/0.3) 0%,
    rgb(118 197 18/0.3) 50%,
    transparent 50%,
    transparent 100%
  );
  --gradient-darkgreen: linear-gradient(27.28deg, #1a2300 47.17%, #034003 100%);
  --gradient-green: linear-gradient(20.98deg, #78d700 59.75%, #abe604 100%);
  --gradient-yellow: linear-gradient(239.34deg, #fce149 2.54%, #e8c500 36.42%);
  --gradient-purple: linear-gradient(58.54deg, #8c8cff 51.27%, #9d9dff 100%);
  --gradient-orange: linear-gradient(238.07deg, #ffac54 -0.05%, #ff8c12 41.32%);
  --gradient-pink: linear-gradient(239.42deg, #ffe1ff -0.06%, #ffb9ff 33.16%);
  --gradient-cyan: linear-gradient(48.71deg, #73beff 70.04%, #a3d4ff 100%);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 0 0 0.2rem var(--color--primary-green);
}

@font-face {
  font-family: "NaotypoBold";
  src: url("/src/fonts/Naotypo-Bold.woff") format("woff");
}

@font-face {
  font-family: "NaotypoExtraBold";
  src: url("/src/fonts/Naotypo-ExtraBold.woff") format("woff");
}

@font-face {
  font-family: "NaotypoLight";
  src: url("/src/fonts/Naotypo-Light.woff") format("woff");
}

@font-face {
  font-family: "NaotypoSemiBold";
  src: url("/src/fonts/Naotypo-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "custom_font";
  src: url("/src/fonts/custom_font.woff") format("woff");
}

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-image: url("src/background.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="text"],
input[type="number"] {
  padding: 2.5px;
  border-radius: 2.5px;
  outline: none;
  border: none;
  background-color: white;
  box-shadow: var(--shadow);
  transition: box-shadow 0.25s;
}

input[type="text"]:not(.small-input),
input[type="number"]:not(.small-input) {
  width: calc(100% - 40px);
  font-size: 150%;
  padding: 20px;
  border-radius: 20px;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder {
  color: gray;
}

input[type="text"]:focus,
input[type="number"]:focus {
  box-shadow: var(--shadow-hover);
}

label:has(input:disabled) {
  opacity: 0.5;
}

button {
  padding: 20px;
  border-radius: 20px;
  cursor: pointer;
  border: none;
  background-color: var(--color--primary-green);
  width: 100%;
  font-size: 150%;
  font-family: "NaotypoBold";
}

#container {
  background-color: #eef2f6;
  border-radius: 20px;
  min-height: 50%;
  min-width: 50%;
  max-height: 85%;
  max-width: 85%;
  overflow: hidden;
  overflow-y: scroll;
  overflow-x: scroll;
}

@media screen and (max-width: 1000px) {
  #container {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
    border-radius: 0px;
  }
}

#container .page {
  padding: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}

#container .page.hidden {
  display: none !important;
}

#container .page#loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

#container .page#loading img {
  width: 75%;
  height: 75%;
}

#container .page#browse-stop {
  display: flex;
  flex-direction: column;
}

#container .page#browse-stop #stops {
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 10px;
  margin-top: 10px;
}

#container .page#browse-stop #stops .stop {
  padding: 20px;
  width: calc(100% - 50px);
  border-radius: 20px;
  background-color: white;
  box-shadow: var(--shadow);
  font-family: "NaotypoBold";
  font-size: 150%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.25s;
  margin: 5px;
}

#container .page#browse-stop #stops .stop:hover {
  box-shadow: var(--shadow-hover);
}

#container .page#browse-quays {
  display: flex;
  flex-direction: column;
}

#container .page#browse-quays #quays {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 10px;
  margin-top: 10px;
}

#container .page#browse-quay #quays .quay {
  padding: 20px;
  width: calc(100% - 50px);
  border-radius: 20px;
  background-color: white;
  box-shadow: var(--shadow);
  font-family: "NaotypoBold";
  font-size: 150%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: box-shadow 0.25s;
  margin: 5px;
}

#container .page#browse-quay #quays .quay:hover {
  box-shadow: var(--shadow-hover);
}

#container .page#browse-quay #quays .quay .name {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NaotypoBold";
  font-size: 150%;
}

#container .page#browse-quay #quays .quay .lines {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: end;
  width: 90%;
}

#container .page#browse-quay #quays .quay .line {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  border-radius: 5px;
  margin: 5px;
}

#container .page#browse-quay #quays .quay .line .icon {
  height: 35px;
}

#container .page#browse-quay #quays .quay .line .terminus {
  font-size: 20px;
  line-height: 20px;
  padding: 2.5px;
}

#container .page#settings {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#container .page#settings form {
  flex: 1 1 auto;
}

#container .page#url #url-a {
  font-family: Arial, Helvetica, sans-serif;
}