* {
  box-sizing: border-box;
}

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1, 'tnum' 1, 'ss02' 1;
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

:root {
  --l1: 5.5rem;
  --hl1: calc(var(--l1) / 2);
  --l2: 0.8rem;
  --hl2: calc(var(--l2) / 2);
  --margin: var(--refl2);
  --grid-size: calc((var(--l1) + 2 * var(--l2)) / 2);
  /* -- Colors -- */
  --colorem: #3397fc;
  --green: #d9f1dd;
  --green-em: #1db139;
  --blue: #d8f4f9;
  --blue-em: #2bc9e2;
  --red: #ffd1e3;
  --red-em: #fb005d;
  --grey: #ccc;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #e4e6e6;
}

#main {
  display: grid;
  grid-template-columns: repeat(20, var(--grid-size));
  grid-template-rows: repeat(10, var(--grid-size));
  justify-content: center;
  font-size: 1.1rem;
}

#ifpen {
  grid-column: 9 / span 6;
  grid-row: 1 / span 4;
}

#calendar {
  grid-column: 1 / span 8;
  grid-row: 1 / span 9;
  margin-bottom: 0;
}

#search {
  grid-column: 9 / span 16;
  grid-row: 5 / span 1;
}

#lip {
  grid-column: 9 / span 6;
  grid-row: 6 / span 3;
}

#dashboard {
  grid-column: 9 / span 6;
  grid-row: 10 / span 2;
}

#woup {
  grid-column: 15 / span 6;
  grid-row: 8 / span 4;
}

#rss {
  grid-column: 15 / span 6;
  grid-row: 1 / span 2;
}

#ledger {
  grid-column: 15 / span 6;
  grid-row: 3 / span 2;
}

#backup {
  grid-column: 15 / span 6;
  grid-row: 6 / span 2;
}

#message {
  grid-column: 1 / span 8;
  grid-row: 10 / span 2;
}

.buttoncard {
  border-top: 4px solid var(--grey);
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
  width: var(--l1);
  height: var(--l1);
  margin: var(--l2);
  border-radius: 0 0.2rem 0.2rem 0;
  background-color: #fff;

  svg {
    width: 2.5em;
    height: 2.5em;
    margin: auto;
    color: var(--grey);
  }
  span {
    font-size: 0.8em;
    text-align: center;
  }
}

.buttoncard.buttoncard-on {
  border-color: var(--colorem);
  svg {
    color: var(--colorem);
  }
}

.card, h2, section:has(.solo-card) {
  border-left: 4px solid var(--grey);
}

section:has(.status_success) {
  border-color: #1aaa55;
}

section:has(.status_warning), section:has(.status_emphasize) {
  border-color: #fc9403;
}

section:has(.status_error) {
  border-color: #db3b21;
}

/*
  width: 1.5em;
  vertical-align: baseline;
  transform: translateY(calc((1.5em - 0.689em)/2));
 */

h2 {
  text-transform: uppercase;
  padding-left: 1.5em;
  margin: 0;
  font-size: 0.8em;
  font-weight: normal;
  height: calc(var(--hl1));
  align-content: center;
}
section {
  margin: var(--l2);
  border-radius: 0 0.2rem 0.2rem 0;
  background-color: #fff;
}

a {
  text-decoration: none;
}

#shortcuts {
  padding: 0;
  margin: 0;
}
.card {
  display: block;
  font-size: 1em;
  height: calc(var(--hl1) + var(--l2));
  align-content: center;
}

.card:nth-last-child(1):not(:first-child), .card:nth-last-child(2) {
  height: calc((var(--l1) + var(--l2))/ 2);
}
.card:hover {
  background-color: #e4e6e6;
  border-color: var(--colorem);
}
.card a {
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0em 2em;
}
.card img {
  width: 1.5em;
  margin-right: 1.5em;
}
.card::marker {
  content: "";
}

.solo-card {
  padding: 0 1em;
}

.solo-card, .solo-card > * {
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: black;
}
.solo-card > * {
  display: flex;
  align-items: center;
}
.solo-card img {
  height: 2.5em;
  margin-right: 1em;
}

#search {
  border-left: 4px solid var(--grey);
  display: flex;
  margin: 0 var(--l2);
  padding: var(--l2) 0;
  position: relative;
}
#search img {
  width: 2em;
  padding: 0 0.3em;
}
#search form {
  width: 100%;
}

#search input {
  width: 100%;
  height: 100%;
  font-size: 1em;
  border: 0;
  padding: 0;
}

#search input:focus-visible {
  outline: 0;
}

#search:has(input:focus-visible) {
  border-color: var(--colorem);
}

#search .ca-card img {
  width: 1.5em;
  margin: 0 0.25em;
}

#suggestions {
  display: block;
  position: absolute;
  width: calc(100% + 0px);
  padding: 0;
  margin: 0;
  top: var(--grid-size);
  left: 0;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#suggestions li {
  list-style-type: none;
  height: var(--hl1);
  align-content: center;
  display: flex;
}

