/* variables */
:root {
  --green: #26d07c;
  --blue: #00aec7;
  --blue-medium: #00829b;
  --blue-dark: #005763;
  --blue-badge: #305495;
  --gray-dark: #2d3338;
  --gray-light: #d8d8d8;
  --gray-lighter: #efefef;
  --teal: #00AEC7;
  --white: #fff;
  --black: #2d3338;
  --yellow: #ffd100;
  --orange: #ff8200;
  --red: #cc0000;
  --emergency-1: #d04839;
  --emergency-2: #9d311f;
  --emergency-3: #000;

  --font-weight-bold: 800;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* desktop font sizes */
  --hero: 60px;
  --hero-lh: 64px;
  --page-title: 48px;
  --page-title-lh: 52px;
  --h1: 40px;
  --h1-lh: 44px;
  --h2: 32px;
  --h2-lh: 36px;
  --h3: 24px;
  --h3-lh: 28px;
  --h4: 22px;
  --h4-lh: 26px;
  --h5: 20px;
  --h5-lh: 24px;
  --h6: 18px;
  --h6-lh: 22px;
  --p-normal: 20px;
  --p-normal-lh: 32px;
  --p-medium: 18px;
  --p-medium-lh: 28px;
  --p-small: 16px;
  --p-small-lh: 26px;

  /* tablet font sizes */
  --tb-hero: 40px;
  --tb-hero-lh: 64px;
  --tb-page-title: 38px;
  --tb-page-title-lh: 52px;
  --tb-h1: 28px;
  --tb-h1-lh: 44px;
  --tb-h2: 28px;
  --tb-h2-lh: 36px;
  --tb-h3: 23px;
  --tb-h3-lh: 28px;
  --tb-h4: 21px;
  --tb-h4-lh: 26px;
  --tb-h5: 20px;
  --tb-h5-lh: 24px;
  --tb-h6: 18px;
  --tb-h6-lh: 22px;
  --tb-p-normal: 20px;
  --tb-p-normal-lh: 32px;
  --tb-p-medium: 18px;
  --tb-p-medium-lh: 28px;
  --tb-p-small: 16px;
  --tb-p-small-lh: 26px;

  /* mobile font sizes */
  --mb-hero: 32px;
  --mb-hero-lh: 64px;
  --mb-page-title: 28px;
  --mb-page-title-lh: 52px;
  --mb-h1: 26px;
  --mb-h1-lh: 44px;
  --mb-h2: 24px;
  --mb-h2-lh: 36px;
  --mb-h3: 22px;
  --mb-h3-lh: 28px;
  --mb-h4: 20px;
  --mb-h4-lh: 26px;
  --mb-h5: 20px;
  --mb-h5-lh: 24px;
  --mb-h6: 18px;
  --mb-h6-lh: 22px;
  --mb-p-normal: 20px;
  --mb-p-normal-lh: 32px;
  --mb-p-medium: 18px;
  --mb-p-medium-lh: 28px;
  --mb-p-small: 16px;
  --mb-p-small-lh: 26px;

  --primary-font: "Montserrat", sans-serif;
  --transition: all 0.3s ease;

  /* sadly these can't actually be used in media queries but leaving here for reference */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  font-family: var(--primary-font);
  color: var(--black);
  line-height: 1.6;
}

@media screen and (max-width: 576px) {
  h1.hero {
    font-size: var(--mb-hero);
    line-height: var(--mb-hero-lh);
  }

  h1.page-title {
    font-size: var(--mb-page-title);
    line-height: var(--mb-page-title-lh);
    font-weight: var(--font-weight-medium);
  }

  h1,
  .h1 {
    font-size: var(--mb-h1);
    line-height: var(--mb-h1-lh);
  }

  h2,
  .h2 {
    font-size: var(--mb-h2);
    line-height: var(--mb-h2-lh);
    font-weight: var(--font-weight-medium);
  }

  h3,
  .h3 {
    font-size: var(--mb-h3);
    line-height: var(--mb-h3-lh);
    font-weight: var(--font-weight-medium);
  }

  h4,
  .h4 {
    font-size: var(--mb-h4);
    line-height: var(--mb-h4-lh);
    font-weight: var(--font-weight-medium);
  }

  h5,
  .h5 {
    font-size: var(--mb-h5);
    line-height: var(--mb-h5-lh);
    font-weight: var(--font-weight-medium);
  }

  h6,
  .h6 {
    font-size: var(--mb-h6);
    line-height: var(--mb-h6-lh);
    font-weight: var(--font-weight-medium);
  }

  p {
    font-size: var(--mb-p-normal);
    line-height: var(--mb-p-normal-lh);
  }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
  h1.hero {
    font-size: var(--tb-hero);
    line-height: var(--tb-hero-lh);
  }

  h1.page-title {
    font-size: var(--tb-page-title);
    line-height: var(--tb-page-title-lh);
    font-weight: var(--font-weight-medium);
  }

  h1,
  .h1 {
    font-size: var(--tb-h1);
    line-height: var(--tb-h1-lh);
  }

  h2,
  .h2 {
    font-size: var(--tb-h2);
    line-height: var(--tb-h2-lh);
    font-weight: var(--font-weight-medium);
  }

  h3,
  .h3 {
    font-size: var(--tb-h3);
    line-height: var(--tb-h3-lh);
    font-weight: var(--font-weight-medium);
  }

  h4,
  .h4 {
    font-size: var(--tb-h4);
    line-height: var(--tb-h4-lh);
    font-weight: var(--font-weight-medium);
  }

  h5,
  .h5 {
    font-size: var(--tb-h5);
    line-height: var(--tb-h5-lh);
    font-weight: var(--font-weight-medium);
  }

  h6,
  .h6 {
    font-size: var(--tb-h6);
    line-height: var(--tb-h6-lh);
    font-weight: var(--font-weight-medium);
  }

  p {
    font-size: var(--tb-p-normal);
    line-height: var(--tb-p-normal-lh);
  }
}

@media screen and (min-width: 769px) {
  h1.hero {
    font-size: var(--hero);
    line-height: var(--hero-lh);
    font-weight: var(--font-weight-bold);
  }

  h1.page-title {
    font-size: var(--page-title);
    line-height: var(--page-title-lh);
    font-weight: var(--font-weight-medium);
  }

  h1,
  .h1 {
    font-size: var(--h1);
    line-height: var(--h1-lh);
    font-weight: var(--font-weight-medium);
  }

  h2,
  .h2 {
    font-size: var(--h2);
    line-height: var(--h2-lh);
    font-weight: var(--font-weight-medium);
  }

  h3,
  .h3 {
    font-size: var(--h3);
    line-height: var(--h3-lh);
    font-weight: var(--font-weight-medium);
  }

  h4,
  .h4 {
    font-size: var(--h4);
    line-height: var(--h4-lh);
    font-weight: var(--font-weight-medium);
  }

  h5,
  .h5 {
    font-size: var(--h5);
    line-height: var(--h5-lh);
    font-weight: var(--font-weight-medium);
  }

  h6,
  .h6 {
    font-size: var(--h6);
    line-height: var(--h6-lh);
    font-weight: var(--font-weight-medium);
  }

  p {
    font-size: var(--p-normal);
    line-height: var(--p-normal-lh);
    font-weight: var(--font-weight-regular);
  }
}

.divider {
  margin: 30px 0;
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-light);
  text-transform: uppercase;
}

hr {
  border: none;
  border-top: 1px solid var(--gray-light);
  margin: 30px 0;
}

ul,
ol {
  list-style: none;
}

li.carded {
  padding: 9px 13px;
  border: 1px solid var(--gray-light);
  margin: 10px 0;
  border-radius: 5px;
}

a {
  text-decoration: none;
  color: var(--blue-medium);
  transition: var(--transition);
}

