:root {
  --kw-yellow: rgb(249, 210, 45);
  --kw-blue: #253772;
  --kw-border-blue: #123274;
  --shadow: 0 0 0 0.2rem rgb(0 0 0 / 25%);
}

#postcode-form > div.container > div > div {
  background-color: var(--kw-yellow);
  padding-bottom: 40px;
  border-radius: 31px;
}

#postcode-form > div.container > div > div > h2 {
  font-family: "Montserrat", sans-serif;
  color: #ffffff !important;
}

#postcode-form > div.container > div > div > div.markdown-container.kwc-rt {
  font-family: "Birdseye", sans-serif;
}

.list-panel {
  background-color: var(--kw-yellow);
  border-radius: 50px;
}

#kw-shms {
  font-family: "Birdseye", sans-serif;
  border: solid 1px var(--kw-border-blue);
  border-radius: 50px;
  color: inherit;
}

#kw-shpg {
  font-family: "Birdseye", sans-serif;
  border: solid 1px var(--kw-border-blue);
  border-radius: 50px;
  color: inherit;
}

#postcode-form
  > div.container
  > div
  > div
  > div.address-selection-container
  > div
  > div.composite-address-input.postcode-composite.kwc-shpc
  > input {
  font-family: "Birdseye", sans-serif;
  border-radius: 50px;
}

.composite-address-input {
  background-color: transparent; /* was: background-color: #; */
  border: solid 0px var(--kw-blue);
  display: block;
  border-radius: 50px;
  position: relative;
  height: 50px;
  margin-top: 20px;
}

.kwc-shpc {
  background-color: #f9d22d !important;
  border: solid 0px var(--kw-blue);
  display: block;
  border-radius: 50px;
  position: relative;
  height: 50px;
  margin-top: 20px;
}

#postcode-form .composite-address-input.postcode-composite.kwc-shpc > input {
  color: var(--kw-blue) !important;
}

#postcode-form div.address-selection-container span {
  color: #000 !important;
  transition: color 0.2s ease;
}

#postcode-form .address-selection-container .address-results label {
  transition: color 0.2s ease, background-color 0.2s ease;
}
#postcode-form .address-selection-container .address-results label:hover {
  color: var(--kw-blue) !important;
}

#postcode-form .address-selection-container input[type="checkbox"] {
  accent-color: var(--kw-blue);
  border-radius: 50px !important;
}

#postcode-form .address-selection-container label::before {
  border-radius: 50px !important;
  border: 2px solid var(--kw-blue) !important;
}
#postcode-form .address-selection-container input[type="checkbox"]:checked {
  accent-color: var(--kw-blue);
}
#postcode-form .address-selection-container label::after {
  color: var(--kw-blue) !important;
}

.permit-container {
  background-color: white;
  border-radius: 40px;
  padding: 10px 20px 20px 20px;
  margin: 20px 0px 0px 0px;
}

.skip-placement-selected {
  background-color: darkgrey !important;
  border-color: mediumaquamarine;
  color: white !important;
  box-shadow: 0px 2px 8px 0px rgba(25, 159, 255, 0.4);
}
.skip-placement-selected:hover {
  background-color: var(--kw-blue) !important;
  box-shadow: 0px 3px 10px 0px rgba(25, 159, 255, 0.5);
}
.skip-placement-option:hover {
  background-color: var(--kw-blue) !important;
  box-shadow: 0px 2px 6px 0px rgba(25, 159, 255, 0.3);
  transform: translateY(-2px);
}

.full-page-overlay .dialog-container .dialog-title {
  position: relative;
  margin: 0;
  padding: 10px 15px 7px 15px;
  background-color: var(--kw-blue) !important;
  color: white;
}

#disallowed-items-dialog > div > div > div.dialog-body > div:nth-child(2) > div > button:disabled {
  opacity: 1 !important;
}

.landing-root {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.home-panel.home-bags,
.home-panel.home-exchange {
  margin: 0 !important;
  left: auto !important;
  float: none !important;
}

.home-panel.nw50 {
  width: min(520px, 100%) !important;
}

body > div.landing-root > div.home-panel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  transform: translateZ(0);
  transition: transform 220ms ease, filter 220ms ease;  
  justify-items: center;
}

body > div.landing-root > div.home-sign-in .list-panel {
    background-color: transparent;
}

