.teal-video-wrap {
    background: #000;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%; /*16:9*/
    position: relative;
    width: 100%;
}

.teal-video-wrap.tealplayer-fullscreen {
    align-items: center;
    background: #000;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0;
    width: 100%;
}

.teal-video-wrap video {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.tealplayer-ad-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.teal-video-wrap.teal-ad-playback video,
.teal-video-wrap.teal-ad-playback .tealplayer-play-toggle {
    z-index: -1;
}
.teal-video-wrap.teal-ad-playback video[poster] {
    display: none;
}

.teal-video-wrap video::-webkit-media-text-track-container { 
    bottom: 1.0em; 
    transform: translateY(-.85em) !important;
    font-size: 15px !important;
}
 
.teal-video-wrap.tealplayer-fullscreen .tealplayer-ad-container {
    height: 0;
    padding-bottom: 56.25%;
    position: static;
}


/* controls */
.tealplayer-control-wrap {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.80);
    bottom: 0;
    color: #fff;
    font-family: 'Unify Sans', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    height: 36px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 3;
}

.tealplayer-control-wrap.tealplayer-minimal {
    bottom: -36px;
}

.tealplayer-control-wrap.tealplayer-hidden {
    bottom: -46px;
}

.tealplayer-left-controls,
.tealplayer-right-controls {
    display: flex;
    flex: auto;
    flex-direction: row;
}

.tealplayer-left-controls > .tealplayer-btn:first-child,
.tealplayer-right-controls > .tealplayer-btn:first-child {
    margin-left: 15px;
}

.tealplayer-right-controls {
    justify-content: flex-end;
}

.tealplayer-btn,
.tealplayer-btn-icon {
    cursor: pointer;
    fill: #fff;
    height: 24px;
    position: absolute;
    width: 24px;
}

.tealplayer-btn:hover,
.tealplayer-btn-icon:hover {
    fill: #e0e0e0;
}

.tealplayer-btn,
.tealplayer-time,
.tealplayer-ad-skip,
.tealplayer-volume-slider {
    height: 24px;
    line-height: 24px;
    margin-right: 15px;
    position: relative;
    width: 24px;
}

.tealplayer-play-toggle {
    align-items: center;
    height: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    z-index: 2;
}


/* big play btn */
.tealplayer-big-play-btn {
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid #fff;
    border-radius: 80px;
    cursor: pointer;
    height: 80px;
    width: 80px;
}

.tealplayer-big-play-btn .tealplayer-btn-icon {
    transform: scale(3.33);
    transform-origin: -1px 0px;
}


/* volume */
.tealplayer-volume-wrap {
    display: flex;
}

.tealplayer-volume-container {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    height: 6px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.tealplayer-volume-bar {
    background: #fff;
    height: 100%;
    width: 100%;
}

.tealplayer-volume-slider {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    margin-right: 0;
}

.tealplayer-volume-input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    height: 20px;
    margin: 0;
    padding: 0;
    position: absolute;
    vertical-align: middle;
    width: 100%;
    z-index: 2;
}

.tealplayer-volume-input:focus {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

/* webkit thumb - Needs separate block from ::-moz-range-thumb */
.tealplayer-volume-input::-webkit-slider-thumb {
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    background: #fff;
    border: 0px solid #fff;
    border-radius: 20px;
    height: 0;
    width: 0;
}

.tealplayer-volume-wrap:hover .tealplayer-volume-input::-webkit-slider-thumb,
.tealplayer-volume-slider-visible .tealplayer-volume-input::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
}

/* moz thumb */
.tealplayer-volume-input::-moz-range-thumb {
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    background: #fff;
    border: 0px solid #fff;
    border-radius: 20px;
    display: none;
    height: 0;
    width: 0;
}

.tealplayer-volume-wrap:hover .tealplayer-volume-input::-moz-range-thumb,
.tealplayer-volume-slider-visible .tealplayer-volume-input::-moz-range-thumb {
    height: 12px;
    width: 12px;
}

.tealplayer-volume-wrap:hover .tealplayer-volume-slider,
.tealplayer-volume-slider.tealplayer-volume-slider-visible {
    margin-right: 15px;
    width: 70px;
}

.tealplayer-volume-slider {
    align-items: center;
    display: flex;
    width: 0;
}


/* time */
.tealplayer-time,
.tealplayer-time-container,
.tealplayer-time-ad-container {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    position: relative;
    width: auto;
}

.tealplayer-time-container,
.tealplayer-time-ad-container {
    position: absolute;
}

