@import url("tanker.css");
@import url("general-sans.css");

:root {
  --main-yellow: hsl(
    var(--main-yellow-h),
    var(--main-yellow-s),
    var(--main-yellow-l)
  ); /* Yellow theme background color */

  --main-yellow-h: 56;
  --main-yellow-s: 100%;
  --main-yellow-l: 72%;

  --main-yellow-lightest: hsl(var(--main-yellow-h), var(--main-yellow-s), 93%);
  --main-yellow-lighter: hsl(var(--main-yellow-h), var(--main-yellow-s), 88%);
  --main-yellow-light: hsl(
    var(--main-yellow-h),
    var(--main-yellow-s),
    85%
  ); /* Yellow theme background color */
  --main-yellow-dark: hsl(var(--main-yellow-h), var(--main-yellow-s), 25%);
  --main-pink: #ffdaff;
  --main-white: hsl(
    var(--main-white-h),
    var(--main-white-s),
    var(--main-white-l)
  );
  --main-white-h: 82;
  --main-white-s: 50%;
  --main-white-l: 88%;
  --main-tan: #fffbb5;
  --main-text: #000;
  --main-border1: 1px solid var(--main-text);
  --main-border2: 2px solid var(--main-text);
  --alt-text: #030a27;
  --main-logo: url("../images/Branding/sitelogo.svg");
  --light-logo: url("../images/Branding/sitelogo_light.svg");

  --box-shadow-bg: rgba(0, 0, 0, 0.8);
  --box-shadow-bg2: rgba(0, 0, 0, 0.4);

  --toggle-bg: #d2c951;
  --toggle-bg-grey: #c5d1b2;

  --toggle-circle: var(--main-yellow);
  --toggle-border: 2px solid var(--main-yellow-dark);

  --theme-color: var(--main-yellow);
  --theme-color-hover-color: var(--main-yellow-dark);

  --calendar-width: 100%;
}

/* Animations */
@keyframes riseFall {
  0% {
    transform: translateY(0px);
  }
  33% {
    transform: translateY(3px);
  }
  66% {
    transform: translateY(-3px);
  }
  99% {
    transform: translateY(0px);
  }
}
@keyframes slideunder {
  0% {
    /* transform: translateY(0); */
    opacity: 100%;
  }

  100% {
    /* transform: translateY(2em); */
    opacity: 0;
  }
}
@keyframes spinCCW {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes spinCW {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes moveUpDown {
  0%,
  100% {
    transform: translateY(0); /* Start and end position (at the top) */
  }
  50% {
    transform: translateY(20px); /* Middle position (moved down) */
  }
}
@keyframes rotate_jiggle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(40deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes full_rotate_with_rebound {
  0% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(395deg);
  }
  90% {
    transform: rotate(350deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes menuExpand {
  0% {
    max-height: 1em;
    height: 1em;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  100% {
    height: 15em;
    max-height: fit-content;
  }
}
@keyframes menuCollapse {
  0% {
    height: 15em;
  }
  99% {
    opacity: 1;
  }
  100% {
    height: 56%;
    opacity: 0;
  }
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.admin-buttons {
  display: flex;
  margin: 0 1em 0 -1em;
  & #sync {
    display: none;
    &.admin {
      display: block;
    }
  }
  @media (width < 1300px) {
    margin: 0.65rem 4em 0 -1em;
  }
}
#mobile_sync {
  display: none;
  &.admin {
    display: block;
    position: relative;
    top: 20px;
    left: 20px;
    & #sync-icon {
      z-index: 2;
    }
    & #save-icon {
      z-index: 1;
      align-items: flex-start;
    }
    &:hover > #save-icon {
      /* background-color: red; */
      height: 8em;
      /* transform: translateY(-70px); */
      padding: 1.25em;
    }
  }
}

#update {
  display: none;
  &.admin {
    display: block;
  }
}

#sync-icon,
#save-icon {
  width: 60px;
  height: 60px;
  border-radius: 10em;
  background-color: var(--main-yellow);
  color: var(--main-text);
  border: 2px solid var(--toggle-bg);
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: fixed; /* Make sure it's fixed position */
  &:is(#sync-icon) {
    bottom: 20px; /* Adjust as needed */
    left: 20px;
  }
  &:is(#save-icon) {
    bottom: 20px; /* Adjust as needed */
    left: 20px;
  }
  &.admin {
    display: flex;
    &:active {
      scale: 0.9;
    }
  }
  &.admin:hover {
    background-color: var(--main-yellow-lightest);
    transition:
      background-color 0.3s ease,
      scale 0.3s ease;
    &:is(#sync-icon) {
      scale: 1.1;
      & i {
        /* animation: rotate_jiggle 0.75s ease infinite; */
        animation: full_rotate_with_rebound 1s ease-in-out forwards;
      }
    }
    &:is(#save-icon) {
      & i {
        /* animation: rotate_jiggle 0.75s ease infinite; */
        animation: riseFall 1s ease-in-out forwards;
      }
    }
  }
  /* left: 50%; Center it horizontally */
  /* transform: translateX(-50%); Center it horizontally */
}
.alertPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3em;
  background: white;
  border: 2px solid;
  border-radius: 10px;
  font-size: 1.3rem;
  font-weight: 500;
  z-index: 10;
}

.total_ver {
  position: relative;
}

.debug {
  display: none;
}

.total_ver::after {
  content: attr(
    data-value
  ); /* Display the tooltip from the data-value attribute */
  position: absolute;
  bottom: 68%; /* Adjust position above the h4 */
  left: 50%;
  transform: translateX(-50%);
  /* background-color: black; */
  color: black;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  visibility: hidden;
  z-index: 10;
}

.total_ver:hover::after {
  opacity: 1;
  visibility: visible;
}

#login-cont {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  & .password-container {
    position: relative;
    & .password-input {
    }
    & .password-toggle {
      position: absolute;
      right: 1em;
      top: 2.5em;
      cursor: pointer;
      z-index: 1;
      & i {
        font-size: 1rem;
      }
    }
  }
  & label {
    margin-top: 0;
  }
  & h2 {
    font-size: 9rem;
    z-index: 1;
    @media (width < 48em) {
      font-size: 5rem;
    }
  }
  & h3 {
    font-size: 3.3rem;
    margin: 0;
    margin-bottom: -1em;
    z-index: 0;
    animation: slideunder 1s 1s linear forwards; /* Adjust the spinning speed */

    @media (width < 48em) {
      font-size: 1.8rem;
    }
  }
  & form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 400px;
    max-width: 60%;
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px var(--main-yellow-light) inset;
      transition: -webkit-box-shadow 0.5s ease-in;
    }
    &:has(input:hover),
    :has(input:active) {
      input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
        transition: background-color 0.5s ease-in;
      }
    }
    & input {
      width: 100%;
      margin-bottom: 10px;

      text-align: center;
      border: 2px solid var(--toggle-bg);
      /* text-align: center; */
      font-size: 1em;
      &:hover {
        box-shadow: 0 0 0 1000px white inset;
      }
      &:not(:hover) {
        box-shadow: 0 0 0 1000px var(--main-yellow-light) inset;
      }
      &:active {
        box-shadow: 0 0 0 1000px white inset;
      }
    }
    & button {
      width: 60%;
      font-weight: bold;
      font-family: "Space Grotesk", sans-serif;
      font-size: 1.2em;
      background-color: var(--main-yellow);
      border-radius: 20px;
      border: 2px solid var(--main-text);
      padding: 10px;
      margin: 20px auto 0;
      color: var(--main-text);
      transition:
        box-shadow 0.3s,
        background-color 0.3s; /*Smooth transition*/
      &:active {
        box-shadow: 0px 0px 0px var(--box-shadow-bg); /*smaller shadow on hover*/
        background-color: var(--toggle-bg);
      }
      &:hover {
        background-color: #fff;
        color: var(--main-text);
        box-shadow: -5px 5px 0px 0px var(--box-shadow-bg); /* Hard shadow with no blur */
        cursor: pointer; /* Add this line to set the hand cursor on hover */
      }
    }
  }
}

#loginStatus {
  margin-top: 20px;
  padding: 20px;
}
.balance {
  text-wrap: balance;
}

.pretty {
  text-wrap: pretty;
}

.red {
  color: red;

  font-style: italic;
  &.bold {
    font-weight: bold;
  }
  &.norm {
    font-style: normal;
  }
}
.green {
  color: green;
  font-weight: bold;
}

.event-icons {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-right: 0.3em;
  margin-top: 0.8em;
  align-items: center;
  & * {
    font-size: 1.4rem;
  }
}

.admin-icon-cont,
.social-icon-cont,
.edit-icon-cont,
.posted-icon-cont {
  display: none;
  & :hover {
    scale: 1.1;
  }
  & :active {
    scale: 0.9;
  }
}

.admin-option {
  display: none;
  &.admin {
    display: block;
    background-color: #bceaaa;
  }

  &:is(.form-control) {
    display: none;
    &.admin {
      display: grid;
      & input {
        display: grid;
      }
    }
  }
}
.admin {
  & .event-icons {
    & .admin-icon-cont,
    .edit-icon-cont,
    .social-icon-cont,
    .posted-icon-cont {
      display: block;
      cursor: pointer;
      & .admin-icon {
        font-size: 1.4rem;
        background-color: transparent;

        &.posted-icon {
          &.fa-clock {
            color: goldenrod;
          }
          &.fa-check-circle {
            color: green;
          }
          &.fa-circle-xmark {
            color: red;
          }
        }
      }
      @media (width < 48em) {
        top: 4em;
        left: 1.4em;

        & .admin-icon {
          /* margin-left: 0;
          margin-top: 0;
          font-size: 1.8rem; */
        }
        /* margin-left: 9.3em; */
      }
    }

    & .applied-icon-cont {
      & .applied-icon {
        color: green;
      }
      @media (width < 48em) {
        & .applied-icon {
          font-size: 1.8rem;
        }
      }
    }
  }
}
.event-icons {
  & .bookmark-icon-cont {
    & .bookmark-icon {
      font-size: 1.8rem;
      background-color: transparent;
    }
  }
  & .applied-icon-cont {
    display: none;
    /*font-size: 1.4rem;
    cursor: default;
    position: absolute;
    top: 2.5em; */
    & .applied-icon {
      /* margin-left: -41px;
      margin-top: 45px; */
      color: green;
      background-color: transparent;
    }
    @media (width < 48em) {
      margin-top: 0;
      left: 1.1em;
      top: 3.5em;
      & .applied-icon {
        margin-left: 0;
        margin-top: 0;
        font-size: 1.8rem;
      }
    }
  }
}

#adminCheckbox {
  display: none;
  opacity: 0;
  cursor: default;
  &.admin {
    opacity: 1;
    margin: 0 0 6px 6px;
  }
  @media (width < 48em) {
    display: none;
  }
}

/* Add more theme-dependent styles using the CSS variable */
.read-more-btn.mobile {
  display: none;
}
.custom-select {
  display: inline-block;
  background-color: var(--main-yellow);
  border: 2px solid var(--main-text);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  text-align: center;
  cursor: pointer;
  font-size: 1em;
  color: var(--main-text);
  font-family: "Space Grotesk", "FontAwesome", sans-serif;
  transition: background-color 0.3s ease;
}

.custom-select:hover {
  background: white;
}

.optionsList li {
  text-align: center;
  cursor: pointer;
  padding: 2px 11px;
}
#customSortByMobile {
  & li {
    text-align: left;
    padding-left: 1.5em;
  }
  margin-bottom: 0.5em;
}

.optionsList.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  border-radius: 10px;
  list-style-type: none;
  z-index: 5;
  margin-top: 1rem;
  margin-left: -0.6rem;
  width: 220px;
}

/* .optionsList li {
  cursor: pointer;
  text-align: left;
  padding: 2px 11px;
} */

.optionsList li:active,
.optionsList li:hover,
.optionsList li:focus {
  background-color: var(--main-pink);
  overflow: hidden;
  border-radius: 10px;
}

.nonselectable {
  pointer-events: none;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* For WebKit-based browsers */
  tap-highlight-color: transparent; /* For non-WebKit-based browsers */
  /* Target the clear button */
  & ::-webkit-search-cancel-button {
    -webkit-appearance: none;

    cursor: pointer;
    height: 1.2em;
    width: 1.2em;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/></svg>");
    background-repeat: no-repeat;
    background-position-x: right;

    &:hover {
      scale: 1.1;
      background-size: 120%;
    }
  }
  & input[type="search"] {
    position: relative;
    /* &::-webkit-input-placeholder {
      text-align: center;
    } */
    &:hover {
    }
  }
}
body {
  color: var(--main-text);
  background-color: var(--main-yellow);
  transition:
    background-color 0.3s,
    color 0.3s;
}

.toggle-container {
  position: absolute;
  left: 20px;
  top: -9px;
  -webkit-tap-highlight-color: transparent; /* For WebKit-based browsers */
  tap-highlight-color: transparent; /* For non-WebKit-based browsers */
}

.toggle {
  display: inline-block;
  width: 60px;
  height: 31px;
  background-color: var(--toggle-bg);
  border: var(--toggle-border);
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  border: 2px solid var(--main-yellow-dark);
  overflow: hidden;
  box-shadow: inset rgba(0, 0, 0, 0.2) -4px 3px 0px 1px;
}

.toggle-circle {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: var(--toggle-circle);
  box-shadow: rgba(0, 0, 0, 0.2) -1px 1px 0px 1px;
  border: var(--toggle-border);
  border-radius: 50%;
  transition: transform 0.3s ease-out;
  pointer-events: none;
  & i {
    font-size: 19px;
    /* margin-top: 0.17rem;
    margin-right: 0.11rem; */
    color: var(--main-yellow-dark);
    &.fa-sun {
      margin-left: 1px;
      font-size: 18px;
    }
  }
}

.toggle-icon {
  font-size: 1.1rem;
  margin-top: 0.12rem;
  margin-right: 0.11rem;
  color: var(--main-yellow-dark);
}

.toggle-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

#color-toggle:checked + .toggle .toggle-circle {
  transform: translateX(29px);
}

p {
  margin: 0;
}
a {
  text-decoration: none;
  font-weight: bolder;
  -webkit-tap-highlight-color: transparent; /* For WebKit-based browsers */
  tap-highlight-color: transparent; /* For non-WebKit-based browsers */
  &:hover {
    & i {
      scale: 0.9;
    }
  }
}

a:hover {
  text-decoration: underline;
  font-weight: normal;
}

/* img {
  loading: lazy;
} */
/* .quill-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    z-index: 2;
  } */
.quill-container {
  border: 1px solid #ccc;
}

