body.page--user-password form.user-pass,
body.page--user-login form.user-login-form {
  width: 30%;
  margin: auto;
}
body.page--user-login form.user-login-form .form-item {
  margin-bottom: 30px;
  position: relative;
}
body.page--user-password form.user-pass label,
body.page--user-login form.user-login-form label {
  display: block;
  margin-bottom: 5px;
}

select {
  appearance: none;
  max-width: 100%;
  width: 100%;
  color: var(--color-functional-black);
}

select option[value=""],
select:invalid {
  color: var(--color-functional-500);
}

.label-description {
  padding-top: 1px;
}

input:not([type="image"], [type="range"], [type="checkbox"], [type="radio"], [type="submit"]),
.select2-container,
select {
  height: 2.5rem;
  padding: 0.25rem 1rem 0.5rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
  border: 1px solid var(--color-functional-100);
  font-size: var(--font-body-large);
  line-height: 1.5;
  background-color: #fff;
  font-family: var(--text-font);
  max-width: 100%;
}

.select2-container.select2-container--open {
  z-index: 2000;
}

body .ui-widget input {
  font-family: var(--text-font);
}

.select2-container:has(.select2-selection--multiple) {
  height: auto;
  min-height: 2.5rem;
}

form .select2-container .select2-selection--multiple {
  border: 0;
}

form .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-functional-black);
}

form .select2-container--default .select2-selection--single .select2-selection__rendered[title^="-"],
form .select2-container--default .select2-selection--single .select2-selection__rendered[title^=" -"] {
  color: var(--color-functional-500);
}
form .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  font-size: var(--font-body-small);
  padding-left: 0;
  display: block;
  padding-bottom: 3px;
}

.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
  min-width: 10rem;
  border: 1px solid var(--color-functional-300);
  padding: 5px;
  display: block;
  box-sizing: content-box;
  font-size: var(--font-body-medium);
  line-height: 1.3;
  color: var(--color-functional-black);
}

.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
  color: var(--color-functional-500);
  font-size: var(--font-body-medium);
}

/** @todo just overiden module ccs **/
body .givaudan-layout-column .webform-submission-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 100%;
  font-size: var(--font-body-large);
  line-height: 28px;
  padding-top: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
  background-color: var(--color-50);
  color: var(--color-500);
  border-color: var(--color-700);
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: flex;
  align-items: center;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right: 0;
  position: static;
  margin-right: 0;
  color: var(--color-800);
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background-color: transparent;
  color: var(--color-functional-black);
}

.select2-selection__choice__remove span {
  display: none;
}

.select2-selection__choice__remove::before {
  font-family: "Material Symbols Outlined";
  content: "close";
  height: 100%;
  display: block;
}

body .ui-widget textarea,
textarea {
  padding: 0.25rem 1rem 0.5rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
  border: 1px solid var(--color-functional-100);
  font-size: var(--font-body-large);
  line-height: 1.5;
  background-color: #fff;
  font-family: var(--text-font);
}

body .ui-widget textarea:focus,
textarea:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-500);
  outline: none;
}

body .ui-widget textarea:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  box-shadow: none;
}

form .select2-container .select2-selection--single .select2-selection__rendered {
  height: 100%;
}

form .select2-container .select2-selection--single {
  border: 0;
}

form .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
}

.select2-container .select2-selection .select2-selection__arrow {
  display: none;
}

.select-wrapper::after {
  font-family: "Material Symbols Outlined";
  content: "arrow_drop_down";
  color: var(--color-functional-300);
  font-size: 1.5rem;
}

.select-wrapper {
  position: relative;
}

.select-wrapper select {
  padding-right: 2rem;
}

.select-wrapper::after {
  position: absolute;
  right: 0.25rem;
  top: 0;
  bottom: 0;
  display: grid;
  place-content: center;
}

.select-wrapper:has([aria-expanded="true"]) {
  content: "cancel";
}

input:not([type="image"], [type="range"], [type="checkbox"], [type="radio"], [type="submit"]):focus,
.select2-container:focus,
select:focus {
  border: 1px solid var(--color-functional-500);
  outline: none;
}

