.passwordBlock h1, .passwordBlock h2, .passwordBlock h3, .passwordBlock h4, .passwordBlock h5, .passwordBlock h6, .passwordBlock p {
  color: grey; }

html {
  background-color: #122; }

body {
  color: white;
  background-color: #122; }
  body .page {
    background: #122;
    color: white; }
    body .page .main {
      background: #122; }

header, .header {
  background: rgba(0, 0, 0, 0.7);
  height: 50px; }
  header .LivestreamMenueIcon:hover, .header .LivestreamMenueIcon:hover {
    color: #19af8c; }
  header nav, .header nav {
    background: rgba(0, 0, 0, 0.7); }
    header nav ul li, .header nav ul li {
      background: black; }
      header nav ul li a, .header nav ul li a {
        color: white; }
      header nav ul li:hover, .header nav ul li:hover {
        background: #19af8c;
        cursor: pointer; }
        header nav ul li:hover a, .header nav ul li:hover a {
          color: white; }
  header .side-nav .nav-hider, .header .side-nav .nav-hider {
    display: flex;
    flex-direction: column;
    align-items: center; }
    header .side-nav .nav-hider .burger, .header .side-nav .nav-hider .burger {
      width: 50px;
      position: relative;
      transition: background 400ms;
      /*Later I want to add gradient border: https: //css-tricks.com/examples/GradientBorder/*/ }
      header .side-nav .nav-hider .burger:hover, .header .side-nav .nav-hider .burger:hover {
        cursor: pointer; }
        header .side-nav .nav-hider .burger:hover .burger-span, .header .side-nav .nav-hider .burger:hover .burger-span {
          background: #19af8c;
          /*&#top-bun {
                            top: 17px;
                        }

                        &#bottom-bun {
                            top: 29px;
                        }*/ }
  header .side-nav nav, .header .side-nav nav {
    background: rgba(0, 0, 0, 0.7); }
    header .side-nav nav ul li, .header .side-nav nav ul li {
      background: black; }
      header .side-nav nav ul li a, .header .side-nav nav ul li a {
        color: white; }
      header .side-nav nav ul li:hover, .header .side-nav nav ul li:hover {
        background: #19af8c;
        cursor: pointer; }
        header .side-nav nav ul li:hover a, .header .side-nav nav ul li:hover a {
          color: white; }
    header .side-nav nav ul #nav-archive #TL2archiveMenu, .header .side-nav nav ul #nav-archive #TL2archiveMenu {
      transition: all 500ms; }
      header .side-nav nav ul #nav-archive #TL2archiveMenu li, .header .side-nav nav ul #nav-archive #TL2archiveMenu li {
        background: black; }
        header .side-nav nav ul #nav-archive #TL2archiveMenu li a, .header .side-nav nav ul #nav-archive #TL2archiveMenu li a {
          color: white; }
        header .side-nav nav ul #nav-archive #TL2archiveMenu li:hover, .header .side-nav nav ul #nav-archive #TL2archiveMenu li:hover {
          background: #19af8c; }
          header .side-nav nav ul #nav-archive #TL2archiveMenu li:hover a, .header .side-nav nav ul #nav-archive #TL2archiveMenu li:hover a {
            color: white; }

.main.overlay #main-image1 .xBar {
  border: 5px solid rgba(25, 175, 140, 0.75);
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5); }

.spanBar {
  background-color: white;
  width: 20px;
  height: 3px; }

