/* 2021 Styles for COVID-19 Timeline */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");

/* **************** */
/* General Timeline */
/* **************** */

body,
.tl-timeline h1,
.tl-timeline h2,
.tl-timeline h3,
.tl-timeline h4,
.tl-timeline h5,
.tl-timeline h6,
.tl-timeline p,
.tl-timeline .tl-headline-date,
.tl-timeline h3.tl-headline-date,
.tl-timeline .tl-caption {
  font-family: "Open Sans", sans-serif !important;
}

.covid19-timeline-wrapper {
  padding-bottom: 60px;
}

/* *************** */
/* Timeline Slides */
/* *************** */
@media only screen and (max-width: 767px) {
  .tl-storyslider .tl-slidenav-next,
  .tl-storyslider .tl-slidenav-previous {
    display: none !important;
  }
}

@media only screen and (max-width: 1024px) {
  #timeline-embed {
    display: flex;
    flex-direction: column-reverse;
  }
}

.tl-layout-portrait .tl-storyslider {
  box-shadow: none !important;
}

.tl-timeline .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-icon,
.tl-timeline .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-icon,
.tl-timeline .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-title,
.tl-timeline .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-title,
.tl-timeline .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-description,
.tl-timeline .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-description {
  color: #767676;
  opacity: 1;
}

.timeline-wrapper h1 {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.tl-skinny .tl-media .tl-media-content-container .tl-credit,
.tl-skinny .tl-media .tl-media-content-container .tl-caption,
.tl-timeline .tl-caption {
  font-size: 11px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
  width: auto !important;
}

@media only screen and (max-width: 767px) {
  .tl-skinny .tl-slide .tl-slide-content-container .tl-slide-content {
    padding: 0 25px 50px 20px !important;
    width: 100% !important;
  }
}

@media only screen and (max-width: 1024px) {
  .timeline-wrapper h1 {
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 768px) {
  .tl-slide .tl-slide-content-container .tl-slide-content {
    display: flex !important;
    width: 100% !important;
  }

  .tl-slide.tl-slide-text-only .tl-slide-content-container .tl-slide-content .tl-text {
    max-width: 80% !important;
  }

  .tl-slide .tl-slide-content-container .tl-slide-content .tl-media,
  .tl-slide .tl-slide-content-container .tl-slide-content .tl-text {
    width: 50%;
    max-width: 50% !important;
  }
}

.tl-headline-date,
.tl-text-content p {
  color: #414244 !important;
  font-size: 0.875rem !important;
}

@media (max-width: 1024px) {
  .tl-slide .tl-text .tl-headline {
    color: #222 !important;
    font-size: 24px !important;
    line-height: 1.125 !important;
  }

  .tl-storyslider .tl-slider-container-mask {
    padding-top: 30px;
  }

  .tl-skinny .tl-slide .tl-slide-content-container .tl-slide-content .tl-media {
    border-top: none !important;
    padding-top: 0 !important;
  }
}

@media (min-width: 1025px) {
  .tl-slide .tl-text .tl-headline {
    color: #222 !important;
    font-size: 38px !important;
    line-height: 1.125 !important;
  }
}

/* Next / Previous Icons */
.tl-timeline .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-icon,
.tl-timeline .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-icon,
.tl-timeline .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-title,
.tl-timeline .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-title,
.tl-timeline .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-description,
.tl-timeline .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-description {
  color: #767676;
  opacity: 1 !important;
}

/* Next / Previous Icons: hover */
.tl-timeline .tl-slidenav-previous:hover .tl-slidenav-title,
.tl-timeline .tl-slidenav-next:hover .tl-slidenav-title {
  color: #333;
}

.tl-timeline .tl-slidenav-previous:hover .tl-slidenav-description,
.tl-timeline .tl-slidenav-next:hover .tl-slidenav-description {
  color: #333;
  opacity: 1 !important;
}

.tl-timeline .tl-slidenav-previous:hover .tl-slidenav-icon,
.tl-timeline .tl-slidenav-next:hover .tl-slidenav-icon {
  color: #333;
}

@media only screen and (max-width: 767px) {
  .tl-timeline .tl-slidenav-next {
    right: 45px;
  }

  .tl-timeline .tl-slidenav-previous {
    left: -10px !important;
  }
}

/* Timeline Chart */
.tl-menubar .tl-menubar-button {
  color: #6E6E6E;
}

@media(max-width: 1024px) {
  .tl-menubar {
    top: 6px !important;
    z-index: 45 !important;
  }
}

/* *************** */
/* Timeline Filter */
/* *************** */
.selected-province-wrapper {
  padding: 10px 0;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .selected-province-wrapper {
    display: flex;
  }

  .selected-province-wrapper h2.selected-province {
    color: #222;
    font-size: 24px;
    font-weight: 600;
    margin-left: 20px;
  }
}

@media (min-width: 768px) {
  .selected-province-wrapper {
    margin: 0 auto;
    text-align: center;
  }
}

.selected-province-wrapper h2 {
  color: #767676;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0;
}

.selected-province-wrapper h2.selected-province {
  color: #222;
  font-size: 24px;
  font-weight: 600;
}

ul.provinces-list {
  padding: 1rem 0;
}

ul.provinces-list li {
  background-color: #efefef;
  color: #222;
  display: inline-block;
  font-size: 14px;
  list-style-image: none;
  margin: 5px;
  padding: 10px;
}

ul.provinces-list li.active,
ul.provinces-list li.active:hover {
  background-color: 222;
  color: #fff;
}

ul.provinces-list li:hover {
  background-color: #c2c2c2;
  color: #222;
  cursor: pointer;
}

ul.provinces-list li:hover a {
  color: #222;
  text-decoration: underline;
}

ul.provinces-list li a {
  color: #222;
  text-decoration: none;
}

/* ************* */
/* Timeline Axis */
/* ************* */
@media (max-width: 767px) {
  .tl-timenav {
    height: 165px;
}

@media (max-width: 1024px) {
  .tl-timenav {
    box-shadow: 0 4px 6px -6px #222;
    padding-bottom: 20px;
    z-index: 40;
  }

  .tl-timenav .tl-timeaxis-background {
    height: 60px;
  }

  .tl-timeline .tl-timenav-slider .tl-timeaxis {
    bottom: 50px;
    height: 9px;
  }
}

/* Time Axis Minor */
.tl-timeline .tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-minor .tl-timeaxis-tick {
  color: #767676;
}
/* Time Axis Major */
.tl-timeline .tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-major .tl-timeaxis-tick {
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  line-height: 24px;
}

/* *************** */
/* Timeline Marker */
/* *************** */

/* Time Marker */
.tl-timeline  .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline,
.tl-timeline  .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p {
  color: #333;
}

/* Time Marker: hover */
.tl-timeline .tl-timemarker:hover .tl-timemarker-content-container {
  background-color: #C2C2C2;
}

.tl-timeline .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class^="tl-icon-"],
.tl-timeline .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class*=" tl-icon-"] {
  color: #333;
}

.tl-timeline .tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class^="tl-icon-"],
.tl-timeline .tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class*=" tl-icon-"] {
  color: #333;
}

