/* Typography from UX */
h1 {
  font-size: 38px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1.2;
}


h2 {
  font-size: 32px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1.2;
}

h3 {
  font-size: 28px;
  font-family: “Lato”, Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1.2;
}

h4 {
  font-size: 24px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1.2;
}

h5 {
  font-size: 20px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1.2;
}

h6 {
  font-size: 16px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1.2;
}

p {
  font-size: 16px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: 300;
}

/* Bootstrap overrides */
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-left: 0;
  padding-right: 0;
}

.btn {
  border-radius: 0;
}

.navbar-brand {
  padding: 0;
}

/* Live stream styles */
body {
  background: #E4E3E3;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  margin: 0;
}

body.live {
  overflow-y: auto;
}

/* Navigation */
.navbar {
  background: var(--user-header-color);
  justify-content: space-between;
}

.nav-link {
  color: var(--user-link-color) !important;
  font-size: 18px;
}

.nav-link svg {
  fill: var(--user-link-color);
  height: 18px;
}

.nav-link:hover,
.nav-link:hover svg{
  color: var(--user-alternate-color) !important;
  fill: var(--user-alternate-color);
}

.navbar-collapse {
  flex-grow: 0;
}

.navbar-dark .navbar-toggler {
  border-color: var(--user-link-color);
  color: var(--user-link-color);
}

.container-fluid > .row {
  height: calc(100vh - 80px);
  position: relative;
}

/* Entire left column */
#stream-container {
  background: #fff;
  z-index: 1;
}

/* Rotator displayed when not live */
#rotator {
  margin-bottom: 16px;
  position: relative;
}

#rotator ul {
  height: calc(75vw * 0.5625) !important;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#rotator .slide,
#rotator img {
  height: auto;
  width: 75vw;
}

#rotator .pager {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 20px;
  text-align: center;
  z-index: 100;
}
#rotator .pager .pager-wrap {
  display: inline;
}

#rotator .pager .pager-circle {
  background-color: #FFFFFF;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  border-radius: 14px;
  height: 14px;
  margin: 0 6px;
  width: 14px;
}

#rotator .pager .pager-button {
  -webkit-box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.7);
  box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.7);
  cursor: pointer;
  display: inline-block;
  opacity: 0.5;
  -webkit-transition: background-color 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out;
  -o-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}

#rotator .pager .pager-button:hover,
#rotator .pager .pager-circle.cycle-pager-active {
  opacity: 1;
}

#rotator .pager #prev,
#rotator .pager #next {
  border-color: #fff;
}

#rotator .pager #prev:hover,
#rotator .pager #next:hover {
  border-color: #fff;
  opacity: 1;
}

#rotator .pager #next {
  transform: rotate(-45deg);
}

#rotator .pager #prev {
  transform: rotate(-225deg);
}

/* Clean up the live view */
#live-stream.live #rotator,
#live-stream.live #countdown,
#countdown .timer-container.live h3 {
  display: none;
}

/* Live stream video embed */
#live-stream-content iframe {
  /* make the video 16:9 aspect ratio */
  height: calc(75vw * 0.5625) !important;
  position: relative !important;
  width: 100% !important;
}

/* Text under the live stream / rotator */
.stream-title-container {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.stream-title-container .livestream-date {
  color: rgba(0, 0, 0, 0.4);
  font-weight: light;
}

#stream-container hr {
  border: none;
  border-top: 2px solid var(--user-alternate-color);
  display: inline-block;
  margin: 0 0 10px 0;
  width: 85px;
}

/* Entire right column */
#sidebar {
  background: #F5F5F5;
  padding-bottom: 40px; /* add space for the footer */
}

/* Countdown until live container */
#countdown {
  background: var(--user-alternate-color);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  height: 153px;
  position: relative;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  z-index: 200;
}

#countdown .timer-container {
  padding-top: 10px;
}

#countdown .timer-layout .heading {
  border: none;
  box-shadow: none;
  display: block;
  font-size: 32px;
  font-weight: bold;
  max-width: 100%;
  width: 100%;
}
/* Box displaying the days / hours / etc left */
#countdown .timer-layout span {
  border: 2px solid #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  display: inline-block;
  font-size: 38px;
  font-weight: bold;
  margin: 0 5px;
  max-width: 62px;
  padding-bottom: 5px;
  padding-top: 1px;
  width: 20%;
}
/* Text "days", "hours", etc under the countdown #'s */
#countdown .timer-layout span i {
  display: block;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  margin-top: 5px;
  text-transform: capitalize;
}

/* Chat embed */
#chat iframe {
  width: 100% !important;
}

/* Notes overrides */
#interactive-notes #notes textarea,
#interactive-notes #notes .pnoteText {
  border: none;
  box-sizing: border-box;
  font-size: 14px;
  margin-bottom: 2em;
  outline: none;
  padding: .75em 1em !important;
  width: 100%;
}