.tealplayer-ad-time,
.tealplayer-ad-skip {
    font-weight: 900;
}

.tealplayer-ad-skip {
    cursor: pointer;
    width: auto;
}

.tealplayer-time .tealplayer-current-time:after,
.tealplayer-time .tealplayer-ad-time:after {
    content: "\007C";
    font-weight: 400;
    padding: 0 10px;
}


/* progress */
.tealplayer-progress {
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: absolute;
    height: 6px;
    top: -6px;
    width: 100%;
}

.tealplayer-progress.tealplayer-progress-disable-user {
    pointer-events: none;
}

.tealplayer-progress-bar {
    background: #007acc;
    position: relative;
    height: 4px;
    width: 0;
}

.tealplayer-progress-thumb {
    background-color: #009bff;
    border-radius: 10px;
    height: 12px;
    position: absolute;
    right: 0;
    top: -3px;
    width: 12px;
}

.tealplayer-progress-hitbox {
    height: 30px;
    margin-top: -10px;
    margin-right: -8px;
    position: absolute;
    right: -5px;
    top: -7px;
    width: 35px;
    z-index: 3;
}

/* spinner */
@-webkit-keyframes tealplayerSpinnerRotation {
    from{ -webkit-transform: rotate(0deg); }
    to{ -webkit-transform: rotate(360deg); }
}
@keyframes tealplayerSpinnerRotation {
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

.tealplayer-spinner {
    -webkit-animation: tealplayerSpinnerRotation .65s linear infinite;
    -moz-animation: tealplayerSpinnerRotation .65s linear infinite;
    -o-animation: tealplayerSpinnerRotation .65s linear infinite;
    animation: tealplayerSpinnerRotation .65s linear infinite;

    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;

    height: 77px;
    left: 50%;
    margin: -38px 0 0 -38px;
    position: absolute;
    width: 77px;
    top: 50%;
    z-index: 9;
}

.tealplayer-spinner:before {
    border: 6px solid rgba(0, 0, 0, 0);
    border-radius: 100%;
    border-top-color: rgba(255,255,255,.8);
    box-sizing: content-box;
    content: "";
    display: block;
    height: 100%;
    left: -6px;
    position: absolute;
    top: -6px;
    width: 100%;
}


/* visibility */
.tealplayer-spinner.tealplayer-spinner-hidden {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
    pointer-events: none;
    visibility: hidden;
}

.tealplayer-vis-hidden,
.tealplayer-progress.tealplayer-progress-disable-user .tealplayer-progress-thumb,
.tealplayer-control-wrap.tealplayer-minimal .tealplayer-progress-thumb,
.tealplayer-control-wrap.tealplayer-hidden .tealplayer-progress-thumb {
    margin: 0;
    padding: 0;
    visibility: hidden;
    width: 0;
}

/* share */
.tealplayer-overlay:not([hidden]) {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.80);
    color: #fff;
    cursor: default;
    flex-direction: column;
    font-family: 'Unify Sans', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 4;
}

.tealplayer-overlay-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center;
    width: calc(100% - 40px);
}

.tealplayer-copy-text {
    bottom: -30px;
    font-size: 14px;
    position: absolute;
    user-select: none;
}

.tealplayer-copy-input {
    position: absolute;
    left: 200vw;
}

.tealplayer-overlay-title {
    margin-bottom: 35.5px;
    max-width: 340px;
}

.tealplayer-share-desc {
    margin-bottom: 19.5px;
    font-size: 12px;
}

.tealplayer-overlay-btn-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.tealplayer-close-btn {
    position: absolute;
    margin: 0;
    right: 12px;
    top: 12px;
}

/**
 * Encore up next card
**/

.up-next-card-container {
    background-color: rgba(0, 0, 0, 0.80);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    font-weight: 700;
    height: 70px;
    left: 0;
    position: absolute;
    top: 0;
    width: 260px;
    z-index:99;
    font-family: 'Unify Sans','Helvetica Neue','Arial Nova',Helvetica,Arial,sans-serif;
}
.up-next-thumbnail {
    height: 100%;
    min-width: 70px;
    object-fit: cover;
    overflow: hidden;
    width: 70px;
}
.up-next-content {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    line-height: 1.17;
    max-height: 100%;   
    padding: 4px 10px;
    width: 190px;
}
.up-next-header {
    color: #c2c2c2;
    font-weight: 700;
    line-height: 1.8;
}
.up-next-close {
    fill: #fff;
    height: 12px;
    padding: 4px;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 12px;
}
.up-next-title {
    overflow: hidden;
}