*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.tw-z-50 {
  z-index: 50;
}

.tw-m-10 {
  margin: 2.5rem;
}

.tw-m-4 {
  margin: 1rem;
}

.tw-m-auto {
  margin: auto;
}

.\!tw-mt-8 {
  margin-top: 2rem !important;
}

.tw-mb-16 {
  margin-bottom: 4rem;
}

.tw-ml-8 {
  margin-left: 2rem;
}

.tw-mr-10 {
  margin-right: 2.5rem;
}

.tw-mt-12 {
  margin-top: 3rem;
}

.tw-mt-20 {
  margin-top: 5rem;
}

.tw-mt-4 {
  margin-top: 1rem;
}

.tw-flex {
  display: flex;
}

.\!tw-h-auto {
  height: auto !important;
}

.tw-h-screen {
  height: 100vh;
}

.tw-w-1\/3 {
  width: 33.333333%;
}

.tw-w-2\/3 {
  width: 66.666667%;
}

.tw-w-\[200px\] {
  width: 200px;
}

.tw-w-\[340px\] {
  width: 340px;
}

.tw-w-\[400px\] {
  width: 400px;
}

.tw-w-full {
  width: 100%;
}

.tw-w-\[7\/8\] {
  width: 7/8;
}

.tw-w-3\/4 {
  width: 75%;
}

.tw-min-w-\[340px\] {
  min-width: 340px;
}

.tw-flex-auto {
  flex: 1 1 auto;
}

.tw-flex-row {
  flex-direction: row;
}

.tw-flex-col {
  flex-direction: column;
}

.tw-flex-wrap {
  flex-wrap: wrap;
}

.tw-items-center {
  align-items: center;
}

.tw-justify-start {
  justify-content: flex-start;
}

.tw-justify-end {
  justify-content: flex-end;
}

.tw-justify-center {
  justify-content: center;
}

.tw-justify-items-start {
  justify-items: start;
}

.tw-gap-6 {
  gap: 1.5rem;
}

.tw-gap-x-12 {
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}

.tw-space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.tw-text-nowrap {
  text-wrap: nowrap;
}

.tw-rounded-md {
  border-radius: 0.375rem;
}

.\!tw-border-gray-300 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;
}

.\!tw-bg-sdt-green {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(39 155 128 / var(--tw-bg-opacity)) !important;
}

.tw-bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.tw-bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.tw-p-4 {
  padding: 1rem;
}

.\!tw-px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.\!tw-py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.tw-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.tw-px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.tw-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.\!tw-pt-6 {
  padding-top: 1.5rem !important;
}

.tw-pb-4 {
  padding-bottom: 1rem;
}

.tw-pl-2 {
  padding-left: 0.5rem;
}

.tw-pl-4 {
  padding-left: 1rem;
}

.tw-pr-4 {
  padding-right: 1rem;
}

.tw-text-center {
  text-align: center;
}

.tw-text-right {
  text-align: right;
}

.tw-align-text-top {
  vertical-align: text-top;
}

.tw-align-text-bottom {
  vertical-align: text-bottom;
}

.\!tw-text-sm {
  font-size: .8em !important;
}

.tw-text-sm {
  font-size: .8em;
}

.\!tw-font-bold {
  font-weight: 700 !important;
}

.tw-font-bold {
  font-weight: 700;
}

.tw-uppercase {
  text-transform: uppercase;
}

.tw-italic {
  font-style: italic;
}

.tw-leading-6 {
  line-height: 1.5rem;
}

.tw-text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.tw-text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tw-opacity-0 {
  opacity: 0;
}

.tw-opacity-100 {
  opacity: 1;
}

.tw-transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tw-duration-500 {
  transition-duration: 500ms;
}

/*
Outputs to /wp-content/themes/sdt-wp-theme/css/sdt-wp-theme.css
During development run          npm watch-css
To build for production run     npm build-css
TODO: Migrate CSS to TailwindCSS for new and ongoing development and improvements
*/

h1 {
  font-size: 2.25em;
  font-weight: 700;
}