.ql-editor,
.ql-container {
  min-height: 5em;
  font-size: 1em;
  font-family:
    space mono,
    Arial,
    sans-serif;
}
.ql-container {
  &[data-textarea-id="budgetDetails"] {
    min-height: 18em;
  }
}
.ql-snow {
  background-color: white;
}
#approvePreview {
  width: 100%;
  padding: 0 15%;
  margin-top: 2em;
  margin-bottom: 2em;
  @media (width < 86em) {
    padding: 0 10%;
  }
  @media (width > 150em) {
    padding: 0 26.5%;
  }
  table,
  th,
  td {
    border: 1px solid #ccc;
    border-collapse: collapse;
  }
  table {
    width: 100%;
  }
  td {
    &:nth-child(1),
    &:nth-child(4),
    &:last-child {
      &:has(span:hover) {
        background-color: pink;
      }

      text-align: center;
      & span {
        font-size: 1.8em;
        transition: font-size linear;
        &:hover {
          font-size: 2.2em;
          cursor: pointer;
        }
      }
    }
    &:nth-child(6) {
      /* Select all td elements that have content */
      &:not(:empty) {
        background-color: rgb(252, 252, 141); /* Or apply any other style */
      }

      /* Select all td elements that are empty */
      /* &:empty {
        background-color: lightcoral; 
      } */
    }
    &:not(:nth-child(2)):not(:nth-child(6)) {
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(5),
    &:nth-child(6) {
      padding-left: 1em;
      padding-right: 1em;
    }
    &:nth-child(2) {
      transition: font-weight 0.2s linear;
      min-width: 10em;
      &:hover {
        font-weight: bold;
        cursor: pointer;
        background-color: rgb(179, 240, 179);
      }
    }
  }
  tr {
    height: 3em;
    &:nth-child(even) {
      background-color: #f2f2f2;
    }
    &:nth-child(odd) {
      background-color: #ddd;
    }
    &:hover {
    }
  }
  th {
    padding: 12px 10px 12px 10px;
    text-wrap: balance;
    vertical-align: bottom;
    min-width: 5em;
    text-align: center;
    background-color: #04aa6d;
    color: white;
    &:nth-child(5) {
      width: 12em;
    }
    &:nth-child(6) {
      width: 20em;
    }
  }
}
/* .suggestion {
  
} */

#submissionForm {
  --border-width: 1px;
  width: 75%;
  @media (max-width: 768px) {
    width: 100%;
  }
  & .optional {
    background-color: var(--main-yellow);
    border-color: var(--toggle-bg);
  }

  /* & .ErrorMsg {
    position: absolute;
    bottom: 62%;
    left: 0;
    padding: 8px;
    background-color: white;
    border: var(--main-border1);
    color: var(--main-text);
    border-radius: 10px;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
  } */
  & * select {
    background-color: white;
    & option {
      font-size: 1.2em;

      &:disabled {
        font-size: 1em;
        color: gray;
      }
    }
  }
  /* & .admin_mode {
    display: none;
  } */
  & .admin_approve {
    grid-column: 4;
    justify-content: flex-end;
  }
  & .suggestions {
    position: absolute;
    border: 0.07em solid transparent;
    background: none;
    max-height: 200px;
    border-radius: 10px;
    overflow-y: auto;
    z-index: 2;
    width: 15em;
    &.active_suggestions {
      border: 0.07em solid black;
      background-color: #fff;
    }
  }
  & .suggestion {
    padding: 5px 10px;
    cursor: pointer;
  }
  & .suggestion:hover {
    background-color: var(--main-pink);
  }
  & .buttonGroup {
    display: inline-flex;
    justify-content: center;
    gap: 1em;
    margin-bottom: 5em;
    & .btn {
      width: 10em;
      &.submit {
        &.disabled {
          border-color: var(--toggle-bg);
          background-color: var(--main-yellow);
          cursor: default;
          &:hover {
            box-shadow: none;
          }
        }
      }
    }
  }
  & .subsection {
    display: none;
  }

  & .quill-container,
  .ql-toolbar {
    border: solid black;
    border-width: var(--border-width);
  }
  & .quill-container {
    border-radius: 0 0 10px 10px;
  }

  & .ql-toolbar {
    border-radius: 10px 10px 0 0;
    margin-top: 0.5em;
  }
  & input[type="search"] {
    text-align: center;
    background-color: white;
  }
  & hr {
    margin: 2em 0 3em 0;
    width: 100%;
    border-style: solid;
  }
  & input[type="date"]:hover,
  input[type="datetime"]:hover {
    cursor: pointer;
  }
  & .disabled {
    & input[type="file"]::file-selector-button {
      background-color: var(--main-yellow) !important;
      border-color: var(--toggle-bg) !important;
      cursor: default;
    }
    cursor: default !important;
    background-color: var(--main-yellow) !important;
    color: var(--toggle-bg) !important;
    border-color: var(--toggle-bg) !important;
    & input::placeholder,
    textarea::placeholder {
      color: var(--toggle-bg);
    }
  }
  & input[type="date"],
  & input[type="datetime-local"] {
    min-width: 10em;
    height: 2.7em;
    width: fit-content;
    background-color: white;
  }
  & textarea,
  input,
  select {
    font-size: 1rem;
    position: relative;
    color: black;
    &:not(input[type="file"]) {
    }

    /* max-width: 100%; */
  }
  & label:has(.invalid) {
    position: relative;
    &::after {
      content: attr(ErrorMsg);
      position: absolute;
      bottom: 62%;
      left: 0;
      padding: 8px;
      background-color: white;
      border: var(--main-border1);
      color: var(--main-text);
      border-radius: 10px;
      font-size: 14px;
      white-space: nowrap;
      transition: opacity 0.3s ease;
    }
  }
  & input:is(.invalid) {
    background-color: pink;
  }
  & textarea {
    max-width: 100%;
    resize: vertical;
    min-height: 5em;
    margin-top: 0.5em;
  }

  @media (width < 90em) {
    width: 80%;
    font-size: 0.8em;
    & textarea,
    input,
    select {
      font-size: 0.8rem;
    }
  }
  @media (width <= 64em) {
    width: 93%;
  }
  & .select-custom {
    position: relative;
    margin-top: 0.5em;

    & .selected {
      cursor: pointer;
      padding: 0.6rem;
      background-color: white;
      border-radius: 10px;
      text-align: center;
      border: var(--border-width) solid black;
      min-height: 2.75em;
      min-width: 7em;
      @media (width < 86em) {
        padding: 0.5rem;
      }
    }
    & .options {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      border: 1px solid #ccc;
      background-color: #fff;
      z-index: 1;
      /* padding-left: 20px; */
      overflow: auto;
      max-height: 250px;
      text-align: left;
      &.active {
        display: block;
        &.timezone {
          width: max-content;
        }
        &.activeCheck {
          padding-left: 0;
          text-align: center;
          & .option {
            padding-left: 10px;
          }
        }
      }
      & .option {
        padding: 10px;
        padding-left: 2em;
        cursor: pointer;
        &.selected-option {
          background-color: var(--main-pink);
          font-style: italic;
        }
        &:hover {
          background-color: var(--main-pink);
        }
      }
    }
  }
}
#addNew {
  max-width: 1200px;

  margin: 2em auto 0;
  & * input {
    border-width: var(--border-width);
  }
}
#eventSpecs {
  display: flex;
  align-items: center;
  gap: 0.5em;
  & span,
  button.btn {
    background-color: var(--main-yellow);
    display: flex;
    align-items: center;
    gap: 0.5em;
    &:hover {
      scale: 1.1;
      cursor: pointer;
    }
    &:active {
      scale: 0.95;
    }
  }
  & i {
    font-size: 1.2em;
  }
}
.submittingAs {
  display: flex;
  align-items: baseline;

  & label {
    display: inline-flex;
    gap: 0.4em;
    padding: 0.5em 0;
    margin-left: 1em;
    &:has(input[name="administrator"]) {
      /* display: none; */
    }
    &:has(input[name="administrator"].admin) {
      display: inline-flex;
    }
    &:not(:nth-of-type(1)) {
      border-left: 2px solid;
      padding-left: 1em;
    }
  }
}
#basicInfo,
#locationInfo,
#eventDetails,
#openCall,
#budget,
#contact,
#submittingAs,
#adminSection,
#terms {
  display: grid;
  grid-template-columns: 15% 30% 20% 20% 15%;
  grid-template-rows: auto;
  row-gap: 1em; /* Adjust spacing between columns */
  align-items: start;
  position: relative;
  & .custom-toggle {
    grid-column: 5;
    display: inline-block;
    position: relative;
    margin-left: 46%;
    width: 96px;
    height: 34px;
    & p {
      color: var(--toggle-border);
      font-size: 1em;
      margin-top: 3.5px;
      margin-left: 2.7em;
      position: absolute;
      z-index: 2;
      font-weight: bold;
      transition: margin-left 0.3s linear;
      pointer-events: none;
    }
    & input {
      display: none;
      &:checked + .custom-toggle-slider {
        &:before {
          transform: translateX(61px);
          background-color: #ffd0d0;
        }
      }
    }
    & .custom-toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: 0.4s;
      border-radius: 34px;
      &:before {
        position: absolute;
        background-color: var(--toggle-circle);
        box-shadow: rgba(0, 0, 0, 0.2) -1px 1px 0px 1px;
        border: var(--toggle-border);
        border-radius: 50%;
        transition: transform 0.3s ease-out;
        content: "";
        height: 23px;
        width: 23px;
        left: 2px;
        top: 2px;
        z-index: 3;
      }
    }
  }
  & * input:not(input[type="checkbox"]) {
    border-radius: 10px;
    /* border-style: solid; */
    border-color: black;
    & *:is(input:not(input[type="file"])) {
      border-style: solid;
      border-color: red;
    }
    &:is(input:not(input[type="file"])) {
      border-color: black;
      border-style: solid;
      /* text-align: center; */
    }
    &:is(input:is(input[type="file"])) {
      border-color: black;
      border-style: dashed;
      border-width: 1px;
    }
    &:is(
        input:is(
            input[type="date"],
            input[type="number"],
            input[type="datetime-local"],
            input[type="text"]
          )
      ) {
      text-align: center;
    }
  }
  & .myNotes {
    background-color: var(--main-yellow-lighter);

    border: solid var(--toggle-bg);
    border-width: var(--border-width);
    border-radius: 10px;
    padding: 1em;
    &.contact-notes {
      margin-left: 2em;
    }
  }
  & h3:not(.secondary) {
    grid-column: 1;
    position: absolute;
    top: 0;
    max-width: 6em;
    margin-top: 0;
  }

  & select {
    min-width: revert;
    max-width: revert;
    font-size: revert;
    border-width: var(--border-width);
  }
  & label {
    margin-top: 0;
    &:has(input:not(input[type="checkbox"])),
    :has(.select-custom) {
      input {
        margin-top: 0.5em;
      }
    }
    /* margin-bottom: 10px; */
    /* text-wrap: nowrap; */
    & input[type="checkbox"]:checked::before {
      transform: scale(1) translateY(2px);
    }
    &:has(input[type="checkbox"]) {
      text-wrap: nowrap;
      display: flex;
      align-items: center;
      gap: 0.5em;
      &:checked::before {
        display: inline-flex;
      }

      & input[type="checkbox"] {
        display: inline-flex;
        gap: 0.4em;
        aspect-ratio: 1;
        width: auto;
      }
    }
  }

  & #Location {
    column-gap: 2em;
    row-gap: 1em;
    grid-column: 2/5;
  }
  &:is(#submittingAs) {
    align-items: center;
    & .submit-child {
      display: flex;
      grid-column: 2;
      align-items: center;
    }
  }
  & #Name,
  & #categorization,
  & #Location {
    grid-column: 2/4;
    grid-template-columns: 1fr 1fr;
    display: grid;
    align-items: start;
    /* justify-items: center; */
    &:is(#Location) {
      grid-template-columns: 1fr 1fr 1fr;
    }

    align-items: center; /* Vertically align labels and inputs */
    & .location-child {
      & input {
        width: clamp(5em, 15em, 30em);
      }

      &:is(.location-child) {
        &.latlong {
          @media (width < 86em) {
            & input {
              max-width: 92%;
            }
          }
        }
        &:first-child,
        &:nth-child(5) {
          grid-column: 1;
        }
        &:nth-child(2),
        &:nth-child(6) {
          grid-column: 2;
        }
        &:nth-child(3) {
          grid-column: 3;
          grid-row: 2;
          & input {
            width: 100%;
          }
        }
        &:nth-child(4),
        &:nth-child(7) {
          grid-column: 4;
        }
      }
      /* & input {
        width: 100%;
      } */
    }
    & .category-child {
      & .select-custom {
        width: clamp(10em, 13em, 30em);
        @media (width < 86em) {
          width: 80%;
        }
      }
    }
  }
  &:is(#basicInfo) {
    grid-template-columns: 15% 20% 20% 25% 20%;
    row-gap: revert;
    & .description {
      grid-column: 2 / 4;
      grid-row: 2;
      margin-top: -1.5em;
      text-align: center;
      & i {
        font-size: 1.2em;
      }
    }
    & #Name {
      & .name-child {
        & input,
        select {
          width: clamp(5em, 13em, 30em);
          @media (width < 86em) {
            width: 80%;
          }
        }
      }
    }
  }
  & #active {
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr;
    grid-column: 4/5;
    justify-items: center;
    column-gap: 1em;
    margin: 0 1em 0 0.5em;

    & .active-child {
      & input[type="number"] {
        width: 10em;
        text-align: center;

        border-style: solid;
      }
    }
  }
  /* General form styling */
  & #logoUpload {
    grid-row: 1 / 3;
    grid-column: 4;
  }
  & #logoUpload,
  .file-upload-container {
    border-radius: 5px;
    & input[type="file"] {
      font-style: oblique;
    }
    & #imageUrlInput {
      margin-top: 1em;
      width: 100%;
      background-color: var(--main-yellow);
      transition: background-color 0.3s ease-in-out;
      &:hover {
        background-color: white;
      }
    }
    & input[type="file"]::file-selector-button {
      padding: 0.5em 1em;
      border-radius: 10px;
      width: 50%;
      opacity: none;
      background-color: white;
      border-style: solid;
      border-color: black;
      border-width: var(--border-width);
      cursor: pointer;
    }
    & label {
      display: block;
      margin-bottom: 5px;
      margin-left: 1em;
    }
    /* Input fields */
    & input[type="file"],
    input[type="hidden"] {
      width: 100%;
      padding: 10px;
      border-radius: 3px;
      box-sizing: border-box; /* Ensures padding is included in width */
    }
    & #imgSubmit {
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
  }
  &:is(#eventDetails) {
    grid-template-columns: 15% 33% 15% 37%;
    grid-template-rows: 0.3fr 1fr;
    & [date-option="true"] {
      aspect-ratio: 1;
    }
    & .event-group {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      grid-column: 2;
      column-gap: 2em;
    }
    & .event-child {
      /* grid-column: 4/5;
      margin: 0 auto; */
      & input {
        width: 10.8em;
        text-align: center;
        @media (width < 86em) {
          width: 90%;
        }
      }
    }
    & #eventNotes {
      width: 100%;
      padding: 10px;
      border-radius: 10px;
      border: solid black;
      border-width: var(--border-width);
      box-sizing: border-box; /* Ensures padding is included in width */
    }
    & .eventNotes {
      grid-row: 2;
      grid-column: 4/5;
    }
    & .sameDate {
      display: flex;
      flex-direction: row-reverse;
      align-items: stretch;
      gap: 0.8em;
      grid-column: 3;
      justify-content: flex-end;
      margin-top: 2.7em;
      & label {
        margin-left: 0;
      }
      @media (width < 86em) {
        flex-direction: column;
        align-items: center;
        margin-top: revert;
      }
    }
  }
  &:is(#openCall) {
    grid-template-columns: 15% 30% 30% 25%;
    grid-auto-rows: 1fr; /* Sets all grid rows to have equal height */
    & .quill-cont {
      height: 100%;
    }
    & .openCall-child {
      /* & .selected {
        max-width: 70%;
      } */
      & .select-custom {
        display: flex;
        align-items: center;
        & .selected {
          width: 70%;
        }
      }
    }
    & input[type="date"] {
      @media (width < 86em) {
        width: 90%;
      }
    }
    & form {
      display: flex;
      flex-direction: column;
      row-gap: 1em;
    }
    & input[type="url"] {
      width: 100%;
      /* @media (width < 86em) {
        width: 90%;
      } */
    }
    & .openCall-child:nth-child(2) {
      grid-column: 2;
      & i {
        padding: 0 1.5em;
        margin-left: 1em;
      }
      & select {
        width: 75%;
        @media (width < 86em) {
          width: 70%;
        }
      }
    }
    & .openCall-child:nth-child(3) {
      grid-column: 3;
      & select {
        width: 75%;
      }
      & i {
        padding: 0 1.5em;
        margin-left: 1em;
      }
    }
    & .openCall-child.app {
      grid-column: 2/4;
      grid-row: 3/5;
      margin-top: -3em;
    }
    & .openCall-group {
      display: flex;
      column-gap: 2.8em;
      grid-column: 2;
      grid-row: 2;
    }
    & .sameDate {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      grid-column: 3;
      grid-row: 2;
      justify-content: center;
      width: 47%;
      margin-left: 37%;
      min-width: 10em;

      @media (width < 86em) {
        flex-direction: column;
        align-items: center;
        margin-top: revert;
        width: 60%;
      }
    }
    & .quill-container,
    .ql-toolbar {
      width: 92%;
    }
    & .quill-container {
      height: 17em;

      @media (width < 86em) {
        height: 20em;
      }
    }
    & #openCallWhom,
    #appNotes {
      width: 92%;
      height: 80%;
      padding: 10px;
      border-radius: 10px;
      border: solid black;
      border-width: var(--border-width);

      box-sizing: border-box; /* Ensures padding is included in width */
      &:is(#appNotes) {
        display: none;
      }
    }
    & #openCallWhom {
      width: 100%;
      max-height: 5.5em;
    }
    & .file-upload-container {
      display: flex;
      flex-direction: column;
      row-gap: 1em;
      grid-column: 4;
      grid-row: 2/5;
    }
  }
  &:is(#budget) {
    grid-template-columns: 15% 24% 17% 26% 18%;
    & .provided {
      & p {
        margin-bottom: 1em;
      }
    }
    & .quill-container {
      max-height: 12em;
    }
    & .budget-child {
      position: relative;
    }
    & .budget-child:nth-child(2) {
      grid-column: 2;
      grid-row: 1;
      max-width: 80%;
      & #budgetField {
        width: 80%;
      }
    }
    & .budget-child:nth-child(3) {
      grid-column: 3;
      grid-row: 1;
      margin-left: -1.3em;
      & .select-custom {
        width: 80%;
        & .linebreak {
          cursor: default;
          pointer-events: none;
        }
      }
    }
    & .budget-child:nth-child(4) {
      grid-column: 2;
      grid-row: 2;

      & #otherText {
        display: inline;
        opacity: 0;
        margin-left: revert;
        width: 200px;
        transition: opacity 0.3s ease;
      }
    }
    & .budget-child:nth-child(5) {
      grid-column: 4/6;
      grid-row: 1/3;

      & textarea {
        display: none;
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        border: solid black;
        border-width: var(--border-width);

        box-sizing: border-box; /* Ensures padding is included in width */
      }
    }
  }
  &:is(#contact) {
    grid-template-columns: 15% 1.2fr 1.2fr;
    & .contact-list {
      grid-column: 2;
    }
    & .contact-titles {
      grid-column: 2 / 4;
      display: grid;
      grid-template-columns: 0.6fr 0.9fr 0.4fr;
      margin-bottom: 1em;
      & p:first-child {
        grid-column: 2;
      }
      & p:nth-child(2) {
        grid-column: 3;
      }
    }
    & .contact-methods {
      grid-column: 2;
      display: flex;
      flex-direction: column;
      row-gap: 0.25em;
      & .contact-item {
        display: grid;
        grid-template-columns: 0.5fr 1fr 0.3fr;
        align-items: center;
        & label {
          grid-column: 1;
        }
        & input {
          margin-left: 0;
          grid-column: 2;
          &:not(input[type="checkbox"]) {
            width: 85%;
            @media (width < 86em) {
              width: 80%;
            }
          }
        }
        & input[type="checkbox"] {
          grid-column: 3;
          /* margin-left: 2em; */
        }
        & label[taglet="primary"] {
          grid-column: 4;
        }
      }
    }
  }
  &:is(#adminSection) {
    grid-template-columns: 15% 85%;
    margin-bottom: 2em;
    & label:has(textarea) {
      grid-column: 2/5;
      & textarea {
        width: 100%;
        min-height: 5em;
        padding: 10px;
      }
    }
  }
  &:is(#terms) {
    grid-template-columns: 15% 85%;
    margin-bottom: 2em;
    & label:has(input[type="checkbox"]) {
      grid-column: 2/5;
      text-wrap: wrap;
      gap: 1em;
      & * input[type="checkbox"] {
        display: inline-flex;
      }
    }
  }
}