body > div.landing-root > div.home-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: conic-gradient(
    from 210deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.18) 40deg,
    transparent 90deg,
    transparent 360deg
  );
  opacity: 0;
  filter: blur(0.2px);
  transition: opacity 200ms ease, transform 700ms ease;
  transform: rotate(0deg);
  mix-blend-mode: screen;
}

body > div.landing-root > div.home-panel::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -70px;
  top: -70px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity 220ms ease, transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
  transform: scale(0.9);
}

body > div.landing-root > div.home-panel:hover {
  transform: translateY(-2px);
  filter: saturate(1.1) contrast(1.05);
}

body > div.landing-root > div.home-panel:hover::before {
  opacity: 1;
  transform: rotate(220deg);
}

body > div.landing-root > div.home-panel:hover::after {
  opacity: 1;
  transform: scale(1.05);
}

body > div.landing-root > div.home-panel:active {
  transform: translateY(0px) scale(0.995);
}

body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div,
body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100 {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--kw-yellow) 50%, var(--kw-blue) 50%);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div > *,
body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div > *,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100 > * {
  position: relative;
  z-index: 2;
}

body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div::before,
body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div::before,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 220%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: 0.8s ease;
}

body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div,
body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100 {
  isolation: isolate;
}

body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div > *,
body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div > *,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100 > * {
  position: relative;
  z-index: 2;
}

body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div::before,
body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div::before,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100::before {
  z-index: 1;
  pointer-events: none;
}


body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div:hover::before,
body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div:hover::before,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100:hover::before {
  left: 120%;
}

body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div:hover,
body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div:hover,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(37, 55, 114, 0.3);
}

.home-panel .flex-col h1,
.home-panel .flex-col h2,
.home-panel .flex-col h3,
#logoutForm > h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

body > div.landing-root .home-action a,
body > div.landing-root #logoutForm a,
body > div.landing-root #logoutForm button,
body > div.landing-root .btn,
body > div.landing-root a.btn,
body > div.landing-root button.btn,
body > div.landing-root #kw-shms,
body > div.landing-root #kw-shpg,
#postcode-form .address-selection-container > button,
#waste-form button,
#map-popup .map-popup-footer button.btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background-color: #000 !important;
  color: #fff !important;

  border-radius: 50px !important;
  border: none !important;

  padding: 12px 28px !important;
  text-decoration: none !important;
  cursor: pointer;

  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

body > div.landing-root .home-action a > *,
body > div.landing-root #logoutForm a > *,
body > div.landing-root #logoutForm button > *,
body > div.landing-root .btn > *,
body > div.landing-root a.btn > *,
body > div.landing-root button.btn > *,
body > div.landing-root #kw-shms > *,
body > div.landing-root #kw-shpg > *,
#postcode-form .address-selection-container > button > *,
#waste-form button > *,
#map-popup .map-popup-footer button.btn > * {
  position: relative !important;
  z-index: 2 !important;
}

body > div.landing-root .home-action a::before,
body > div.landing-root #logoutForm a::before,
body > div.landing-root #logoutForm button::before,
body > div.landing-root .btn::before,
body > div.landing-root a.btn::before,
body > div.landing-root button.btn::before,
body > div.landing-root #kw-shms::before,
body > div.landing-root #kw-shpg::before,
#postcode-form .address-selection-container > button::before,
#waste-form button::before,
#map-popup .map-popup-footer button.btn::before {
  content: "";
  position: absolute;
  inset: 0;

  left: -120%;
  width: 240%;

  z-index: 1;
  pointer-events: none;

  opacity: 0.35; /* subtle at rest */
  background: linear-gradient(120deg, transparent, rgba(249, 210, 45, 0.55), transparent);
  transition: left 0.6s ease, opacity 0.25s ease;
}

body > div.landing-root .home-action a:hover,
body > div.landing-root #logoutForm a:hover,
body > div.landing-root #logoutForm button:hover,
body > div.landing-root .btn:hover,
body > div.landing-root a.btn:hover,
body > div.landing-root button.btn:hover,
body > div.landing-root #kw-shms:hover,
body > div.landing-root #kw-shpg:hover,
#postcode-form .address-selection-container > button:hover,
#waste-form button:hover,
#map-popup .map-popup-footer button.btn:hover {
  background-color: var(--kw-blue) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(249, 210, 45, 0.35);
}