input:not([type="image"], [type="range"], [type="checkbox"], [type="radio"], [type="submit"])::placeholder,
select::placeholder {
  font-size: var(--font-body-large);
  line-height: 1.5;
  color: var(--color-functional-500);
}

form label {
  font-size: var(--font-body-medium);
  margin-bottom: 2px;
  line-height: 1.3;
  display: block;
}

form .form-type-checkbox label {
  font-size: 1rem;
}

form .webform-options-display-two-columns .form-type-checkbox label,
#main-content .form-type-radio .label-description .description,
#main-content .form-type-checkbox .label-description .description,
.form-type-select .label-description .description {
  font-size: var(--font-body-medium);
  color: var(--color-functional-700);
  font-weight: 400;
  font-family: var(--text-font);
  margin-left: 0;
}

/* @todo should we force this or chanage on the webform */
.form-type-radio .description strong,
.form-type-checkbox .description strong {
  font-family: var(--text-font);
}

.label-description label.visually-hidden + .description .info {
  display: none;
}

.description .info svg {
  position: relative;
  top: 3px;
}

.label-description .description > div {
  display: inline;
}

.page-node-type-webform .form-type-checkbox input,
.form-type-checkbox input {
  display: grid;
  place-content: center;
}

input[type="checkbox"] {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.125rem;
  border: 1px solid var(--color-functional-black, #0b1215);
  cursor: pointer;
  min-width: 1.125rem;
  margin-top: 5px;
  background-color: #fff;
  display: grid;
  place-content: center;
}

.webform-options-display-two-columns input[type="checkbox"] {
  margin-top: 0;
}

.webform-options-display-two-columns div.form-item.form-type-checkbox {
  margin-bottom: 0.25rem;
}

input[type="checkbox"]:checked {
  background-color: var(--color-700);
  border-color: var(--color-700);
  position: relative;
}

input[type="checkbox"]:checked::before {
  font-family: "Material Symbols Outlined";
  content: "check_small";
  color: #fff;
  font-size: 1.125rem;
}

.form-type-radio .label-description .description,
.form-type-checkbox .label-description .description {
  margin-left: 0;
}

.js-form-item.form-item.js-form-type-processed-text.form-type-processed-text.js-form-item-.form-item- label {
  display: none;
}

.givaudan-webform-modal [id^="edit-required"] *,
.givaudan-webform-modal [id^="edit-required"] {
  font-size: var(--font-body-small);
  line-height: var(--line-height-small);
}

form .form-item input.error,
form .form-item textarea.error,
form .form-item select.error,
form .form-item select.error + .select2-container {
  border: 1px solid var(--color-error-500);
}

form .form-item:has(.error) {
  position: relative;
}

.form-type-checkbox {
  display: flex;
  gap: 0.625rem;
}

form .form-item:has(.error):not(.form-type-checkbox, .form-type-tel)::after,
form .form-item textarea.error::after,
form .form-item select.error::after {
  font-family: "Material Symbols Outlined";
  content: "error";
  color: var(--color-error-500);
  font-size: 1.125rem;
  position: absolute;
  right: 1rem;
  top: 0.75rem;
  bottom: 0;
  margin: auto;
  height: 1rem;
}

/** MODAL **/

.givaudan-webform-modal #drupal-modal {
  min-height: 100%;
  max-height: 100% !important;
  overflow-y: hidden;
  --gin-bg-layer: var(--color-functional-50);
}

.givaudan-webform-modal .ui-dialog-buttonpane {
  --gin-bg-app: var(--color-functional-50);
}

/** @todo data-once is always added is this what is suposed to be targeting **/
body .givaudan-webform-modal.ui-dialog,
body .ui-widget.ui-widget-content[data-once="subscription-box-modal"] {
  background-color: var(--color-functional-50);
  z-index: 2000;
  max-height: calc(var(--doc-height, 100vh) - 2rem);
  overflow-y: auto;
  top: 1rem;
}