a:hover {
  text-decoration: underline;
  color: var(--blue-medium);
  transition: var(--transition);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

:focus {
  outline: 1px dashed var(--blue);
  outline-offset: 2px;
}

input,
button,
textarea,
select {
  font: inherit;
  box-sizing: border-box;
}

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

.font-weight-regular {
  font-weight: var(--font-weight-regular) !important;
}

.font-weight-medium {
  font-weight: var(--font-weight-medium) !important;
}

/* container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  transition: margin-left 0.3s ease;
}

.container.shifted {
  margin-left: 430px;
}

/* header */
.navigation ul.nav {
  display: flex;
  align-items: center;
}

.navigation--mobile {
  display: none;
}

.navigation--mobile ul.nav li.logo {
  max-width: 120px;
  margin-right: auto;
}

.navigation ul.nav li {
  padding-right: 40px;
  font-weight: var(--font-weight-medium);
}

.navigation ul.nav li a {
  white-space: nowrap;
}

.navigation ul.nav li.has-submenu {
  position: relative;
}

.navigation ul.nav li.has-submenu:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 8px;
  display: inline;
  width: 10px;
  height: 10px;
  background-image: url("/icons/icon-down-caret.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.navigation.navigation-primary .has-submenu.open::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -51px;
  height: 4px;
  width: 100%;
  background-color: var(--blue);
  border-radius: 25px 25px 0 0;
}

.navigation.navigation-secondary .has-submenu.submenu-open::before {
  content: "";
  position: absolute;
  left: -11px;
  bottom: -13px;
  height: 4px;
  width: 100%;
  background-color: var(--blue);
  border-radius: 25px 25px 0 0;
}

.navigation.navigation-primary ul.submenu {
  display: none;
  position: absolute;
  background-color: var(--white);
  padding: 40px;
  border: 2px solid var(--blue);
  border-radius: 15px;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
  justify-content: space-between;
}

.navigation.navigation-secondary ul.submenu {
  display: none;
  position: absolute;
  background-color: var(--white);
  padding: 40px;
  border: 2px solid var(--blue);
  border-radius: 15px;
  top: 38px;
  left: -30px;
  z-index: 100;
  justify-content: space-between;
}

.navigation.navigation-secondary ul.submenu {
  right: auto;
}

.navigation.navigation-primary ul.submenu.open,
.navigation.navigation-secondary ul.submenu.open {
  display: flex;
}

.navigation.navigation-primary ul.submenu h3,
.navigation.navigation-secondary ul.submenu h3 {
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--font-weight-medium);
}

.navigation.navigation-primary ul.submenu li,
.navigation.navigation-secondary ul.submenu li {
  margin: 20px 0;
}

.navigation.navigation-primary ul.nav ul.submenu li:first-child {
  flex-grow: 0;
}

.navigation.navigation-primary ul.submenu li a,
.navigation.navigation-secondary ul.submenu li a {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-regular);
}

.navigation ul.nav li a {
  color: var(--black);
}

.navigation ul.nav li a:hover {
  color: var(--blue);
}

.navigation.navigation-primary {
  border-bottom: 1px solid var(--gray-light);
}

.navigation.navigation-primary .container {
  position: relative;
}

.navigation a.search {
  height: 40px;
  width: 40px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background-image: url("/icons/icon-search.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  display: inline-block;
}

.navigation.navigation-secondary {
  border-bottom: 1px solid var(--gray-light);
}

.navigation.navigation-primary ul.nav {
  justify-content: flex-end;
  padding: 40px 0;
}

.navigation.navigation-primary ul.nav a {
  font-size: 18px;
}

.navigation.navigation-primary ul.nav li:first-child {
  flex-grow: 1;
  justify-self: flex-start;
}

.navigation.navigation-secondary ul.nav {
  justify-content: flex-start;
  padding: 12px 0;
}

.navigation.navigation-secondary ul.nav li:last-child {
  flex-grow: 1;
  text-align: right;
}

.navigation.navigation-secondary ul.submenu li:last-child {
  text-align: left;
}

.mobile-menu ul.mobile-menu-list {
  padding: 0 28px;
}

.mobile-menu {
  /* display: none; */
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--white);
  z-index: 101;
  overflow: hidden;
  /* border-bottom: 1px solid var(--gray-light); */
}

.mobile-menu ul.mobile-menu-list {
  height: 0;
  transition: height 0.3s ease;
}

.mobile-menu.open ul.mobile-menu-list {
  height: 100%;
  transition: height 0.3s ease;
}

.mobile-menu ul.mobile-menu-list li {
  padding: 15px 0;
  border-bottom: 1px solid var(--gray-light);
}

.mobile-menu ul.mobile-menu-list > li:last-child {
  border-bottom: none;
  padding-bottom: 60px;
}

.mobile-menu ul.mobile-menu-list li a {
  color: var(--black);
  font-weight: var(--font-weight-medium);
  display: block;
}

.mobile-menu-list li.has-submenu {
  position: relative;
}

.mobile-menu-list > li.has-submenu:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 24px;
  display: inline;
  width: 10px;
  height: 10px;
  background-image: url("/icons/icon-down-caret.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.mobile-menu-list li.has-submenu ul.submenu li.has-submenu:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 16px;
  display: inline;
  width: 10px;
  height: 10px;
  background-image: url("/icons/icon-down-caret.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.mobile-menu-list > li.has-submenu.submenu-open:after {
  transform: rotate(180deg);
}

.mobile-menu-list li.has-submenu ul.submenu li.has-submenu.submenu-open:after {
  transform: rotate(180deg);
}

.mobile-menu-list ul.submenu {
  display: none;
  padding-left: 20px;
}

.mobile-menu-list ul.submenu.open {
  display: block;
  margin-top: 15px;
}

.mobile-menu-list ul.submenu li {
  position: relative;
  padding: 0;
  border-bottom: none;
}

.mobile-menu-list ul.submenu li a {
  padding: 10px;
  margin: 10px 0;
  border-bottom: none;
  background-color: var(--gray-lighter);
  display: block;
  border-radius: 10px;
}

.mobile-menu-list ul.submenu li.has-submenu ul.submenu li a {
  background-color: var(--white);
  color: var(--blue);
  text-decoration: underline;
  margin: 0;
}

/* Mobile navigation */
@media screen and (max-width: 1200px) {
  .navigation-primary,
  .navigation-secondary {
    display: none;
  }

  .navigation--mobile {
    display: block;
    padding: 11px 30px;
    border-bottom: 1px solid var(--gray-light);
  }

  .navigation--mobile ul.nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
  }

  .navigation--mobile ul.nav li {
    margin: 0;
  }

  .navigation--mobile ul.nav li.logo {
    flex-grow: 1;
  }

  .navigation--mobile ul.nav > li {
    padding: 0;
  }
}

.page-title--header {
  padding: 100px;
  background-image: url("/images/halftone-subpage-banner-left.png"),
    url("/images/halftone-subpage-banner-right.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
  background-size: contain;
  background-color: var(--blue-medium);
  color: var(--white);
}

.page-title--header.no-bg {
  background-image: none;
}

@media screen and (max-width: 1200px) {
  .page-title--header {
    padding: 24px 20px;
  }
}

.page-title--header--dark {
  background-color: var(--blue-dark);
}

/* buttons */
.btn {
  border: 2px solid var(--blue);
  border-radius: 35px;
  padding: 9px 32px;
  background-color: var(--white);
  font-weight: 600 !important;
  color: var(--black);
  font-weight: var(--font-weight-medium);
  transition: var(--transition);
  display: inline-block;
}

.btn:hover {
  text-decoration: none;
  background-color: var(--blue-dark);
  color: var(--white);
  transition: var(--transition);
}

/* alerts */
.alert {
  border: 2px solid var(--green);
  border-radius: 10px;
  padding: 10px;
  margin: 40px 0;
}

.alert .alert--title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 24px;
  margin-bottom: 10px;
  font-weight: var(--font-weight-semibold);
}

.alert .alert--title::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("/icons/weather-watch.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}

.alert .alert--body p {
  font-size: 16px;
  line-height: 26px;
}

.alert .alert--footer {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.alert.alert-conservation {
  border-color: var(--yellow);
}

.alert.alert-conservation-dark {
  border-color: var(--orange);
}

.alert.alert-emergency-level-1 {
  border-color: var(--emergency-1);
}

.alert.alert-emergency-level-2 {
  border-color: var(--emergency-2);
}

.alert.alert-emergency-level-3 {
  border-color: var(--emergency-3);
}

/* cards */
.cards--container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 30px;
  margin: 40px 0;
}

.cards--container .card--title h3 {
  margin-bottom: 0;
}

.card {
  border: 2px solid var(--blue);
  padding: 30px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--white);
}

.cards--container .card .card--body span.medium {
  font-size: 18px;
  font-weight: 500;
}

.card--gray {
  border-color: var(--gray-light);
}

@media screen and (max-width: 992px) {
  .cards--container {
    grid-template-columns: repeat(2, 1fr);
  }

  .card {
    grid-row: auto;
  }
}

@media screen and (max-width: 576px) {
  .cards--container {
    grid-template-columns: 1fr;
  }

  .card {
    grid-row: auto;
  }

  .card.stacked:nth-of-type(2) {
    grid-row: 3;
  }
}

@media screen and (min-width: 577px) {
  .card.stacked {
    grid-column: 2;
    grid-row: 1;
  }

  .card.stacked:nth-of-type(2) {
    grid-row: 2;
  }
}