#interactive-notes #notes p {
  line-height: 35px;
}

#interactive-notes #notes .blank {
  display: inline;
  line-height: 19px;
  width: auto;
}

#interactive-notes #notes .blank.wrong-answer {
  border-color: #f00;
  color: #f00;
}

#interactive-notes #notes .pnoteText {
  background: #fff;
  height: 100px !important;
}

#interactive-notes #notes .blank {
  border-bottom: 1px solid var(--user-alternate-color);
}

/* Prayers */
#prayers h2 {
  font-size: 20px;
}

#prayers h3 {
  font-size: 18px;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 141px);
}

#prayers h6 {
  font-size: 14px;
}
/* Share your prayer button */
#prayers .btn {
  border: 2px solid var(--user-alternate-color);
  color: var(--user-alternate-color);
}
/* Individual prayer request */
#prayers article {
  background: #fff;
  margin-top: 16px;
  padding: 12px;
  position: relative;
}

#prayers .btn:hover {
  background: #fff;
}
/* Pray for this button */
#prayers .p1-button a {
  background: var(--user-alternate-color);
  color: #fff;
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 10px;
}

#prayers .p1-button a:hover {
  text-decoration: none;
}

#prayers .p1-button a.disabled {
  background: #fff;
  color: var(--user-alternate-color);
  cursor: none;
}

#prayers .p1-meta-count {
  color: var(--user-alternate-color);
  font-size: 16px;
}

#prayers .icon {
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  width: 12px;
}

#prayers .icon-checkmark {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>');
}

#prayers .icon-calendar {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"/></svg>');
}

#prayers .icon-book {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"/></svg>');
}

#prayers .icon-envelop {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/></svg>');
}

#pagination,
.pagination {
  clear: both;
  line-height: 1;
  margin: 1em 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

#pagination a,
.pagination a {
  border: 1px solid var(--user-alternate-color);
  color: var(--user-alternate-color);
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  width: 40px;
}

#pagination a + a,
.pagination a + a {
  border-left: none;
}

#pagination #current,
#pagination .current,
.pagination #current,
.pagination .current {
  background-color: var(--user-alternate-color);
  color: #fff;
}

#pagination #off,
.pagination #off {
  cursor: default;
  opacity: .2;
  position: relative;
  text-indent: -9999px;
}

#pagination #next,
.pagination #next {
  position: relative;
  text-indent: -9999px;
}

#pagination #previous,
.pagination #previous {
  position: relative;
  text-indent: -9999px;
}

#pagination #off:after,
.pagination #off:after,
#pagination #next:after,
.pagination #next:after,
#pagination #previous:after,
.pagination #previous:after {
  content: ".";
  border-bottom: 2px solid var(--user-alternate-color);
  border-right: 2px solid var(--user-alternate-color);
  display: inline-block;
  height: 8px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 8px;
}

#pagination #off:after,
.pagination #off:after {
  border-right: none;
  height: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#pagination #next:after,
.pagination #next:after {
  -webkit-transform: rotate(-45deg) translate(-15%, -85%);
  transform: rotate(-45deg) translate(-15%, -85%);
}

#pagination #previous:after,
.pagination #previous:after {
  -webkit-transform: rotate(-225deg) translate(-15%, 55%);
  transform: rotate(-225deg) translate(-15%, 55%);
}

/* Sidebar footer */
#vendor-tagline {
  background: var(--user-header-color);
  bottom: 0;
  line-height: 0;
  padding: 10px 12px;
  position: fixed;
  right: 0;
  text-align: right;
  width: 100%;
}

/* Expand / collpase sidebar sections */
#sidebar .toggle-collapse {
  border-bottom: 1px solid #e3e3e3;
}

#sidebar .toggle-collapse-header {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
  color: #000;
  cursor: pointer;
  display: flex;
  font-weight: 500;
  justify-content: space-between;
  padding: 15px 12px;
}

#sidebar .toggle-collapse-body {
  overflow: auto;
}

#sidebar .toggle-collapse.collapsed .toggle-collapse-body {
  display: none;
}

#sidebar .toggle-collapse-body > div {
  padding: 12px;
  height: 100%;
}

.chevron-arrow {
  border-bottom: 4px solid var(--user-alternate-color);
  border-right: 4px solid var(--user-alternate-color);
  display: inline-block;
  height: 12px;
  position: relative;
  width: 12px;
}

#sidebar .toggle-collapse .chevron-arrow-down {
  display: none;
  top: -5px;
  transform: rotate(45deg);
}

#sidebar .toggle-collapse .chevron-arrow-up {
  top: 5px;
  transform: rotate(225deg);
}

#sidebar .toggle-collapse.collapsed .chevron-arrow-down {
  display: block;
}