.givaudan-webform-modal.ui-dialog:not(.givaudan-webform-modal-confirmation) .ui-dialog-titlebar {
  min-height: 2.5rem;
  border: 0;
  background-color: transparent;
}

.givaudan-webform-modal.ui-dialog:not(.givaudan-webform-modal-confirmation) .ui-dialog-title {
  display: none;
}

.ui-dialog.givaudan-webform-modal-confirmation .ui-dialog-content {
  background-color: #fff;
}

.ui-dialog.givaudan-webform-modal-confirmation button.ui-dialog-titlebar-close {
  top: 1rem;
}

.givaudan-webform-modal .webform-ajax-form-wrapper {
  max-width: 320px;
  margin: auto;
}

.givaudan-webform-modal .webform-submission-form input:not(.form-checkbox, .form-radio, .form-submit, .select2-search__field),
.webform-submission-form input:not(.form-checkbox, .form-radio, .form-submit, .select2-search__field) {
  width: 100%;
}

.givaudan-webform-modal.ui-dialog .ui-dialog-buttonpane {
  border: 0;
  background-color: transparent;
  padding: 1rem;
  width: 100%;
  text-align: center;
  border-top: 0.0625rem solid var(--color-functional-100);
  box-sizing: border-box;
}

.givaudan-webform-modal .description {
  color: var(--color-functional-700, #595959);
  font-size: var(--font-body-medium, 0.875rem);
}

body .ui-widget {
  font-family: var(--text-font);
}

.ui-dialog .ui-dialog-titlebar {
  position: relative;
}

.ui-dialog input[type="checkbox"] {
  margin-bottom: 0;
}

.ui-dialog button.ui-dialog-titlebar-close {
  position: absolute;
  right: 1rem;
  top: 1.5rem;
  transform: none;
  text-indent: 0;
}

body .givaudan-webform-modal.ui-dialog .ui-dialog-titlebar .ui-button .ui-icon-closethick,
body .ui-dialog .ui-dialog-titlebar .ui-button .ui-icon-closethick {
  background-image: none;
  width: auto;
  height: auto;
}

body .givaudan-webform-modal.ui-dialog .ui-dialog-titlebar .ui-button::after {
  content: "cancel";
  font-family: "Material Symbols Outlined";
  font-size: 1.5rem;
  color: var(--color-functional-black);
  display: block;
  line-height: 1;
}

body .givaudan-webform-modal.ui-dialog .ui-dialog-titlebar .ui-button:hover::after {
  color: var(--color-700);
}

.ui-widget-content .webform-submission-form a {
  color: var(--color-700);
}

body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none;
  display: block;
}

body .select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
  border: 0;
}

.webform-submission-webform-12686-form .js-form-item-to {
  display: none;
}

.webform-submission-opened .ui-widget-overlay {
  background: var(--color-functional-500);
  z-index: 1000;
}

.webform-submission-opened .select2-container--open {
  z-index: 3000;
}

body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body .select2-container--default .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
  background-color: var(--color-700);
}

body .select2-container--default .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option--selected {
  background-color: var(--color-functional-100);
}

@media (width > 767px) and (height > 499px) {
  .givaudan-webform-modal.ui-dialog {
    width: 430px !important;
    overflow-x: clip;
    overflow-y: auto;
    max-height: 100%;
  }
}

/** WIDE AND OVER **/
@media screen and (min-width: 1921px) {
  input:not([type="image"], [type="range"], [type="checkbox"], [type="radio"], [type="submit"]),
  .select2-container,
  select {
    height: 3.75rem;
    padding: 0.375rem 1.5rem 0.75rem;
  }

  .select2-container:has(.select2-selection--multiple) {
    min-height: 3.75rem;
  }
}
/** END WIDE AND OVER **/

/** 4k **/
@media screen and (min-width: 3441px) {
  input:not([type="image"], [type="range"], [type="checkbox"], [type="radio"], [type="submit"]),
  .select2-container,
  select {
    height: 5.625rem;
    padding: 0.5625rem 2.25rem 1.125rem;
  }

  .select2-container:has(.select2-selection--multiple) {
    min-height: 5.625rem;
  }
}
/** END 4k **/