.card .card--title {
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 16px;
  margin-bottom: 16px;
  font-weight: var(--font-weight-medium);
  position: relative;
}

.card .card--title.card--title--border h3 {
  margin-bottom: 0px;
}

.card .card--sbs {
  display: flex;
  gap: 20px;
}

@media screen and (max-width: 576px) {
  .card .card--sbs {
    flex-direction: column;
  }
}

.card--sbs > div {
  flex-basis: 50%;
}

.card--sbs .card--title {
  border-bottom: 0;
}

.card--sbs .file-details span {
  font-size: 14px;
}

.card--sbs .card--title p {
  font-size: 18px;
}

.card.card--arrow .card--title h3 {
  color: var(--black);
}

.card.card--arrow .card--title h3:after {
  content: "";
  position: absolute;
  top: 7px;
  right: 0;
  background-image: url("/icons/icon-arrow-right.svg");
  background-size: 22px 16px;
  background-position: center;
  height: 16px;
  width: 22px;
  background-repeat: no-repeat;
}

.card.card--arrow .card--title h3:hover:after {
  border: 2px solid var(--blue);
  border-radius: 50%;
  padding: 10px;
  transform: translate(12px, -12px);
}

.card--title h3 {
  font-size: 24px;
  margin: 0 0 30px;
}

.card--title p {
  margin: 30px 0;
}

.card--body p {
  margin: 24px 0;
}

.card--body p.small {
  font-size: 16px;
  margin: 0;
}

.card--data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

@media screen and (max-width: 1200px) {
  .card--data {
    margin: 10px 0;
  }
}

.card--data strong,
.card--data span {
  text-align: right;
}

.card--body .demand-status {
  padding: 6px 10px;
  background-color: var(--gray-lighter);
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .card--body .demand-status {
    font-size: 14px;
    line-height: 20px;
  }
}

.card--body.supply-and-demand {
  display: flex;
  justify-content: space-between;
}

.card--footer {
  margin-top: auto;
}

.card--footer small {
  font-size: 16px;
}

.card--footer a.card--footer-button {
  position: relative;
  display: block;
  text-align: center;
  font-weight: 600;
  border: 1px solid var(--blue-medium);
  border-radius: 0 0 20px 20px;
  left: -31px;
  bottom: -31px;
  padding: 6px;
  width: calc(100% + 62px);
  text-decoration: none;
}

.card--footer a.card--footer-button span {
  position: relative;
  margin-right: 20px;
}

.card--footer a.card--footer-button span::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 4px;
  display: inline;
  width: 12px;
  height: 12px;
  background-image: url("/icons/icon-down-caret.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

/* callout card */
.callout-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 90vh;
  margin: 40px;
  background-color: var(--black);
  border-radius: 50px;
}

.callout-card .callout-card--content {
  grid-row: 2;
  grid-column: 1;
  background-color: var(--white);
  width: 75%;
  justify-self: end;
  padding: 50px;
  border-radius: 25px;
}

.callout-card .callout-card--content p {
  margin: 34px 0;
}

/* panel */
.panel {
  display: flex;
  align-items: center;
  height: 70vh;
  margin: 50px;
  background-color: var(--gray-lighter);
  border-radius: 50px;
  overflow: hidden;
}

.panel.panel-content-right {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.panel--content,
.panel img {
  flex-basis: 50%;
  max-width: 50%;
  height: 100%;
  object-fit: cover;
}

.panel--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 0 100px;
  max-width: 800px;
}

.panel--content a {
  align-self: flex-start;
  display: inline-flex;
}

.panel--content span.category {
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--blue-medium);
  font-size: 20px;
}

@media screen and (max-width: 992px) {
  .panel {
    flex-direction: column;
    height: auto;
    border-radius: 20px;
    margin: 20px 10px;
  }

  .panel.panel-content-right {
    flex-direction: column;
  }

  .panel--content {
    padding: 20px 20px 0;
    gap: 0;
  }

  .panel--content .category {
    font-size: 18px;
    line-height: 44px;
  }

  .panel--content h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .panel--content p {
    font-size: 16px;
    line-height: 26px;
  }

  .panel--content a {
    font-size: 18px;
    line-height: 23px;
    margin: 32px 0;
  }

  .panel img {
    min-height: 220px;
    max-width: 100%;
  }

  #home-fact-sheet {
    padding-top: 20px !important;
    padding: 20px 20px 0;
  }
}

/* carousel */
.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 70px 0;
  padding-bottom: 50px;
}

.carousel-track-container {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  padding: 0;
  margin: 0;
}

.carousel-slide {
  border: 2px solid var(--gray-light);
  border-radius: 25px;
  padding: 20px;
  display: flex;
  align-items: cener;
  min-width: 100%;
}

.carousel-image {
  width: 40%;
  border-radius: 10px;
}

.carousel-slide .carousel-content {
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.carousel-slide .carousel-content h3 {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
}

.carousel-slide .carousel-content p {
  margin: 20px 0;
  font-size: 18px;
}

.carousel-slide .carousel-content a {
  flex-grow: 0;
  align-self: flex-start;
  font-weight: 600;
}

.carousel-btn {
  background-color: white;
  border: 2px solid #00a1d6;
  color: #00a1d6;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#prevBtn {
  left: -60px;
  background-image: url("/icons/icon-arrow-left-blue.svg");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  transition: var(--transition);
}

#prevBtn:hover {
  background-color: var(--blue-dark);
  background-image: url("/icons/icon-arrow-left-white.svg");
  transition: var(--transition);
}

#nextBtn {
  right: -60px;
  background-image: url("/icons/icon-arrow-right-blue.svg");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  transition: var(--transition);
}

#nextBtn:hover {
  background-color: var(--blue-dark);
  background-image: url("/icons/icon-arrow-right-white.svg");
  transition: var(--transition);
}

@media screen and (max-width: 768px) {
  .carousel {
    padding: 32px 10px 30px;
  }

  .carousel-slide {
    flex-direction: column;
  }

  .carousel-slide .carousel-content {
    margin-left: 0;
    margin-top: 20px;
  }

  .carousel-image {
    width: 100%;
  }

  #prevBtn {
    left: 0;
    top: 30%;
    z-index: 100;
  }
  #nextBtn {
    right: 0;
    top: 30%;
    z-index: 100;
  }
}

/* Trainings List View */
.breadcrumbs ul {
  display: flex;
  margin: 25px 0 30px;
}

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

.breadcrumbs ul li a {
  color: #00829b;
  text-decoration: underline;
}

.breadcrumbs ul li a:hover {
  text-decoration: none;
}

.breadcrumbs ul li:after {
  content: "›";
  font-size: 24px;
  margin: 0 20px;
}

.breadcrumbs ul li:last-of-type:after {
  content: "";
  margin: 0;
}

@media screen and (max-width: 768px) {
  .breadcrumbs ul {
    flex-wrap: wrap;
    gap: 0;
    margin: 15px 0;
  }

  .breadcrumbs ul li a {
    font-size: 14px;
  }
}

.course-filters--header {
  display: flex;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--gray-light);
}

.course-filters--header ul {
  display: flex;
  gap: 20px;
}

.course-filters--header a {
  flex-grow: 1;
  text-align: right;
}

.course-filters--header ul li a {
  color: var(--black);
  opacity: 0.6;
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  padding-bottom: 30px;
}

.course-filters--header ul li a.tab--active {
  opacity: 1;
  border-bottom: 5px solid var(--blue);
}

@media screen and (max-width: 1200px) {
  .course-filters--header ul {
    flex-wrap: wrap;
    gap: 0;
  }

  .course-filters--header ul li a {
    font-size: 18px;
    padding-bottom: 0;
  }

  .course-filters--header ul li a.tab--active {
    border-bottom: none;
  }

  .course-filters--header a {
    flex-grow: 1;
    text-align: left;
    margin-top: 10px;
  }

  .course-filters.operations-messages-filters.market-notices{
    gap: 0;
    margin-bottom: 0;
  }

  .operations-messages-filter.course-filters.market-notices .course-filters--form .form--container {
    flex-direction: row;
    margin-bottom: 30px;
  }

  .operations-messages-filter.course-filters.market-notices .course-filters--form .form--container button, .operations-messages-filter.course-filters.market-notices .course-filters--form .form--container a {
    flex-basis: 40%;
  }
}

.course-filters--form {
  margin-top: 40px;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #666666;
  border-radius: 5px;
}

input[type="date"] {
  height: 60px;
}

select {
  background-image: url("./icons/down-caret.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

fieldset.course-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border: none;
  margin: 70px 0;
}

@media screen and (max-width: 1200px) {
  fieldset.course-filters {
    grid-template-columns: 1fr;
  }
}

fieldset.course-filters legend {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  margin-bottom: 20px;
}

select,
.select-box {
  padding: 10px;
  border: 1px solid #666666;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  /* TODO: add background image for custom down arrow */
}

/* Course Grid */
.course-grid--header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
  gap: 20px;
}

