.gallery-section {
  display: flex;
  padding: 80px 96px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  align-self: stretch;
}
.release-gallery {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.release-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.release-card-thumbnail {
  display: flex;
  height: 240px;
  align-self: stretch;
  width: 100%;
  border-radius: 8px;
}
.release-card-thumbnail img {
  align-self: stretch;
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.release-card .text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.release-card .text-content .release-header-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.release-card .text-content .release-header-box p {
  color: #101828;
  font-family: "MavenPro-SemiBold";
  font-size: 24px;
  font-style: normal;
  flex: 1 0 0;
  line-height: 32px;
}
.release-card .text-content .release-header-box img {
  width: 24px;
  height: 24px;
}
.release-card .text-content > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  align-self: stretch;
  overflow: hidden;
  color: #475467;
  text-overflow: ellipsis;
  font-family: "MavenPro-Regular";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.load-more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg, 12px);
  cursor: pointer;
}
.load-more-btn p {
  color: #015888;
  font-family: "MavenPro-SemiBold";
  font-size: 18px;
  font-style: normal;
  line-height: 28px;
}
.load-more-btn img {
  width: 24px;
  height: 24px;
}
.gallery-category-tabs-sort-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}
.calendar-sort-download-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.custom-dropdown-wrapper {
  width: 100%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
}
.custom-dropdown-container {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 6px;
  position: relative;
}
.custom-dropdown-toggle {
  padding: 10px 14px;
  background: white;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Maven Pro", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #101828;
  justify-content: space-between;
}
.custom-dropdown-icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  transition: transform 0.1s ease-in;
}
.custom-dropdown-toggle:hover .custom-dropdown-icon {
  transform: rotate(180deg);
  transition: transform 0.1s ease-in;
}
.custom-dropdown-menu {
  display: none;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: white;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  position: absolute;
  top: 55px;
  z-index: 100;
  width: 100%;
  min-width: 150px;
}
.custom-dropdown-option {
  padding: 10px 14px;
  cursor: pointer;
  font-family: "Maven Pro", sans-serif;
  font-size: 16px;
  color: #101828;
}
.custom-dropdown-option:hover {
  background-color: #f0f0f0;
}

.calendar-sort-download-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.custom-date-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 10px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-family: "Maven Pro", sans-serif;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  width: fit-content;
  cursor: pointer;
}

.custom-date-input input {
  border: none;
  outline: none;
  font-size: 16px;
  color: #667085;
  width: 215px;
  background: transparent;
  cursor: pointer;
}

.custom-date-input .calendar-icon {
  width: 20px;
  height: 20px;
}

.flatpickr-calendar {
  border: 1px solid #eaecf0;
  border-radius: 12px;
  font-family: "Maven Pro", sans-serif;
  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}
.flatpickr-months .flatpickr-month {
  color: var(--colors-foreground-fg-secondary-700, #344054);
  text-align: center;

  font-family: "MavenPro-Regular";
  font-size: 14px;
  font-weight: 600;

  font-style: normal;
  line-height: 24px; /* 150% */
}
.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year {
  font-weight: 600;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  padding: 3px 10px;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #00aa86;
  stroke-width: 800;
}
.flatpickr-days {
  margin-top: 10px;
}

.flatpickr-day {
  border-radius: 9999px;
  padding: 0;
  height: 40px;
  width: 40px;
  line-height: 40px;
}

.flatpickr-day.today {
  background: #f9fafb;
  color: #344054;
  font-weight: 500;
  position: relative;
}

.flatpickr-day.today.event::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #00aa86;
  border-radius: 50%;
}

.flatpickr-day.selected {
  background-color: #00aa86 !important;
  color: white !important;
}

.flatpickr-weekday {
  color: #344054;
  font-weight: 500;
}

