@charset "UTF-8";

body.modal-open {
  overflow: hidden;
}

.modal-component {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -9999;
}

.modal-component.visible {
    z-index: 9999;
}

.modal-component .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;

  transition: all ease 0.25s;

  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.modal-component.visible .modal-overlay {
  opacity: 1;
}

.modal-component .modal-wrapper {
  top: -100%;
  background: white;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  transition: all ease 0.5s 0.1s;
}

.modal-component.visible .modal-wrapper {
  top: 0;
}

.modal-component .modal-close-button {
  width: 18px;
  height: 18px;
  z-index: 99;
  position: absolute;
  display: block;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 10px;
  right: 10px;
  padding: 0;
  border: none;
  outline: none;
  transform: none;
  opacity: 0.5;
  transition: all ease 0.5s;
}

.modal-component .modal-close-button:hover {
  opacity: 1;
}

.modal-component .modal-close-button::before {
  content: '';
  width: 100%;
  height: 100%;
  font-size: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all ease 0.5s;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.35134 1.35134C1.78172 0.920971 2.47949 0.920971 2.90987 1.35134L8.74285 7.18433L14.5758 1.35134C15.0062 0.920971 15.704 0.920971 16.1344 1.35134C16.5647 1.78172 16.5647 2.47949 16.1344 2.90987L10.3014 8.74285L16.1344 14.5758C16.5647 15.0062 16.5647 15.704 16.1344 16.1344C15.704 16.5647 15.0062 16.5647 14.5758 16.1344L8.74285 10.3014L2.90987 16.1344C2.47949 16.5647 1.78172 16.5647 1.35134 16.1344C0.920971 15.704 0.920971 15.0062 1.35134 14.5758L7.18433 8.74285L1.35134 2.90987C0.920971 2.47949 0.920971 1.78172 1.35134 1.35134Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
}

.modal-component .modal-arrow {
  width: 48px;
  height: 100%;
  z-index: 99;
  position: absolute;
  display: none;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 0;
  padding: 0;
  border: none;
  outline: none;
  transform: none;
}

.modal-component .modal-arrow-prev {
  left: 0;
}

.modal-component .modal-arrow-next {
  right: 0;
}

.modal-component .modal-arrow::before {
  content: '';
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.5;
  transition: all ease 0.5s;
}

.modal-component .modal-arrow:hover::before {
  opacity: 1;
}

.modal-component .modal-arrow-prev::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 20L8 12L16 4' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}

.modal-component .modal-arrow-next::before {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 20L16.5 12L8.5 4' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}

.modal-component--arrows .modal-arrow {
  display: block;
}

.modal-component--hidden-arrows .modal-arrow::before {
  opacity: 0;
}

.modal-component--outside-arrows .modal-arrow-prev {
  left: -48px;
}

.modal-component--outside-arrows .modal-arrow-next {
  right: -48px;
}