@media screen and (max-width: 1200px) {
  .course-grid--header {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.course-grid--header select {
  min-width: 280px;
}

.course-grid--header button,
.view-toggle button {
  border: 2px solid var(--blue-medium);
  color: var(--blue-medium);
  padding: 14px 19px;
  border-radius: 5px;
  font-weight: var(--font-weight-medium);
  line-height: 0;
}

.view-toggle {
  display: flex;
}

.view-toggle button:first-of-type {
  border-radius: 5px 0 0 5px;
}

.view-toggle button:last-of-type {
  border-radius: 0 5px 5px 0;
}

.view-toggle button svg {
  height: 16px;
}

#listViewButton path,
#tileViewButton path {
  fill: var(--blue-medium);
}

#listViewButton[aria-pressed="true"],
#tileViewButton[aria-pressed="true"] {
  background-color: var(--blue-medium);
  color: var(--white);
}

#listViewButton[aria-pressed="true"] path,
#tileViewButton[aria-pressed="true"] path {
  fill: var(--white);
}

.course-grid--header button[aria-pressed="true"] {
  background-color: var(--blue-medium);
  color: var(--white);
}

.course-grid--header span:first-child {
  flex-grow: 1;
  text-align: left;
}

.course-grid--courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media screen and (max-width: 1200px) {
  .course-grid--courses {
    grid-template-columns: 1fr;
  }
}

.course-card {
  padding: 28px;
  border-radius: 25px;
  border: 2px solid var(--gray-light);
}

.course-card .course-categories {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}

.course-card .course-categories .tag-span {
  display: flex;
  align-items: center;
}

.new-flag {
  padding: 6px 10px;
  background-color: #305495;
  font-weight: var(--font-weight-medium);
  color: var(--white);
  text-transform: uppercase;
  align-self: flex-start;
}

.course-card .course-details strong {
  font-size: 14px;
  text-transform: uppercase;
}

.course-card .course-details h3 {
  color: var(--blue-medium);
}

.course-card .course-details p {
  font-size: 16px;
}

.course-card .course-details a {
  display: block;
}

.course-schedule--dates {
  margin: 20px 0;
}

.course-schedule--dates.unavailable,
.course-prerequisites {
  border: 1px solid var(--gray-light);
  padding: 6px 10px;
  border-radius: 10px;
  display: inline-block;
  margin: 20px 0;
}

.course-schedule--dates.unavailable {
  margin-bottom: 0;
}

.course-schedule--dates.unavailable p {
  font-size: 16px;
}

.course-card.systemOperator .course-entities,
.course-card.systemOperator .course-plan {
  display: none;
}

.course-entities {
  padding: 28px 0;
}

.course-entities strong,
.course-plan strong {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 10px;
}

span.entity-tag {
  margin: 0 10px 10px 0;
  padding: 6px 10px;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  font-size: 16px;
  display: inline-block;
}

.course-grid--courses .course-prerequisites--list {
  display: none;
}

/* Course List View */
.course-grid--courses.list-view {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.course-grid--courses.list-view .course-card {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: repeat(4, auto);
}

.course-grid--courses.list-view .course-card .course-categories {
  grid-row: 1/5;
  flex-direction: column;
  margin-right: 40px;
}

.course-grid--courses.list-view .course-details a {
  display: inline;
  font-weight: var(--font-weight-bold);
  color: var(--blue-medium);
}

.course-grid--courses.list-view .course-schedule--dates {
  margin: 0;
  display: flex;
  gap: 40px;
}

.course-grid--courses.list-view .course-schedule--dates p {
  margin-bottom: 10px;
}

.course-grid--courses.list-view .course-info p > a {
  display: inline-block;
  margin-left: 10px;
  font-weight: var(--font-weight-regular);
}

.course-grid--courses.list-view .course-info a {
  white-space: nowrap;
  flex-grow: 1;
}

.course-grid--courses.list-view .course-schedule--dates.unavailable {
  display: inline;
}

.course-grid--courses.list-view .course-schedule--dates.unavailable p {
  margin: 0;
  display: inline;
  width: auto;
}

.course-grid--courses.list-view .course-prerequisites {
  display: none;
}

.course-grid--courses.list-view .course-prerequisites--list {
  display: flex;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
}

/* Pagination */
.course-grid--pagination {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin: 70px 0;
}

.course-grid--pagination button {
  border: 2px solid var(--blue);
  padding: 14px 22px;
  border-radius: 5px;
  font-weight: var(--font-weight-medium);
}

.course-grid--pagination button:hover {
  border-color: var(--blue-dark);
}

.course-grid--pagination button:first-child {
  border-color: var(--blue-dark);
  background-color: var(--blue-dark);
  color: var(--white);
}

/* footer */
.footer-content {
  background-color: var(--black);
  color: var(--white);
  padding-top: 70px;
}

.footer-content h6 {
  color: var(--blue);
}

.footer-content p {
  font-size: 14px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px;
  padding: 50px 0;
}

.footer-column-3 .app-links {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}

.app-links img {
  height: 40px;
}

.footer-social-links {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 30px;
}

.footer-bottom {
  text-align: center;
}

.footer-nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
  background-color: var(--blue-medium);
  border-radius: 35px;
}

.footer-nav ul li a {
  color: var(--white);
  border: 2px solid transparent;
  padding: 10px 17px;
  border-radius: 25px;
  transition: var(--transition);
  font-weight: var(--font-weight-medium);
}

.footer-nav ul li a:hover {
  background-color: var(--blue-dark);
  border: 2px solid var(--blue);
  transition: var(--transition);
}

.footer-bottom small {
  display: block;
  padding: 50px 0;
}

.footer-column-4 {
  grid-column: 1/4;
}

/* footer mobile */
@media screen and (max-width: 768px) {
  .footer-content {
    padding: 30px 28px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .footer-column-3 {
    grid-column: 1;
  }

  .footer-column-4 {
    grid-column: 1;
    grid-row: 3;
  }

  .footer-column-4 ul {
    flex-direction: column;
    align-items: center;
  }

  .footer-column-3 .app-links {
    justify-content: center;
  }

  .footer-social-links {
    justify-content: center;
  }
}

#conditions-image {
  border: 1px solid var(--gray-light);
  padding: 20px;
}

/* icons */
.icon-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon {
  height: 35px;
  width: 35px;
  display: inline-block;
}

.icon.icon-menu {
  background-image: url("/icons/hamburger-menu.svg");
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid var(--blue);
  border-radius: 10px;
  height: 40px;
  width: 40px;
}

.icon.icon-menu.icon-menu-close {
  background-image: url("/icons/icon-small-close.svg");
  background-color: var(--blue-medium);
  border-color: var(--blue-medium);
}

.icon.icon--capacity {
  background-image: url("/icons/capacity.svg");
}

.icon.icon--demand {
  background-image: url("/icons/demand.svg");
}

.icon.icon--wind {
  background-image: url("/icons/wind.svg");
}

.icon.icon--natural-gas {
  background-image: url("/icons/natural-gas.svg");
}

.icon.icon--coal-and-lignite {
  background-image: url("/icons/coal-and-lignite.svg");
}

.icon.icon--solar {
  background-image: url("/icons/solar.svg");
}

.icon.icon--nuclear {
  background-image: url("/icons/nuclear.svg");
}

.icon.icon--power-storage {
  background-image: url("/icons/power-storage.svg");
}

.icon.icon--other {
  background-image: url("/icons/other.svg");
}

.icon.icon--hydro {
  background-image: url("/icons/hydro.svg");
}

.badge {
  padding: 6px 10px;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  background-color: var(--blue-badge);
  color: var(--white);
}

.social-icon {
  background-color: var(--blue-medium);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-block;
  background-size: 30%;
}

.social-icon:hover {
  border: 2px solid var(--teal);
  background-color: var(--blue-dark);
}

.social-icon.facebook {
  background-image: url("/icons/social-facebook.svg");
}

.social-icon.x {
  background-image: url("/icons/social-twitter.svg");
  background-size: 50%;
}

.social-icon.linkedin {
  background-image: url("/icons/social-linkedin.svg");
  background-size: 50%;
}

.social-icon.youtube {
  background-image: url("/icons/social-youtube.svg");
  background-size: 50%;
}

.social-icon.instagram {
  background-image: url("/icons/social-instagram.svg");
  background-size: 50%;
}

.fuel-mix-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
}

.fuel-mix-list li span {
  flex-grow: 1;
  text-align: right;
}

