/*!
 * Senate Democratic Caucus
 * Cantaloupe Sub Theme Styling UX2 - Version 1.2 CSS/JSS
 */

/* Theme Developer - ST / PR */

/* Last Worked on by: ST 9/30/26 */



/* Variables
***************************/
:root {
  --primary-color: #0b2644;
  --secondary-color: #e5e1d5;
  --accent-color: #ffae00;
  --light-color: #f4f2eb;
  --dark-color: #000000;
  --title-font: "Playfair Display", sans-serif;
  --body-font: "Montserrat", serif;
  --head-weight: 700;
  --link-weight: 600;
  --body-weight: 400;
  --border: 1px solid #000;
  --transition: all 0.35s ease-in;
}

::selection{
    background: var(--accent-color);
    color: var(--dark-color) !important;
    text-shadow: none;
}


/* Global
***************************/
body {
  background-color: var(--light-color);
}
.content-blk {
  padding: 96px 0px !important;
}
/* .row > * {
  &:first-child {
    padding-left: 0px !important;
  }
  &:last-child {
    padding-right: 0px !important;
  }
} */
.img-responsive {
  border-radius: 0px;
}
blockquote {
  content: "“";
  position: relative;
  font-family: var(--title-font);
  font-weight: 600;
  padding: 40px 20px 40px 60px;
  p {
    font-family: var(--title-font) !important;
    font-size: 2.8rem !important;
    line-height: 1.4;
  }
  &::before {
    content: "“";
    position: absolute;
    top: -18px;
    text-indent: -65px;
    font-size: 12rem;
    color: var(--accent-color) !important;
  }
}
hr {
  margin: 48px 0;
}
.divider {
  height: 0px;
  border: 0;
  border-top: 0.5px solid var(--dark-color);
  margin: 96px 0px;
  width: 100%;
}
.divider-sm {
  height: 0px;
  margin: 96px 0px 0px;
  width: 100%;
}
.not-front:not(.node--type-news, .contact) {
  #main-wrapper {
    padding: 96px 0%;
  }
}

/* Typography
***************************/
h1 {
  font-family: var(--title-font);
  font-weight: var(--link-weight);
  font-size: 6.4rem !important;
  /* line-height: 72px; */
  text-transform: capitalize;
  width: 100% !important;
  margin: 0px auto 40px !important;

  @media (max-width: 991px) {
    font-size: 4.8rem !important;
  }
}
h2 {
  font-family: var(--title-font);
  font-weight: var(--link-weight);
  font-size: 4.8rem !important;
  line-height: 56px;
  text-transform: capitalize;
  padding: 0px !important;
  margin-bottom: 40px;
  @media (max-width: 991px) {
    font-size: 4rem !important;
  }
}
h3 {
  font-family: var(--body-font);
  font-weight: var(--body-weight) !important;
  font-size: 2.8rem !important;
  line-height: 36px;
  text-transform: capitalize;
  letter-spacing: 5%;
  a {
    font-family: var(--body-font);
    font-weight: var(--body-weight) !important;
    font-size: 2.8rem !important;
    line-height: 36px;
    text-transform: capitalize;
    letter-spacing: 5%;
    &:hover {
      color: #000;
      font-weight: var(--body-weight) !important;
      text-decoration: underline;
    }
  }
}
p {
  font-family: var(--body-font); 
  font-weight: var(--body-weight);
  font-size: 1.6rem !important;
  line-height: 24px;
  &.supplemental {
    text-transform: capitalize;
    letter-spacing: 5%;
  }
  a {
    color: var(--dark-color);
    text-decoration: underline; 
  }
}
.eyebrow {
  font-family: var(--body-font);
  font-weight: var(--head-weight);
  font-size: 1.4rem !important;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 10%;
  &.special {
    display: inline-block;
    /* background: var(--primary-color); */
    color: var(--dark-color);
    padding: 4px 8px;
    margin-bottom: 16px;
  }
}
.standout {
  font-family: var(--title-font);
  font-weight: var(--link-weight);
  font-size: 2.8rem;
  line-height: 36px;
  text-transform: capitalize;
  margin-bottom: 24px !important;
  a:hover {
    color: var(--dark-color) !important;
  }
}
a {
  font-family: var(--body-font);
  font-weight: var(--body-weight);
  font-size: 1.6rem;
  &:hover {
    color: var(--dark-color) !important;
    text-decoration: underline !important;
  }
}
ul {
  li {
    line-height: 1.8;

    &::marker {
      color: var(--accent-color) !important;
    }
  }
}

