@charset "utf-8";

._container_1p2j6_1 { display: flex; align-items: center; justify-content: center; position: absolute; left: 0px; right: 0px; bottom: 64px; pointer-events: none; transition: transform 0.3s ease-in-out; }

.bytereplay-player.auto-hide ._container_1p2j6_1 { transform: translateY(32px); }

._line_1p2j6_15 { max-width: 60%; padding: 4px 8px; color: rgb(255, 255, 255); background: rgba(31, 35, 41, 0.7); border-radius: 4px; font-size: 18px; text-align: center; word-break: normal; }

._container_jd3bt_1 { position: relative; }

._container_jd3bt_1:hover ._text_jd3bt_4 { opacity: 1; transition-delay: 0.2s; }

._text_jd3bt_4 { opacity: 0; position: absolute; z-index: 99999; min-width: 48px; bottom: 150%; left: 50%; padding: 4px 8px; color: rgb(255, 255, 255); background-color: rgb(51, 51, 51); font-size: 14px; text-align: center; border-radius: 4px; white-space: nowrap; pointer-events: none; transform: translate(-50%, 6px); transition: 0.12s ease-in-out; }

._text_jd3bt_4::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: rgb(51, 51, 51) transparent transparent; }

._container_qpuog_1 { cursor: pointer; padding-left: 4px; padding-right: 4px; font-size: 24px; }

._container_qpuog_1 .bytereplay-icon { filter: drop-shadow(var(--text-shadow)); }

._container_qpuog_1::after { content: ""; position: absolute; bottom: -4px; left: 6px; width: 20px; height: 3px; background: var(--primary-color); transition: 0.2s ease-in-out; transform: scale(0.01); opacity: 0; }

._container_qpuog_1._checked_qpuog_22::after { transform: scale(1); opacity: 1; }

._container_1f6t4_1 { position: absolute; inset: 0px 0px 59px; background-color: rgba(0, 0, 0, 0.3); text-align: center; z-index: 2000; }

._innerContainer_1f6t4_11 { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }

._loadingRing_1f6t4_18 { position: absolute; width: 200px; height: 200px; border-radius: 50%; animation: 2s linear 0s infinite normal none running _ring_1f6t4_1; }

@keyframes _ring_1f6t4_1 { 
  0% { transform: rotate(0deg); box-shadow: rgb(230, 92, 0) 1px 5px 2px; }
  50% { transform: rotate(180deg); box-shadow: rgb(24, 178, 1) 1px 5px 2px; }
  80% { transform: rotate(288deg); box-shadow: rgb(4, 86, 200) 1px 5px 2px; }
  100% { transform: rotate(360deg); box-shadow: rgb(230, 92, 0) 1px 5px 2px; }
}

._loadingRing_1f6t4_18::before { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 5px; }

._loadingContent_1f6t4_52 { width: 136px; height: 136px; }

._defaultContent_1f6t4_56 { color: rgb(170, 168, 168); animation: 3s ease-in-out 0s infinite normal none running _content-text_1f6t4_1; }

._defaultContent_1f6t4_56 svg { width: 136px; height: 136px; }

@keyframes _content-text_1f6t4_1 { 
  50% { color: rgb(0, 0, 0); }
}

._error_1f6t4_69 { color: rgb(170, 168, 168); font-size: 18px; }

._error_1f6t4_69 img { margin-bottom: 12px; }

._errorIcon_1f6t4_76 { font-size: 160px; }

._navigationBar_hegc7_1 { width: 100%; display: flex; align-items: center; }

._location_hegc7_6 { background: rgba(255, 255, 255, 0.2); color: var(--text-color); width: 100%; margin: 0px 16px; padding: 0px 16px; border-radius: 12px; font-size: 14px; line-height: 28px; display: flex; justify-content: space-between; }

._url_hegc7_18 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; width: 1px; }

._copy_hegc7_25 { flex: 0 0 auto; margin-left: 8px; cursor: pointer; }

._progressBar_ehhm4_1 { height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; }

._progressBar_ehhm4_1:hover ._indicator_ehhm4_8 { transform: scale(1); }

._progressBar_ehhm4_1:hover ._innerProgressBar_ehhm4_11 { height: 5px; }

._progressBar_ehhm4_1:hover ._hoverProgress_ehhm4_14, ._progressBar_ehhm4_1:hover ._tooltip_ehhm4_15 { opacity: 1; }

._innerProgressBar_ehhm4_11 { position: relative; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 16px; transition: height 0.2s; }

._progress_ehhm4_1 { position: absolute; left: 0px; height: 100%; border-radius: 0px 8px 8px 0px; }

._playbackProgress_ehhm4_32 { background: var(--primary-color); }

._hoverProgress_ehhm4_14 { background: var(--progress-hover-color); opacity: 0; transition: opacity 0.2s; }

._indicator_ehhm4_8 { z-index: 2; position: absolute; right: -6.5px; top: -4px; width: 13px; height: 13px; border-radius: 100%; background: var(--primary-color); transition: transform 0.2s; transform: scale(0); transform-origin: center 5px; }

._markersContainer_ehhm4_53 { position: absolute; left: 0px; height: 100%; right: 0px; }

._marker_ehhm4_53 { position: absolute; border-radius: 1px; height: 100%; background-color: rgb(164, 220, 252); }

._standardMarker_ehhm4_65 { width: 4px; }

._tooltip_ehhm4_15 { position: absolute; bottom: 12px; line-height: 1.5; transition: opacity 0.2s linear; transform: translate(-50%); padding: 4px 12px; background: rgba(0, 0, 0, 0.75); border-radius: 6px; text-align: center; white-space: nowrap; pointer-events: none; color: rgb(238, 238, 238); opacity: 0; }

