.fancybox__container {
--fancybox-color: #333;
--fancybox-bg: #fff;
--f-spinner-color-1: rgba(0, 0, 0, 0.1);
--f-spinner-color-2: rgba(17, 24, 28, 0.8);
z-index: 99999;
}
.fancybox__nav {
--f-button-next-pos: 12px;
--f-button-prev-pos: 12px;
--f-button-width: 48px;
--f-button-height: 48px;
--f-button-color: #333;
--f-button-hover-color: #333;
--f-button-bg: #e5e7eb;
--f-button-hover-bg: #e5e7eb;
--f-button-active-bg: #e5e7eb;
--f-button-svg-height: 20px;
--f-button-svg-width: 20px;
--f-button-svg-stroke-width: 3;
--f-button-svg-filter: none;
}
.fancybox__toolbar {
--f-button-color: #0d0c22;
--f-button-hover-color: #0d0c22;
--f-button-bg: transparent;
--f-button-hover-bg: transparent;
--f-button-active-bg: transparent;
--f-button-svg-stroke-width: 1.5;
--f-button-svg-filter: none;
background: #fff;
border-bottom: 1px solid #e5e7eb;
text-shadow: none;
}
.fancybox__slide {
padding: 12px 0px;
}
.fancybox__thumbs.is-classic {
--f-thumb-opacity: 1;
--f-thumb-hover-opacity: 1;
--f-thumb-selected-opacity: 1;
--f-thumb-width: 68px;
--f-thumb-height: 68px;
--f-thumb-gap: 12px;
--f-thumb-offset: 5px;
--f-thumb-outline: 0;
}
.fancybox__thumbs.is-classic .f-thumbs__slide {
border: 1px solid #d1d5db;
border-radius: 4px;
transition: all 0.2s;
}
.fancybox__thumbs.is-classic .f-thumbs__slide:hover,
.fancybox__thumbs.is-classic .f-thumbs__slide.is-nav-selected {
border: 1px solid #6b7280;
}