span.squashed {
  line-height: 22px;
}

@media screen and (max-width: 1200px) {
  span.squashed {
    line-height: 16px;
    font-size: 12px;
  }
}

.home-headliner {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 30px 0;
}

@media screen and (max-width: 768px) {
  .home-headliner {
    flex-direction: column;
    padding: 30px 36px 100px;
    background-image: url("/images/home-hero-bg.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    margin: 0 -1rem;
  }
}

#home-power-status-section {
  background-image: url("/images/home-hero-bg.jpg");
  background-repeat: no-repeat;
  background-position: bottom;
}

#home-power-status-section .card:not(.stacked) {
  grid-row: 1 / -1;
}

@media screen and (max-width: 768px) {
  #home-power-status-section .card:not(.stacked) {
    grid-row: auto;
  }
}

#home-power-status-section p.view-all-dashboards-button {
  text-align: center;
  margin: 20px 0;
  padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
  #home-power-status-section {
    background-image: none;
  }

  #home-power-status-section p.view-all-dashboards-button {
    margin: 0;
    padding: 0;
  }
}

#command-center .command-center--background-image {
  background-image: linear-gradient(
      rgba(45, 51, 56, 0.6),
      rgba(45, 51, 56, 0.6)
    ),
    url("/images/command-center.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  border-radius: 50px;
}

#command-center.callout-card {
  background-color: transparent;
}

#command-center .callout-card--content {
  padding-right: 20%;
  width: 75%;
}

#command-center .callout-card--content h2 {
  font-size: 40px;
  line-height: 44px;
}

/* command center mobile */
@media screen and (max-width: 768px) {
  #command-center.callout-card {
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
    margin: 0 20px;
    height: auto;
    padding: 20px;
    border: 1px solid var(--gray-light);
    margin: 0 10px;
    border-radius: 20px;
  }

  #command-center .command-center--background-image {
    grid-row: 1;
    border-radius: 20px;
  }

  #command-center .callout-card--content {
    padding: 0;
    margin-top: 20px;
    width: 100%;
    justify-content: flex-start;
  }

  #command-center .callout-card--content h2 {
    font-size: 24px;
    line-height: 28px;
  }

  #command-center .callout-card--content p {
    font-size: 16px;
    line-height: 26px;
    margin: 0;
  }

  #command-center .callout-card--content a {
    margin: 20px 0;
    display: inline-block;
  }
}

#home-fact-sheet {
  background-color: var(--blue-dark);
  object-fit: contain;
  padding-top: 50px;
}

/* Market Training View */
.course-details--container {
  display: flex;
  gap: 30px;
  padding-bottom: 100px;
}

.course-details--container aside {
  max-width: 33%;
}

.training_support.card {
  top: 20px;
  margin-bottom: 10px;
}

.training_support.card.border-gray {
  border-color: #ccc;
}

.course-details--tags {
  margin: 15px 0;
  display: flex;
  gap: 24px;
  align-items: center;
}

.course-details--tags span {
  display: flex;
  align-items: center;
}

.course-details--tag {
  display: inline-block;
  height: 20px;
  margin-right: 8px;
}

.course-details--tag path {
  fill: var(--blue-badge);
}

.course-details--body {
  margin-top: 40px;
}

.course-details--body h3 {
  font-size: 20px;
  font-weight: var(--font-weight-medium);
}

.course-details--body .card--title h3 {
  margin-bottom: 0;
}

.course-details--body .card--body a.btn {
  margin-bottom: 0;
}

.course-details--schedule {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 30px;
}

.course-details--schedule .card .card--title p {
  margin: 0;
}

.course-details--schedule .card,
.course-details--container aside .card {
  border-color: var(--gray-light);
}

.course-details--container aside .card .card--title h3 {
  margin-bottom: 10px;
}

.course-details--container aside .card .card--body p {
  margin-bottom: 0;
}

.course-details--container aside .card:not(:last-of-type) {
  margin-bottom: 20px;
}

.course-details--container aside .card .card--title:not(.card--title--border) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.course-details--schedule p {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
}

.course-details--schedule a {
  display: inline-block;
  margin: 20px 0;
}

.course-details--schedule .card--body h4,
.course-details--schedule .card--body address,
.course-details--schedule .card--body a {
  font-size: 18px;
  line-height: 28px;
}

.course-details h5 {
  padding: 40px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--gray-light);
  font-weight: var(--font-weight-semibold);
  font-size: 20px;
  text-transform: uppercase;
}

.course-details h5:first-of-type {
  margin-top: 20px;
}

.course-details p {
  font-size: 18px;
}

.material-downloads li {
  margin-bottom: 10px;
}

.material-downloads svg.document-icon {
  width: 30px;
  height: 40px;
}

.material-downloads svg.document-icon path {
  fill: var(--blue-medium);
}

.material-downloads li {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 30px;
  border: 1px solid var(--gray-light);
  border-radius: 15px;
}

.material-downloads li .file-details {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.material-downloads li .file-details a {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
}

.material-downloads li .file-details a:hover {
  text-decoration: none;
}

.material-downloads li a svg {
  border: 2px solid var(--blue);
  padding: 8px;
  border-radius: 5px;
  width: 40px;
  height: 40px;
  transition: background-color 0.3s ease;
}

.material-downloads li a svg path {
  stroke: var(--blue);
  fill: var(--blue);
}

.material-downloads li a svg:hover {
  background-color: var(--blue);
  transition: background-color 0.3s ease;
}

.material-downloads li a svg:hover path {
  fill: var(--white);
  stroke: var(--white);
}

.filetype {
  padding: 1px 8px;
  background-color: var(--blue-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--white);
  border-radius: 5px;
  font-size: 12px;
}

.course-details--entities .course-entities {
  padding: 0;
}

.course-details--prerequisites p {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--gray-light);
  border-radius: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
}

.course-details--prerequisites p a {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
}

.course-details--prerequisites p a:hover {
  text-decoration: none;
}

@media screen and (min-width: 1201px) {
  .course-details--container {
    margin-right: 20px;
  }
}

@media screen and (max-width: 1200px) {
  .course-details--container {
    flex-direction: column;
    gap: 20px;
  }

  .course-details--container aside {
    max-width: 100%;
  }

  .course-details--schedule {
    grid-template-columns: 1fr;
  }

  .course-details--schedule .card {
    grid-row: auto;
  }

  .course-details--container aside .card {
    margin-bottom: 20px;
  }

  .material-downloads li {
    padding: 20px;
  }

  .material-downloads svg.document-icon {
    min-width: 20px;
  }

  .material-downloads li .file-details a {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
  }
  
  .file-details a {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
  }

  .material-downloads li .file-details span {
    font-size: 14px;
  }

  .material-downloads li a img {
    width: 60px;
    height: 60px;
  }

  .material-downloads li a img:hover {
    background-color: transparent;
  }

  .course-details--prerequisites p {
    padding: 20px;
  }
}

/* Market Participant Communications */
.market-participant-communications .course-details {
  max-width: 922px;
}

.market-participant-communications-cards {
  display: grid;
  grid-template-columns: repeat(2, 285px);
  gap: 30px;
  margin-top: 30px;
}

.market-participant-communications-cards .card {
  border: 2px solid var(--gray-light);
}

.market-participant-communications-cards .card .card--body h3 {
  font-size: 20px;
}

.market-participant-communications-cards .card .card--body p {
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 0;
}

.course-details--container.market-participant-communications aside {
  max-width: 40%;
}

.course-details--container.market-participant-communications
  aside
  .card
  .card--title {
  border-bottom: 1px solid var(--gray-light);
  margin-bottom: 30px;
}

