@charset "utf-8";

.yarl__counter { bottom: var(--yarl__counter_bottom,unset); color: var(--yarl__counter_color,var(--yarl__color_button,#fffc)); filter: var(--yarl__counter_filter,drop-shadow(2px 2px 2px #000c)); left: var(--yarl__counter_left,0); line-height: var(--yarl__counter_line_height,var(--yarl__icon_size,32px)); margin: var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px)); padding: var(--yarl__counter_padding,var(--yarl__button_padding,8px)); position: var(--yarl__counter_position,absolute); right: var(--yarl__counter_right,unset); top: var(--yarl__counter_top,0); user-select: var(--yarl__counter_user_select,none); }

[dir="rtl"] .yarl__counter { left: var(--yarl__counter_rtl_left,unset); right: var(--yarl__counter_rtl_right,0); }

.yarl__thumbnails { height: 100%; display: flex; }

.yarl__thumbnails_bottom, .yarl__thumbnails_end .yarl__thumbnails_track, .yarl__thumbnails_start .yarl__thumbnails_track, .yarl__thumbnails_top { flex-direction: column; }

.yarl__thumbnails_wrapper { flex: 1 1 0%; position: relative; }

.yarl__thumbnails_container { background-color: var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000)); padding: var(--yarl__thumbnails_container_padding,16px); user-select: none; flex: 0 0 auto; position: relative; overflow: hidden; }

.yarl__thumbnails_vignette { pointer-events: none; --yarl__thumbnails_vignette_size: 12%; position: absolute; }

@media (width >= 1200px) {
  .yarl__thumbnails_vignette { --yarl__thumbnails_vignette_size: 8%; }
}

@media (width >= 2000px) {
  .yarl__thumbnails_vignette { --yarl__thumbnails_vignette_size: 5%; }
}

.yarl__thumbnails_bottom .yarl__thumbnails_vignette, .yarl__thumbnails_top .yarl__thumbnails_vignette { background: linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size,12%)),var(--yarl__color_backdrop,#000) 100%); height: 100%; left: 0px; right: 0px; }

.yarl__thumbnails_end .yarl__thumbnails_vignette, .yarl__thumbnails_start .yarl__thumbnails_vignette { background: linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size,12%)),var(--yarl__color_backdrop,#000) 100%); width: 100%; top: 0px; bottom: 0px; }

.yarl__thumbnails_track { gap: var(--yarl__thumbnails_thumbnail_gap,16px); outline: none; }

.yarl__thumbnails_thumbnail { appearance: none; background: var(--yarl__thumbnails_thumbnail_background,#000); border-color: var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,#fffc)); border-radius: var(--yarl__thumbnails_thumbnail_border_radius,4px); border-style: var(--yarl__thumbnails_thumbnail_border_style,solid); border-width: var(--yarl__thumbnails_thumbnail_border,1px); cursor: pointer; -webkit-tap-highlight-color: transparent; box-sizing: content-box; height: var(--yarl__thumbnails_thumbnail_height,80px); padding: var(--yarl__thumbnails_thumbnail_padding,4px); width: var(--yarl__thumbnails_thumbnail_width,120px); outline: none; flex: 0 0 auto; position: relative; overflow: hidden; }

.yarl__thumbnails_thumbnail_active { border-color: var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff)); }

.yarl__thumbnails_thumbnail_fadein { animation: yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards; opacity: 0; }

.yarl__thumbnails_thumbnail_fadeout { animation: yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards; cursor: unset; }

.yarl__thumbnails_thumbnail_placeholder { cursor: unset; visibility: hidden; }

.yarl__thumbnails_thumbnail:focus { box-shadow: var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,#fffc) 0 0 0 4px); }

.yarl__thumbnails_thumbnail:focus:not(:focus-visible) { box-shadow: unset; }

.yarl__thumbnails_thumbnail:focus-visible { box-shadow: var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,#fffc) 0 0 0 4px); }

.yarl__thumbnails_thumbnail_icon { color: var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,#fffc)); filter: var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px #000c)); height: var(--yarl__thumbnails_thumbnail_icon_size,32px); width: var(--yarl__thumbnails_thumbnail_icon_size,32px); position: absolute; top: 50%; left: 50%; transform: translate(-50%) translateY(-50%); }

@keyframes yarl__thumbnails_thumbnail_fadein { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes yarl__thumbnails_thumbnail_fadeout { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.yarl__fullsize { width: 100%; height: 100%; }

.yarl__relative { position: relative; }

.yarl__portal { opacity: 0; transition: opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease); z-index: var(--yarl__portal_zindex,9999); position: fixed; inset: 0px; overflow: hidden; }

.yarl__portal_open { opacity: 1; }

.yarl__container { background-color: var(--yarl__container_background_color,var(--yarl__color_backdrop,#000)); overscroll-behavior: var(--yarl__controller_overscroll_behavior,contain); touch-action: var(--yarl__controller_touch_action,none); user-select: none; outline: none; position: absolute; inset: 0px; overflow: hidden; }

.yarl__carousel { height: 100%; opacity: var(--yarl__pull_opacity,1); transform: translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0)); width: calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px,0)*1px + var(--yarl__carousel_spacing_percent,0)*1%)); flex: 0 0 auto; place-content: center; align-items: stretch; display: flex; }

.yarl__carousel_with_slides { column-gap: calc(var(--yarl__carousel_spacing_px,0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent,0))*var(--yarl__carousel_spacing_percent,0)*1%); }

.yarl__flex_center { place-content: center; align-items: center; display: flex; }

.yarl__slide { padding: calc(var(--yarl__carousel_padding_px,0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent,0))*var(--yarl__carousel_padding_percent,0)*1%); flex: 1 1 0%; position: relative; overflow: hidden; }

[dir="rtl"] .yarl__slide { --yarl__direction: -1; }

.yarl__slide_image { object-fit: contain; touch-action: var(--yarl__controller_touch_action,none); user-select: none; max-width: 100%; max-height: 100%; }

.yarl__slide_image_cover { object-fit: cover; width: 100%; height: 100%; }

.yarl__slide_image_loading { opacity: 0; }

@media screen and (width >= 800px) {
  .yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image { backface-visibility: hidden; transform-style: preserve-3d; transform: translateZ(0px); }
}

.yarl__slide_placeholder { line-height: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%) translateY(-50%); }