body > div.landing-root .home-action a:hover::before,
body > div.landing-root #logoutForm a:hover::before,
body > div.landing-root #logoutForm button:hover::before,
body > div.landing-root .btn:hover::before,
body > div.landing-root a.btn:hover::before,
body > div.landing-root button.btn:hover::before,
body > div.landing-root #kw-shms:hover::before,
body > div.landing-root #kw-shpg:hover::before,
#postcode-form .address-selection-container > button:hover::before,
#waste-form button:hover::before,
#map-popup .map-popup-footer button.btn:hover::before {
  left: 120%;
  opacity: 0.6;
}

body > div.landing-root .home-action a:active,
body > div.landing-root #logoutForm a:active,
body > div.landing-root #logoutForm button:active,
body > div.landing-root .btn:active,
body > div.landing-root a.btn:active,
body > div.landing-root button.btn:active,
body > div.landing-root #kw-shms:active,
body > div.landing-root #kw-shpg:active {
  transform: translateY(0) scale(0.98);
}

#map-popup .map-popup-footer button.btn {
  margin-top: -12px !important;
}
#map-popup .map-popup-footer > div {
  display: flex;
  gap: 12px;
  align-items: center;
}
#map-popup .map-popup-footer > div > button.btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box !important;
}

#kw-shc-1,
#kw-shc-2,
#kw-shc-3,
#kw-shc-4,
#kw-shc-5,
#kw-shc-6,
#kw-shc-7 {
  background: #fff !important;
  border-radius: 50px !important;
  border: none !important;
  overflow: hidden !important;
  cursor: pointer;
}

#kw-shc-1 .kwc-shcg *,
#kw-shc-2 .kwc-shcg *,
#kw-shc-3 .kwc-shcg *,
#kw-shc-4 .kwc-shcg *,
#kw-shc-5 .kwc-shcg *,
#kw-shc-6 .kwc-shcg *,
#kw-shc-7 .kwc-shcg * {
  color: #ffffff !important;
  background-color: #000000;
  border: none !important;
  border-radius: 50px !important;
  transition: background-color 0.25s ease;
}

#kw-shc-1 .kwc-shcg *:hover,
#kw-shc-2 .kwc-shcg *:hover,
#kw-shc-3 .kwc-shcg *:hover,
#kw-shc-4 .kwc-shcg *:hover,
#kw-shc-5 .kwc-shcg *:hover,
#kw-shc-6 .kwc-shcg *:hover,
#kw-shc-7 .kwc-shcg *:hover {
  background-color: var(--kw-blue) !important;
}

.wheely-bins {
  color: #000;
}
.skip-capacity {
  background-color: #ffffff;
  color: #000;
}
.border-left {
  border-left: 1px solid var(--kw-blue) !important;
}

.custom-calendar table.calendar-table td.isSelectable:hover {
  background-color: #253722;
  border-color: #253722;
}

.custom-calendar table.calendar-table td.isSelectable {
  background: none;
  background-color: var(--kw-blue);
}

.custom-calendar table.calendar-table td.today {
  background: none;
  background-color: var(--kw-yellow);
  border-color: var(--kw-yellow);
  color: #000;
}

.custom-calendar table.calendar-table td {
  text-align: center;
  vertical-align: middle;
  height: 5em;
  padding: 5px 10px;
  position: relative;
  transition: height 0.6s, font-size 0.6s;
  border: 1px solid #000;
  color: #999;
  border-radius: 50px;
}

.custom-calendar .custom-calendar-nav .custom-calendar-nav-date .month {
  text-align: center;
  color: var(--kw-yellow);
}

ul.breadcrumb li {
  display: block;
  float: left;
  color: #000;
  margin-right: 2em;
  position: relative;
}

ul.breadcrumb li.current:after {
  content: "";
  display: block;
  background-color: #000;
  position: absolute;
  height: 3px;
  left: 1px;
  right: 1px;
  bottom: -2px;
}
ul.breadcrumb li.current:hover:after {
  background-color: #fff;
}

.btn.btn-primary {
  color: #fff;
  background-color: var(--kw-blue);
  border-color: var(--kw-blue);
}

.customcheck ~ .customcheck-o .fa-check {
  opacity: 0;
  position: relative;
  font-size: 18px;
  left: 2px;
  top: 2px;
  color: #fff;
}