#imgPreview {
  grid-column: 5;
  grid-row: 1/3;
  width: 10em;
  height: 10em;
  margin: auto;
  margin-top: 1.7em;
  & img {
    width: -webkit-fill-available;
    width: inherit;
    border-radius: 50%;
  }
}
#bmc-wbtn {
  -webkit-tap-highlight-color: transparent; /* For WebKit-based browsers */
  tap-highlight-color: transparent; /* For non-WebKit-based browsers */
  z-index: 1000 !important;
}

.close-icon-x {
  scale: 2;
  background: white;
  border-radius: 50%;
}

.text-themeTextColor {
  color: black !important;
}
.tw-btn-bg:before,
.tw-theme-color-rounded-full:before {
  background-color: var(--main-yellow) !important;
}
.tw-theme-color-rounded-full:hover:before {
  background-color: var(--main-yellow-dark) !important;
}
#calendar-cont {
  width: 80%;
}

.cal-icon {
  & i:hover {
    scale: 1.1;
  }
}
#calendar {
  height: 100%;
  min-height: 100vh;
  width: calc(80% + 20px); /* Account for scrollbar width */
  @media (width < 48em) {
    min-height: 80vh;
  }
  & .fc-scroller {
    overflow: hidden;
  }

  & .fc fc-scrollgrid {
  }
  & .fc-daygrid-day {
    /* max-height: 10px; */
    /* width: calc(var(--calendar-width) / 7.1); */
    /* width: 20px;
    border: 1px solid red; */
    padding: 0 0.2rem;
  }
  & .fc-theme-standard td,
  .fc-theme-standard th {
    /* width: calc((var(--calendar-width) * 0.8) / 7); */
  }
  /* & .fc-scrollgrid-sync-table {
    width: 100vw!important;
  } */
  & .past-event .fc-event-main {
    border-color: var(--toggle-bg);
    background-color: var(--main-yellow-lighter);
  }
  & .fc-event-main {
    color: var(--main-text);
    background: white;
    border-radius: 5px;
    border: var(--main-border2);
    padding: 0 10px;
    text-overflow: ellipsis;
  }
}
.fc-theme-standard td {
  width: calc((var(--calendar-width) * 0.8) / 7);
  @media (width < 48em) {
    &:nth-child(1) {
      width: calc((100vw * 0.3));
    }
    &:nth-child(2) {
      width: calc((100vw * 0.1));
    }
    &:nth-child(3) {
      width: calc((100vw * 0.6));
      text-align: right;
      text-wrap: balance;
    }
  }
}

.filter_container_map {
  width: clamp(800px, 40%, 1500px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.filter_cta_map h3 {
  border: 2px solid var(--main-text);
  border-radius: 25px;
  padding: 20px 10px 20px 10px;
}
.filter_cta_map a {
  width: 100%;
  margin: 0 auto;
  text-decoration: none;
}

.filter_cta_map p {
  margin-top: 0;
}

section.inactive-events,
section.project-events {
  display: flex;
  margin-block: 1em;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  & label {
    &.unchecked {
      color: red;
    }
    margin: 0;
  }
}

select[multiple].scroll_map {
  width: 220px;
  height: 135px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.filter_dropdown_map,
.filter_cta_map {
  flex: 1;
  padding: 0 40px;
  display: flex;
  /* width: 100%; */
  text-align: center;
  flex-direction: column;
}

/* Search Bar Styling */
.leaflet-top,
.leaflet-bottom {
  z-index: 999 !important;
}

.leaflet-top {
  bottom: 10px;
}

.leaflet-control-zoom.leaflet-bar.leaflet-control {
  border: var(--main-border2);
  border-radius: 12px;
  & a:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  & .leaflet-control-zoom-out {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
#map {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

.map-desc {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  @media (width < 72em) {
    justify-content: flex-end;
  }
}

.map-cont {
  max-height: 80vh;
  height: 1000px;
  width: 80%;
  border-radius: 15px;
  border: var(--main-border2);
  padding: 0px 15px 80px;
  background-color: white;
  position: relative;

  @media (width < 72em) {
    padding-bottom: 60px;
  }

  & h4 {
    text-align: center;
    margin: 1.2rem auto;
  }

  & #toggleFullscreen {
    font-size: 1.25rem;
    margin: auto 5px;
    cursor: pointer;
    &:hover {
      scale: 1.1;
    }
    @media (width < 72em) {
      padding: 10px;
    }
  }

  &.fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    max-height: 100%;
    border-radius: 0px;
    border: none;
    /* Added z-index so it's on top of everything else */
    z-index: 1001;
  }
}

a.map-content-name {
  font-weight: 700;
  text-decoration: none;
}

.map-icon-content {
  & a {
    color: #0078a8;
    font-weight: 500;
    &.map-content-name {
      font-weight: 700;
      text-decoration: none;
      color: black;
    }
  }
}
.map-intro {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
}

.filter_dropdown > * {
  width: 220px;
}
.filter_scroll h3,
.filter_dropdown h3 {
  margin: 10px;
}

.opencall_cont {
  & a {
    text-decoration: none;
  }
  & .notes-desc {
    & span {
      & s {
        font-weight: normal;
        color: var(--main-text);
      }
    }
  }
}

.search-container {
  position: relative;
}
.search_suggestions {
  background-color: white;
  border: 2px solid var(--main-text);
  border-radius: 10px;
  width: 220px;
  padding: 0;
  position: absolute;
  max-height: 200px;
  overflow: auto;
}

.ui-helper-hidden-accessible {
  display: none;
}

.ui-menu-item-wrapper {
  margin-left: 0.5rem;
  &::first-letter {
    margin-left: 0rem;
  }
  &::before {
    content: "- ";
    margin-left: -0.6rem;
  }
}

.ui-menu-divider {
  display: none;
}

.search_suggestions > li {
  cursor: pointer;
  list-style: none;
  padding: 0.3rem 1rem;
  text-indent: 0;
}
.search_suggestions > li:hover {
  background: var(--main-pink);
  /* border-radius: 20px; */
}

#searchForm input,
#searchForm_mobile input {
  &::-webkit-input-placeholder {
    /* For WebKit browsers */
    margin-left: -1.5em;
    text-align: center;
  }
  &:focus-visible {
    outline: none;
  }
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--main-yellow);
  border: 2px solid var(--main-text);
  border-radius: 10px;
  width: 220px;
  padding: 10px 40px 10px 10px;
  font-size: 1em;
  color: var(--main-text);
  font-family: inherit;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease-in-out;
  position: relative;
  text-align: left;
}

#searchForm_mobile input:hover,
#searchForm input:hover {
  background-color: white;
  cursor: text;
}

#searchForm_mobile input::placeholder,
#searchForm input::placeholder {
  color: var(--main-text); /* Change placeholder text color */
  font-style: italic; /* Make placeholder text italic */
  font-weight: normal; /* Optionally adjust font weight */
}

#searchForm_mobile input:focus::placeholder,
#searchForm input:focus::placeholder {
  color: #999; /* Change placeholder text color */
}

#searchForm_mobile input:focus,
#searchForm input:focus {
  background-color: white;
}

/* Style the clear search icon */
.clear-search,
.clear-search_mobile {
  cursor: pointer;
  display: none;
  margin-left: -40px; /* Adjust position */
  transition: transform 0.3s linear;
  font-size: 1.2rem;
  padding: 11px 10px;
  border-radius: 50%;

  /* background: white; */
  position: absolute;
}

.far.fa-times-circle {
  background-color: var(--main-yellow);
  border-radius: 50%;
  &:hover {
    background-color: white;
  }
}

/* 
.clear-search > i {
  height: 50px;
} */

/* Rotate the X icon when hovering */
.clear-search.hover,
.clear-search_mobile.hover {
  transform: rotate(180deg); /* Rotate the icon */
  font-weight: bold; /* Change font weight */
  font-size: 1.4rem;
}

/* Keep the icon visible after hover */
.clear-search.active,
.clear-search_mobile.active {
  transition-delay: 1s; /* Delay transition */
  opacity: 1; /* Maintain opacity */
}

/* Show clear search icon when input has value */
#search:not(:placeholder-shown) + .clear-search,
#search_mobile:not(:placeholder-shown) + .clear-search_mobile {
  display: inline-block;
}

.search_title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.subtext {
  font-size: smaller;
  font-style: italic;
}

.type_content {
  display: inline;
}

.results_container {
  display: flex;
  width: clamp(800px, 1000px, 1500px);
  margin-bottom: 2rem;
  justify-content: center;
  /* grid-template-columns: 25% 50% 25%; */
  align-items: center;
  &:has(h4):has(.admin) {
    width: clamp(800px, 1400px, 1500px);
    max-width: 95%;
    @media (width < 48em) {
      width: auto;
    }
    & #paginationContainerTop {
      grid-template-columns: 35% 30% 35%;
      &.admin {
        & #total_verified {
          display: flex;
          gap: 1em;
          padding: 1.5em 0;
          @media (width < 48em) {
            margin-top: 0.5em;
            gap: 0;
            padding: 0;
          }
        }
      }
      & #total_verified {
        justify-content: center;
        background-color: var(--main-yellow-lighter);
        border-radius: 20px;
        border: 1px solid var(--toggle-bg);
        width: 100%;
        overflow: hidden;

        & span.count_title {
          text-decoration: underline;
        }
        & span.total.both {
          font-weight: bold;
          text-decoration: underline;
        }
        & .total_ver {
          margin: 0;

          padding: 0.5em;

          @media (width < 86em) {
            padding: 1em 1em;
          }
          /* &:nth-of-type(1) {
            border-color: var(--toggle-bg);
            border-width: 0 1px 0 0;
            border-style: solid;
          }
            */
          &:last-of-type {
            border-color: var(--toggle-bg);
            border-width: 0 0px 0 1px;
            border-style: solid;
          }
          &:nth-child(2) {
            border-color: var(--toggle-bg);
            border-width: 0 1px 0 1px;
            border-style: solid;
          }
          &:nth-child(4):last-child {
            border-color: var(--toggle-bg);
            border-width: 0 0px 0 1px;
            border-style: solid;
          }
          &:nth-child(3):not(:last-child) {
            border-color: var(--toggle-bg);
            border-width: 0 0px 0 0px;
            border-style: solid;
          }
          &:nth-child(4):not(:last-child) {
            border-color: var(--toggle-bg);
            border-width: 0 1px 0 1px;
            border-style: solid;
          }
        }
      }
    }
  }
  & * {
    text-align: center;
  }
}

.pagination,
#pagination-top {
  grid-column: 2; /* Middle column */
  display: flex;
  align-items: center;
  justify-content: center;
}

#total_number,
#total_no {
  grid-column: 1; /* Left column */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
  &.admin {
    display: none;
  }
}
#total_verified {
  grid-column: 3; /* Left column */
  grid-row: 1;
  display: none;
  &.admin {
    display: flex;
  }
}