.tl-timeline .tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
  color: #333;
}

/* Timeline Marker: active */
.tl-timeline .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
  background-color: #333;
  color: #fff;
}

.tl-timeline .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
  color: #fff;
}

.tl-timeline .tl-timemarker.tl-timemarker-active .tl-timemarker-line-left,
.tl-timeline .tl-timemarker.tl-timemarker-active .tl-timemarker-line-right {
  border-color:#333;
}

.tl-timeline .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class^="tl-icon-"],
.tl-timeline .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container [class*=" tl-icon-"] {
  color: #fff;
}

/*.tl-timeline .tl-timemarker .tl-timemarker-content-container {
  left: -1px;
}*/

/* ************************* */
/* Mobile Swipe Instructions */
/* ************************* */
.tl-timeline .tl-message-full .tl-message-container {
  display: block;
}

.tl-icon-swipe-left:after {
  color: #333;
}

.tl-timeline .tl-message-full .tl-message-container .tl-message-content {
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

.tl-timeline .tl-message-full .tl-message-container .tl-message-content .tl-button {
  border: 1px solid #333;
}

/* *************************** */
/* Remove Twitter on this Page */
/* *************************** */
.twitter.cta[data-twitter-ready="true"] {
  display: none;
}

/* ****************************** */
/* Remove timeline js attribution */
/* ****************************** */
.tl-timeline .tl-timenav .tl-attribution {
  display: none;
}