﻿.portal-image-carousel--gray .primary-carousel .splide__slide {
  background: linear-gradient(0deg, #f8f8f8 0%, #f8f8f8 100%), url(<path-to-image>), lightgray 50%/cover no-repeat;
}
.portal-image-carousel .splide__placeholder-slide {
  border-radius: 4px;
  background: #3c7e79;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
  width: 52px;
  height: 52px;
  right: 0;
  position: absolute;
  top: 3px;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  color: #FFF;
}
.portal-image-carousel .splide__placeholder-slide.is-shown {
  display: flex;
}
.portal-image-carousel .splide__arrow {
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  background: none;
  border-radius: 50%;
  border: 1px solid #bbb;
}
.portal-image-carousel .splide__arrow svg {
  width: 27px;
  height: 27px;
  fill: none;
}
.portal-image-carousel .splide__arrow--prev {
  left: -59px;
  transform: rotateY(180deg) translateY(-50%);
}
.portal-image-carousel .splide__arrow--next {
  right: -59px;
}
.portal-image-carousel .splide__slide {
  max-height: 480px;
}
.portal-image-carousel .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.portal-image-carousel .splide__enlarge-image {
  position: absolute;
  right: 16px;
  top: 16px;
  background: rgba(0, 0, 0, 0.26);
  border-radius: 50%;
  border: none;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (max-width: 1400px) {
  .portal-image-carousel .splide__arrow {
    background-color: #fff;
  }
  .portal-image-carousel .splide__arrow--prev {
    left: 0px;
  }
  .portal-image-carousel .splide__arrow--next {
    right: 0px;
  }
}
.portal-image-carousel .secondary-carousel,
.portal-image-carousel .modal-secondary-carousel {
  margin-top: 15px;
}
.portal-image-carousel .secondary-carousel.is-overflow .splide__track,
.portal-image-carousel .modal-secondary-carousel.is-overflow .splide__track {
  display: block;
}
.portal-image-carousel .secondary-carousel .splide__slide,
.portal-image-carousel .modal-secondary-carousel .splide__slide {
  border-radius: 4px;
  padding: 4px;
  background: #fff;
  box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.1);
}
.portal-image-carousel .secondary-carousel .splide__slide.is-active,
.portal-image-carousel .modal-secondary-carousel .splide__slide.is-active {
  border: 1px solid #357875 !important;
}
.portal-image-carousel .secondary-carousel .splide__track,
.portal-image-carousel .modal-secondary-carousel .splide__track {
  padding: 2px !important;
}
.portal-image-carousel .secondary-carousel .splide__enlarge-image,
.portal-image-carousel .modal-secondary-carousel .splide__enlarge-image {
  display: none;
}
.portal-image-carousel__modal {
  background: rgba(101, 101, 101, 0.68);
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  width: 100%;
  height: 100%;
}
.portal-image-carousel__modal.is-shown {
  display: block;
}
.portal-image-carousel__modal-content {
  border-radius: 6px;
  background: #fff;
  padding: 16px 23px 30px;
}
.portal-image-carousel__modal-close-btn {
  background: none;
  cursor: pointer;
  border: none;
  padding: 0;
  display: flex;
  margin: 0 0 0 auto;
}
.portal-image-carousel__modal .splide {
  margin-left: 60px;
  margin-right: 60px;
}
@media (max-width: 767px) {
  .portal-image-carousel__modal-content {
    padding: 16px 0px;
    position: relative;
  }
  .portal-image-carousel__modal-close-btn {
    position: absolute;
    right: 15px;
  }
  .portal-image-carousel__modal .modal-primary-carousel {
    margin: 27px 0 0 0;
  }
  .portal-image-carousel__modal .modal-primary-carousel .splide__slide {
    overflow: scroll;
  }
  .portal-image-carousel__modal .modal-primary-carousel .splide__slide::-webkit-scrollbar {
    display: none;
  }
  .portal-image-carousel__modal .modal-primary-carousel .splide__slide img {
    width: auto;
    height: auto;
  }
}
.portal-image-carousel__modal .modal-secondary-carousel {
  margin: 23px 60px;
}
