container {
    position: relative;
    -webkit-tap-highlight-color: rgba(255,255,255,0)
}

container,video {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    outline: none
}

video:focus {
    outline: none
}

:root {
    --barColor:#de698c;--trackColor:#4c4c4c}

.chimee-flex-component svg:hover g,.chimee-flex-component svg g {
    fill: #fff;
    stroke: #fff
}

chimee-clarity-list,chimee-control-state-pause,chimee-control-state-play,chimee-screen-full,chimee-screen-small {
    display: none
}

chimee-control.full chimee-screen-full,chimee-control.pause chimee-control-state-pause,chimee-control.play chimee-control-state-play,chimee-control.small chimee-screen-small {
    display: inline-block;
    width: 1.4em;
    height: 100%
}

chimee-control {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 4em;
    font-size: 10px;
    user-select: none;
    overflow: hidden;
    font-family: Roboto,Arial,Helvetica,sans-serif;
    transition: visibility .5s ease
}

chimee-control:focus {
    outline: none
}

chimee-control-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4em;
    line-height: 4em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    background: rgba(0,0,0,.5);
    transition: bottom .5s ease;
    pointer-events: auto
}

.chimee-flex-component {
    order: 1;
    flex-grow: 0;
    height: 4em;
    cursor: pointer
}

.chimee-flex-component svg {
    vertical-align: middle;
    width: 1.8em;
    height: 1.8em
}

chimee-control-state.chimee-flex-component {
    flex-basis: 3em;
    text-align: right;
    margin-right: 1em
}

chimee-control-state .left,chimee-control-state .right {
    transition: d .2s ease-in-out
}

chimee-current-time.chimee-flex-component,chimee-total-time.chimee-flex-component {
    color: #fff;
    font-size: 1.5em;
    font-weight: 400;
    text-align: center;
    white-space: nowrap
}

chimee-current-time+chimee-total-time:before {
    content: "/";
    padding: 4px
}

chimee-progressbar.chimee-flex-component {
    position: relative;
    flex-grow: 1;
    margin: 0 1.5em;
    pointer-events: none
}

.chimee-progressbar-line {
    position: absolute;
    top: 1.8em;
    left: 0;
    display: inline-block;
    height: 8px;
    border-radius: 4px
}

chimee-progressbar-bg {
    width: 100%;
    background: var(--trackColor)
}

chimee-progressbar-buffer {
    width: 0;
    background: #6f6f6f
}

chimee-progressbar-all {
    background: var(--barColor)
}

chimee-progressbar-ball {
    content: "";
    position: absolute;
    right: -1em;
    top: -.4em;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    border-radius: 1.4em;
    background: #fff;
    pointer-events: none
}

chimee-screen.chimee-flex-component {
    flex-basis: 3em;
    text-align: left;
    margin-left: 1em
}

:root {
    --barColor:#de698c;--trackColor:#4c4c4c}

video::-webkit-media-controls-start-playback-button {
    display: none
}

chimee-state svg {
    width: 100%;
    height: 100%
}

@keyframes a {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

chimee-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 24px
}

chimee-state-error,chimee-state-loading,chimee-state-pause,chimee-state-play {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

chimee-state-pause,chimee-state-play {
    width: 2em;
    height: 2em;
    box-sizing: initial
}

chimee-state-loading {
    width: 2em;
    height: 2em;
    transform: none;
    margin: -1em;
    animation: .9s a linear infinite
}

chimee-state-error {
    display: none;
    font-size: 16px;
    z-index: 1;
    color: #ffcf00;
    text-shadow: 0 0 3px red;
    font-weight: 100
}

chimee-state.error chimee-state-error,chimee-state.loading chimee-state-loading,chimee-state.play chimee-state-play {
    display: inline-block
}
