/* Container */
/*************/
#animation-container {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             1em;
}

#date-accessible-instructions {
    top:       50%;
    left:      50%;
    transform: translate(-50%,-50%);
}

@media (min-width: 1200px) {
    .animation-select-form {
        width: calc(100% - 1em - 650px);
    }

    #player {
        width: 650px;
    }

    #slides {
        min-height: 475px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .animation-select-form {
        width: calc(100% - 1em - 516px);
    }

    #player {
        width: 516px;
    }
}

@media (max-width: 991px) {
    .animation-select-form,
    #player {
        width: 100%;
        max-width: 650px;
    }
}

@media (min-width: 576px) and (max-width: 1199px) {
    #slides {
        min-height: 350px;
    }
}

@media (max-width: 575px) {
    #slides {
        min-height: 250px;
    }
}

.input-date {
    width: calc(100% - 0.5em);
}
/*************/
/* Container */

/* Player */
/**********/
#slides-container {
    position: relative;
    width:    100%;
}

.loading:after {
  display:   inline-block;
  position:  absolute;
  animation: animEllipsis steps(1,end) 1s infinite;
  content:   '';
}

@keyframes animEllipsis {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

#speedOverlay,
#togglePlayOverlay {
    display:          none;
    position:         absolute;
    width:            100%;
    height:           100%;
    z-index:          1001;
    background-color: rgba(125, 125, 125, 0.2);
    transition:       background-color 0.5s ease;
}

#viewSlide {
    z-index:  1002;
    display:  none;
    position: absolute;
    width:    100%;
}

#viewSlide a {
    float:  right;
    margin: 0.25em;
}

#slides {
    position: relative;
    width:    100%;
}

.slide {
    position: absolute;
    width:    100%;
    height:   100%;
}

.slide {
    display:    block;
    visibility: hidden;
    max-width:  100%;
}

.slide img {
    max-width: 100%;
    width:     auto;
    height:    auto;
    position:  absolute;
    bottom:    0;
}

#slide-controls {
    display:     flex;
    align-items: baseline;
    position:    relative;
}

#play-pause {
    flex:      0 1 auto;
    font-size: 0; /* remove any white space from between controls */
}

.control {
    text-decoration: none;
    padding:         0.2em;
    border-radius:   15%;
    font-weight:     bold;
    font-size:       18px;
    transition:      0.6s ease;
    color:           #8d9297;
}
.control:hover { color: #47525e; }

#play-pause .control {
    display:    inline-block;
    text-align: center;
    width:      25px;
}

#play-pause .control.disabled,
#play-pause .control.disabled:hover {
    color:  #c6cace;
    cursor: default !important;
}

.overlay .control {
    position:         absolute;
    top:              50%;
    left:             50%;
    transform:        translate(-50%,-50%);
    font-size:        52px !important;
    background-color: rgba(255,255,255,0.5);
    padding:          .33em 0.5em !important;
}
.overlay .control:hover {
    background-color: rgba(255,255,255,0.75);
}

#playOverlay, #pauseOverlay { display: none; }

#slider-container {
    flex:     1 0 auto;
    position: relative;
}

#progress-bar, #current, #loaded {
    min-height: 1.1em;
}
#progress-bar {
    position: absolute;
    width: calc(100% - 1em);
    top: calc(50% - 38px); /* room for player controls at bottom */
    transform: translateY(50%);
    border-radius: 8px;
    background: repeating-linear-gradient(-45deg, #47525e, #47525e 25%, #3d4551 25%, #3d4551 50%, #47525e 50%) top left fixed;
    background-size: 30px 30px;
}
#current {
    border-radius: 8px 0 0 8px;
    width: 0;
    background: repeating-linear-gradient(-45deg, #2491ff, #2491ff 25%, #0076d6 25%, #0076d6 50%, #2491ff 50%) top left fixed;
    background-size: 30px 30px;
}

#loaderOverlay {
    -webkit-text-stroke: 0;
}
#loaded {
    position:    absolute;
    width:       100%;
    font-size:   14px;
    white-space: nowrap;
}
/**********/
/* Player */

/* Slider */
/**********/
.preview {
    display:  none;
    position: absolute;
    z-index:  1003;
}

#preview-content {
    background-color: rgba(220, 222, 224, 0.8);
    font-size:        12px;
    border-radius:    3px;
    padding:          0 10px;
    white-space:      nowrap;
    line-height:      1.5em;
    bottom:           calc(1.5em + 10px); /* add 10px for callout */
}

#preview-callout {
    width:               0;
    height:              0;
    border-style:        solid;
    border-width:        10px;
    border-color:        transparent;
    border-bottom-width: 0;
    border-top-color:    rgba(220, 222, 224, 0.8);
    top:                 1px;
}

#slider {
    cursor:         pointer;
    width:          100%;
    vertical-align: middle;
    padding:        0;
}

#slider:active {
    cursor: grabbing;
}
/**********/
/* Slider */