.arrow {
  font-size: 1.5em;
}
.pageicon:hover {
  scale: 1.2;
}

input[type="checkbox"] {
  appearance: none;
  margin: 0;
  color: var(--main-yellow-dark);
  width: 1.2em;
  height: 1.2em;
  border: 0.15em solid var(--main-yellow-dark);
  border-radius: 0.2em;
  transform: translateY(0.055em);
  padding: 0;
}

.form-control {
  font-size: 1rem;
  line-height: 1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
  cursor: pointer;
  &.selectAllLabel {
    display: none;
    &.visible {
      display: grid;
    }
  }
}
.form-control + .form-control {
  margin-top: 1em;
}

.form-control:hover {
  font-weight: bold;
}

input[type="checkbox"] {
  display: grid;
  place-content: center;
  cursor: pointer;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  --form-control-color: var(--main-text);
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked {
  background-color: white;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}
input[type="checkbox"]:hover {
  border: 0.2em solid var(--main-yellow-dark);
}

input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid #cbbe18;
  outline-offset: max(2px, 0.15em);
}

h1 {
  line-height: 1.25;
}

.h2_5 {
  font-size: 1.3rem;
}

.thin {
  border: 1px dotted var(--main-text);
  border-radius: 5px;
  width: 100%;
  /* width: 85vw; */
}

#continent {
  height: 70%;
}
.type-checkbox {
  width: auto;
}
.checkbox {
  margin-top: 0;
}

.filter_container {
  width: clamp(900px, 80%, 1500px);
}
.filter_header {
  display: grid;
  grid-template-columns: 28% 26% 21% 25%;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: center;
  @media (width <= 1500px) {
    grid-template-columns: 28% 26% 16% 30%;
    justify-items: stretch;
  }
}

.filter_header * option {
  padding: 3px 5px;
}
select.listoptions {
  font-size: 1rem;
}
select.listoptions * {
  font-size: 1.1rem;
}

select::-moz-popup-option {
  /* Firefox */
  padding: 5px;
}

select option {
  /* Chrome, Safari */
  padding: 5px;
}

.filter_dropdown,
.filter_scroll,
.filter_cta {
  /* background-color: red; */
  /* border: 1px solid var(--main-text);  */
  padding: 10px;
  margin-right: 20px;
}

.filter_dropdown {
  flex: 0 0 15%;
}

.filter_scroll,
.festival_image {
  padding-bottom: 20px;
}

.filter_scroll {
  min-width: 18em;
  & label {
    margin-top: 1.25em;
  }
}

.archiveMsg {
  padding: 10px 40px 30px 50px;
  border: var(--main-border1);
  border-radius: 25px;
  height: fit-content;
  margin: auto;
  background-color: white;
}
.bookmark-icon {
  /* margin-left: -45px; */
  /* margin-top: 13.4px; */
  /* font-size: 1.4rem; */
  /* color: red; */
  cursor: pointer;
}

.bookmark-icon:hover {
  scale: 1.1;
}

.type-select,
.post-status {
  text-transform: capitalize;
  max-height: 2em;
  overflow: hidden;
  position: relative;
  &:hover {
    max-height: fit-content;
    overflow: auto;
  }
  /* Style the select element to make it look like a dropdown */
  & {
    width: 100%; /* Adjust the width as needed */
    padding: 10px; /* Add padding for better appearance */
    border: 1px solid #ccc; /* Add border for better visibility */
    border-radius: 5px; /* Add border radius for rounded corners */
    background-color: #fff; /* Set background color */
    cursor: pointer; /* Change cursor to pointer */
  }

  /* Style the selected options */
  & option:checked {
    background-color: unset;
    font-style: italic;
  }
  /* Style the selected options */
  & option:hover {
    background-color: var(
      --main-pink
    ); /* Change background color of selected options */
  }
  & option:disabled {
    background-color: unset;
    color: unset;
  }

  /* &::after {
    content: "buttholes";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
  } */
}
/* .event_name {
  margin: auto 0 !important;
} */

.budget {
  & hr.thin {
    margin: 1em 0;
  }
  & .notes-desc:has(i) {
    /* display: inline-flex; */
    grid-template-columns: 10% 90%;
    /* display: grid; */
    display: flex;
    justify-content: center;
    align-items: baseline;
    justify-items: start;
    column-gap: 0.4em;
    flex-wrap: wrap;

    & p:first-of-type {
      text-wrap: balance;
      grid-column: 2;
      grid-row: 1;
    }
    & p {
      padding-left: 0.5em;
    }
    & p,
    ol {
      text-wrap: balance;
      grid-column: 2;
      padding: 0;
    }
  }
}

.budget-span {
  margin-top: 1em;
  width: 13em;
  padding: 8px;
  background-color: white;
  border: var(--main-border2);
  color: var(--main-text);
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  &.visible {
    opacity: 1;
    text-wrap: balance;
    display: flex;
    flex-direction: column;
    & > h4 {
      margin: 0;
      text-align: center;
    }
    & > ol {
      margin: 0;
    }
    & > p {
      margin-left: 0.5em;
      max-width: unset;
    }
  }
}
.budget,
.festival_text,
.event_links,
.event_location,
.opencall_cont {
  padding: 15px;
}

.festival_text p:last-of-type {
  margin-bottom: 10px;
}

.date_type {
  display: none;
}

.opencall_cont {
  text-align: center;
}

.notes-desc {
  max-width: 350px;
  overflow-wrap: normal;
  & a {
    font-weight: 400;
    font-size: inherit;
  }
  & span {
    /* font-size: 0.5em; */
    & a {
      font-size: inherit;
      font-weight: 400;
    }
  }
}

.activeEvent.last-checked {
  display: none;
}

.festival.admin span.last-checked {
  display: flex;
}

.festival {
  & .admin-select {
    display: none;
  }
  &.post {
    & .event_basics {
      & * {
        margin-bottom: 5px;
      }
    }
    & .paid-notes {
      font-size: small;
      grid-row: 2;
      grid-column: 1 / span 2;
      @media (width < 48em) {
        text-align: center;
        padding: 0 2em 1em;
      }
    }
    & .event_links_ind {
      justify-content: unset;
      gap: 0;
      margin-top: 4em;
    }
    & .dates_lg {
      display: block;
    }
  }
  &.post:has(.read-more) {
    .read-more {
      grid-column: 2 / span 1;
      @media (width < 48em) {
        margin-bottom: 1em;
      }
    }
    .moreInfo {
      max-height: 15em;
      padding: 0 1em;
      & p,
      div {
        max-width: 100%;
      }
      &.show-full-text {
        padding-bottom: 2em;
        max-height: 100%;
      }
    }
  }
  &.admin {
    position: relative;
    & .type_lg {
      display: none;
    }
    & .date_type {
      @media (width < 48em) {
        margin-bottom: 0;
      }
    }
    & .date_type p:last-child {
      display: none;
    }
    & .date_type p:first-child b {
      display: inline;
    }
    & .admin-select {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      margin-bottom: 0.5em;
      cursor: pointer;
      @media (width < 48em) {
        font-size: 0.9em;
      }
      & label {
        margin-top: 0;
      }
      & select {
        border: none;
        padding: 0 10px;
        margin-left: -0.7em;
        text-align: left;
        min-width: fit-content;
        height: fit-content;
        background-color: transparent;
        max-height: 1.5em;
        &:focus-visible {
          border: none;
        }
        &:hover {
          max-height: 100%;
        }
      }
    }
  }
}

.app-notes {
  &::first-line {
    color: red;
  }
}

.budget {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  & p,
  div {
    max-width: 15ch;
    word-break: normal;
  }

  @media (45rem < width <= 70rem) {
    & p {
      max-width: 10ch;
    }
  }
  @media (45rem > width) {
    & p {
      max-width: 20ch;
    }
    &.desktop {
      display: none;
    }
  }
  @media (width <= 45em) {
    margin-bottom: 20px;
  }
}

main:has(#changelog-container) {
  max-width: 600px;
  & li:has(ul) {
    list-style: none;
    &:not(:last-of-type) {
      margin-bottom: 2em;
    }
    & li:first-child {
      margin-top: 0.5em;
    }
    & li:not(:first-child) {
      margin-top: 0.4em;
    }
  }
}

/* .filter_cta,
.event_application {
  flex-grow: 9999;
  text-align: center;
} */
.filter_cta {
  & a {
    text-decoration: none;
  }
  & h1 {
    margin-top: 0;
    margin-bottom: 0.25em;
    text-wrap: balance;
    text-align: center;
  }
  & .h2_5 {
    line-height: 1.3;
  }
  & h3 {
    border: 2px solid var(--main-text);
    border-radius: 5px;
    padding: 20px 10px 20px 10px;
    width: 100%;
  }
  & p {
    text-wrap: balance;
    text-align: center;
  }
}

.no_results {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding-bottom: 50px;
}

.no_results img {
  margin-top: 20px;
  max-width: 400px;
  border-radius: 50%;
}
.pagination,
#pagination-top,
#paginatoin-bottom {
  margin: 2rem 0;
}

#paginationContainerTop {
  &.admin {
    & .results_container {
      width: clamp(800px, 1250px, 1500px);
    }
  }
}

#paginationContainerBottom,
#paginationContainerTop {
  width: 100%;
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: auto auto;
  align-items: center;
  &:is(#paginationContainerBottom) {
    width: clamp(800px, 1000px, 1500px);
    @media (48em < width < 86em) {
      width: clamp(800px, 800px, 1500px);
    }
    @media (width < 48em) {
      margin-bottom: 2rem;
      width: 100%;
      & #total_number {
        display: none;
      }
    }
  }
  @media (width < 48em) {
    display: flex;
    flex-direction: column;
    & h4 {
      margin: 0.5em auto;
    }
  }
}

#pagination-bottom {
  margin-bottom: 30px;
}
.pagination .active,
#pagination-top .active,
#pagination-bottom .active {
  padding: 7px;
  border: 2px solid var(--main-text);
  border-radius: 5px;
  margin: 0 5px;
  font-size: 1.2rem;
}
.pagination .active:hover,
#pagination-top .active:hover,
#pagination-bottom .active:hover {
  cursor: default;
  font-weight: bold;
}

.pagination a,
#pagination-top a,
#pagination-bottom a {
  padding: 0.25em;
  text-decoration: none;
}
.pagination a:hover,
#pagination-top a:hover,
#pagination-bottom a:hover {
  font-weight: normal;
}

.group_container {
  margin-top: 0px;
}

.group_heading h2 {
  text-align: center;
  line-height: 1;
}

.group_heading {
  display: flex;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  /* color: var(--main-yellow); */
  /* -webkit-text-stroke: 0.01em var(--main-text); */
  /* text-shadow: -3px 2px 0px var(--main-text); */
  font-size: 2rem;
  /* text-transform: capitalize; */
  gap: 0.25rem;

  & .sup {
    text-transform: none;
  }
}

.day {
  padding-left: 0.65rem;
  z-index: 1;
}

.sup {
  font-size: smaller; /* Set the font size smaller */
  margin-left: -3px;
  margin-top: 2.7rem;
  z-index: 0;
}

#resultsContainer {
  display: inline-flex;
  flex-direction: column;
  width: clamp(600px, 85%, 1500px);
}

.festival {
  display: grid;
  grid-template-columns: 2% 35% 15% 14% 17% 18%;
  grid-template-rows: auto auto;
  /* gap: 15px; */
  /* column-gap: 20px; */
  padding: 40px 40px 20px 30px;
  border: 1px solid var(--toggle-bg);
  margin-bottom: 20px;
  border-radius: 25px;
  background-color: var(--main-yellow-light);
  position: relative;
  &.post {
    grid-template-columns: 40% 60%;
  }
  @media (width >= 45rem) {
    &:hover {
      box-shadow: -5px 7px 8px 3px rgba(0, 0, 0, 0.1);
      background-color: var(--main-yellow-lightest);
      transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
      & .moreInfo {
        &::after {
          content: "";
          background: none;
          pointer-events: none; /* Ensures this overlay doesn't interfere with content */
        }
      }

      & * {
        background-color: var(--main-yellow-lightest);
        transition: background-color 0.3s ease;
      }
      & .budget-span > *,
      .budget-span {
        background-color: white;
      }
    }
  }
  @media (45rem <= width <= 85rem) {
    padding: 30px 30px 10px 20px;
  }
  @media (width < 800px) {
    &.admin {
      .event-icons {
        gap: 0.5em;
      }
    }
    .event-icons {
      position: absolute;
      gap: 1em;
      top: 2.5em;
      left: 2.5em;
      margin: 0;
    }
    & p,
    div:not(.event_links_ind_mobile) {
      font-size: 1rem;
      line-height: 1.5;
    }
  }
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

.item3 {
  grid-column: 3;
}

.item4 {
  grid-column: 4;
}

.item5 {
  grid-column: span 4;
}

.event_container {
  @media (width > 48em) {
    & span {
      transform: translateX(-0.5em);
    }
  }
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 auto 15px;
  height: 50px;
  padding: 10px;
}

.event_container img:hover {
  scale: 1.2;
}
.activeEvent {
  display: flex;
  flex-direction: row;
  gap: 0 5px;
}
.activeEvent p {
  text-transform: capitalize;
}

.read-more-btn {
  margin-bottom: 50px;
  display: flex;
  font-size: 1.1em;
  padding: 4px 13px;
  margin-top: 25px;
  &.read-more {
    background-color: var(--main-yellow-lightest);
    width: 11em;
  }
  &:hover {
    &::after {
      animation: riseFall 1s linear infinite;
    }
  }
}

.read_more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.read_more h4 {
  margin-bottom: 0;
  margin-left: 3.75rem;
  text-align: left;
  width: 100%;
}

.event_bio {
  display: -webkit-box;
  /* -webkit-line-clamp: 2;  */
  /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(2.02rem * 2); /* Show only two lines initially */
  transition: max-height 0.3s ease; /* Smooth transition for height change */
}

.event_bio.expanded {
  max-height: none; /* Allow the full text to be shown when expanded */
}

.event_location p {
  margin-top: 0;
}
/* .festival {
  display: flex;
  margin-bottom: 30px;
  justify-content: flex-start;
} */
.event_location h4 {
  margin-bottom: 0;
}
.festival_text h3 {
  font-size: 1.4rem;
  line-height: 1.2;
}
.event_links h4 {
  @media (width>48em) {
    margin-bottom: 20px;
  }
  @media (width<=48em) {
    margin-bottom: 0.25em;
  }
}
.event_links_ind,
.event_links_ind_mobile {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 3px;
}

.event_links_ind_mobile {
  display: none;
}

.festival_text {
  margin-top: -1rem;
}

.festival_text h3,
.festival_text h3 a {
  text-wrap: balance;
  text-decoration: 0;
  font-weight: 700;
}

.budget h4,
.festival_text h4,
.festival_text h4 a,
.festival h4 {
  margin-top: 0;
  text-decoration: none;
}

.festival img {
  height: 50px;
  min-width: 50px;
  margin-right: 20px;
  border-radius: 50%;
  border: 2px solid var(--main-text);
}

.festival_hr hr {
  border: 2px dotted var(--main-text);
  border-radius: 5px;

  /* width: 85vw; */
}

.festival_hr {
  margin: 10px 30px 40px 30px;
  display: none;
}
.fest_desc {
  padding: 10px;
  margin-top: -10px;
  & .notes-desc {
    margin-bottom: 1em;
    & a {
      font-size: 1em;
    }
  }
}

.event_links {
  display: inline-flex;
  flex-direction: column;
}

.event_links a {
  margin-bottom: 10px;
  /* text-decoration: underline; */
}
.event_links a:hover {
  font-weight: normal;
}

/*Filter Menu Settings*/
.month-filter label {
  display: inline-block;
  margin-right: 10px; /* Adjust spacing between months */
  margin-top: 0;
}

.filter-container {
  list-style-type: none;
  padding: 0;
  margin-top: 30px;
  /* margin-top: 0; */
}
#filter-month {
  display: none;
}