/* Buttons
***************************/
.btn {
  font-family: var(--body-font);
  font-weight: var(--link-weight);
  font-size: 1.6rem !important;
  padding: 12px 20px;
  margin-top: 24px;
  text-decoration: none;
  border-radius: 0px !important;
}
.btn-primary {
  background-color: var(--accent-color) !important;
  color: #000 !important;

  &:hover {
    background-color: var(--primary-color) !important;
    color: var(--light-color) !important;
  }
}
.btn-secondary {
  background: transparent !important;
  color: var(--dark-color) !important;
  border: 1px solid #000;

  &:hover {
    background-color: var(--primary-color) !important;
    color: var(--light-color) !important;
    border: 1px solid var(--primary-color) !important;
  }
}

.btn-light {
  background: transparent;
  color: var(--light-color) !important;
  border: 1px solid var(--light-color);

  &:hover {
    background-color: var(--light-color) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--light-color);
  }
}

/* Navigation
***************************/
.header {
  background: var(--primary-color);
  position: relative;
  z-index: 1000;
}
#navbar-top {
  position: relative;
  padding: 0 !important;
}
.navbar-expand-xl,
.path-frontpage .navbar-expand-xl {
  width: 100%;
  height: 80px;
  background-color: var(--primary-color);
  @media (max-width: 1199px) {
    display: flex;
    /* flex-direction: row-reverse; */
    .navbar-toggler > span,
    .navbar-toggler > span:after,
    .navbar-toggler > span:before {
      background-color: var(--primary-color);
    }
  }
  .navbar-nav {
    a:hover {
      color: #fff !important;
      text-decoration: none !important;
    }
    .nav-link{
      &.active {
      color: var(--accent-color);
    }
    &:hover {
      text-decoration: none !important;
    }
      &:focus {
        color: #fff;
      }    
    }
    .nav-item {
      border-bottom: 3px solid transparent;

      &:hover {
        color: var(--accent-color);
        border-bottom: 3px solid var(--accent-color);
      }
      .dropdown-menu {
        background: var(--primary-color) !important;
        width: 180px;
        top: 104%;
        left: -20px;
        border: 0px solid transparent;
        padding: 10px;

        .dropdown-item {
          a {
            font-weight: var(--body-weight);
          }
          &:hover a {
            color: var(--primary-color) !important;
          }
        }
        .dropdown-item.active {
          a {
            color: var(--primary-color) !important;
          }
        }
      }
      
      .nav-link {
        padding: 27px 20px !important;
        font-weight: var(--body-weight);
        font-size: 1.2rem;
        text-transform: uppercase;

        &::after {
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M0.5 0.5L4 4L7.5 0.5' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E")
            center / contain no-repeat;
        }

      &.show {
        color: #fff;
      }
      }
    }

    @media (min-width:992px) and (max-width:1199px) {
      .flex-row {
        flex-direction: column !important;
        height: 50px;
      }
      .dropdown-menu {
        background: var(--accent-color);
      }
    }
  }
}


#CollapsingNavbar {
  .button-style {
    .btn-secondary {
      color: #000 !important;
      background: var(--accent-color) !important;

      &:hover {
        border: 1px solid #fff !important;
      }
    }
  }
}

@media (max-width:1199px) {
  .dropdown-item.active a {
    color: #000;
  }
  @media (max-width: 1199px) {
    .dropdown-item {
      color: #000 !important;
        &:hover a {
            color: #000 !important;
        }
    }
}
}

@media (max-width: 1199px) {
    #navbar-top {
        display: block;
    }
}



