:root {
    --up-white: #ffffff;
    --up-light-grey-1: #ededed;
    --up-light-grey-2: #dedede;
    --up-dark-grey: #333333;
    --up-black: #000000;

    --up-dark-blue-1: #004260;
    --up-dark-blue-2: #003f60;
}

html, body {
    height: 100%;
    width: 100%;
    color: var(--up-dark-grey);
}

body.up-theme {
    background-color: var(--up-dark-blue-1);
    color: var(--up-white);
}

html, body, div, span, iframe {
    margin: 0;
    border: 0;
    padding: 0;
}

body.browser-site main {
    padding-left: 1em;
    padding-right: 1em;
}

body.monitor-site,
body.monitor-site * {
    overflow: hidden;
}

body.browser-site a {
    color: var(--up-dark-blue-2);
}

body.monitor-site a,
header a {
  /* no link decoration */
  text-decoration: none;
  color: inherit ;
}

body {
    display: flex;
    flex-direction: column;
    background: var(--up-white);
}

/* probably the most important setting:
 * 1.4vw is about 27px for 1080p (16:9) */
body.monitor-site {
    font-size: max(20px, 1.4vw);
}
body.browser-site {
    font-size: 14px;
}
body.room-line {
    font-size: 28px;
}

.expand {
    flex-grow: 1;
}

header {
    display: flex;
    flex-direction: column;
    flex: 0;
    flex-basis: auto;
    background-color: var(--up-light-grey-2);
    font-size: 1.3em;
}

/*TODO no progress, just fix for now*/
header #myProgress {
    width: 100%;
    height: max(8px, 1vh);
    background-color: var(--up-light-grey-2);
    background-color: var(--up-light-grey-1);
}

header #myProgress #myBar {
    width: 30%; /* just the start value */
    height: 100%;
    background-color: var(--up-dark-blue-1);
}

header #header_bar > * {
    height: 100%;
    flex: 0;
    flex-basis: auto;
}

header #header_bar {
    margin: 0 2em 0 1em;
    display: flex;
    flex-direction: row;
}

header #header_bar #logo img {
    height: 3em;
}

header #header_bar #title_wrapper {
    text-align: start;
    display: flex;
    flex-direction: column;
}

header #header_bar #navigation {}

header #header_bar #logo {
    margin: .5vw;
    /*TODO the image already has some padding at the bottom*/
    margin-bottom: 0;
}

header #header_bar #time_wrapper {
    margin-left: .5vw;
    margin-right: .5vw;
    text-align: end;
    display: flex;
    flex-direction: column;
}

header #marquee_wrapper {
    background-color: var(--up-light-grey-2);
    padding-top: .2em;
    padding-bottom: .2em;
}

header #marquee_wrapper #marquee {
    /* TODO this animation is screen size dependent. Rewrite */
    /*animation: marquee 15s linear infinite;*/
    display: flex;
    flex-direction: row;
}

header #marquee_wrapper * {
    white-space: nowrap;
}

header #marquee_wrapper #marquee * {
    margin: 0 1vw 0 1vw;
}

.hspacer {
    flex: 1 !important;
    height: 100%;
}

.vspacer {
    flex: 1 !important;
    width: 100%;
}

main {
    flex: 1;
}

body.room-line main {
    display: flex;
    flex-direction: column;
}

/*body.monitor-site main {
    flex: 1;
}*/

main #iframes_wrapper {
    position: relative;
    left: -100vw;
    width: 999999999vw;
    height: 100%;
    display: flex;
    flex-direction: row
}

main #iframes_wrapper iframe {
    height: 100%;
    width: 100vw;
}

footer {
    background: var(--up-light-grey-2);
    display: flex;
    flex-direction: column;
    flex: 0;
    flex-basis: auto;

    padding: .2em max(.2em, .5vw) max(.2em, .2vw) max(.2em, .5vw);
    row-gap: .2em;
}

footer > * {
    width: 100%;
}

body.up-theme .rooms-badge {
    /*background: var(--up-ligh*/
    color: var(--up-dark-grey);
}

#rooms_wrapper .rooms-badge,
.transport-info .transport-badge {
    padding-left: .3em;
    padding-right: .3em;
}

#transport_title,
#rooms_title {
    /* Extra space after the title */
    margin-right: .5em;
}

#rooms_wrapper,
#transport_wrapper {
    /* At most two rows (2em for rows and .2em for margin) */
    max-height: 2.3em;
    display: flex;
    flex-direction: row;
/*    flex-wrap: wrap;*/
    align-content: flex-start;
    row-gap: .1em;
    column-gap: .2em;
}

#rooms_wrapper .rooms-badge {
    background: #dedede;
    border-radius: .2em;
}

#rooms_wrapper .rooms-badge,
#transport_wrapper .transport-info {
    margin-right: .3em;
}

.transport-info .transport-badge.sbahn {
    background: green;
    color: var(--up-white);
    border-radius: .8vw;
}

.transport-info .transport-badge.bus {
    background: purple;
    color: var(--up-white);
    border-radius: .8vw;
}

.transport-info .time-left {
    font-size: .8em;
}

.nobreak {
    white-space: nowrap;
}

@keyframes iframe_fade_out {
  from {
    width: 100vw;
  }
  to {
    width: 0;
  }
}

@keyframes progress_fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes marquee {
  from {
      transform: translateX(100%);
  }
  to {
      transform: translateX(-100%);
  }
}