select[multiple] {
  width: fit-content;
  text-align: left;
}

body #event-type_header option,
body #continent_header option {
  padding-bottom: 5px;
}

body #event-type_header option:checked,
body #continent_header option:checked,
body #event-type option:checked,
body #continent option:checked {
  background-color: #ffffff;
  font-weight: bold;
  border: 2px solid var(--main-text);
  border-radius: 10px;
  padding-left: 10px;
}

#continent_header,
#event-type_header {
  height: clamp(195px, 210px, 300px);
  border: none;
}

body #event-type_header option:hover,
body #continent_header option:hover,
body #event-type option:hover,
body #continent option:hover {
  background-color: pink;
  font-weight: bold;
  border: none;
}

.filter-container h1 {
  margin-bottom: 4rem;
  margin-top: 4rem;
  display: none;
}

#sort-by-header-ipad {
  display: none;
}

.filter-section {
  margin-bottom: 40px;
}

/* Style the placeholder option */
#event-type option:disabled {
  font-style: italic; /* Example: Italic font style */
}
/* Style the select element */

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--main-yellow);
  border: 2px solid var(--main-text);
  border-radius: 10px;
  padding: 10px;
  min-width: 170px;
  max-width: 200px;
  position: relative;
  text-align: center;
  cursor: pointer;
  font-size: 1em;
  color: var(--main-text);
  font-family: "Space Grotesk", "FontAwesome", sans-serif;
  transition: background-color 0.3s ease; /* Adding transition for smooth color change */
}

/* select:active {
  background-color: white;
  transition: 0.7s background-color;
} */

.container {
  max-width: clamp(1000px, 88%, 1200px);
  margin: 0 auto;
  margin-top: 40px;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(10, 100px);
  grid-template-rows: repeat(9, 100px);
  justify-content: center;
}

.image-wrapper {
  grid-column: span 5;
  grid-row: span 8;
  margin-top: 20px;
}

.caption {
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: left;
  font-size: 0.9em;
  color: #666; /* Adjust color as needed */
  padding: 5px;
  box-sizing: border-box;
}

.text-wrapper-1 {
  grid-column: 7/12;
  grid-row: span 10;
}

/* Styling for the popup */
#popup {
  position: absolute;
  background-color: #fff;
  border: 2px solid var(--main-text);
  border-radius: 10px;
  box-shadow: -4px 4px var(--box-shadow-bg);
  padding: 10px;

  z-index: 999;
  /* Adjust the position to be below the triggering text */
  top: calc(70% + 10px); /* Adjust the value as needed */
  left: 75%;
}
#popup2 {
  position: absolute;
  background-color: #fff;
  border: 2px solid var(--main-text);
  border-radius: 10px;
  box-shadow: -4px 4px var(--box-shadow-bg);
  padding: 10px;

  z-index: 999;
  /* Adjust the position to be below the triggering text */
  top: calc(120% + 10px); /* Adjust the value as needed */
  left: 35%;
  font-size: 0.9rem;
  font-weight: bold;
}

#popup ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#popup ul li {
  margin-bottom: 5px;
}

#popup ul li:hover {
  text-decoration: underline 1.5px;
}

/* Styling for the hidden class */
.hidden {
  display: none;
}

.collaborators {
  width: 70%;
}
.collaborators_title > * {
  margin: 10px 0 10px 10px;
}

.collaborators_title p {
  margin-top: 11px;
}
.collaborators_title {
  display: flex;
  flex-direction: row;
}

.collaborator {
  padding-top: 20px;
  display: inline-flex;
  height: fit-content;
  align-items: center;
}

.collaborator img {
  border-radius: 50%;
  border: 5px solid var(--main-text);
  height: 150px;
  width: 150px;
}

.collaborator a {
  height: 150px;
}

.collaborator a:hover {
  scale: 1.1;
}
.collaborator_text {
  padding: 0 40px;
}
.collaborator_links {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.collaborator_links * {
  margin-top: 0;
  padding: 5px 0;
}
.collaborator_links h3 {
  margin-top: px;
}

.section-title {
  margin-top: 0;
  width: 100%;
}

@media screen and (min-width: 1300px) {
  .text-wrapper-1 > * {
    margin-left: -30px;
    margin-top: 17px;
  }

  .toggle-container {
    left: 50px;
    top: -12px;
  }
}
.event_location_mobile {
  display: none;
}
.text-wrapper-2 {
  grid-column: span 11;
}

.link-wrapper {
  grid-column: span 4;
}
.link-wrapper img {
  width: 300px;
  height: 100px;
}

.about-image {
  width: 100%;
  position: relative;
}

.imagetag {
  position: relative;
  display: inline;
}

.imagetag::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px; /* Adjust this value to position the tooltip as needed */
  left: 0;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.trigger:hover + .imagetag::before {
  opacity: 1;
  visibility: visible;
}

a {
  font-weight: 800;
  color: var(--main-text);
  text-underline-offset: 2px;
}

li a {
  text-decoration: none;
}

p a:hover,
li a:hover {
  /* text-decoration: underline 0.5px solid; */
  /* text-underline-offset: 6px; */
  /* background-color: white;
  padding: 1px 4px 4px 4px;
  border-radius: 10px;
  border: 1px solid; */
  font-weight: 400;
}

/* About Page Content */
.about_content {
  display: block;
  margin: auto;
  width: clamp(50%, 80%, 90%);
  max-width: 800px;
}

/* Style for the hidden pseudo-element */
#linktoended {
  scroll-margin-top: 50px;
}

.ocended {
  margin: -10px 25px 20px 25px;
  /*max-width: 60%; commented out as it's not currently necessary*/
  color: var(--main-text);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: 1rem;
}

/* NEWLSETTER SIGNUP FORM STYLING */

#mc_embed_shell {
  max-width: 850px;
  width: 90%;
  margin-top: 100px;
  margin-bottom: 4em;
}
#mc_embed_signup {
  clear: left;
  font:
    14px Helvetica,
    Arial,
    sans-serif;
  display: flex;
}

#mc_embed_signup input {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 20px;
  display: block;
  border: var(--main-border2);
}

.nl-field-group {
  clear: left;
  position: relative;
  width: 100%;
  min-height: 50px;
}

.nl-submit {
  & input {
    width: 50%;
  }
  & h2,
  h3 {
    font-style: italic;
    margin: 0 auto;
    padding: 10px 20px;
    width: fit-content;
    border-radius: 20px;
    border: 2px solid var(--main-yellow-dark);
    color: var(--main-yellow-dark);
  }
  /* width: 50%; */
  text-align: center;
  margin: 0 auto;
}

.nl-field-group label {
  margin-top: 0;
}

.column form {
  width: 100%;
}

/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
           We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

.column {
  flex: 1;
  padding: 10px 20px;
  display: flex;
}

.column img {
  max-width: 100%;
  align-self: center;
  /* height: fit-content; */
  margin-top: -89px;
}
#mce-success-response {
  background: white;
  border: var(--main-text) 2px solid;
  padding: 10px;
  border-radius: 20px;
  display: none;
}

/* LOADING SCREEN */
body.no-scroll {
  overflow: hidden;
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(56, 100%, 71%);
  display: flex;
  /* display: none; */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease; /* Add transition for fade effect */
}

.loading-logo {
  width: 200px; /* Adjust the size as needed */
  height: 200px; /* Adjust the size as needed */
  animation: spinCCW 16s linear infinite; /* Adjust the spinning speed */
  transform-origin: center;
  z-index: 2;
}

.loading-letters {
  margin-top: 5px;
  width: 200px; /* Adjust the size as needed */
  height: 200px; /* Adjust the size as needed */
  animation: spinCW 10s linear infinite; /* Adjust the spinning speed */
  transform-origin: center;
  z-index: 1;
}

.loading-text {
  margin-top: 20px;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

.loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the content */
}

/*Cookies*/

.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #090909;
  display: none; /* Hide initially */
  z-index: 1001; /* Set a higher z-index value */
  justify-content: center;
  align-items: center;
}

.cookie-consent p {
  display: inline-block; /* Ensure the text and buttons appear inline */
  padding: 10px 20px;
}
.cookie-consent :is(h3, h2) {
  text-align: center;
  font-size: 1.3rem;
}
.cookie-consent img {
  width: clamp(300px, 50%, 1000px);
}

.cookie-consent button {
  display: inline-block; /* Make the buttons inline */
  margin: 0 20px; /* Add some space between the text and buttons */
}

.cookie-content {
  z-index: 1002; /* Set a higher z-index value */
  margin: 50px auto;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: clamp(600px, 70%, 800px);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cookie-text,
.cookie-text-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 10px;
}

.cookie-text * {
  width: 100%;
  text-align: left;
}

.cookie-text-inner :is(p, ul) {
  width: 80%;
}

/*Scrollbar & other non-page-related pieces*/

/* For Webkit Browsers (Chrome, Safari) */
::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-yellow);
  border-radius: 20px; /* Adjust the value for rounded corners */
  /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);*/ /* var(--main-text) drop shadow at a 45-degree angle, but this doesn't really work well and creates artifacting */
  border: 2px solid var(--main-text); /* 2pt var(--main-text) stroke */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-yellow); /* Change color on hover if desired */
}

/* Apply these styles for Firefox only */
@-moz-document url-prefix() {
  html:hover {
    scrollbar-width: auto;
    scrollbar-color: var(--main-text) var(--main-yellow);
  }
}

#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  left: auto;
  color: inherit;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  z-index: 3;
}

#back-to-top img {
  width: 45px;
  height: auto;
  background: var(--main-yellow-lightest);
  border-radius: 50%;
}

#back-to-top:hover {
  transform: scale(1.2);
}

/* Show the "back to top" link when the user scrolls down */
body.scrollTop,
body.document.documentElement.scrollTop {
  display: block;
}

nav {
  background-color: rgba(0, 0, 0, 0); /* Transparent background */
  padding: 15px;
  text-align: right;
  position: relative;
  width: 95%;
  /* margin-top: 30px;*/
}

nav a {
  color: var(--main-text); /* var(--main-text) text color */
  font-weight: 800;
  text-decoration: none;
  /* margin: 0 15px; */
}

nav a:hover {
  text-decoration: underline 1.75px solid;
  text-underline-offset: 2px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 2rem;
}

.current {
  pointer-events: none;
  text-decoration: none;
  display: flex;
}
.mainLink {
  &.current {
    background: var(--main-yellow-light);
    margin-top: 20px;
    padding: 40px 15px 35px 15px;
    color: var(--main-yellow-dark);
    transform: translateY(-12px);
    border-radius: 0px 0px 25px 25px;
    border: 3px solid var(--toggle-bg);
    /* box-shadow: -5px 5px 0px 0px rgba(0, 0, 0, 0.7); */
    /* box-shadow: -5px 3px 0px 1px rgba(0, 0, 0, 0.3); */
    /* position: static; */
    transition:
      background 0.5s ease-in-out,
      box-shadow 0.5s ease-in-out,
      margin-top 0.5s ease-in-out,
      border-radius 0.5s ease-in-out,
      transform 0.5s ease-in-out,
      font-size 0.5s ease-in-out,
      padding 0.5s ease-in-out;
    &:hover {
      font-weight: bold;
    }
    &.scrolled {
      background: var(--main-yellow);
    }
    &.home::before {
      font-family: "FontAwesome";
      content: "\e3af ";
      display: inline-block;
      padding-right: 0.4rem;
      vertical-align: middle;
      font-weight: 900;
    }
    &.calendar::before {
      font-family: "FontAwesome";
      content: "\f274 ";
      display: inline-block;
      padding-right: 0.4rem;
      vertical-align: middle;
      font-weight: 900;
    }
  }
}

.scrolled {
  background: var(--main-yellow);
}
.menu-links {
  display: none;
}
/* Style for the sidebar menu (desktop only) */
#sidebar-menu {
  position: fixed;
  top: 0;
  left: -50%;
  width: 400px;
  height: 100vh;
  background-color: var(--main-yellow);
  color: #0d0c0c;
  transition: left 0.5s ease-in-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  /* padding-top: 20px; */
  z-index: 1002;
}

.menu-shadow {
  /*box-shadow: 10px 0 10px rgba(0, 0, 0, 0.5); */ /* Positive x-offset for outside shadow with blur */
  /* border-top-right-radius: 8px; */
  border-bottom-right-radius: 10rem;
  border: 2px solid var(--main-text);
}

#menuText {
  cursor: pointer;
  position: fixed;
  font-size: 2em;
  left: -10px;
  writing-mode: vertical-lr;
  background-color: hsla(0, 0%, 20%, 0);
  color: #080808;
  padding: 20px;
  z-index: 1001;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border: 2px solid var(--main-text);
  display: none;
}

#menuText:hover {
  box-shadow: 5px 5px 0px 0px var(--box-shadow-bg); /* Hard shadow with no blur */
}

.sidebarLinks {
  list-style-type: none;
  padding: 0;
  margin-top: 30px;
}

.sidebarLinks a {
  font-size: 1.5rem;
  list-style-type: none;
  text-decoration: none;
  color: var(--main-text);
  display: block; /* Make the links block elements for centering */
  margin: 10px 0; /* Adjust margin for spacing between links */
  line-height: 3rem;
  font-weight: normal;
}

.sidebarLinks a:hover {
  text-decoration: underline;
}

#closeButton {
  cursor: pointer;
  align-self: flex-start;
  margin-left: 10px;
  font-size: 4rem;
  font-family: "Space Mono", monospace;
}

#closeButton img {
  width: 45px;
  margin-left: 20px;
  margin-right: -20px;
  margin-top: 70px;
}

#content {
  transition: margin-left 0.5s;
  padding: 20px;
}

#socialIcons {
  display: flex;
  margin-top: 40px;
  margin-bottom: 10px; /* Adjust margin for spacing between icons */
}

#socialIcons img {
  width: 40px;
  margin-right: 10px;
}

#socialIcons img:hover {
  transform: scale(1.1); /* Scale up on hover */
}

.hidden {
  display: none;
}

/* Style for the sticky navigation bar */
.navbar {
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  position: sticky;
  align-items: center;
  justify-content: space-between;
  top: 0;
  width: 100%;
  height: 70px; /* Adjust the height as needed */
  background: var(--main-yellow);
  z-index: 1000;
  /* padding: 20px 15px; */
  box-shadow: none; /*initially no box shadow*/
  transition:
    background 0.3s,
    height 1s ease-in-out,
    box-shadow 0.3s ease-in-out;
  overflow: visible;
}

.navbar.shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Style for the dropdown container */
.dropdown {
  position: relative;
  display: block;
  &.hovered {
    transition: display 1s ease-in-out;
  }
  &:hover {
    display: block;
  }
}

/* Style for the dropdown button */
.dropdown button {
  display: flex;
  position: relative;

  font-weight: 800;
  text-decoration: none;
  background: none;
  color: var(--main-text);
  font-family: inherit;
  font-size: inherit;
  cursor: default;
  border: none;
  /* margin: 0 13px; */
}

