body {
    margin: 0;
}

#labelContainer {
    position: fixed;
    bottom: 5%;left:0; right: 0;
    padding: 10px 20px ;
    font-family:'Open Sans',sans-serif;
    font-size: 1.1em;
    text-align: right;
    text-transform: none;
}

#labelContainer.selected {
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
}

#labelContainer.empty {
    opacity: 0;
}

.label {
    font-family: 'Open Sans',sans-serif;
    font-size: 1em;
    padding: 2px;
    background: rgba(0,0,0,0.75);
    margin: -1px;
}

#optionContainer {
    position: fixed;
    top: 0;left:0; right: 0;
    padding: 10px 20px ;
    max-width: 75%;
}

#optionContainer select {
    appearance: none;
    width: 100%;
    padding: 0.175em 6em 0.175em 1em;
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 0.25em;
    color: #000;
    cursor: pointer;
    font-family:'Open Sans',sans-serif;
    font-size: 1.1em;
    text-align: left;
}

#optionContainer::before,
#optionContainer::after {
  --size: 0.3rem;
  position: absolute;
  content: "";
  right: 2rem;
  pointer-events: none;
}

#optionContainer::before {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid black;
    top: 40%;
}
  
#optionContainer::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid black;
    top: 55%;
}


@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}



/*
 *  THEME DEFINITIONS  
 */

#viewer {   color: #fff; font-weight: bold; }
#viewer > #labelContainer {  background: rgba(5, 5, 5, 0.5);         }


/* --- THEME: LIGHT ---------- */
#viewer.light {     color: rgb(27, 27, 27);       }
#viewer.light > #labelContainer {    background: rgba(255,255,255,0.5);     }


/* --- THEME: DARK ---------- */
#viewer.dark { color: #454545;        }
#viewer.dark > #labelContainer { background: rgba(255,255,255,0.5);         }


/* --- THEME: RED ---------- */
#viewer.red {    color: #fff;   }
#viewer.red > #labelContainer {    background: rgba(82, 6, 6, 0.5);         }


/* --- THEME: LIGHT GRAY ---------- */
#viewer.lt-gray {      }
#viewer.lt-gray > #labelContainer {         }


/* --- THEME: DARK GRAY ---------- */
#viewer.dk-gray {     }
#viewer.dk-gray > #labelContainer {       }


/* --- THEME: ABSTRACT ---------- */
#viewer.abstract {
    background: url(../models/_images/abstract_bg_light.jpg) no-repeat center center;
    background-size: cover;
    color: #e4002b;
}
#viewer.abstract > #labelContainer {  background: rgba(255,255,255,0.5);      }


/*  Interaction Overlays  */



/* Min/Max Screen Button */
#fullscreen {
    position: fixed;
    top: 4%; right: 4%;
    width: 32px; height: 32px;
}
#fullscreen svg {
    width: 100%;
    height:auto;
}
.corner {
    fill:none;
    stroke-miterlimit:0;
    stroke-linejoin: round;
}

/* Play Button */

button#actionToggle {
    position: fixed;
    bottom: 0; left: 5px;
    width: 10px;
    height: 20px;
    margin: 10px;
    background:transparent;
    border-color: transparent;
    transition: 100ms all ease;
    will-change: border-width;
    cursor: pointer;
}

button#actionToggle.play {    
    border-style: solid;
    box-sizing: border-box;
    border-width: 10px 0px 10px 20px;
    border-color: transparent transparent transparent white;
}

button#actionToggle.pause {
    border-style: double;
    border-width: 0px 0px 0px 24px;
    border-color: white;
}

/* Action Slider */

input#actionSlide {
    position: fixed;
    bottom: 0;left:35px; right: 0;
    margin: 10px 20px ;
    max-width: 100%;
}