.customcheck:checked ~ .customcheck-o {
  background-color: var(--kw-blue);
}

.customcheck-o {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: white;
  border: 1px solid #000;
}

.customcheck-label:hover > .customcheck-o {
  background-color: var(--kw-blue);
  color: white;
}

.navbar {
  background-color: var(--kw-blue);
  color: white;
  padding: 0 1rem;
  line-height: 24px;
  font-size: 14px;
}

#header-top{
  background-color: var(--kw-blue);
  color: white !important;
}

#header-top.container {
  padding: 0;
}
#header-top .row {
  margin-left: 0;
  margin-right: 0;
}

#header-bottom.container {
  padding: 20px 40px;
}
#header-bottom .row {
  margin-left: 0;
  margin-right: 0;
}

#head-menu {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  height: 60px !important;
}
#head-menu .block:last-child {
  flex-grow: 2;
  text-align: right;
}

#header-top .large-nav {
  display: flex;
  justify-content: space-between;
}
#header-bottom .large-nav {
  display: flex;
  justify-content: space-between;
}

#header-top .large-nav .nav-link {
  text-transform: uppercase;
  font-weight: 400;
  cursor: pointer;
}
#header-bottom .large-nav .nav-link {
  text-transform: uppercase;
  font-weight: 400;
  cursor: pointer;
}

#header-top .large-nav .nav-item {
  border: 1px solid var(--kw-yellow);
  color: var(--kw-yellow);
  padding: 10px 15px;
  cursor: pointer;
}

#header-top .large-nav .nav-item a:hover {
  color: var(--kw-blue);
}

#header-top .large-nav .nav-item:hover {
  background-color: var(--kw-yellow);
  color: var(--kw-blue);
}

#header-bottom .large-nav .nav-item {
  border: 1px solid var(--kw-white);
  color: var(--kw-white);
  padding: 10px 15px;
  cursor: pointer;
}

#header-bottom .nav-item {
  color: #FFFFFF;
   border: 1px solid transparent;
   margin-left: 16px;
   padding: 4px 2.2px;
   letter-spacing: 1px;
}
#header-bottom .nav-item a {
  color: #FFFFFF;
}
#header-bottom .nav-item:hover {
  color: #e0e0e1;
}
#header-bottom .nav-item a:hover {
  color: #e0e0e1;
}
#header-bottom .nav-item,
#header-bottom .nav-item a {
    transition: color 0.2s ease;
}

#header-bottom .nav-item .dropdown-toggle::after {
  display: none;
}

#header-bottom ul.nav {
  margin-right: 16px;
}

#header-bottom .dropdown-menu {
  border: 1px solid black;
  padding: 0px;
}

#header-bottom .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: black !important;
}

#header-bottom .dropdown-menu .dropdown-item {
  color: black;
  font-size: 12.6px;
  padding: 10px 14px !important;
}

#header-bottom .dropdown-menu .dropdown-item .dropdown-submenu-caret {
  display: none;
}

.sign-out-addon {
  justify-content: right;
  text-transform: uppercase;
}

#head-menu .mobile-nav .nav-item {
  text-align: left;
}
#header-top .mobile-nav .nav {
  justify-content: flex-end;
}
#header-bottom .mobile-nav .nav {
  justify-content: flex-end;
}

@media screen and (max-width: 1081px) {
  .large-nav {
    display: none !important;
  }

  #head-menu {
    flex-direction: column;
    align-items: stretch;
  }

  #head-menu .block {
    text-align: center;
  }

  .nav-description {
    margin-top: 40px;
  }

  .sign-out-addon {
    margin-top: -20px;
  }
}

@media screen and (max-width: 901px) {
  .nav-item span {
    display: none;
  }
}

@media screen and (max-width: 437px) {
  .phone-nav {
    display: none;
  }
}

@media screen and (max-width: 363px) {
  .account-nav {
    display: none;
  }
}

.large-nav .nav-description {
  align-items: center;
}

@media screen and (min-width: 1082px) {
  .mobile-nav {
    display: none;
  }

  .nav-description {
    max-width: 20.8%;
  }
}

.nav-description {
  align-content: center;
  display: flex;
}

