/*
SPDX-FileCopyrightText: German Aerospace Center (DLR) <cosmoscout@dlr.de>
SPDX-License-Identifier: MIT
*/

/* generic timeline styles ---------------------------------------------------------------------- */

:root {
  --center-element-width: 340px;
}

#overview,
#timeline {
  background-color: var(--cs-color-background-dark);
}

#timeline-container .vis-timeline {
  border-width: 0;
  cursor: pointer !important;
}


#timeline-container .vis-timeline:hover {
  background-color: rgba(230, 230, 255, 0.1);
}

#timeline-container .vis-timeline:active {
  top: 1px;
}

#timeline-container .vis-time-axis .vis-text {
  padding: 1px;
  pointer-events: none;
  color: var(--cs-color-text);
}

.vis-shadow {
  display: none !important;
}

.vis-panel {
  border: none !important;
}

.vis-panel.vis-center {
  z-index: 1;
  height: auto !important;
}

.vis-background .vis-item {
  display: none;
}

.vis-panel>.vis-content {
  transform: none !important;
}

/* generic timeline item styles ----------------------------------------------------------------- */

#timeline-container .vis-item {
  background-color: var(--cs-color-background-dark);
  color: var(--cs-color-text);
  border-width: 2px;
  border-radius: 10px;
  z-index: 5;
  cursor: pointer;
}

#timeline-container .vis-item-content {
  visibility: hidden;
}

#timeline-container .vis-item.vis-line {
  display: none;
}

#timeline-container .vis-item.vis-dot {
  border-width: 0;
  border-radius: 0;
}

#timeline-container .vis-item.vis-box,
#timeline-container .vis-item.vis-range {
  height: 13px !important;
  min-width: 13px !important;
  transition-property: margin, height;
  transition-duration: 0.1s;
  transition-timing-function: ease;
}

#timeline-container .vis-item.vis-box {
  width: 13px !important;
  transition-property: margin, width, height;
  margin-left: 1px;
}

#timeline-container .vis-item.vis-box:hover {
  width: 17px !important;
  height: 17px !important;
  margin-left: -1px;
  margin-top: -2px;
}

#timeline-container .vis-item.vis-range:hover {
  height: 17px !important;
  margin-top: -2px;
}

/* main timeline styles ------------------------------------------------------------------------- */

#timeline .vis-text.vis-major {
  top: -16px !important;
  font-size: 9px;
  margin-left: 4px;
}

#timeline .vis-custom-time.center-time {
  background-color: var(--cs-color-primary);
  width: 16px !important;
  height: 16px !important;
  cursor: inherit;
  pointer-events: none;
  border-radius: 10px;
  top: -8px !important;
  margin-left: -8px !important;
}

#timeline .vis-minor.vis-text {
  z-index: 1;
  top: 17px !important;
  font-size: 12px;
  margin-left: 4px;
}

#timeline .vis-grid.vis-vertical.vis-minor {
  border-color: var(--cs-color-primary);
  height: 12px !important;
  top: 22px !important;
  border-width: 2px;
  margin-left: -1px;
}

#timeline .vis-grid.vis-vertical.vis-major {
  border-color: var(--cs-color-primary);
  height: 30px !important;
  top: 4px !important;
  border-width: 2px;
  margin-left: -1px;
}

/* overview timeline styles --------------------------------------------------------------------- */

#overview {
  margin-top: -1px;
}

#overview .vis-text.vis-major {
  top: -2px;
  font-size: 10px;
  z-index: 1;
}

#overview .vis-group {
  top: 5px;
}

#overview .vis-minor.vis-text {
  text-align: center;
  top: -3px;
  font-size: 10px;
}

#overview .vis-grid.vis-vertical.vis-major,
#overview .vis-grid.vis-vertical.vis-minor {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background-color: var(--cs-color-text);
  z-index: 1;
  top: 19px !important;
  border: none;
}

#overview .vis-panel .vis-axis {
  border-width: 1px;
  border-style: dashed;
  border-color: var(--cs-color-primary-transparent) transparent transparent transparent;
  top: 20px !important;
}

/* overview focus rect -------------------------------------------------------------------------- */

#overview .vis-custom-time {
  pointer-events: none;
  background-color: transparent;
  z-index: 0;
}

#overview .vis-custom-time.overview-lens-right-time div,
#overview .vis-custom-time.overview-lens-left-time div {
  background-color: var(--cs-color-background-darker);
  border-color: var(--cs-color-primary);
  border-style: solid;
  width: 200vw !important;
}

#overview .vis-custom-time.overview-lens-right-time div {
  left: 3px !important;
  border-bottom-left-radius: 15px;
  border-width: 0 0 2px 2px;
}

#overview .vis-custom-time.overview-lens-left-time div {
  right: calc(200vw + 3px) !important;
  left: unset !important;
  border-bottom-right-radius: 15px;
  border-width: 0 2px 2px 0;
}

/* timeline control items ----------------------------------------------------------------------- */

#timeline-container {
  grid-area: timeline;
  z-index: 2;
  position: relative;
  padding: 0;
  transition: margin-top 0.2s ease;
  background-image: linear-gradient(180deg, rgba(20, 20, 20, 0.4) 80%, rgba(20, 20, 20, 0.0) 100%);
  margin: -39px 0 0;
}

#timeline-container.overview-visible {
  margin-top: 0;
}