.navbar-brand {
  left: 100px;
  position: relative;

  @media (max-width: 767px) {
    left: 20px;
  }
}

.not-front #main {
  /* padding-top: 96px;
  padding-bottom: 96px; */
}

/* Top Header
***************************/
.path-frontpage .featured-top {
  max-height: 444px;

  @media (max-width: 767px) {
    margin-top: 0px;
  }  
}
/*** Flexslider Hero  ***/
.path-frontpage {
  .flexslider {
    height: 640px;

    &::before {
      content: "";
      background: linear-gradient(
        0deg,
        #0b2644 0%,
        rgba(11, 38, 68, 0.86) 40.38%,
        rgba(11, 38, 68, 0) 75%
      );
    }

    .slides {
      .views-field-field-feature-image {
        img {
          object-position: top;
        }
      }
    }
  }

  .featured-controls {
    position: relative;
    bottom: 180px;
    z-index: 100;
    display: flex;
    justify-content: center;
    
    i {
      color: #fff;
  &:hover {
    &::after {

      color: var(--accent-color);
      opacity: var(--fa-secondary-opacity, 1);
    }
  }
    } 
    }

.flex-control-nav {
  display: none;
}

  }

    @media (max-width: 767px) {
      .featured-top {
        margin-top: 0;
      }
  
      .flex-control-nav {
        width: 100vw;
        top: 100px;
        display: none;
      }
    
    }

.flex-pauseplay a {
  display: none !important;
}


/* Sidebar
*************************/
.sidebar {
  display: block !important;
  .block {
    padding: 0px;
    border: 0px solid;
  }
  .sidebar-content {
    position: relative;
    top: 0px;
    width: 360px;
    p:has(img) {
      margin-bottom: 0px;
    }
    img {
      object-fit: cover;
      object-position: top;
      height: 200px;
    }
    .sidebar-container {
      background: var(--secondary-color);
      padding: 40px;
      text-align: center;
      h3 {
        text-align: center;
      }
      p {
        color: var(--dark-color);
        &:has(a) {
          text-align: center;
        }
      }
      .sidebar-wrapper {
        padding-left: 0px !important;
        text-align: center;
        list-style: none;
        li {
          margin-bottom: 16px;
        }
        a:not(.btn) {
          color: var(--dark-color);
          font-weight: var(--body-weight);
        }
      }
    }
  }
  .sidebar-content.fixed {
    position: fixed;
    top: 80px !important;
    width: 35% !important;
    z-index: 10;
    height: max-content;
    img {
      display: none;
    }
  }
  a:not(.btn):hover {
    color: var(--dark-color) !important;
    font-weight: var(--body-weight) !important;
    text-decoration: underline;
  }
  a.active {
    color: var(--dark-color) !important;
    font-weight: var(--link-weight) !important;
  }
  .sidebar-container h3 {
    color: var(--dark-color);
    text-align: left;
    margin-bottom: 24px;
  }
}


/* Footer
***************************/
.site-footer {
  margin-top: 80px;
  padding: 0px;
  font-family: var(--body-font);
  border-top: 6px solid var(--accent-color);
  .content {
    font-size: 1.6rem;
  }
  .block {
    margin: 0px;
    padding: 0px;
    border: 0px solid;
  }
  .footer-left {
    background: var(--primary-color);
    padding: 96px 4% 80px 8%;
    h2,
    h4,
    p {
      color: var(--light-color);
    }
    h2 {
      line-height: 1;
    }
    ul {
      padding-left: 0px !important;
      li {
        margin-bottom: 20px;
      }
    }
  }
  hr {
    color: var(--light-color);
  }
  .footer-right {
    background: var(--secondary-color);
    color: black;
    padding: 96px 8% 0px 4%;
    .region-footer-right {
      .row > * {
        margin-bottom: 40px;
      }
    }
    h2,
    h3,
    a {
      color: var(--dark-color);
      text-decoration: none;
      &:hover {
        color: var(--dark-color) !important;
      }
    }
    a:hover {
      text-decoration: underline;
    }
    p {
      margin-bottom: 4px;
      color: black !important;
      &:last-child {
        margin-top: 20px;
      }
    }

    #block-sub-ux-v2-footerdistrictoffices {
      
      @media (max-width: 991px) {
        text-align: center;
      }
    }
  }
  .quicklinks,
  .copyright-text {
    span {
      font-weight: var(--body-weight) !important;
    }
    a:hover {
      color: var(--dark-color) !important;
      text-decoration: underline;
    }
  }
}
/* Quicklinks */
.quicklinks {
  list-style: none;
}