@media (min-width: 325px) and (max-width: 500px) {
  .markdown-container a:not(.narrow),
  .btn:not(.narrow),
  .radio-button-strip label span:not(.narrow) {
    margin: 55px 0;
  }
}

@media (min-width: 501px) and (max-width: 1018px) {
  .markdown-container a:not(.narrow),
  .btn:not(.narrow),
  .radio-button-strip label span:not(.narrow) {
    margin: 0;
  }
}

@media (min-width: 325px) and (max-width: 500px) {
  .composite-address-input.postcode-composite.kwc-shpc {
    position: relative;
    height: 49px;
    margin-bottom: 16px;
  }

  .composite-address-input.postcode-composite.kwc-shpc > input,
  .composite-address-input .postcode-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 49px;
    z-index: 2;
  }
}

@media (min-width: 325px) and (max-width: 344px) {
  #postcode-form .skip-placement-options-container > div {
    transform: scale(0.7);
    transform-origin: top center;
  }
}

@media (min-width: 345px) and (max-width: 360px) {
  #postcode-form .skip-placement-options-container > div {
    transform: scale(0.8);
    transform-origin: top center;
  }
}

@media (min-width: 361px) and (max-width: 380px) {
  #postcode-form .skip-placement-options-container > div {
    transform: scale(0.8);
    transform-origin: top center;
  }
}

@media (max-width: 412px) {
  #waste-form h4 {
    font-size: 14px;
    line-height: 1.3;
    max-width: 100%;
    word-break: break-word;
  }
}

@media (min-width: 325px) and (max-width: 554px) {
  #disallowed-items-dialog [id^="kw-pagb"] {
    display: none;
  }

  .kwc-pagr {
    justify-content: space-between;
  }
}

body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div,
body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100 {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* prevents blending weirdness */
}

body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div > *,
body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div > *,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100 > * {
  position: relative;
  z-index: 2;
}

body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div::before,
body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div::before,
body > div.landing-root > div.home-panel.home-sign-in.dw100.nw100::before {
  z-index: 1;
  pointer-events: none;
}

body {
font-family: 'Lato', sans-serif;
color: white;
line-height: 1.15;
}

body > div.landing-root .home-action a:hover, body > div.landing-root #logoutForm a:hover, body > div.landing-root #logoutForm button:hover, body > div.landing-root .btn:hover, body > div.landing-root a.btn:hover, body > div.landing-root button.btn:hover, body > div.landing-root #kw-shms:hover, body > div.landing-root #kw-shpg:hover, #postcode-form .address-selection-container > button:hover, #waste-form button:hover, #map-popup .map-popup-footer button.btn:hover {
background-color: var(--kw-yellow) !important;
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(249, 210, 45, 0.35);
}

.markdown-container a, .btn, .radio-button-strip label span {
background-color: #253772 !important;

}

body > div.landing-root #kw-shms:hover,
body > div.landing-root #kw-shpg:hover {
    background-color: transparent !important;
    color: var(--kw-border-blue) !important;
    border: 1px solid var(--kw-border-blue) !important;
    box-shadow: none !important;
}

body > div.landing-root #kw-shms,
body > div.landing-root #kw-shpg {
  background-color: transparent !important;
  border: 1px solid var(--kw-border-blue) !important;
  color: #fff !important;
}

body > div.landing-root #kw-shms:hover,
body > div.landing-root #kw-shpg:hover {
  background-color: transparent !important;
  border: 1px solid var(--kw-border-blue) !important;
  color: var(--kw-border-blue) !important;
  box-shadow: none !important;
}

body > div.landing-root #kw-shms::before,
body > div.landing-root #kw-shpg::before,
body > div.landing-root #kw-shms:hover::before,
body > div.landing-root #kw-shpg:hover::before {
  content: none !important;
}

#postcode-form
> div.container
> div
> div
> div.address-selection-container
> div
> div.permit-container.skip-placement-container
> div {
    color: #000 !important;
}

body > div.landing-root #kw-shms,
body > div.landing-root #kw-shpg {
  background-color: transparent !important;
  border: 1px solid var(--kw-border-blue) !important;
  border-radius: 50px !important;
  color: #fff !important;
}

body > div.landing-root #kw-shms:hover,
body > div.landing-root #kw-shpg:hover {
  background-color: transparent !important;
  border: 1px solid var(--kw-border-blue) !important;
  border-radius: 50px !important;
  color: var(--kw-border-blue) !important;
  box-shadow: none !important;
}

