.media-toolbar {
    align-items: center;
    cursor: default;
    direction: ltr;
    display: flex;
    flex-wrap: wrap
}

:-webkit-full-screen .media-toolbar {
    background-color: rgba(0,0,0,.75);
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: .8;
    position: absolute;
    right: 0
}

:-moz-full-screen .media-toolbar {
    background-color: rgba(0,0,0,.75);
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: .8;
    position: absolute;
    right: 0
}

:-ms-fullscreen .media-toolbar {
    background-color: rgba(0,0,0,.75);
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: .8;
    position: absolute;
    right: 0
}

:fullscreen .media-toolbar {
    background-color: rgba(0,0,0,.75);
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: .8;
    position: absolute;
    right: 0
}

.media-hidden {
    display: none
}

.media-media {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 100vh;
    max-width: 100%;
    position: relative
}

.media-control, .media-slider {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    background-color: transparent;
    border-style: none;
    color: inherit;
    font: inherit;
    margin: 0;
    overflow: visible;
    padding: 0;
    outline: none;
}

.media-slider {
    height: 2.5em;
    padding: .625em .5em
}

.media-slider:focus {
    background-color: rgba(153,153,255,.25)
}

.media-time {
    flex-grow: 1;
    flex-shrink: 1
}

.media-volume {
    flex-basis: 5em
}

.media-range {
    background-color: #ccc;
    display: block;
    font-size: 75%;
    height: 1em;
    width: 100%
}

.media-meter {
    background-color: #f0ad4e;
    display: block;
    height: 100%;
    overflow: hidden;
    width: 100%
}

.media-text {
    font-size: 75%;
    padding-left: .5em;
    padding-right: .5em;
    width: 2.5em
}

.media-control {
    font-size: 75%;
    line-height: 1;
    padding: 1.16667em;
    text-decoration: none;
    outline: none;
}

.media-control:focus, .media-control:hover {
    background-color: rgba(252,155,20,1)
}

.media-symbol {
    display: block;
    fill: currentColor;
    height: 1em;
    width: 1em
}

.media-symbol[aria-hidden=true] {
    display: none
}

.media-player[disabled] {
   -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}