/* Copyright */
.copyright-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dem-logo {
  max-width: 80px;
  width: 48px;
  padding: 0px 12px;
}
.copyright-text,
.copyright-text p a,
.copyright-text span {
  color: var(--dark-color) !important;
  font-weight: var(--link-weight);
}

/* Home Page
***************************/

#main-wrapper\ 
/* Hide the generated title on the homepage only */
body.path-frontpage .field--name-node-title {
  display: none !important;
}

.path-frontpage {

  #main-wrapper {
    display: none !important;
  }
  
  .featured-bottom {
    background-color: var(--light-color) !important;
    top: 0; 
    padding: 0px 40px;
    @media (max-width: 1199px) {
      max-width: 1120px;
    }
    @media (max-width: 991px) {
      max-width: 100%;
      padding: 0px 30px;
    }
  }
  .featured-third {
    padding: 0px 40px;
  }
  .main-section {
    .region-featured-bottom-first {
      margin: 0px !important;
      padding: 0px;
      /*** Senator Block  ***/
      .senator-blk {
        padding: 0;
        .senator-info {
          margin-top: 0px;
          padding: 0;
        }
        .senator-img {
          text-align: right;
        }
      }
    }
  }
  .third-section {
    background: var(--secondary-color);
    .featured-third {
      .region-featured-bottom-third {
        padding: 0px !important;
      }
    }
  }

  /* Latest News */
  .latest-news-blk {
    .view-id-newsroom {
      padding: 0;
    }
  }
  .view-newsroom {
    padding: 0px;
    .view-content {
      .news-latest:not(:last-child) {
        border-right: var(--border);

        @media (max-width: 991px) {
          border-right: none;
          border-bottom: 1px solid #000;
        }
      }
      .news-latest {
        @media (max-width: 991px) {
          padding: 20px 0;
        }
      }
    }
  }

  /* Latest Videos */
  .video-blk {
    h2 {
      text-align: center;
    }
    .views-field-field-video {
      margin-bottom: 0px;
    }
    .teaser-wrapper {
      text-align: center;
      text-transform: uppercase;
      padding: 16px 0px 0px;
      .views-field-title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        height: 130px;
        margin-top: 0px !important;
        margin-bottom: 16px;
        overflow: hidden;

        @media (max-width: 991px) {
        }
      }
      .views-field-field-pubdate {
        margin-bottom: 0;
      }
    }
  }
}

