
@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W2ExLig.otf') format('OpenType');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W2ExLigIT.otf') format('OpenType');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W3Lig.otf') format('OpenType');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W3LigIT.otf') format('OpenType');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W4SeLig.otf') format('OpenType');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W4SeLigIT.otf') format('OpenType');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W5Pla.otf') format('OpenType');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W5PlaIT.otf') format('OpenType');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W6SeBld.otf') format('OpenType');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W6SeBldIT.otf') format('OpenType');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W7Bld.otf') format('OpenType');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W7BldIT.otf') format('OpenType');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W8ExBld.otf') format('OpenType');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W8ExBldIT.otf') format('OpenType');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W9Blk.otf') format('OpenType');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'TheSans Veolia';
  src: url('../fonts/TheSansVeolia/TheSansVeolia-W9BlckIT.otf') format('OpenType');
  font-weight: 900;
  font-style: italic;
}

:root {
  --Black: #313135;
  --White: #F9F9F9;
  --Off-white: #F4F4F4;
  --Warning: #E02026;
  --Dark: #55555A;
  --Mid: #9C9E9F;
  --Light: #C8DCDC;
  --V1: #F08F75;
  --V2: #E95F47;
  --Accent-1: #804180;
  --Accent-2: #A4D8D7;
  --Accent-3: #00AEC7;
  --Accent-4: #0062A9;
  --Accent-5: #199C69;
  --Cardboard: #88795D;
  --Other: #486B89;
  --Dry-Mixed-Recycling: #E09F25;
  --Secure: #5E69C8;
  --Mixed-Glass: #008569;
  --Plastic-Film: #8A9752;
  --paper-cardboard: #7197CA;
  --Mixed-Glass: #00A6A3;
  --Tins-and-Cans: #9C9C9C;
  --Hazardous: #FF0F00;
  --General: #5F5F5F;
}

* {
  font-family: 'TheSans Veolia', sans-serif;
  font-feature-settings: 'clig' off, 'liga' off;
}