.dropdown {
  &:has(.current) > button {
    border: 2px solid var(--toggle-bg);
    border-radius: 5px;
    background-color: var(--main-yellow-light);
    color: var(--main-yellow-dark);
    &::after {
      font-family: "FontAwesome";
      content: "\f0d7";
      display: inline-block;
      margin-left: 0.3rem;
      vertical-align: middle;
      font-weight: 900;
      margin-top: 2px;
    }
  }
}
.dropdown-button::after {
  font-family: "FontAwesome";
  content: "\f107";
  display: inline-block;
  margin-left: 0.3rem;
  vertical-align: middle;
  font-weight: 900;
  margin-top: 2px;

  transition: transform 0.3s ease-in-out;
}

.dropdown.hovered .dropdown-button::after {
  transform: rotate(180deg);
  transform-origin: center; /* Set transform origin to center */
}

/* Your existing styles for the dropdown button and menu */
.dropdown:hover .dropdown-content,
.dropdown.hovered .dropdown-content {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  overflow: hidden;
  padding: 10px 0;
  margin-top: 10px;
  background-color: #fff;
  border: 2px solid var(--main-text);
  border-radius: 25px;
  box-shadow: -5px 5px 0px 0px var(--box-shadow-bg); /* Hard shadow with no blur */
  z-index: 1;
  transition: display 0.3s ease-out; /* Adjust the duration as needed */

  & a {
    color: #333;
    padding: 0px 15px 0px 15px;
    line-height: 2;
    display: flex;
    flex-wrap: wrap;
    text-decoration: none;
    transition: display 0.3s ease-in-out; /* Adjust the duration as needed */
    &.current {
      color: var(--main-yellow-dark);
      font-weight: bold;
      background-color: var(--main-pink);
      border-radius: 2px;

      &::before {
        font-family: "FontAwesome";
        content: "\f0da";
        display: inline-block;
        padding-right: 0.4rem;
        vertical-align: middle;
        font-weight: 900;
      }
    }
  }

  &.list a {
    width: clamp(10.5em, 19ch, 12em);
    /* padding: 0px 15px 0px 15px;
    line-height: 1.6; */
  }
}

/* Style for the logo container */
.logo-container {
  display: flex;
  align-items: center;
  position: absolute;
  margin-top: 40px;
  left: 50%;
  transform: translateX(-50%);
  perspective: 1000px; /* Set the perspective for the 3D effect */
}

.logo {
  width: 100px; /* Initial size of the logo */
  height: auto;
  transition:
    transform 0.5s ease-in-out,
    opacity 0.3s,
    border 0.3s;

  transform-style: preserve-3d;
}

.logo-container img {
  width: 90px;
  height: 90px;
  border-radius: 50%; /* Make the image a perfect circle */
  border: 10px solid var(--main-yellow);
}
.logo img {
  /*width: 100%;*/
  height: auto; /* Adjust the height as needed */
  display: block;
  margin: 0 auto; /* Center the img horizontally, if needed*/
}

.logo:hover {
  transform: rotate(180deg);
}

/* Style for the hamburger icon container */
#hamburger-container {
  cursor: pointer;
  transition: width 0.7s;
  position: absolute;
}

.menu-links {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Adjust the duration and easing as needed */
}

body {
  margin: 0;
  padding: 0;
  background-color: var(
    --main-yellow
  ); /*(other variant of yellow is var(--main-yellow))*/
  line-height: 1.4rem;
  font-family: "Space Grotesk", sans-serif;
  font-variant-ligatures: none;
  box-sizing: border-box;
}

#archive-body {
  display: flex;
  flex-direction: column; /* Make the container a column layout */
  align-items: center; /* Center content horizontally */
  min-height: 100vh; /*set a min height to take up the full viewport*/
}

#signup-text {
  margin: 0px auto 40px;
  /*max-width: 60%; commented out as it's not currently necessary*/
  color: var(--main-text);
  font-family: "Space Grotesk", sans-serif;
  text-align: center;
}

#signup-maintext {
  margin: 0 auto;
  margin-top: clamp(2rem, 2rem, 3rem);
  max-width: 75%; /*commented out as it's not currently necessary*/
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
}

#thisweek-maintext {
  margin: 0 auto;
  margin-top: clamp(2rem, 2rem, 3rem);
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
}

#signup-subtext {
  margin: 5px 25px 40px;
  /*max-width: 60%; commented out as it's not currently necessary*/
  color: var(--main-text);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: 1rem;
}

#links-text {
  margin: 0px auto 30px;
  /*max-width: 60%; commented out as it's not currently necessary*/
  color: var(--main-text);
  font-family: "Space Grotesk", sans-serif;
  text-align: center;
}

#links-maintext {
  margin: 0px auto 0px;
  max-width: 75%; /*commented out as it's not currently necessary*/
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  padding-top: 20px;
}

.links-subtext {
  margin: 5px 25px 0px;
  /*max-width: 60%; commented out as it's not currently necessary*/
  color: var(--main-text);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: 1rem;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*Newsletter CTA*/

#newsletter-button, /*common styles for both*/
    #thelist-button {
  position: relative;
  border: 2px solid var(--main-text);
  border-radius: 25px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: inherit;
  margin-bottom: 30px;
  text-decoration: none;
  color: inherit;
}

#newsletter-button:hover,
#thelist-button:hover {
  transform: scale(1.1); /* Scale up on hover */
}

#nl-upper,
#tl-upper {
  width: 100%;
  height: 66.67%; /* 2/3 of the button height */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
#nl-image,
#tl-image {
  width: 15%;
  height: auto;
  padding: 0 15px;
  /*background: url('../images/icons/newspaper.png') center/cover no-repeat;*/
}

#nl-main,
#tl-main {
  width: 85%;
  padding-top: 10px;
  padding-left: 20px;
  box-sizing: border-box;
}

#nl-title,
#tl-title {
  font-size: 1.25rem;
  font-weight: 700;
}

#nl-subtext,
#tl-subtext {
  font-size: 1rem;
  font-weight: 400;
  padding-right: 18px;
  padding-bottom: 20px;
}

#nl-cta,
#tl-cta {
  padding: 10px;
  box-sizing: border-box;
  font-size: 1.25rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
}

.hr-line {
  width: 100%;
  border-bottom: 1px solid var(--main-text);
}

/* Open Call Header */

.header_oc {
  width: clamp(30%, 60%, 70%);
  max-width: 30rem;
  &.thisweek {
    width: clamp(30%, 90%, 90%);
  }
  &.archive {
    width: clamp(30%, 90%, 90%);
    margin-top: 0.5em;
    margin-bottom: -0.25em;
    @media (width < 48em) {
      margin-top: 1.5em;
      width: 100%;
    }
  }
  &.thelist {
    width: clamp(30%, 50%, 70%);
    margin-top: 30px;
    @media (width < 48em) {
      width: 90%;
    }
  }
  &.sal {
    max-width: 35em;
    /* margin-top: -2.5em; */
    @media (width < 48em) {
      margin-top: 0.5em;
      width: 90%;
    }
  }
  &.igoc {
    max-width: 70em;
    margin-bottom: -4em;
    @media (width < 48em) {
      margin-bottom: 0;
    }
  }
  &.about {
    margin: 1em 0 -1em 0;
    @media (width < 48em) {
      margin: 3em 0 -3em 0;
      width: 90%;
    }
  }
  &.themap {
    width: clamp(30%, 50%, 70%);
    margin-top: 30px;
    @media (width < 48em) {
      width: 75%;
    }
  }
}

#down_arrow {
  max-width: 6%;

  animation: moveUpDown 2.5s ease infinite; /* Apply the animation */
}

/* NEWSLETTER ARCHIVE */

#newsletter-archive,
#newsletter-archive p,
#mlna {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: wrap;
  max-width: 90%;
  width: 100vw;
}

#newsletter-archive .content p {
  margin: 0 auto;
  padding: 10px;
  text-align: center;
}

/* Making some accordions for the newsletter archive */
/* Style for the accordion container */
.moreInfo {
  /* Ensure the truncated text stays on one line */
  /* white-space: nowrap; */
  max-height: 8em;
  overflow: hidden;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Adjust height as needed */
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      var(--main-yellow-light)
    );
    pointer-events: none; /* Ensures this overlay doesn't interfere with content */
    transition: background 0.3s linear;
  }
  & p,
  div {
    max-width: 400px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: -webkit-line-clamp 0.3s ease-in-out;
  }
}

.moreInfo.show-full-text {
  max-height: 100%;
  overflow: auto;
  & p,
  div {
    -webkit-line-clamp: revert;
    max-width: 450px;
  }
}

.read-more {
  cursor: pointer;
  grid-column: 2 / span 1; /* Spanning columns 2 and 3 */
  text-align: center; /* Centering the button text */
  width: 50%;
  margin: 0 auto;
  margin-bottom: 20px;
  &::after {
    font-family: "FontAwesome";
    content: "\f107";
    display: inline-block;
    padding-left: 0.4rem;
    vertical-align: middle;
    font-weight: 900;
    line-height: 1.5;
  }
  &.show-less::after {
    font-family: "FontAwesome";
    content: "\f106";
    display: inline-block;
    padding-left: 0.4rem;
    vertical-align: middle;
    font-weight: 900;
    line-height: 1.5;
  }

  @media (max-width: 768px) {
    margin: 20px auto 0;
  }
}

.accordion {
  width: 40%;
  @media (48em < width < 85em) {
    width: 60%;
  }
}

/* Style for each accordion item (month) */
.accordion-item {
  margin: 0 23%;
  width: 100%;
  &.active {
    width: auto;
    margin: 0px auto 10px auto;
  }

  &.newsletter {
    margin: 0 auto 10px auto;
  }
  /* margin-bottom: 10px; */
  /* width: 100%; */
  /* overflow: hidden; */
}

/* Style for the month label */
.archive-label,
.accordion-item label {
  border-radius: 5px;
  align-items: center;
  margin-top: 0;
  /* margin: auto 23%; */
  padding: 10px;
  cursor: pointer;
  border: 2px solid;
  font-weight: bold;
}

.newsletter label {
  margin: 0;
}

.accordion-item i {
  font-weight: 400;
}

/* Style for the plus/minus icon */
.accordion-item label .icon {
  margin-right: 5px;
  font-size: 18px;
}

/* Style for the links (content) */
.accordion-item .content {
  display: none;
  /* padding: 10px; */
}

.accordion-item .insta-ended {
  display: none;
}

/* Show the content when the active class is present */
.accordion-item.active .content {
  display: block;
}

.accordion-item.active .insta-ended {
  display: flex;
}

.campaign {
  white-space: nowrap; /* Prevents the text from wrapping to the next line */
  overflow: hidden; /* Hides the overflowing content */
  text-overflow: ellipsis; /* Displays an ellipsis (...) when the text overflows */
  /* max-width: 200px; Adjust the maximum width as per your requirement */
}

/* Style for the image grid container */
.insta-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* You can use other values like space-between or space-evenly */
  margin: auto 23%;
  margin-bottom: 40px;

  @media (720px >= width) {
    .accordion-item {
      margin: 0 5%;
    }
  }
  &:has(.accordion-item.active) {
    width: auto;

    @media (1024px >= width > 720px) {
      .archive-label {
        margin: 0 23%;
      }
    }

    @media (720px >= width) {
      .accordion-item {
        margin: 0 auto;
      }

      .archive-label {
        margin: 0 5%;
      }
    }
  }

  &:has(.accordion-item) {
    width: 100%;
  }
}

.insta-ended {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* You can use other values like space-between or space-evenly */
  & a {
    filter: grayscale(1);
    pointer-events: none;
  }
  /* margin: auto 4%; */
}
.insta-grid a,
.insta-ended a {
  box-sizing: border-box;
  width: 32.5%;
  margin: 2px;
  transition: scale 0.3s ease-in-out;
  /*border: 1px solid #000000;*/
  overflow: hidden; /* Ensures that the link takes the space around the image */
  display: block; /* Make the link a block element */
  &:hover {
    scale: 0.9;
  }
}
/* Style for each image in the grid */
.insta-grid img,
.insta-grid-ended img {
  display: block;
  width: 100%; /* Adjust this value to control the width of each image */
  height: auto;
  /*margin: 3px; Adjust the margin as needed 
          border: 1px solid #000000;  Optional: Add a border around each image
          border-radius: 5px;  Optional: Add border-radius for rounded corners */
}

.card {
  position: relative;

  aspect-ratio: 1;
  background: #000;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  @media (width > 72rem) {
    width: 30%;
  }
  @media (72rem > width > 45rem) {
    width: 45%;
  }
  @media (width <=45rem) {
    width: 100%;
    /* margin-bottom: 1rem; */
  }
}

.inst-img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;

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

  flex-wrap: wrap;
  & * {
    font-family: "GeneralSans-Variable", "Helvetica Neue", sans-serif;
    /* text-align: center; */
  }
  @media (width >=125rem) {
    padding: 3% 22.5%;
    gap: 24px;
  }
  @media (125rem > width >=86rem) {
    padding: 3% 15%;
    gap: 24px;
  }
  @media (86rem > width > 45rem) {
    padding: 3% 6%;
    gap: 15px;
  }
  @media (width <=45rem) {
    padding: 2% 5%;
    gap: 1rem;
  }
}
.inst-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease;
}

.card:hover .inst-img img {
  transform: scale(1.025);
  filter: brightness(0.5);
}

.card:hover .details {
  bottom: 0;
}

.details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  bottom: -150%;
  left: 0;
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px) saturate(120%);
  transition: 0.3s ease-in-out;
  color: var(--main-text);
  z-index: 2;
  text-wrap: balance;
  padding: 2em;
  border-radius: 20px 20px 0 0;

  & > h1 + h2,
  & > h1,
  & > h1 + h3 {
    text-align: center;
  }
  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    text-wrap: balance;
  }

  h1 {
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
  }
  h2 {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }
  h3 {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
    text-align: left;
  }
  h4 {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
  }
  a {
    margin: 2rem auto 1rem;
  }
  .detail {
    & > h3:first-child {
      font-weight: 600;
    }
    & > h3:nth-child(2) {
      margin-bottom: 0.25rem;
    }
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
  }
  @media (width <= 86rem) {
    padding: 2rem;
    background: rgba(255, 255, 255, 1);
    h3 {
      font-size: 1rem;
    }
    h4 {
      font-size: 0.9rem;
    }
  }
}

