.swiper-button-next,
.swiper-button-prev {
   border-radius: 2px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
   font-size: 20px;
   font-weight: 700;
}

.swiper-pagination-bullet {
   opacity: 1;
   border: 1px solid rgba(255, 255, 255, .7);
   background: rgba(0, 0, 0, .3);
}
.swiper-pagination-bullet-active {
   background: var(--swiper-theme-color);
   border-color: white;
}

.swiper-container-vertical .swiper-button-next, .swiper-container-vertical .swiper-button-prev {
   left: 50%;
   transform: rotate(90deg);
   transform-origin: left center;
}

.swiper-container-vertical .swiper-button-prev {
   top: 10px;
}

.swiper-container-vertical .swiper-button-next {
   top: auto;
   bottom: 10px;
}

.swiper-button-hidden, .swiper-pagination-hidden {
   display: none;
}

.swiper-slide {
   background-repeat: no-repeat;
   background-position: center;
}

.fos-image-slider-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
}

.fos-image-slider-gallery {
   width: 100%;
   flex: 4;
}

.fos-image-slider-thumbnails {
   flex: 1;
   width: 100%;
   padding: 6px 0 0;
}

.fos-image-slider-fullscreen-btn {
   cursor: pointer;
   position: absolute;
   z-index: 200;
   top: 10px;
   right: 10px;
   color: white;
   text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}

.fos-image-slider-fullscreen-btn .fa {
   font-size: 25px;
}

.fos-image-slider-thumbnail-slide {
   background-size: cover;
   background-position: center;
}

.fos-image-slider-box {
   backface-visibility: hidden;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 100px;
   max-height: 260px;
   width: 400px;
   background-color: white;
   padding: 15px;
   display: flex;
   flex-flow: column;
   border-radius: 2px;
   box-shadow: 0 0 16px -2px rgb(9 30 66 / 25%);
   color: #262626;
}

.fos-image-slider-box-header {
   flex: 0 1 auto;
}

.fos-image-slider-box-text {
   flex: 1 1 auto;
   overflow-y: auto;   
}

/* if there is a header, offset the text */
.fos-image-slider-box-header ~ .fos-image-slider-box-text {
   margin-top: 10px;
}

.fos-image-slider-box-footer {
    margin-top: 10px;
}

.fos-image-slider-box-title {
   font-size: 22px;
   font-weight: 700;
}

.fos-image-slider-box-subtitle {
   font-size: 18px;
   font-weight: 700;
   color: #666;
   margin-top: 10px;
}

/* if there is title, offset the subtitle */
.fos-image-slider-box-title ~ .fos-image-slider-box-subtitle {
   margin-top: 10px;
}

.fos-image-slider-box-button {
   display: inline-block;
   background-color: #006ed0;
   padding: 5px 15px;
   user-select: none;
   border-radius: 2px;
}

.fos-image-slider-box-button-title {
   color: white;
}