#bottom-border-left {
  top: 74px;
  height: 2px;
  position: absolute;
  background-color: var(--cs-color-primary);
  width: calc(50% - 0.5*var(--center-element-width));
  left: 0;
  box-shadow: 0 1px 5px black;
}

#bottom-border-right {
  top: 74px;
  height: 2px;
  position: absolute;
  background-color: var(--cs-color-primary);
  width: calc(50% - 0.5*var(--center-element-width));
  right: 0;
  box-shadow: 0 1px 5px black;
}

#compass-arrow {
  background-image: url("../img/compass.png");
  width: 25px;
  height: 25px;
  background-size: contain;
  display: inline-block;
  top: 5px;
  position: relative;
}

#timeline-container .item {
  position: absolute;
}

#timeline-container .btn {
  padding: 0 4px;
  font-size: 20px;
  line-height: 35px;
  border-radius: 0;
}

#time-control {
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--cs-color-background-dark);
  border-radius: 0 0 50px 50px;
  border-bottom-color: var(--cs-color-primary);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  width: var(--center-element-width);
  display: flex;
  height: 40px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

#timeline-container #time-reset-button {
  border-radius: 0 50px 0 50px;
}

#timeline-container #pause-button {
  border-radius: 50px 0 50px 0;
}

#timeline-container .btn-main {
  background-color: var(--cs-color-primary);
  width: 60px;
  height: 40px;
}

#timeline-container #pause-button:hover,
#expand-control:hover,
#time-reset-button:hover {
  background-color: #fff;
}

#pause-button i,
#time-reset-button i {
  color: rgb(20, 20, 20);
  font-size: 24px;
}

#timeline-container .range-label {
  color: rgb(20, 20, 20);
  line-height: 1;
}

#date-label-container {
  flex-grow: 1;
  position: relative;
}

#date-label {
  font-size: 20px;
  top: 5px;
  padding-right: 5px;
  position: relative;
}

#speed-control {
  left: 50%;
  width: 600px;
  transform: translateX(-50%);
  top: 82px;
}

#speed-control i {
  font-size: 24px;
}

#expand-control {
  right: 10px;
  background-color: var(--cs-color-primary);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  box-shadow: var(--cs-box-shadow-small);
}

#expand-control a {
  display: block;
}

#expand-control i {
  color: rgb(20, 20, 20);
  width: 32px;
  font-size: 22px;
  text-align: center;
  height: 32px;
}

#decreaseControl {
  top: 11px;
  left: 0;
}

#increaseControl {
  top: 5px;
  left: 0;
}

#decreaseControl a,
#increaseControl a {
  height: 20px;
  width: 36px;
  padding: 0;
  margin: 0;
  pointer-events: all;
  border: 0;
  position: absolute;
}

#decreaseControl a {
  top: 5px;
}

#increaseControl a {
  top: -10px;
}

#decreaseControl a:active {
  top: 6px;
}

#increaseControl a:active {
  top: -9px;
}

#decreaseControl i,
#increaseControl i {
  opacity: 0;
  transition: opacity 0.2s;
  line-height: 1;
  top: -3px;
  pointer-events: none;
}

#increaseControl i {
  top: -8px;
}

#timeline-container a:hover {
  z-index: 10;
}

#increase-day-button,
#decrease-day-button {
  left: 72px;
}

#increase-month-button,
#decrease-month-button {
  left: 45px;
}

#increase-year-button,
#decrease-year-button {
  left: 7px;
}

#increase-hour-button,
#decrease-hour-button {
  left: 104px;
}

#increase-minute-button,
#decrease-minute-button {
  left: 130px;
}

#increase-second-button,
#decrease-second-button {
  left: 155px;
}

#time-control:hover #decreaseControl i,
#time-control:hover #increaseControl i {
  opacity: 1;
}


#speed-decrease-button-container {
  left: 50%;
  transform: translate(-345px);
  top: 74px;
}

#speed-increase-button-container {
  left: 50%;
  transform: translate(310px);
  top: 74px;
  height: 15px;
}

#timeline-container .noUi-target.noUi-ltr.noUi-horizontal.noUi-background {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(221, 211, 255, 0.5) 0%, rgba(221, 211, 255, 0.5) 25%,
      rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%,
      rgba(221, 211, 255, 0.5) 75%, rgba(221, 211, 255, 0.5) 100%);
}

#timeline-container .noUi-target .range-label {
  background-color: var(--cs-color-primary);
}

#timeline-container .noUi-target:hover .range-label,
#timeline-container .noUi-target .noUi-active .range-label {
  background-color: #fff;
}

#timeline-container #plugin-buttons {
  display: flex;
  flex-wrap: wrap;
}

#timeline-search-area {
  right: 47px;
  margin-top: 7px;
  color: var(--cs-color-text);
  font-size: 11pt;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
}

#timeline-search-area .btn {
  position: absolute;
  right: 0;
  line-height: 21px;
}

#timeline-search-area input {
  text-shadow: 1px 1px 1px #000, 0px 0px 1px #000, 1px 1px 5px rgba(0, 0, 0, 0.75);
  transition: width 0.3s ease;
  width: 150px;
  padding: 2px 0 2px 5px;
  border: none;
  background: none;
  outline: none;
}

#timeline-search-area input::placeholder {
  opacity: 0.5;
  color: #ddf;
}

#timeline-search-area input:focus {
  width: 200px;
}