#sidebar .toggle-collapse.collapsed .chevron-arrow-up {
  display: none;
}

/* Larger screens */
@media (min-width: 992px) {
  /* Reduce space between navigation links */
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Ensure the chat embed is as tall as its toggle-collapse-body */
  #chat iframe {
    height: 100% !important;
  }

  #sidebar {
    border-left: 1px solid #e4e4e4;
  }

  /* For 4 items */
  /* Adjust the height of toggle-collapse-body based on the number of siblings open */
  #sidebar[data-count="4"][data-expanded-count="1"] .toggle-collapse-body {
    height: calc(100vh - 323px - 153px);
  }

  #sidebar[data-count="4"][data-expanded-count="2"] .toggle-collapse-body {
    height: calc((100vh - 323px - 153px) / 2);
  }

  #sidebar[data-count="4"][data-expanded-count="3"] .toggle-collapse-body {
    height: calc((100vh - 323px - 153px) / 3);
  }

  #sidebar[data-count="4"][data-expanded-count="4"] .toggle-collapse-body {
    height: calc((100vh - 323px - 153px) / 4);
  }

  /* Account for the countdown not being present on live pages */
  .live #sidebar[data-count="4"][data-expanded-count="1"] .toggle-collapse-body {
    height: calc(100vh - 323px);
  }

  .live #sidebar[data-count="4"][data-expanded-count="2"] .toggle-collapse-body {
    height: calc((100vh - 323px) / 2);
  }

  .live #sidebar[data-count="4"][data-expanded-count="3"] .toggle-collapse-body {
    height: calc((100vh - 323px) / 3);
  }

  .live #sidebar[data-count="4"][data-expanded-count="4"] .toggle-collapse-body {
    height: calc((100vh - 323px) / 4);
  }

  /* For 3 items */
  /* Adjust the height of toggle-collapse-body based on the number of siblings open */
  #sidebar[data-count="3"][data-expanded-count="1"] .toggle-collapse-body {
    height: calc(100vh - 267px - 153px);
  }

  #sidebar[data-count="3"][data-expanded-count="2"] .toggle-collapse-body {
    height: calc((100vh - 267px - 153px) / 2);
  }

  #sidebar[data-count="3"][data-expanded-count="3"] .toggle-collapse-body {
    height: calc((100vh - 267px - 153px) / 3);
  }

  #sidebar[data-count="3"][data-expanded-count="4"] .toggle-collapse-body {
    height: calc((100vh - 267px - 153px) / 4);
  }

  /* Account for the countdown not being present on live pages */
  .live #sidebar[data-count="3"][data-expanded-count="1"] .toggle-collapse-body {
    height: calc(100vh - 267px);
  }

  .live #sidebar[data-count="3"][data-expanded-count="2"] .toggle-collapse-body {
    height: calc((100vh - 267px) / 2);
  }

  .live #sidebar[data-count="3"][data-expanded-count="3"] .toggle-collapse-body {
    height: calc((100vh - 267px) / 3);
  }

  .live #sidebar[data-count="3"][data-expanded-count="4"] .toggle-collapse-body {
    height: calc((100vh - 267px) / 4);
  }

  /* For 2 items */
  /* Adjust the height of toggle-collapse-body based on the number of siblings open */
  #sidebar[data-count="2"][data-expanded-count="1"] .toggle-collapse-body {
    height: calc(100vh - 211px - 153px);
  }

  #sidebar[data-count="2"][data-expanded-count="2"] .toggle-collapse-body {
    height: calc((100vh - 211px - 153px) / 2);
  }

  #sidebar[data-count="2"][data-expanded-count="3"] .toggle-collapse-body {
    height: calc((100vh - 211px - 153px) / 3);
  }

  #sidebar[data-count="2"][data-expanded-count="4"] .toggle-collapse-body {
    height: calc((100vh - 211px - 153px) / 4);
  }

  /* Account for the countdown not being present on live pages */
  .live #sidebar[data-count="2"][data-expanded-count="1"] .toggle-collapse-body {
    height: calc(100vh - 211px);
  }

  .live #sidebar[data-count="2"][data-expanded-count="2"] .toggle-collapse-body {
    height: calc((100vh - 211px) / 2);
  }

  .live #sidebar[data-count="2"][data-expanded-count="3"] .toggle-collapse-body {
    height: calc((100vh - 211px) / 3);
  }

  .live #sidebar[data-count="2"][data-expanded-count="4"] .toggle-collapse-body {
    height: calc((100vh - 211px) / 4);
  }

  /* For 1 item */
  /* Adjust the height of toggle-collapse-body based on the number of siblings open */
  #sidebar[data-count="1"][data-expanded-count="1"] .toggle-collapse-body {
    height: calc(100vh - 176px - 155px);
  }

  #sidebar[data-count="1"][data-expanded-count="2"] .toggle-collapse-body {
    height: calc((100vh - 176px - 155px) / 2);
  }

  #sidebar[data-count="1"][data-expanded-count="3"] .toggle-collapse-body {
    height: calc((100vh - 176px - 155px) / 3);
  }

  #sidebar[data-count="1"][data-expanded-count="4"] .toggle-collapse-body {
    height: calc((100vh - 176px - 155px) / 4);
  }

  /* Account for the countdown not being present on live pages */
  .live #sidebar[data-count="1"][data-expanded-count="1"] .toggle-collapse-body {
    height: calc(100vh - 155px);
  }

  .live #sidebar[data-count="1"][data-expanded-count="2"] .toggle-collapse-body {
    height: calc((100vh - 155px) / 2);
  }

  .live #sidebar[data-count="1"][data-expanded-count="3"] .toggle-collapse-body {
    height: calc((100vh - 155px) / 3);
  }

  .live #sidebar[data-count="1"][data-expanded-count="4"] .toggle-collapse-body {
    height: calc((100vh - 155px) / 4);
  }
}

