@media (min-width: 1024px) {
  .block.block-views.views-exposed-form form>div:not(.num-total-active) {
    display: grid;
    grid-template-areas:
      'search     search      search      empty_4     empty_4     empty_4     empty_4'
      'sections   sections    sections    sections    sections    sections    sections'
      'type       type        type        type        type        empty_3     empty_3'
      'target     target      target      empty_1     location    location    empty_5'
      'hosted     hosted     empty_2     empty_2     buttons     buttons     buttons';
    grid-template-columns: repeat(7, 1fr);
  }

  .block.block-views.views-exposed-form form .mobile-select,
  .block.block-views.views-exposed-form form .mobile-back {
    display: none;
  }

  /* ------------------------------ GLOBAL CHECKBOX ITEM STYLE ------------------------------ */
  .block.block-views.views-exposed-form fieldset {
    margin: 0;
  }

  .block.block-views.views-exposed-form .form-item-h,
  .block.block-views.views-exposed-form fieldset .form-item {
    width: 90%;
    max-width: 160px;
    height: 3rem;
    background-color: var(--border_gray);
    margin: 0;
    position: relative;
    cursor: pointer;
  }

  .block.block-views.views-exposed-form fieldset legend ul,
  .block.block-views.views-exposed-form form .num-active {
    display: none;
  }

  .block.block-views.views-exposed-form form .num-total-active {
    position: absolute;
    top: 1rem;
    padding: .5rem;
    /* right: 15%; */
    right: 245px;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--border_gray);
    color: var(--main_blue);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--border_gray);
  }

  /* ------------------------------ HOSTED ACTIVITIES CHECKBOX ------------------------------ */
  .block.block-views.views-exposed-form .form-item-h {
    max-width: 260px;
    margin-top: 3rem;
  }

  .block.block-views.views-exposed-form .form-item-h label {
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 1.35rem 1.35rem;
    background-image: url(../../assets/icons/icon_hide.svg);
  }

  .block.block-views.views-exposed-form .form-item-h.checked label {
    background-image: url(../../assets/icons/icon_show_w.svg);
  }

  /* hide input checkbox and place above button to always be clicked on event */
  .block.block-views.views-exposed-form .form-item-h input,
  .block.block-views.views-exposed-form fieldset .form-item input {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
  }

  /* show checkboxes labels */
  .block.block-views.views-exposed-form .form-item-h label,
  .block.block-views.views-exposed-form fieldset .form-item label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 .5rem;
    font-size: 12px;
    line-height: 1em;
    text-align: center;
    color: var(--medium_gray);
    margin: auto 0 0 0;
    pointer-events: none;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item label {
    display: none;
  }

  .block.block-views.views-exposed-form .form-item-h input,
  .block.block-views.views-exposed-form fieldset button {
    border: none;
  }

  .block.block-views.views-exposed-form .form-item-h.checked,
  .block.block-views.views-exposed-form fieldset .form-item.checked {
    background-color: var(--main_blue);
  }

  .block.block-views.views-exposed-form .form-item-h.checked label,
  .block.block-views.views-exposed-form fieldset .form-item.checked label {
    color: #FFF;
  }

  .block.block-views.views-exposed-form .form-item-h label,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item label,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item label {
    text-align: left;
    padding-left: 2rem;
    background-size: 1.25rem 1.25rem;
    background-position: 0.4rem center;
    background-repeat: no-repeat;
  }


  /* ------------------------------ LOCATION FILTER ------------------------------ */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-checkboxes.form--inline {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'physical online';
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item.form-item-l-15 {
    grid-area: online;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item.form-item-l-17 {
    grid-area: physical;
  }

  /* button icons */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item label {
    background-size: 1rem 1rem;
    background-position: .5rem;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item.form-item-l-17 label {
    background-image: url(../../assets/icons/icon_pin.svg);
    background-size: 22px 22px;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item.checked.form-item-l-17 label {
    background-image: url(../../assets/icons/icon_pin_w.svg);
    background-size: 22px 22px;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item.form-item-l-15 label {
    background-image: url(../../assets/icons/icon_online.svg);
    background-size: 18px 16px;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item.checked.form-item-l-15 label {
    background-image: url(../../assets/icons/icon_online_w.svg);
  }


  /* ------------------------------ TARGET FILTER ------------------------------ */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-checkboxes.form--inline {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'graduate student researcher';
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.graduate {
    grid-area: graduate;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.researchers {
    grid-area: researcher;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.form-item-tg-10 {
    grid-area: student;
  }

  /* button icons */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.graduate label {
    background-image: url(../../assets/icons/icon_event_tg_graduate.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.checked.graduate label {
    background-image: url(../../assets/icons/icon_event_tg_graduate_w.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.form-item-tg-10 label {
    background-size: 36px 36px;
    background-image: url(../../assets/icons/icon_event_tg_student.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.checked.form-item-tg-10 label {
    background-size: 36px 36px;
    background-image: url(../../assets/icons/icon_event_tg_student_w.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.researchers label {
    background-size: 36px 36px;
    background-image: url(../../assets/icons/icon_event_tg_research.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item.checked.researchers label {

    background-size: 36px 36px;
    background-image: url(../../assets/icons/icon_event_tg_research_w.svg);
  }


  /* ------------------------------ TYPE FILTER ------------------------------ */
  /* checkbox style */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item {
    aspect-ratio: 1;
    height: unset;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item label {
    height: 25%;
    bottom: 1rem;
    text-transform: capitalize;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-checkboxes.form--inline {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
      'lecturescolloquia ceremoniesprizes allscientific conferences seminars'
      'lecturescolloquia ceremoniesprizes allscientific schools seminars'
      'lecturescolloquia ceremoniesprizes allscientific workshops seminars';
  }

  /* group colloquia and lectures */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.colloquia-lectures {
    grid-area: lecturescolloquia;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-51,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-53 {
    display: none;
  }

  /* group ceremonies and prizes */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-58,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-59 {
    grid-area: ceremoniesprizes;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-58 {
    display: none;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-52 {
    grid-area: seminars;
  }

  /* button to add all activities */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .all-scientific-select {
    grid-area: allscientific;
  }

  /* ------------ minor checkboxes all added on button click toghether ------------ */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-54 {
    grid-area: schools;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-55 {
    grid-area: workshops;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-56 {
    grid-area: conferences;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-54,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-55,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-56 {
    aspect-ratio: unset;
    padding: 0;
    background-color: transparent;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-54 label,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-55 label,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-56 label {
    height: 100%;
    bottom: 0;
    padding-left: 2.5rem;
    text-align: left;
    position: relative;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-54 label::after,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-55 label::after,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-56 label::after {
      position: relative;
      font-size: 12px;
      top: unset;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-54 label::before,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-55 label::before,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-56 label::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transform-origin: center center;
    background-color: var(--border_gray);
    /* box-shadow: inset 0px 0px 0px 4px var(--border_gray); */
    box-shadow: none;
    background-position: center center;
    background-size: 50%;
    background-repeat: no-repeat;
    transition: all 300ms ease;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.checked.form-item-ty-54 label,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.checked.form-item-ty-55 label,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.checked.form-item-ty-56 label {
    color: var(--medium_gray);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.checked label::before {
    transition: all 300ms ease;
    background-image: url(../../assets/icons/icon_tick.svg);
    background-color: var(--main_blue);
  }

  /* ------------ ------------ ------------ ------------ */

  /* add type watermarks */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item {
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: content-box;
    padding: .5rem 0 3rem 0;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.colloquia-lectures {
    background-image: url(../../assets/filigrane/filigrana-colloquia-grey.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.checked.colloquia-lectures {
    background-image: url(../../assets/filigrane/filigrana-colloquia-w.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-59 {
    background-image: url(../../assets/filigrane/filigrana-ceremony-grey.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.checked.form-item-ty-59 {
    background-image: url(../../assets/filigrane/filigrana-ceremony-w.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.all-scientific-select {
    background-image: url(../../assets/filigrane/filigrana-school-grey.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.checked.all-scientific-select {
    background-image: url(../../assets/filigrane/filigrana-school-w.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.form-item-ty-52 {
    background-image: url(../../assets/filigrane/filigrana-seminar-grey.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item.checked.form-item-ty-52 {
    background-image: url(../../assets/filigrane/filigrana-seminar-w.svg);
  }


  /* ------------------------------ SECTIONS FILTERS ------------------------------ */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item {
    aspect-ratio: 1;
    height: unset;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item label {
    height: 50%;
    bottom: 1.5rem;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-checkboxes.form--inline {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(7, 1fr);
  }

  /* add section logos */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item {
    background-size: auto 20px;
    background-repeat: no-repeat;
    background-position: center center;
  }

  /* colored bottom line for unchecked items */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item::after {
    content: '';
    width: 100%;
    height: 6px;
    background-color: var(--medium_gray);
    position: absolute;
    bottom: 0;
    left: 0;
  }

  /* change color when checked based on section */
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-2::after {
    background-color: var(--hecap);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-2 {
    background-image: url(../../assets/loghi/logo-hecap-dark-typo.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.checked.form-item-s-2 {
    background-image: url(../../assets/loghi/logo-hecap-w-typo.svg);
    background-color: var(--hecap);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-3::after {
    background-color: var(--cmsp);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-3 {
    background-image: url(../../assets/loghi/logo-cmsp-dark-typo.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.checked.form-item-s-3 {
    background-image: url(../../assets/loghi/logo-cmsp-w-typo.svg);
    background-color: var(--cmsp);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-5::after {
    background-color: var(--math);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-5 {
    background-image: url(../../assets/loghi/logo-math-dark-typo.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.checked.form-item-s-5 {
    background-image: url(../../assets/loghi/logo-math-w-typo.svg);
    background-color: var(--math);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-7::after {
    background-color: var(--esp);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-7 {
    background-image: url(../../assets/loghi/logo-esp-dark-typo.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.checked.form-item-s-7 {
    background-image: url(../../assets/loghi/logo-esp-w-typo.svg);
    background-color: var(--esp);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-4::after {
    background-color: var(--sti);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-4 {
    background-image: url(../../assets/loghi/logo-sti-dark-typo.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.checked.form-item-s-4 {
    background-image: url(../../assets/loghi/logo-sti-w-typo.svg);
    background-color: var(--sti);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-6::after {
    background-color: var(--qls);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-6 {
    background-image: url(../../assets/loghi/logo-qls-dark-typo.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.checked.form-item-s-6 {
    background-image: url(../../assets/loghi/logo-qls-w-typo.svg);
    background-color: var(--qls);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-8::after {
    background-color: var(--medium_gray);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.form-item-s-8 {
    background-image: url(../../assets/icons/icon_plus.svg);
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item.checked.form-item-s-8 {
    background-image: url(../../assets/icons/icon_plus_w.svg);
    background-color: var(--medium_gray);
  }

  /* FORM ACTIONS */
  .block.block-views.views-exposed-form div[data-drupal-selector='edit-actions'] {
    margin: 3rem 0 0 0;
  }

}


@media (min-width: 1200px) {

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item {
    background-size: auto 20px;
    margin: 0;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item label {
    height: 33.33%;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item label {
    bottom: .5rem;
  }

  .block.block-views.views-exposed-form div[data-drupal-selector='edit-actions']>* {
    font-size: 14px;
    margin: auto 0 auto 1rem;
  }
}


@media (min-width: 1400px) {
  .block.block-views.views-exposed-form form>div:not(.num-total-active) {
    display: grid;
    grid-template-areas:
      'search     search      search      search      search     empty_4     empty_4     void'
      'sections   sections    sections    sections    sections    sections    sections    void'
      'type       type        type        type        type        empty_3     empty_3     void'
      'target     target      target      empty_1     location    location    empty_5     void'
      'hosted     hosted      empty_2     empty_2     empty_2     buttons     buttons     buttons';
    grid-template-columns: repeat(8, 1fr);
  }

  /* .block.block-views.views-exposed-form .form-item-h label,
    .block.block-views.views-exposed-form fieldset .form-item label { font-size: 14px; } */

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item {
    background-position: center 2rem;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item label {
    display: block;
    bottom: 1rem;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item label,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-ty'] .form-item label {
    height: 33.33%;
  }
}


@media (min-width: 1700px) {

  .block.block-views.views-exposed-form .form-item-h label,
  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-tg'] .form-item label {
    padding-left: 3rem;
    background-size: 1.75rem 1.75rem;
    background-position: .5rem;
  }

  .block.block-views.views-exposed-form .form-item-h label {
    background-size: 22px 22px;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-l'] .form-item label {
    padding-left: 4rem;
    background-size: 1.35rem 1.35rem;
    background-position: 1rem;
  }

  .block.block-views.views-exposed-form fieldset[data-drupal-selector='edit-s'] .form-item label {
    bottom: .5rem;
  }
}