@font-face {
    font-family: "Readex Pro";
    src: url(readexpro.ttf);
}

:root {
    --dark-2: #05668d;
    --dark-1: #028090;
    --light-1: #00a896;
    --light-2: #02c39a;
    --light-3: #0dfdc9;
    --accent: #01795f;
}

* {
    font-family: "Readex Pro", "Fira Sans", sans-serif;
}

body {
    background-color: var(--dark-2);
    margin: 0px;
}

body.main_search {
    overflow-y: hidden;
}

#header {
    position: relative;
    background: var(--dark-1);
    padding: 1em;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1em;
}

#header * {
    display: inline;
}

#header h2 {
    margin: 0px 2em 0px 0px;
}

#header #screen_type {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.title_link {
    text-decoration: none;
    color: initial;
}

/* Main menu */

#footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: var(--dark-1);
    padding: 1em;
    font-size: .8em;
    width: 100%;
    box-sizing: border-box;
}

#footer h3 {
    margin: 0;
}

#search_container {
    background-color: var(--light-1);
    padding: 2em;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    box-shadow: 0px 0px 1em rgba(0, 0, 0, .5);
    z-index: 10;
}

h1 {
    margin: 0px 4em 1em 0px;
    white-space: nowrap;
}

#search_form_container form > * {
    margin: .8em 0;
}

#search_form_container label {
    display: block;
}

#search_form_container input, #search_refine_container input {
    font-size: inherit;
    background-color: var(--accent);
    color: white;
    border: none;
    width: 100%;
    padding: .5em;
    box-sizing: border-box;
}

#search_form_container button {
    margin-top: 1.2em;
    color: black;
    background: var(--light-3);
    font-size: 1.2em;
    border: none;
    padding: .5em;
}

/* End of main menu */

/* Station services screen */

#services_container, #stops_container {
    background: var(--light-1);
    margin: 2em;
    padding: 1em;
}

.service:not(:last-child), .stop:not(:last-child) {
    border-bottom: 1px solid var(--accent);
}

.service a, .stop > a {
    text-decoration: none;
    color: initial;
    display: flex;
    padding: .5em;
}

.stop_associations {
    padding: .5em;
    font-style: italic;
}

.service a:hover, .stop > a:hover {
    background: var(--light-2);
}

.service_timing *, .service_locations *, .stop_timing *, .stop_info * {
    display: flex;
}

.service_departure, .service_destination, .stop_departure, .stop_name {
    font-size: 1.3em;
}

.service_departure::after, .service_arrival::after, .stop_arrival::after, .stop_departure::after {
    content: attr(data-lateness);
    width: 2em;
    text-align: right;
    font-size: .9em;
    flex-grow: 2;
    align-self: center;
}

.service_locations, .stop_info {
    margin-left: 1em;
}

.service_locations {
    display: flex;
}

.service_locations_1 {
    flex-direction: column;
}

.stop_info {
    display: flex;
}

.stop_name_info {
    flex-direction: column;
}

.service_destination, .stop_name.stop_passed {
    font-weight: bold;
}

.service_late, .platform_changed {
    color: darkred;
}

.service_early {
    color: darkblue;
}

.service_departure, .stop_departure {
    width: 4.5em;
}

.platform_confirmed {
    font-weight: bold;
}

.platform_unconfirmed {
    font-style: italic;
}

.stop_arrival, .stop_departure, .service_arrival, .service_departure {
    font-style: italic;
}

.stop_arrival.stop_passed, .stop_departure.stop_passed, .service_arrival.stop_passed, .service_departure.stop_passed {
    font-style: initial;
    font-weight: bold;
}

.stop_service_location {
    align-self: center;
    margin-left: 2em;
    background: var(--light-3);
    padding: .3em;
    font-weight: bold;
}

.service_cancellation {
    align-self: center;
    margin-left: 2em;
    background: darkred;
    color: white;
    padding: .3em;
}

.service_operator {
    flex-grow: 2;
    align-items: center;
    display: flex;
    margin-left: .3em;
}

.service_operator_img {
    height: 75%;
    max-height: 2em;
    margin-left: auto;
}

.cancel_container {
    background: darkred;
    color: white;
    padding: 1em;
}

.cancel_indicator {
    font-size: 1.5em;
}

.cancel_reason {
    display: block;
}

.non_train_service {
    color: #c9d400;
}

.non_train_service > * {
    font-style: normal;
}

#search_refine_container {
    margin: 2em;
    background: var(--light-3);
    padding: 1em;
    z-index: 10;
    position: relative;
}

#search_refine_title_container {
    display: flex;
}

#search_refine_title {
    font-size: 1.4em;
    font-weight: bold;
    flex-grow: 1;
}

#search_refine_container form {
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
}

.form_input_container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}

.form_input_container:not(:nth-child(3)) {
    padding-right: 1em;
}

#search_refine_container input {
    height: 100%;
}

.form_submit_container {
    width: 100%;
    text-align: right;
    padding: 1em 0 0 0;
}

.form_submit_container #submit {
    background: var(--accent);
    color: white;
    font-size: 1.2em;
    border: none;
    padding: .5em;
}

#search_refine_collapse {
    display: none;
}

.no_call a {
    font-style: italic;
    color: #555;
}

/* End of station services screen */

/* Search suggestions box */

#search_form_suggestions {
    background: var(--light-3);
    color: black;
    position: fixed;
    width: calc(100% - 4em);
    display: none;
}

#search_refine_suggestions {
    position: absolute;
    top: 100%;
    background-color: var(--light-2);
    width: calc(100% - 1em);
    display: none;
}

#search_suggestions_list, #search_refine_suggestions_list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.search_suggestion {
    padding: .5em;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.search_suggestion:hover {
    background: var(--light-2);
}

#search_refine_suggestions_list .search_suggestion:hover {
    background: var(--accent);
}

.search_suggestion_name {
    order: 1;
    font-weight: bold;
}

.search_suggestion_crs {
    order: 2;
    margin-left: .7em;
}

.search_suggestion_tiploc {
    order: 3;
    flex-grow: 2;
    text-align: right;
    font-style: italic;
    font-size: .8em;
}

#search_suggestions_underlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    display: none;
    z-index: 9;
}

/* End of search suggestions box */