body {
  background: var(--Off-white, #F4F4F4);
  color: var(--Black, #313135);
  margin: 0;
  padding: 0;
}

.cc-container {
  max-width: 1800px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h1,
h2 {
  color: var(--Dark, #55555A);
  font-family: 'TheSans Veolia', sans-serif;
  font-weight: 600;
  font-style: normal;
}

h1 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.25px;
}

p {
  color: var(--Black, #313135);
  font-family: 'TheSans Veolia', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
}

a {
  color: var(--V2, #E95F47);
  font-family: 'TheSans Veolia', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-decoration-line: underline;
}

a:link,
a:hover,
a:visited,
a:active,
a:focus-visible {
  color: var(--V2, #E95F47);
}

.cc-form-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
  position: relative;
}

input {
  width: auto;
  padding: 8px 16px;
  opacity: 0.9;
  border: 1px solid var(--Mid, #9C9E9F);
  border-radius: 32px;
  background: var(--White, #F9F9F9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  color: var(--Black, #313135);
  font-family: 'TheSans Veolia', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

input[type="checkbox"] {
  appearance: none;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 24px;
  height: 24px;
  border: 1px solid var(--Mid, #9C9E9F);
  border-radius: 8px;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15));
  display: grid;
  place-content: center;
  margin: 0;
  padding: 0;
}


input[type="checkbox"]::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 8px;
  transform: scale(0);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
  background: url(/resource/assets/svg/checkmark.svg) no-repeat no-repeat;
  background-position: center;
  background-color: #199C69;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  appearance: none;
  -moz-appearance: textfield;
}

label {
  color: var(--Black, #313135);
  font-family: 'TheSans Veolia', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
}

.cc-custom-label {
  color: var(--Black, #313135);
  font-family: 'TheSans Veolia', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cc-label-text {
  color: var(--Black, #313135);
  font-size: 14px;
  line-height: 16px;
}

.cc-label-subtext {
  color: var(--Dark, #55555A);
  font-size: 12px;
}

.cc-d-none {
  display: none !important;
}

textarea {
  resize: none;
  height: 90px;
  padding: 8px 16px;
  border-radius: 16px;
  border: 1px solid var(--Mid, #9C9E9F);
  background: var(--White, #F9F9F9);
  box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 15%);
  width: auto;
  font-size: 1rem;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-radius: 16px;
  background: var(--Off-white, #F4F4F4);
  box-shadow: 0px 8px 32px 0px rgb(0 0 0 / 10%), 0px 1px 2px 0px rgb(0 0 0 / 5%);
  padding: 32px;
  width: auto;
}

.cc-button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  background: var(--V2, #E95F47);
  border: 1px solid var(--V2, #E95F47);
  color: var(--Off-white, #F4F4F4);
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.cc-button-primary:disabled {
  background: var(--Mid, #9C9E9F);
  border: 1px solid var(--Mid, #9C9E9F);
  color: var(--Light, #C8DCDC);
}

.cc-button-primary-check::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(/resource/assets/svg/checkmark.svg) no-repeat no-repeat;
  background-position: center;
}

.cc-button-primary-multi::before,
.cc-button-outline-multi::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(/resource/assets/svg/business.svg) no-repeat no-repeat;
  background-position: center;
  margin-right: 8px;
}

.cc-button-outline,
.cc-button-outline-samll {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--V2, #E95F47);
  border-radius: 8px;
  background: var(--White, #F9F9F9);
  color: var(--V2, #E95F47);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  text-align: center;
  font-family: 'TheSans Veolia', sans-serif;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
  text-transform: uppercase;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.cc-button-outline {
  padding: 16px 24px;
  font-size: 14px;
  letter-spacing: 2px;
}

.cc-button-primary-samll,
.cc-button-outline-samll {
  padding: 8px 24px;
  font-size: 12px;
  letter-spacing: 1px;
}

a.cc-button-primary,
a:link.cc-button-primary,
a:hover.cc-button-primary,
a:visited.cc-button-primary,
a:active.cc-button-primary,
a:focus-visible.cc-button-primary,

a.cc-button-primary-samll,
a:link.cc-button-primary-samll,
a:hover.cc-button-primary-samll,
a:visited.cc-button-primary-samll,
a:active.cc-button-primary-samll,
a:focus-visible.cc-button-primary-samll,

a.cc-button-outline,
a:link.cc-button-outline,
a:hover.cc-button-outline,
a:visited.cc-button-outline,
a:active.cc-button-outline,
a:focus-visible.cc-button-outline,

a.cc-button-outline-samll,
a:link.cc-button-outline-samll,
a:hover.cc-button-outline-samll,
a:visited.cc-button-outline-samll,
a:active.cc-button-outline-samll,
a:focus-visible.cc-button-outline-samll {
    text-decoration: none;
}

a.cc-button-primary,
a:link.cc-button-primary,
a:hover.cc-button-primary,
a:visited.cc-button-primary,
a:active.cc-button-primary,
a:focus-visible.cc-button-primary,

a.cc-button-primary-samll,
a:link.cc-button-primary-samll,
a:hover.cc-button-primary-samll,
a:visited.cc-button-primary-samll,
a:active.cc-button-primary-samll,
a:focus-visible.cc-button-primary-samll {
  color: var(--Off-white, #F4F4F4);
}

a.cc-button-outline,
a:link.cc-button-outline,
a:hover.cc-button-outline,
a:visited.cc-button-outline,
a:active.cc-button-outline,
a:focus-visible.cc-button-outline,

a.cc-button-outline-samll,
a:link.cc-button-outline-samll,
a:hover.cc-button-outline-samll,
a:visited.cc-button-outline-samll,
a:active.cc-button-outline-samll,
a:focus-visible.cc-button-outline-samll {
  color: var(--V2, #E95F47);
}

.cc-asterisk {
  color: var(--Warning, #E02026);
}

.cc-form-control {
  display: flex;
  flex-direction: column;
  align-items: initial;
  width: 100%;
  gap: 8px;
}

.cc-field-error-text {
  color: var(--V2, #E95F47);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: none;
  position: absolute;
  bottom: -1.375rem;
  left: 0;
}

.cc-field-error-text a {
  color: var(--V2, #E95F47);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.cc-field-error input,
.cc-field-error textarea,
.cc-custom-dropdown .cc-field-error .cc-dropdown__selected {
  color: var(--V2, #E95F47);
  border: 1px solid var(--V2, #E95F47);
}

.cc-field-error .cc-field-error-text {
  display: inline-block;
  position: initial;
}

.cc-form-error .cc-field-error-text {
  position: initial;
}

/* ------ Custom radio button ------  */
.cc-custom-radio-wrapper {
  display: inline-block;
  position: relative;
}

.cc-custom-radio-wrapper input {
  position: absolute;
  opacity: 0;
  display: none;
}

.cc-custom-radio-wrapper label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  order: 1;
}

.cc-custom-radio-wrapper input + label:before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px solid #9C9E9F;
  border-radius: 50%;
  order: 2;
}

.cc-custom-radio-wrapper input:checked + label:before {
  border: 1px solid #199C69;
}

.cc-custom-radio-wrapper input:checked + label:after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #199C69;
  border-radius: 50%;
  order: 2;
  position: absolute;
  right: 3px;
}
/* ------ Custom radio button ------  */


/* ------ Custom checkbox ------  */
.cc-checkbox-wrapper.cc-field-error .cc-field-error-text {
    position: initial;
}
/* ------ Custom checkbox ------  */

/* ---------------------------------------------------------------------------------------- */

.cc-logo {
  background-color: #fff;
}

.cc-logo-container {
  position: relative;
}

.cc-logo-container::before {
  content: "";
  display: block;
  background-color: #fff;
  height: 16px;
}

.cc-logo-main, .cc-logo-tab {
  display: inline-block;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translate(-50%, 0);
}

.cc-logo-main {
  width: 90px;
  height: 22.5px;
  z-index: 2;
  top: 29px;
}

.cc-logo-tab {
  width: 173.3px;
  height: 48px;
  z-index: 1;
}

.cc-card {
  padding: 2rem;
  border-radius: 1rem;
  background: var(--Off-white, #F4F4F4);
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

/* 
  Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {}

/* 
  Medium devices (tablets, 768px and up) 
*/
@media (min-width: 768px) {
  .cc-logo-main, .cc-logo-tab {
    display: inline-block;
    position: absolute;
    left: 37.3px;
    transform: none;
  }

  .cc-logo-main {
    left: 79.3px;
  }
  
}

/* 
  Large devices (desktops, 992px and up)
*/
@media (min-width: 992px) {

}


/* 
  Extra large devices (large desktops, 1200px and up)
*/
@media (min-width: 1200px) {

}

/* Status page CSS start */
community_layout-simple-theme-layout header {
  display: none !important;
}

community_layout-simple-theme-layout footer {
  display: none !important;
}

.cc-status-page-container {
  display: flex;
  height: calc(100vh - 62px);
  padding: 0 32px;
  gap: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-size: cover;
  background-position: center center;
}

.cc-status-page-row {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
}

.cc-status-page-row-item {
  height: 63px;
  width: 77px;
  opacity: 0.2;
}

.cc-padding-left {
  padding-left: 70px;
}

.cc-padding-right {
  padding-right: 70px;
}

.cc-status-page-body {
  display: flex;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex-shrink: 0;
}

.cc-status-page-content {
  display: flex;
  align-items: center;
  gap: 32px;
}

.cc-status-page-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}

.cc-status-page-title {
  color: var(--Dark, #55555A);
  font-size: 32px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.5px;
}

.cc-status-page-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.cc-status-page-details-title {
  color: var(--Black, #313135);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.25px;
  align-self: stretch;
}

.cc-status-page-details-subtitle {
  color: var(--Black, #313135);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.cc-status-page-details-subtitle a {
  color: var(--Black, #313135) !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-decoration-line: underline !important;
}

/* Desktop specific styles */
@media (min-width: 992px) {
  .cc-status-page-container {
      padding: 0;
  }

  .cc-status-page-body {
      padding: 10px;
      align-items: center;
      flex-direction: initial;
      gap: 32px;
      flex-shrink: 0;
  }
  
  .cc-status-page-title {
      font-size: 48px;
      font-weight: 700;
      line-height: 36px;
      letter-spacing: 0;
  }

  .cc-status-page-details-title {
      font-size: 24px;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: -0.25px;
  }
}

/* Status page CSS end */