#suggestions span {
  align-content: center;
}

#suggestions .ac-abbr {
  margin-left: 1em;
  color: #999;
}

#suggestions .ca-card:not(:has(> img)) .ac-name {
  margin-left: 2em;
}

.homeButtons {
  display: flex;
}

.transit {
  border-left: 4px solid var(--lineColor);
  max-width: 25em;
  padding-bottom: 0.5em;
  --icon-size: 1.4em;

  .transit_ornment {
    position: relative;
    display: flex;
  }

  --radius: 0.7em;
  --radius-in: 0.5em;
  .transit_dot {
    width: var(--radius);
    height: var(--radius);
    background-color: var(--lineColor);
    border-radius: 100%;
    position: absolute;
    top: var(--radius);
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;

    div {
      width: var(--radius-in);
      height: var(--radius-in);
      background-color: white;
      border-radius: 100%;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 2;
    }
  }

  .transit_details svg {
    height: 1.3em;
    color: var(--lineColor);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
    background-color: white;
  }

  .transit_bar {
    width: 0.3rem;
    background-color: var(--lineColor);
  }

  h2 {
    display: flex;
    align-items: center;
    border: 0;
  }
  .transit_icon {
    height: 1.5rem;
  }

  .transit_line {
    background-color: var(--lineColor);
    border-radius: 5px;
    border: 1px solid var(--lineColor);
    font-size: 1.1rem;
    width: 1.5rem;
    height: 1.5rem;
    font-family: monospace, monospace;
    font-weight: bold;
    display: flex;
    align-items: center;
    span {
      flex-grow: 1;
      text-align: center;
    }
  }

  .transit_station {
    margin-left: 1em;
  }

  .transit_reload {
    border: 0;
    background: inherit;
    margin-left: auto;
    padding: 1rem;
    img {
      width: 1rem;
    }
  }


  .transit_action img {
    height: 1.5em;
  }

  .transit_action summary::marker {
    content: "";
  }

  .transit_action[open] summary.transit_button {
    display: none;
  }

  .transit_past summary.transit_button {
    display: flex;
    justify-content: center;
    height: 1.5em;
    margin-top: -0.9em;
  }

  .transit_long summary.transit_button {
    display: flex;
    justify-content: center;
    height: 1em;
  }

  .transit_next {
    margin: 0;
    list-style-type: none;
    font-size: 0.9rem;
    padding: 0 0 0 1em;
  }

  .transit_next li {
    margin-bottom: 0.2em;
  }

  .transit_next summary {
    display: flex;
    align-items: center;
    font-size: 1rem;
  }

  .transit_note {
    background-color: var(--lineColor);
    border-radius: 3px 3px 3px 0;
    border: 4px solid var(--lineColor);
    font-family: monospace, monospace;
    font-weight: bold;
    margin: 0;
  }

  .transportmode-rail > summary > .transit_lineicon-rail {
      display: none;
  }

  .transit_lineicon-rail_suburbanRailway {
    background-color: var(--lineColor);
    border: 0;
    border-radius: 3px 3px 3px 3px;
    font-family: monospace, monospace;
    color: var(--lineTextColor);
    width: var(--icon-size);
    height: var(--icon-size);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .transit_stations_connections :nth-child(1 of .transit_lineicon-rail_suburbanRailway) {
    margin-left: 2em;
  }
  .transit_stations_connections :nth-child(1 of .transit_lineicon-rail_suburbanRailway)::before {
    content: url('/static/figures/transilien.svg');
    width: var(--icon-size);
    position: absolute;
    left: -1.5em;
    top: 0;
  }

  .transit_lineicon-rail_local {
    background-color: var(--lineColor);
    border: 0;
    border-radius: 3px 3px 3px 3px;
    font-family: monospace, monospace;
    color: var(--lineTextColor);
    width: var(--icon-size);
    height: var(--icon-size);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .transit_stations_connections :nth-child(1 of .transit_lineicon-rail_local) {
    margin-left: 2em;
  }
  .transit_stations_connections :nth-child(1 of .transit_lineicon-rail_local)::before {
    content: url('/static/figures/rer.svg');
    width: var(--icon-size);
    position: absolute;
    left: -1.5em;
    top: 0;
  }

  .transportmode-metro .transit_name, .transit_lineicon-metro {
    border-radius: 100%;
    background-color: var(--lineColor);
    border: 4px solid var(--lineColor);
    color: var(--lineTextColor);
    font-family: monospace, monospace;
    width: var(--icon-size);
    height: var(--icon-size);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .transit_stations_connections :nth-child(1 of .transit_lineicon-metro) {
    margin-left: 2em;
  }
  .transit_stations_connections :nth-child(1 of .transit_lineicon-metro)::before {
    content: url('/static/figures/metro.svg');
    width: var(--icon-size);
    height: var(--icon-size);
    position: absolute;
    left: -1.9em;
  }

  .transportmode-metro {
    .transit_details {
      padding-left: 4.7rem;
    }
    .transit_stations_time {
      width: 4.7rem;
      padding-right: 1.7rem;
    }
    .transit_info_more {
      margin-left: 4.7rem;
    }
  }

  .transportmode-tram > .transit_name, .transit_lineicon-tram {
    display: inline-flex;
    justify-content: center;
    border: 2px solid var(--lineColor);
    border-left: 0;
    border-right: 0;
    font-family: monospace, monospace;
    text-align: center;
    font-weight: bold;
    max-width: 2em;
    width: var(--icon-size);
    position: relative;
  }

  .transit_stations_connections :nth-child(1 of .transit_lineicon-tram) {
    margin-left: 2em;
  }
  .transit_stations_connections :nth-child(1 of .transit_lineicon-tram)::before {
    content: url('/static/figures/tram.svg');
    width: var(--icon-size);
    position: absolute;
    left: -1.5em;
    top: -0.2em;
    zoom: 0.9;
  }
  .transit_lineicon-tram > span {
    font-size: 0.8em;
  }

  .transit_destination {
    font-size: 0.7rem;
  }

  .transit_time {
    width: 4em;
    padding-right: 1em;
    text-align: end;
  }

  .transit-cancelled .transit_time, .transit-cancelled .transit_destination {
    text-decoration: line-through;
    color: #aaa;
  }

  .transit_delay {
    margin-left: 0.2rem;
    color: #aaa;
    width: 2rem;
  }

  .transit_plus {
    flex-grow: 2;
    text-align: end;
    color: #555;
    font-size: 0.9em;
    margin-right: 1rem;
  }

  .transit_follow {
    display: flex;
    margin: 0;
    img { width: 1rem; }
  }

  .transit_info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0.5em 0.5rem 0.5em 10%;
  }

  .transit_info_more {
    border-left: 0.3rem solid var(--lineColor);
    margin-left: 4rem;
    padding-left: 1em;

    pre {
      margin: 0;
    }
  }

  .transit_details {
    display: flex;
    padding-left: 4rem;
  }

  .transit_platform > span {
    border: 1px solid black;
    border-radius: 3px;
    text-align: center;
    padding: 2px;
    display: inline-block;
    min-width: 1.5rem;
  }

  .transit_timeAtStation {
    display: flex;
    align-items: center;
    img {
      height: 1rem;
    }
  }

  .transit_features {
    display: flex;
    align-items: center;
  }

  .transit_break {
    display: flex;
    padding-left: 4rem;

    hr {
      border: none;
      border-top: 1px solid #ddd;
      overflow: visible;
      text-align: center;
      width: 70%;
      margin: 0 auto 0.5em auto;
    }
  }

  .transit_stations ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
  }
  .transit_next li:last-child .transit_stations {
    margin-bottom: 0.5rem;
  }

  .transit_stations li {
    display: flex;
    margin: 0;
  }

  .transit_stations_time {
    font-size: 0.9em;
    width: 4rem;
    margin: 0;
    padding-right: 1rem;
    text-align: end;
    flex-shrink: 0;
  }

  .transit_stations_info {
    margin-left: 1em;
    padding-left: 0.5em;
    padding-bottom: 0.8em;
    margin-right: 1em;
    flex-grow: 1;

    .transit_stations_connections {
      margin: 0;
      margin-left: 1em;
      font-size: 0.7em;
      display: flex;
    }
  }

  .transit_stations > ul li:last-child .transit_bar {
    height: 50%;
  }

  .transit_stations_previous {
    ul {
      margin-bottom: 0;
      width: 100%;
    }

    li:has(.transit_stations_previous_menu) .transit_bar {
      height: 100%;
    }

    ul li:last-child .transit_stations_info {
      background-color: #ddd;
      position: relative;

      &::before,
      &::after {
        width: 0.5em;
        height: 50%;
        position: absolute;
        left: -0.5em;
        content: "";
      }

      &::before {
        top: 0px;
        background: linear-gradient(to left top, #ddd 50%, transparent 50%)
      }

      &::after {
        top: 50%;
        background: linear-gradient(to left bottom, #ddd 50%, transparent 50%)
      }
    }

  }

  .transit_stations_previous[open] summary {
    display: none;
  }

  .transit_stations_previous_menu {
      position:relative;
      display:inline-block;
      flex-grow: 1;
      text-align: center;
      font-size: 0.8em;

      img {
        width: 1.1em;
        display: inline-block;
        position: relative;
        top: 0.25em;
      }
  }
  .transit_stations_previous_menu::before, .transit_stations_previous_menu::after {
      content:' ';
      display:block;
      position:absolute;
      top:50%;
      left: 2em;
      width: 20%;
      border-bottom:1px solid #ddd;
  }

  .transit_stations_previous_menu::after {
      left:auto;
      right: 2em;
  }

}