/* Teaser Wrapper */
.teaser-wrapper {
  text-align: center;
  padding: 20px 10px;
  .views-field-title {
    margin: 0px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .views-field-field-pubdate {
    margin-bottom: 0;
    .date {
      margin-top: 16px;
    }

    @media (max-width: 991px) {
      padding-bottom: 40px;
    }
  }
  p.standout {
    a {
      color: var(--dark-color);
      font-family: var(--title-font) !important;
      font-weight: var(--link-weight);
      font-size: 2.8rem !important;
      line-height: 36px;
      text-transform: capitalize;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  }
}

/* Youtube Wrapper */
.youtube-container {
  margin: 0px auto !important;
  border-radius: 0px !important;
}

/* Large Buttons */
.three-button-container {
  .box { 
    background: linear-gradient(270deg, #465B71 var(--one), #0b2644 var(--two));
    display: flex;
    align-items: center;
    justify-content: left;
    position: relative;
    width: 100%;
    height: 155px;
    margin-bottom: 12px;
    padding-left: 24px;
    overflow: hidden;
    &:hover {
      animation: gradient 0.5s forwards ease-in-out;
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      right: 0;
      /* left: 92%; */
      background-color: var(--accent-color);
      width: 39px;
      height: 38px;

      i {
        color: #000;
      }
    }

    .content {
      color: var(--light-color);

      @media (max-width: 991px) {
        .standout {
          font-size: 1.8rem;
        }
      }
    }

    &:hover {
      .content {
        .standout {
          color: var(--accent-color);
        }
      }
    }
  }
}

@property --one {
  initial-value: 0%;
  inherits: false;
  syntax: '<percentage>';
}

@property --two {
  initial-value: 0%;
  inherits: false;
  syntax: '<percentage>';
}

@keyframes gradient {
  0% {
    --one: 0%;
    --two: 0%;
  }
  100% {
    --one: 0%;
    --two: 50%;
  }
}

/* Titles
***************************/
.field--name-field-sub-header {
  font-family: "Montserrat";
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.field--name-node-title {
  margin: 0px 0px 40px;
  h1 {
    text-align: left;
    margin: 0px;
  }
  h2 {
    text-align: left;
  }
}

/* Sub Pages
***************************/
/* Biography */
.header-icon {
  display: flex;
  padding-bottom: 20px;

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background: var(--accent-color);
  }
  h3 {
    margin: 0px 16px;
  }
}

/* Legislation */
.field--name-field-legislative-year {
  font-family: "Playfair Display";
  font-size: 4.8rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: 40px;
  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #000;
    position: relative;
    top: 9px;
  }
}
h3 {
  margin-bottom: 8px !important;
}
.year-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;

  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #000;
  }
}

/* District */
.district {
  #main-wrapper {
    padding-bottom: 0px !important;    
  }
  .featured-bottom {
    background-color: var(--light-color) !important;
    top: 0;
    padding: 96px 0px 0px;
    .region-featured-bottom-first {
      padding: 0px !important;
      margin-bottom: 0px !important;
    }
  }
  .table > :not(caption) > * > * {
    position: relative;
    background: var(--light-color) !important;
    padding: 8px 20px;
  }

  .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--secondary-color) !important;
  }

  .table-striped > tbody > tr {
    position: relative;
  }

  table {
    font-size: 1.6rem;
  }

  table tr th,
  table tr td {
    font-weight: var(--body-weight) !important;
    border: var(--border) !important;
  }

  table tr th.col {
    background: #0b2644 !important;
    color: white !important;
    padding: 12px;

    h3 {
      font-family: "Playfair Display";
      font-size: 2.8rem;
      margin-bottom: 0px;
    }
  }

  table p {
    margin: 0px;
  }

  #census tbody > tr:first-child > th,
  #census tbody > tr:first-child > td {
    background: var(--accent-color) !important;
    color: var(--dark-color) !important;
    padding: 8px 20px 8px;
    font-weight: var(--body-weight) !important;
    text-transform: uppercase;
  }

  #census tbody {
    tr th:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 8px;
      height: 100%;
    }

    tr:nth-child(2) th:before {
      border-left: 8px solid #bb2dc7 !important;
    }

    tr:nth-child(3) th:before {
      border-left: 8px solid #0175ba !important;
    }

    tr:nth-child(4) th:before {
      border-left: 8px solid #fdcf00 !important;
    }

    tr:nth-child(5) th:before {
      border-left: 8px solid #45c7ff !important;
    }

    tr:nth-child(6) th:before {
      border-left: 8px solid #ff6480 !important;
    }

    tr:nth-child(7) th:before {
      border-left: 8px solid #e996e4 !important;
    }

    tr:nth-child(8) th:before {
      border-left: 8px solid #fba200 !important;
    }
  }
  .field--name-body {
    display: block;
    position: relative;
    .chart-text {
      display: flex;
      flex-direction: column;
      position: absolute;
      left: 0px;
      top: 300px;
      width: 100%;
      text-align: center;
      z-index: 10;
      h2 {
        &:after {
          content: "";
          display: block;
          position: relative;
          top: 12px;
          left: 50%;
          transform: translateX(-50%);
          width: 60px;
          height: 4px;
          border-bottom: 8px solid var(--accent-color);
        }
      }
    }

    .chart-text {
      h2 {
        font-family: "Montserrat";
        font-size: 2.4rem;
      }
    }
    .chart-text-cover {
      background: #f4f2eb;
      bottom: 20px;
      height: 20px;
      left: 0px;
      position: relative;
      width: 100px;
      z-index: 100;
    }
  }
}

