@import url("https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;500;600;700&display=swap");

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 1.1rem;
}

button,
input,
div {
  user-select: none;
}

.hidden {
  display: none;
}

.toc-font {
  font-family: "Reem Kufi", sans-serif;
}

.railruns-messages {
  position: absolute;
  top: 80px;
  right: 50px;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  user-select: none;
  padding: 0.5em 0.8em;
  border: 1px solid white;
  border-radius: 1em;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.toggle-railruns-messages {
  position: absolute;
  top: 25px;
  right: 50px;
  font-weight: 800;
  font-size: 64px;
  color: white;
  user-select: none;
  cursor: pointer;
}

#routes {
  display: flex;
  position: absolute;
  bottom: 0;
  right: 1em;
  left: 1em;
  width: 97%;
  height: 75%;
  padding: 0.5em 0.8em;
  border: 1px solid white;
  border-radius: 1em;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

#routes-wrapper {
  display: flex;
  position: absolute;
  bottom: 1.5em;
  right: 1em;
  left: 1em;
  height: 25%;
}

#save-routes {
  position: absolute;
  top: 2em;
  right: 2em;
  width: 10em;
  height: 2em;
  border-radius: 0.5em;
  cursor: pointer;
}

.commodities-panel,
.options-toggle {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 40px;
  left: 15px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  padding: 5px;
  margin: 0;
}

.options-toggle {
  top: 515px;
}

.status-class.in-transit {
  color: rgb(72, 121, 41);
}

.status-class.completed {
  color: rgb(227, 137, 35);
}

.station-class.departure {
  color: rgb(55, 166, 140);
}

.station-class.arrival {
  color: rgb(105, 255, 165);
}

.formatted-time-class {
  font-style: italic;
  color: rgb(61, 92, 74);
}

.commodities-panel li,
.commodities-panel li ul,
.options-toggle li,
.options-toggle li ul {
  text-decoration: none;
  list-style: none;
}

.commodities,
.options {
  width: 34px;
  height: 34px;
  opacity: 0.3;
  background-repeat: no-repeat;
  background-size: 34px;
  cursor: pointer;
}

.commodity-selected,
.commodities:hover,
.option-selected,
.options:hover {
  opacity: 1;
}

.track-distances-icon {
  background-image: url("../icons/rail_distances.png");
}

.track-selection-icon {
  background-image: url("../icons/lock_rails.png");
}

.visited-stations-icon {
  background-image: url("../icons/visited_stations.png");
}

.aggregate-icon {
  background-image: url("../icons/aggregate.png");
}

.automobile-icon {
  background-image: url("../icons/automobile.png");
}

.building_materials-icon {
  background-image: url("../icons/building_materials.png");
}

.crate-icon {
  background-image: url("../icons/crate.png");
}

.gas-icon {
  background-image: url("../icons/gas.png");
}

.grain-icon {
  background-image: url("../icons/grain.png");
}

.granule-icon {
  background-image: url("../icons/granule.png");
}

.liquid-icon {
  background-image: url("../icons/liquid.png");
}

.ore-icon {
  background-image: url("../icons/ore.png");
}

.oversized-icon {
  background-image: url("../icons/oversized.png");
}

.pallet-icon {
  background-image: url("../icons/pallet.png");
}

.perishable-icon {
  background-image: url("../icons/perishable.png");
}

.top_secret-icon {
  background-image: url("../icons/top_secret.png");
}

.common {
  color: rgb(101, 79, 58);
}

.uncommon {
  color: rgb(72, 121, 41);
}

.rare {
  color: rgb(49, 80, 150);
}

.epic {
  color: rgb(100, 56, 126);
}

.legendary {
  color: rgb(227, 137, 35);
}

.mythic {
  color: rgb(196, 40, 40);
}

.century_train {
  color: rgb(164, 164, 164);
}