.course-details--container.market-participant-communications
  aside
  .card--body
  p {
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (max-width: 992px) {
  .market-participant-communications-cards {
    grid-template-columns: 1fr;
  }

  .course-details--container.market-participant-communications aside {
    max-width: 100%;
  }
}

.course-details.revision-requests-issues {
  max-width: 65%;
}

@media screen and (max-width: 992px) {
  .course-details.revision-requests-issues {
    max-width: 100%;
  }
}

.revision-requests-issues .card--subheader {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border-bottom: 1px solid var(--gray-light);
  padding: 30px 0;
}

.revision-requests-issues .card--subheader p {
  font-size: 14px;
}

.revision-requests-issues .card--subheader p span:nth-child(1) {
  display: inline-block;
  min-width: 100px;
  font-weight: 600;
}

.revision-requests-issues .card--subheader p span:nth-child(2),
.revision-requests-issues .card--subheader p strong {
  margin-left: 10px;
}

.revision-requests-issues .card--body p {
  font-size: 14px;
}

.revision-requests-issues .card--body strong {
  font-weight: var(--font-weight-medium);
}

.revision-requests-issues .card--body p.row-item {
  font-size: 14px;
  display: flex;
  gap: 0px;
  align-items: center;
  margin: 24px 0;
}

.revision-requests-issues .card--body p.row-item span:nth-child(1) {
  display: inline-block;
  min-width: 100px;
  font-weight: 600;
}

.revision-requests-issues .card--body p.row-item > span:nth-child(2) {
  margin-left: 10px;
}

@media screen and (min-width: 992px) {
  .revision-requests-issues .card--body p.row-item:first-of-type {
    float: right;
    width: 50%;
  }
}

.revision-requests-issues .course-entities {
  padding: 0;
}

.revision-requests-issues .course-entities .entity-tag {
  padding: 0px 8px;
  background-color: var(--gray-lighter);
  border-color: var(--gray-lighter);
}

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

@media screen and (max-width: 992px) {
  .form--container {
    flex-direction: column;
  }

  .form--container .operations-messages-filters {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

.form--container button {
  margin: 10px 0;
}

.form--container .operations-messages-filters {
  margin-top: 20px;
}

article .nodal-protocol-library {
  margin-top: 30px;
  max-width: 65%;
}

@media screen and (max-width: 992px) {
  article .nodal-protocol-library {
    max-width: 100%;
  }
}

.nodal-protocol-library > div {
  margin: 20px 0;
}

.nodal-protocol-library,
.nodal-protocol-library-grid {
  display: none;
}

.nodal-protocol-library.show,
.nodal-protocol-library-grid.show {
  display: block;
}

.nodal-protocol-library .card--latest, .nodal-protocol-library-grid .card--latest {
  padding: 0;
  overflow: hidden;
}

.nodal-protocol-library .card--latest .latest-update, .nodal-protocol-library-grid .card--latest .latest-update {
  display: flex;
  justify-content: center;
  flex-basis: 100%;
  background-color: #305495;
  color: var(--white);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  font-size: 18px;
}
.nodal-protocol-library .card--latest .card--sbs, .nodal-protocol-library-grid .card--latest .card--title, .nodal-protocol-library-grid .card--latest .card--body {
  padding: 30px;
}

.nodal-protocol-library-grid p {
  margin: 0;
  font-size: var(--p-small);
}

.nodal-protocol-library-grid hr {
  margin: 10px 0;
}

.nodal-protocol-library-grid .card .material-downloads {
  font-size: 14px;
}

@media screen and (max-width: 1200px) {
  .view-toggle.nodal-protocol-library-view-toggle  {
    display: none;
  }

  .nodal-protocol-library .card hr {
    margin: 15px 0;
  }
  .nodal-protocol-library .card h3, .nodal-protocol-library .card p { 
    margin: 0;
  }
}



.operations-messages-filter.course-filters.market-notices .form--container {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.operations-messages-filter.course-filters.market-notices
  .form--container
  fieldset {
  flex-basis: 100%;
  flex-grow: 1;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

@media screen and (max-width: 992px) {
  .operations-messages-filter.course-filters.market-notices
    .form--container
    fieldset {
    grid-template-columns: 1fr;
  }
}

.operations-messages-filter.course-filters.market-notices .form--container a {
  margin: 0 20px;
}

.operations-messages-filter.course-filters.market-notices
  .form--container
  input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0; /* Make the icon invisible but still clickable */
  position: absolute;
  right: 0;
  width: 20%; /* Ensure it doesn't take up extra space */ /* Keep the clickable area for the date picker */
  cursor: pointer;
}

.operations-messages-filter.course-filters.market-notices
  .form--container
  input[type="date"] {
  position: relative;
  padding: 0 30px;
  margin: 10px 0;
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--gray-dark);
}

.form-input--date {
  position: relative;
}

.form-input--date::after {
  content: "";
  background-image: url("icons/icon-calendar-blue.svg"); /* Replace with your icon path */
  background-size: 20px 20px; /* Adjust size as needed */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; /* Adjust width */
  height: 20px; /* Adjust height */
  pointer-events: none; /* Allow clicks to pass through */
}

.table-tool-bar {
  display: flex;
  align-items: flex-end;
  margin-bottom: 26px;
}

.table-tool-bar--controls {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  align-items: flex-end;
  flex-grow: 1;
}

.table-tool-bar--controls small:first-child {
  flex-basis: 100%;
}

.table-tool-bar--controls select {
  padding-right: 100px;
}

@media screen and (max-width: 1200px) {
  .table-tool-bar--controls {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .table-tool-bar--controls small:first-child  {
    flex-basis: 50%;
  }
  
  .table-tool-bar--controls select {
    flex-basis: 100%;
  }
}

.operations-messages-table .actions .btn.download {
  padding: 0;
  mask: url("icons/icon-download.svg") no-repeat center;
  background-color: var(--blue-medium);
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 0;
}

.operations-messages-table td svg path {
  fill: var(--blue-medium);
}

.table-container {
  margin-bottom: 170px;
}

.table-container table {
  margin-bottom: 0;
}

@media screen and (max-width: 992px) {
  .table-container {
    overflow-x: scroll;
  }
}

main.with-side-nav {
  display: flex;
  height: 100%;
  position: relative;
}

main.with-side-nav .sidebar-nav {
  height: 100%;
  width: 32px;
  background-color: var(--gray-lighter);
  position: absolute;
  z-index: 10000;
  cursor: pointer;
}

@media screen and (min-width: 1200px) and (max-width: 1470px) {
  main.with-side-nav .container {
    transform: translateX(32px);
  }
}

@media screen and (max-width: 1200px) {
  main.with-side-nav .sidebar-nav {
    display: none;
  }
}

.sidebar-nav--toolbar {
  display: flex;
  justify-content: flex-end;
}

main.with-side-nav .sidebar-nav button {
  width: 16px;
  height: 16px;
  margin: 8px;
  background-color: var(--white);
  border-radius: 50%;
  padding: 4px;
}

main.with-side-nav .sidebar-nav.expanded {
  width: 400px;
}

.sidebar-nav .sidebar-nav--navigations {
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width 0.3s ease;
}

.sidebar-nav.expanded .sidebar-nav--navigations {
  width: 100%;
  opacity: 1;
  pointer-events: all;
  transition: width 0.3s ease;
}

.sidebar-nav--navigations {
  white-space: nowrap;
  padding: 0 30px;
  transition: width 0.3s ease;
}

.sidebar-nav--navigations .nav-item a.nav-link {
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 10px;
  margin-bottom: 10px;
  display: block;
}

.sidebar-nav--navigations .sub-nav-link {
  background-color: var(--white);
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 10px;
}

.sidebar-nav--navigations .sub-nav-link.has-submenu {
  background-image: url("./icons/down-caret.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.sidebar-nav--navigations .submenu .submenu {
  display: none;
}

.sidebar-nav--navigations .submenu .submenu.open {
  display: block;
}

.sidebar-nav--navigations .submenu .submenu li {
  margin: 10px 18px;
  text-decoration: underline;
  color: var(--blue-medium);
  padding: 10px 18px;
}

.sidebar-nav--navigations .submenu .submenu li.active {
  background-color: var(--blue-medium);
  border-radius: 10px;
} 

.sidebar-nav--navigations .submenu .submenu li.active a {
  color: var(--white);
  text-decoration: none;
}

.sidebar-nav--navigations .submenu .submenu li a:hover { 
  opacity: 0.6;
}
/* Nolan's Styles */

.u--padding-top-0 {
  padding-top: 0;
}
.u--padding-bottom-0 {
  padding-bottom: 0;
}

.page-title--header--sm {
  padding: 24px;
}

.page-title--header--blue {
  background-color: var(--blue-badge);
  color: var(--white);
}

.carousel--full-width {
  max-width: unset;
  margin: 0;
}

@media screen and (max-width: 1400px) {
  .carousel--full-width {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.market-participation--cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.market-participation--cards .card {
  border-color: var(--gray-light);
}
.market-participation--cards .card .card--title h3 {
  margin: 0;
}

.card .card--body p {
  font-size: 16px;
}

.card .card--body *:first-child {
  margin-top: 0;
}

.card .select select,
.select-box {
  width: 100%;
  padding: 10px;

  /* Add dropdown arrow to right side of dropdown */
  background-image: url("./icons/down-caret.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

@media screen and (max-width: 992px) {
  .market-participation--cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .market-participation--cards {
    grid-template-columns: 1fr;
  }
}

.quick-links--body {
  margin: 70px 0 100px;
}

@media screen and (max-width: 992px) {
  .quick-links--body {
    margin: 40px 0 60px;
  }
}

@media screen and (max-width: 768px) {
  .quick-links--body {
    margin: 30px 0;
  }
}

.quick-links--cards {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.quick-links--cards p {
  margin: 0;
}

@media screen and (max-width: 1200px) {
  .quick-links--cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .quick-links--cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .quick-links--cards {
    grid-template-columns: 1fr;
  }
}

.card--quick-link {
  border-color: var(--gray-light);
}

.card--quick-link .card--title {
  border-bottom: none;
  padding-bottom: 0;
}

.card--quick-link .card--title p {
  font-size: 20px;
  color: var(--blue-dark);
  font-family: var(--primary-font);
}

.card--quick-link .card--body a {
  font-size: 18px;
  color: var(--blue-medium);
  text-decoration: underline;
}

.card--quick-link .card--body a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 12px;
  background-image: url("./icons/icon-arrow-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 6px;

  transform: translateX(0);
  transition: transform 0.5s ease;
}

.card--quick-link:hover {
  background-color: var(--blue-medium);
  border-color: var(--blue-medium);
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

.card--quick-link:hover .card--title p,
.card--quick-link:hover .card--body p {
  color: var(--white);
}

.card--quick-link:hover .card--body a {
  color: var(--blue-medium);
}

.card--quick-link:hover .card--body a::after {
  /* add transition slide */
  transform: translateX(10px);
  position: absolute;
  right: 35px;
  bottom: 35px;
  background-image: url("./icons/icon-arrow-right-white.svg");
}

/* Meeting Calendar View */
.meeting-calendar--container,
.market-rules--container {
  display: flex;
  gap: 30px;
  padding-bottom: 60px;
}

.meeting-calendar-details,
.market-rules-details {
  width: 66%;
}

.market-rules-details {
  flex-grow: 1;
}

.meeting-calendar--container aside {
  max-width: 33%;
}

.market-rules--container aside {
  width: 33%;
}

.u--display-sm-only {
  display: none;
}

@media screen and (max-width: 992px) {
  .meeting-calendar--container {
    flex-direction: column;
  }

  .meeting-calendar-details,
  .meeting-calendar--container aside {
    width: 100%;
    max-width: 100%;
  }

  .market-rules--container aside {
    display: none;
  }

  .u--display-sm-only {
    display: block;
  }
}

.meeting-calendar--header p,
.market-rules--header p {
  font-size: 18px;
}

.meeting-calendar--filter {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .meeting-calendar--filter {
    flex-direction: column;
    gap: 15px;
  }

  .meeting-calendar--filter:nth-of-type(2) {
    margin-top: 7.5px;
  }
}

.meeting-calendar--filter input,
.meeting-calendar--filter .multi-select-dropdown {
  width: 100%;
}

.meeting-calendar--filter input,
.meeting-calendar--filter .select-box {
  padding: 16px 10px;
}

.meeting-calendar--filter input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("./icons/icon-calendar-blue.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding: 15px 10px;
  border: 1px solid #666666;
  border-radius: 5px;
  cursor: pointer;
}

.meeting-calendar--filter
  input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

.meeting-calendar--filter input[type="text"] {
  /* Add Search Icon to right side of input */
  background-image: url("./icons/icon-search-blue.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

.meeting-calendar--filter input[type="text"]::placeholder {
  color: #000;
}

.multi-select-dropdown {
  position: relative;
  display: inline-block;
  width: 200px;
}

.multi-select-dropdown .select-box {
  border: 1px solid #666666;
  border-radius: 5px;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  accent-color: var(--blue-medium);
  border-radius: 5px;
  border: 1px solid #707070;
}

.multi-select-dropdown .checkboxes {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
  border-radius: 4px;
  padding: 8px;
}

.multi-select-dropdown.active .checkboxes {
  display: block;
}

.meeting-calendar--list {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  margin: 30px 0;
  padding: 30px 0;
}

.meeting-calendar--select-all {
  width: 100%;
  border: 2px solid #cccccc;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

@media screen and (max-width: 480px) {
  .meeting-calendar--select-all {
    flex-direction: column;
    gap: 10px;
    justify-content: start;
  }
}

.meeting-calendar--select-all .btn {
  font-size: 14px;
  padding: 5px 15px;
}

.btn--plus {
  /* Add plus icon to the right side of the button */
  background-image: url("./icons/icon-plus-blue.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding: 5px 40px 5px 10px !important;
}

.btn--plus:hover {
  background-image: url("./icons/icon-plus-white.svg");
}

.meeting-calendar--list-header {
  border-bottom: 1px solid #cccccc;
  margin: 50px 0 40px;
  padding: 0 0 20px;
}

@media screen and (max-width: 1200px) {
  .meeting-calendar--list-header {
    margin: 30px 0 20px;
  }
}

.meeting-calendar--item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 2px solid #cccccc;
  border-radius: 10px;
  margin-bottom: 20px;
}

.meeting-calendar--item .meeting-calendar--item--body {
  flex-grow: 1;
}

.meeting-calendar--item--hide-checkbox .meeting-calendar--item--checkbox {
  visibility: hidden;
  height: 0;
}

.meeting-calendar--item--hide-button .meeting-calendar--item--button {
  visibility: hidden;
}

.meeting-calendar--item .meeting-calendar--item--button {
  display: inline-block;
}

.meeting-calendar--item .meeting-calendar--item--button .btn {
  display: block;
}

.meeting-calendar--item .meeting-calendar--item--checkbox {
  display: inline-block;
  padding: 4px 20px 0 0;
}

.meeting-calendar--item .meeting-calendar--item--checkbox .btn {
  display: none;
}

.meeting-calendar--item .meeting-calendar--item--body h5 {
  color: var(--blue-medium);
  margin-bottom: 5px;
}

.meeting-calendar--item .meeting-calendar--item--body p {
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  font-family: var(--primary-font);
  letter-spacing: 0px;
  color: var(--gray-dark);
}

@media screen and (max-width: 480px) {
  .meeting-calendar--item {
    flex-direction: column;
    gap: 10px;
  }

  .meeting-calendar--item .meeting-calendar--item--checkbox {
    display: flex;
    justify-content: space-between;
    padding: 0;
  }

  .meeting-calendar--item .meeting-calendar--item--checkbox .btn {
    display: inline-block;
  }

  .meeting-calendar--item .meeting-calendar--item--button {
    display: none;
  }
}

.market-rules--section {
  display: flex;
  gap: 30px;
  padding-bottom: 100px;
}

.market-rules--filters {
  max-width: 33%;
  padding-top: 10px;
}

.market-rules--results {
  flex-grow: 1;
  max-width: 66%;
}

@media screen and (max-width: 992px) {
  .market-rules--section {
    flex-direction: column;
  }

  .market-rules--filters {
    max-width: 100%;
  }

  .market-rules--results {
    max-width: 100%;
  }
}

.market-rules--results-search-bar {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.market-rules--results-search-bar input {
  width: 100%;
  padding: 10px;
  height: 60px;
  margin: 0;
}

.market-rules--results-search-bar input[type="text"] {
  /* Add Search Icon to right side of input */
  background-image: url("./icons/icon-search-blue.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

.market-rules--results-search-bar input[type="text"]::placeholder {
  color: #000;
}

.market-rules--results-search-bar select {
  width: 285px;
  padding: 10px;
}

.market-rules--results-search-bar select {
  background-image: url("./icons/down-caret.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.market-rules--results-list {
  padding: 30px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.market-rules--results-pagination {
  display: flex;
  justify-content: end;
  gap: 20px;
  padding: 30px 0;
}

.market-rules--results-pagination a {
  border: 2px solid var(--blue);
  border-radius: 5px;
  background: var(--white);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 22px;
  padding: 12px 20px;
  color: var(--black);
}

.market-rules--results-pagination a:hover,
.market-rules--results-pagination a.active {
  background: var(--blue-medium);
  color: var(--white);
  text-decoration: none;
  border-color: var(--blue-medium);
}

.market-rules--results-list-item {
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding: 30px;
  border: 2px solid #cccccc;
  border-radius: 10px;
  flex-grow: 1;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .market-rules--results-list-item {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .market-rules--results-list-item .market-rules--results-list-item-content {
    margin-bottom: 20px;
  }

  .market-rules--results-list-item-meta {
    flex-wrap: wrap;
  }
}

.market-rules--results-list-item:hover {
  background-color: var(--blue-medium);
  border-color: var(--blue-medium);
  cursor: pointer;
  position: relative;
}
/* Add white arrow icon to the right corner of the .market-rules--results-list-item on hover  */
.market-rules--results-list-item:hover::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 16px;
  background-image: url("./icons/icon-arrow-right-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 30px;
  top: 45px;
  transform: translateY(-50%);
}

.market-rules--results-list-item:hover h3,
.market-rules--results-list-item:hover p,
.market-rules--results-list-item:hover span {
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.market-rules--results-list-item-content {
  max-width: 50%;
  padding-right: 15px;
}

.market-rules--results-list-item-content h3 {
  color: var(--blue-medium);
  margin-bottom: 5px;
  text-decoration: none !important;
}

.market-rules--results-list-item-content p {
  font-size: 16px;
  line-height: 26px;
  font-family: var(--primary-font);
  letter-spacing: 0px;
  color: var(--gray-dark);
  text-decoration: none !important;
}

.market-rules--results-list-item-meta {
  display: flex;
  gap: 30px;
}

.market-rules--results-list-item-meta p {
  font-size: 18px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
  color: var(--black);
  text-decoration: none !important;
}

.market-rules--results-list-item-meta p span {
  font-weight: var(--font-weight-bold);
  display: block;
  font-size: 14px;
  line-height: 22px;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--black);
  text-decoration: none !important;
}

.market-rules--results-list--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.market-rules--results-list--grid .market-rules--results-list-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.market-rules--results-list--grid .market-rules--results-list-item-content {
  max-width: 100%;
  padding-right: 0;
}

@media screen and (max-width: 1200px) {
  .market-rules--results-list--grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 992px) {
  .market-rules--results-list--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .market-rules--results-list--grid {
    grid-template-columns: 1fr;
  }
}

.toggle-button-group {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  width: 200px;
  height: 60px;
}

.toggle {
  height: 60px;
  width: 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

.toggle--list {
  background-image: url("./icons/icon-listview-blue.svg");
}

.toggle--list.active {
  background-image: url("./icons/icon-listview-white.svg");
}

.toggle--grid {
  background-image: url("./icons/icon-gridview-blue.svg");
}

.toggle--grid.active {
  background-image: url("./icons/icon-gridview-white.svg");
}

/* remove focus outline from .toggle buttons */
.toggle:focus {
  outline: none;
}

.toggle.active {
  background-color: var(--blue-medium);
  color: #fff;
}

.toggle img {
  width: 24px;
  height: 24px;
}

.toggle:not(:last-child) {
  border-right: 1px solid #ccc;
}

.market-rules--filter-options {
  border-top: 1px solid #cccccc;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
  padding: 30px 0;
}

.market-rules--filter-checkboxes {
  flex-direction: column;
}

.market-rules--filter-options .checkboxes input[type="checkbox"] {
  width: 24px;
  height: 24px;
}

.market-rules--filter-options .checkboxes label {
  font-size: 18px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
  padding-bottom: 15px;
}

.market-rules--filter-checkboxes .btn {
  max-width: 165px;
  text-align: center;
  padding: 5px 10px;
}

.toggle-button {
  display: inline-block;
}

/* Hide the default checkbox */
.toggle-button input[type="radio"] {
  display: none;
}

/* Style the label to look like a button */
.toggle-button label {
  border: 2px solid var(--blue);
  border-radius: 10px;
  padding: 5px 10px;
  background-color: var(--white);
  color: var(--black);
  font-weight: var(--font-weight-medium);
  transition: var(--transition);
  display: inline-block;
  cursor: pointer;
}

/* Style for checked state */
.toggle-button input[type="radio"]:checked + label {
  text-decoration: none;
  background-color: var(--blue-medium);
  color: var(--white);
  transition: var(--transition);
}

/*
  *  Jason Work
  */

.notice-details hr {
  height: 1px;
  background: #ccc;
  margin-top: 30px;
  margin-bottom: 30px;
  border: none;
}

.notice-details h6 {
  font-size: 18px;
  color: #2d3338;
  margin-bottom: 10px;
}

.notice-details p {
  color: #2d3338;
  font-size: 16px;
  line-height: 26px;
}

.notice-details .notice-details-flex {
  display: flex;
  justify-content: flex-start;
}

.notice-details .notice-details-flex .notice-details--col {
  width: 50%;
  padding-right: 20px;
}

.notice-tiles h6 {
  font-size: 18px;
  color: #2d3338;
  margin-bottom: 10px;
}

.notice-tiles .notice-tile {
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 10px;
}

.notice-tiles .notice-tile a {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
}

.notice-tiles .notice-tile p {
  font-size: 14px;
  color: #475159;
}

.notice-tiles .notice-tile p span {
  margin-right: 20px;
}

.notice-details-copy {
  margin: 40px 0;
}

.notice-details-copy h6 {
  font-size: 18px;
  color: #2d3338;
  margin-bottom: 10px;
}

.notice-details-copy p {
  color: #2d3338;
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 35px;
}

.notice-details-copy hr {
  height: 1px;
  background: #ccc;
  margin-top: 30px;
  margin-bottom: 30px;
  border: none;
}

.notice-details-copy .material-downloads li {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 30px;
  border: 1px solid var(--gray-light);
  border-radius: 15px;
}

.notice-details-copy .material-downloads li .file-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.notice-details-copy .material-downloads li a svg {
  border: 2px solid var(--blue);
  padding: 8px;
  border-radius: 5px;
  width: 40px;
  height: 40px;
  transition: background-color 0.3s ease;
}

.notice-details-copy .material-downloads li a svg path {
  stroke: var(--blue);
  fill: var(--blue);
}

.notice-details-copy .material-downloads li a svg:hover {
  background-color: var(--blue);
  transition: background-color 0.3s ease;
}

.notice-details-copy .material-downloads li a svg:hover path {
  fill: var(--white);
  stroke: var(--white);
}

.notice-details-copy .material-downloads li {
  padding: 20px;
}

.notice-details-copy .material-downloads svg.document-icon {
  min-width: 20px;
}

.notice-details-copy .material-downloads li .file-details a {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
}

.notice-details-copy .material-downloads li .file-details span {
  font-size: 12px;
}

.notice-details-copy .material-downloads li a img {
  width: 60px;
  height: 60px;
}

.notice-details-copy .material-downloads li a img:hover {
  background-color: transparent;
}

.operations-messages-copy {
  max-width: 922px;
  margin-bottom: 50px;
}

.operations-messages-copy p {
  font-size: 18px;
  line-height: 28px;
  color: #475159;
}

fieldset.operations-messages-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border: none;
  margin-top: 50px;
  margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
  fieldset.operations-messages-filters {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.operations-messages-filters input[type="text"],
.operations-messages-filters select {
  width: 100%;
  height: 60px;
  color: #2d3338;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 30px;
  margin: 10px 0;
  border: 1px solid #666666;
  border-radius: 5px;
}

.operations-messages-filters input[type="text"]::placeholder {
  color: #2d3338;
  font-size: 18px;
  font-weight: 500;
}

.operations-messages-filters select option {
  color: #2d3338;
  font-size: 18px;
  font-weight: 500;
}

.operations-messages-filters .date-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.operations-messages-filters .date-input {
  width: 100%;
  padding-right: 35px; /* Adjust to make room for the icon */
  box-sizing: border-box;
}

.operations-messages-filters .date-icon {
  position: absolute;
  background-image: url("./icons/icon-calendar-blue.svg");
  right: 10px; /* Adjust for spacing */
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none; /* Allows clicks to pass through to the input */
}

.operations-messages--actions button {
  color: #00829b;
  text-decoration: underline;
  padding: 0px 25px;
}

.operations-messages--actions button.btn {
  text-decoration: none;
  font-weight: 700;
  padding: 10px 43px;
}

.operations-messages-download {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 30px;
}

.operations-messages-download a {
  color: #00829b;
  text-decoration: underline;
}

.operations-messages-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 170px;
}

.operations-messages-table th,
.operations-messages-table td {
  text-align: left;
}

@media screen and (max-width: 1200px) {
  .operations-messages-table--notice-column {
    min-width: 400px;
  }
}

.operations-messages-table th {
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  font-size: 16px;
  font-weight: 500;
  color: #2d3338;
  padding: 20px 12px;
}

.operations-messages-table th:last-child {
  border-right: none;
}

.operations-messages-table td {
  vertical-align: top;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  font-size: 16px;
  font-weight: 400;
  color: #2d3338;
  padding: 20px 12px;
  min-width: 130px;
}

.operations-messages-table td:last-child {
  border-right: none;
}

.operations-messages-table tr:nth-child(even) {
  background-color: #efefef;
}

.operations-messages-table tr:last-child {
  border-bottom: 1px solid #ccc;
}

.operations-messages-table .actions {
  text-align: center;
}

.operations-messages-table .btn {
  background: none;
  border: none;
  cursor: pointer;
  height: 18px;
  width: 18px;
}