/* Budget */

/* For the Budget Stat Box */
.investment-stat {
  position: relative;
  width: 100%;
  max-width: 798px;
  min-height: 185px;
  margin: 32px 0;
  padding: 40px 28px;
  background: #e4e1d6;
  box-sizing: border-box;

  .accent {
    position: absolute;
    top: 0;
    left: 106px;
    width: 158px;
    height: 5px;
    background: #ffb000;
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .number {
    flex: 0 0 auto;
    color: #132642;
    font-family: var(--title-font);
    font-size: clamp(4.5rem, 8vw, 6rem);
    font-weight: 400;
  }

  .description {
    color: #1d1c1a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.23;
    letter-spacing: 0.04em;
  }

  @media (max-width: 700px) {
    padding: 40px 28px;

    .accent {
      left: 28px;
      width: 120px;
    }

    .content {
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
    }

    .number {
      font-size: 4.5rem;
    }

    .description {
      font-size: 20px;

      br {
        display: none;
      }
    }
  }
}

/* Local Resources */
.county-resources {
  width: 100%;
  padding: 0;

  .county-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;

    h2 {
      margin: 0;
    }
  }

  .section {
    margin-bottom: 3.5rem;

    &:last-child {
      margin-bottom: 0;
    }

    h3 {
      padding-bottom: 16px;
    }
  }
}

@media (max-width: 767px) {
  .county-resources {
    header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      margin-bottom: 2.5rem;

      h2 {
        font-size: 3rem;
      }
    }

    button {
      width: 100%;
      white-space: normal;
    }

    section {
      margin-bottom: 3rem;

      h3 {
        font-size: 2rem;
      }

      ul {
        padding-left: 1.75rem;

        li {
          font-size: 1.125rem;
        }
      }
    }
  }
}

/* Immigration */
.immigration {
  .highlighted {
    padding-top: 48px;
  }
  #main-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* Contact */
.contact {
  .block-sub-ux-v2-mainpagecontent {
    display: none;
  }
  .featured-bottom {
    padding: 40px 0px;
  }
  .region-featured-bottom-first {
    margin: 0px 0px 40px !important;

    @media (max-width: 767px) {
      margin: 0px 0px 40px !important;
    }
  }

  .block-webform-block {
    padding-top: 96px;
  }

  #main-wrapper {
    display: none;
  }

  .form-category {
    .webform-options-display-buttons-horizontal {
      justify-content: center;
      .webform-options-display-buttons-wrapper {
        flex: none;

        .form-check-label {
          background-color: transparent;
        }
      }
    }
  }

  .form-check-label {
    font-family: var(--body-font) !important;
    font-size: 1.6rem !important;
    font-weight: var(--subhead-weight) !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: underline;
    border: 0px;

    &:hover {
      font-weight: 500;
      text-decoration: underline;
      background: var(--accent-color) !important;
      color: var(--dark-color) !important;
      cursor: pointer;
    }
  }

  #edit-meeting-or-event {
    .webform-options-display-buttons .form-check-input:checked ~ .form-check-label {
      background-color: var(--accent-color) !important;
    }
    @media (max-width: 767px) {
      .webform-options-display-buttons-wrapper:nth-of-type(2),
      .webform-options-display-buttons-wrapper:nth-of-type(4) {
        display: none;
      }
    }
  }

  .webform-header-section {
    padding: 0px 8% 96px;
    border: var(--border);
    border-radius: 0px;

    @media (max-width: 767px) {
      padding: 40px 5%;
    }

.webform-options-display-buttons .form-check-input:checked ~ .form-check-label {
  background: var(--accent-color) !important;
}
  }

  .js-webform-type-fieldset {
    legend .fieldset-legend {
      display: block;
      margin-top: 40px;
    }
  }
  .webform-button--submit:hover {
    background: var(--primary-color);
  }

  
}