body > div.landing-root #kw-shms::before,
body > div.landing-root #kw-shpg::before,
body > div.landing-root #kw-shms:hover::before,
body > div.landing-root #kw-shpg:hover::before {
  content: none !important;
}

.markdown-container a,
.btn,
.radio-button-strip label span {
  background-color: #253772 !important;
  border: 1px solid #253772 !important;
  border-radius: 50px !important;
}

.markdown-container a:hover,
.btn:hover,
.radio-button-strip label span:hover {
  background-color: transparent !important;
  border: 1px solid #253772 !important;
  color: #253772 !important;
  box-shadow: none !important;
}

.markdown-container a:not(.narrow), .btn:not(.narrow), .radio-button-strip label span:not(.narrow) {
margin: 70px 0;
}

.btn.disabled, .btn:disabled {
opacity: 0.;
}

#postcode-form .address-selection-container > button {
  background-color: #253772 !important;
  color: #ffffff !important;
  border: 1px solid #253772 !important;
  border-radius: 50px !important;
  box-shadow: none !important;
}

#postcode-form .address-selection-container > button:hover {
  background-color: transparent !important;
  color: #253772 !important;
  border: 1px solid #253772 !important;
}

#postcode-form .address-selection-container > button::before,
#postcode-form .address-selection-container > button:hover::before {
  content: none !important;
}

#postcode-form .address-selection-container > button,

#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(3) > button,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(3) > div > div:nth-child(3) > button,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(4) > div > div:nth-child(3) > button,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(5) > div > div:nth-child(3) > button {
  background-color: #253772 !important;
  color: #ffffff !important;
  border: 1px solid #253772 !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  max-width: 100px;
}

#postcode-form .address-selection-container > button:hover,

#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(3) > button:hover,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(3) > div > div:nth-child(3) > button:hover,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(4) > div > div:nth-child(3) > button:hover,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(5) > div > div:nth-child(3) > button:hover {
  background-color: transparent !important;
  color: #253772 !important;
  border: 1px solid #253772 !important;
}

#postcode-form .address-selection-container > button::before,
#postcode-form .address-selection-container > button:hover::before,

#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(3) > button::before,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(3) > button:hover::before,

#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(3) > div > div:nth-child(3) > button::before,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(3) > div > div:nth-child(3) > button:hover::before,

#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(4) > div > div:nth-child(3) > button::before,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(4) > div > div:nth-child(3) > button:hover::before,

#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(5) > div > div:nth-child(3) > button::before,
#waste-form > div:nth-child(21) > div:nth-child(2) > div:nth-child(5) > div > div:nth-child(3) > button:hover::before {
  content: none !important;
}

#disallowed-items-dialog 
> div 
> div 
> div.dialog-body 
> div:nth-child(2) 
> div 
> label 
> h4 {
  color: #000000 !important;
}

#kw-shc-1:hover .kwc-shcg *,
#kw-shc-2:hover .kwc-shcg *,
#kw-shc-3:hover .kwc-shcg *,
#kw-shc-4:hover .kwc-shcg *,
#kw-shc-5:hover .kwc-shcg *,
#kw-shc-6:hover .kwc-shcg *,
#kw-shc-7:hover .kwc-shcg *,

#kw-shcg-1:hover .kwc-shcg *,
#kw-shcg-2:hover .kwc-shcg *,
#kw-shcg-3:hover .kwc-shcg *,
#kw-shcg-4:hover .kwc-shcg *,
#kw-shcg-5:hover .kwc-shcg *,
#kw-shcg-6:hover .kwc-shcg *,
#kw-shcg-7:hover .kwc-shcg * {
  background-color: transparent !important;
  color: #253772 !important;
  border: 1px solid #253772 !important;
  border-radius: 50px !important;
  box-shadow: none !important;
}

/* Make h3 titles inside kw-shc-1..7 black */
#kw-shc-1 > div > div.flex-col.border-left.kwc-shcpv > h3,
#kw-shc-2 > div > div.flex-col.border-left.kwc-shcpv > h3,
#kw-shc-3 > div > div.flex-col.border-left.kwc-shcpv > h3,
#kw-shc-4 > div > div.flex-col.border-left.kwc-shcpv > h3,
#kw-shc-5 > div > div.flex-col.border-left.kwc-shcpv > h3,
#kw-shc-6 > div > div.flex-col.border-left.kwc-shcpv > h3,
#kw-shc-7 > div > div.flex-col.border-left.kwc-shcpv > h3 {
  color: #000000 !important;
}