/* Smaller screens */
@media (max-width: 991.98px) {
  .container-fluid > .row {
    height: auto;
  }

  #rotator ul {
    height: calc(100vw * 0.5625) !important;
  }

  #rotator,
  #rotator ul {
    margin: 0;
  }

  #rotator .slide,
  #rotator img {
    width: 100vw;
  }

  #sidebar {
    height: 0;
    /* Add spacing to account for absolutely positioned toggle-collapse-header */
    margin-bottom: 100px;
    /* Remove the position: relative; added by bootstrap so we can move the counter above livestream-container */
    position: static;
  }

  /* Make toggle-collapse all display in the same place, under the live stream */
  #sidebar .toggle-collapse {
    position: absolute;
    width: 100%;
  }

  /* Display toggle-collapse-headers horizontally across the page */
  #sidebar .toggle-collapse-header {
    background: #3c3e44;
    border-bottom: 1px solid #3c3e44;
    border-left: 1px solid #3c3e44;
    border-top: 1px solid #3c3e44;
    color: #fff;
    display: block;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 10;
  }

  #sidebar[data-count="4"] .toggle-collapse-header {
    width: 25%;
  }

  #sidebar[data-count="3"] .toggle-collapse-header {
    width: 33.33%;
  }

  #sidebar[data-count="2"] .toggle-collapse-header {
    width: 50%;
  }

  #sidebar[data-count="1"] .toggle-collapse-header {
    width: 100%;
  }

  /* Instead of a chevron-arrow changing, change the background and text color for expanded */
  #sidebar .toggle-collapse-header .chevron-arrow {
    display: none !important;
  }

  #sidebar .toggle-collapse.collapsed .toggle-collapse-header {
    background: #fff;
    border-color: #e4e4e4;
    color: #000;
  }

  /* Add spacing to account for toggle-collapse-header and vendor-tagline */
  #sidebar .toggle-collapse-body {
    padding-bottom: 40px;
    padding-top: 60px;
  }

  /* Position horizontally across the page */
  #sidebar div:nth-child(2) .toggle-collapse-header {
    border-left: none;
    left: 0%;
  }

  /* For 4 items */
  #sidebar[data-count="4"] div:nth-child(3) .toggle-collapse-header {
    left: 25%;
  }

  #sidebar[data-count="4"] div:nth-child(4) .toggle-collapse-header {
    left: 50%;
  }

  #sidebar[data-count="4"] div:nth-child(5) .toggle-collapse-header {
    left: 75%;
  }

  /* For 3 items */
  #sidebar[data-count="3"] div:nth-child(3) .toggle-collapse-header {
    left: 33.33%;
  }

  #sidebar[data-count="3"] div:nth-child(4) .toggle-collapse-header {
    left: 66.66%;
  }

  /* For 2 items */
  #sidebar[data-count="2"] div:nth-child(3) .toggle-collapse-header {
    left: 50%;
  }

  /* Make the video 16:9 aspect ratio, now displaying 100% wide */
  #live-stream-content iframe {
    height: calc(100vw * 0.5625) !important;
  }

  /* Move title to sermon-details */
  .stream-title {
    display: none;
  }

  /* Move countdown above the #stream-container */
  #countdown {
    position: absolute;
    top: 0;
    width: 100%;
  }

  /* Add space for the now absolutely positioned #countdown */
  .container-fluid > .row {
    padding-top: 153px;
  }
  /* Do Not Add space when live, because there won't be a countdown */
  .live .container-fluid > .row {
    padding-top: 0;
  }

  /* Smallest screens */
  @media (max-width: 399.98px) {
    /* Make the toggle-collapse-headers font size scale with the browser width */
    #sidebar .toggle-collapse-header {
      font-size: 4vw;
    }
  }
}