/* Newsroom Page */
.path-newsroom {
  .featured-news {
    padding-bottom: 48px;
  }
  .eyebrow:not(.special) {
    margin-bottom: 0px;
  }
  .teaser-wrapper {
    display: flex;
    position: relative;
    margin: 0px auto;
    padding: 0px;

    @media (max-width: 767px) {
      flex-direction: column;
    }

    .teaser-img img {
      height: 100%;
      object-fit: cover;
      border-radius: 0px;
    }
  }
  .teaser-wrapper-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    background: var(--secondary-color);
    color: var(--dark-color);
    text-align: left;
    h3 {
      margin-bottom: 20px;
      a {
        color: var(--dark-color);
      }
    }
    .datetime {
      color: var(--accent-color);
    }
    .teaser-wrapper-txt:hover h3,
    .teaser-wrapper-txt:hover h3 a {
      color: var(--accent-color);
    }
    h3 a,
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      color: var(--dark-color);
      overflow: hidden;
    }
  }
  .views-field-title h3 {
    margin-bottom: 20px;
    a:hover {
      color: var(--dark-color) !important;
    }
  }
  .view-newsroom {
    .views-field-field-pubdate {
      text-align: left !important;
    }
  }
}

.path-videos {
  .views-field-field-video {
    margin-bottom: 0px;
  }
}

.node--type-news {
  #main-wrapper {
    margin: 0px auto 56px !important;
  }
  .layout__region--content {
    display: flex;
    flex-direction: column;    
  }
  .field--name-node-title {
    margin: 0px auto;
  }
  .field--type-entity-reference {
    margin-top: 40px;
  }
  .field--name-taxonomy-vocabulary-2,
  .datetime {
    display: inline-flex;
    background: var(--primary-color);
    color: var(--accent-color);
    padding: 4px 8px;
  }
}

/* FAQ Module
*************************/
.ui-accordion {
  .ui-accordion-header {
    background: transparent;
    color: var(--dark-color);
    margin: 0px auto;
    padding: 20px 0px;
    font-weight: var(--link-weight);
    border-top: var(--border);
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-radius: 0px;

    &:not(.ui-state-active):last-of-type {
      border-bottom: var(--border);
    }
  }

  .ui-accordion-header.ui-state-active {
    color: var(--dark-color) !important;
  }
}

.faqfield-question:focus-visible {
  outline: 0px;
}

.ui-accordion .ui-accordion-content {
  padding: 20px 0px;
  border: 0px;
}

.ui-accordion-content {
  border-width: 0px;
  background: var(--light-color);
}

.ui-accordion-header {
  display: flex !important;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  background: var(--primary-color);
  color: var(--light-color);
  margin-top: 12px !important;
  border: 1px solid transparent;
  border-radius: 16px;
}

.ui-icon,
.ui-state-focus .ui-icon,
.ui-button:focus .ui-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect x="0.5" y="-0.5" width="49" height="49" transform="matrix(1 0 0 -1 0 49)" stroke="black"/><path d="M25.3536 32.3536C25.1583 32.5488 24.8417 32.5488 24.6464 32.3536L21.4645 29.1716C21.2692 28.9763 21.2692 28.6597 21.4645 28.4645C21.6597 28.2692 21.9763 28.2692 22.1716 28.4645L25 31.2929L27.8284 28.4645C28.0237 28.2692 28.3403 28.2692 28.5355 28.4645C28.7308 28.6597 28.7308 28.9763 28.5355 29.1716L25.3536 32.3536ZM25 18L25.5 18L25.5 32L25 32L24.5 32L24.5 18L25 18Z" fill="black"/></svg>');
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  margin-top: 0px;
}

