.video-forward-container, .video-backward-container { position: absolute; width: 100px; height: 100px; top: 0; left: -10px; right: 0; bottom: 0; margin: auto; text-align: center; line-height: 100px; } @media (min-width: 1920px) { .theater-mode footer { width: 100%; } } @media (max-width: 720px) { #videoOverAd { display: none !important; } } .video-backward-container .fa, .video-forward-container .fa { font-size: 30px; padding: 35px; padding-top: 33px; } .backward-text-container, .forward-text-container { position: absolute; top: 0; left: 0; width: 100%; height: 16px; bottom: 0; margin: auto; text-align: center; font-size: 14px; line-height: 16px; } #contentWrapper .msv-container .tab-content { transition: width 0.75s linear; } #contentWrapper .rvideo-sidebar, #contentWrapper.theater-mode .block-notice { transition: margin-top 0.75s linear; } .lowered { display: none; } .vjs-theater-control, .vjs-settings-control { cursor: pointer; } .vjs-settings-control { order: unset; } .vjs-settings-control .vjs-icon-placeholder { font-size: inherit; line-height: inherit; } .vjs-settings-menu { position: absolute; bottom: 100%; right: 0; background: rgba(139, 0, 139, 0.9); border: 1px solid #4a004a; border-radius: 8px; padding: 16px; min-width: 200px; z-index: 1000; display: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } .vjs-control-bar.vjs-settings-open .vjs-settings-menu { display: block; } .settings-section { margin-bottom: 16px; } .settings-section:last-child { margin-bottom: 0; } .settings-header { color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 8px; } .settings-toggle { display: flex; align-items: center; justify-content: space-between; } .toggle-switch { display: none; } .toggle-label { position: relative; width: 40px; height: 20px; background: #333; border: 2px solid #fff; border-radius: 20px; cursor: pointer; transition: background-color 0.3s; } .toggle-label::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: #fff; border-radius: 50%; transition: transform 0.3s; } .toggle-switch:checked + .toggle-label { background: #4CAF50; } .toggle-switch:checked + .toggle-label::after { transform: translateX(20px); } .settings-options { display: flex; flex-direction: column; gap: 4px; } .settings-option { color: #fff; padding: 8px 12px; cursor: pointer; font-size: 13px; border-radius: 4px; transition: all 0.2s; background: rgba(255, 255, 255, 0.1); } .settings-option:hover { background: rgba(255, 255, 255, 0.2); } .settings-option.active { background: rgba(255, 255, 255, 0.3); color: #4CAF50; font-weight: 500; } @media (max-width: 1004px) { .vjs-theater-control { display: none !important; width: 0; overflow: hidden; } .vjs-settings-control { display: none !important; width: 0; overflow: hidden; } } .theater-mode footer { display: none; } #contentWrapper .rvideo-sidebar, #contentWrapper.theater-mode .block-notice { display: none; } .theater-mode .rvideos-wrap { display: none; } .theater-mode .all { display: none; } #contentWrapper.theater-mode { width: 100%; } @media (max-width: 768px) { #contentWrapper.theater-mode { margin-left: -50px; } } #contentWrapper.theater-mode .videoWrap { width: 100%; } #contentWrapper.theater-mode .after-vid-wrapper { width: 60%; display: flex; margin: auto; } @media (max-width: 768px) { #contentWrapper.theater-mode .after-vid-wrapper { width: 90%; } } #contentWrapper.theater-mode .after-vid { width: calc(70% - 10px); } #videoOverAd { display: none; z-index: 18 !important; } @media (max-width: 720px) { #videoOverAd { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 5px; } } @media (min-width: 720px) { #videoOverAd { padding: 10px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 18 !important; } .videoOverAdSmall { width: 300px; } .videoOverAdBig { width: 610px; margin-left: -475px; } #videoOverAd .close { height: 10px; width: 10px; float: right; display: block; text-decoration: none; font-size: 14px; line-height: 10px; margin-left: 100%; margin-bottom: 10px; box-sizing: border-box; } #videoOverAd .videoOverAd300, #videoOverAd .videoOverAd300snd { float: left; width: 300px; height: 250px; margin-right: 10px; } #videoOverAd .videoOverAd300snd { margin-right: 0; } } .videoBox #video-player.vjs-fluid { aspect-ratio: 16 / 9; height: auto !important; } #video-resume-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 1000 !important; background-color: rgba(0, 0, 0, 0.7) !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; } #video-resume-overlay .video-resume-content { background: #1a1a1a; border-radius: 8px; padding: 30px; text-align: center; max-width: 400px; width: 90%; position: relative; } #video-resume-overlay .video-resume-close { position: absolute; top: 10px; right: 15px; background: #ff4444; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; font-weight: bold; cursor: pointer; z-index: 1001; display: flex; align-items: center; justify-content: center; } #video-resume-overlay .video-resume-close:hover { background: #ff6666; } #video-resume-overlay[style*="display: none"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .videoBox #video-player:not(.theater-mode) { aspect-ratio: 16 / 9 !important; width: 100% !important; height: auto !important; } .videoBox #video-player .vjs-tech { width: 100% !important; height: 100% !important; object-fit: contain !important; } .videoBox { aspect-ratio: unset !important; } .video-resume-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); pointer-events: auto; } #video-player { position: relative !important; } .video-resume-content { background: rgba(27, 27, 27, 0.95); border: 2px solid #ff5e62; border-radius: 12px; padding: 25px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6); animation: slideIn 0.3s ease-out; position: relative; } @keyframes slideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .video-resume-icon { font-size: 40px; color: #ff5e62; margin-bottom: 15px; display: block; } .video-resume-title { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 8px; font-family: 'Roboto', sans-serif; } .video-resume-subtitle { color: #ccc; font-size: 14px; margin-bottom: 20px; line-height: 1.4; } .video-resume-progress { background: #333; height: 4px; border-radius: 2px; margin: 15px 0; overflow: hidden; } .video-resume-progress-fill { background: linear-gradient(90deg, #ff5e62, #f90); height: 100%; border-radius: 2px; transition: width 0.3s ease; } .video-resume-time { color: #ff5e62; font-size: 12px; font-weight: 500; margin-top: 8px; } .video-resume-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 20px; } .video-resume-btn { padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; min-width: 120px; font-family: 'Roboto', sans-serif; } .video-resume-btn.continue { background: #ff5e62; color: #fff; } .video-resume-btn.continue:hover { background: #6a9bd8; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(142, 177, 230, 0.3); } .video-resume-btn.restart { background: transparent; color: #ff5e62; border: 2px solid #ff5e62; } .video-resume-btn.restart:hover { background: #ff5e62; color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(142, 177, 230, 0.3); } .video-resume-close { position: absolute; top: 10px; right: 10px; background: none; border: none; color: #ccc; font-size: 20px; cursor: pointer; padding: 5px; line-height: 1; } .video-resume-close:hover { color: #fff; } @media (max-width: 768px) { .video-resume-content { padding: 20px; margin: 15px; max-width: 350px; } .video-resume-buttons { flex-direction: column; gap: 8px; } .video-resume-btn { min-width: auto; } } @media (min-width: 1024px) { .theater-mode .msv-container { margin-left: -30px !important; max-height: 80vh; } .theater-mode .video-js { padding-top: 0 !important; aspect-ratio: 21 / 9; max-height: 80vh; } .theater-mode .video-js .vjs-tech { width: 100% !important; height: 100% !important; object-fit: contain !important; } } .vjs-settings-dropup { position: absolute; height: 200px; width: 200px; right: 0; bottom: 50px; background: rgba(27, 27, 27, 0.5); font-size: 14px; padding: 15px; display: none; } .vjs-resolutions { padding-top: 10px; } .vjs-resolutions .vjs-change-res { padding: 10px 5px; font-weight: bold; display: block; } .vjs-resolutions .vjs-change-res:hover, .vjs-resolutions .vjs-change-res.active { text-decoration: none; color: #ff5e62; } .vjs-timeline-preview { margin-left: -75px; margin-top: -200px; border-radius: 5px; } .vjs-settings-dropup.in { display: block; } .autoplay-togggle { display: inline-block; width: 40px; height: 20px; border: 1px solid white; vertical-align: bottom; border-radius: 200000px; margin-left: 15px; } .autoplay-togggle::after { content: ''; display: block; height: 15px; width: 15px; background: #ccc; border-radius: 200000px; float: right; margin: 1px; } .autoplay-togggle.on::after { background: #ff5e62; float: left; } .about-like { clear: both; } .newone a { font-size: 14px; } .new-tags-actions { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 4px; } .new-tags-actions .suggest-fix { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border: 1px solid #313131; border-radius: 999px !important; } .meta-boxx { width: 100%; } #downloadid a:focus { box-shadow: none; } #downloadid a:hover { background: #3f3f3f; color: white; } #downloadid a { color: #cacaca; padding: 5px 40px; background: #1f1f1f; } div#downloadid { width: 100%; display: none; margin: auto; float: right; padding: 2rem; justify-content: center; align-items: center; } .msv-container { position: relative; background: #101010; border: 1px solid #313131; border-radius: 4px; } .placeholder-container { width: 100%; position: relative; } .placeholder-container::after { padding-top: 56.25%; display: block; content: ''; } .placeholder { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: #000; color: white; } .btn:hover { background-image: none !important; background-color: #fca800; } .nav-tabs .nav-link { border-top-right-radius: 0 !important; border-top-left-radius: 0 !important; border: 0 !important; border-right: 1px solid transparent !important; border-left: 1px solid transparent !important; } .nav-tabs .nav-link:hover { border-color: #252525 !important; background-color: black; } .nav-link.active { border-top-left-radius: 4px !important; } .nav-tabs .nav-item { margin-bottom: 0 !important; } @media (max-width: 439px) { div#downloadid { width: 70% !important; } } @media (max-width: 880px) { div#downloadid { width: 60%; } } .modal-content { background: #0e0e0e !important; border: 1px solid #1f1f1f !important; } .modal-header { border-color: #1f1f1f; } .g-recaptcha > div { margin: auto !important; } .dwl { color: #ff5e62 !important; padding: 0 !important; background: #101010 !important; } .dwl:hover { color: #ff5e62 !important; background: #101010 !important; } #contentWrapper.theater-mode { width: 100%; } #contentWrapper.theater-mode .videoWrap { width: 100%; } #contentWrapper.theater-mode .after-vid-wrapper { width: 60%; display: flex; margin: auto; } @media (max-width: 1200px) { #contentWrapper.theater-mode .after-vid-wrapper { width: 90%; } } #contentWrapper.theater-mode .after-vid { width: calc(70% - 10px); } .videoOverAdBig, .videoOverAdSmall { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 8px; } .videoOverAd .close { position: absolute; top: 5px; right: 10px; color: white; font-size: 20px; cursor: pointer; } .lucide-loader-spin svg.lucide { font-size: 16px; animation: lucide-spin 0.8s linear infinite; } .video-action-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; position: relative; z-index: 2; width: 100%; box-sizing: border-box; overflow: visible; } .video-action-bar__utilities { display: flex; align-items: center; gap: 10px; margin-left: auto; position: relative; flex-shrink: 0; overflow: visible; } .video-action-bar .video-action-btn, .video-action-bar a.video-action-btn, .video-action-bar span.video-action-btn, .video-action-bar__utilities .video-action-btn, .video-action-bar__utilities a.video-action-btn, .video-action-bar__utilities span.video-action-btn { position: relative; flex: 0 0 auto; width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; padding: 0 !important; margin: 0 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.05) !important; color: #c4c4c4 !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; overflow: visible !important; text-decoration: none !important; } .video-action-bar [data-tooltip]::after, .video-action-bar__utilities [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 5px 9px; background: rgba(15, 15, 15, 0.94); color: #fff; font-family: 'Roboto', 'Segoe UI', sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; border-radius: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; z-index: 220; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } .video-action-bar [data-tooltip]:hover::after, .video-action-bar [data-tooltip]:focus-visible::after, .video-action-bar__utilities [data-tooltip]:hover::after, .video-action-bar__utilities [data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-2px); } .video-action-bar .video-action-btn:hover, .video-action-bar a.video-action-btn:hover, .video-action-bar span.video-action-btn:hover, .video-action-bar__utilities .video-action-btn:hover, .video-action-bar__utilities a.video-action-btn:hover, .video-action-bar__utilities span.video-action-btn:hover { color: #fff !important; background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.28) !important; transform: translateY(-1px); } .video-action-bar .video-action-btn:focus-visible, .video-action-bar a.video-action-btn:focus-visible, .video-action-bar span.video-action-btn:focus-visible, .video-action-bar__utilities .video-action-btn:focus-visible, .video-action-bar__utilities a.video-action-btn:focus-visible, .video-action-bar__utilities span.video-action-btn:focus-visible { outline: 2px solid rgba(255, 94, 98, 0.65); outline-offset: 2px; } .video-action-bar .video-action-btn.is-active, .video-action-bar .video-action-btn.liked, .video-action-bar .video-action-btn.added, .video-action-bar .video-action-btn.fg-gold, .video-action-bar__utilities .video-action-btn.is-active { color: #ff5e62 !important; border-color: rgba(255, 94, 98, 0.5) !important; background: rgba(255, 94, 98, 0.14) !important; } .video-action-bar .video-action-btn.is-loading, .video-action-bar a.video-action-btn.is-loading, .video-action-bar span.video-action-btn.is-loading, .video-action-bar__utilities .video-action-btn.is-loading, .video-action-bar__utilities a.video-action-btn.is-loading, .video-action-bar__utilities span.video-action-btn.is-loading { pointer-events: none; opacity: 0.85; } .video-action-bar .video-action-btn.is-error, .video-action-bar a.video-action-btn.is-error, .video-action-bar span.video-action-btn.is-error, .video-action-bar__utilities .video-action-btn.is-error, .video-action-bar__utilities a.video-action-btn.is-error, .video-action-bar__utilities span.video-action-btn.is-error { border-color: rgba(255, 68, 68, 0.65) !important; background: rgba(255, 68, 68, 0.12) !important; } .video-action-bar .video-action-btn.is-flash, .video-action-bar a.video-action-btn.is-flash, .video-action-bar span.video-action-btn.is-flash, .video-action-bar__utilities .video-action-btn.is-flash, .video-action-bar__utilities a.video-action-btn.is-flash, .video-action-bar__utilities span.video-action-btn.is-flash { animation: video-action-flash 0.45s ease; } @keyframes video-action-flash { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(255, 94, 98, 0.22); } } .video-action-bar .video-action-btn.video-action-type--uncensored, .video-action-bar a.video-action-btn.video-action-type--uncensored, .video-action-bar__utilities .video-action-btn.video-action-type--uncensored, .video-action-bar__utilities a.video-action-btn.video-action-type--uncensored { color: #6ee7a0 !important; border-color: rgba(110, 231, 160, 0.35) !important; background: rgba(110, 231, 160, 0.1) !important; } .video-action-bar .video-action-btn.video-action-type--uncensored:hover, .video-action-bar .video-action-btn.video-action-type--uncensored:focus-visible, .video-action-bar a.video-action-btn.video-action-type--uncensored:hover, .video-action-bar a.video-action-btn.video-action-type--uncensored:focus-visible, .video-action-bar__utilities .video-action-btn.video-action-type--uncensored:hover, .video-action-bar__utilities .video-action-btn.video-action-type--uncensored:focus-visible, .video-action-bar__utilities a.video-action-btn.video-action-type--uncensored:hover, .video-action-bar__utilities a.video-action-btn.video-action-type--uncensored:focus-visible { color: #9ef0c4 !important; border-color: rgba(110, 231, 160, 0.55) !important; background: rgba(110, 231, 160, 0.16) !important; } .video-action-bar .video-action-btn.video-action-type--uncensored svg, .video-action-bar a.video-action-btn.video-action-type--uncensored svg, .video-action-bar__utilities .video-action-btn.video-action-type--uncensored svg, .video-action-bar__utilities a.video-action-btn.video-action-type--uncensored svg { color: #6ee7a0 !important; stroke: #6ee7a0; } .video-action-bar .video-action-btn.video-action-type--censored, .video-action-bar span.video-action-btn.video-action-type--censored, .video-action-bar__utilities .video-action-btn.video-action-type--censored, .video-action-bar__utilities span.video-action-btn.video-action-type--censored { color: #fca5a5 !important; border-color: rgba(252, 165, 165, 0.35) !important; background: rgba(252, 165, 165, 0.08) !important; } .video-action-bar .video-action-btn.video-action-type--censored:hover, .video-action-bar .video-action-btn.video-action-type--censored:focus-visible, .video-action-bar span.video-action-btn.video-action-type--censored:hover, .video-action-bar span.video-action-btn.video-action-type--censored:focus-visible, .video-action-bar__utilities .video-action-btn.video-action-type--censored:hover, .video-action-bar__utilities .video-action-btn.video-action-type--censored:focus-visible, .video-action-bar__utilities span.video-action-btn.video-action-type--censored:hover, .video-action-bar__utilities span.video-action-btn.video-action-type--censored:focus-visible { color: #fecaca !important; border-color: rgba(252, 165, 165, 0.55) !important; background: rgba(252, 165, 165, 0.14) !important; } .video-action-bar .video-action-btn.video-action-type--censored svg, .video-action-bar span.video-action-btn.video-action-type--censored svg, .video-action-bar__utilities .video-action-btn.video-action-type--censored svg, .video-action-bar__utilities span.video-action-btn.video-action-type--censored svg { color: #fca5a5 !important; stroke: #fca5a5; } .video-action-bar .video-action-icon, .video-action-bar .video-action-loader, .video-action-bar__utilities .video-action-icon, .video-action-bar__utilities .video-action-loader { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .video-action-bar .video-action-icon svg, .video-action-bar .video-action-loader svg, .video-action-bar__utilities .video-action-icon svg, .video-action-bar__utilities .video-action-loader svg { width: 18px; height: 18px; } .video-action-bar .video-action-loader[hidden], .video-action-bar .video-action-icon[hidden], .video-action-bar__utilities .video-action-loader[hidden], .video-action-bar__utilities .video-action-icon[hidden] { display: none !important; } @media (max-width: 768px) { .undervideo-menu-la { padding: 0 10px; gap: 8px; } .video-action-bar { gap: 8px; padding: 6px 4px; flex-shrink: 0; } .video-action-bar .video-action-btn { width: 34px !important; height: 34px !important; min-width: 34px; min-height: 34px; } .video-action-bar__utilities .video-action-btn { width: 34px !important; height: 34px !important; min-width: 34px; min-height: 34px; } .video-action-bar .video-action-icon svg, .video-action-bar .video-action-loader svg { width: 18px; height: 18px; } } .episode-container #episode_slider > .related-videos-wrap, .episode-container #episode_slider > .tdx-behavior-related { display: contents; } .undervideo-menu-la { position: relative; z-index: 4; overflow: visible; } .menu-wrap-container { overflow: visible; background: #1b1b1b; border: 1px solid #313131; border-top: none; border-radius: 0 0 4px 4px; } .main-menu-content { position: relative; z-index: 1; } .menu-wrap-container .postMeta, .menu-wrap-container .postMeta .meta-boxx, .menu-wrap-container .postMeta .meta-boxx > div, .menu-wrap-container .postMeta .meta-boxx-stats > div { float: none !important; } .menu-wrap-container .postMeta { width: 100%; box-sizing: border-box; } .menu-wrap-container .meta-boxx { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; } .menu-wrap-container .meta-boxx-thumb { flex: 0 0 182px; width: 182px; max-width: 182px; min-width: 0; overflow: hidden; position: relative; } .menu-wrap-container .meta-boxx-thumb .rotate-90 { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transform: rotate(90deg); top: auto; left: auto; } .menu-wrap-container .meta-boxx-stats { flex: 1 1 auto; width: auto; min-width: 0; } @media (max-width: 984px) { .menu-wrap-container .meta-boxx { gap: 6px; } .menu-wrap-container .meta-boxx-thumb { flex: 0 0 clamp(120px, 22vw, 160px); width: clamp(120px, 22vw, 160px); max-width: clamp(120px, 22vw, 160px); } } @media (max-width: 560px) { .menu-wrap-container .meta-boxx-thumb { flex: 0 0 140px; width: 140px; max-width: 140px; } } .video-action-bar__utilities .video-action-btn.is-active, .video-share-dropdown.is-open .video-action-share { color: #fff !important; border-color: rgba(255, 94, 98, 0.45) !important; background: rgba(255, 94, 98, 0.12) !important; } .menu-wrap-content--description { display: block !important; float: none; width: 100%; padding: 12px 16px 16px; box-sizing: border-box; background: transparent; } .video-share-dropdown { position: relative; flex-shrink: 0; } .video-share-menu { position: absolute; bottom: calc(100% + 10px); top: auto; right: 0; z-index: 200; display: none; pointer-events: none; } .video-share-dropdown.is-open .video-share-menu { display: block; pointer-events: auto; } .video-share-menu__panel { padding: 6px 8px; border-radius: 10px; border: none; background: transparent; box-shadow: none; transform-origin: bottom right; opacity: 0; transform: translateY(6px); transition: opacity var(--transition-normal, 280ms cubic-bezier(0.5, 0, 0.1, 1)), transform var(--transition-normal, 280ms cubic-bezier(0.5, 0, 0.1, 1)); } .video-share-dropdown.is-open .video-share-menu__panel { opacity: 1; transform: translateY(0); } .crunchify-social--icons { display: flex; flex-wrap: nowrap; gap: 12px; margin: 0 !important; padding: 0 !important; width: auto; max-width: min(100vw - 32px, 320px); justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .crunchify-social--icons::-webkit-scrollbar { display: none; } .video-share-menu__icon-btn { width: 32px !important; height: 32px !important; min-width: 32px; min-height: 32px; flex-shrink: 0; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; color: #c4c4c4 !important; font-size: inherit; line-height: 0; font-family: inherit; text-decoration: none !important; display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; opacity: 0; transform: translateX(-10px); transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), color 150ms ease; } .video-share-dropdown.is-open .video-share-menu__icon-btn { opacity: 1; transform: translateX(0); } .video-share-dropdown.is-open .video-share-menu__icon-btn:nth-child(1) { transition-delay: 25ms; } .video-share-dropdown.is-open .video-share-menu__icon-btn:nth-child(2) { transition-delay: 45ms; } .video-share-dropdown.is-open .video-share-menu__icon-btn:nth-child(3) { transition-delay: 65ms; } .video-share-dropdown.is-open .video-share-menu__icon-btn:nth-child(4) { transition-delay: 85ms; } .video-share-dropdown.is-open .video-share-menu__icon-btn:nth-child(5) { transition-delay: 105ms; } .video-share-dropdown.is-open .video-share-menu__icon-btn:nth-child(6) { transition-delay: 125ms; } .video-share-dropdown.is-open .video-share-menu__icon-btn:nth-child(7) { transition-delay: 145ms; } .video-share-menu__icon-btn svg, .video-share-menu__icon-btn i, .video-share-menu__icon-btn [data-lucide] { width: 18px !important; height: 18px !important; display: block; } .video-share-menu__icon-btn:hover, .video-share-menu__icon-btn:focus-visible { color: #fff !important; transform: translateX(0) scale(1.08); background: transparent !important; border-color: transparent !important; } .video-share-menu__icon-btn.crunchify-x:hover, .video-share-menu__icon-btn.crunchify-x:focus-visible { color: #fff !important; } .video-share-menu__icon-btn.crunchify-facebook:hover, .video-share-menu__icon-btn.crunchify-facebook:focus-visible { color: #1877f2 !important; } .video-share-menu__icon-btn.crunchify-whatsapp:hover, .video-share-menu__icon-btn.crunchify-whatsapp:focus-visible { color: #25d366 !important; } .video-share-menu__icon-btn.crunchify-telegram:hover, .video-share-menu__icon-btn.crunchify-telegram:focus-visible { color: #26a5e4 !important; } .video-share-menu__icon-btn.crunchify-linkedin:hover, .video-share-menu__icon-btn.crunchify-linkedin:focus-visible { color: #0a66c2 !important; } .video-share-menu__icon-btn.crunchify-reddit:hover, .video-share-menu__icon-btn.crunchify-reddit:focus-visible { color: #ff4500 !important; } .video-share-menu__icon-btn.crunchify-copy-link:hover, .video-share-menu__icon-btn.crunchify-copy-link:focus-visible { color: #ff5e62 !important; } .crunchify-social--dropdown { display: flex; flex-direction: column; gap: 2px; margin: 0 !important; padding: 0 !important; text-align: left; } .video-share-menu__item { width: 100% !important; height: auto !important; min-height: 42px; margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #e8e8e8 !important; font-size: 14px !important; line-height: 1.2 !important; font-family: inherit; text-decoration: none !important; display: flex !important; align-items: center; gap: 12px; box-sizing: border-box; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity 220ms ease, transform 220ms ease, background 150ms ease, color 150ms ease; } .video-share-dropdown.is-open .video-share-menu__item { opacity: 1; transform: translateY(0); } .video-share-dropdown.is-open .video-share-menu__item:nth-child(1) { transition-delay: 30ms; } .video-share-dropdown.is-open .video-share-menu__item:nth-child(2) { transition-delay: 55ms; } .video-share-dropdown.is-open .video-share-menu__item:nth-child(3) { transition-delay: 80ms; } .video-share-dropdown.is-open .video-share-menu__item:nth-child(4) { transition-delay: 105ms; } .video-share-dropdown.is-open .video-share-menu__item:nth-child(5) { transition-delay: 130ms; } .video-share-dropdown.is-open .video-share-menu__item:nth-child(6) { transition-delay: 155ms; } .video-share-dropdown.is-open .video-share-menu__item:nth-child(7) { transition-delay: 180ms; } .video-share-menu__item:hover, .video-share-menu__item:focus-visible { color: #fff !important; background: rgba(255, 255, 255, 0.08) !important; } .video-share-menu__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); flex-shrink: 0; } .video-share-menu__icon svg, .video-share-menu__icon i, .video-share-menu__icon [data-lucide] { width: 16px !important; height: 16px !important; display: block; } .video-share-menu__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; } .video-share-menu__item.crunchify-x:hover .video-share-menu__icon { background: #000; } .video-share-menu__item.crunchify-facebook:hover .video-share-menu__icon { background: #2d4372; } .video-share-menu__item.crunchify-whatsapp:hover .video-share-menu__icon { background: #009688; } .video-share-menu__item.crunchify-telegram:hover .video-share-menu__icon { background: #0088cc; } .video-share-menu__item.crunchify-linkedin:hover .video-share-menu__icon { background: #006288; } .video-share-menu__item.crunchify-reddit:hover .video-share-menu__icon { background: #ff4500; } .video-share-menu__item.crunchify-copy-link:hover .video-share-menu__icon { background: #555; } @media (max-width: 768px) { .rec-cat-title { font-size: 18px; } .video-action-bar__utilities { gap: 8px; } .video-action-bar__utilities .video-action-btn { width: 34px !important; height: 34px !important; min-width: 34px; min-height: 34px; } .video-share-menu__panel { padding: 4px 0; } .crunchify-social--icons { flex-direction: column; gap: 8px; max-width: none; overflow-x: visible; } .video-share-menu__icon-btn { width: 38px !important; height: 38px !important; min-width: 38px; min-height: 38px; border-radius: 50% !important; background: rgba(255, 255, 255, 0.08) !important; opacity: 0; transform: translateY(8px); } .video-share-dropdown.is-open .video-share-menu__icon-btn { transform: translateY(0); } .video-share-menu__icon-btn:hover, .video-share-menu__icon-btn:focus-visible { transform: translateY(0) scale(1.05); background: rgba(255, 255, 255, 0.14) !important; } .video-share-menu__icon-btn svg, .video-share-menu__icon-btn i, .video-share-menu__icon-btn [data-lucide] { width: 16px !important; height: 16px !important; } }