.timeline-control {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4rem;
  padding-left: 1rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-align: start;
      align-items: flex-start;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .timeline-control .play-button {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 28px solid white; }
    .timeline-control .play-button.played {
      border-top: 0;
      border-bottom: 0;
      height: 32px;
      width: 10px;
      border-left: 9px solid white;
      border-right: 9px solid white; }
  .timeline-control .timeline-control-panel {
    height: 100%;
    width: 95vw;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column; }
    .timeline-control .timeline-control-panel > div {
      display: -ms-flexbox;
      display: flex;
      margin: 0 1rem; }
    .timeline-control .timeline-control-panel .calendar-panel {
      -ms-flex-pack: distribute;
          justify-content: space-around;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      padding-bottom: 0.7rem; }
      .timeline-control .timeline-control-panel .calendar-panel .calendar-day {
        position: relative;
        color: #fff;
        font-size: 1rem;
        line-height: 1;
        text-align: center;
        -ms-flex-positive: 1;
            flex-grow: 1; }
        .timeline-control .timeline-control-panel .calendar-panel .calendar-day::before {
          position: absolute;
          content: '';
          height: 120%;
          left: 0;
          border-left: 1px solid #ccc;
          transform-origin: right 0; }
        .timeline-control .timeline-control-panel .calendar-panel .calendar-day:first-child::before {
          border-left: none; }
    .timeline-control .timeline-control-panel .timeline-panel {
      -ms-flex-align: end;
          align-items: flex-end;
      color: black;
      padding: 0.2rem 0; }
      .timeline-control .timeline-control-panel .timeline-panel .timeline-bar {
        width: 100%;
        height: 0.5rem;
        border-radius: 0.5rem;
        position: relative;
        padding: 0.5rem 0; }
        .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside {
          width: 100%;
          height: 0.5rem;
          background-color: rgba(211, 211, 211, 0.42);
          border-radius: 0.5rem;
          position: relative; }
          .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside .timeline-hover-box {
            pointer-events: none;
            position: absolute;
            background-color: white;
            width: 3rem;
            font-size: 0.875rem;
            top: .8rem;
            left: -1.5rem;
            text-align: center;
            border-radius: 0.25rem;
            opacity: 0;
            transition: opacity ease 0.5s;
            z-index: 1; }
            .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside .timeline-hover-box::after {
              position: absolute;
              content: '';
              border-left: 0.3rem solid transparent;
              border-right: 0.3rem solid transparent;
              border-bottom: 0.3rem solid #fff;
              bottom: 1rem;
              left: 1.2rem; }
          .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside .timeline-current-bar {
            position: relative;
            width: 0%;
            height: 100%;
            border-radius: 0.5rem;
            background-color: red;
            transition: width ease 250ms; }
            .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside .timeline-current-bar.played {
              transition: none; }
            .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside .timeline-current-bar::after {
              content: '';
              position: absolute;
              background-color: red;
              border-radius: 0.6rem;
              width: 0.8rem;
              height: 0.8rem;
              right: -0.4rem;
              top: -0.15rem; }
            .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside .timeline-current-bar .timeline-current-box {
              pointer-events: none;
              position: absolute;
              background-color: white;
              width: 8rem;
              font-size: 0.75rem;
              top: -2rem;
              right: -4.65rem;
              padding: 0.175rem 0.25rem;
              text-align: center;
              border-radius: 0.25rem; }
              .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside .timeline-current-bar .timeline-current-box::after {
                position: absolute;
                content: '';
                border-left: 0.3rem solid transparent;
                border-right: 0.3rem solid transparent;
                border-top: 0.3rem solid #fff;
                bottom: -0.3rem;
                left: 3.55rem; }
              .timeline-control .timeline-control-panel .timeline-panel .timeline-bar .timeline-bar-inside .timeline-current-bar .timeline-current-box:empty {
                display: none; }
        .timeline-control .timeline-control-panel .timeline-panel .timeline-bar:hover .timeline-hover-box {
          opacity: 1; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .timeline-control .timeline-control-panel .calendar-panel .calendar-day::before {
    transform: scaleX(0.5); } }

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .timeline-control .timeline-control-panel .calendar-panel .calendar-day::before {
    transform: scaleX(0.33333); } }

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .timeline-control {
    bottom: 1rem; } }

@media only screen and (device-height: 375px) and (device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
  .timeline-control {
    bottom: 1rem; } }

#map .graticule {
  stroke: #505050;
  stroke-width: 1.0;
  fill: none; }

#map .hemisphere {
  stroke: #707070;
  stroke-width: 1.25;
  fill: none; }

#map .coastline,
#map .lakes {
  stroke: #FFF;
  stroke-width: 1.25;
  fill: none; }

#map .rivers {
  stroke: #808080;
  stroke-width: 1.25;
  fill: none; }

#map .twn {
  stroke: #FFF;
  stroke-width: 0.5;
  fill-opacity: 1;
  fill: rgba(255, 200, 117, 0.6); }

#foreground {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  #foreground .foreground-sphere {
    stroke: #000005;
    stroke-width: 4.0;
    fill: none;
    -moz-user-select: none;
    /* Oddly, Win FF sometimes selects this SVG element. Disable. */
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none; }
  #foreground .location-mark {
    stroke: #3aff3a;
    stroke-width: 2.5;
    fill: none; }
  #foreground .location {
    fill: #872657; }
  #foreground .location-label {
    font-family: 'Microsoft JhengHei';
    font-size: 1rem;
    font-weight: bolder;
    fill: #872657; }

