/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-4.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[3]!./styles/entry/localinfo.scss ***!
  \****************************************************************************************************************************************************************************************************************************************/
/* Layout */
/* Colours */
/* Autogen vars via build:palettes */
/* 1. Screen Sizes */
/* Topics */
/* Cards */
/*
  xs    320px   small-mobile
  sm    576px   mobile
  md    768px   small-tablet
  lg    992px   tablet
  xl    1200px  small-desktop
  max   1400px  desktop
*/
/* stylelint-disable function-no-unknown */
/* html-documentation
<html>
    <h2>Tabs</h2>
    <div class="mar-tab">
        <ul class="most-read__tab mar-tab__headings">
            <li class="mar-tab__heading-item mar-tab--active">
                <span class="mar-tab__heading-line"></span>
                <a class="mar-tab__heading-link" href="#" data-body="most-read">most read</a>
            </li>
            <li class="mar-tab__heading-item">
                <span class="mar-tab__heading-line"></span>
                <a class="mar-tab__heading-link" href="#" data-body="commented">commented</a>
            </li>
        </ul>
        <div class="mar-tab__body mar-tab--active" data-body="most-read">
            <h3>Most Read Content</h3>
            The quick brown fox jumps over the lazy dog. The quick
            brown fox jumps over the lazy dog. The quick brown fox
            jumps over the lazy dog. The quick brown fox jumps over
            the lazy dog. The quick brown fox jumps over the lazy dog.
            The quick brown fox jumps over the lazy dog. The quick
            brown fox jumps over the lazy dog. The quick brown fox
            jumps over the lazy dog. The quick brown fox jumps over
            the lazy dog. The quick brown fox jumps over the lazy dog.
            The quick brown fox jumps over the lazy dog. The quick
            brown fox jumps over the lazy dog.
        </div>
        <div class="mar-tab__body" data-body="commented">
            <h3>Commented Content</h3>
            The quick brown fox jumps over the lazy dog. The quick
            brown fox jumps over the lazy dog. The quick brown fox
            jumps over the lazy dog. The quick brown fox jumps over
            the lazy dog. The quick brown fox jumps over the lazy dog.
            The quick brown fox jumps over the lazy dog. The quick
            brown fox jumps over the lazy dog. The quick brown fox
            jumps over the lazy dog. The quick brown fox jumps over
            the lazy dog. The quick brown fox jumps over the lazy dog.
            The quick brown fox jumps over the lazy dog. The quick
            brown fox jumps over the lazy dog.
        </div>
    </div>
</html>
*/
.mar-tab {
  padding: 0 10px;
}
@media (min-width: 992px) {
  .mar-tab {
    padding: 0;
  }
}
.mar-tab__headings {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  width: 100%;
  position: relative;
  margin: 0 20px 24px 0;
  overflow-x: auto;
}
.mar-tab__headings::after {
  content: "";
  height: 1px;
  background-color: #9DA0A4;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 1px;
}
.mar-tab__heading-line {
  display: block;
  z-index: 1;
  width: 0;
  height: 4px;
  background: transparent;
}
.mar-tab__heading-link {
  font-family: var(--heading-font);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  color: #000000;
  margin-top: 15px;
  text-decoration: none;
  opacity: 0.6;
}
.mar-tab__heading-link:hover {
  text-decoration: none;
  cursor: pointer;
  color: #000000;
}
.mar-tab__heading-real-link {
  font-family: var(--body-font);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  color: #000000;
  margin-top: 15px;
  text-decoration: none;
  opacity: 0.6;
}
.mar-tab__heading-real-link:hover {
  text-decoration: none;
  cursor: pointer;
  color: #000000;
}
.mar-tab__heading-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-family: var(--heading-font);
}
.mar-tab__heading-item:not(:last-child) {
  margin-right: 30px;
}
.mar-tab__heading-item::before {
  content: none;
}
.mar-tab__heading-item.mar-tab--active .mar-tab__heading-line {
  width: 100%;
  background: var(--accent-colour);
  z-index: 1;
}
.mar-tab__heading-item.mar-tab--active .mar-tab__heading-link {
  color: #000000;
  font-family: var(--heading-font);
  opacity: 1;
}
.mar-tab__heading-item.mar-tab--active .mar-tab__heading-real-link {
  color: #000000;
  opacity: 1;
}
.mar-tab__heading-item h2 {
  margin-bottom: 0;
}
.mar-tab__body {
  display: none;
  margin: 20px;
}
.mar-tab__body.mar-tab--active {
  display: block;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-tabs {
  border-bottom: 1px solid #DEE2E6;
}
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
.nav-tabs .nav-link {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover {
  border-color: #E9ECEF #E9ECEF #DEE2E6;
}
.nav-tabs .nav-link.disabled {
  color: #6C757D;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #FFFFFF;
  border-color: #DEE2E6 #DEE2E6 #FFFFFF;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* html-documentation
<html>
    <div class="loader">Loading...</div>
</html>
*/
.loader,
.loader::after,
.loader::before {
  background: var(--main-colour);
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}

.loader {
  color: var(--main-colour);
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader.invert {
  color: var(--accent-colour);
}

.loader::after,
.loader::before {
  position: absolute;
  top: 0;
  content: "";
}

.loader::before {
  left: -1.5em;
  animation-delay: -0.32s;
}

.loader::after {
  left: 1.5em;
}

@keyframes load1 {
  0%, 100%, 80% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
/* html-documentation
<html>
    <h2>Numbered List</h2>
    <ol role="list" class="mar-list-numbered">
        <li class="mar-list-numbered__item">
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
        <li class="mar-list-numbered__item">
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
        <li class="mar-list-numbered__item">
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
        <li class="mar-list-numbered__item">
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
        <li class="mar-list-numbered__item">
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
    </ol>

    <h2>Numbered List With Custom Numbers</h2>
     <ol role="list" class="mar-list-numbered">
        <li class="mar-list-numbered__item-custom-number">
            <span class="mar-list-numbered__custom-number">14</span>
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
        <li class="mar-list-numbered__item-custom-number">
            <span class="mar-list-numbered__custom-number">16</span>
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
        <li class="mar-list-numbered__item-custom-number">
            <span class="mar-list-numbered__custom-number">19</span>
            Gelsasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
        <li class="mar-list-numbered__item-custom-number">
            <span class="mar-list-numbered__custom-number">21</span>
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
        <li class="mar-list-numbered__item-custom-number">
            <span class="mar-list-numbered__custom-number">22</span>
            Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.
        </li>
    </ol>

    <h2>Vertical List Response</h2>
    <ul class="mar-list-vertical-response">
      <li>
        <span class="mar-label mar-labele--inline mar-label__breaking-label">
          <span class="mar-label__text">Breaking news</span>
        </span>
        <span class="mar-list-vertical-response__img-icon">
          <i class="iconify data-icon="el:camera" data-inline="false"></i>
        </span>
        <a href="https://google.com" class="text-black no-underline">Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.</a>
      </li>
      <li>
        <span class="mar-label mar-labele--inline mar-label__sponsored-label">
          <span class="mar-label__text">Exclusive</span>
        </span>
        <span class="mar-list-vertical-response__img-icon">
          <i class="iconify data-icon="el:camera" data-inline="false"></i>
        </span>
        <a href="https://google.com" class="text-black no-underline">Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.</a>
      </li>
      <li>
        <span class="mar-label mar-labele--inline mar-label__live-label">
          <span class="mar-label__text">Live</span>
          <span class="mar-label__dot pulsating-circle"></span>
        </span>
        <span class="mar-list-vertical-response__img-icon">
          <i class="iconify data-icon="el:camera" data-inline="false"></i>
        </span>
        <a href="https://google.com" class="text-black no-underline">Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.  Gelasio 16px: Regular, No min. This can be any length headline but less is more.</a>
      </li>
    </ul>
</html>
*/
.mar-list-numbered {
  list-style: none;
  counter-reset: list-number;
  padding: 0;
  margin: 20px;
  font-family: var(--heading-font) !important;
}
.mar-list-numbered__item-custom-number {
  font-family: var(--body-font);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  color: #333333;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 255px;
}
.mar-list-numbered__item-custom-number a {
  color: #333333;
}
.mar-list-numbered__item-custom-number:not(:last-child) {
  margin-bottom: 10px;
}
.mar-list-numbered__item-custom-number::before {
  content: none !important;
}
.mar-list-numbered__item-custom-number .mar-list-numbered__custom-number {
  font-family: var(--body-font);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: var(--alt-colour);
  margin-right: 15px;
  padding-top: 5px;
}
.mar-list-numbered li, .mar-list-numbered__item {
  counter-increment: list-number;
  font-family: var(--heading-font) !important;
  font-family: var(--body-font);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  color: #333333;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 255px;
}
.mar-list-numbered li a, .mar-list-numbered__item a {
  color: #333333;
}
.mar-list-numbered li:not(:last-child), .mar-list-numbered__item:not(:last-child) {
  margin-bottom: 10px;
}
.mar-list-numbered li::before, .mar-list-numbered__item::before {
  content: counter(list-number);
  font-family: var(--heading-font) !important;
  font-family: var(--body-font);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: var(--alt-colour);
  margin-right: 15px;
  padding-top: 5px;
}
.mar-list-numbered li.hide-counter::before {
  content: none;
}

.mar-list-vertical-response {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mar-list-vertical-response__item {
  margin-bottom: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.mar-list-vertical-response__item::before {
  padding-right: 0;
  content: none;
}
.mar-list-vertical-response__item h3 {
  margin: 0;
}
@media (min-width: 768px) {
  .mar-list-vertical-response__item {
    margin-bottom: 15px;
  }
}
.mar-list-vertical-response__item .mar-label {
  padding: 0;
}
.mar-list-vertical-response__item .mar-label:not(.mar-label__live-label.mar-label--inline) {
  padding-right: 2px;
}
.mar-list-vertical-response__item .mar-label .mar-label__dot {
  right: -5px;
}
.mar-list-vertical-response__item__img-icon {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  padding-right: 15px;
}
.mar-list-vertical-response__item__img-icon svg {
  font-size: var(--font-size-s);
}
.mar-list-vertical-response__item__img-icon path {
  color: #000000;
}
.mar-list-vertical-response__item__img-icon svg[data-icon="el:play"] {
  margin-left: 3px;
}
.mar-list-vertical-response__item:last-child {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .mar-list-vertical-response__item:last-child {
    margin-bottom: 15px;
  }
}

.block {
  position: relative;
}

.block-heading {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  font-family: var(--header-font);
  color: #000000;
  text-transform: var(--text-transform-heading);
  margin-bottom: 25px;
  margin-top: 0;
  padding-top: 0;
  cursor: default;
}
.block-heading.heading-double-underline {
  display: inline-block;
  text-align: center;
  font-size: var(--font-size-m);
  border-bottom: 4px double #9DA0A4;
  margin: auto;
  padding-bottom: 0;
  margin-bottom: 10px;
}
.block-heading {
  line-height: 120%;
  width: fit-content;
  position: relative;
}
@media (min-width: 768px) {
  .block-heading {
    font-size: var(--font-size-xl);
  }
}
.block-heading::after {
  content: "";
  height: 4px;
  background: var(--accent-colour);
  width: 100%;
  display: block;
  position: absolute;
}
.block-heading--sub {
  text-transform: capitalize;
}

@media (min-width: 576px) {
  .block-most-popular-right-column {
    display: none;
  }
}
@media (min-width: 768px) {
  .block-most-popular-right-column {
    display: block;
  }
}
.block-most-popular-right-column .mar-tab__headings {
  margin: 0 15px 24px 0;
}
@media (max-width: 575px) {
  .block-most-popular-right-column .mar-tab__headings {
    margin: 0;
  }
}
.block-most-popular-right-column .most-read__list-item a {
  max-width: 220px !important;
}
.block-most-popular-right-column .most-read__body.most-read__body--one-column .mar-tab--active.most-read__list {
  display: grid;
  grid-template-columns: repeat(1, minmax(245px, 1fr));
}

.most-read {
  margin: 0;
  font-family: var(--heading-font);
}
.most-read .mar-tab--active.most-read__list {
  display: grid;
  margin-bottom: 0;
  grid-template-columns: repeat(1, minmax(245px, 1fr));
  gap: 0 15px;
}
@media (min-width: 576px) {
  .most-read .mar-tab--active.most-read__list {
    gap: 0 20px;
  }
}
@media (min-width: 576px) {
  .most-read .mar-tab--active.most-read__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.most-read .mar-tab--active.most-read__list .most-read__list-item {
  min-width: unset;
  gap: 20px;
}
.most-read .mar-tab--active.most-read__list .most-read__list-item .headline {
  margin: 0;
}
.most-read .mar-tab--active.most-read__list .most-read__list-item a {
  color: #333333;
  font-family: var(--headlines-font);
  font-size: var(--font-size-s);
}
.most-read .mar-tab--active.most-read__list .most-read__list-item a:hover {
  color: #000000;
  text-decoration: none;
}
.most-read .mar-tab--active.most-read__list .most-read__list-item::before {
  padding-top: 0;
  font-size: 30px;
  min-width: 35px;
  text-align: center;
  line-height: 100%;
  margin: 0;
}
@media (min-width: 768px) {
  .most-read .mar-tab--active.most-read__list {
    column-count: 2;
  }
}
@media (min-width: 1200px) {
  .most-read .mar-tab--active.most-read__list {
    column-count: unset;
    margin-left: 0;
    margin-right: 0;
  }
}
.most-read .read-more-cta {
  margin-top: 0;
  font-family: var(--body-font);
}
.most-read__cta-container {
  text-align: center;
  margin-top: 5px;
}
.most-read--hide {
  display: none !important;
}
@media (min-width: 768px) {
  .most-read .most-read__body.most-read__body--one-column .mar-tab--active.most-read__list {
    display: grid;
  }
  .most-read .most-read__body.most-read__body--one-column .mar-tab--active.most-read__list .most-read__list-item a {
    max-width: 100%;
  }
}
@media (max-width: 767px) and (min-width: 576px) {
  .most-read .most-read__body.most-read__body--one-column .mar-tab--active.most-read__list {
    display: block;
    column-count: 2;
  }
}

.skimlinks-disclaimer {
  margin-bottom: 0;
  font-size: var(--font-size-xs);
  display: flex;
}
.skimlinks-disclaimer__container {
  display: flex;
}
.skimlinks-disclaimer__accent {
  display: block;
  width: 6px;
  height: 20px;
  background: var(--main-colour);
  margin-right: 5px;
}
.skimlinks-disclaimer__asterisk {
  color: #2A652D;
  font-size: 10px;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.skimlinks-disclaimer__text {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xxs);
}
.skimlinks-disclaimer__link {
  text-decoration: underline;
  font-size: var(--font-size-xxs);
}

.traffic-incident-item {
  display: flex;
  flex-wrap: wrap;
}
.traffic-incident-item__results-title, .traffic-incident-item__results-traffic-description, .traffic-incident-item__results-last-updated {
  font-family: var(--global-font);
  flex: 1 1 100%;
}
.traffic-incident-item__results-title {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  flex-basis: 50%;
}
.traffic-incident-item__results-title-area {
  display: inline-block;
  margin-left: 5px;
}
.traffic-incident-item__results-icons {
  display: inline-block;
  margin-left: 10px;
}
.traffic-incident-item__results-traffic-description {
  font-size: var(--font-size-s);
  margin-top: 0;
  margin-bottom: 0;
}
.traffic-incident-item__results-last-updated {
  font-size: var(--font-size-xxs);
  margin: 0;
  flex: 1 1 50%;
  align-self: flex-end;
}
.traffic-incident-item__results-social-share {
  list-style: none;
  flex: 1 1 50%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.traffic-incident-item__results-social-share .social-bar__button--with-icon {
  width: 25px;
  height: 25px;
}
.traffic-incident-item__results-social-share .social-bar__button--with-icon svg {
  width: 15px;
  height: 15px;
  margin-top: 0;
}
.traffic-incident-item .mar-btn {
  line-height: 0;
}
@media (min-width: 768px) {
  .traffic-incident-item__results-view-more {
    margin-left: 25px;
  }
}

.traffic-alerts-item {
  display: flex;
  flex-wrap: wrap;
}
.traffic-alerts-item__results-severity {
  width: 100%;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 19.6px */
  margin-bottom: 10px;
}
.traffic-alerts-item__results-severity span {
  width: 90px;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-left: -10px;
}
.traffic-alerts-item__results-severity .high {
  background-color: #FFA200;
  color: black;
}
.traffic-alerts-item__results-severity .moderate {
  background-color: #F5CE68;
  color: black;
}
.traffic-alerts-item__results-severity .minimal {
  background-color: #D0D0D0;
  color: black;
}
.traffic-alerts-item__results-severity .severe {
  background-color: #9D0D13;
  color: white;
}
.traffic-alerts-item__results-severity .low {
  background-color: #078346;
  color: #FFFFFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
}
.traffic-alerts-item__results-title {
  font-family: var(--headlines-font);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
  margin-bottom: 5px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.traffic-alerts-item__results-title-area {
  font-family: var(--body-font);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  width: 100%;
  margin-bottom: 5px;
}
.traffic-alerts-item__results-icons {
  display: inline-block;
}
.traffic-alerts-item__results-traffic-description {
  font-family: var(--body-font);
  font-size: var(--font-size-xs);
  margin-top: 0;
  margin-bottom: 5px;
  line-height: 130%; /* 18.2px */
}
.traffic-alerts-item__results-last-updated {
  font-size: var(--font-size-xxs);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #595959;
}
.traffic-alerts-item__results-last-updated p, .traffic-alerts-item__results-last-updated strong, .traffic-alerts-item__results-last-updated time {
  font-family: var(--body-font);
  font-size: var(--font-size-xxs);
  margin: 0;
}
.traffic-alerts-item__results-last-updated .btn, .traffic-alerts-item__results-last-updated .btn-link {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  padding: 0;
}
.traffic-alerts-item__results-social-share {
  list-style: none;
  flex: 1 1 50%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.traffic-alerts-item__results-social-share .social-bar__button--with-icon {
  width: 25px;
  height: 25px;
}
.traffic-alerts-item__results-social-share .social-bar__button--with-icon svg {
  width: 15px;
  height: 15px;
  margin-top: 0;
}
.traffic-alerts-item .mar-btn {
  line-height: 0;
}

.local-info {
  margin-bottom: 50px;
}
.local-info__search {
  display: flex;
  flex-wrap: wrap;
  background: #F2F2F3;
  padding: 20px;
  margin-bottom: 20px;
}
.local-info__search label#locationLabel {
  flex-basis: 100%;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
}
.local-info__search input {
  height: 40px;
  flex: 1;
}
.local-info__search input,
.local-info__search .mar-btn {
  height: 40px;
}
.local-info__search ul {
  flex-basis: 100%;
  list-style: none;
  display: flex;
  margin: 0;
  padding: 10px 0;
}
.local-info__search ul li {
  margin-right: 10px;
}
.local-info .sectionHead {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
}
.local-info .localinfo_list {
  list-style: none;
  margin: 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #F2F2F3;
}
.local-info .localinfo__frontpage_image {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .local-info {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 320px);
    gap: 20px;
  }
  .local-info .block-heading {
    grid-column: span 2/span 2;
  }
  .local-info .local-info__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column: span 2;
    gap: 10px;
  }
  .local-info .local-info__search {
    grid-column: span 2/span 2;
  }
}
.local-info__side {
  grid-column: span 2;
}

.local-info-weather-display__powered-by {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}
.local-info-weather-display__powered-by-text {
  font-family: var(--heading-font);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-semibold);
  margin-right: 5px;
}
.local-info-weather-display__current-weather {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 50px;
}
.local-info-weather-display__current-weather h3 {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  margin-right: 25px;
  text-transform: uppercase;
}
.local-info-weather-display__current-weather picture {
  height: 110px;
  width: 170px;
  margin-right: 50px;
}
.local-info-weather-display__current-weather picture img {
  width: 100%;
}
.local-info-weather-display__current-weather-stats {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.local-info-weather-display__current-weather-stats p {
  margin-top: 0;
  margin-bottom: 10px;
}
.local-info-weather-display__current-weather-stats p:last-child {
  margin-bottom: 0;
}
.local-info-weather-display__current-weather-stats .summary {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semibold);
}
.local-info-weather-display__current-weather-stats .temp {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
}
.local-info-weather-display__current-weather-stats .change-of-rain {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
}
.local-info-weather-display__daily-weather-sunrise span {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  color: #333333;
}
.local-info-weather-display__daily-weather-sunrise span:not(:last-child) {
  margin-right: 5px;
}
.local-info-weather-display__daily-weather-sunrise {
  margin-bottom: 25px;
}
.local-info-weather-display__weekly-weather .mar-tab {
  overflow-x: scroll;
}
.local-info-weather-display__weekly-weather .mar-tab__heading-link {
  font-size: var(--font-size-s);
  min-width: 130px;
  font-family: var(--heading-font);
}
.local-info-weather-display__weekly-weather .content-card {
  margin-top: 65px;
}
.local-info-weather-display__weekly-weather {
  margin-bottom: 50px;
  padding-bottom: 15px;
  border-bottom: 1px solid #E6E6E9;
}
.local-info-weather-display__time-weather-container {
  display: flex;
  justify-content: space-between;
}
.local-info-weather-display__time-weather {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-right: 30px;
}
.local-info-weather-display__time-weather:last-child {
  margin-right: 0;
}
.local-info-weather-display__time-of-day {
  font-size: var(--font-size-m);
  color: #333333;
  margin-top: 0;
  margin-bottom: 10px;
  min-width: 60px;
}
.local-info-weather-display__time-of-day-icon {
  margin-bottom: 10px;
}
.local-info-weather-display__time-of-day-temp {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
  margin-bottom: 30px;
}
.local-info-weather-display__time-of-day-win-mph {
  margin: 0;
}
@media (min-width: 768px) {
  .local-info-weather-display__weekly-weather .mar-tab {
    overflow-x: auto;
  }
}

.traffic-details__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 25px;
  background: #F2F2F3;
}
.traffic-details__title svg {
  fill: #333333;
}
.traffic-details .traffic-incident-item, .traffic-details__back-btn {
  margin-bottom: 25px;
}
.traffic-details__back-btn {
  max-width: 300px;
}
.traffic-details #standard_mpu_2_container {
  margin: 25px 0;
}
@media (min-width: 768px) {
  .traffic-details {
    display: grid;
    gap: 20px;
  }
  .traffic-details__title, .traffic-details__back-btn,
  .traffic-details .traffic-incident-item {
    grid-column-start: 1;
  }
  .traffic-details #standard_mpu_2_container {
    grid-column-start: 2;
    grid-row: 1/3;
  }
}

.traffic-details + .disclaimer {
  margin-bottom: 50px;
}

.traffic-landing {
  display: flex;
  flex-direction: column;
}
.traffic-landing__filters, .traffic-landing__results {
  min-height: 25vh;
}
.traffic-landing__filters {
  padding-bottom: 20px;
  border-bottom: 1px solid #CCCFD6;
}
.traffic-landing__filter-form .mar-form-elements__label-title {
  margin-bottom: 20px;
}
.traffic-landing__filter-form label.mar-form-elements__form-check-label {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5px;
}
.traffic-landing__filter-form label.mar-form-elements__form-check-label input[type=radio] {
  order: -1;
  margin: 0 5px 0 0;
}
.traffic-landing__filter-form svg {
  width: 20px;
}
.traffic-landing__filter-form .label-text {
  display: inline-block;
}
.traffic-landing__location-form {
  display: grid;
}
.traffic-landing__location-form .mar-btn {
  width: max-content;
}
.traffic-landing__location-form label {
  display: block;
  margin-top: 10px;
}
.traffic-landing__results {
  padding-top: 20px;
}
.traffic-landing__results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.traffic-landing__results-list li {
  margin-bottom: 50px;
}
.traffic-landing__results-list .high,
.traffic-landing__results-list .medium,
.traffic-landing__results-list .low {
  border-left-width: 3px;
  border-left-style: solid;
  padding-left: 10px;
}
.traffic-landing__results-list .high {
  border-left-color: #9D0D13;
}
.traffic-landing__results-list .medium {
  border-left-color: #F5CE68;
}
.traffic-landing__results-list .low {
  border-left-color: #2EAA6D;
}
@media (min-width: 768px) {
  .traffic-landing {
    display: grid;
    grid-template-columns: minmax(227px, 320px) 1fr;
  }
  .traffic-landing__filters {
    padding-right: 25px;
    border-bottom: 0;
    border-right: 1px solid #CCCFD6;
  }
  .traffic-landing__results {
    padding-top: 0;
    padding-left: 25px;
    margin-bottom: 25px;
  }
}
.traffic-landing .mar-btn {
  margin-top: 10px;
  margin-left: auto;
}

.traffic-landing + .disclaimer {
  margin-bottom: 50px;
}

.traffic-alerts {
  display: grid;
  flex-direction: column;
  margin: 0 10px;
}
.traffic-alerts__filters {
  background-color: #F2F2F3;
  padding-bottom: 20px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  height: fit-content;
}
.traffic-alerts__filters-heading {
  color: #000000;
  font-family: var(--global-font);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: 130%; /* 26px */
}
.traffic-alerts__filter-form {
  display: grid;
  font-family: var(--global-font);
  font-size: var(--font-size-s);
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 576px) {
  .traffic-alerts__filter-form {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}
@media (min-width: 1200px) {
  .traffic-alerts__filter-form {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.traffic-alerts__filter-form label {
  margin: 0;
  padding: 0;
}
.traffic-alerts__filter-form .mar-form-elements__form-group .mar-form-elements__form-control {
  background-color: white !important;
  margin-top: 5px;
  background-size: 14px 14px;
}
.traffic-alerts__filter-form .mar-form-elements__form-group .mar-form-elements__form-control select option {
  position: relative;
  font-size: var(--font-size-m);
}
.traffic-alerts__type-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--global-font);
  font-size: var(--font-size-s);
}
.traffic-alerts__type-form .type-heading {
  grid-column: 1;
}
@media (min-width: 576px) {
  .traffic-alerts__type-form {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 10px;
    column-gap: 30px;
  }
  .traffic-alerts__type-form .type-heading {
    grid-column: 1/span 3;
  }
}
@media (min-width: 1200px) {
  .traffic-alerts__type-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .traffic-alerts__type-form .type-heading {
    grid-column: 1;
    margin-bottom: 10px;
  }
}
.traffic-alerts__type-form .mar-form-elements__form-group label {
  margin: 0;
  padding: 0;
}
.traffic-alerts__type-form .mar-form-elements__form-check-label {
  display: flex;
  align-items: center;
  font-family: var(--global-font);
  font-size: var(--font-size-s);
  flex-direction: row;
  gap: 5px;
  width: 100%;
}
.traffic-alerts__type-form .mar-form-elements__form-check-label input[type=checkbox] {
  margin: 0;
}
.traffic-alerts__type-form .mar-form-elements__form-group-inline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.traffic-alerts__type-form svg {
  width: 20px;
}
.traffic-alerts__type-form .label-text {
  display: inline-block;
  font-family: var(--global-font);
  font-size: var(--font-size-xs);
}
.traffic-alerts__results {
  padding-top: 20px;
}
@media (min-width: 576px) {
  .traffic-alerts__results {
    padding-top: 15px;
  }
}
@media (min-width: 1200px) {
  .traffic-alerts__results {
    padding-top: 20px;
  }
}
.traffic-alerts__results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.traffic-alerts__results-list li {
  margin-bottom: 25px;
  padding: 0 10px 10px 10px;
  border: 1px solid #CCCFD6;
  border-radius: 3px;
}
.traffic-alerts__results-no-incidents {
  justify-items: center;
  padding-top: 10px;
}
.traffic-alerts__no-incidents-message {
  color: #333333;
  font-family: var(--global-font);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: 140%; /* 22.4px */
  margin-top: 10px;
}
@media (min-width: 1200px) {
  .traffic-alerts {
    display: grid;
    grid-template-columns: minmax(227px, 320px) 1fr;
    gap: 15px;
  }
  .traffic-alerts__filters {
    background-color: #F2F2F3;
    border-bottom: 0;
  }
  .traffic-alerts__results {
    padding-top: 0;
  }
}
.traffic-alerts .mar-btn {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size-m);
  order: 1;
  grid-column: 1;
}
@media (min-width: 576px) {
  .traffic-alerts .mar-btn {
    grid-column: 1/span 3;
  }
}
@media (min-width: 1200px) {
  .traffic-alerts .mar-btn {
    grid-column: 1;
  }
}
.traffic-alerts .iconify {
  width: 24px;
  height: 24px;
  background-color: #FFFFFF;
  border-radius: 100%;
  border: 1px solid #CCCFD6;
  padding: 5px;
  margin-left: 5px;
}
@media (min-width: 1200px) {
  .traffic-alerts .iconify {
    display: none;
  }
}
.traffic-alerts .inrix {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  font-family: var(--global-font);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: 140%; /* 16.8px */
  margin-top: 25px;
  margin-bottom: 25px;
}

.traffic-alerts + .disclaimer {
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.traffic-alerts + .disclaimer img {
  max-width: unset;
}

@media (max-width: 575px) {
  .block-heading {
    margin: 0 10px !important;
    margin-bottom: 15px !important;
  }
}
@media (max-width: 991px) {
  .block-heading {
    margin: 0 15px !important;
    margin-bottom: 15px !important;
  }
}
@media (min-width: 1200px) {
  .block-heading {
    margin-left: 10px !important;
    margin-bottom: 15px !important;
  }
}

@media (max-width: 575px) {
  .hidden {
    display: none !important;
  }
}

.mar-modal {
  width: fit-content;
}

.mar-modal__header {
  background-color: #365A6B;
}

.mar-modal__title {
  color: #FFFFFF;
  font-family: var(--global-font);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: 22.4px; /* 140% */
}

.mar-modal__actions {
  justify-content: center;
}
.mar-modal__actions .mar-btn, .mar-modal__actions .mar-btn--outline, .mar-modal__actions .mar-btn--md {
  border-radius: 3px !important;
  border: 1px solid #0678D0 !important;
  background: #FFFFFF;
  color: #0678D0 !important;
  font-family: var(--global-font);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  line-height: 130%; /* 18.2px */
}

.traffic-alerts-modal__table {
  border-collapse: separate;
  border-spacing: 10px 10px;
  font-family: var(--global-font);
  font-size: var(--font-size-xs);
  font-style: normal;
  line-height: 130%; /* 16.9px */
}
.traffic-alerts-modal__table .traffic-alerts-modal__table-key {
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}
.traffic-alerts-modal__table .traffic-alerts-modal__table-value {
  font-weight: var(--font-weight-regular);
}