#review-form > div.container > div:nth-child(1) > div > h2 {
  color: #000000 !important;
}

#review-form > div.container > div:nth-child(1) > div > div,
#review-form > div.container > div:nth-child(3) > div.col-md-8 > p.kwc-shrodat,
#review-form > div.container > div:nth-child(3) > div.col-md-8 > h2.spaced.kwc-shroda,
#review-form > div.container > div:nth-child(3) > div.col-md-8 > p.kwc-shropdp,
#review-form > div.container > div:nth-child(3) > div.col-md-8 > h2.spaced.kwc-shropd,
#review-form > div.container > div:nth-child(3) > div.col-md-8 > table {
  color: #000000 !important;
}

#review-form > div.container > div:nth-child(1) > div > div *,
#review-form > div.container > div:nth-child(3) > div.col-md-8 > table * {
  color: #000000 !important;
}

body {
font-family: 'Lato', sans-serif;
color: black !important;
line-height: 1.15;
}

body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div > p,
body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div > p {
  color: #ffffff !important;
}

#kw-shms,
#kw-shpg {
  color: #ffffff !important;
}

.markdown-container a, .btn, .radio-button-strip label span {
font-weight: normal;
text-decoration: none;
border: none;
background-color: white;
color: white;
cursor: pointer;
display: inline-block;
vertical-align: middle;
font-family: 'Lato', sans-serif;
font-size: 0.875rem;
padding: 0.5em 1em;
position: relative;
overflow: hidden;
line-height: 1em;
white-space: nowrap;
border: solid 1px #348b41;
border-radius: 8px;
transition: all 0.3s ease-in-out;
min-width: 3.5em;
text-align: center;
}

.progress-header {
color: #000;
}

.progress-header {
background-color: var(--kw-yellow);
color: #000;
margin-top: 1px;
margin-bottom: 1em;
}

body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div::before,
body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div::before {
  opacity: 0 !important;
  left: -120% !important;
}

body > div.landing-root > div.home-panel.home-bags.dw25.nw50 > div:hover::before,
body > div.landing-root > div.home-panel.home-exchange.dw25.nw50 > div:hover::before {
  opacity: 0.6 !important;
  left: 120% !important;
}

#online-order-container > div.landing-root > div:nth-child(1) > div,
#online-order-container > div.landing-root > div:nth-child(2) > div,
#online-order-container > div.landing-root > div:nth-child(3) > div {
  width: 433.5px;
  height: 404.09px;
}

.sign-in-action .btn {
  margin-top: 40px;
  margin-bottom: 40px;
}

.landing-root {
  margin-top: 40px;
}

#waste-form .list-panel.flex-row .flex-col.flex-expand {
    min-width: 142px;
}

@media (min-width: 768px) and (max-width: 1211px) {
  #waste-form .list-panel.flex-row .flex-expand p {
    display: none;
  }

  #waste-form .list-panel {
    display: grid !important;
    grid-template-columns: 140px 1fr; /* left image col + right content col */
    grid-template-rows: auto auto;
    column-gap: 12px; /* optional */
    row-gap: 10px;    /* optional */
    align-items: start;
    min-height: 155px;
  }

 #waste-form  .list-panel .image-col {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #waste-form .list-panel .flex-expand {
    grid-column: 2;
    grid-row: 1;
  }

  #waste-form .list-panel > .flex-col:last-child {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 411px) {
  #waste-form .list-panel.flex-row .flex-expand p {
    display: none;
  }

  #waste-form .list-panel {
    display: grid !important;
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
    min-height: 155px;
  }

 #waste-form  .list-panel .image-col {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #waste-form .list-panel .flex-expand {
    grid-column: 2;
    grid-row: 1;
  }

  #waste-form .list-panel > .flex-col:last-child {
    grid-column: 2;
    grid-row: 2;
  }

  #waste-form .list-panel.flex-row .flex-col.image-col img {
      max-height: fit-content;
  }

  #waste-form .list-panel.flex-row .flex-col.flex-expand {
      min-width: fit-content;
  }
}