#sea-mask {
  z-index: -15; }
  #sea-mask.invisible {
    display: none; }
  #sea-mask .coastline {
    fill: black; }
  #sea-mask .twn {
    fill: #ffc875;
    z-index: 0; }

#animation {
  opacity: 1;
  transition: opacity .5s linear; }
  #animation.invisible {
    opacity: 0;
    transition: opacity .3s linear; }

.overlay-base {
  z-index: -25;
  opacity: 1;
  transition: opacity .7s linear;
  filter: blur(2px); }
  .overlay-base.invisible {
    opacity: 0; }

#menu {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(136, 136, 136, 0.5);
  border-bottom-right-radius: .5rem;
  padding: .7rem 1rem; }
  #menu .menu-header {
    display: -ms-flexbox;
    display: flex; }
    #menu .menu-header .menu-toggle {
      width: 2rem;
      height: 2rem;
      position: relative; }
      #menu .menu-header .menu-toggle::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1.4rem;
        bottom: 0;
        border-top: .2rem solid white; }
      #menu .menu-header .menu-toggle::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: .5rem;
        border-top: .2rem solid white;
        border-bottom: .2rem solid white; }
    #menu .menu-header .logo {
      background-image: url("../../img/logo.png");
      background-size: 12.2rem 3.1rem;
      margin-left: 1rem;
      margin-top: -.5rem;
      height: 3rem;
      width: 12.2rem; }
  #menu .menu-body {
    font-size: 1.5rem;
    max-height: 15rem;
    opacity: 1;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    transition-property: opacity, max-height;
    transition-duration: 250ms;
    transition-delay: 50ms;
    transition-timing-function: ease; }
    #menu .menu-body.invisible {
      opacity: 0;
      max-height: 0; }
    #menu .menu-body .menu-controller {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      margin-top: .5rem; }
      #menu .menu-body .menu-controller * {
        margin-right: .5rem; }
    #menu .menu-body select {
      font-family: 'Microsoft JhengHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.2rem;
      vertical-align: middle; }
    #menu .menu-body #animate-button {
      -ms-flex-item-align: center;
          align-self: center;
      width: 0;
      height: 1.5rem;
      border-left: 1.5rem solid white; }
      #menu .menu-body #animate-button.stoped {
        height: 0;
        border-top: .75rem solid transparent;
        border-bottom: .75rem solid transparent;
        border-left: 1.3rem solid white;
        border-right: 0; }

.color-bar {
  cursor: pointer;
  position: absolute;
  right: 0;
  bottom: 7rem;
  font-size: .75rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
  font-family: mplus-2p-light-sub, Helvetica, arial, freesans, clean, sans-serif; }
  .color-bar div {
    display: -ms-flexbox;
    display: flex;
    padding: .25rem .5rem;
    min-width: 1rem;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center; }
    .color-bar div:first-child {
      border-bottom-left-radius: 3px; }
    .color-bar div:last-child {
      border-top-left-radius: 3px; }

.color {
  color: #3f4abc;
  color: #3382ba;
  color: #37abad;
  color: #37ae49;
  color: #33b633;
  color: #7fb433;
  color: #baad33;
  color: #b47c38;
  color: #ad3f37;
  color: #b03364;
  color: #ae39ba;
  color: #5636b1;
  color: #3584b1;
  color: #40adb1;
  color: #465bbe;
  color: #3285be;
  color: #3c9ea0;
  color: #3ca65a;
  color: #32b632;
  color: #78b432;
  color: #be9f32;
  color: #b4763a;
  color: #a04647;
  color: #a93269;
  color: #a14098;
  color: #6150ac;
  color: #497bac;
  color: #559fac;
  color: #464abe;
  color: #0096bd;
  color: #12c4c8;
  color: #12d349;
  color: #00f000;
  color: #7fed00;
  color: #fec700;
  color: #ed7c0e;
  color: #c82527;
  color: #d90064;
  color: #ca19ba;
  color: #5636de;
  color: #2a84de;
  color: #40c7de; }

html {
  font-family: "Microsoft JhengHei", "Segoe UI", Tahoma, Geneva, Verdana,
 sans-serif;
  font-size: 16px;
  overflow: hidden; }

body {
  color: #eee;
  background-color: #000005; }

a {
  color: inherit;
  text-decoration: none; }

.fill-screen {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0; }

.clickable {
  cursor: pointer;
  opacity: 1;
  transition: opacity ease 200ms; }
  .clickable:hover {
    opacity: 0.8; }

.marker {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .marker .marker-pin {
    position: absolute;
    width: 7px;
    height: 7px;
    top: 5px;
    left: 5px;
    border-radius: 3.5px;
    background-color: white; }
  .marker .marker-pinline {
    position: absolute;
    top: -100px;
    left: 8px;
    width: 0;
    height: 107px;
    border-left: 1px solid white; }
  .marker .marker-close {
    position: absolute;
    right: -16px;
    top: -16px;
    cursor: pointer; }
  .marker .marker-content {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    top: -100px;
    left: 8px;
    padding: 2px 5px;
    border: 1px solid white;
    border-left-width: 0;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px; }
    .marker .marker-content .vec-rotate {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      margin: 0;
      padding: 0; }
      .marker .marker-content .vec-rotate svg,
      .marker .marker-content .vec-rotate span {
        display: inline; }
      .marker .marker-content .vec-rotate span {
        margin-left: 5px; }

@media only screen and (max-device-width: 812px) {
  html {
    font-size: 12px; } }