.yarl__slide_loading { color: var(--yarl__slide_icon_loading_color,var(--yarl__color_button,#fffc)); animation: 1s linear 0s 1 normal none running yarl__delayed_fadein; }

.yarl__slide_loading line { animation: 1s linear 0s infinite normal none running yarl__stroke_opacity; }

.yarl__slide_loading line:first-of-type { animation-delay: -1.875s; }

.yarl__slide_loading line:nth-of-type(2) { animation-delay: -1.75s; }

.yarl__slide_loading line:nth-of-type(3) { animation-delay: -1.625s; }

.yarl__slide_loading line:nth-of-type(4) { animation-delay: -1.5s; }

.yarl__slide_loading line:nth-of-type(5) { animation-delay: -1.375s; }

.yarl__slide_loading line:nth-of-type(6) { animation-delay: -1.25s; }

.yarl__slide_loading line:nth-of-type(7) { animation-delay: -1.125s; }

.yarl__slide_loading line:nth-of-type(8) { animation-delay: -1s; }

.yarl__slide_error { color: var(--yarl__slide_icon_error_color,red); height: var(--yarl__slide_icon_error_size,48px); width: var(--yarl__slide_icon_error_size,48px); }

@media (prefers-reduced-motion) {
  .yarl__portal, .yarl__slide { transition: unset; }
  .yarl__slide_loading, .yarl__slide_loading line { animation: unset; }
}

.yarl__toolbar { padding: var(--yarl__toolbar_padding,8px); justify-content: flex-end; display: flex; position: absolute; inset: 0px 0px auto auto; }

[dir="rtl"] .yarl__toolbar { inset: 0px auto auto 0px; }

.yarl__icon { height: var(--yarl__icon_size,32px); width: var(--yarl__icon_size,32px); }

.yarl__button { appearance: none; background-color: var(--yarl__button_background_color,transparent); border: var(--yarl__button_border,0); color: var(--yarl__color_button,#fffc); cursor: pointer; filter: var(--yarl__button_filter,drop-shadow(2px 2px 2px #000c)); margin: var(--yarl__button_margin,0); padding: var(--yarl__button_padding,8px); -webkit-tap-highlight-color: transparent; outline: none; line-height: 0; }

.yarl__button:focus { color: var(--yarl__color_button_active,#fff); }

.yarl__button:focus:not(:focus-visible) { color: var(--yarl__color_button,#fffc); }

.yarl__button:focus-visible { color: var(--yarl__color_button_active,#fff); }

@media (hover: hover) {
  .yarl__button:focus-visible:hover, .yarl__button:focus:hover, .yarl__button:hover { color: var(--yarl__color_button_active,#fff); }
}

.yarl__button:disabled { color: var(--yarl__color_button_disabled,#fff6); cursor: default; }

.yarl__navigation_next, .yarl__navigation_prev { padding: var(--yarl__navigation_button_padding,24px 16px); position: absolute; top: 50%; transform: translateY(-50%); }

.yarl__navigation_prev { left: 0px; }

[dir="rtl"] .yarl__navigation_prev { left: unset; right: 0px; transform: translateY(-50%) rotate(180deg); }

.yarl__navigation_next { right: 0px; }

[dir="rtl"] .yarl__navigation_next { left: 0px; right: unset; transform: translateY(-50%) rotate(180deg); }

.yarl__no_scroll { overscroll-behavior: none; height: 100%; overflow: hidden; }

@keyframes yarl__delayed_fadein { 
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes yarl__stroke_opacity { 
  0% { stroke-opacity: 1; }
  100% { stroke-opacity: 0.125; }
}