.flatpickr-footer {
  padding: 16px;
  border-top: 1px solid #eaecf0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.flatpickr-date-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flatpickr-date-box {
  background: #fff;
  padding: 10px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #344054;
  min-width: 100px;
  text-align: center;

  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.flatpickr-button-wrapper {
  display: flex;
  gap: 8px;
}

.flatpickr-apply,
.flatpickr-cancel {
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

.flatpickr-apply {
  background: #00aa86;
  color: white;
  border: 1px solid #00aa86;
}

.flatpickr-cancel {
  background: white;
  color: #344054;
  border: 1px solid #d0d5dd;
}

.numInputWrapper {
  pointer-events: none;
}

.numInputWrapper .arrowUp,
.numInputWrapper .arrowDown {
  display: none;
}

.flatpickr-current-month input.cur-year {
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.export-to-pdf-buttton {
  display: flex;
  padding: var(--spacing-lg, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md, 8px);
  border-radius: var(--radius-md, 8px);
  border: 1px solid #d0d5dd;
  background: #fff;

  /* Shadows/shadow-xs */
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  cursor: pointer;
}
.export-to-pdf-buttton img {
  width: 24px;
  height: 24px;
}
@media screen and (min-width: 2560px) {
  .gallery-section {
    padding: 3.125vw 3.75vw;
    gap: 1.875vw;
  }
  .release-gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1.25vw;
  }
  .release-card {
    gap: 0.391vw;
  }
  .release-card-thumbnail {
    height: 9.375vw;
    border-radius: 0.313vw;
  }
  .release-card-thumbnail img {
    border-radius: 0.313vw;
  }

  .release-card .text-content {
    gap: 0.313vw;
  }
  .release-card .text-content .release-header-box {
    gap: 0.625vw;
  }
  .release-card .text-content .release-header-box p {
    font-size: 0.938vw;
    line-height: 1.25vw;
  }
  .release-card .text-content .release-header-box img {
    width: 0.938vw;
    height: 0.938vw;
  }
  .release-card .text-content > p {
    font-size: 0.625vw;
    line-height: 0.938vw;
  }
  .load-more-btn {
    gap: 0.469vw;
  }
  .load-more-btn p {
    font-size: 0.703vw;
    line-height: 1.094vw;
  }
  .load-more-btn img {
    width: 0.938vw;
    height: 0.938vw;
  }

  .calendar-sort-download-container {
    gap: 0.625vw;
  }
  .custom-dropdown-wrapper {
    width: 100%;
    height: 100%;
    gap: 0.313vw;
  }
  .custom-dropdown-container {
    gap: 0.234vw;
  }
  .custom-dropdown-toggle {
    padding: 0.391vw 0.547vw;
    border-radius: 0.313vw;
    gap: 0.313vw;
    font-size: 0.625vw;
  }
  .custom-dropdown-icon {
    width: 0.781vw;
    height: 0.781vw;
  }

  .custom-dropdown-menu {
    padding: 0.313vw 0;
    border-radius: 0.313vw;
    top: 2.148vw;
    min-width: 5.859vw;
  }
  .custom-dropdown-option {
    padding: 0.391vw 0.547vw;
    font-size: 0.625vw;
  }

  .calendar-sort-download-container {
    gap: 0.625vw;
  }

  .custom-date-input {
    gap: 0.313vw;
    padding: 0.391vw 0.547vw;
    border-radius: 0.313vw;
  }

  .custom-date-input input {
    font-size: 0.625vw;
    color: #667085;
    width: 8.398vw;
  }

  .custom-date-input .calendar-icon {
    width: 0.781vw;
    height: 0.781vw;
  }

  .flatpickr-calendar {
    border-radius: 0.469vw;
    box-shadow: 0vw 0.313vw 0.313vw -0.156vw rgba(16, 24, 40, 0.03);
  }
  .flatpickr-months .flatpickr-month {
    font-size: 0.547vw;
    line-height: 0.938vw;
  }
  .flatpickr-current-month span.cur-month,
  .flatpickr-current-month input.cur-year {
    font-weight: 600;
  }
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    padding: 0.117vw 0.391vw;
  }

  .flatpickr-months .flatpickr-prev-month:hover svg,
  .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #00aa86;
    stroke-width: 800;
  }
  .flatpickr-days {
    margin-top: 0.391vw;
  }

  .flatpickr-day {
    border-radius: 390.586vw;
    height: 1.563vw;
    width: 1.563vw;
    line-height: 1.563vw;
  }

  .flatpickr-day.today.event::after {
    bottom: 0.195vw;
    width: 0.195vw;
    height: 0.195vw;
  }

  .flatpickr-weekday {
    font-weight: 500;
  }

  .flatpickr-footer {
    padding: 0.625vw;
    gap: 0.469vw;
  }

  .flatpickr-date-preview {
    gap: 0.313vw;
  }

  .flatpickr-date-box {
    padding: 0.391vw 0.547vw;
    border-radius: 0.313vw;
    font-size: 0.547vw;
    min-width: 3.906vw;
  }

  .flatpickr-button-wrapper {
    gap: 0.313vw;
  }

  .flatpickr-apply,
  .flatpickr-cancel {
    padding: 0.391vw 0.547vw;
    border-radius: 0.313vw;
    font-size: 0.547vw;
  }
  .export-to-pdf-buttton {
    padding: 0.469vw;
    gap: 0.313vw;
    border-radius: 0.313vw;
  }
  .export-to-pdf-buttton img {
    width: 0.938vw;
    height: 0.938vw;
  }
}
@media screen and (max-width: 1280px) {
  .gallery-section {
    padding: 32px 16px;
  }

  .release-gallery {
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1720px) {
  .gallery-section {
    padding: 32px 48px;
  }

  .release-gallery {
    gap: 5rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1280px) {
  .gallery-section {
    padding: 32px 16px;
  }

  .release-gallery {
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 542px) {
  .gallery-section {
    padding: 32px 32px;
  }
  .gallery-category-tabs-sort-container {
    width: 100%;
    justify-content: flex-start;
  }
  .release-gallery {
    grid-template-columns: 1fr;
  }
  .calendar-sort-download-container {
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    width: 100%;
  }
  .custom-date-input {
    width: 100%;
  }
  .flatpickr-footer {
    justify-content: center;
  }
  .custom-dropdown-container {
    width: 100%;
  }
  .custom-dropdown-toggle {
    justify-content: space-between;
  }
  .custom-dropdown-menu {
    width: 100%;
  }
}