/*=== Themes ===*/
/* theme lime */
.theme-lime {
    background-color: var(--primary-colour);
    color: white !important;
  }
  .theme-lime.button-type-border {
    color: var(--primary-colour);
    border-color: var(--primary-colour);
  }
  .theme-lime.button-type-border:hover {
    background-color: var(--primary-colour) !important;
    color: var(--basic-white) !important;
    border-color: var(--primary-colour) !important;
  }
  .theme-lime.btn.button-type-filled {
    background: var(--primary-colour) !important;
    color: white !important;
  }
  .theme-lime.btn.button-type-filled:hover {
    background: transparent !important;
    color: var(--primary-colour) !important;
    border-color: var(--primary-colour) !important;
  }
  .text-lime.btn.internal-link:before {
    background: var(--primary-colour) !important;
  }
  .text-lime.btn.internal-link:after {
    background-color: var(--primary-colour) !important;
  }
  .text-lime.btn.internal-link:hover {
    color: var(--primary-colour) !important;
  }
  .accordion-item.theme-lime .accordion-header {
    background-color: var(--primary-colour);
    color: white;
  }
  .accordion-item.theme-lime .accordion-content {
    background-color: var(--primary-colour);
    color: white;
    border-top: 3px solid white;
  }
  .panel-faded-lime {
    background-color: var(--primary-colour-faded);
    color: white;
  }
  .panel-wrapper.bordered .theme-lime {
    background-color: transparent !important;
    color: var(--primary-colour);
  }
  .panel-wrapper.border-theme-lime {
    border-color: var(--primary-colour);
  }
  .carousel .slide-faded-lime {
    background-color: var(--primary-colour-faded);
    color: white;
  }
  
  /* theme pale lime */
  .theme-pale-lime {
    background-color: #ecf4dd;
  }
  
  /* theme ocean */
  .theme-ocean {
    background-color: var(--secondary-colour);
    color: white !important;
  }
  .theme-ocean.button-type-border {
    color: var(--secondary-colour);
    border-color: var(--secondary-colour);
  }
  .theme-ocean.button-type-border:hover {
    background-color: var(--secondary-colour) !important;
    color: var(--basic-white) !important;
    border-color: var(--secondary-colour) !important;
  }
  .theme-ocean.btn.button-type-filled {
    background: var(--secondary-colour) !important;
    color: white;
  }
  .theme-ocean.btn.button-type-filled:hover {
    background: transparent !important;
    color: var(--secondary-colour) !important;
    border-color: var(--secondary-colour) !important;
  }
  .text-ocean.btn.internal-link:before {
    background: var(--secondary-colour) !important;
  }
  .text-ocean.btn.internal-link:after {
    background-color: var(--secondary-colour) !important;
  }
  .text-ocean.btn.internal-link:hover {
    color: var(--secondary-colour) !important;
  }
  .accordion-item.theme-ocean .accordion-header {
    background-color: var(--secondary-colour);
    color: white;
  }
  .accordion-item.theme-ocean .accordion-content {
    background-color: var(--secondary-colour);
    color: white;
    border-top: 3px solid white;
  }
  .panel-faded-ocean {
    background-color: var(--secondary-colour-faded);
    color: white;
  }
  .panel-wrapper.bordered .theme-ocean {
    background-color: transparent !important;
    color: var(--secondary-colour);
  }
  .panel-wrapper.border-theme-ocean {
    border-color: var(--secondary-colour);
  }
  .carousel .slide-faded-ocean {
    background-color: var(--secondary-colour-faded);
    color: white;
  }
  
  /* theme forest */
  .theme-forest {
    background-color: var(--tertiary-colour);
    color: white !important;
  }
  .theme-forest.button-type-border {
    color: var(--tertiary-colour);
    border-color: var(--tertiary-colour);
  }
  .theme-forest.button-type-border:hover {
    background-color: var(--tertiary-colour) !important;
    color: white;
  }
  .theme-forest.btn.button-type-filled {
    background: var(--tertiary-colour) !important;
    color: white;
  }
  .theme-forest.btn.button-type-filled:hover {
    background: transparent !important;
    color: var(--tertiary-colour) !important;
    border-color: var(--tertiary-colour) !important;
  }
  .text-forest.btn.internal-link:before {
    background: var(--tertiary-colour) !important;
  }
  .text-forest.btn.internal-link:after {
    background-color: var(--tertiary-colour) !important;
  }
  .text-forest.btn.internal-link:hover {
    color: var(--tertiary-colour) !important;
  }
  .accordion-item.theme-forest .accordion-header {
    background-color: var(--tertiary-colour);
    color: white;
  }
  .accordion-item.theme-forest .accordion-content {
    background-color: var(--tertiary-colour);
    color: white;
    border-top: 3px solid white;
  }
  .panel-faded-forest {
    background-color: var(--tertiary-colour-faded);
    color: white;
  }
  .panel-wrapper.bordered .theme-forest {
    background-color: transparent !important;
    color: var(--tertiary-colour);
  }
  .panel-wrapper.border-theme-forest {
    border-color: var(--tertiary-colour);
  }
  .carousel .slide-faded-forest {
    background-color: var(--tertiary-colour-faded);
    color: white;
  }
  
  /* theme grey */
  [theme-grey],
  .theme-grey {
    background-color: var(--basic-gray);
    color: black !important;
  }
  .theme-grey.button-type-border {
    color: var(---basic-gray);
    border-color: var(--basic-grayr);
  }
  .theme-grey.button-type-border:hover {
    background-color: var(--basic-gray) !important;
    color: white;
  }
  .theme-grey.btn.button-type-filled {
    background: var(--basic-gray) !important;
    color: white;
  }
  .theme-grey.btn.button-type-filled:hover {
    background: transparent !important;
    color: var(--basic-gray) !important;
    border-color: var(--basic-gray) !important;
  }
  .text-grey.btn.internal-link:before {
    background: var(--basic-gray) !important;
  }
  .text-grey.btn.internal-link:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--basic-gray) !important;
    margin: auto;
    transition: 0.2s linear;
  }
  .text-grey.btn.internal-link:hover {
    color: var(--basic-gray) !important;
  }
  .accordion-item.theme-grey .accordion-header {
    background-color: var(--basic-gray);
    color: white;
  }
  .accordion-item.theme-grey .accordion-content {
    background-color: var(--basic-gray);
    color: white;
    border-top: 3px solid white;
  }
  .panel-faded-grey {
    background-color: var(--septenary-colour-faded);
    color: black;
  }
  .panel-wrapper.bordered .theme-grey {
    background-color: transparent !important;
    color: var(--basic-gray);
  }
  .panel-wrapper.border-theme-grey {
    border-color: var(--basic-gray);
  }
  .carousel .slide-faded-grey {
    background-color: var(--septenary-colour-faded);
    color: black;
  }
  
  /* theme grey */
  [theme-medium-grey],
  .theme-medium-grey {
    background-color: var(--basic-medium-grey);
    color: black !important;
  }
  .theme-medium-grey.button-type-border {
    color: var(--basic-medium-grey) !important;
    border-color: var(--basic-medium-grey);
  }
  .theme-medium-grey.button-type-border:hover {
    background-color: var(--basic-medium-grey) !important;
    color: white !important;
  }
  .theme-medium-grey.btn.button-type-filled {
    background: var(--basic-medium-grey) !important;
    color: white;
  }
  .theme-medium-grey.btn.button-type-filled:hover {
    background: transparent !important;
    color: var(--basic-medium-grey) !important;
    border-color: var(--basic-medium-grey) !important;
  }
  .text-medium-grey.btn.internal-link:before {
    background: var(--basic-medium-grey) !important;
  }
  .text-medium-grey.btn.internal-link:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--basic-medium-grey) !important;
    margin: auto;
    transition: 0.2s linear;
  }
  .text-medium-grey.btn.internal-link:hover {
    color: var(--basic-medium-grey) !important;
  }
  .accordion-item.theme-medium-grey .accordion-header {
    background-color: var(--basic-medium-grey);
    color: white;
  }
  .accordion-item.theme-medium-grey .accordion-content {
    background-color: var(--basic-medium-grey);
    color: white;
    border-top: 3px solid white;
  }
  .panel-wrapper.bordered .theme-medium-grey {
    background-color: transparent !important;
    color: var(--basic-medium-grey);
  }
  .panel-wrapper.border-theme-medium-grey {
    border-color: var(--basic-medium-grey);
  }

  /* theme light medium grey */
  [theme-light-medium-grey],
  .theme-light-medium-grey {
    background-color: var(--basic-light-medium-grey);
    color: #575756 !important;
  }
  
  /* theme plum */
  .theme-plum {
    background-color: var(--quinary-colour);
    color: white !important;
  }
  .theme-plum * {
    color: white;
  }
  .theme-plum.button-type-border {
    color: var(--quinary-colour);
    border-color: var(--quinary-colour);
  }
  .theme-plum.button-type-border:hover {
    background-color: var(--quinary-colour) !important;
    color: white;
  }
  .theme-plum.btn.button-type-filled {
    background: var(--quinary-colour) !important;
    color: white;
  }
  .theme-plum.btn.button-type-filled:hover {
    background: transparent !important;
    color: var(--quinary-colour) !important;
    border-color: var(--quinary-colour) !important;
  }
  .text-plum.btn.internal-link:before {
    background: var(--quinary-colour) !important;
  }
  .text-plum.btn.internal-link:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--quinary-colour) !important;
    margin: auto;
    transition: 0.2s linear;
  }
  .text-plum.btn.internal-link:hover {
    color: var(--quinary-colour) !important;
  }
  .accordion-item.theme-plum .accordion-header {
    background-color: var(--quinary-colour);
    color: white;
  }
  .accordion-item.theme-plum .accordion-content {
    background-color: var(--quinary-colour);
    color: white;
    border-top: 3px solid white;
  }
  .panel-faded-plum {
    background-color: var(--quinary-colour-faded);
    color: white;
  }
  .panel-wrapper.bordered .theme-plum {
    background-color: transparent !important;
    color: var(--quinary-colour);
  }
  .panel-wrapper.border-theme-plum {
    border-color: var(--quinary-colour);
  }
  .carousel .slide-faded-plum {
    background-color: var(--quinary-colour-faded);
    color: white;
  }
  
  /* theme slate */
  .theme-slate {
    background-color: var(--senary-colour);
    /* color: white; */
  }
  .theme-slate.button-type-border {
    color: var(--senary-colour);
    border-color: var(--senary-colour);
  }
  .theme-slate.button-type-border:hover {
    background-color: var(--senary-colour) !important;
    color: var(--basic-white) !important;
    border-color: var(--senary-colour) !important;
  }
  .theme-slate.btn.button-type-filled {
    background: var(--senary-colour) !important;
    color: white;
  }
  .theme-slate.btn.button-type-filled:hover {
    background: transparent !important;
    color: var(--senary-colour) !important;
    border-color: var(--senary-colour) !important;
  }
  .text-slate.btn.internal-link:before {
    background: var(--senary-colour) !important;
  }
  .text-slate.btn.internal-link:after {
    background-color: var(--senary-colour) !important;
  }
  .text-slate.btn.internal-link:hover {
    color: var(--senary-colour) !important;
  }
  .accordion-item.theme-slate .accordion-header {
    background-color: var(--senary-colour);
    color: white;
  }
  .accordion-item.theme-slate .accordion-content {
    background-color: var(--senary-colour);
    color: white;
    border-top: 3px solid white;
  }
  .panel-faded-slate {
    background-color: var(--senary-colour-faded);
    color: white;
  }
  .panel-wrapper.bordered .theme-slate {
    background-color: transparent !important;
    color: var(--senary-colour);
  }
  .panel-wrapper.border-theme-slate {
    border-color: var(--senary-colour);
  }
  .carousel .slide-faded-slate {
    background-color: var(--senary-colour-faded);
    color: white;
  }
  
  /* theme sky blue */
  .theme-sky {
    background-color: var(--quaternary-colour);
    color: white !important;
  }
  .theme-sky.button-type-border {
    color: white;
    border-color: var(--quaternary-colour);
  }
  .theme-sky.button-type-border:hover {
    background-color: var(--quaternary-colour) !important;
    color: white;
  }
  .theme-sky.btn.button-type-filled {
    background: var(--quaternary-colour) !important;
    color: white;
  }
  .theme-sky.btn.button-type-filled:hover {
    background: transparent !important;
    color: white !important;
    border-color: var(--quaternary-colour) !important;
  }
  .text-sky.btn.internal-link:before {
    background: var(--quaternary-colour) !important;
  }
  .text-sky.btn.internal-link:after {
    background-color: var(--quaternary-colour) !important;
  }
  .text-sky.btn.internal-link:hover {
    color: var(--quaternary-colour) !important;
  }
  .accordion-item.theme-sky .accordion-header {
    background-color: var(--quaternary-colour);
    color: white;
  }
  .accordion-item.theme-sky .accordion-content {
    background-color: var(--quaternary-colour);
    color: white;
    border-top: 3px solid white;
  }
  .panel-faded-sky {
    background-color: var(--quaternary-colour-faded);
    color: white;
  }
  .panel-wrapper.bordered .theme-sky {
    background-color: transparent !important;
    color: var(--quaternary-colour);
  }
  .panel-wrapper.border-theme-sky {
    border-color: var(--quaternary-colour);
  }
  .carousel .slide-faded-sky {
    background-color: var(--quaternary-colour-faded);
    color: white;
  }
  
  /* theme black */
  .theme-black {
    background-color: var(--basic-black);
    color: white !important;
  }
  .theme-black.button-type-border {
    color: white;
    border-color: black;
  }
  .theme-black.button-type-border:hover {
    background-color: var(--basic-black) !important;
    color: white;
  }
  .theme-black.btn.button-type-filled {
    background: var(--basic-black) !important;
    color: white;
  }
  .theme-black.btn.button-type-filled:hover {
    background: transparent !important;
    color: white !important;
    border-color: black !important;
  }
  .text-black.btn.internal-link:before {
    background: var(--basic-black) !important;
  }
  .text-black.btn.internal-link:after {
    background-color: var(--basic-black) !important;
  }
  .text-black.btn.internal-link:hover {
    color: var(--basic-black) !important;
  }
  .accordion-item.theme-black .accordion-header {
    background-color: var(--basic-black);
    color: white;
  }
  .accordion-item.theme-black .accordion-content {
    background-color: var(--basic-black);
    color: white;
    border-top: 3px solid black;
  }
  .panel-faded-black {
    background-color: var(--basic-black-faded);
    color: white;
  }
  .panel-wrapper.bordered .theme-black {
    background-color: transparent !important;
    color: var(--basic-black);
  }
  .panel-wrapper.border-theme-black {
    border-color: var(--basic-black);
  }
  .carousel .slide-faded-black {
    background-color: var(--basic-black-faded);
    color: white;
  }
  
  /* theme white */
  .theme-white {
    background-color: var(--basic-white);
    color: black !important;
  }
  .theme-white.button-type-border {
    color: var(--basic-white);
    border-color: var(--basic-white);
  }
  .theme-white.button-type-border:hover {
    background-color: var(--basic-white) !important;
    color: black;
  }
  .theme-white.btn.button-type-filled {
    background: var(--basic-white) !important;
    color: black;
  }
  .theme-white.btn.button-type-filled:hover {
    background: transparent !important;
    color: var(--basic-white) !important;
    border-color: var(--basic-white) !important;
  }
  .text-white.btn.internal-link:before {
    background: var(--basic-white) !important;
  }
  .text-white.btn.internal-link:after {
    background-color: var(--basic-white) !important;
  }
  .text-white.btn.internal-link:hover {
    color: var(--basic-white) !important;
  }
  .accordion-item.theme-white .accordion-header {
    background-color: var(--basic-white);
    color: black;
  }
  .accordion-item.theme-white .accordion-content {
    background-color: var(--basic-white);
    color: black;
    border-top: 3px solid black;
  }
  .panel-faded-white {
    background-color: var(--basic-white-faded);
    color: black;
  }
  .panel-wrapper.bordered .theme-white {
    background-color: transparent !important;
    color: var(--basic-white);
  }
  .panel-wrapper.border-theme-white {
    border-color: var(--basic-white);
  }
  .carousel .slide-faded-white {
    background-color: var(--basic-white-faded);
    color: black;
  }
  
  /* White */
  .theme-white {
    background-color: #fff;
  }
  .theme-plum-purple {
    background-color: var(--quinary-colour);
    color: var(--basic-white);
  }
  .theme-plum-purple * {
    color: var(--basic-white);
  }

  .theme-light-light-grey {
    background-color: #B2B2B2;
  }

  /* sustainabilty themes */
.theme-carbon .face-a {
  background: #788482;
} 
.theme-circularity .face-a {
  background: rgb(133, 150, 157);
}
.theme-community .face-a {
  background: #b0a49c;
}
.theme-carbon .face-b,
.theme-circularity .face-b,
.theme-community .face-b {
  background-color: var(--senary-colour);
}