h2 {
  font-size: 1.875rem;
  font-weight: 700;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.affiliate-page {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2.5rem;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: space-between;
  gap: 2.5rem;
}

.card-list figure {
  grid-column: span 1 / span 1;
  border-width: 1px;
}

.affiliate-container {
  margin-left: auto;
  margin-right: auto;
}

.affiliate-section {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  & .affiliate-header {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  & h2 {
    margin-top: 1.5rem;
  }
  & h2 {
    margin-bottom: 0px;
  }
  & h2 {
    padding-bottom: 0px;
  }
  & h2 {
    text-align: left;
  }
  & h2 {
    font-size: 2em;
  }
  & h2 {
    font-weight: 700;
  }
  & h2 {
    --tw-text-opacity: 1;
    color: rgb(30 39 70 / var(--tw-text-opacity));
  }
  & h3 {
    margin-top: 2em;
  }
  & h3 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  & h3 {
    text-align: left;
  }
  & h3 {
    --tw-text-opacity: 1;
    color: rgb(39 155 128 / var(--tw-text-opacity));
  }
}

.affiliate-cards {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  gap: 2.5rem;
  border-width: 1px;
}

@media (min-width: 640px) {
  .affiliate-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .affiliate-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.affiliate-cards {
  & .affilliate-card {
    display: flex;
  }
  & .affilliate-card {
    width: 100%;
  }
  & .affilliate-card {
    flex-direction: column;
  }
  & .affilliate-card {
    justify-content: space-between;
  }
  & .affilliate-card {
    & img {
      aspect-ratio: 5px;
    }
    & img {
      height: 320px;
    }
    & img {
      width: 100%;
    }
    & img {
      -o-object-fit: contain;
         object-fit: contain;
    }
    & img {
      vertical-align: middle;
    }
    & img {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
    }
    & img:hover {
      --tw-scale-x: 1.05;
      --tw-scale-y: 1.05;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    & .authors {
      font-size: .8em;
    }
    & .authors {
      --tw-text-opacity: 1;
      color: rgb(148 163 184 / var(--tw-text-opacity));
    }
    & .price {
      position: absolute;
    }
    & .price {
      top: 1rem;
    }
    & .price {
      right: 1rem;
    }
    & .price {
      border-radius: 0.5rem;
    }
    & .price {
      border-width: 2px;
    }
    & .price {
      --tw-border-opacity: 1;
      border-color: rgb(255 255 255 / var(--tw-border-opacity));
    }
    & .price {
      --tw-bg-opacity: 1;
      background-color: rgb(134 83 183 / var(--tw-bg-opacity));
    }
    & .price {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }
    & .price {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    & .price {
      font-size: 8px;
    }
    & .price {
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
    }
    & figcaption {
      margin-top: 1rem;
    }
    & figcaption {
      height: auto;
    }
    & figcaption {
      & h4 {
        text-align: left;
      }
      & h4 {
        font-size: 1.5rem;
      }
      & h4 {
        --tw-text-opacity: 1;
        color: rgb(11 61 145 / var(--tw-text-opacity));
      }
      & .description {
        margin-top: 1rem;
      }
      & .description {
        width: 100%;
      }
      & .description {
        max-width: 36rem;
      }
      & .description {
        text-align: justify;
      }
      & .description {
        font-size: .8em;
      }
      & .description {
        --tw-text-opacity: 1;
        color: rgb(107 114 128 / var(--tw-text-opacity));
      }
    }
  }
}

/*Add hover states*/

.affilliate-card a:hover .authors,
.affilliate-card a:hover h4,
.affilliate-card a:hover .buy-link,
.affilliate-card a:focus .authors,
.affilliate-card a:focus h4,
.affilliate-card a:focus .buy-link {
  text-decoration: underline;
}

.affiliate-notice {
  padding: 1.5rem;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

.site-notice {
  padding: 1rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(11 61 145 / var(--tw-text-opacity));
  & a {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
}

.buy-link {
  font-size: .8em;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(11 61 145 / var(--tw-text-opacity));
}

/* Style for the dialog modal */

.citation-modal {
  z-index: 50;
  width: 420px;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 2rem;
}

/* Style for the backdrop */

dialog::backdrop {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  opacity: 0.6;
}

/* Style for the close button */

.citation-modal-close {
  cursor: pointer;
  border-style: none;
  background-image: none;
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity));
}

/* Style for the copy button */

.citation-modal-copy {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: rgb(39 155 128 / var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Clear float */

.citation-modal-menu::after {
  content: "";
  display: table;
  clear: both;
}

.citation-header {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  justify-items: start;
}

.citation-text {
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #c0c0c0 !important;
  margin-top: 10px;
}

.citation-buttons {
  width: 100%;
  text-align: center;
}

.citation-action-zone {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  justify-items: start;
}

.results-notice {
  margin-top: 2.5rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  padding: 5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(11 61 145 / var(--tw-text-opacity));
}

/*public list results*/

.search-result-item {
  padding: 1rem;
}

/*Filter search classes*/

@keyframes tw-spin {
  to {
    transform: rotate(360deg);
  }
}

.searching-status {
  animation: tw-spin 1s linear infinite;
  vertical-align: middle;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.filter-subsection-title {
  padding-left: 1rem;
  font-size: .8em;
  font-weight: 700;
  text-transform: uppercase !important;
  --tw-text-opacity: 1;
  color: rgb(11 61 145 / var(--tw-text-opacity));
}

details {
  margin-bottom: .5em;
  padding: 0px;
  & summary {
    margin-bottom: 1rem;
  }
  & summary {
    border-radius: 0.375rem;
  }
  & summary {
    --tw-bg-opacity: 1;
    background-color: rgb(39 155 128 / var(--tw-bg-opacity));
  }
  & summary {
    padding: 1rem;
  }
  & summary {
    font-size: .95em;
  }
  & summary {
    font-weight: 700;
  }
  & summary {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  & ul {
    margin-left: 0px;
  }
  & ul {
    list-style-type: none;
  }
  & ul {
    padding-left: 1.25rem;
  }
  & .taxo-item {
    display: flex;
  }
  & .taxo-item {
    list-style-type: none;
  }
  & .taxo-item {
    align-items: center;
  }
  & .taxo-item > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
  & .taxo-item {
    font-size: .8em;
  }
  & .taxo-item {
    line-height: 2rem;
  }
  & .taxo-item input[type=checkbox] {
    margin-top: -0.5rem;
  }
  & .taxo-item input[type=checkbox] {
    margin-right: 0.25rem;
  }
}

/*& ul { @apply*/

/*}tw-ml-4 tw-pl-0 tw-list-none tw-text-[.8em] tw-leading-10;
        & li {
            & .taxo-item { @apply tw-flex tw-flex-row tw-justify-start tw-gap-2 !tw-text-[1em] tw-font-bold tw-flex-nowrap;   }
            & .taxo-item input[type=checkbox] { @apply tw-mr-2 -tw-mt-1; }
        }*/

/*}*/

.topic-suggestion-card {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.itemid {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

h4 {
  font-size: 1.15em !important;
}

.highlighted {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(11 61 145 / var(--tw-text-opacity));
}

.debug-value {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.pagination-bar {
  margin-top: 2.5rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 1.25rem;
  & .pagingation-count {
    padding-right: 1rem;
  }
  & .pagingation-count {
    text-align: right;
  }
  & .pagingation-count {
    font-size: 12pt;
  }
  & .pagingation-action {
    display: flex;
  }
  & .pagingation-action {
    flex-direction: row;
  }
  & .pagingation-action {
    align-items: center;
  }
  & .pagingation-action {
    justify-content: flex-end;
  }
  & .pagingation-action {
    & li {
      margin-left: 0.5rem;
      margin-right: 0.5rem;
    }
    & li {
      list-style-type: none;
    }
    & li {
      border-radius: 0.375rem;
    }
    & li {
      border-width: 1px;
    }
    & li {
      --tw-border-opacity: 1;
      border-color: rgb(209 213 219 / var(--tw-border-opacity));
    }
    & li {
      padding: 0.5rem;
    }
    & li {
      font-size: .8em;
    }
    & li {
      & a {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
      }
    }
  }
}

/*.activepage { @apply tw-bg-sdt-green; }
.activepage a { @apply !tw-text-white; }*/

#search-sort {
  & .sort-controls {
    display: flex;
  }
  & .sort-controls {
    flex-direction: row;
  }
  & .sort-controls {
    & select {
      border-style: none !important;
    }
    & select {
      --tw-bg-opacity: 1 !important;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
    }
    & select {
      line-height: normal;
      padding: 0px;
      font-size: 10px !important;
    }
  }
}

/* Search UX properties */

#search-stats {
  border: 1px solid;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
  margin-bottom: 1.5rem;
  justify-content: center;
  border-radius: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  & .found-count {
    padding: 1rem;
  }
  & .found-count {
    text-align: center;
  }
  & .search-operator {
    font-weight: 700;
  }
  & .search-operator {
    --tw-text-opacity: 1;
    color: rgb(134 83 183 / var(--tw-text-opacity));
  }
  & .findings {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  & .findings {
    text-align: center;
  }
  & .findings {
    font-size: 2.25rem;
  }
  & .criteria {
    margin-bottom: 1rem;
  }
  & .criteria {
    display: flex;
  }
  & .criteria {
    width: 100%;
  }
  & .criteria {
    flex-direction: row;
  }
  & .criteria {
    justify-content: space-between;
  }
  & .criteria {
    padding: 0.5rem;
  }
  & .criteria {
    text-align: center;
  }
  & .criteria {
    font-family: Verdana, Open Sans;
  }
  & .criteria {
    font-size: .8em;
  }
  & .criteria {
    & .searchParam {
      display: inline;
    }
    & .searchParam {
      list-style-type: none;
    }
    & .searchParam {
      padding: 0px;
    }
    & .searchParam {
      --tw-text-opacity: 1;
      color: rgb(11 61 145 / var(--tw-text-opacity));
    }
    & .searchParam {
      & li {
        display: inline;
      }
    }
  }
  & .search-cta {
    display: flex;
  }
  & .search-cta {
    width: 100%;
  }
  & .search-cta {
    flex: 1 1 0%;
  }
  & .search-cta {
    flex-direction: row;
  }
  & .search-cta {
    justify-content: space-between;
  }
  & .search-cta {
    border-radius: 0.25rem;
  }
  & .search-cta {
    border-width: 1px;
  }
  & .search-cta {
    --tw-border-opacity: 1 !important;
    border-color: rgb(226 232 240 / var(--tw-border-opacity)) !important;
  }
  & .search-cta {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }
  & .search-cta {
    padding: 1.5rem;
  }
  & .search-cta {
    vertical-align: middle;
  }
  & .search-cta {
    border: 1px solid;
    & h4 {
      margin: 0px;
    }
    & h4 {
      font-size: .8rem;
    }
    & h4 {
      --tw-text-opacity: 1;
      color: rgb(11 61 145 / var(--tw-text-opacity));
    }
    & a {
      font-size: .8em;
    }
    & a {
      text-transform: lowercase;
    }
    & p {
      margin: 0px;
    }
    & p {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    & p {
      font-size: .8em;
    }
  }
}

#citationModal {
  /*@apply tw-hidden tw-fixed tw-top-20 tw-left-50 tw-translate-x-50 tw-bg-red-500 tw-p-20 tw-border-1 tw-border-solid tw-shadow-md;*/
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  /* Above the overlay */
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  & .citation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  & .citation-action-zone {
    margin-top: 20px;
  }
}

.citationModal::backdrop {
  background-image: linear-gradient(45deg,
            magenta,
            rebeccapurple,
            dodgerblue,
            green);
  opacity: 0.75;
  z-index: 1000;
  width: 100%;
  height: 100%;
}

.podcast-card-list {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .podcast-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .podcast-card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.podcast-card-list {
  & .podcast-card {
    & .thumbnail {
      display: flex;
    }
    & .thumbnail {
      height: 320px;
    }
    & .thumbnail {
      width: 100%;
    }
    & .thumbnail {
      align-items: center;
    }
    & .thumbnail {
      justify-content: center;
    }
    & .thumbnail {
      border-radius: 0.375rem;
    }
    & .thumbnail {
      border-width: 1px;
    }
    & .thumbnail {
      --tw-border-opacity: 1;
      border-color: rgb(39 155 128 / var(--tw-border-opacity));
    }
    & .thumbnail {
      background-size: cover;
    }
    & .thumbnail {
      background-position: center;
    }
    & .thumbnail {
      background-repeat: no-repeat;
    }
    & .thumbnail {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
    }
    & .thumbnail:hover {
      --tw-scale-x: 1.05;
      --tw-scale-y: 1.05;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    & .thumbnail {
      & .play-button {
        margin: auto;
      }
      & .play-button {
        height: 8rem;
      }
      & .play-button {
        width: 8rem;
      }
      & .play-button {
        border-radius: 9999px;
      }
      & .play-button {
        border-width: 1px;
      }
      & .play-button {
        --tw-border-opacity: 1;
        border-color: rgb(39 155 128 / var(--tw-border-opacity));
      }
      & .play-button {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
      }
      & .play-button {
        -o-object-fit: contain;
           object-fit: contain;
      }
      & .play-button {
        opacity: 0.5;
      }
      & .play-button {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
      }
      & .play-button:hover {
        --tw-scale-x: 1.05;
        --tw-scale-y: 1.05;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      }
    }
  }
}

.search-criteria {
  padding: 0.5rem;
}

.smallbutton {
  border: 1px solid;
  min-width: 10rem;
  text-wrap: nowrap !important;
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(39 155 128 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: .8em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.smallbutton:hover {
  & a {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  & a {
    opacity: 1;
  }
  & a {
    transition-property: none;
  }
  & a:visited:hover {
    color: rgb(255 255 255 );
  }
}

.button-list {
  margin: auto;
  width: 75%;
  text-align: center;
  & button {
    margin: 0.5rem;
  }
  & button {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  & button {
    border-width: 1px;
  }
  & button {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
  }
  & button {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }
  & button {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  & button {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  & button {
    font-size: 1.875rem;
  }
  & button {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
  }
  & button {
    border-radius: 0px;
  }
  & .btn-active-media {
    --tw-bg-opacity: 1;
    background-color: rgb(39 155 128 / var(--tw-bg-opacity));
  }
  & .btn-active-media {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
}

.topic-card {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
  border-radius: 0.375rem;
  --tw-border-opacity: 1 !important;
  border-color: rgb(188 223 244 / var(--tw-border-opacity)) !important;
  padding: 1rem;
  border: 1px solid;
  border-radius: 4px;
  & .topic-card-image {
    display: flex;
  }
  & .topic-card-image {
    min-width: 140px;
  }
  & .topic-card-image {
    align-items: center;
  }
  & .topic-card-image {
    justify-content: center;
  }
  & .topic-card-image {
    padding: 1rem;
  }
  & .topic-card-image {
    /*@apply tw-min-w-30 tw-max-w-30;*/
    & img {
      height: 8rem;
    }
    & img {
      width: 8rem;
    }
    & img {
      -o-object-fit: cover;
         object-fit: cover;
    }
  }
  & h3 {
    font-size: 1.875rem;
  }
  & p {
    margin-bottom: 0px;
  }
  & p {
    font-size: 1em;
  }
}

.operator-and li:last-child::before:not(:first-child) {
  content: " AND ";
}

.operator-and li:last-child:not(:first-child)::before {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(134 83 183 / var(--tw-text-opacity));
}

.operator-or li:last-child::before:not(:first-child) {
  content: " OR ";
}

.operator-or li:last-child:not(:first-child)::before {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(134 83 183 / var(--tw-text-opacity));
}

.comma-separator::after {
  content: ", ";
}

.searchParam li:not(:last-child)::after {
  content: ", ";
}

/*li:not(:first-child):not(:nth-last-child(2)):*/

.debug {
  margin-right: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

/** Faculty  Page styles */

.scholar-cards {
  display: grid;
  gap: 3.5rem;
}

@media (min-width: 640px) {
  .scholar-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .scholar-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.scholar-card {
  grid-column: span 1 / span 1;
  min-width: 100%;
  border-start-start-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

@media (min-width: 640px) {
  .scholar-card {
    max-width: 250px;
  }
}

@media (min-width: 1024px) {
  .scholar-card {
    max-width: 300px;
  }
}

.scholar-card {
  & .headshot {
    position: relative;
  }
  & .headshot {
    margin-bottom: 1rem;
  }
  & .headshot {
    height: 20rem;
  }
  & .headshot {
    width: 15rem;
  }
  & .headshot {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
  }
  & .headshot {
    background-size: cover;
  }
  & .headshot {
    background-position: center;
  }
  & .headshot {
    background-repeat: no-repeat;
  }
  & .scholar_name {
    text-align: center;
  }
  & h3 {
    margin-bottom: 0.5rem;
  }
  & h3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  & h3 {
    text-align: center;
  }
  & h3 {
    font-family: Roboto Slab, Open Sans;
  }
  & h3 {
    font-size: 1.875rem;
  }
  & h3 {
    font-weight: 700;
  }
  & h3 {
    --tw-text-opacity: 1;
    color: rgb(11 61 145 / var(--tw-text-opacity));
  }
  & .scholar-meta {
    text-align: center;
  }
  & .scholar-meta {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity));
  }
  & .scholar-meta {
    & .title {
      font-weight: 700;
    }
    & .dept {
      font-family: Roboto Slab, Open Sans;
    }
    & .dept {
      font-weight: 700;
    }
    & .institution {
      font-family: Roboto Slab, Open Sans;
    }
    & .meta-links {
      margin-top: 1rem;
    }
    & .meta-links {
      display: flex;
    }
    & .meta-links {
      list-style-type: none;
    }
    & .meta-links {
      flex-direction: column;
    }
    & .meta-links {
      flex-wrap: wrap;
    }
    & .meta-links {
      padding: 0px;
    }
    & .meta-links {
      & li {
        margin: 0px;
      }
      & li {
        list-style-type: none;
      }
      & li {
        -moz-column-gap: 1rem;
             column-gap: 1rem;
      }
    }
  }
  & .scholar-bio {
    padding: 1rem;
  }
  & .scholar-bio {
    text-align: justify;
  }
  & .scholar-bio {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
  }
}

.scholar-link {
  --tw-text-opacity: 1;
  color: rgb(39 155 128 / var(--tw-text-opacity));
}

.scholar-link:visited {
  color: rgb(39 155 128 );
}

.scholar-link:hover {
  --tw-text-opacity: 1;
  color: rgb(39 155 128 / var(--tw-text-opacity));
}

.scholar-link:active {
  --tw-text-opacity: 1;
  color: rgb(39 155 128 / var(--tw-text-opacity));
}

.author-topic-list {
  align-items: center;
  justify-content: center;
  padding-left: 0px;
  & li {
    margin-bottom: 0.5rem;
  }
  & li {
    list-style-type: none;
  }
  & li {
    text-align: center;
  }
}

.filter-input {
  border-radius: 0.375rem;
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: .8em;
}

.filter-initial-link {
  font-weight: 700;
}

.loading-status {
  margin-top: 2.5rem;
  width: 100%;
  border-width: 1px;
  padding: 5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(11 61 145 / var(--tw-text-opacity));
}

.headshot-container {
  position: relative;
  margin-bottom: 1rem;
  border-radius: 9999px;
}

.scholar-flag {
  position: absolute;
  bottom: -10px;
  right: 32px;
  font-size: 3em;
  /* Adjust font size as needed */
}

.scholar-location {
  margin-top: 1rem;
  font-family: Arial, Open Sans;
}

.comma-seperated {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

.comma-seperated > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.comma-seperated {
  & li::after {
    content: ',';
  }
  & li:last-child::after {
    content: '';
  }
}

.filter-by-letter {
  display: flex;
  width: 100%;
  list-style-type: none;
  justify-content: space-between;
  padding: 0px;
  & li {
    margin: 0px;
  }
  & li {
    list-style-type: none;
  }
  & li {
    & .active {
      border-radius: 0.375rem;
    }
    & .active {
      --tw-bg-opacity: 1;
      background-color: rgb(226 232 240 / var(--tw-bg-opacity));
    }
    & .active {
      padding: 0.5rem;
    }
    & .active {
      font-weight: 700;
    }
    & .active {
      --tw-text-opacity: 1;
      color: rgb(39 155 128 / var(--tw-text-opacity));
    }
  }
}

fieldset label {
  font-family: Roboto Slab, Open Sans;
  font-size: .8em;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(11 61 145 / var(--tw-text-opacity));
}