body {
    margin: 0px;
    user-select: none !important;
    font-family: sans-serif;
    background-color: black;
}

select{

background:rgb(107, 107, 107);
color:white;
}

option{
  color:white;
}

.showcase {
    position: absolute;
    background-color: black;
    top:0px;
    left:0px;
    display: block;
    height: 91vh;
    width: 98vw;
    padding: 0vh 1vw;
    z-index: 0;
    opacity:0;
    transition: height .25s ease, width .25s ease, padding .25s ease, opacity 1s linear;
}

div#showcase-video{
  touch-action:pan-x pan-y;
}

#showcase-iframe.loaded{
    height:100vh;
    width:100vw;
    padding:0vh 0vw;
}

.showcase.active{
    opacity:1;
    z-index: 1;
}
div.divider{
    height: 6vh;
    border-left: 2px solid #3F4443;
    width: 0px;
    box-shadow: 1px 2px 4px #3F4443
}
#navBar {
    position: fixed;
    z-index: 1000;
    bottom: -10rem;
    width: 100vw;
    height: 5rem;
    background-color: #008EAA;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: bottom .5s;
    touch-action: pan-x pan-y;
}

#navBar.deployed {
    bottom: 0rem;
}

#navBar .logos {
  display: flex;
  width: 250px;
  justify-content: space-evenly;
}

#navBar .logos img
{
  height: 4rem;
  padding-right: .625rem;
}

.navButton {
    background-color: #6b6b6b;
    color: white;
    height: 3rem;
    width: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: none;
    box-shadow: 1px 1px 2px #6b6b6b;
}

.dockNavs {
    width: 375px;
    color:white;
    display: flex;
    justify-content: space-around;
    position: absolute;
    right: 0px;
    opacity: 1;
    transition: opacity 1s;
}



#stopTicker, #chaptercard{
    opacity: 1;
    transition: opacity 1s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 175px;
    white-space: break-spaces;
    color: white;
    width: 80%;
    font-size: 2rem;
}

#stopTicker.hide{
  opacity: 0;
}
.dockNavs.hide {
    display: none;
}

#icon-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width:calc(100vw - 375px);
  }

  .icon {
    width: 75px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin:0px 25px;
    transition: transform 1s ease, box-shadow 0.3s ease,margin 1s ease,border 1s ease;
    transform-origin: center;
    overflow: hidden;
  }

  .icon img {
    max-width:75px;
    max-height:75px;
   }

  .icon.selected {
    transform: scale(2) translateY(-20%);
    filter: drop-shadow(2px 4px 6px white);
    margin:4rem;
  }
  .icon.video{
    border:5px solid black;
    background-color: #5C068C;
    height: 50px;
    
  }
  .icon.video.selected {
    border:2px solid black;

  }
  .icon.video::before {
    position: absolute;
    color:white;
    content: "\f101";
    font-size: .5rem;
    padding: 0.125rem 0rem;
    transition: opacity 0.3s ease;
    font-family: videoJS;
    background: #FE5000;
    border: 1px solid white;
    border-radius: 3px;
    width: 20px;
    text-align: center;
    z-index: 100;
  }
  .icon.video::after {
    position: absolute;
    color:white;
  content: url(../Pictograms-nps-accessibility-audio_description.svg);
    font-size: .75rem;
    /* padding: 0.125rem 0rem; */
    transform: translate(75%, 66%);
    transition: opacity 0.3s ease;
    font-family: videoJS;
    /* background: #FE5000; */
    filter: drop-shadow(1px 1px 2px white);
    border-radius: 3px;
    width: 28px;
    text-align: center;
    z-index: 50;
  }
  
  .icon.video img{
    z-index: 50;
    height: 55px;
  }

  .vjs-picture-in-picture-control, .vjs-fullscreen-control, .vjs-volume-panel {
    display:none !important;
  }
  button.vjs-play-control.vjs-control.vjs-button span.vjs-icon-placeholder{
    font-size: 3rem;
    transform: translateY(-4.5rem);
  }

  button.vjs-play-control.vjs-control.vjs-button {
    transform: translateY(-2rem);
    height: 6rem;
    width: 6rem;
    background: #fe5000bf;
    border: 2px solid white;
  }
  .video-js .vjs-play-progress:before {
    display: none;
  }
  .video-js .vjs-progress-holder {
    height: 1.5rem;
  }
  .video-js .chapter{
    position: absolute;
    height: 1.5rem;
    width: 0.25rem;
    background: #FE5000;
  }
  .video-js .vjs-big-play-button{
    background-color: #FE5000 !important;
  }
  .video-js .vjs-control-bar {
    opacity: 1 !important;
    bottom:5rem;
  }