/**
 * ISI Styles for Sephience HCP Theme
 */
 
:root {
  --isi-bg-color: #fff;
  --isi-max-height: 310px;
  --isi-transition: transform 0.3s ease, max-height 0.3s ease;

}

.isi-tray-section:not(.hidden) .isi-tray-content {
  display: flex;
}

.isi-tray-section.expanded .isi-tray-content,
.isi-tray-section.hidden .isi-tray-content,
.isi-full-section div:nth-child(3) .isi-content .isi-tray-content {
  display: none;
}

.isi-tray-content {
  display: none;
}

.isi-tray-section {
  position: fixed !important;
  inset: auto 0 0 0;
  width: 100vw;
  max-width: 100vw;
  min-width: 100vw;
  max-height: var(--isi-max-height);
  background-color: var(--isi-bg-color);
  box-sizing: border-box;
  transform: translateY(50%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--isi-transition);
}

.isi-tray-section.expanded {
  max-height: none;
  height: auto;
  transform: translateY(0);
  overflow-y: auto;
}

.isi-tray-section.hidden {
  display: none;
}

.icon-expand-isi,
.icon-collapse-isi {
  cursor: pointer;
  align-self: flex-end;
}

.icon-collapse-isi,
.isi-tray-section.expanded .icon-expand-isi {
  display: none;
}

.isi-tray-section.expanded .icon-collapse-isi {
  display: block;
}

@media (max-width: 767px) {
  .isi-tray-section {
    flex-direction: row;
  }
}

@media (min-width: 768px) and (max-width: 768px)  {
  .isi-tray-section {
    flex-direction: column !important;
  }
}