@media screen and (max-width: 768px) {
  #online-order-container > div.landing-root > div:nth-child(1) > div,
  #online-order-container > div.landing-root > div:nth-child(2) > div,
  #online-order-container > div.landing-root > div:nth-child(3) > div {

    width: 88% !important;
    max-width: 380px;
    height: auto !important;
    margin: 0 auto;
  }
}

#waste-form > div:nth-child(21) > div:nth-child(2) {
    margin-top: 20px; /* adjust value as needed */
}

.home-panel .flex-col h1,
.home-panel .flex-col h2,
.home-panel .flex-col h3,
#logoutForm > h3 {
  position: relative;
  text-align: center;
  color: transparent;
}

.home-panel .flex-col h1::before,
.home-panel .flex-col h2::before,
.home-panel .flex-col h3::before,
#logoutForm > h3::before,
.home-panel .flex-col h1::after,
.home-panel .flex-col h2::after,
.home-panel .flex-col h3::after,
#logoutForm > h3::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  /* inherit typography */
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;

  pointer-events: none;
}

.home-panel .flex-col h1::before,
.home-panel .flex-col h2::before,
.home-panel .flex-col h3::before,
#logoutForm > h3::before{
  color: #000;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* white half */
.home-panel .flex-col h1::after,
.home-panel .flex-col h2::after,
.home-panel .flex-col h3::after,
#logoutForm > h3::after{
  color: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.home-sign-in {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.axe-footer {
  width: 100%;
  box-sizing: border-box;
  background-image: none !important;
  background-color: #f2f2f2 !important;
  height: 320px;
}

.axe-footer-inner {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.axe-footer-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
}

.axe-footer-col {
  box-sizing: border-box;
  padding: 0 20px;
}

.axe-footer-col--logo {
  flex: 0 0 auto;
}

.axe-footer-col--center {
  text-align: center;
}

.axe-footer-col--spacer {
  flex: 0 0 auto;
  min-width: 1px;
}

.axe-footer-col--logo:nth-child(1) { flex-basis: 16.437%; }
.axe-footer-col--logo:nth-child(2) { flex-basis: 16.918%; }
.axe-footer-col--logo:nth-child(3) { flex-basis: 7.9206%; }
.axe-footer-col--spacer            { flex-basis: 9.7248%; }
.axe-footer-col--contact           { flex-basis: 26.9963%; }
.axe-footer-col--legal             { flex-basis: 21.7032%; }

.axe-footer-col--contact,
.axe-footer-col--legal {
  min-width: 240px;
}

.axe-footer-link {
  color: black;
  text-decoration: none;
}

.axe-footer-link--underline {
  text-decoration: underline;
  transition: opacity 300ms ease-in-out;
}

.axe-footer-link--underline:hover {
  opacity: 0.75;
}

.axe-footer-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.axe-footer-logo--small {
  max-width: 115px;
}

.axe-footer-spacer {
  height: 50px;
}

.axe-footer-contact,
.axe-footer-legal {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.75;
  font-size: 1rem;
}

.axe-footer-socials {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.axe-footer-social {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(https://cdn2.editmysite.com/images/common/social_icons.png);
  background-repeat: no-repeat;
  transition: opacity 300ms ease;
}

.axe-footer-social:hover {
  opacity: 0.75;
}

.axe-footer-social--facebook { background-position: 0 0; }
.axe-footer-social--twitter  { background-position: -24px 0; }
.axe-footer-social--linkedin { background-position: -48px 0; }
.axe-footer-social--mail     { background-position: -96px 0; }

.axe-footer-social--instagram { background-position: -72px 0; }

.axe-footer-social-inner {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bottom spacing row */
.axe-footer-bottom-space {
  height: 50px;
}

@media (max-width: 767px) {
  .axe-footer-col {
    flex: 0 0 100% !important;
    padding: 0 15px;
  }

  .axe-footer-col--center {
    text-align: left;
  }

  .axe-footer-spacer,
  .axe-footer-bottom-space {
    height: 24px;
  }
}

#postcode-form .address-selection-container button {
  margin-bottom: 0px;
}

.address-selection-container {
  padding-bottom: 0px;
}

#kw-shms, #kw-shpg {
  margin-top: 3px;
}