/* .details .desc {
  color: #fff;
  opacity: 0.8;
  line-height: 1.5;
  margin-bottom: 1em;
} */
#saveStatus {
  display: none;
  &.saved {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--main-yellow-lightest);
    border: 2px solid var(--toggle-bg);
    padding: 1em;
    padding-left: 1.7em;
    border-radius: 20px;
    position: absolute;
    right: 1.88em;
    top: 1em;
    width: 7.3em;
    transition: opacity 1s ease;
    /* max-width: 220px; */
    animation: menuExpand 1s ease-in-out forwards;
    overflow: hidden;
    & h3 {
      margin: 1.7em 0 0.65em 0;
    }
    &.savedDone {
      animation: menuCollapse 1s ease-in-out forwards;
    }
  }
}
.btn {
  /* margin: 0px 0 20px; */
  padding: 10px 10px;
  font-size: 1rem;
  /* height: 3rem; */
  font-weight: bold;
  font-family: "Space Grotesk", sans-serif;
  border: 2px solid var(--main-text);
  border-radius: 20px;
  box-shadow: 0px 0px 0px var(--box-shadow-bg); /*smaller shadow on hover*/
  background-color: white;
  color: var(--main-text);
  transition:
    box-shadow 0.3s,
    background-color 0.3s; /*Smooth transition*/

  &.instagram {
    font-size: 1.2rem;

    padding: 10px 20px;
    /* margin: 50px 0 0 0; */
  }

  &.sync {
    background-color: var(--main-yellow-lighter);
    border-color: var(--toggle-bg);
    padding: 7.5px 20px;
    border-radius: 0 20px 20px 0;
    border-width: 2px 2px 2px 1px;
    z-index: 1;
    &.save {
      border-radius: 20px 0 0 20px;
      border-width: 2px 1px 2px 2px;
      z-index: 2;
    }

    /* &:hover {
      border-width: 2px;
    } */
    & span {
      margin-right: 5px;
    }
    &:hover {
      & i {
        /* animation: rotate_jiggle 0.75s ease infinite; */
        animation: full_rotate_with_rebound 1s ease-in-out forwards;
        scale: 1.1;
      }
    }
    &:active {
      & i {
        /* animation: rotate_jiggle 0.75s ease infinite; */
        animation: full_rotate_with_rebound 1s ease-in-out infinite;
        scale: 1;
      }
    }
    &.save:hover {
      & i {
        /* animation: rotate_jiggle 0.75s ease infinite; */
        animation: riseFall 1s ease-in-out forwards;
        scale: 1.1;
      }
    }
    &.save:active {
      & i {
        /* animation: rotate_jiggle 0.75s ease infinite; */
        animation: riseFall 1s ease-in-out infinite;
        scale: 1;
      }
    }
  }
}

.btn:hover {
  /*width: 16em;*/
  background-color: #fff;
  color: var(--main-text);
  /* font-size: 1.2em; */
  box-shadow: -5px 5px 0px 0px var(--box-shadow-bg); /* Hard shadow with no blur */
  cursor: pointer; /* Add this line to set the hand cursor on hover */
  &.sync,
  .save {
    box-shadow: -5px 5px 0px 0px var(--box-shadow-bg2); /* Hard shadow with no blur */
  }
}
.btn:active {
  box-shadow: 0px 0px 0px var(--box-shadow-bg); /*smaller shadow on hover*/
  background-color: var(--toggle-bg);
  color: var(--main-text);
  border: 2px solid var(--main-text);
}

/* Define the ended class */
.ended {
  position: relative;
  display: inline-block;
  pointer-events: none;
  overflow: hidden; /* Ensure the pseudo-element covers the entire image */
}

/* .ended::after {
  content: "Open Call Ended";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: #fcee55e2;
  color: var(--main-text);
  font-size: 1.25rem;
  font-weight: 900;
  z-index: 1;
  width: 100%;
  text-align: center;
  border: var(--main-text) solid 2px;
  border-radius: 5px;
  box-shadow: -4px 4px var(--main-text);
} */

.ended img {
  width: 100%; /* Ensure the image takes up the entire container */
  height: auto; /* Maintain the aspect ratio */
  z-index: 0; /* Ensure the image is behind the pseudo-element */
}

#CTA-maintext,
.CTA-maintext {
  margin: 20px auto 0px;
  max-width: 100%; /*commented out as it's not currently necessary*/
  font-size: medium;
  text-align: center;
  text-wrap: balance;
  &h3 {
    font-size: revert;
  }
}
#tip {
  & h3 {
    & a {
      text-decoration: underline;
    }
  }
}
#CTA-subtext {
  margin: 20px auto 50px;
  max-width: 100%; /*commented out as it's not currently necessary*/
  font-size: medium;
  text-align: center;
}
#info-submission {
  margin: 20px auto 0px;
  max-width: 60%; /*commented out as it's not currently necessary*/
  font-size: medium;
  text-align: center;
}

#divider-line {
  border: 2px solid var(--main-text);
  border-radius: 5px;
  margin: 50px 30px 50px;
  width: 50%;
}

label {
  display: block;
  margin-top: 30px;
  margin-bottom: 5px;
  color: var(--main-text);
  font-family: "Space Grotesk", sans-serif;
}

input {
  padding: 10px;
  margin-top: 5px;
  box-sizing: border-box;
  border-radius: 15px;
  margin: 0 auto; /* Center the input */
  font-family: "Space Grotesk", sans-serif;
}

.error {
  color: #ff0000;
  font-weight: bold;
  font-size: 11px;
}

/* Footer styles */
footer {
  display: flex;
  margin: 20px 0;
  justify-content: center;
  text-align: center;
  font-size: 0.8em;
}

#social-links {
  text-align: center;
}

#archive-list {
  margin: 0 2em 3em 2em;
  line-height: 2.2em;
}

.social-icons {
  display: flex;
  /*position: fixed;*/ /*doesn't need to be there atm as the page becomes longer*/
  bottom: 5%;
  justify-content: center;
  margin-top: 20px;
  max-width: 90%;
  line-height: 3;
  z-index: 2; /* Ensure the icons appear above other content */
}

.social-icons a {
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  color: var(--main-text);
}

.social-icons img {
  /* width: 50px; */
  height: 50px;
  /* border-radius: 50%; */
  transition: transform 0.3s ease-in-out;
}

.social-icons a:hover img {
  transform: scale(1.2); /* Scale up on hover */
}

.headerSocial {
  display: flex;
  /*position: fixed;*/ /*doesn't need to be there atm as the page becomes longer*/
  justify-content: center;
  max-width: 90%;
  /* line-height: 3; */
  margin-bottom: 20px;
  z-index: 2; /* Ensure the icons appear above other content */
  align-items: center;
  @media (width < 48em) {
    line-height: 1.4rem;
  }
}

.headerSocial a {
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  color: var(--main-text);
}

.headerSocial img {
  width: 40px;
  transition: transform 0.3s ease-in-out;
}

.headerSocial a:hover img {
  transform: scale(1.2); /* Scale up on hover */
}

.cookie-button {
  margin: 5px auto 5px;
  padding: 5px 15px;
  font-size: 1.2rem;
}

.cta-button {
  margin: 40px auto 60px;
  padding: 10px 30px;
  font-size: 1.2rem;
  height: fit-content;
}

.apply-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  & :nth-child(1) {
    z-index: 3;
  }
  & :nth-child(2) {
    z-index: 2;
  }
  & :nth-child(3) {
    z-index: 1;
  }
}
.apply-button2 {
  margin: 0px 0 20px;
  padding: 10px 10px;
  font-size: 1.2rem;
  height: 3rem;
  font-weight: bold;
  font-family: "Space Grotesk", sans-serif;
  box-shadow: 0px 0px 0px var(--box-shadow-bg); /*smaller shadow on hover*/
  background-color: var(--main-yellow-light);
  color: var(--main-text);
  transition:
    box-shadow 0.3s,
    background-color 0.3s; /*Smooth transition*/
}

.apply {
  border-radius: 15px 2px 2px 15px;
  border-left: 2px solid var(--main-text);
  border-right: 1px solid var(--main-text);
  border-top: 2px solid var(--main-text);
  border-bottom: 2px solid var(--main-text);
  /* padding: 0 30px; */
  width: 7rem;
}

.applied:hover * {
  color: rgb(21, 59, 21);
  background: #cef0c7 !important;
  border-radius: 2px;
  scale: 1.1;
}
.bookmark:hover * {
  border-radius: 2px;
  scale: 1.1;
}
/* 
.applied::before {
  content: "\f0c8";
  font-family: "FontAwesome";
}
.applied:hover::before {
  content: "\f0c8";
    font-family: "FontAwesome";

} */

/* .applied {
  position: relative;
  display: inline-block;
  cursor: pointer;
} */
.provided-span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1em 0.5em;
  font-size: 1.2em;

  & > i.ri-home-2-line {
    font-size: 1.3em;
  }
  @media (width>48em) {
    width: 6.2em;
  }
  @media (width<48em) {
    width: 10em;
    font-size: 1.4em;
    column-gap: 0.75em;
  }
}

.bookmark.tooltip:hover::after {
  transform: translateX(-100%);
}

.applied.tooltip:hover::after {
  transform: translateX(-70%);
}

.tooltip {
  &:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 118%;
    padding: 8px;
    background-color: white;
    border: var(--main-border2);
    color: var(--main-text);
    border-radius: 10px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  &.navtip:hover::after {
    bottom: unset;
    top: 5em;
    right: 1em;
  }
  &.provided-item:hover::after {
    line-height: 1;
    font-family: "Space Grotesk", sans-serif;
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    bottom: 84%;
    left: 68.5%;
    width: 8.25em;
  }
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}
.applied {
  position: relative;
  border-radius: 2px 2px 2px 2px;
  border-left: 1px solid var(--main-text);
  border-right: 1px solid var(--main-text);
  border-top: 2px solid var(--main-text);
  border-bottom: 2px solid var(--main-text);
  transition: scale 0.3s ease-in;
}

.applied:active > * {
  scale: 1.2;
}

.bookmark {
  position: relative;

  border-radius: 2px 15px 15px 2px;
  border-left: 1px solid var(--main-text);
  border-right: 2px solid var(--main-text);
  border-top: 2px solid var(--main-text);
  border-bottom: 2px solid var(--main-text);
}

.apply-button2:hover {
  /*width: 16em;*/
  background-color: #fff;
  color: var(--main-text);
  /* font-size: 1.2em; */
  box-shadow: -5px 5px 0px 0px var(--box-shadow-bg); /* Hard shadow with no blur */
  cursor: pointer; /* Add this line to set the hand cursor on hover */
}
.apply-button2:active {
  box-shadow: 0px 0px 0px var(--box-shadow-bg); /*smaller shadow on hover*/
  background-color: var(--toggle-bg);
  color: var(--main-text);
  border: 2px solid var(--main-text);
}

.apply-button {
  margin: 0px auto 20px;
  padding: 10px 10px;
  font-size: 1.2rem;
  height: fit-content;
}

.apply-button:hover,
.cta-button:hover,
.cookie-button:hover,
.filter_cta h3:hover,
.filter_cta_map h3:hover,
.read-more-btn:hover,
.header-button:hover {
  /*width: 16em;*/
  background-color: #fff;
  color: var(--main-text);
  border: 2px solid var(--main-text);
  /* font-size: 1.2em; */
  box-shadow: -5px 5px 0px 0px var(--box-shadow-bg); /* Hard shadow with no blur */
  cursor: pointer; /* Add this line to set the hand cursor on hover */
}

.apply-button,
.cta-button,
.cookie-button,
.filter_cta h3,
.read-more-btn {
  display: flex;
  justify-content: center;
  border-radius: 15px; /* Adjust as needed */
  font-weight: bold;
  font-family: "Space Grotesk", sans-serif;
  box-shadow: 0px 0px 0px var(--box-shadow-bg); /*smaller shadow on hover*/
  background-color: var(--main-yellow);
  color: var(--main-text);
  border: 2px solid var(--main-text);
  transition:
    box-shadow 0.3s,
    background-color 0.3s; /*Smooth transition*/
}

.apply-button:active,
.cta-button:active,
cookie-button:active,
.filter_cta h3:active,
.read-more-btn:active {
  box-shadow: 0px 0px 0px var(--box-shadow-bg); /*smaller shadow on hover*/
  background-color: var(--toggle-bg);
  color: var(--main-text);
  border: 2px solid var(--main-text);
}

.apply-toggle {
  display: inline-flex;
  gap: 0 10px;
  align-items: center;
  cursor: pointer;
}

input[type="checkbox"].apply-toggle {
  scale: 1.2;
}
input[type="checkbox"].apply-toggle:hover {
  scale: 1.3;
}

.fa-check:before {
  line-height: 1.3;
}
#submit-cont-ad {
  & a {
    &:hover {
      text-decoration: none;
      & button {
      }
    }
  }
}
.header-button {
  width: 5.75em;
  display: flex;
  margin-left: -5px;
  margin-right: 10px;
  padding: 4px 12px 4px 12px;
  background-color: var(--main-yellow);
  color: var(--main-text);
  border: 2px solid transparent;
  font-size: 1em;
  font-weight: bold;
  border-radius: 15px; /* Adjust as needed */
  /* box-shadow: -5px 5px 0px 0px #000; Hard shadow with no blur */
  font-family: "Space Grotesk", sans-serif;
  transition:
    box-shadow 0.3s,
    background-color 0.3s; /*Smooth transition*/
  cursor: pointer; /* Add this line to set the hand cursor on hover */
  &:hover {
    content: "Submit?";
  }

  /* & .admin {
    display: flex;
  } */

  &.admin {
    &:hover {
      content: "oppo";
    }
  }
}

.header-button:active {
  box-shadow: 0px 0px 0px var(--box-shadow-bg); /*smaller shadow on hover*/
  background-color: var(--toggle-bg);
}

.button-link {
  text-decoration: none;
}

/* Adjust the button width for HD screens */
@media screen and (max-width: 3000px) {
  #header-image img {
    max-width: 90%;
    /*margin-top: 1em;*/
  }
  /* input {
    width: 50%;
  } */
  #info-submission {
    max-width: 40%; /*commented out as it's not currently necessary*/
  }
  #newsletter-button,
  #thelist-button {
    max-width: 33%;
    margin: 0 25px 40px;
  }
}

/* Adjust the button width for HD screens */
@media screen and (min-width: 2000px) {
  .filter_dropdown {
    padding-left: 4rem;
  }
  /* .filter_cta {
    padding-right: 10rem;
  } */
  /* .festival img {
    margin-bottom: 40px;
    margin-left: 50px;
    margin-top: 10px;
  } */
}

/* Adjust the button width for HD screens */
@media screen and (max-width: 2000px) {
  #header-image img {
    max-width: 90%;
    /*margin-top: 10em;*/
  }
  /* input {
    width: 50%;
  } */
  #info-submission {
    max-width: 40%; /*commented out as it's not currently necessary*/
  }
}
/* Adjust the button width for normal screens */
@media screen and (max-width: 1700px) {
  #header-image img {
    max-width: 90%;
    /*margin-top: 1em;*/
  }
  input {
    /* width: 60%; */
  }
  #info-submission {
    max-width: 40%; /*commented out as it's not currently necessary*/
  }

  .nav-links {
    display: flex;
  }
}
/* @media screen and (min-width: 1700px) and (max-width: 2000px) {
  .event_container {
    margin-left: 15px;
  }
} */
@media screen and (max-width: 1500px) {
  #newsletter-button,
  #thelist-button {
    max-width: 43%;
  }
  .ended::after {
    font-size: 1rem;
  }
}

@media screen and (max-width: 1370px) {
  .group_heading {
    font-family: "Space Grotesk", sans-serif;
    color: var(--main-text);
    -webkit-text-stroke: none;
    text-shadow: none;
    font-size: 1.5rem;
    text-transform: capitalize;
  }

  .ipadhide {
    display: none;
  }

  .day {
    padding-left: 0.65rem;
    z-index: 1;
  }

  .sup {
    font-size: smaller; /* Set the font size smaller */
    margin-left: -3px;
    margin-top: 2rem;
    z-index: 0;
    text-transform: none;
  }
  #resultsContainer {
    width: clamp(600px, 90%, 1500px);
  }

  .festival_text h3,
  .festival_text a {
    font-size: 1.2rem;
    font-weight: 600;
  }

  #sort-by-header {
    display: none;
  }

  #sort-by-header-ipad,
  #sort-by-header-mobile {
    display: block;
    font-family: sans-serif;
  }
}