.timeline-control-bar {
  background: rgba(0, 0, 0, 0.7); }
  .timeline-control-bar .controls .image-controls {
    background: rgba(0, 0, 0, 0.7); }
    .timeline-control-bar .controls .image-controls.highlight {
      background-color: black; }
    .timeline-control-bar .controls .image-controls.hidden {
      background-color: transparent; }
      .timeline-control-bar .controls .image-controls.hidden .date .pad5 {
        color: white; }
    .timeline-control-bar .controls .image-controls .calendar {
      color: white; }
      .timeline-control-bar .controls .image-controls .calendar ul li:hover {
        color: #19af8c; }
      .timeline-control-bar .controls .image-controls .calendar .panelTL2leftcontrols #MainContent_DDLtime {
        background: black;
        color: white; }
      .timeline-control-bar .controls .image-controls .calendar .panelTL2leftcontrols .panelTL2leftcontrolsTIME #MainContent_UpdatePanelTimeClockDDM button i,
      .timeline-control-bar .controls .image-controls .calendar .panelTL2leftcontrols .panelTL2leftcontrolsTIMELarger button i {
        color: white; }
      .timeline-control-bar .controls .image-controls .calendar .panelTL2leftcontrols .panelTL2leftcontrolsTIME #MainContent_UpdatePanelTimeClockDDM button:hover i,
      .timeline-control-bar .controls .image-controls .calendar .panelTL2leftcontrols .panelTL2leftcontrolsTIMELarger button:hover i {
        color: #19af8c; }
      .timeline-control-bar .controls .image-controls .calendar .panelTL2righttcontrols #MainContent_DDLtime2 {
        background: black;
        color: white; }
      .timeline-control-bar .controls .image-controls .calendar .panelTL2righttcontrols .panelTL2rightcontrolsTIME #MainContent_UpdatePanelTimeClockDDM2 button i,
      .timeline-control-bar .controls .image-controls .calendar .panelTL2righttcontrols .panelTL2rightcontrolsTIMELarger button i {
        color: white; }
      .timeline-control-bar .controls .image-controls .calendar .panelTL2righttcontrols .panelTL2rightcontrolsTIME #MainContent_UpdatePanelTimeClockDDM2 button:hover i,
      .timeline-control-bar .controls .image-controls .calendar .panelTL2righttcontrols .panelTL2rightcontrolsTIMELarger button:hover i {
        color: #19af8c; }
  .timeline-control-bar .controls.left-cogs-menu .image-controls .icon-date p {
    margin: 0 0 0 7px; }
  .timeline-control-bar .controls.left-cogs-menu .image-controls .calendar {
    left: 0px; }
  .timeline-control-bar .controls.right-cogs-menu .image-controls {
    right: 0px; }
    .timeline-control-bar .controls.right-cogs-menu .image-controls .icon-date {
      flex-direction: row-reverse; }
      .timeline-control-bar .controls.right-cogs-menu .image-controls .icon-date p {
        margin: 0 7px 0 0; }
    .timeline-control-bar .controls.right-cogs-menu .image-controls .calendar {
      right: 0px; }
  .timeline-control-bar .controls.reset-theme .reset a#reset-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    border: 1px solid white; }
    .timeline-control-bar .controls.reset-theme .reset a#reset-button:hover {
      color: black;
      background: white; }
  .timeline-control-bar .center-zoom-bar {
    display: flex;
    flex-direction: row;
    align-items: center; }
    .timeline-control-bar .center-zoom-bar .zoom-control:hover .spanBar {
      background-color: #19af8c;
      box-shadow: none; }

footer,
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7); }

#day-theme {
  display: block; }

#night-theme {
  display: none; }

* {
  transition: background-color 1000ms; }
  * .highlight {
    background-color: black; }

/*Video Clips Page*/
.video-clip-card {
  background: #011;
  box-shadow: none;
  border: 1px solid #19af8c; }

/*Video Clips Viewer Page*/
.video-clip-viewer-container {
  background: #011;
  box-shadow: none;
  border: 1px solid #19af8c; }

/*Vivo Home Cards */
.vivo-home-card {
  background-color: transparent;
  box-shadow: none;
  border: 1px solid #19af8c; }


/* Video Clips Page */

.video-clips-panel{
  background: black;
}

.video-clips-panel-sidebar,
#MainContent_NewVideoClipsSideBar {
  background: black;
    border-right: 1px solid #19af8c;
    
}

.video-clips-panel-sidebar,
#MainContent_NewVideoClipsSideBar h3 {
    color: white;
}

.video-clips-panel-sidebar a{
  color: white;
}
.video-clips-panel-sidebar a:hover{
  background-color: #19af8c;
}
.video-clips-panel-container{
  background: black;
  
}
.view-all-link-card{
    background: black;
}
.video-clips-panel h1,
.video-clips-panel h2,
.video-clips-panel h3,
.video-clips-panel h4,
.video-clips-panel h5,
.video-clips-panel h6{
  color: white;
}

.video-clip-card .video-clip-description{
    background: black;
    color: white;
}

.page .main{
    background: black !important;
}

#MainContent_NewVideoClipsViewerSideBar a{
    color: white;
}