.ui-state-hover .ui-icon,
.ui-button:hover .ui-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect x="0.5" y="-0.5" width="49" height="49" transform="matrix(1 0 0 -1 0 49)" stroke="black"/><path d="M24.6464 37.3536C24.8417 37.5488 25.1583 37.5488 25.3536 37.3536L28.5355 34.1716C28.7308 33.9763 28.7308 33.6597 28.5355 33.4645C28.3403 33.2692 28.0237 33.2692 27.8284 33.4645L25 36.2929L22.1716 33.4645C21.9763 33.2692 21.6597 33.2692 21.4645 33.4645C21.2692 33.6597 21.2692 33.9763 21.4645 34.1716L24.6464 37.3536ZM25 13L24.5 13L24.5 37L25 37L25.5 37L25.5 13L25 13Z" fill="black"/></svg>');
  /*Important: when Changing SVG color in the Rect fill, don't use # but use %23 then the hex code with no spaces */
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  margin-top: 0px;
}

.ui-state-active .ui-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect x="0.5" y="0.5" width="49" height="49" fill="%23F0AC19" stroke="black"/><path d="M25.3536 17.6464C25.1583 17.4512 24.8417 17.4512 24.6464 17.6464L21.4645 20.8284C21.2692 21.0237 21.2692 21.3403 21.4645 21.5355C21.6597 21.7308 21.9763 21.7308 22.1716 21.5355L25 18.7071L27.8284 21.5355C28.0237 21.7308 28.3403 21.7308 28.5355 21.5355C28.7308 21.3403 28.7308 21.0237 28.5355 20.8284L25.3536 17.6464ZM25 32L25.5 32L25.5 18L25 18L24.5 18L24.5 32L25 32Z" fill="black"/></svg>');
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  margin-top: 0px;
  transform: scaleY(1);
}

/* Pagination
*************************/
.pagination {
	margin: 40px auto 0px;
	justify-content: center;
}

.page-link {
	background-color: transparent !important;
	color: var(--dark-color) !important;
	padding: 16px !important;
	font-size: 1.8rem !important;
	font-weight: var(--link-weight) !important;
	border: 1px solid transparent !important;
	border-radius: 0px !important;
}

.page-link:hover,
.page-item.active .page-link {
	background-color: transparent;
	color: var(--primar-color) !important;
	border: var(--border) !important;
}

/* Misc.
*************************/

/* Mobile Select Button */
@media (min-width: 992px) {
  .select-issues {
    display: none;
  }

    .issues-view {
    padding-bottom: 40px !important;
  }
    .views-field-title {
    padding-top: 10px;
  }
}

/* Romove Sidebar with the class sidebar-remove on mobile devices */
@media (max-width: 991px) {
  .sidebar-remove {
    display: none;
  }
}

/* Select Option Styling */
.select-wrapper {
  display: flex;
  width: 100%;
  position: relative;
  margin: 32px auto 79px;
  align-items: stretch;
}

.select-wrapper select {
  flex: 1;
  width: 100%;
  padding: 14px 60px 14px 16px;
  font-size: 16px;
  border: 1px solid #222;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.select-wrapper > div {
  display: flex;
  align-items: stretch;
}

.select-wrapper button {
  width: 50px;
  height: auto;
  background: var(--accent-color);
  border: 1px solid #000;
  border-left: 0;
  cursor: pointer;
  font-size: 20px;
}


.block-google-translator {
  position: relative;
  right: 100px
}
@media (max-width: 1199px) {
  /* Translate button */
  .not-front {
    .block-google-translator {
      /* top: 74px !important; */
    }
  }

  .block-google-translator {
    position: absolute;
    width: auto !important;
    height: auto !important;
    border: none;
    z-index: 10;
    top: 90px !important;
    right: 0;
    background-color: #d9e6e4;
    color: #000000;
    padding: 10px;

    .google-translator-switch {
      color: #000000 !important;

    }
  }
}


/* Skip to Content */
.skip-link.visually-hidden.focusable:focus {
  position: absolute !important;
  clip: unset !important;
  overflow: visible !important;
  left: 0 !important;
  top: 0px !important;
  z-index: 9999;
  padding: 10px 16px !important;
  background: #fff;
  color: #000;
  height: 50px !important;
  width: 200px !important;
  text-decoration: underline !important;
  transform: translateX(0%) !important;
}