/* Hamburger menu styles */
.ham {
  cursor: pointer;
  display: none; /*hide by default on larger screens */
  position: fixed;
  top: 0.25rem;
  right: 0.75rem;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill: none;
  transition:
    stroke-dasharray 400ms,
    stroke-dashoffset 400ms;
  stroke: var(--main-text);
  stroke-width: 5.5;
  stroke-linecap: round;
}
.ham1 .top {
  stroke-dasharray: 40 139;
}
.ham1 .bottom {
  stroke-dasharray: 40 180;
}
.ham1.active .top {
  stroke-dashoffset: -98px;
}
.ham1.active .bottom {
  stroke-dashoffset: -138px;
}

.menu-icon {
  display: none; /* Hide by default on larger screens */
  cursor: pointer;
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 2;
}
.menu-icon div {
  width: 30px;
  height: 3px;
  background-color: var(--main-text);
  margin: 6px 0;
  transition: 0.4s;
}

@media screen and (max-width: 1300px) {
  #links-maintext {
    margin-top: 40px;
  }

  .header-button {
    display: none;
  }

  nav a {
    display: none; /*Hide navigation links by default on smaller screens */
  }
  .dropdown {
    display: none; /*NOTE: THIS ISN'T WORKING*/
  }
  .ham {
    display: block;
  }
  .menu-icon {
    display: none; /* Show the hamburger icon on smaller screens */
  }

  .menu-icon.active div:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 7px);
  }

  .menu-icon.active div:nth-child(2) {
    opacity: 0;
  }

  .menu-icon.active div:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -7px);
  }

  body.menu-open {
    overflow: hidden;
    background-color: #fff; /*rgba(252, 239, 85, 0.9);*/
    ::-webkit-scrollbar {
      display: none;
    }
    & > .results_container {
      overflow: hidden;
    }
  }

  body.menu-open .menu-links {
    display: flex;
    position: fixed;
    transition: opacity 0.3s ease-in-out;
    z-index: 7;
    background-color: var(--main-yellow); /*rgba(252, 239, 85, 0.9);*/
    background-size: auto;
    width: 100dvw;
    height: 100dvh;
    padding: 30px;
    /* text-align: center; */
    flex-direction: column;
    align-items: center;
    overflow: auto;
  }

  body.menu-open nav a,
  body.menu-open .menu-links a {
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.5;
    /* text-indent: -4em; */
    /* padding-left: 7rem; */
    margin-bottom: 1.5em;
    color: var(--main-text);
    text-decoration: none;
  }

  body.menu-open .navbar {
    background: none;
  }

  body.menu-open #archive-list,
  body.menu-open #social-links,
  body.menu-open #signup-text,
  body.menu-open #tip,
  body.menu-open #info-submission,
  body.menu-open footer,
  body.menu-open .logo-container,
  body.menu-open .headerSocial,
  body.menu-open #links-text,
  body.menu-open .insta-grid,
  body.menu-open #newsletter-button,
  body.menu-open #newsletter-archive,
  body.menu-open #thelist-button,
  body.menu-open .dropdown,
  body.menu-open .header_oc,
  body.menu-open .ocended,
  body.menu-open .accordion,
  body.menu-open #divider-line,
  body.menu-open #mc_embed_shell,
  body.menu-open #map,
  body.menu-open .container,
  body.menu-open #resultsContainer,
  body.menu-open .collaborators {
    display: none; /* Hide when the menu is open */
    transition: opacity 0.3s ease-in-out; /*add this line for a smooth fade in-out effect*/
  }

  body:not(.menu-open) #archive-list,
  body:not(.menu-open) #social-links,
  body:not(.menu-open) #signup-text,
  body:not(.menu-open) #tip,
  body:not(.menu-open) footer,
  body:not(.menu-open) .logo-container,
  body:not(.menu-open) .headerSocial,
  body:not(.menu-open) #links-text,
  body:not(.menu-open) .ocended,
  body:not(.menu-open) .accordion,
  body:not(.menu-open) #divider-line,
  body:not(.menu-open) #mc_embed_shell,
  body:not(.menu-open) #map,
  body:not(.menu-open) .container,
  body:not(.menu-open) #resultsContainer,
  body:not(.menu-open) .collaborators {
    display: block; /* Show when the menu is closed */
    transition: opacity 0.3s ease-in-out; /*add this line for a smooth fade in-out effect*/
  }

  body:not(.menu-open) .insta-grid,
  body:not(.menu-open) #newsletter-archive,
  body:not(.menu-open) #newsletter-button,
  body:not(.menu-open) #thelist-button {
    display: flex;
  }

  body:not(.menu-open) .insta-grid,
  .insta-ended {
    justify-content: center;
  }

  .insta-grid a,
  .insta-ended a {
    width: 30%;

    @media (max-width: 768px) {
      width: 45%;
    }
  }

  body:not(.menu-open) .logo-container {
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease-in-out; /*so that the logo container can be centered properly*/
  }
  .menu-links img {
    display: flex;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
  }

  .menu-links a:hover img {
    transform: scale(1.2); /* Scale up on hover */
  }
  body.menu-open .menu-links h3 {
    text-decoration: underline;
    font-size: 5em;
    text-align: center;
    /* margin-bottom: 2rem;
    margin-top: 3rem; */
    /* width: 50%; */
    position: relative;
    /* left: 4rem; */
    z-index: 1;
  }
  #info-submission {
    max-width: 90%; /*commented out as it's not currently necessary*/
  }
  .social-icons img {
    height: 40px;
  }
  .logo-container a {
    display: flex;
  }
  #sideMenu {
    display: none;
  }
  .insta-grid {
    margin: auto -2px;
    margin-bottom: 30px; /*negative margin to counter the img margins*/
  }
  #newsletter-button,
  #thelist-button,
  #newsletter-archive {
    max-width: 90%;
  }

  #newsletter-archive {
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
  }
}
@media screen and (min-width: 800px) {
  .filters_mobile {
    display: none;
  }
  /* .festival_text {
    margin-top: -1.5rem;
  } */
}

@media screen and (min-width: 800px) and (max-width: 1024px) {
  #resultsContainer {
    width: 95%;
  }

  .desktop {
    display: none;
  }

  .festival_text h3 {
    font-size: 1rem;
    font-weight: 600;
  }

  .festival {
    grid-template-columns: 0% 33% 14% 14% 16% 25%;
    column-gap: 0;
  }
  .apply {
    width: 7rem;
  }

  .bookmark-icon,
  .applied-icon,
  .admin-icon {
    display: none;
  }
  .festival_text h3,
  .festival_text a {
    font-size: 1rem;
    font-weight: 600;
  }
}
@media screen and (max-width: 800px) {
  .campaign {
    white-space: nowrap; /* Prevents the text from wrapping to the next line */
    overflow: hidden; /* Hides the overflowing content */
    text-overflow: ellipsis; /* Displays an ellipsis (...) when the text overflows */
    max-width: 95%;
  }
  .accordion {
    width: 95%;
  }
  .insta-ended {
    margin: 30px 0;
  }
  .accordion-item .content {
    padding: 0;
  }

  #mc_embed_signup {
    display: block;
    /* & input {
      @media (width >= 2000px) {
        width: 50%;
      }
    } */
  }

  .column img {
    margin-top: 0;
  }
  #down_arrow {
    max-width: 15%;
  }

  #mc_embed_shell {
    margin-top: 0px;
  }

  #resultsContainer {
    display: inline-flex;
    flex-direction: column;
    width: 90%;
    /* display: none; */
  }
  .festival img {
    height: 100px;
    display: flex;
    margin-right: 0;
    margin-bottom: 20px;
    /* margin-left: calc(50% - 50px);

    margin-right: 0; */
  }
  .error_title {
    margin-top: 4rem;
    padding: 12px;
    font-size: 1.8em;
    text-align: center;
    line-height: 1.25;
  }
  .filter_container {
    display: none;
  }

  .festival {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: large;
    line-height: 1.3;
    position: relative;
    /* border: none; */
    padding: 0;
  }

  .festival_image a {
    display: flex;
    justify-content: center;
  }

  .event_links {
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .event_bio {
    width: 90%;
  }
  .festival_text {
    text-align: center;
    margin: 20px auto 0;
    max-width: 90%;
  }
  .event_info h4 {
    display: none;
  }

  .event_location_mobile {
    display: flex;
    text-align: center;
    justify-content: center;
    margin-top: -50px;
    flex-direction: column;
  }

  .event_location_mobile a {
    margin: -10px auto 60px auto;
    text-decoration: underline;
  }

  .event_location {
    display: none;
  }
  .pagination .active,
  #pagination-top .active,
  #pagination-bottom .active {
    font-size: 2rem;
  }
  .pagination a,
  #pagination-top a,
  #patination-bottom a {
    padding: 10px;
  }

  .pagination,
  #pagination-top,
  #pagination-bottom {
    font-size: 1.2rem;
  }

  .event_bio {
    max-height: calc(2rem * 2.75); /* Show only two lines initially */
  }

  .results_container {
    display: block;
    width: 95vw;
  }
}

/* Adjust the button width for smaller screens */
@media screen and (max-width: 800px) {
  #header-image img {
    max-width: 100%; /* Set a full width for smaller screens */
    margin: 0 auto;
    /*margin-top: 4em;*/
  }
  .nav-links {
    display: none;
  }
  input {
    width: 90%;
  }
  .container {
    display: block;
  }

  .about-image {
    width: 100%;
  }

  .image-wrapper {
    max-width: 100%; /* Image takes up 100% of the container width on mobile */
    margin-right: 0; /* Remove margin to stack image on top of text */
  }
  .text-wrapper-1 > * {
    margin-top: 30px;
  }

  .event_links h4 {
    flex-direction: column;
  }

  .festival b {
    display: block;
  }
  .header_oc {
    width: 90%;
    /* margin: 0 auto; */
  }
  .apply-button {
    scale: 1.2;
    margin-bottom: 30px;
    padding: 10px 40px;
  }
  .opencall_cont > p {
    margin-top: 0px;
    margin-bottom: 1em;
  }
  .opencall_cont {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .notes-desc {
    text-align: left;
  }
  #down_arrow {
    max-width: 15%;
    min-width: 5%;
    display: none;
  }

  /* Mobile Filters */

  .filters-menu-mobile {
    position: fixed;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: 80%;
  }
  .event-type-scroll-mobile {
    padding-bottom: 20px;
  }
  .event-type-scroll-mobile > label {
    display: flex;
    margin-top: 0;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    font-size: 1rem;
  }

  .menu-icon-mobile {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: fixed; /* Make sure it's fixed position */
    bottom: -30px; /* Adjust as needed */
    right: -20px;
    /* left: 50%; Center it horizontally */
    /* transform: translateX(-50%); Center it horizontally */
  }

  .menu-icon-mobile:hover {
    transform: scale(1.1);
  }

  .menu-icon-mobile i {
    color: #fff;
    pointer-events: none;
  }

  .menu-icon-mobile.active {
    background-color: #fff;
  }

  .menu-icon-mobile.active i {
    color: var(--main-text);
  }

  .menu-content-mobile {
    display: none;
    background-color: #fff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  .menu-content-mobile.show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .search-container-mobile,
  .filter-section-mobile > label {
    font-weight: bold;
  }

  .menu-icon-mobile.active {
    position: absolute;
    /* bottom: calc(-6%); Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
  }
  .search_suggestions {
    z-index: 8;
    position: absolute;
    width: 59vw;
  }

  /* test comment */

  #loading_container {
    display: none;
  }

  #searchForm_mobile input {
    margin-top: 5px;
  }

  .clear-search_mobile {
    margin-top: 0.35rem;
  }
  .no_results img {
    max-width: 80%;
  }
  .form-control-mobile input[type="checkbox"] {
    margin-right: 5px; /* Adjust the spacing between checkbox and text */
    vertical-align: middle; /* Align checkbox vertically */
    margin-top: 3px;
  }
  .background-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--main-yellow), transparent);
    z-index: 4;
  }
  #back-to-top {
    right: auto;
    left: 20px;
  }
  .filter_container_map {
    display: block !important;
    width: 100%;
    max-width: 100%;
  }
  .map {
    display: block !important;
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
  }

  .map-label {
    margin-top: 0;
    margin-bottom: 0;
  }

  .map-checkboxes {
    display: flex;
    align-items: center;
    row-gap: 0.5em;
    column-gap: 0.5em;
  }

  .filter_cta_map {
    display: none;
  }

  /* Define styles for unchecked state */
  .hideme {
    display: none;
  }

  /* Define styles for checked state */
  input[type="checkbox"]:checked + label span:before {
    content: "--Deselect All--"; /* Text for checked state */
    /* Add any additional styles for the checked state here */
  }
  #CTA-maintext,
  #CTA-subtext {
    max-width: 75%; /*commented out as it's not currently necessary*/
  }

  .collaborators {
    width: 80%;
  }

  .collaborator {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
  }

  /* .collaborator img {
    margin-left: 23%;
  } */
  .collaborators_title {
    display: block;
  }

  .collaborator_text {
    padding: 0;
    margin-top: 20px;
  }

  .collaborator_text h2 {
    text-align: center;
  }

  .collaborator_links h3 {
    display: none;
  }

  .collaborator_links {
    flex-direction: row;
    margin: 0 auto;
    justify-content: space-between;
    max-width: 90%;
    margin-top: 40px;
    width: 90%;
  }

  .event_container {
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-bottom: 20px;
  }

  .event_container * a {
    font-size: 1.4rem;
  }
  .event_links_ind {
    display: none;
  }

  .event_links_ind_mobile {
    display: flex;
    flex-direction: row;
    /* padding: 0 10px; */
    font-size: 1.5rem;
  }

  .event_links_ind_mobile > a {
    padding: 0 10px;
  }

  .date_type {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
  }

  .dates_lg,
  .type_lg {
    display: none;
  }

  .oc_mob {
    display: none;
  }

  /* .bookmark-icon {
    font-size: 1.8rem;
    position: absolute;
    left: 76.5%;
  } */
  .bmac-msg {
    font-size: 1.12rem;
  }
  .cookie-text-inner {
    max-height: 100px;
    overflow: scroll;
    margin-bottom: 10px;
  }

  .cookie-text-inner :is(p, ul) {
    width: 100%;
  }

  .cookie-consent :is(h3, h2) {
    font-size: 1.1rem;
  }

  .cookie-content {
    position: fixed;
    bottom: 20%;
    margin: 50px 10px;
    border-radius: 20px;
  }

  .apply-cont {
    scale: 1.3;
    margin: 20px 0 10px;
  }

  .custom-select {
    width: 220px;
    max-width: 220px;
  }

  .optionsList.dropdown-content {
    width: 210px;
  }

  .festival_hr {
    display: none;
  }
  .desktop {
    display: none;
  }
  .read-more-btn.mobile {
    display: block;
  }

  .read-more.mobile {
    width: 80%;
  }
  .moreInfo {
    /* Ensure the truncated text stays on one line */
    /* white-space: nowrap; */
    & p {
      -webkit-line-clamp: 3;
    }
  }
  #nl-main,
  #tl-main {
    & * {
      font-size: 1rem;
    }
  }
  #nl-image,
  #tl-image {
    width: 30%;
    /*background: url('../images/icons/newspaper.png') center/cover no-repeat;*/
  }
}
/* Media queries for iPhones and iPads */
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-width: 481px) and (max-device-width: 1400px) and (-webkit-min-device-pixel-ratio: 2) {
  /* Hide the element for iPhones and iPads */
  .hideme {
    display: none;
  }
}