._tooltipTime_ehhm4_83 { font-weight: 700; }

._mixinAbsolute_ehhm4_86 { position: absolute; left: 0px; height: 100%; }

._container_1cu5f_1 { position: relative; cursor: pointer; padding-left: 4px; padding-right: 4px; user-select: none; }

._container_1cu5f_1:hover ._list_1cu5f_8 { display: flex; }

._list_1cu5f_8 { display: none; flex-direction: column; position: absolute; bottom: 16px; right: -20px; margin: 0px; padding: 0px; list-style: none; width: 72px; background: rgba(0, 0, 0, 0.75); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.33); }

._list_1cu5f_8 li { height: 32px; line-height: 32px; cursor: pointer; text-align: center; }

._list_1cu5f_8 li:hover { background: rgba(255, 255, 255, 0.2); }

._list_1cu5f_8 li._selected_1cu5f_34 { background: rgba(255, 255, 255, 0.4); }

._timeDisplay_qvayn_1 { display: flex; align-items: center; height: 28px; text-shadow: var(--text-shadow); font-size: 14px; cursor: pointer; user-select: none; }

._timeDisplay_qvayn_1 .bytereplay-tooltip { bottom: 200% !important; }

._current_qvayn_13, ._duration_qvayn_16 { display: none; }

._duration_qvayn_16::before { content: "/"; margin-left: 4px; margin-right: 4px; }

._live_qvayn_24 { display: none; font-size: 12px; margin-left: 12px; padding: 2px 6px; border-radius: 4px; background-color: var(--primary-color); }

._playback_qvayn_32 { background-color: var(--success-color); }

._quickJump_qvayn_35 { display: none; }

._jumpForwardBtn_qvayn_38 { font-size: 16px; margin-left: 16px; animation: 2.5s linear 0s infinite normal none running _blink_qvayn_1; }

@keyframes _blink_qvayn_1 { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.bytereplay-player { --text-color: white; --secondary-text-color: #404040; --border-color: rgba(255, 255, 255, .5); --primary-color: red; --text-shadow: 0 0 4px rgba(0, 0, 0, .8); --success-color: #23c343; --progress-hover-color: #49C2F2; }

._playbackController_kns6j_10 { display: flex; flex-direction: column; position: absolute; box-sizing: border-box; bottom: 0px; left: 0px; right: 0px; height: 59px; padding-left: 1%; padding-right: 1%; color: var(--text-color); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.85) 95%); font-family: Arial, Helvetica, sans-serif; font-size: 14px; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; }

._playbackController_kns6j_10 * { box-sizing: border-box; }

._playbackController_kns6j_10 .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentcolor; overflow: hidden; }

.bytereplay-player.auto-hide ._playbackController_kns6j_10 { opacity: 0; transform: translateY(12px); }

._top_kns6j_41 { height: 23px; flex-shrink: 0; }

._bottom_kns6j_45 { display: flex; align-items: center; flex-grow: 1; flex-shrink: 0; padding-bottom: 8px; }

._bottomLeft_kns6j_52 { display: flex; align-items: center; }

._bottomSpring_kns6j_56 { flex-grow: 1; }

._bottomRight_kns6j_59 { display: flex; align-items: center; }

._bottomRight_kns6j_59 > * { margin-left: 12px; }

._timeDisplay_kns6j_66 { margin-left: 12px; }

._container_y67m9_1 { width: 300px; height: 100%; display: flex; position: absolute; background: rgba(40, 45, 49, 0.95); border-left: 2px solid var(--border-color); top: 0px; right: 0px; flex-direction: column; color: rgb(212, 213, 214); z-index: 2100; }

._header_y67m9_14 { padding: 24px 24px 12px; border-bottom: 1px solid var(--border-color); }

._items_y67m9_18 { flex: 1 1 auto; overflow-y: auto; }

._item_y67m9_18 { display: flex; align-items: center; padding: 8px 8px 8px 2px; font-size: 12px; cursor: pointer; }

._item_y67m9_18:hover, ._item_y67m9_18._active_y67m9_32 { background: rgba(140, 145, 149, 0.5); }

._index_y67m9_35 { width: 30px; display: flex; justify-content: center; flex: 0 0 auto; }

._title_y67m9_41 { display: flex; flex: 1 1 auto; width: 1px; flex-direction: column; }

._title_y67m9_41 span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }

._userInteractionRequester_1rac8_1 { position: absolute; inset: 0px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.8); }

._innerContainer_1rac8_12 { display: flex; flex-direction: column; align-items: center; padding: 0px 40px; transition: 0.3s; }

._innerContainer_1rac8_12:hover { transform: scale(1.1); }

._innerContainer_1rac8_12:hover ._btnContainer_1rac8_22 { background-color: rgb(255, 255, 255); }

._innerContainer_1rac8_12:hover ._icon_1rac8_25 { color: rgb(254, 10, 139) !important; }

._innerContainer_1rac8_12:hover ._btn_1rac8_22 { color: rgb(51, 51, 51); }

._innerContainer_1rac8_12:hover ._hint_1rac8_31 { opacity: 1; }

._innerContainer_1rac8_12 :active { transform: scale(1); }

._btnContainer_1rac8_22 { user-select: none; font-size: 36px; font-weight: 700; display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.85); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 16px 36px; border-radius: 50px; cursor: pointer; }

._icon_1rac8_25 { transition: 0.3s; color: rgb(255, 100, 124) !important; }

._btn_1rac8_22 { transition: 0.3s; cursor: pointer; color: var(--secondary-text-color); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; font-size: 24px; }

._hint_1rac8_31 { color: var(--text-color); font-size: 18px; margin-top: 16px; opacity: 0.8; transition: 0.3s; }