.container {
  width: unset;
}

@font-face {
  font-family: "TCCC-UnityText-Regular";
  src: url("https://www.coca-colalens.com/assets/fonts/TCCC-UnityText-Regular.ttf")
   format("truetype");
  font-weight: normal;
  font-style: normal;
 }
 
 .cmp-form-panel {
  margin-top: 50px;
 
  @media screen and (min-width: 705px) {
   margin-top: 100px;
  }
 }
 
 .cmp-form-content .cmp-form-field-container .guideGridFluidLayout2Container {
  display: block;
 
  @media screen and (min-width: 705px) {
   align-items: flex-end;
   display: flex;
  }
 }
 
 .cmp-form-content .guideSeparator {
  border: none;
  height: 64px;
  margin: 0 16px;
  position: relative;
 }
 
 .cmp-form-content .guideSeparator::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
   to right,
   #f40000,
   #ff5a00,
   #ff8700,
   #ffb400,
   #78e6a0,
   #82e1ff
  );
  margin: 32px 0;
 }
 
 .cmp-form-content
  div[id^="guideContainer-rootPanel-panel"]
  .guidefield
  :is(.guideTextBox, .guideCheckbox, .guideDropDownList, .guideButton) {
  border-left-width: 0;
  padding: 0;
  margin: 16px 6px;
 }
 
 .cmp-form-content
  div[id^="guideContainer-rootPanel-panel"]
  .guidefield
  .guideButton {
  margin: 0;
 }
 
 .cmp-form-content .guideFieldError {
  font-family: "TCCC-UnityText-Regular";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  padding: 8px 0 0 0;
 }
 
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart) {
  background-color: transparent;
  border: none;
 }
 
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  select,
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  input,
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  textarea {
  background-color: #fff3f3;
  border-color: #c30007;
 }
 
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  select:hover,
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  input:hover,
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  textarea:hover {
  box-shadow: 2px 2px 4px 0px #cf0000;
 }
 
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  select:focus,
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  input:focus,
 .cmp-form-content
  .guideFieldNode.validation-failure:not(.guideButton, .guideTextDraw, .guideChart)
  .guideFieldWidget
  textarea:focus {
  outline: 0;
  box-shadow: 2px 2px 4px 0px #cf0000;
 }
 
 .cmp-form-content
  .guideFieldNode.validation-success:not(.guideButton, .guideTextDraw, .guideChart) {
  border: none;
 }
 
 .cmp-form-content .guideFieldLabel label {
  color: #000000;
  font-family: "TCCC-UnityText-Regular";
  font-size: 16px;
  margin-bottom: 8px;
 }
 
 .cmp-form-content .guideRadioButtonItem {
  align-items: center;
  display: flex;
  gap: 12px;
  width: fit-content;
 }
 
 .cmp-form-content .guideCheckBox {
  font-family: "TCCC-UnityText-Regular";
 }
 
 .cmp-form-content .guideCheckBox .guideWidgetLabel label {
  color: #000000;
 }
 
 .cmp-form-content .guideCheckBox input[type="radio"] {
  appearance: none;
  background-color: #ffffff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 24px;
  height: 24px;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  display: grid;
  place-content: center;
 }
 
 .cmp-form-content .guideCheckBox input[type="radio"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
 }
 
 .cmp-form-content .guideCheckBox input[type="radio"]:checked::before {
  box-shadow: inset 1em 1em #000000;
 }
 
 .cmp-form-content .guideCheckBoxItem {
  display: flex;
  flex-direction: row;
 
  input {
   border: 2px solid black;
   box-shadow: none;
   background: transparent;
   height: 22px;
   width: 22px;
   position: relative;
   margin-right: 15px;
  }
 }
 
 .cmp-form-content .guideWidgetLabel > label {
  display: block;
 
  > p {
   line-height: 22px;
   padding: 0;
   margin: 0 0 15px 0;
   color: black;
   font-size: 16px;
  }
 }
 
 .cmp-form-content p {
  color: black;
 }
 
 .guideCheckBoxItem .guideFieldWidget input[type="checkbox"] {
  border: 2px solid black;
  border-radius: 3px;
  background: transparent;
  height: 22px;
  width: 22px;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
 }
 
 .guideCheckBoxItem .guideFieldWidget input[type="checkbox"]:checked {
  background: transparent;
  border: 2px solid black;
  position: relative;
 }
 
 .guideCheckBoxItem .guideFieldWidget input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
 }
 
 .cmp-form-content .textField input,
 .cmp-form-content .dateTimeEdit input,
 .cmp-form-content .textField textarea,
 .cmp-form-content .dropDownList select {
  border: 2px solid #6e6e6e;
  border-radius: 10px;
  font-family: "TCCC-UnityText-Regular";
  height: 56px;
  font-size: 16px;
  padding: 10px 24px;
 }
 
 .cmp-form-content .dropDownList select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.6757 8.26285C19.0828 8.63604 19.1103 9.26861 18.7371 9.67573L13.1392 15.7825C12.5267 16.4508 11.4733 16.4508 10.8608 15.7825L5.26284 9.67573C4.88965 9.26861 4.91715 8.63604 5.32427 8.26285C5.73139 7.88966 6.36396 7.91716 6.73715 8.32428L12 14.0656L17.2628 8.32428C17.636 7.91716 18.2686 7.88966 18.6757 8.26285Z' fill='black'/%3E%3C/svg%3E");
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-size: 24px;
 }
 
 .cmp-form-content .textField.multiline textArea {
  height: 170px;
 }
 
 .cmp-form-content .textField input::placeholder,
 .cmp-form-content .textField textarea::placeholder,
 .cmp-form-content .dropDownList select::placeholder {
  color: #9b9b9b;
 }
 
 .cmp-form-content .textField input:hover,
 .cmp-form-content .textField textarea:hover,
 .cmp-form-content .dropDownList select:hover {
  background-color: #f5f5f5;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
 }
 
 .cmp-form-content .textField input:focus,
 .cmp-form-content .dateTimeEdit input:focus,
 .cmp-form-content .textField textarea:focus,
 .cmp-form-content .dropDownList select:focus {
  border: 5px solid #0500f4;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
  outline: 0;
 }
 
 .guideFieldButtonWidget {
  display: flex;
  justify-content: center;
 }
 
 .button-primary button.button-default {
  background-color: #ffffff;
  border: 2px solid #000000;
  border-radius: 40px;
  color: #000000;
  font-family: "TCCC-UnityText-Regular";
  font-size: 16px;
  padding: 10px 24px;
  font-weight: 800;
  line-height: 100%;
  text-transform: capitalize;
 }
 
 .button-primary button.button-default:hover {
  background-color: #ffffff;
  color: #6e6e6e;
 }
 
 .button-primary button.button-default:focus {
  outline: 2px solid #0500f4;
 }
 
 .backhome_button {
  margin-top: 24px;
 }
 
 .lens-form-success-text p,
 .lens-form-error-text p {
  color: #000;
  text-align: center;
  font-family: "TCCC-UnityText-Regular";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
 }
 
 .step.mobileLayout {
  display: none;
 }