#main-content {
  .sep {
    margin: 1rem 0;
    border-bottom: 1px solid #ebebeb;
  }

  .resource-paging {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: 10px;

    > li {
      display: flex;
      width: 40px;
      height: 40px;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      border: 1px solid #e6e6e6;
      color: #0d0d0d;

      > a {
        width: 100%;
        height: 100%;
        color: #0d0d0d;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;

        > svg {
          width: 20px;
          height: 20px;
          fill: #0d0d0d;
        }
      }
    }
  }

  .resource-filter {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    align-items: center;
    list-style: none;

    > li {
      display: flex;
      padding: 9px;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      border: 2px solid #0E7636;
      background: #fff;

      &:has(.selected) {
        border-radius: 4px;
        background: #0E7636;
        color: #fff;
      }

      > a,
      > span {
        color: #0E7636;
        font-family: "Montserrat", sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 100%; /* 14px */
      }

      > span {
        color: #fff;
      }
    }
  }

  .vc_row ul li {
    margin-bottom: 0;
  }

  .psat-available-resources {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
  }

  /* make the summary look like your h3/link */
  .PSAT-Resource {
    summary {
      list-style: none; /* remove default marker */
      cursor: pointer;
      display: flex;
      padding: 16px;
      align-items: center;
      gap: 16px;
      align-self: stretch;
      border-radius: 2px;
      border: 1px solid #ccc;
      background: #fff;

      .icn {
        width: 16px;
        font-size: 16px; 
        margin-left: auto;       
      }
    }
  }

  /* hide the little disclosure triangle if you want */
  .PSAT-Resource summary::-webkit-details-marker {
    display: none;
  }

  /* animate open/close */
  .PSAT-Resource p {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;

    a {
      font-family: "Montserrat", sans-serif;
      display: flex;
      padding: 9px;
      max-width: 50px;
      margin-top: 16px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 5px;
      background: #e87123;
      color: #fff;      
      font-size: 0.875rem;
      text-transform: uppercase;
    }
  }

  /* when open, let it expand */
  .PSAT-Resource[open] {
    summary {
      border-width: 0;
      background: #0f78ae;
      color: #fff;
      border-radius: 0;

      .icn {
        width: 16px;
        font-size: 16px;  
        
        > svg {
          transform: rotate(180deg);
          fill: #fff;
        }
      }

      > h4 {
        color: #fff;
      }
    }
    p {
      border: 1px solid #ccc;
      padding: 16px;
      border-top: none;
      height: auto;
      max-height: 500px; /* big enough to fit your content */
      transition: max-height 0.3s ease;
    }
  }
}