/* modal-start */
html.modal__open {
  overflow: hidden;
}
html.modal-open {
  overflow: hidden;
}
.modal__wrapper__SD {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1199px) {
  .modal__wrapper__SD {
    z-index: 99999;
  }
}
.modal__wrapper__SD.verticalCenterModal {
  align-items: center !important;
}
.modal__wrapper__SD:not(.simpleModal),
.modal__wrapper__SD:not(.alertTypeModal) {
  align-items: flex-start;
}
.modal__wrapper__SD:not(.simpleModal) .modal__body,
.modal__wrapper__SD:not(.alertTypeModal) .modal__body {
  max-height: calc(100dvh - 110px);
}
.modal__wrapper__SD .modal__overlay__SD {
  pointer-events: none;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 100vh;
  width: 100vw;
  background-color: #00000033;
}
.modal__wrapper__SD .modal__overlay__SD:is(.dark *) {
  background-color: #ffffff1a;
  --tw-backdrop-blur: blur(15px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.modal__wrapper__SD .modal__content__wrapper {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% - 30px);
  background-color: var(--bgWhiteSD);
  animation-name: modalAnimation;
  animation-duration: 0.3s;
}
@keyframes modalAnimation {
  from {transform:translateY(-110%);}
  to {transform:translateY(0%);}
}
.modal__wrapper__SD.modalRightSlideAnimation {
  justify-content: flex-end;
}
.modal__wrapper__SD.modalRightSlideAnimation .modal__content__wrapper {
  margin-left: auto;
  margin-right:0px;
  animation-name: modalRightLeftAnimation;
  animation-duration: 0.5s;
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.customerReturnCreateModal .modal__content__wrapper {
  display: flex;
  height: 100dvh;
  flex-direction: column;
}
.modal__wrapper__SD.customerReturnCreateModal .modal__body {
  max-height: none !important;
  min-height: 0px;
  flex: 1 1 0%;
  overflow-y: auto;
}
.modal__wrapper__SD.customerReturnCreateModal .modal__footer {
  flex-shrink: 0;
}
.modal__wrapper__SD.customerReturnInspectModal .modal__content__wrapper {
  display: flex;
  max-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  border-width: 1px;
  border-color: var(--lightBorderSD);
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.customerReturnInspectModal .modal__header {
  height: 56px !important;
  flex-shrink: 0;
  background-color: var(--bgWhiteSD);
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.modal__wrapper__SD.customerReturnInspectModal .modal__header .title {
  padding-right: 0px !important;
  font-family: Matter-Medium !important;
  font-size: 22px !important;
  line-height: 28px !important;
}
.modal__wrapper__SD.customerReturnInspectModal .modal__body {
  max-height: none !important;
  min-height: 0px;
  flex: 1 1 0%;
  overflow-y: auto;
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.modal__wrapper__SD.customerReturnInspectModal .modal__footer {
  height: 53px;
  flex-shrink: 0;
  background-color: var(--bgWhiteSD);
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.modal__wrapper__SD.customerReturnInspectModal .modal__footer .button__SD {
  margin-left: 0px !important;
  height: 33px !important;
}
@keyframes modalRightLeftAnimation {
  from {transform:translateX(110%);}
  to {transform:translateX(0%);}
}

.activityEntityModal .modal__footer {
  position: relative;
  z-index: 10;
  justify-content: flex-start !important;
}

 .activityEntityModal .modal__content__wrapper , .activityEntityModal .modal__body , .activityEntityModal .activityEntityModalWrapper , .activityEntityModal .left__form__wrapper , .activityEntityModal .right__calendar {
  height: 100%;
}
.modal__wrapper__SD .modal__header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-color: var(--lightBorderSD);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
}
.modal__wrapper__SD .modal__header .title {
  word-break: break-all;
  padding-right: 12px;
  font-family: Matter-Medium;
  font-size: 20px;
  line-height: 28px;
  color: var(--textDark);
}
.modal__wrapper__SD .modal__header .modal__close__btn {
  position: relative;
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  border-radius: 5px;
  padding: 5px;
  font-size: 0px;
}
.modal__wrapper__SD .modal__header .modal__close__btn:hover {
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD .modal__body {
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
}
.modal__wrapper__SD .modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  background-color: var(--bgSurface);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
}
.modal__wrapper__SD .modal__footer .button__SD {
  margin-left: 10px;
}
.modal__wrapper__SD .modal__footer .button__SD:first-child {
  margin-left: 0px;
}

.modal__wrapper__SD.fullScreenModal .modal__content__wrapper {
  width: 100vw !important;
  max-width: 100vw !important;
  border-radius: 0px;
}

/* modal with footer css start */
.modal__wrapper__SD.customFooter__modal .modal__body {
  max-height: unset;
  overflow-y: visible;
  padding: 0px;
}
.modal__wrapper__SD.customFooter__modal .cs__scrollWrapper {
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.modal__wrapper__SD.customFooter__modal .customFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
}
/* modal with footer css end */

/* simple modal css start */
.modal__wrapper__SD.simpleModal {
  align-items: center;
}
.modal__wrapper__SD.simpleModal .modal__header .modal__close__btn:hover {
  background-color: var(--bgSurface);
}
.modal__wrapper__SD.simpleModal .modal__content__wrapper {
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--bgWhiteSD);
  --tw-shadow: var(--dropdownShadow);
  --tw-shadow-colored: var(--dropdownShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal__wrapper__SD.simpleModal .modal__content__wrapper:is(.dark *) {
  --tw-shadow: var(--dropdownShadow);
  --tw-shadow-colored: var(--dropdownShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal__wrapper__SD.simpleModal .modal__header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-width: 0px;
  border-style: none;
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.simpleModal .modal__header:is(.dark *) {
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.simpleModal .modal__body {
  border-radius: 16px;
  padding-top: 7px;
  padding-bottom: 18px;
}
.modal__wrapper__SD.simpleModal .modal__footer {
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  background-color: transparent;
}
.modal__wrapper__SD.simpleModal .modal__footer:is(.dark *) {
  background-color: var(--bgWhiteSD);
}

/* Floor Plan View Controls keeps its shared-Modal header/footer visible while
 * the feature-owned content scroller moves independently. */
.modal__wrapper__SD.floorPlanViewControlsModal .modal__content__wrapper {
  display: flex;
  flex-direction: column;
  height: 84vh;
  max-height: 84vh;
}

.modal__wrapper__SD.floorPlanViewControlsModal .modal__header,
.modal__wrapper__SD.floorPlanViewControlsModal .modal__footer {
  flex: 0 0 auto;
}

.modal__wrapper__SD.floorPlanViewControlsModal .modal__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.modal__wrapper__SD.simpleModal .modal__header .modal__close__btn:hover {
  background-color: var(--bgSurface);
}
.modal__wrapper__SD.simpleModal .modal__footer {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 32px);
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
}
.modal__wrapper__SD.simpleModal .modal__footer:is(.dark *) {
  border-top-color: var(--light-border-100);
}

.modal__wrapper__SD.simpleModal.customFooter__modal .modal__body {
  padding-top: 0px;
  padding-bottom: 0px;
}
.modal__wrapper__SD.simpleModal.customFooter__modal .cs__scrollWrapper {
  max-height: calc(100dvh - 160px);
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.modal__wrapper__SD.simpleModal.customFooter__modal .customFooter {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 32px);
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  padding-top: 16px;
  padding-bottom: 16px;
}
/* simple modal css end */

/* alertType modal css start */
.modal__wrapper__SD.alertTypeModal {
  align-items: center;
}
.modal__wrapper__SD.alertTypeModal .modal__header .modal__close__btn:hover {
  background-color: var(--bgSurface);
}
.modal__wrapper__SD.alertTypeModal .modal__content__wrapper {
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--bgWhiteSD);
  --tw-shadow: var(--dropdownShadow);
  --tw-shadow-colored: var(--dropdownShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal__wrapper__SD.alertTypeModal .modal__content__wrapper:is(.dark *) {
  --tw-shadow: var(--dropdownShadow);
  --tw-shadow-colored: var(--dropdownShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal__wrapper__SD.alertTypeModal .modal__header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-width: 0px;
  border-style: none;
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.alertTypeModal .modal__header:is(.dark *) {
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.alertTypeModal .modal__body {
  border-radius: 16px;
  padding-top: 7px;
  padding-bottom: 18px;
}
.modal__wrapper__SD.alertTypeModal .modal__footer {
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  background-color: transparent;
}
.modal__wrapper__SD.alertTypeModal .modal__footer:is(.dark *) {
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.alertTypeModal .modal__header .modal__close__btn:hover {
  background-color: var(--bgSurface);
}
.modal__wrapper__SD.alertTypeModal .modal__footer {
  width: 100%;
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  background-color: var(--bgSurface);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
}

.modal__wrapper__SD.alertTypeModal.customFooter__modal .modal__body {
  padding-top: 0px;
  padding-bottom: 0px;
}
.modal__wrapper__SD.alertTypeModal.customFooter__modal .cs__scrollWrapper {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.modal__wrapper__SD.alertTypeModal.customFooter__modal .customFooter {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
}
/* alertType modal css end */


/* alertType modal css start */
.modal__wrapper__SD.alertTypeModal .modal__header .modal__close__btn:hover {
  background-color: var(--bgSurface);
}
.modal__wrapper__SD.alertTypeModal .modal__content__wrapper {
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--bgWhiteSD);
  --tw-shadow: var(--dropdownShadow);
  --tw-shadow-colored: var(--dropdownShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal__wrapper__SD.alertTypeModal .modal__content__wrapper:is(.dark *) {
  --tw-shadow: var(--dropdownShadow);
  --tw-shadow-colored: var(--dropdownShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal__wrapper__SD.alertTypeModal .modal__header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-width: 0px;
  border-style: none;
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.alertTypeModal .modal__header:is(.dark *) {
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.alertTypeModal .modal__body {
  border-radius: 16px;
  padding-top: 7px;
  padding-bottom: 18px;
}
.modal__wrapper__SD.alertTypeModal .modal__footer {
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  background-color: transparent;
}
.modal__wrapper__SD.alertTypeModal .modal__footer:is(.dark *) {
  background-color: var(--bgWhiteSD);
}
.modal__wrapper__SD.alertTypeModal .modal__header .modal__close__btn:hover {
  background-color: var(--bgSurface);
}
.modal__wrapper__SD.alertTypeModal .modal__footer {
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  background-color: var(--bgSurface);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.modal__wrapper__SD.alertTypeModal.customFooter__modal .customFooter {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 32px);
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  padding-top: 16px;
  padding-bottom: 16px;
}
.modal__wrapper__SD.activityEntityModal .modal__body {
  max-height: calc(100dvh - 110px);
}
/* alertType modal css end */

/* modal-end */

/* Phone width (phone_modal_fit gate puts .phone-modal-fit on <body>, see
   apps/frontend Layout): wrap modal titles at word boundaries instead of
   break-all, which split words one letter per line on narrow screens. */
@media (max-width: 767px) {
  body.phone-modal-fit .modal__wrapper__SD .modal__header .title {
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* STATSIG_FEATURE_NAMES.PROPOSAL_EDITOR_STABLE_CLICK_TARGETS (N1, ON only):
   small Option Name dialogs stay pinned after open. A vertically-centred
   dialog re-centres on every height change, moving the name input out from
   under the pointer; top-anchoring (like the app's default modal style)
   lets late content grow downward instead, and the enter slide is off so
   the input never moves under an immediate click. OFF = today's centred
   simpleModal (this class is absent, no existing selector touched). */
.modal__wrapper__SD.proposal-stable-click-targets {
  align-items: flex-start;
}
.modal__wrapper__SD.proposal-stable-click-targets .modal__content__wrapper {
  margin-top: 12vh;
  animation: none;
}
.field__wrapper {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
}
.field__wrapper .helper__text {
  margin-top: 6px;
  font-family: Biotif-Regular;
  font-size: 14px;
  line-height: 20px;
  color: var(--textTertiary);
}

.label__SD {
  margin-bottom: 5px;
  display: flex;
  width: 100%;
  align-items: center;
  font-family: Matter-Regular;
  font-size: 14px;
  color: var(--textSecondary);
}
.label__SD .label__text {
  max-width: calc(100% - 36px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
.label__SD.importantField {
  position: relative;
  padding-left: 13px;
}
.label__SD.importantField::before {
  position: absolute;
  top: 5px;
  left: 0px;
  height: 6px;
  width: 6px;
  border-radius: 9999px;
  background-color: var(--warningSD);
  --tw-content: '';
  content: var(--tw-content);
}
.label__SD .i__Icon {
  margin-right: 6px;
  height: 16px;
  width: 16px;
}
.label__SD .i__Icon svg {
  fill: var(--iconColorSD);
}
.label__SD .i__Icon.i__IconAnimated svg *[stroke] {
  stroke: var(--iconColorSD);
}
.label__SD .i__Icon.i__IconAnimated svg *[fill] {
  fill: var(--iconColorSD);
}
.label__SD .avatar__Img {
  position: relative;
  top: -2px;
  margin-right: 7px;
  height: 18px;
  width: 18px;
}
.label__SD .avatar__Img > .inner__wrapper {
  border-radius: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.label__SD .required__sign {
  margin-left: 4px;
  display: inline-block;
  color: var(--dangerSD);
}

.field__wrapper .field__inner__wrapper {
  position: relative;
}
.field__wrapper .field__inner__wrapper.textarea {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 1px;
  /* @apply rounded-[10px] overflow-hidden p-[1px]; */
}
.field__wrapper .field__has__icon > .i__Icon:not(.editBtn) {
  position: absolute;
  top: 9px;
  left: 10px;
  z-index: 2;
  height: 22px;
  width: 22px;
}
.field__wrapper .field__has__icon .drag-handle .i__Icon {
  position: static;
}
.search__wrapper .field__wrapper .field__has__icon .i__Icon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  height: 14px;
  width: 14px;
}
.field__wrapper .field__has__icon .i__Icon.crossBtn {
  display: none;
}
.field__wrapper .field__has__icon > .avatar__Img {
  position: absolute;
  top: 9px;
  left: 10px;
  z-index: 2;
  height: 22px;
  width: 22px;
}
.field__wrapper .field__has__icon > .avatar__Img > .inner__wrapper {
  border-radius: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.field__wrapper .field__has__icon .textarea__SD ~ .i__Icon {
  top: 7px;
}
.field__wrapper .field__has__icon .i__Icon svg {
  fill: var(--iconColorSD);
}
.field__wrapper .field__has__icon .i__Icon.i__IconAnimated svg *[stroke] {
  stroke: var(--iconColorSD);
}
.field__wrapper .field__has__icon .i__Icon.i__IconAnimated svg *[fill] {
  fill: var(--iconColorSD);
}
.field__wrapper .field__has__icon.icon__right .i__Icon {
  left: unset;
  right: 10px;
}
.field__wrapper .field__has__icon.icon__right .avatar__Img {
  left: unset;
  right: 10px;
}

.field__wrapper.currencyField .field__has__icon .currency__symbol {
  left: 38px;
}

.helper__text.error__text {
  color: var(--dangerSD);
}
.field__wrapper.field__has__error .helper__text {
  color: var(--dangerSD);
}
.field__wrapper.field__has__error .errorIcon {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  display: none !important;
  height: 22px;
  width: 22px;
}
.field__wrapper.field__has__error .field__has__icon .errorIcon {
  left: unset;
}
/* .field__wrapper.field__has__error .field__has__icon.icon__right .i__Icon {
  @apply right-[36px];
} */
.field__wrapper.field__has__error
  .field__has__icon.icon__right
  .i__Icon.errorIcon {
  right: 10px;
}
.field__wrapper.field__has__error .errorIcon svg {
  fill: var(--dangerSD);
}

.helper__text.success__text {
  color: var(--successSD);
}
.field__wrapper.field__has__success .helper__text {
  color: var(--successSD);
}
.field__wrapper.field__has__success .successIcon {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 2;
  display: none !important;
  height: 22px;
  width: 22px;
  padding: 2px;
}
.field__wrapper.field__has__success .field__has__icon .successIcon {
  left: unset;
}
/* .field__wrapper.field__has__success .field__has__icon.icon__right .i__Icon {
  @apply right-[36px];
} */
.field__wrapper.field__has__success
  .field__has__icon.icon__right
  .i__Icon.successIcon {
  right: 10px;
}
.field__wrapper.field__has__success .successIcon svg {
  fill: var(--successSD);
}

.field__wrapper.disable__field__wrapper {
  pointer-events: none;
}
.field__wrapper.disable__field__wrapper .label__SD {
  color: var(--primaryBlackSD200);
}
.field__wrapper.disable__field__wrapper .label__SD .required__sign {
  color: var(--primaryBlackSD200);
}
.field__wrapper.disable__field__wrapper .label__SD .i__Icon svg {
  fill: var(--primaryBlackSD200);
}
.field__wrapper.disable__field__wrapper .label__SD .i__Icon.i__IconAnimated svg *[stroke] {
  stroke: var(--primaryBlackSD200);
}
.field__wrapper.disable__field__wrapper .label__SD .i__Icon.i__IconAnimated svg *[fill] {
  fill: var(--primaryBlackSD200);
}
.field__wrapper.disable__field__wrapper .helper__text {
  color: var(--primaryBlackSD200);
}
.field__wrapper.disable__field__wrapper .field__has__icon .i__Icon svg {
  fill: var(--primaryBlackSD200);
}
.field__wrapper.disable__field__wrapper .field__has__icon .i__Icon.i__IconAnimated svg *[stroke] {
  stroke: var(--primaryBlackSD200);
}
.field__wrapper.disable__field__wrapper .field__has__icon .i__Icon.i__IconAnimated svg *[fill] {
  fill: var(--primaryBlackSD200);
}
/* form-fields-end */

/* innerDropdownField */
.innerDropdownField .mainField__wrapper {
  position: relative;
}
.innerDropdownField .disabled {
  opacity: 0.85;
}
.innerDropdownField .mainField__wrapper .innerDropdownSelect {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  width: 60px;
}
.innerDropdownField .mainField__wrapper .innerDropdownSelect::before {
  position: absolute;
  top: 5px;
  right: -2px;
  height: calc(100% - 12px);
  width: 1px;
  background-color: var(--lightBorderSD);
  --tw-content: '';
  content: var(--tw-content);
}
.merchentDiscount .mainField__wrapper .innerDropdownSelect {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  width: 60px;
}
.merchentDiscount .mainField__wrapper .innerDropdownSelect::before {
  position: absolute;
  top: 5px;
  right: 10px;
  height: calc(100% - 12px);
  width: 1px;
  background-color: var(--lightBorderSD);
  --tw-content: '';
  content: var(--tw-content);
}
.innerDropdownField .mainField__wrapper .innerDropdownSelect .label__SD {
  display: none;
}
.innerDropdownField .innerDropdownSelect .select__SD div[class$='control'],
.innerDropdownField .innerDropdownSelect .select__SD div[class$='control']:hover,
.innerDropdownField .innerDropdownSelect .select__SD .select__SD__control,
.innerDropdownField .innerDropdownSelect .select__SD .select__SD__control:hover {
  min-height: 36px;
  border-color: transparent;
}
.merchentDiscount .innerDropdownSelect .select__SD div[class$='control'],
.merchentDiscount .innerDropdownSelect .select__SD div[class$='control']:hover,
.merchentDiscount .innerDropdownSelect .select__SD .select__SD__control,
.merchentDiscount .innerDropdownSelect .select__SD .select__SD__control:hover {
  min-height: auto;
  border-color: transparent;
  padding-top: 0px;
  padding-right: 48px;
  padding-bottom: 0;
  padding-left: 2px;
}
.innerDropdownField .innerDropdownSelect .select__SD div[class$='ValueContainer'],
.innerDropdownField .innerDropdownSelect .select__SD .select__SD__value-container {
  height: 27px;
  line-height: 27px;
}
.innerDropdownField .innerDropdownSelect .select__SD div[class$='indicatorContainer']:last-child,
.innerDropdownField .innerDropdownSelect .select__SD .select__SD__indicator-separator:last-child {
  height: 7px;
  width: 11px;
}
.innerDropdownField .innerDropdownSelect .select__SD div[class$='indicatorContainer']:last-child::before,
.innerDropdownField .innerDropdownSelect .select__SD .select__SD__indicator-separator:last-child::before {
  top: 0px;
  left: 0px;
  height: 0px;
  width: 0px;
  --tw-translate-x: 0px;
  --tw-translate-y: 0px;
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0px;
  border-width: 5px;
  border-top-width: 6px;
  border-color: transparent;
  border-top-color: var(--iconColorSD);
  background-color: transparent;
}
.innerDropdownField .innerDropdownSelect .select__SD div[class$='indicatorContainer']:last-child::after,
.innerDropdownField .innerDropdownSelect .select__SD .select__SD__indicator-separator:last-child::after {
  display: none !important;
}
.innerDropdownField .innerDropdownSelect + .field__wrapper .input__SD {
  padding-left: 80px;
}
.merchentDiscount .innerDropdownSelect + .field__wrapper .input__SD {
  height: 32px;
  padding-left: 60px;
  font-size: 14px;
}
.innerDropdownField .innerDropdownSelect .select__SD .select__SD__menu {
  min-width: 208px;
  --tw-translate-x: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* innerDropdownField end */

/* milestoneTypeDynamicField — DynamicTypeField with type selector disabled (non-clickable).
   Compact height comes from the `merchentDiscount` class applied alongside `innerDropdownField`.
   Keeps the value input (percentage / amount) fully editable. */
.milestoneTypeDynamicField .innerDropdownSelect {
  pointer-events: none;
  opacity: 0.7;
}
.milestoneTypeDynamicField .innerDropdownSelect .select__SD__dropdown-indicator,
.milestoneTypeDynamicField .innerDropdownSelect .select__SD div[class$='indicatorContainer']:last-child::before {
  opacity: 0.4;
}
/* milestoneTypeDynamicField end */

.file__upload__wrapper .upload__btn:hover .button_SD.primary__Btn {
  background-color: var(--primaryColorSD700)
}
/* .fileDropZone__wrapper:not(.fileDropZone__wrapperEtemp) .i__Icon svg{
  @apply fill-[#ffffff];
}
.fileDropZone__wrapper:not(.fileDropZone__wrapperEtemp) .i__Icon.i__IconAnimated svg *[stroke]{
  @apply stroke-[#ffffff];
}
.fileDropZone__wrapper:not(.fileDropZone__wrapperEtemp) .i__Icon.i__IconAnimated svg *[fill]{
  @apply fill-[#ffffff];
} */

.fileDropZone__wrapper.highlight {
  border-color: #b988f1; /* Change to your desired highlight color */
  background-color: #f7effc; /* Change to your desired highlight background color */
}
body .react-datepicker-wrapper input{
  height: 42px;
  width: 100%;
  border-radius: 6px;
  border-width: 1px;
  border-color: var(--lightBorderSD);
  background-color: var(--bgWhiteSD);
  padding-left: 12px;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-right: 34px;
  font-family: Matter-Regular;
  font-size: 16px;
  color: var(--textDark);
}
body .react-datepicker-wrapper input::-moz-placeholder{
  color: var(--textSecondary);
  opacity: 0.6;
}
body .react-datepicker-wrapper input::placeholder{
  color: var(--textSecondary);
  opacity: 0.6;
}
body .react-datepicker-wrapper input:focus{
  border-width: 1px;
  border-color: var(--primaryColorSD);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
body .formPreview__wrapper .react-datepicker-wrapper input:is(.dark *){
  border-color: var(--primaryBlackSD100);
  color: var(--textSecondaryDark);
  border-width: 1px;
  border-color: var(--lightBorderSD);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(88 91 93 / var(--tw-text-opacity, 1));
  --tw-shadow: var(--raiseShadow);
  --tw-shadow-colored: var(--raiseShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
body .field__wrapper .field__has__icon .react-datepicker-wrapper input{
  padding-left: 38px;
}
body
  .field__wrapper
  .field__has__icon.icon__right
  .react-datepicker-wrapper
  input{
  padding-left: 12px;
  padding-right: 64px;
}

/* normal-css */
/*react-datepicker*/
body .react-datepicker-wrapper{
  width: 100%;
}
body .react-datepicker-wrapper ~ .i__Icon.errorIcon{
  display: none;
}
body .react-datepicker{
  z-index: 3;
}
/* arrow */
.react-datepicker-popper{
  z-index:101 !important;
}
.react-datepicker-popper[data-placement^="top"]
  .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="bottom"]
  .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"]
  .react-datepicker__triangle::after,
.react-datepicker-popper[data-placement^="bottom"]
  .react-datepicker__triangle::after {
  left: -28px !important;
}
.react-datepicker-popper[data-placement^="bottom"]
  .react-datepicker__triangle::before {
  top: 0px !important;
  border-bottom-color: var(--lightBorderSD) !important;
}
.react-datepicker-popper[data-placement^="bottom"]
  .react-datepicker__triangle::after {
  border-bottom-color:var(--bgWhiteSD) !important;
  top: 1px !important;
}
.react-datepicker-popper[data-placement^="top"]
  .react-datepicker__triangle::before {
  border-top-color: var(--lightBorderSD) !important;
}
.react-datepicker-popper[data-placement^="top"]
  .react-datepicker__triangle::after {
  border-top-color:var(--bgWhiteSD) !important;
}
/* arrow-end */

.react-datepicker {
  box-shadow: var(--dropdownShadow);
  background-color:var(--bgWhiteSD);
  border:1px solid var(--lightBorderSD) !important;
  border: none;
}
.dark .react-datepicker{
  border:1px solid var(--darkModeBlackSD400) !important;
  background-color:var(--bgWhiteSD) !important;
}
.react-datepicker .react-datepicker__current-month {
  font-family: 'Matter-Medium';
  font-weight: normal;
  font-size: 14px;
  padding-left: 10px;
  padding-right: 50px;
  text-align: left;
  padding-top: 12px;
  padding-bottom: 11px;
  color: var(--textDark);
}
.react-datepicker .react-datepicker__navigation--previous,
.react-datepicker .react-datepicker__navigation--next{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: transparent;
}
.react-datepicker .react-datepicker__navigation--previous:hover,
.react-datepicker .react-datepicker__navigation--next:hover{
  background-color: var(--bgSurface);
}
.react-datepicker .react-datepicker__navigation--next {
  top: 8px;
  right: 10px;
}
.react-datepicker .react-datepicker__navigation--previous {
  top: 8px;
  right: 39px;
  left: unset;
}
.react-datepicker .react-datepicker__navigation--previous span,
.react-datepicker .react-datepicker__navigation--next span {
  display: none;
}
.react-datepicker .react-datepicker__navigation--previous::before,
.react-datepicker .react-datepicker__navigation--next::before{
  content: "";
  position: absolute;
  top: 10px;
  left: 11px;
  width: 8px;
  height: 8px;
  border-left: 1px solid var(--iconColorSD);
  border-bottom: 1px solid var(--iconColorSD);
  transform: rotate(45deg);
}
.react-datepicker .react-datepicker__navigation--next::before {
  transform: rotate(-135deg);
  left: 8px;
}
.react-datepicker .react-datepicker__navigation--previous:hover,
.react-datepicker .react-datepicker__navigation--next:hover {
  background-color:var(--bgSurface);
  box-shadow: unset;
}
.react-datepicker
  .react-datepicker__navigation--previous.react-datepicker__navigation--prev--with-time {
  right: 128px;
}
.react-datepicker
  .react-datepicker__navigation--next.react-datepicker__navigation--next--with-time {
  right: 94px;
}
.react-datepicker .react-datepicker__header {
  padding: 0px;
  background-color: var(--bgWhiteSD);
  border-bottom: none;
}
.react-datepicker .react-datepicker__header .react-datepicker-time__header{
  color:var(--textDark);
}
.react-datepicker .react-datepicker__header__dropdown.react-datepicker__header__dropdown--scroll {
  background-color:transparent;
  padding:5px 10px 7px 10px;
  display:flex;
  justify-content:space-between;
}
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--scroll
  .react-datepicker__month-read-view--selected-month,
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--scroll
  .react-datepicker__year-read-view--selected-year {
  font-family: 'Matter-Regular';
  font-weight: 400;
  font-size: 14px;
  color: var(--textSecondary);
  position: relative;
  top:-2px;
}
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select {
  display: flex;
  background-color: var(--primaryBlackSD200);
}
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select
  .react-datepicker__month-dropdown-container,
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select
  .react-datepicker__year-dropdown-container {
  padding: 0px;
  position: relative;
  height: 35px;
}
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select
  .react-datepicker__month-dropdown-container:before,
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select
  .react-datepicker__year-dropdown-container:before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  transform: translateY(-50%) rotate(-45deg);
  right: 10px;
  width: 7px;
  height: 7px;
  border-left: 1px solid var(--borderBlackSD);
  border-bottom: 1px solid var(--borderBlackSD);
}
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select
  .react-datepicker__month-dropdown-container:before {
  right: 28px;
}
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select
  .react-datepicker__year-dropdown-container:before {
  top: calc(50% - 3px);
  right: 44px;
}
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select
  .react-datepicker__month-dropdown-container
  select,
.react-datepicker
  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--select
  .react-datepicker__year-dropdown-container
  select {
  width: 100%;
  text-align: center;
  background-color: transparent;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 7px 30px 7px 10px;
  font-family: "Biotif-Medium", sans-serif;
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  color: var(--textBlackSD);
}

.react-datepicker .react-datepicker__month-read-view,
.react-datepicker .react-datepicker__year-read-view {
  display: inline-block;
  position: relative;
  padding-right: 14px;
  visibility: visible !important;
}
.react-datepicker .react-datepicker__month-dropdown-container,
.react-datepicker .react-datepicker__year-dropdown-container{
  margin: 0px;
  width:calc(50% - 5px);
  padding: 4px 5px;
  position:relative;
}
.react-datepicker .react-datepicker__month-dropdown-container::before,
.react-datepicker .react-datepicker__year-dropdown-container::before{
  content:"";
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:var(--bgSurface);
  opacity:1;
  border-radius:6px;
}
.react-datepicker .react-datepicker__month-dropdown-container:hover::before,
.react-datepicker .react-datepicker__year-dropdown-container:hover::before{
  opacity:1;
}
.react-datepicker .react-datepicker__month-read-view--down-arrow,
.react-datepicker .react-datepicker__year-read-view--down-arrow {
  border-width: 1px 1px 0 0;
  border-color: var(--iconColorSD) !important;
  top: 4px;
  transform: rotate(135deg);
  width: 7px;
  height: 7px;
  right: 0px;
  position: absolute;
}
.react-datepicker .react-datepicker__month-dropdown,
.react-datepicker .react-datepicker__year-dropdown{
  background-color:var(--bgWhiteSD);
  box-shadow:var(--dropdownShadow);
  border: none;
  border-radius: 0px;
  left: 0px;
  width: 100%;
  top:36px;
  padding: 4px 0px;
  overflow-y: auto;
}
.dark .react-datepicker .react-datepicker__month-dropdown,
.dark .react-datepicker .react-datepicker__year-dropdown{
  border:1px solid var(--darkModeBlackSD);
}
.react-datepicker .react-datepicker__month-dropdown {
  height: 223px;
}
.react-datepicker .react-datepicker__year-dropdown {
  padding: 0px 0px;
  height:220px;
}
.react-datepicker
  .react-datepicker__month-dropdown
  .react-datepicker__month-option,
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__year-option {
  padding: 3px 10px 7px 10px;
  text-align: left;
  font-size: 14px;
  font-family: 'Matter-Regular';
  font-weight: 400;
  color: var(--textSecondary);
  border-radius: 0px !important;
}
.react-datepicker
  .react-datepicker__month-dropdown
  .react-datepicker__month-option:hover,
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__year-option:hover{
  background-color: var(--bgSurface);
}
.react-datepicker
  .react-datepicker__month-dropdown
  .react-datepicker__month-option.react-datepicker__month-option--selected_month,
.react-datepicker
  .react-datepicker__month-dropdown
  .react-datepicker__month-option.react-datepicker__month-option--selected_month:hover,
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__year-option.react-datepicker__year-option--selected_year,
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__year-option.react-datepicker__year-option--selected_year:hover {
  background-color: var(--primaryColorSD);
  /* color: var(--primaryColorSD); */
  color: #ffffff;
}
.react-datepicker .react-datepicker__month-option--selected,
.react-datepicker .react-datepicker__year-option--selected {
  display: none;
}
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__navigation--years {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--textDark) !important;
  border-top: 2px solid var(--textDark) !important;
  transform: rotate(-45deg);
  margin: 0px auto;
  position: relative;
  top: 1px;
}
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming,
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {
  margin: 4px auto 4px auto;
}
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__year-option:last-child
  .react-datepicker__navigation--years {
  transform: rotate(135deg);
  top: -3px;
}

/* .react-datepicker
.react-datepicker__year-dropdown
.react-datepicker__year-option:first-child,
.react-datepicker
.react-datepicker__year-dropdown
.react-datepicker__year-option:last-child {
background-color: var(--ip__Grey__hoverDark);
padding: 8px 0px;
margin-bottom: 8px
} */
.react-datepicker
  .react-datepicker__year-dropdown.react-datepicker__year-dropdown--scrollable
  .react-datepicker__year-option:last-child {
  padding: 3px 10px;
  margin-top: 0px;
}
.react-datepicker
  .react-datepicker__year-dropdown.react-datepicker__year-dropup--scrollable
  .react-datepicker__year-option:first-child {
  padding: 3px 10px;
  margin-bottom: 0px;
}
.react-datepicker
  .react-datepicker__year-dropdown
  .react-datepicker__year-option:last-child {
  margin-bottom: 0px;
  margin-top: 8px;
}

.react-datepicker .react-datepicker {
  border: none;
  /* box-shadow: 5px 10px 20px rgba(222, 226, 230, 0.3); */
  box-shadow: var(--mediumFloatShadow);
  background-color: var(--bgWhiteSD);
  font-family: 'Matter-Regular';
}
.react-datepicker .react-datepicker__day-name,
.react-datepicker .react-datepicker__day,
.react-datepicker .react-datepicker__time-name{
  width: 31px;
  line-height: 31px;
  font-family: 'Matter-Regular';
  font-size:14px;
  color: var(--textDark);
  border-radius: 6px !important;
}
.react-datepicker .react-datepicker__day-name {
  font-family: 'Matter-Regular';
  font-size:12px;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected,
.react-datepicker__day--selected,
.react-datepicker__month-text--selected,
.react-datepicker__quarter-text--selected,
.react-datepicker__year-text--selected {
  background-color: var(--primaryColor2SD) !important;
  color: #ffffff !important;
  font-weight: 400 !important;
}
.react-datepicker
  .react-datepicker__day-name.react-datepicker__day--outside-month,
.react-datepicker .react-datepicker__day.react-datepicker__day--outside-month,
.react-datepicker
  .react-datepicker__time-name.react-datepicker__day--outside-month {
  color: var(--textTertiary);
  opacity: 0.6;
}
.react-datepicker .react-datepicker__day.react-datepicker__day--disabled {
  color: var(--textTertiary);
  opacity: 0.6;
  pointer-events: none;
}
.react-datepicker .react-datepicker__day {
  position: relative;
}
.react-datepicker .react-datepicker__day:hover {
  background-color: var(--bgSurface);
}
.react-datepicker .react-datepicker__day:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius:6px !important;
  z-index: 0;
  opacity: 0.07;
}
.react-datepicker .react-datepicker__day:hover:before {
  background-color: var(--bgSurface);
}
/* Neutralize browser-local today highlight; user-tz highlight is applied via rdp-tz-today (overlay) */
.react-datepicker .react-datepicker__day.react-datepicker__day--today {
  color: inherit !important;
  font-weight: 400;
}
.react-datepicker .react-datepicker__day.react-datepicker__day--today:before {
  background-color: transparent !important;
  opacity: 0 !important;
}
.react-datepicker
  .react-datepicker__day.react-datepicker__day--today.react-datepicker__day--selected:before,
.react-datepicker
  .react-datepicker__day.react-datepicker__day--today.react-datepicker__day--keyboard-selected:before {
  display: none;
}
.react-datepicker .react-datepicker__day.react-datepicker__day--in-range,
.react-datepicker
  .react-datepicker__day.react-datepicker__day--in-selecting-range {
  background-color: transparent;
  color: var(--primaryColorSD);
}
.react-datepicker
  .react-datepicker__day.react-datepicker__day--in-range::before,
.react-datepicker
  .react-datepicker__day.react-datepicker__day--in-selecting-range::before {
  background-color: var(--primaryColorSD);
  opacity: 0.2;
}
.react-datepicker
  .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end {
  background-color: var(--primaryColorSD);
  color: #ffffff;
}
.react-datepicker
  .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end:before {
  opacity: 0;
}
/* .react-datepicker .react-datepicker__month-container{
  border-right: 1px solid var(--lightBorderSD);
} */
.react-datepicker
  .react-datepicker__month-container
  + .react-datepicker__time-container {
  margin-top: 0px;
  width: 86px !important;
  border-left:1px solid var(--lightBorderSD);
}
.react-datepicker .react-datepicker__month-container + .react-datepicker__time-container::before{
  content:"";
  position:absolute;
  top:0px;
  right:86px;
  width:1px;
  height:100%;
  background-color:var(--lightBorderSD);
}
.react-datepicker
  .react-datepicker__month-container
  + .react-datepicker__time-container
  .react-datepicker__time-box
  ul.react-datepicker__time-list {
  height:316px !important;
}
.react-datepicker
  .react-datepicker__month-container
  + .react-datepicker__time-container
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item {
  padding:5px 10px 7px 10px;
  color: var(--textDark);
  font-family: 'Matter-Regular' !important;
  font-weight: 400 !important;
}
.react-datepicker
  .react-datepicker__month-container
  + .react-datepicker__time-container
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item:hover {
  background-color: var(--bgSurface);
}
.react-datepicker
  .react-datepicker__month-container
  + .react-datepicker__time-container
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item.react-datepicker__time-list-item--selected,
.react-datepicker
  .react-datepicker__month-container
  + .react-datepicker__time-container
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {
  background-color: var(--primaryColorSD);
  color: #ffffff;
}
.react-datepicker
  .react-datepicker__month-container
  + .react-datepicker__time-container
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item.react-datepicker__time-list-item--disabled {
  background-color: transparent !important;
  color: var(--textDark);
  opacity: 0.5;
  pointer-events: none;
}

body .react-datepicker-wrapper .react-datepicker__close-icon {
  display: block;
  padding: 0px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color:transparent;
  top: 10px;
  right: 8px;
}
body .react-datepicker-wrapper .react-datepicker__close-icon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background-color: var(--iconColorSD);
  transform: translate(-50%, -50%) rotate(45deg);
}
body .react-datepicker-wrapper .react-datepicker__close-icon:after {
  content: "";
  width: auto;
  height: auto;
  font-size: 0px;
  line-height: 0px;
  background-color: transparent;
  padding: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background-color:var(--iconColorSD);
  transform: translate(-50%, -50%) rotate(-45deg);
}
body .react-datepicker-wrapper .react-datepicker__close-icon:hover {
  background-color: var(--bgSurface);
}
body .icon__right .react-datepicker-wrapper .react-datepicker__close-icon{
  right:35px;
}

.react-datepicker__close-icon::after {
  background-color: var(--bgBlackSD);
  padding: 0px 0px 2px 1px;
  line-height: 18px;
  width: 20px;
  height: 18px;
  font-size: 18px;
}

/* with-time */
.react-datepicker__time-container .react-datepicker__time{
  background-color: var(--bgWhiteSD) !important;
}
.react-datepicker__time-container{
  margin-top: 10px;
  width: 84px !important;
  border-left-width: 0px;
  padding-top: 6px;
}
.react-datepicker-time__header{
  font-family: Matter-SemiBold;
  font-weight: 400;
  color: var(--textDark);
}
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item:hover {
  background-color: var(--primaryBlackSD100);
}
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected,
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected:hover {
  background-color: var(--primaryColorSD);
  color: #ffffff;
  font-weight: normal;
}
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list {
  height: 230px !important;
}
/* with-time-end */
/* Remove library default blue highlight for custom highlighted days */
.react-datepicker__day--highlighted,
.react-datepicker__day--highlighted:hover {
  background-color: transparent !important;
  color: inherit !important;
}

/* Explicit user-timezone today highlight (0.2 opacity using primary color) */
.react-datepicker__day.rdp-tz-today,
.react-datepicker__day.rdp-tz-force {
  position: relative;
}
.react-datepicker__day.rdp-tz-today:before,
.react-datepicker__day.rdp-tz-force:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px; /* match day cell radius */
  background-color: var(--primaryColor2SD) !important;
  opacity: 0.2 !important;
}
/* Ensure overlay wins even when the library adds --today on the same cell */
.react-datepicker__day.rdp-tz-today.react-datepicker__day--today:before,
.react-datepicker__day.rdp-tz-force.react-datepicker__day--today:before {
  background-color: var(--primaryColor2SD) !important;
  opacity: 0.2 !important;
}
/* Do not overlay when the day is selected/keyboard-selected */
.react-datepicker__day.rdp-tz-today.react-datepicker__day--selected:before,
.react-datepicker__day.rdp-tz-today.react-datepicker__day--keyboard-selected:before,
.react-datepicker__day.rdp-tz-force.react-datepicker__day--selected:before,
.react-datepicker__day.rdp-tz-force.react-datepicker__day--keyboard-selected:before {
  display: none !important;
}

/*react-datepicker-end*/

body .dateFieldWith__raisedEffect .react-datepicker-wrapper input{
  /* box-shadow:var(--raiseShadow); */
}
body .field__wrapper.dateFieldWith__raisedEffect.field__has__error .field__has__icon.icon__right .i__Icon{
  right:7px;
}
/* normal-css-end */
/* radio-button */
/* normal-radio-button */
.custom__radioBtn__SD{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.custom__radioBtn__SD input{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}
.custom__radioBtn__SD .label__SD{
  position: relative;
  margin-bottom: 0px;
  padding-left: 20px;
  font-family: Matter-Medium;
  font-size: 14px;
  color: var(--textSecondary);
}
.custom__radioBtn__SD .label__SD::before{
  position: absolute;
  left: 0px;
  top: 0px;
  height: 14px;
  width: 14px;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 209 209 / var(--tw-border-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}
.custom__radioBtn__SD .label__SD::after{
  position: absolute;
  left: 4px;
  top: 4px;
  height: 6px;
  width: 6px;
  border-radius: 9999px;
  background-color: var(--primaryColor2SD);
  opacity: 0;
  --tw-content: '';
  content: var(--tw-content);
}
.custom__radioBtn__SD .label__SD:is(.dark *)::before{
  content: var(--tw-content);
  border-color: var(--darkModeBlackSD200);
}
.formPreview__wrapper .custom__radioBtn__SD .label__SD::before{
  content: var(--tw-content);
  display: none;
}
.formPreview__wrapper .custom__radioBtn__SD .label__SD::after{
  content: var(--tw-content);
  display: none;
}
.custom__radioBtn__SD .label__SD .radioCheckBG{
  /* @apply absolute left-[0px] top-[0px] w-[14px] h-[14px] rounded-full border-[1px] border-[#D1D1D1]; */
  position: absolute;
  left: 0px;
  top: calc(50% - 2px);
  height: 14px;
  width: 14px;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 209 209 / var(--tw-border-opacity, 1));
}
.custom__radioBtn__SD .label__SD .radioCheckActive{
  /* @apply absolute left-[4px] top-[4px] h-[6px] w-[6px] rounded-full bg-primaryColor2SD opacity-0 dark:border-darkModeBlackSD200; */
  position: absolute;
  left: 4px;
  top: calc(50% - 2px);
  height: 6px;
  width: 6px;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  background-color: var(--primaryColor2SD);
  opacity: 0;
}
.custom__radioBtn__SD .label__SD .radioCheckActive:is(.dark *){
  border-color: var(--darkModeBlackSD200);
}
.formPreview__wrapper .custom__radioBtn__SD .label__SD .radioCheckBG,
.formPreview__wrapper .custom__radioBtn__SD .label__SD .radioCheckActive{
  display: block;
}
.custom__radioBtn__SD .label__SD .label__text{
  margin-top: -2px;
  max-width: none;
  overscroll-behavior: none;
  white-space: normal;
}
.custom__radioBtn__SD input:hover + .label__SD .radioCheckBG,
.custom__radioBtn__SD .label__SD:hover .radioCheckBG{
  border-color: var(--primaryColor2SD);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.custom__radioBtn__SD input:checked + .label__SD .radioCheckBG,
.custom__radioBtn__SD.active .label__SD .radioCheckBG{
  border-color: var(--primaryColor2SD);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.custom__radioBtn__SD input:hover + .label__SD::before,
.custom__radioBtn__SD .label__SD:hover::before{
  border-color: var(--primaryColor2SD);
  content: var(--tw-content);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.custom__radioBtn__SD input:checked + .label__SD::before,
.custom__radioBtn__SD.active .label__SD::before{
  border-color: var(--primaryColor2SD);
  content: var(--tw-content);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.custom__radioBtn__SD input:checked + .label__SD::after,
.custom__radioBtn__SD.active .label__SD::after{
  content: var(--tw-content);
  opacity: 1;
}
.custom__radioBtn__SD input:checked + .label__SD .radioCheckActive,
.custom__radioBtn__SD.active .label__SD .radioCheckActive{
  opacity: 1;
}
/* normal-radio-button-end */

/* medium-radio-button */
.custom__radioBtn__SD.custom__radioBtn__SD__medium .label__SD{
  padding-left: 22px;
  font-size: 16px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium .label__SD::before{
  top: 3px;
  height: 16px;
  content: var(--tw-content);
  width: 16px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium .label__SD::after{
  top: 7px;
  left: 4px;
  height: 8px;
  content: var(--tw-content);
  width: 8px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium .label__SD .radioCheckBG{
  top: 3px;
  height: 16px;
  width: 16px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium .label__SD .radioCheckActive{
  top: 7px;
  left: 4px;
  height: 8px;
  width: 8px;
}
/* medium-radio-button-end */

/* large-radio-button */
.custom__radioBtn__SD.custom__radioBtn__SD__large .label__SD{
  padding-left: 26px;
  font-size: 18px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large .label__SD::before{
  top: 4px;
  height: 18px;
  content: var(--tw-content);
  width: 18px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large .label__SD::after{
  top: 9px;
  left: 5px;
  height: 8px;
  content: var(--tw-content);
  width: 8px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large .label__SD .radioCheckBG{
  top: 4px;
  height: 18px;
  width: 18px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large .label__SD .radioCheckActive{
  top: 9px;
  left: 5px;
  height: 8px;
  width: 8px;
}
/* large-radio-button-end */

/* normal-radio-button-without-label */
.custom__radioBtn__SD.without__label{
  height: 16px;
  width: 16px;
}
.custom__radioBtn__SD.without__label .label__SD{
  height: 100%;
  width: 100%;
  padding-left: 0px;
  font-size: 0px;
}
.custom__radioBtn__SD.without__label .label__SD::before{
  top: 1px;
  content: var(--tw-content);
  left: 1px;
}
.custom__radioBtn__SD.without__label .label__SD::after{
  left: 5px;
  content: var(--tw-content);
  top: 5px;
}
.custom__radioBtn__SD.without__label .label__SD .radioCheckBG{
  top: 1px;
  left: 1px;
}
.custom__radioBtn__SD.without__label .label__SD .radioCheckActive{
  left: 5px;
  top: 5px;
}
/* normal-radio-button-without-label-end */

/* medium-radio-button-without-label */
.custom__radioBtn__SD.custom__radioBtn__SD__medium.without__label{
  height: 20px;
  width: 20px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.without__label .label__SD{
  height: 100%;
  width: 100%;
  padding-left: 0px;
  font-size: 0px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.without__label .label__SD::before{
  top: 2px;
  content: var(--tw-content);
  left: 2px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.without__label .label__SD::after{
  left: 6px;
  content: var(--tw-content);
  top: 6px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.without__label .label__SD .radioCheckBG{
  top: 2px;
  left: 2px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.without__label .label__SD .radioCheckActive{
  left: 6px;
  top: 6px;
}
/* medium-radio-button-without-label-end */

/* large-radio-button-without-label */
.custom__radioBtn__SD.custom__radioBtn__SD__large.without__label{
  height: 20px;
  width: 20px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.without__label .label__SD{
  height: 100%;
  width: 100%;
  padding-left: 0px;
  font-size: 0px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.without__label .label__SD::before{
  top: 1px;
  content: var(--tw-content);
  left: 1px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.without__label .label__SD::after{
  left: 6px;
  content: var(--tw-content);
  top: 6px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.without__label .label__SD .radioCheckBG{
  top: 1px;
  left: 1px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.without__label .label__SD .radioCheckActive{
  left: 6px;
  top: 6px;
}
/* large-radio-button-without-label-end */

/* normal-radio-button-with-left-label */
.custom__radioBtn__SD.label__left .label__SD{
  padding-left: 0px;
  padding-right: 20px;
}
.custom__radioBtn__SD.label__left .label__SD::before{
  left: unset;
  content: var(--tw-content);
  right: 0px;
}
.custom__radioBtn__SD.label__left .label__SD::after{
  left: unset;
  content: var(--tw-content);
  right: 4px;
}
.custom__radioBtn__SD.label__left .label__SD .radioCheckBG{
  left: unset;
  right: 0px;
}
.custom__radioBtn__SD.label__left .label__SD .radioCheckActive{
  left: unset;
  right: 4px;
}
/* normal-radio-button-with-left-label-end */

/* medium-radio-button-with-left-label */
.custom__radioBtn__SD.custom__radioBtn__SD__medium.label__left .label__SD{
  padding-left: 0px;
  padding-right: 24px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.label__left .label__SD::before{
  left: unset;
  content: var(--tw-content);
  right: 0px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.label__left .label__SD::after{
  left: unset;
  content: var(--tw-content);
  right: 4px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.label__left .label__SD .radioCheckBG{
  left: unset;
  right: 0px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__medium.label__left .label__SD .radioCheckActive{
  left: unset;
  right: 4px;
}
/* medium-radio-button-with-left-label-end */

/* boxDesign */
.boxDesign .custom__radioBtn__SD .label__SD{
  position: relative;
  border-radius: 8px;
  border-width: 1px;
  border-color: var(--lightBorderSD);
  background-color: var(--bgWhiteSD);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 14px;
  padding-left: 35px;
}
.boxDesign .custom__radioBtn__SD .label__SD::before{
  top: 14px;
  content: var(--tw-content);
  left: 14px;
}
.boxDesign .custom__radioBtn__SD .label__SD::after{
  top: 18px;
  content: var(--tw-content);
  left: 18px;
}
.boxDesign .custom__radioBtn__SD input:checked + .label__SD{
  border-width: 1px;
  border-color: var(--primaryColorSD);
}
/* .boxDesign .custom__radioBtn__SD .label__SD{

} */
/* boxDesign end */

/* large-radio-button-with-left-label */
.custom__radioBtn__SD.custom__radioBtn__SD__large.label__left .label__SD{
  padding-left: 0px;
  padding-right: 26px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.label__left .label__SD::before{
  top: 3px;
  left: unset;
  content: var(--tw-content);
  right: 0px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.label__left .label__SD::after{
  top: 8px;
  left: unset;
  content: var(--tw-content);
  right: 5px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.label__left .label__SD .radioCheckBG{
  top: 3px;
  left: unset;
  right: 0px;
}
.custom__radioBtn__SD.custom__radioBtn__SD__large.label__left .label__SD .radioCheckActive{
  top: 8px;
  left: unset;
  right: 5px;
}
/* medium-radio-button-with-left-label-end */

/* boxDesign */
.boxDesign .custom__radioBtn__SD .label__SD{
  position: relative;
  border-radius: 7px;
  background-color: var(--bgWhiteSD);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 14px;
  padding-left: 35px;
}
.boxDesign .custom__radioBtn__SD .label__SD::before{
  top: 12px;
  content: var(--tw-content);
  left: 14px;
}
.boxDesign .custom__radioBtn__SD .label__SD::after{
  top: 16px;
  content: var(--tw-content);
  left: 18px;
}
.boxDesign .custom__radioBtn__SD input:checked + .label__SD{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* .boxDesign .custom__radioBtn__SD .label__SD{

} */
/* boxDesign end */
/* radio-button-end */
.field__wrapper .react-tel-input .form-control {
    height: 40px;
    width: 100%;
    border-radius: 6px;
    border-width: 1px;
    border-color: var(--lightBorderSD);
    background-color: var(--bgWhiteSD);
    padding-top: 5px;
    padding-bottom: 6px;
    padding-left: 56px;
    padding-right: 40px;
    font-family: Matter-Regular;
    font-size: 14px;
    color: var(--textDark)
}
.field__wrapper .react-tel-input .form-control::-moz-placeholder {
    color: var(--textSecondary);
    opacity: 1
}
.field__wrapper .react-tel-input .form-control::placeholder {
    color: var(--textSecondary);
    opacity: 1
}
.field__wrapper .react-tel-input .form-control:focus {
    border-color: var(--primaryColorSD);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.field__wrapper .react-tel-input .selected-flag::before {
    content: var(--tw-content);
    display: none
}
.field__wrapper .react-tel-input .selected-flag .arrow {
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: var(--textSecondary)
}
.field__wrapper .react-tel-input .selected-flag .arrow.up {
    border-top-width: 0px;
    border-bottom-width: 5px;
    border-bottom-color: var(--textSecondary)
}
.field__wrapper .react-tel-input .flag-dropdown {
    border-width: 0px;
    background-color: transparent
}
.field__wrapper .react-tel-input .flag-dropdown:hover {
    border-width: 0px;
    background-color: transparent
}
.field__wrapper .react-tel-input .flag-dropdown .selected-flag:hover {
    border-width: 0px !important;
    background-color: transparent !important
}
.field__wrapper .react-tel-input .flag-dropdown.open {
    z-index: 4
}

/* country-dropdown */
.field__wrapper .react-tel-input .country-list {
    z-index: 4;
    margin-bottom: 0px;
    margin-top: 3px;
    width: 263px;
    background-color: var(--bgWhiteSD);
    padding: 10px;
    --tw-shadow: var(--dropdownShadow);
    --tw-shadow-colored: var(--dropdownShadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.inline_modal .field__wrapper .react-tel-input .country-list {
    position: fixed;
    z-index: 4;
    margin-bottom: 0px;
    margin-top: 3px;
    width: 263px;
    --tw-shadow: var(--mediumFloatShadow);
    --tw-shadow-colored: var(--mediumFloatShadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.field__wrapper .react-tel-input .country-list .country {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 12px;
    padding-right: 12px
}
.field__wrapper .react-tel-input .country-list .country:last-child {
    margin-bottom: 0px
}
.field__wrapper .react-tel-input .country-list .country:hover {
    background-color: var(--bgSurface)
}
.field__wrapper .react-tel-input .country-list .flag {
    position: static;
    margin-right: 7px;
    margin-top: -4px;
    flex-shrink: 0
}
.field__wrapper .react-tel-input .country-list .country-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    font-family: Biotif-Regular;
    font-size: 14px;
    color: var(--textDark)
}
.field__wrapper .react-tel-input .country-list .country-name:is(.dark *) {
    color: var(--textSecondary)
}
.field__wrapper .react-tel-input .country-list .dial-code {
    flex-shrink: 0;
    font-family: Biotif-Regular;
    font-size: 13px;
    color: var(--textSecondary)
}
.field__wrapper .react-tel-input .country-list .country.highlight {
    background-color: var(--primaryColorSD)
}
.field__wrapper .react-tel-input .country-list .country.highlight:hover {
    background-color: var(--primaryColorSD)
}
.field__wrapper .react-tel-input .country-list .country.highlight .country-name,
.field__wrapper .react-tel-input .country-list .country.highlight .dial-code {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}
/* country-dropdown-end */

/* newPhoneField */
.newPhoneField .field__wrapper {
    position: absolute;
    top: 1px;
    left: 1px;
    margin-bottom: 0px !important;
    height: 39px;
    width: 50px;
    overflow: hidden;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.newPhoneField .select__SD .select__SD__indicators {
    display: none !important
}
.newPhoneField .select__SD .select__SD__control {
    position: relative;
    border-radius: 0px !important;
    border-color: transparent;
    background-color: transparent;
    padding-left: 11px !important;
    padding-right: 5px !important
}
.newPhoneField .select__SD .select__SD__control::before {
    position: absolute;
    top: 18px;
    right: 2px;
    border-width: 4px;
    border-top-width: 4px;
    border-color: transparent;
    border-top-color: var(--iconColorSD);
    --tw-content: '';
    content: var(--tw-content)
}
.newPhoneField .select__SD .select__SD__control:is(.dark *) {
    border-width: 0px;
    background-color: transparent
}
.newPhoneField .select__SD .select__SD__control:hover {
    border-color: transparent;
    background-color: transparent !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}
.newPhoneField .select__SD .select__SD__control.select__SD__control--menu-is-open,
.newPhoneField .select__SD .select__SD__control.select__SD__control--menu-is-open:hover {
    border-color: transparent
}
.newPhoneField .select__SD .select__SD__value-container {
    position: relative;
    padding-right: 0px !important
}
.newPhoneField .select__SD .select__SD__value-container::before {
    --tw-content: '';
    content: var(--tw-content)
}
.newPhoneField .field__inner__wrapper {
    position: relative
}
.newPhoneField .select__SD .select__SD__single-value {
    font-size: 18px
}
.newPhoneField .select__SD .select__SD__control.select__SD__control--menu-is-open,
.newPhoneField .select__SD .select__SD__control.select__SD__control--menu-is-open:hover {
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    outline-color: transparent !important
}
.newPhoneField .select__SD .select__SD__control.select__SD__control--menu-is-open::before,
.newPhoneField .select__SD .select__SD__control.select__SD__control--menu-is-open:hover::before {
    top: 13px;
    content: var(--tw-content);
    --tw-rotate: -180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.newPhoneField .input__SD {
    padding-left: 54px
}
.newPhoneField .select__SD__menu {
    width: 310px
}

.newPhoneField .select__SD .select__SD__option {
    display: flex;
    align-items: center
}
.newPhoneField .select__SD .select__SD__option .flag {
    margin-top: -10px;
    margin-right: 6px;
    height: 18px;
    width: 25px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    font-size: 18px
}
.newPhoneField .select__SD .select__SD__option .country-name {
    position: relative;
    top: -1px;
    margin-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    font-family: Matter-Regular;
    font-size: 14px;
    color: var(--textDark)
}
.newPhoneField .select__SD .select__SD__option .dial-code {
    flex-shrink: 0;
    font-family: Matter-Regular;
    font-size: 13px;
    color: var(--textDark)
}
.field__wrapper.newPhoneField.field__has__error .select__SD .select__SD__control,
.field__wrapper.newPhoneField.field__has__error .select__SD .select__SD__control.select__SD__control--menu-is-open,
.field__wrapper.newPhoneField.field__has__error .select__SD .select__SD__control.select__SD__control--menu-is-open:hover {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important
}

.contactPhoneInput .react-tel-input .form-control {
    border-radius: 9px;
    padding-right: 40px
}

.contactPhoneInput .react-tel-input .flag-dropdown {
    border-top-left-radius: 9px !important;
    border-bottom-left-radius: 9px !important;
    border-right-width: 0px;
    border-color: transparent;
    background-color: transparent
}

/* newPhoneField end *//* select-box */
.select__SD {
  width: 100%;
}
.select__SD div[class$='control'],
.select__SD div[class$='control']:hover,
.select__SD .select__SD__control,
.select__SD .select__SD__control:hover {
  min-height: 42px;
  border-radius: 6px;
  border-width: 1px;
  border-color: var(--lightBorderSD);
  background-color: transparent;
  padding-top: 4px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 38px;
}
.select__whiteBG__SD .select__SD div[class$='control'],
.select__whiteBG__SD .select__SD div[class$='control']:hover,
.select__whiteBG__SD .select__SD .select__SD__control,
.select__whiteBG__SD .select__SD .select__SD__control:hover {
  background-color: var(--bgWhiteSD);
}
.formPreview__wrapper .select__SD div[class$='control']:is(.dark *),
.formPreview__wrapper .select__SD div[class$='control']:hover:is(.dark *),
.formPreview__wrapper .select__SD .select__SD__control:is(.dark *),
.formPreview__wrapper .select__SD .select__SD__control:hover:is(.dark *) {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: var(--raiseShadow);
  --tw-shadow-colored: var(--raiseShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.select__SD .viewOnly div[class$='control'],
.select__SD .viewOnly div[class$='control']:hover,
.select__SD .viewOnly .select__SD__control,
.select__SD .viewOnly .select__SD__control:hover {
  cursor: pointer;
}
.select__SD div[class$='ValueContainer'],
.select__SD .select__SD__value-container {
  position: relative;
  display: flex;
  height: 30px;
  width: 100%;
  align-items: center;
  padding: 0px;
  padding-right: 10px;
  line-height: 30px;
}
.select__SD.loaderActive div[class$='ValueContainer'],
.select__SD.loaderActive .select__SD__value-container {
  padding-right: 34px;
}
.select__SD div[class$='placeholder'],
.select__SD .select__SD__placeholder {
  position: relative;
  top: -2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  font-family: Matter-Regular;
  font-size: 16px;
  color: var(--textSecondary);
  opacity: 0.6;
}
.select__SD div[class$='singleValue'],
.select__SD .select__SD__single-value {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  font-family: Matter-Regular;
  font-size: 16px;
  line-height: 29px;
  opacity: 1;
}
.select__SD div[class$='singleValue']:is(.dark *),
.select__SD .select__SD__single-value:is(.dark *) {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.availabilityScheduleBox .select__SD div[class$='singleValue']:is(.dark *),
.availabilityScheduleBox .select__SD .select__SD__single-value:is(.dark *) {
  color: var(--textDark);
}
.select__SD .select__SD__value-container > input,
.select__SD .select__SD__value-container > input {
  position: absolute;
}
.formPreview__wrapper .select__SD div[class$='singleValue']:is(.dark *),
.formPreview__wrapper .select__SD .select__SD__single-value:is(.dark *) {
  color: var(--textSecondaryDark);
}
.select__SD .select__SD__single-value {
  /* @apply  h-[26px] !leading-[18px] rounded-[8px] py-[5px] px-[8px]; */
  position: relative;
  top: -2px;
  margin-left: 0px;
  margin-right: 0px;
  height: 26px;
  border-radius: 8px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  line-height: 24px !important;
  color: var(--textDark);
}
.singleValueAs__tag .select__SD .select__SD__single-value {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  line-height: 22px !important;
}
/* .select__SD.defaultSingleValue__darkColor .select__SD__single-value{
  @apply !text-textDark;
} */
.merchantTaxSelect .select__SD .select__SD__input {
  cursor: pointer;
}
.select__SD div[class$='Input'],
.select__SD .select__SD__input,
.select__SD .select__SD__input-container {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  height: 30px;
  width: 100%;
  padding: 0px;
  font-family: Matter-Regular !important;
  font-size: 14px !important;
  color: var(--textDark) !important;
}
.formPreview__wrapper .select__SD div[class$='Input']:is(.dark *),
.formPreview__wrapper .select__SD .select__SD__input:is(.dark *),
.formPreview__wrapper .select__SD .select__SD__input-container:is(.dark *) {
  color: var(--textSecondaryDark) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(88 91 93 / var(--tw-text-opacity, 1)) !important;
}
.select__SD .select__SD__input {
  top: -2px !important;
}
.select__SD span[class$='indicatorSeparator'],
.select__SD .select__SD__indicator-separator {
  display: none;
}
.select__SD div[class$='IndicatorsContainer'],
.select__SD .select__SD__indicators {
  margin-right: -31px;
  cursor: pointer;
}
.select__SD div[class$='indicatorContainer']:last-child,
.select__SD .select__SD__indicator-separator:last-child {
  position: relative;
  height: 20px;
  width: 20px;
  padding: 0px;
}
.select__SD div[class$='indicatorContainer']:last-child::before,
.select__SD .select__SD__indicator-separator:last-child::before {
  position: absolute;
  top: 50%;
  left: calc(50% - 3px);
  height: 1px;
  width: 9px;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 10px;
  background-color: var(--iconColorSD);
  --tw-content: '';
  content: var(--tw-content);
}
.select__SD div[class$='indicatorContainer']:last-child::after,
.select__SD .select__SD__indicator-separator:last-child::after {
  position: absolute;
  top: 50%;
  left: calc(50% + 3px);
  height: 1px;
  width: 9px;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 10px;
  background-color: var(--iconColorSD);
  --tw-content: '';
  content: var(--tw-content);
}
.formPreview__wrapper .select__SD div[class$='indicatorContainer']:last-child:is(.dark *)::before,
.formPreview__wrapper .select__SD .select__SD__indicator-separator:last-child:is(.dark *)::before {
  content: var(--tw-content);
  background-color: var(--textSecondaryDark);
}
.formPreview__wrapper .select__SD div[class$='indicatorContainer']:last-child:is(.dark *)::after,
.formPreview__wrapper .select__SD .select__SD__indicator-separator:last-child:is(.dark *)::after {
  content: var(--tw-content);
  background-color: var(--textSecondaryDark);
}
.formPreview__wrapper .select__SD div[class$='indicatorContainer']:last-child:is(.dark *)::before,
.formPreview__wrapper .select__SD .select__SD__indicator-separator:last-child:is(.dark *)::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(88 91 93 / var(--tw-bg-opacity, 1));
}
.formPreview__wrapper .select__SD div[class$='indicatorContainer']:last-child:is(.dark *)::after,
.formPreview__wrapper .select__SD .select__SD__indicator-separator:last-child:is(.dark *)::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(88 91 93 / var(--tw-bg-opacity, 1));
}
.select__SD div[class$='indicatorContainer']:nth-last-of-type(2),
.select__SD .select__SD__indicator-separator:nth-last-of-type(2) {
  position: relative;
  height: 20px;
  width: 20px;
  cursor: pointer;
  padding: 0px;
}
.select__SD div[class$='indicatorContainer']:nth-last-of-type(2)::before,
.select__SD .select__SD__indicator-separator:nth-last-of-type(2)::before {
  position: absolute;
  top: 50%;
  left: calc(50% - 1px);
  height: 1px;
  width: 12px;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 10px;
  background-color: var(--iconColorSD);
  --tw-content: '';
  content: var(--tw-content);
}
.select__SD div[class$='indicatorContainer']:nth-last-of-type(2)::after,
.select__SD .select__SD__indicator-separator:nth-last-of-type(2)::after {
  position: absolute;
  top: 50%;
  left: calc(50% - 1px);
  height: 1px;
  width: 12px;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 10px;
  background-color: var(--textSecondary);
  --tw-content: '';
  content: var(--tw-content);
}
.select__SD div[class$='indicatorContainer']:nth-last-of-type(2):hover::before,
.select__SD .select__SD__indicator-separator:nth-last-of-type(2):hover::before {
  content: var(--tw-content);
  background-color: var(--dangerSD);
}
.select__SD div[class$='indicatorContainer']:nth-last-of-type(2):hover::after,
.select__SD .select__SD__indicator-separator:nth-last-of-type(2):hover::after {
  background-color: var(--iconColorSD);
  content: var(--tw-content);
  background-color: var(--dangerSD);
}
.select__SD.loaderActive div[class$='indicatorContainer']:nth-last-of-type(2),
.select__SD.loaderActive .select__SD__indicator-separator:nth-last-of-type(2) {
  display: none;
}
.select__SD div[class$='indicatorContainer'] svg,
.select__SD .select__SD__indicator-separator svg {
  opacity: 0 !important;
}
.select__SD svg[class$='Svg'],
.select__SD .select__SD__svg {
  fill: var(--textDark);
  opacity: 0;
}
.formPreview__wrapper .select__SD svg[class$='Svg']:is(.dark *),
.formPreview__wrapper .select__SD .select__SD__svg:is(.dark *) {
  fill: var(--textSecondaryDark);
}
.select__SD .select__SD__control.select__SD__control--is-focused,
.select__SD .select__SD__control.select__SD__control--is-focused:hover {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.formPreview__wrapper .select__SD svg[class$='Svg']:is(.dark *),
.formPreview__wrapper .select__SD .select__SD__svg:is(.dark *) {
  fill: #585b5d;
}
.select__SD .select__SD__control.select__SD__control--menu-is-open,
.select__SD .select__SD__control.select__SD__control--menu-is-open:hover {
  border-width: 1px;
  border-color: var(--primaryColorSD);
  padding-top: 4px;
  padding-bottom: 3px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.select__SD .select__SD__control.select__SD__control--menu-is-open:is(.dark *),
.select__SD .select__SD__control.select__SD__control--menu-is-open:hover:is(.dark *) {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.formPreview__wrapper
  .select__SD
  .select__SD__control.select__SD__control--menu-is-open:is(.dark *),
.formPreview__wrapper
  .select__SD
  .select__SD__control.select__SD__control--menu-is-open:hover:is(.dark *) {
  --tw-shadow: 0px 0px 0px 4px #EEEBFC, 0px 1px 2px 0px #7467b70d;
  --tw-shadow-colored: 0px 0px 0px 4px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.select__SD .select__SD__menu {
  z-index: 7;
  margin-bottom: 0px;
  margin-top: 5px;
  border-radius: 6px;
  border-width: 1px;
  background-color: var(--bgWhiteSD);
  --tw-shadow: var(--dropdownShadow);
  --tw-shadow-colored: var(--dropdownShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.select__SD .select__SD__menu:is(.dark *) {
  border-color: var(--lightBorderSD);
}
.formPreview__wrapper .select__SD .select__SD__menu:is(.dark *) {
  border-width: 1px;
  border-color: var(--primaryBlackSD100);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: var(--raiseShadow);
  --tw-shadow-colored: var(--raiseShadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.select__SD .select__SD__menu-portal {
  z-index: 7;
}
.z9999 .select__SD .select__SD__menu-portal {
  z-index: 9999;
}
.select__SD .select__SD__menu-list {
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 6px;
  padding: 10px;
}
.select__SD .select__SD__menu-list .select__SD__group-heading {
  margin-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 8px;
  font-family: Matter-SemiBold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--textTertiary);
}

/* Style for Related Deals group heading */
.select__SD
  .select__SD__menu-list
  .select__SD__group
  .select__SD__group-heading {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -18px;
  margin-bottom: 10px;
  background-color: var(--bgSurface);
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  font-family: Matter;
  font-size: 14px;
  font-weight: 500;
  color: var(--textDark);
}

/* Add spacing between groups */
.select__SD .select__SD__menu-list .select__SD__group + .select__SD__group {
  margin-top: 12px;
  border-top-width: 1px;
  border-color: var(--lightBorderSD);
  padding-top: 12px;
}
.formPreview__wrapper
  .select__SD
  .select__SD__menu-list
  .select__SD__group-heading:is(.dark *) {
  color: var(--textSecondaryDark);
}
.select__SD .select__SD__menu-list .select__SD__group {
  margin-bottom: 8px;
}
.select__SD .select__SD__menu-list .select__SD__group:last-child {
  margin-bottom: 0px;
}

/*
 * Automation dynamic-variable separator.
 */
.select__SD .select__SD__menu-list .select__SD__dynamic-separator {
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 6px;
  margin-right: 6px;
  height: 1px;
  background-color: var(--lightBorderSD);
}
.select__SD .select__SD__menu-list .select__SD__step-group {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  padding-bottom: 4px;
  font-family: Biotif-Medium;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--textSecondary);
}
.select__SD .select__SD__menu-list .select__SD__step-group:is(.dark *) {
  color: var(--textSecondaryDark);
}
.dropdownNoOption__hide .select__SD .select__SD__menu-list {
  padding: 0px;
}
.dropdownNoOption__hide .select__SD .select__SD__menu-notice--no-options {
  display: none;
}
.dropdownNoOption__hide .select__SD .select__SD__option {
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 6px;
  margin-right: 6px;
  width: calc(100% - 12px);
}
.select__SD .select__SD__option {
  /* @apply font-Matter__Regular text-[14px] text-textSecondary border-b-[1px] border-b-primaryBlackSD100 py-[7px] px-[8px] cursor-pointer last:border-b-0 first:rounded-t-[8px] last:rounded-b-[8px]; */
  margin-bottom: 4px;
  cursor: pointer;
  border-radius: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  font-family: Matter-Regular;
  font-size: 14px;
  color: var(--textDark);
}
.select__SD .select__SD__option:last-child {
  margin-bottom: 0px;
}
.select__SD .select__SD__option:hover {
  background-color: var(--bgSurface);
}
.formPreview__wrapper .select__SD .select__SD__option:is(.dark *) {
  border-bottom-width: 1px;
  border-bottom-color: var(--primaryBlackSD100);
  color: var(--textSecondaryDark);
}

.select__SD .select__SD__option.select__SD__option--is-focused {
  background-color: var(--bgSurface);
}

.select__SD .select__SD__option.select__SD__option--is-focused:is(.dark *) {
  background-color: var(--customDark100);
}
.formPreview__wrapper
  .select__SD
  .select__SD__option.select__SD__option--is-focused:is(.dark *) {
  background-color: var(--primaryBlackSD100);
}

.select__SD .select__SD__option.select__SD__option--is-disabled {
  cursor: default;
}
.field__wrapper:not(.noSelectedPrimary)
  .select__SD
  .select__SD__option.select__SD__option--is-selected,
.field__wrapper:not(.noSelectedPrimary)
  .select__SD
  .select__SD__option.select__SD__option--is-selected.select__SD__option--is-focused {
  background-color: var(--primaryColorSD);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.field__wrapper:not(.noSelectedPrimary)
  .select__SD
  .select__SD__option.select__SD__option--is-selected
  .textTertiaryDiv,
.field__wrapper:not(.noSelectedPrimary)
  .select__SD
  .select__SD__option.select__SD__option--is-selected.select__SD__option--is-focused
  .textTertiaryDiv {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.field__wrapper:not(.noSelectedPrimary)
  .select__SD
  .select__SD__option.select__SD__option--is-selected
  .noName__letter::before,
.field__wrapper:not(.noSelectedPrimary)
  .select__SD
  .select__SD__option.select__SD__option--is-selected.select__SD__option--is-focused
  .noName__letter::before {
  content: var(--tw-content);
  background-color: var(--bgWhiteSD);
}
.field__wrapper:not(.noSelectedPrimary)
  .select__SD
  .select__SD__option.select__SD__option--is-selected
  .activeTextColorChange,
.field__wrapper:not(.noSelectedPrimary)
  .select__SD
  .select__SD__option.select__SD__option--is-selected.select__SD__option--is-focused
  .activeTextColorChange {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.shortSurvey__dropdown
  .select__SD
  .select__SD__option.select__SD__option--is-selected,
.shortSurvey__dropdown
  .select__SD
  .select__SD__option.select__SD__option--is-selected.select__SD__option--is-focused {
  background-color: transparent;
}

.select__SD .select__SD__menu-notice.select__SD__menu-notice--no-options {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
  font-family: Matter-Regular;
  font-size: 16px;
  color: var(--textSecondary);
}

/* ==================== height36 start ==================== */
.height36 .select__SD div[class$='control'],
.height36 .select__SD div[class$='control']:hover,
.height36 .select__SD .select__SD__control,
.height36 .select__SD .select__SD__control:hover {
  min-height: 36px;
}
/* ==================== height36 end ==================== */

/* ==================== height36 start ==================== */
.height32 .select__SD div[class$='control'],
.height32 .select__SD div[class$='control']:hover,
.height32 .select__SD .select__SD__control,
.height32 .select__SD .select__SD__control:hover {
  min-height: 32px;
}
.height32 .select__SD div[class$='ValueContainer'],
.height32 .select__SD .select__SD__value-container {
  height: 22px;
  line-height: 22px;
}
.height32 .select__SD div[class$='singleValue'],
.height32 .select__SD .select__SD__single-value {
  font-size: 14px;
}
.height32 .select__SD div[class$='IndicatorsContainer'],
.height32 .select__SD .select__SD__indicators {
  height: 21px;
}
/* ==================== height36 end ==================== */
/* ==================== height32 start ==================== */
.height28.select__SD div[class$='control'],
.height28.select__SD div[class$='control']:hover,
.height28.select__SD .select__SD__control,
.height28.select__SD .select__SD__control:hover {
  min-height: 28px;
}
.height28.select__SD div[class$='ValueContainer'],
.height28.select__SD .select__SD__value-container {
  top: -2px;
  height: 18px;
  line-height: 18px;
}
.height28.select__SD div[class$='singleValue'],
.height28.select__SD .select__SD__single-value {
  font-size: 14px;
}
.height28.select__SD div[class$='IndicatorsContainer'],
.height28.select__SD .select__SD__indicators {
  height: 18px;
}
/* ==================== height32 end ==================== */

/* pipeline select box start */
.pipelineSelectBox .select__SD__option {
  position: relative;
  margin-bottom: 14px;
  border-width: 1px;
  border-color: var(--lightBorderSD);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 8px;
  padding-bottom: 10px;
}
.pipelineSelectBox .select__SD__option::before {
  position: absolute;
  top: 13px;
  right: 9px;
  height: 7px;
  width: 14px;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  opacity: 0;
  --tw-content: '';
  content: var(--tw-content);
}
.pipelineSelectBox .select__SD__option.select__SD__option--is-selected::before {
  content: var(--tw-content);
  opacity: 1;
}
/* pipeline select box end */

/* downArrowHide */
.downArrowHide .select__SD__indicator.select__SD__dropdown-indicator {
  display: none;
}
/* downArrowHide end */

/* multi-value-select-box */
.select__SD .select__SD__value-container.select__SD__value-container--is-multi {
  position: static;
  display: flex;
  height: auto;
  width: 100%;
  align-items: center;
  padding: 0px;
  padding-right: 10px;
}
.select__SD
  .select__SD__value-container.select__SD__value-container--is-multi
  .select__SD__input-container {
  position: absolute;
  left: 0px;
  top: 4px;
  margin: 0px;
  display: inline-block;
  height: 30px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  padding: 0px;
  padding-left: 10px;
  padding-right: 54px;
}
.select__SD
  .select__SD__value-container.select__SD__value-container--is-multi
  .select__SD__input-container
  .select__SD__input {
  position: static;
  max-width: 100%;
}
.select__SD
  .select__SD__value-container.select__SD__value-container--is-multi.select__SD__value-container--has-value
  .select__SD__input-container {
  position: static;
  display: inline-grid;
  width: auto;
  max-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
}
.select__SD
  .select__SD__value-container.select__SD__value-container--is-multi.select__SD__value-container--has-value
  .select__SD__input-container
  .select__SD__input {
  position: relative;
  max-width: 100%;
}
.select__SD .select__SD__multi-value {
  position: relative;
  margin: 0px;
  margin-top: 1px;
  margin-bottom: 2px;
  margin-right: 4px;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 4px;
  background-color: var(--header-bg);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
}
.select__SD .select__SD__multi-value::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  background-color: var(--primaryColorSD);
  opacity: 0;
  --tw-content: '';
  content: var(--tw-content);
}
.field__wrapper:not(.dynamicBgMultiValue) .select__SD .select__SD__multi-value {
  background-color: var(--bgSurface);
}
/* .select__SD.defaultPrimary__tag .select__SD__multi-value {
  @apply !bg-transparent border-[1px] border-primaryColorSD;
} */
.select__SD .select__SD__multi-value .select__SD__multi-value__label {
  /* @apply relative z-[2] p-0 text-[14px] font-Biotif__Regular text-textDark leading-[14px] whitespace-pre overflow-hidden text-ellipsis max-w-[100px]; */
  position: relative;
  top: -1px;
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  padding: 0px;
  font-family: Matter-Regular;
  font-size: 14px;
  color: var(--textDark);
}
/* .select__SD.defaultPrimary__tag .select__SD__multi-value .select__SD__multi-value__label {
  @apply text-primaryColorSD;
} */
.select__SD .select__SD__multi-value .select__SD__multi-value__remove {
  position: relative;
  z-index: 2;
  margin-left: 4px;
  margin-right: -4px;
  height: 18px;
  width: 18px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  padding: 0px;
  transition-duration: 300ms;
}
.select__SD .select__SD__multi-value .select__SD__multi-value__remove::before {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1px;
  width: 10px;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: var(--iconColorSD);
  --tw-content: '';
  content: var(--tw-content);
}
.select__SD .select__SD__multi-value .select__SD__multi-value__remove::after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1px;
  width: 10px;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: var(--iconColorSD);
  --tw-content: '';
  content: var(--tw-content);
}
.select__SD .select__SD__multi-value .select__SD__multi-value__remove:hover {
  background-color: var(--bgSurface);
}
.select__SD .select__SD__multi-value .select__SD__multi-value__remove:is(.dark *)::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.select__SD .select__SD__multi-value .select__SD__multi-value__remove:is(.dark *)::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.select__SD .select__SD__multi-value .select__SD__multi-value__remove:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.formPreview__wrapper
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__remove:is(.dark *)::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.formPreview__wrapper
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__remove:is(.dark *)::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.formPreview__wrapper
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__remove:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
/* .select__SD.defaultPrimary__tag .select__SD__multi-value .select__SD__multi-value__remove {
  @apply before:bg-iconColorSD after:bg-iconColorSD;
} */
.select__SD .select__SD__multi-value .select__SD__multi-value__remove svg {
  display: none;
}
/* .select__SD.tagPrimaryColor .select__SD__multi-value{
  @apply bg-primaryColorSD;
}
.select__SD.tagPrimaryColor .select__SD__multi-value .textLabel{
  @apply text-[#ffffff];
}
.select__SD.tagPrimaryColor .select__SD__multi-value .select__SD__multi-value__remove{
  @apply before:bg-[#ffffff] after:bg-[#ffffff] hover:before:bg-primaryColorSD hover:after:bg-primaryColorSD;
} */
/* defaultGreyBorderTag */
.defaultGreyBorderTag .select__SD__multi-value,
.field__wrapper:not(.dynamicBgMultiValue).defaultGreyBorderTag
  .select__SD
  .select__SD__multi-value {
  border-width: 1px;
  border-color: var(--lightBorderSD);
  background-color: var(--bgSurface);
}
/* defaultGreyBorderTag end */

/* availability-default-locked
   Hides the remove (×) button inside a multi-value chip whose container
   carries this class. Used by booking-type Availability selects to lock
   the Default chip from being unselected. Render-time CSS so the lock
   survives any react-select chip re-render. */
.availability-default-locked .select__SD__multi-value__remove {
  display: none;
}
/* availability-default-locked end */

/* primaryMultiTag */
.primaryMultiTag .select__SD .select__SD__multi-value,
.field__wrapper.primaryMultiTag:not(.dynamicBgMultiValue)
  .select__SD
  .select__SD__multi-value {
  background-color: var(--primaryColorSD50);
}
.primaryMultiTag
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__label {
  color: var(--primaryColorSD);
}
.primaryMultiTag
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__remove {
  border-radius: 4px;
}
.primaryMultiTag
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__remove::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(85 85 85 / var(--tw-bg-opacity, 1));
}
.primaryMultiTag
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__remove::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(85 85 85 / var(--tw-bg-opacity, 1));
}
.primaryMultiTag
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__remove:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
/* primaryMultiTag end */
/* multi-value-select-box-end */

/* roundedTagWithDefaultBG */
.field__wrapper.roundedTagWithDefaultBG:not(.dynamicBgMultiValue)
  .select__SD
  .select__SD__multi-value {
  border-radius: 100px;
  background-color: var(--bgSurface);
}
.field__wrapper.roundedTagWithDefaultBG:not(.dynamicBgMultiValue)
  .select__SD
  .select__SD__multi-value:is(.dark *) {
  background-color: var(--customDark100);
}
.field__wrapper.roundedTagWithDefaultBG:not(.dynamicBgMultiValue)
  .select__SD
  .select__SD__multi-value
  .select__SD__multi-value__remove:hover {
  background-color: var(--bgWhiteSD);
}
/* roundedTagWithDefaultBG end */

.field__wrapper .select__SD .field__has__icon div[class$='control'],
.field__wrapper .select__SD .field__has__icon div[class$='control']:hover,
.field__wrapper .select__SD .field__has__icon .select__SD__control,
.field__wrapper .select__SD .field__has__icon .select__SD__control:hover {
  padding-left: 35px;
}
.field__wrapper
  .select__SD
  .field__has__icon
  .select__SD__value-container.select__SD__value-container--is-multi
  .select__SD__input-container {
  padding-left: 36px;
}
.field__wrapper
  .select__SD
  .field__has__icon
  .select__SD__value-container.select__SD__value-container--is-multi.select__SD__value-container--has-value
  .select__SD__input-container {
  padding-left: 3px;
}

.field__wrapper.field__has__error .select__SD .select__SD__control {
  border-width: 1px;
  border-color: var(--dangerSD);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.form-error-none
  .field__wrapper.field__has__error
  .select__SD
  .select__SD__control {
  border-style: none !important;
  border-color: transparent !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  transition-property: none;
  transition-duration: 0s;
}
.field__wrapper.field__has__error
  .select__SD
  .select__SD__control.select__SD__control--menu-is-open,
.field__wrapper.field__has__error
  .select__SD
  .select__SD__control.select__SD__control--menu-is-open:hover {
  border-width: 1px;
  border-color: var(--dangerSD);
  padding-top: 4px;
  padding-bottom: 3px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}
.field__wrapper.field__has__success .select__SD .select__SD__control {
  border-width: 1px;
  border-color: var(--successSD);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}
.field__wrapper.field__has__success
  .select__SD
  .select__SD__control.select__SD__control--menu-is-open,
.field__wrapper.field__has__success
  .select__SD
  .select__SD__control.select__SD__control--menu-is-open:hover {
  border-width: 1px;
  border-color: var(--successSD);
  padding-top: 4px;
  padding-bottom: 3px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

/* remove-down-arrow */
.remove__downArrow .select__SD div[class$='IndicatorsContainer'],
.remove__downArrow .select__SD .select__SD__indicators {
  display: none;
}
.remove__downArrow .select__SD div[class$='control'],
.remove__downArrow .select__SD div[class$='control']:hover,
.remove__downArrow .select__SD .select__SD__control,
.remove__downArrow .select__SD .select__SD__control:hover {
  padding-right: 10px;
}
.remove__downArrow
  .select__SD
  .select__SD__value-container.select__SD__value-container--is-multi {
  padding-right: 0px;
}
/* remove-down-arrow-end */

.migrationData__selectBox .select__SD div[class$='control'],
.migrationData__selectBox .select__SD div[class$='control']:hover,
.migrationData__selectBox .select__SD .select__SD__control,
.migrationData__selectBox .select__SD .select__SD__control:hover {
  background-color: var(--primaryColorSD200);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.migrationData__selectBox.migrationData__selectBoxDisabled
  .select__SD
  div[class$='control'],
.migrationData__selectBox.migrationData__selectBoxDisabled
  .select__SD
  div[class$='control']:hover,
.migrationData__selectBox.migrationData__selectBoxDisabled
  .select__SD
  .select__SD__control,
.migrationData__selectBox.migrationData__selectBoxDisabled
  .select__SD
  .select__SD__control:hover {
  background-color: var(--primaryBlackSD200);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.migrationData__selectBox.disabled {
  opacity: 1;
}
.migrationData__selectBox.disabled .select__SD div[class$='control'],
.migrationData__selectBox.disabled .select__SD div[class$='control']:hover,
.migrationData__selectBox.disabled .select__SD .select__SD__control,
.migrationData__selectBox.disabled .select__SD .select__SD__control:hover {
  background-color: var(--primaryBlackSD200);
}

.toEmailSelect .select__SD__multi-value {
  border-radius: 23px;
  background-color: var(--primaryColorSD50) !important;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 2px;
  padding-left: 4px;
}

.toEmailSelect .select__SD__multi-value:is(.dark *) {
  background-color: var(--customDark100) !important;
}

/* simpleDropdownWithTextArrow */
.simpleDropdownWithTextArrow .select__SD div[class$='control'],
.simpleDropdownWithTextArrow .select__SD div[class$='control']:hover,
.simpleDropdownWithTextArrow .select__SD .select__SD__control,
.simpleDropdownWithTextArrow .select__SD .select__SD__control:hover {
  display: inline-flex;
  width: auto;
  border-style: none;
  padding-left: 0px;
}
.simpleDropdownWithTextArrow .select__SD div[class$='ValueContainer'],
.simpleDropdownWithTextArrow .select__SD .select__SD__value-container {
  display: inline-flex;
  width: auto;
  flex: none;
  padding-right: 0px;
}
.simpleDropdownWithTextArrow .select__SD .select__SD__menu {
  width: 320px;
}
/* simpleDropdownWithTextArrow end */

/* notBoxSelect */
.notBoxSelect .select__SD div[class$='control'],
.notBoxSelect .select__SD div[class$='control']:hover,
.notBoxSelect .select__SD .select__SD__control,
.notBoxSelect .select__SD .select__SD__control:hover {
  min-height: unset !important;
  border-radius: 0px !important;
  border-style: none;
  padding: 0px !important;
}
/* .notBoxSelect .select__SD div[class$='ValueContainer'],
.notBoxSelect .select__SD .select__SD__value-container{
  @apply h-auto leading-none;
}
.notBoxSelect .select__SD .select__SD__single-value{
  @apply top-0;
}
.notBoxSelect .select__SD div[class$='IndicatorsContainer'],
.notBoxSelect .select__SD .select__SD__indicators{
  @apply mr-0;
}
*/
.notBoxSelect .select__SD .select__SD__menu-portal {
  width: 300px;
}
.notBoxSelect .select__SD div[class$='IndicatorsContainer'],
.notBoxSelect .select__SD .select__SD__indicators {
  margin-right: 0px !important;
}
.notBoxSelect .select__SD div[class$='ValueContainer'],
.notBoxSelect .select__SD .select__SD__value-container {
  min-width: 100px !important;
}
.availabilityScheduleBox .notBoxSelect {
  top: 1px;
  width: auto !important;
}
/* notBoxSelect end */

/* floatingInlineEditingDropdown */
.floatingInlineEditingDropdown .select__SD div[class$='IndicatorsContainer'],
.floatingInlineEditingDropdown .select__SD .select__SD__indicators {
  position: relative;
  z-index: 10;
}
.floatingInlineEditingDropdown .select__SD div[class$='indicatorContainer']:last-child,
.floatingInlineEditingDropdown .select__SD .select__SD__indicator-separator:last-child {
  z-index: 10;
  height: 100%;
}
.floatingInlineEditingDropdown .select__SD div[class$='indicatorContainer']:last-child svg,
.floatingInlineEditingDropdown .select__SD .select__SD__indicator-separator:last-child svg {
  height: 100%;
}
/* floatingInlineEditingDropdown end */

.expirationDateSelectBox .select__SD .select__SD__menu-list {
  max-height: 310px;
}.profile__ImgDrop .deleteBtn:hover svg {
    fill: var(--textWhiteSD)
}
/* checkbox */
/* normal-checkbox */
.custom__checkbox__SD{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.custom__checkbox__SD input{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}
.custom__checkbox__SD .label__SD{
  position: relative;
  margin-bottom: 0px;
  padding-left: 26px;
  font-family: Matter-Medium;
  font-size: 14px;
  color: var(--textSecondary);
}
.custom__checkbox__SD .label__SD::before{
  position: absolute;
  left: 3px;
  top: 2px;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  outline-style: solid;
  outline-width: 1px;
  outline-color: #D1D1D1;
  --tw-content: '';
  content: var(--tw-content);
}
.custom__checkbox__SD .label__SD::after{
  position: absolute;
  left: 5.5px;
  top: 6px;
  height: 5px;
  width: 9px;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  opacity: 0;
  --tw-content: '';
  content: var(--tw-content);
}
.custom__checkbox__SD .label__SD:is(.dark *)::before{
  content: var(--tw-content);
  outline-color: var(--darkModeBlackSD200);
}
.formPreview__wrapper .custom__checkbox__SD .label__SD::before{
  content: var(--tw-content);
  display: none;
}
.formPreview__wrapper .custom__checkbox__SD .label__SD::after{
  content: var(--tw-content);
  display: none;
}
.custom__checkbox__SD .label__SD .radioCheckBG{
  /* @apply absolute left-[3px] top-[2px] w-[14px] h-[14px] rounded-[2px] outline outline-1 outline-[#D1D1D1]; */
  position: absolute;
  left: 3px;
  top: calc(50% - 1px);
  height: 14px;
  width: 14px;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 2px;
  outline-style: solid;
  outline-width: 1px;
  outline-color: #D1D1D1;
}
.custom__checkbox__SD .label__SD .radioCheckActive{
  /* @apply absolute left-[5.5px] top-[6px] h-[5px] w-[9px] border-l-[2px] border-b-[2px] -rotate-45 opacity-0; */
  position: absolute;
  left: 5.5px;
  top: calc(50% - 2px);
  height: 5px;
  width: 9px;
  --tw-translate-y: -50%;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-left-width: 2px;
  border-bottom-width: 2px;
  opacity: 0;
}
.custom__checkbox__SD .label__SD .radioCheckActive.whiteTick{
  border-left-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.custom__checkbox__SD .label__SD .radioCheckActive.blackTick{
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.formPreview__wrapper .custom__checkbox__SD .label__SD .radioCheckBG,
.formPreview__wrapper .custom__checkbox__SD .label__SD .radioCheckActive{
  display: block;
}
.custom__checkbox__SD .label__SD .label__SD__BG{
  position: absolute;
  left: 3px;
  top: 2px;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: var(--iconColorSD);
}
.custom__checkbox__SD .label__SD .label__text{
  position: relative;
  top: -4px;
  max-width: none;
  overscroll-behavior: none;
  white-space: normal;
  overflow-wrap: break-word;
}
.custom__checkbox__SD input:hover + .label__SD::before{
  content: var(--tw-content);
  outline-color: var(--primaryColor2SD);
}
.custom__checkbox__SD input:hover + .label__SD .label__SD__BG{
  outline-color: var(--primaryColor2SD);
}
.custom__checkbox__SD input:checked + .label__SD::before,
.custom__checkbox__SD.active .label__SD::before{
  top: 1px;
  left: 1.5px;
  height: 17px;
  width: 17px;
  border-radius: 4px;
  background-color: var(--primaryColor2SD);
  content: var(--tw-content);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.custom__checkbox__SD input:checked + .label__SD::after,
.custom__checkbox__SD.active .label__SD::after{
  content: var(--tw-content);
  opacity: 1;
}
.custom__checkbox__SD input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.active .label__SD .radioCheckBG{
  /* @apply outline-none top-[1px] left-[1.5px] w-[17px] h-[17px] rounded-[4px] bg-primaryColor2SD; */
  top: calc(50% - 1px);
  left: 1.5px;
  height: 17px;
  width: 17px;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 4px;
  background-color: var(--primaryColor2SD);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.custom__checkbox__SD input:checked + .label__SD .radioCheckActive,
.custom__checkbox__SD.active .label__SD .radioCheckActive{
  opacity: 1;
}
.custom__checkbox__SD input:checked + .label__SD .label__SD__BG,
.custom__checkbox__SD.active .label__SD .label__SD__BG{
  top: 0.5px;
  left: 1.5px;
  height: 17px;
  width: 17px;
  border-radius: 4px;
  background-color: var(--primaryColor2SD);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
/* normal-checkbox-end */

/* medium-checkbox */
.custom__checkbox__SD.custom__checkbox__SD__medium .label__SD{
  padding-left: 28px;
  font-size: 16px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium .label__SD::before{
  top: 3px;
  height: 16px;
  content: var(--tw-content);
  width: 16px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium .label__SD::after{
  top: 8px;
  height: 5px;
  content: var(--tw-content);
  width: 10px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium .label__SD .radioCheckBG{
  top: 3px;
  height: 16px;
  width: 16px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium .label__SD .radioCheckActive{
  top: 8px;
  height: 5px;
  width: 10px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium .label__SD .label__SD__BG{
  height: 16px;
  width: 16px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium input:checked + .label__SD::before,
.custom__checkbox__SD.custom__checkbox__SD__medium.active .label__SD::before{
  top: 2px;
  height: 19px;
  content: var(--tw-content);
  width: 19px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium input:checked + .label__SD::after,
.custom__checkbox__SD.custom__checkbox__SD__medium.active .label__SD::after{
  top: 8px;
  content: var(--tw-content);
  left: 6px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.custom__checkbox__SD__medium.active .label__SD .radioCheckBG{
  top: 2px;
  height: 19px;
  width: 19px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium input:checked + .label__SD .radioCheckActive,
.custom__checkbox__SD.custom__checkbox__SD__medium.active .label__SD .radioCheckActive{
  top: 8px;
  left: 6px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium input:checked + .label__SD .label__SD__BG,
.custom__checkbox__SD.custom__checkbox__SD__medium.active .label__SD .label__SD__BG{
  height: 19px;
  width: 19px;
}
/* medium-checkbox-end */

/* large-checkbox */
.custom__checkbox__SD.custom__checkbox__SD__large .label__SD{
  padding-left: 32px;
  font-size: 18px;
}
.custom__checkbox__SD.custom__checkbox__SD__large .label__SD::before{
  top: 4px;
  height: 18px;
  content: var(--tw-content);
  width: 18px;
}
.custom__checkbox__SD.custom__checkbox__SD__large .label__SD::after{
  top: 8px;
  left: 7px;
  height: 5px;
  content: var(--tw-content);
  width: 10px;
}
.custom__checkbox__SD.custom__checkbox__SD__large .label__SD .radioCheckBG{
  top: 4px;
  height: 18px;
  width: 18px;
}
.custom__checkbox__SD.custom__checkbox__SD__large .label__SD .radioCheckActive{
  top: 8px;
  left: 7px;
  height: 5px;
  width: 10px;
}
.custom__checkbox__SD.custom__checkbox__SD__large .label__SD .label__SD__BG{
  height: 18px;
  width: 18px;
}
.custom__checkbox__SD.custom__checkbox__SD__large input:checked + .label__SD::before,
.custom__checkbox__SD.custom__checkbox__SD__large.active .label__SD::before{
  top: 2px;
  height: 21px;
  content: var(--tw-content);
  width: 21px;
}
.custom__checkbox__SD.custom__checkbox__SD__large input:checked + .label__SD::after,
.custom__checkbox__SD.custom__checkbox__SD__large.active .label__SD::after{
  top: 9px;
  content: var(--tw-content);
  left: 7px;
}
.custom__checkbox__SD.custom__checkbox__SD__large input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.custom__checkbox__SD__large.active .label__SD .radioCheckBG{
  top: 2px;
  height: 21px;
  width: 21px;
}
.custom__checkbox__SD.custom__checkbox__SD__large input:checked + .label__SD .radioCheckActive,
.custom__checkbox__SD.custom__checkbox__SD__large.active .label__SD .radioCheckActive{
  top: 9px;
  left: 7px;
}
.custom__checkbox__SD.custom__checkbox__SD__large input:checked + .label__SD .label__SD__BG,
.custom__checkbox__SD.custom__checkbox__SD__large.active .label__SD .label__SD__BG{
  height: 21px;
  width: 21px;
}
/* large-checkbox-end */

/* normal-checkbox-without-label */
.custom__checkbox__SD.without__label{
  width: 18px;
  height: 18px;
  font-size: 0px;
}
.custom__checkbox__SD.without__label .label__SD{
  height: 100%;
  width: 100%;
  padding-left: 0px;
  font-size: 0px;
}
.custom__checkbox__SD.without__label .label__SD::before{
  top: 1px;
  content: var(--tw-content);
  left: 1px;
}
.custom__checkbox__SD.without__label .label__SD::after{
  top: 4px;
  content: var(--tw-content);
  left: 3px;
}
.custom__checkbox__SD.without__label .label__SD .radioCheckBG{
  top: 1px;
  left: 1px;
}
.custom__checkbox__SD.without__label .label__SD .radioCheckBG::after{
  top: 4px;
  content: var(--tw-content);
  left: 3px;
}
.custom__checkbox__SD.without__label .label__SD .radioCheckActive{
  top: 4px;
  left: 3px;
}
.custom__checkbox__SD.without__label .label__SD .label__SD__BG{
  top: -1px;
  left: 0px;
}
.custom__checkbox__SD.without__label input:checked + .label__SD::before,
.custom__checkbox__SD.without__label.active .label__SD::before{
  top: 0px;
  content: var(--tw-content);
  left: 0px;
}
.custom__checkbox__SD.without__label input:checked + .label__SD::after,
.custom__checkbox__SD.without__label.active .label__SD::after{
  top: 5px;
  content: var(--tw-content);
  left: 4px;
}
.custom__checkbox__SD.without__label input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.without__label.active .label__SD .radioCheckBG{
  top: 0px;
  left: 0px;
}
.custom__checkbox__SD.without__label input:checked + .label__SD .radioCheckActive,
.custom__checkbox__SD.without__label.active .label__SD .radioCheckActive{
  top: 5px;
  left: 4px;
}
.custom__checkbox__SD.without__label input:checked + .label__SD .label__SD__BG,
.custom__checkbox__SD.without__label.active .label__SD .label__SD__BG{
  top: -3px;
  left: -2px;
  height: 18px;
  width: 18px;
}
/* normal-checkbox-without-label-end */

/* medium-checkbox-without-label */
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label .label__SD{
  height: 100%;
  width: 100%;
  padding-left: 0px;
  font-size: 0px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label .label__SD::before{
  top: 0px;
  content: var(--tw-content);
  left: 0px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label .label__SD::after{
  top: 4px;
  content: var(--tw-content);
  left: 2px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label .label__SD .radioCheckBG{
  top: 0px;
  left: 0px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label .label__SD .radioCheckBG::after{
  top: 4px;
  content: var(--tw-content);
  left: 2px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label .label__SD .radioCheckActive{
  top: 4px;
  left: 2px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label .label__SD .label__SD__BG{
  top: 0px;
  left: 0px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label input:checked + .label__SD::before,
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label.active .label__SD::before{
  top: -2px;
  content: var(--tw-content);
  left: -2px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label input:checked + .label__SD::after,
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label.active .label__SD::after{
  top: 4px;
  content: var(--tw-content);
  left: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label.active .label__SD .radioCheckBG{
  top: -2px;
  left: -2px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label input:checked + .label__SD .radioCheckActive,
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label.active .label__SD .radioCheckActive{
  top: 4px;
  left: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label input:checked + .label__SD .label__SD__BG,
.custom__checkbox__SD.custom__checkbox__SD__medium.without__label.active .label__SD .label__SD__BG{
  top: -2px;
  left: -2px;
}
/* medium-checkbox-without-label-end */

/* large-checkbox-without-label */
.custom__checkbox__SD.custom__checkbox__SD__large.without__label{
  height: 18px;
  width: 18px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label .label__SD{
  height: 100%;
  width: 100%;
  padding-left: 0px;
  font-size: 0px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label .label__SD::before{
  top: 0px;
  content: var(--tw-content);
  left: 0px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label .label__SD::after{
  top: 5px;
  content: var(--tw-content);
  left: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label .label__SD .radioCheckBG{
  top: 0px;
  left: 0px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label .label__SD .radioCheckBG::after{
  top: 5px;
  content: var(--tw-content);
  left: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label .label__SD .radioCheckActive{
  top: 5px;
  left: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label input:checked + .label__SD::before,
.custom__checkbox__SD.custom__checkbox__SD__large.without__label.active .label__SD::before{
  top: -2px;
  content: var(--tw-content);
  left: -2px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label input:checked + .label__SD::after,
.custom__checkbox__SD.custom__checkbox__SD__large.without__label.active .label__SD::after{
  top: 5px;
  content: var(--tw-content);
  left: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label input:checked + .label__SD,
.custom__checkbox__SD.custom__checkbox__SD__large.without__label .label__SD .label__SD__BG{
  top: 0px;
  left: 0px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.custom__checkbox__SD__large.without__label.active .label__SD .radioCheckBG{
  top: -2px;
  left: -2px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label input:checked + .label__SD .radioCheckActive,
.custom__checkbox__SD.custom__checkbox__SD__large.without__label.active .label__SD .radioCheckActive{
  top: 5px;
  left: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.without__label.active .label__SD .label__SD__BG{
  top: -2px;
  left: -2px;
}
/* large-checkbox-without-label-end */

/* normal-checkbox-with-left-label */
.custom__checkbox__SD.label__left .label__SD{
  padding-left: 0px;
  padding-right: 27px;
}
.custom__checkbox__SD.label__left .label__SD::before{
  left: unset;
  content: var(--tw-content);
  right: 3px;
}
.custom__checkbox__SD.label__left .label__SD::after{
  left: unset;
  content: var(--tw-content);
  right: 6px;
}
.custom__checkbox__SD.label__left .label__SD .radioCheckBG{
  left: unset;
  right: 3px;
}
.custom__checkbox__SD.label__left .label__SD .radioCheckActive{
  left: unset;
  right: 6px;
}
.custom__checkbox__SD.label__left .label__SD .label__SD__BG{
  left: unset;
  right: 3px;
}
.custom__checkbox__SD.label__left input:checked + .label__SD::before,
.custom__checkbox__SD.label__left.active .label__SD::before{
  left: unset;
  content: var(--tw-content);
  right: 2px;
}
.custom__checkbox__SD.label__left input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.label__left.active .label__SD .radioCheckBG{
  left: unset;
  right: 2px;
}
.custom__checkbox__SD.label__left input:checked + .label__SD .label__SD__BG,
.custom__checkbox__SD.label__left.active .label__SD .label__SD__BG{
  left: unset;
  right: 2px;
}
/* normal-checkbox-with-left-label-end */

/* medium-checkbox-with-left-label */
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left .label__SD{
  padding-left: 0px;
  padding-right: 30px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left .label__SD::before{
  left: unset;
  content: var(--tw-content);
  right: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left .label__SD::after{
  left: unset;
  content: var(--tw-content);
  right: 6.5px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left .label__SD .radioCheckBG{
  left: unset;
  right: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left .label__SD .radioCheckActive{
  left: unset;
  right: 6.5px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left .label__SD .label__SD__BG{
  left: unset;
  right: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left input:checked + .label__SD::before,
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left.active .label__SD::before{
  left: unset;
  content: var(--tw-content);
  right: 2px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left input:checked + .label__SD::after,
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left.active .label__SD::after{
  left: unset;
  content: var(--tw-content);
  right: 6px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left.active .label__SD .radioCheckBG{
  left: unset;
  right: 2px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left input:checked + .label__SD .radioCheckActive,
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left.active .label__SD .radioCheckActive{
  left: unset;
  right: 6px;
}
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left input:checked + .label__SD .label__SD__BG,
.custom__checkbox__SD.custom__checkbox__SD__medium.label__left.active .label__SD .label__SD__BG{
  left: unset;
  right: 2px;
}
/* medium-checkbox-with-left-label-end */

/* large-checkbox-with-left-label */
.custom__checkbox__SD.custom__checkbox__SD__large.label__left .label__SD{
  padding-left: 0px;
  padding-right: 32px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left .label__SD::before{
  left: unset;
  content: var(--tw-content);
  right: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left .label__SD::after{
  left: unset;
  content: var(--tw-content);
  right: 7px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left .label__SD .radioCheckBG{
  left: unset;
  right: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left .label__SD .radioCheckActive{
  left: unset;
  right: 7px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left .label__SD .label__SD__BG{
  left: unset;
  right: 3px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left input:checked + .label__SD::before,
.custom__checkbox__SD.custom__checkbox__SD__large.label__left.active .label__SD::before{
  left: unset;
  content: var(--tw-content);
  right: 2px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left input:checked + .label__SD::after,
.custom__checkbox__SD.custom__checkbox__SD__large.label__left.active .label__SD::after{
  content: var(--tw-content);
  left: unset;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left input:checked + .label__SD .radioCheckBG,
.custom__checkbox__SD.custom__checkbox__SD__large.label__left.active .label__SD .radioCheckBG{
  left: unset;
  right: 2px;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left input:checked + .label__SD .radioCheckActive,
.custom__checkbox__SD.custom__checkbox__SD__large.label__left.active .label__SD .radioCheckActive{
  left: unset;
}
.custom__checkbox__SD.custom__checkbox__SD__large.label__left input:checked + .label__SD .label__SD__BG,
.custom__checkbox__SD.custom__checkbox__SD__large.label__left.active .label__SD .label__SD__BG{
  left: unset;
  right: 2px;
}
/* large-checkbox-with-left-label-end */
/* checkbox-end */

/* boolean checkbox css */
.checkBoxMainWrapper.booleanCheckBox{
  display: flex;
  align-items: flex-start;
}
.checkBoxMainWrapper.booleanCheckBox .custom__checkbox__single{
  position: relative;
  top: 2px;
  order: -1;
  margin-right: 10px;
  height: 16px;
  width: 16px;
}
.checkBoxMainWrapper.booleanCheckBox .label__SD{
  display: inline-flex;
  width: auto;
  max-width: calc(100% - 26px);
  align-items: flex-start;
}
.checkBoxMainWrapper.booleanCheckBox .label__SD .label__text{
  width: auto;
  max-width: 100%;
  white-space: normal;
}
/* boolean checkbox css end */
/* color-picker-round */
.color__picker__round__SD {
  display:inline-flex;
  height:20px;
  width:20px;
  align-items:center;
  justify-content:center;
  border-radius:4px;
}
.color__picker__round__SD .color__wrapper__SD {
  position:relative;
  height:100%;
  width:100%;
  cursor:pointer;
  border-radius:4px;
  border-width:0px;
  background-color:transparent;
  padding:0px;
}
.color__picker__round__SD .color__wrapper__SD .i__Icon {
  pointer-events:none;
  position:absolute;
  inset:0px;
  z-index:6;
  display:none;
  align-items:center;
  justify-content:center;
  padding:4px;
}
.color__picker__round__SD .color__wrapper__SD .i__Icon svg {
  fill:#ffffff !important;
}
.color__picker__round__SD .color__wrapper__SD .i__Icon.i__IconAnimated svg[stroke],
.color__picker__round__SD .color__wrapper__SD .i__Icon.i__IconAnimated svg *[stroke] {
  stroke:#ffffff !important;
}
.color__picker__round__SD .color__wrapper__SD .i__Icon.i__IconAnimated svg[fill],
.color__picker__round__SD .color__wrapper__SD .i__Icon.i__IconAnimated svg *[fill] {
  fill:#ffffff !important;
}
.color__picker__round__SD .color__wrapper__SD .color__picker__img {
  position:absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  -o-object-fit:cover;
     object-fit:cover;
  -o-object-position:center;
     object-position:center;
}
.color__picker__round__SD .color__wrapper__SD input {
  position:absolute;
  top:0px;
  left:0px;
  z-index:5;
  height:100%;
  width:100%;
  cursor:pointer;
  opacity:0;
}
.color__picker__round__SD.dark__outline {
  /* @apply border-textTertiary; */
}
.color__picker__round__SD.active .color__wrapper__SD .i__Icon {
  display:flex;
}
/* color-picker-round */

.colorPickerTippy.tippy-box{
  background-color:transparent;
  max-width:unset !important;
  box-shadow:unset;
}
.colorPickerTippy.tippy-box .tippy-content{
  padding:0px 0px;
}
.colorPickerTippy.tippy-box .e-color-picker.e-container{
  box-shadow: var(--raiseShadow);
  border-radius: 10px;
  overflow: hidden;
}
.colorPickerTippy.tippy-box .e-color-picker.e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle:not(.e-tab-handle).e-handle-start:not(.e-tab-handle),
.colorPickerTippy.tippy-box .e-color-picker.e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle,
.colorPickerTippy.tippy-box .e-color-picker.e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle-start,
.colorPickerTippy.tippy-box .e-color-picker.e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle{
  background-color: var(--bgWhiteSD);
  box-shadow: var(--raiseShadow);
  border: 1px solid var(--primaryColorSD);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: calc(48% - 7px);
}
.colorPickerTippy.tippy-box .e-color-picker.e-container .e-slider-preview .e-preview-container {
  border: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--raiseShadow);
  top:-1px;
}
.colorPickerTippy.tippy-box .e-color-picker.e-container .e-css.e-btn.e-flat.e-primary{
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border-width: 0px !important;
    background-color: var(--primaryColorSD) !important;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: center;
    font-family: Biotif-SemiBold;
    font-size: 12px;
    line-height: 14px;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
    --tw-shadow: var(--purpleButtonDropShadow) !important;
    --tw-shadow-colored: var(--purpleButtonDropShadow) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--primaryColorSD);
    transition-duration: 300ms;
}
.colorPickerTippy.tippy-box .e-color-picker.e-container .e-css.e-btn.e-flat.e-primary:hover{
    background-color: var(--primaryColorSD700) !important;
    outline-color: var(--primaryColorSD700);
}
/* Merge Tag Suggestion Styles */

/* ============================================
   Tiptap Editor Content Styles
   These styles ensure pasted HTML content
   displays correctly with proper formatting.
   Using !important to override Tailwind resets.
   ============================================ */

/* Tiptap editor wrapper - ensures proper styling scope */
.tiptap-editor-wrapper {
  width: 100%;
}

/* Base editor styles */
.ProseMirror,
.tiptap-editor-wrapper .ProseMirror,
.textBlockRichTextEditor .ProseMirror {
  outline: none !important;
  line-height: 1.6;
}

.ProseMirror:focus,
.tiptap-editor-wrapper .ProseMirror:focus,
.textBlockRichTextEditor .ProseMirror:focus {
  outline: none !important;
}

/* Heading styles - using !important to override Tailwind resets.
   Each rule is split in two so the inline line-height set by the Tiptap
   LineHeight extension (Google-Docs spacing) wins for headings/paragraphs
   that carry an inline `style="line-height: …"`. */
.ProseMirror h1,
.tiptap-editor-wrapper .ProseMirror h1,
.textBlockRichTextEditor .ProseMirror h1 {
  font-size: 2em !important;
  font-weight: bold !important;
  margin: 0.67em 0 !important;
  display: block !important;
}
.ProseMirror h1:not([style*="line-height"]),
.tiptap-editor-wrapper .ProseMirror h1:not([style*="line-height"]),
.textBlockRichTextEditor .ProseMirror h1:not([style*="line-height"]) {
  line-height: 1.2 !important;
}

.ProseMirror h2,
.tiptap-editor-wrapper .ProseMirror h2,
.textBlockRichTextEditor .ProseMirror h2 {
  font-size: 1.5em !important;
  font-weight: bold !important;
  margin: 0.83em 0 !important;
  display: block !important;
}
.ProseMirror h2:not([style*="line-height"]),
.tiptap-editor-wrapper .ProseMirror h2:not([style*="line-height"]),
.textBlockRichTextEditor .ProseMirror h2:not([style*="line-height"]) {
  line-height: 1.3 !important;
}

.ProseMirror h3,
.tiptap-editor-wrapper .ProseMirror h3,
.textBlockRichTextEditor .ProseMirror h3 {
  font-size: 1.17em !important;
  font-weight: bold !important;
  margin: 1em 0 !important;
  display: block !important;
}
.ProseMirror h3:not([style*="line-height"]),
.tiptap-editor-wrapper .ProseMirror h3:not([style*="line-height"]),
.textBlockRichTextEditor .ProseMirror h3:not([style*="line-height"]) {
  line-height: 1.4 !important;
}

.ProseMirror h4,
.tiptap-editor-wrapper .ProseMirror h4,
.textBlockRichTextEditor .ProseMirror h4 {
  font-size: 1em !important;
  font-weight: bold !important;
  margin: 1.33em 0 !important;
  display: block !important;
}
.ProseMirror h4:not([style*="line-height"]),
.tiptap-editor-wrapper .ProseMirror h4:not([style*="line-height"]),
.textBlockRichTextEditor .ProseMirror h4:not([style*="line-height"]) {
  line-height: 1.5 !important;
}

.ProseMirror h5,
.tiptap-editor-wrapper .ProseMirror h5,
.textBlockRichTextEditor .ProseMirror h5 {
  font-size: 0.83em !important;
  font-weight: bold !important;
  margin: 1.67em 0 !important;
  display: block !important;
}
.ProseMirror h5:not([style*="line-height"]),
.tiptap-editor-wrapper .ProseMirror h5:not([style*="line-height"]),
.textBlockRichTextEditor .ProseMirror h5:not([style*="line-height"]) {
  line-height: 1.5 !important;
}

.ProseMirror h6,
.tiptap-editor-wrapper .ProseMirror h6,
.textBlockRichTextEditor .ProseMirror h6 {
  font-size: 0.67em !important;
  font-weight: bold !important;
  margin: 2.33em 0 !important;
  display: block !important;
}
.ProseMirror h6:not([style*="line-height"]),
.tiptap-editor-wrapper .ProseMirror h6:not([style*="line-height"]),
.textBlockRichTextEditor .ProseMirror h6:not([style*="line-height"]) {
  line-height: 1.5 !important;
}

/* Paragraph styles — split so inline line-height (Tiptap LineHeight) wins. */
.ProseMirror p,
.tiptap-editor-wrapper .ProseMirror p,
.textBlockRichTextEditor .ProseMirror p {
  margin: 0 0 10px 0 !important;
  line-height:normal;
  display: block !important;
}
/* Default spacing = Single (line-height: 1) — matches Google Docs default.
   Inline line-height set by the Tiptap LineHeight extension wins via the
   :not([style*="line-height"]) guard above. */
.ProseMirror p:not([style*="line-height"]),
.tiptap-editor-wrapper .ProseMirror p:not([style*="line-height"]),
.textBlockRichTextEditor .ProseMirror p:not([style*="line-height"]) {
  line-height: 1 !important;
}

.ProseMirror p:last-child,
.tiptap-editor-wrapper .ProseMirror p:last-child,
.textBlockRichTextEditor .ProseMirror p:last-child {
  margin-bottom: 0 !important;
}

/* List styles - using !important to override Tailwind resets */
.ProseMirror ul,
.tiptap-editor-wrapper .ProseMirror ul,
.textBlockRichTextEditor .ProseMirror ul {
  list-style-type: disc !important;
  padding-left: 1.5em !important;
  margin: 0.5em 0 1em 0 !important;
  display: block !important;
}

.ProseMirror ol,
.tiptap-editor-wrapper .ProseMirror ol,
.textBlockRichTextEditor .ProseMirror ol {
  list-style-type: decimal !important;
  padding-left: 1.5em !important;
  margin: 0.5em 0 1em 0 !important;
  display: block !important;
}

.ProseMirror li,
.tiptap-editor-wrapper .ProseMirror li,
.textBlockRichTextEditor .ProseMirror li {
  margin: 0.25em 0 !important;
  display: list-item !important;
}
/* Default spacing = Single (line-height: 1) — matches Google Docs default.
   Inline line-height (set by the Tiptap LineHeight extension on listItem)
   wins so the user's chosen Google-Docs spacing actually renders. */
.ProseMirror li:not([style*="line-height"]),
.tiptap-editor-wrapper .ProseMirror li:not([style*="line-height"]),
.textBlockRichTextEditor .ProseMirror li:not([style*="line-height"]) {
  line-height: 1 !important;
}

.ProseMirror li p,
.tiptap-editor-wrapper .ProseMirror li p,
.textBlockRichTextEditor .ProseMirror li p {
  margin: 0 !important;
}

/* Nested list styles */
.ProseMirror ul ul,
.ProseMirror ol ul,
.tiptap-editor-wrapper .ProseMirror ul ul,
.tiptap-editor-wrapper .ProseMirror ol ul,
.textBlockRichTextEditor .ProseMirror ul ul,
.textBlockRichTextEditor .ProseMirror ol ul {
  list-style-type: circle !important;
  margin: 0.25em 0 !important;
}

.ProseMirror ul ul ul,
.ProseMirror ol ul ul,
.ProseMirror ul ol ul,
.ProseMirror ol ol ul,
.tiptap-editor-wrapper .ProseMirror ul ul ul,
.tiptap-editor-wrapper .ProseMirror ol ul ul,
.tiptap-editor-wrapper .ProseMirror ul ol ul,
.tiptap-editor-wrapper .ProseMirror ol ol ul,
.textBlockRichTextEditor .ProseMirror ul ul ul,
.textBlockRichTextEditor .ProseMirror ol ul ul,
.textBlockRichTextEditor .ProseMirror ul ol ul,
.textBlockRichTextEditor .ProseMirror ol ol ul {
  list-style-type: square !important;
}

/* Nested ordered list cycle: 1 → a → i → A → I → 1 ...
 * matches the Word / Google Docs convention so each nesting level reads
 * unambiguously different from its parent. */
.ProseMirror ul ol,
.ProseMirror ol ol,
.tiptap-editor-wrapper .ProseMirror ul ol,
.tiptap-editor-wrapper .ProseMirror ol ol,
.textBlockRichTextEditor .ProseMirror ul ol,
.textBlockRichTextEditor .ProseMirror ol ol {
  list-style-type: lower-alpha !important;
  margin: 0.25em 0 !important;
}

.ProseMirror ol ol ol,
.tiptap-editor-wrapper .ProseMirror ol ol ol,
.textBlockRichTextEditor .ProseMirror ol ol ol {
  list-style-type: lower-roman !important;
}

.ProseMirror ol ol ol ol,
.tiptap-editor-wrapper .ProseMirror ol ol ol ol,
.textBlockRichTextEditor .ProseMirror ol ol ol ol {
  list-style-type: upper-alpha !important;
}

.ProseMirror ol ol ol ol ol,
.tiptap-editor-wrapper .ProseMirror ol ol ol ol ol,
.textBlockRichTextEditor .ProseMirror ol ol ol ol ol {
  list-style-type: upper-roman !important;
}

.ProseMirror ol ol ol ol ol ol,
.tiptap-editor-wrapper .ProseMirror ol ol ol ol ol ol,
.textBlockRichTextEditor .ProseMirror ol ol ol ol ol ol {
  list-style-type: decimal !important;
}

/* Text formatting styles */
.ProseMirror strong,
.ProseMirror b,
.tiptap-editor-wrapper .ProseMirror strong,
.tiptap-editor-wrapper .ProseMirror b,
.textBlockRichTextEditor .ProseMirror strong,
.textBlockRichTextEditor .ProseMirror b {
  font-weight: bold !important;
}

.ProseMirror em,
.ProseMirror i,
.tiptap-editor-wrapper .ProseMirror em,
.tiptap-editor-wrapper .ProseMirror i,
.textBlockRichTextEditor .ProseMirror em,
.textBlockRichTextEditor .ProseMirror i {
  font-style: italic !important;
}

.ProseMirror u,
.tiptap-editor-wrapper .ProseMirror u,
.textBlockRichTextEditor .ProseMirror u {
  text-decoration: underline !important;
}

.ProseMirror s,
.ProseMirror strike,
.tiptap-editor-wrapper .ProseMirror s,
.tiptap-editor-wrapper .ProseMirror strike,
.textBlockRichTextEditor .ProseMirror s,
.textBlockRichTextEditor .ProseMirror strike {
  text-decoration: line-through !important;
}

/* Blockquote styles */
.ProseMirror blockquote,
.tiptap-editor-wrapper .ProseMirror blockquote,
.textBlockRichTextEditor .ProseMirror blockquote {
  border-left: 3px solid #ccc !important;
  margin: 1em 0 !important;
  padding-left: 1em !important;
  color: #666 !important;
  font-style: italic !important;
  display: block !important;
}

/* Horizontal rule */
.ProseMirror hr,
.tiptap-editor-wrapper .ProseMirror hr,
.textBlockRichTextEditor .ProseMirror hr {
  border: none !important;
  border-top: 1px solid #ccc !important;
  margin: 1.5em 0 !important;
  display: block !important;
}

/* Link styles */
.ProseMirror a,
.tiptap-editor-wrapper .ProseMirror a,
.textBlockRichTextEditor .ProseMirror a {
  color: var(--link-color, #0066CC) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.ProseMirror a:hover,
.tiptap-editor-wrapper .ProseMirror a:hover,
.textBlockRichTextEditor .ProseMirror a:hover {
  opacity: 1;
}

/* Code styles (if enabled) */
.ProseMirror code,
.tiptap-editor-wrapper .ProseMirror code,
.textBlockRichTextEditor .ProseMirror code {
  background-color: #f4f4f4 !important;
  padding: 0.125em 0.25em !important;
  border-radius: 3px !important;
  font-family: monospace !important;
  font-size: 0.9em !important;
}

.ProseMirror pre,
.tiptap-editor-wrapper .ProseMirror pre,
.textBlockRichTextEditor .ProseMirror pre {
  background-color: #f4f4f4 !important;
  padding: 1em !important;
  border-radius: 4px !important;
  overflow-x: auto !important;
  font-family: monospace !important;
  font-size: 0.9em !important;
  margin: 1em 0 !important;
  display: block !important;
}

/* Placeholder text */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #adb5bd;
  pointer-events: none;
  height: 0;
}

/* Selection styles */
.ProseMirror ::-moz-selection {
  background-color: #0066CC33;
}
.ProseMirror ::selection {
  background-color: #0066CC33;
}

/* Ensure proper display for all block elements */
.ProseMirror > *,
.tiptap-editor-wrapper .ProseMirror > *,
.textBlockRichTextEditor .ProseMirror > * {
  margin-bottom: 0.5em;
}

.ProseMirror > *:last-child,
.tiptap-editor-wrapper .ProseMirror > *:last-child,
.textBlockRichTextEditor .ProseMirror > *:last-child {
  margin-bottom: 0;
}

/* ============================================
   End of Tiptap Editor Content Styles
   ============================================ */

/* Active suggestion decoration - highlights the trigger + query */
.merge-tag-suggestion-active {
  background-color: #FF6A001A;
  border-radius: 2px;
}

/* Merge field span styling */
span[data-value][data-import-replace-field],
.merge-field-node {
  color: #FF6A00;
  cursor: pointer;
  display: inline;
  line-height: inherit;
  vertical-align: baseline;
}

/* Merge field selected state - when node is directly selected */
.ProseMirror span[data-value][data-import-replace-field].ProseMirror-selectednode,
.ProseMirror .merge-field-node.ProseMirror-selectednode,
span[data-value][data-import-replace-field].ProseMirror-selectednode,
.merge-field-node.ProseMirror-selectednode {
  background-color: #3390B8 !important;
  color: #ffffff !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  padding: 3px 2px !important;
  margin: -3px -2px !important;
}

/* Merge field selected state - when within a text selection range (via decoration) */
.ProseMirror span[data-value][data-import-replace-field].merge-field-selected,
.ProseMirror .merge-field-node.merge-field-selected,
span[data-value][data-import-replace-field].merge-field-selected,
.merge-field-node.merge-field-selected,
.merge-field-selected {
  background-color: #3390B8 !important;
  color: #ffffff !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  padding: 4px 2px !important;
  margin: -3px -2px !important;
}

/* Merge field dropdown styles */
.merge-field-dropdown {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 12px #00000026;
}

.dark .merge-field-dropdown {
  background-color: #1f2937;
  border-color: #374151;
}

/* Tiptap merge toolbar */
.tiptap-merge-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
}

.dark .tiptap-merge-toolbar {
  background-color: #1f2937;
  border-color: #374151;
}

.tiptap-merge-toolbar .merge-tag-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tiptap-merge-toolbar .merge-tag-btn:hover {
  background-color: #e5e7eb;
}

.dark .tiptap-merge-toolbar .merge-tag-btn:hover {
  background-color: #374151;
}

/* Keyboard shortcut hint */
.tiptap-merge-toolbar kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-family: monospace;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
}

.dark .tiptap-merge-toolbar kbd {
  background-color: #374151;
}
.builder-media-choices { margin: 16px 0; }
.builder-media-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.builder-media-intro > span { color: var(--primaryColor2SD); font-size: 26px; }
.builder-media-intro h4 { color: var(--textDark); font: 16px/1.3 Matter-SemiBold, sans-serif; margin: 0 0 4px; }
.builder-media-intro p { color: var(--textSecondary); font-size: 12px; line-height: 1.4; margin: 0; }
.builder-media-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.builder-media-choices .builder-media-card { position: relative; min-width: 0; width: 100%; height: auto; min-height: 138px; padding: 16px 10px; border: 1px solid var(--lightBorderSD); border-radius: 18px; background: var(--primaryColor2SD50); color: var(--textDark); white-space: normal; cursor: pointer; }
.builder-media-card::before, .builder-media-card::after { display: none; }
.builder-media-card .btn__text, .builder-media-device { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.builder-media-card .btn__text { width: 100%; }
.builder-media-card .i__Icon { width: 34px; height: 34px; padding: 6px; border-radius: 11px; background: var(--bgWhiteSD); }
.builder-media-library .i__Icon svg { fill: var(--primaryColor2SD); }
.builder-media-card strong { font: 14px/1.3 Matter-SemiBold, sans-serif; }
.builder-media-card span { font: 11px/1.4 Matter-Regular, sans-serif; }
.builder-media-choices .builder-media-device { background: var(--primaryColorSD50); border-style: dashed; }
.builder-media-device .i__Icon svg { fill: var(--primaryColorSD); }
.builder-media-device input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.builder-media-card:focus-visible, .builder-media-device:focus-within { outline: 3px solid var(--primaryColorSD); outline-offset: 3px; }
.builder-media-choices .builder-media-card:hover { border-color: var(--primaryColor2SD); box-shadow: var(--mediumFloatShadow); }
.builder-media-choices .builder-media-device.is-dragging { background: var(--successSD50); border: 2px dashed var(--successSD700); }
.builder-media-card:disabled, .builder-media-card.is-busy { opacity: .6; cursor: wait; }
.builder-media-hint { margin-top: 10px; font-size: 11px; color: var(--textSecondary); text-align: center; }
.builder-media-error { margin-top: 8px; color: var(--dangerSD); font-size: 12px; }
.builder-media-preview { border: 1px solid var(--lightBorderSD); border-radius: 18px; overflow: hidden; background: var(--bgSurface); }

.builder-media-choices.freeLayoutBackgroundChoices .builder-media-card { min-height: 88px; }
.freeLayoutBackgroundChoices .builder-media-card[aria-pressed="true"] { border: 2px solid var(--primaryColorSD); box-shadow: 0 0 0 1px var(--primaryColorSD); }
.freeLayoutBackgroundSwatch { display: block; width: 34px; height: 34px; border-radius: 11px; background: var(--primaryColor2SD); border: 6px solid var(--bgWhiteSD); }
.toggle__menu__btn {
    position: relative;
    top: 1px;
    height: 30px;
    width: 28px;
    border-radius: 5px;
    padding: 3px
}
.toggle__menu__btn:hover {
    background-color: var(--primaryBlackSD100)
}
.toggle__menu__btn svg {
    fill: var(--textSecondary)
}
.toggle__menu__btn:hover svg {
    fill: var(--textDark)
}
/* DynamicTypeField Seamless UI Styles */

/* Main seamless container */
.dynamic-type-field-seamless {
  display: flex;
  align-items: stretch;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  overflow: hidden;
  transition: border-color 0.15s ease-in-out;
  background: white;
}

.dynamic-type-field-seamless:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dynamic-type-field-seamless.error {
  border-color: #ef4444;
}

.dynamic-type-field-seamless.error:focus-within {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Type selector wrapper */
.dynamic-type-selector-wrapper {
  flex-shrink: 0;
  background-color: #f9fafb;
  border-right: 1px solid #e5e7eb;
  min-width: 120px;
}

/* Override SelectField styles for seamless integration */
.dynamic-type-selector-wrapper .field__wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.dynamic-type-selector-wrapper .field__wrapper.active {
  border: none !important;
  box-shadow: none !important;
}

.dynamic-type-selector-wrapper .field__inner__wrapper {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Hide labels in type selector */
.dynamic-type-selector-wrapper .field__wrapper label {
  display: none !important;
}

/* Style the react-select component */
.dynamic-type-selector-wrapper .select__SD {
  border: none !important;
  background: transparent !important;
}

.dynamic-type-selector-wrapper .select__SD__control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 2.5rem !important;
  cursor: pointer !important;
}

.dynamic-type-selector-wrapper .select__SD__control--is-focused {
  border: none !important;
  box-shadow: none !important;
}

.dynamic-type-selector-wrapper .select__SD__value-container {
  padding: 0.5rem 0.75rem !important;
}

.dynamic-type-selector-wrapper .select__SD__single-value {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
}

.dynamic-type-selector-wrapper .select__SD__indicator-separator {
  display: none !important;
}

.dynamic-type-selector-wrapper .select__SD__dropdown-indicator {
  padding: 0.5rem !important;
  color: #9ca3af !important;
}

.dynamic-type-selector-wrapper .select__SD__menu {
  margin-top: 0 !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.dynamic-type-selector-wrapper .select__SD__option {
  font-size: 0.875rem !important;
}

/* Hide error messages inside type selector */
.dynamic-type-selector-wrapper .error__text {
  display: none !important;
}

/* Value field wrapper */
.dynamic-type-value-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.5rem;
}

/* Value field container */
.dynamic-type-value-field {
  width: 100%;
  position: relative;
}

/* Override common field component styles for seamless integration */
.dynamic-type-value-field .field__wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
}

.dynamic-type-value-field .field__wrapper.active {
  border: none !important;
  box-shadow: none !important;
}

.dynamic-type-value-field .field__wrapper .field__inner__wrapper {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Hide labels in seamless mode */
.dynamic-type-value-field .field__wrapper label,
.dynamic-type-value-field .field__wrapper .standardFieldLabel {
  display: none !important;
}

/* Style inputs */
.dynamic-type-value-field .field__wrapper input,
.dynamic-type-value-field .field__wrapper textarea,
.dynamic-type-value-field .field__wrapper .input__SD {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: auto !important;
}

.dynamic-type-value-field .field__wrapper input:focus,
.dynamic-type-value-field .field__wrapper textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Hide error messages inside field (we show them outside) */
.dynamic-type-value-field .field__wrapper .error__text,
.dynamic-type-value-field .field__wrapper .mFormError,
.dynamic-type-value-field .field__wrapper .errorIcon {
  display: none !important;
}

/* Special handling for currency field */
.dynamic-type-value-field .currencyField input {
  padding-left: 0.75rem !important;
}

.dynamic-type-value-field .currencyField .currency__symbol {
  display: none !important;
}

/* Special handling for percentage field */
.dynamic-type-value-field .percentageField input {
  padding-right: 0.75rem !important;
}

/* Date field adjustments */
.dynamic-type-value-field .react-datepicker-wrapper {
  width: 100% !important;
}

.dynamic-type-value-field .react-datepicker__input-container {
  width: 100% !important;
}

.dynamic-type-value-field .react-datepicker__input-container input {
  width: 100% !important;
}

/* Select field adjustments for nested selects */
.dynamic-type-value-field .select__SD {
  border: none !important;
  background: transparent !important;
}

.dynamic-type-value-field .select__SD .select__SD__control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto !important;
}

.dynamic-type-value-field .select__SD .select__SD__control--is-focused {
  border: none !important;
  box-shadow: none !important;
}

/* Textarea adjustments */
.dynamic-type-value-field textarea {
  resize: none !important;
  min-height: auto !important;
}

/* Disabled state */
.dynamic-type-field-seamless.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dynamic-type-field-seamless.disabled input,
.dynamic-type-field-seamless.disabled textarea,
.dynamic-type-field-seamless.disabled select {
  cursor: not-allowed !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .dynamic-type-selector-wrapper {
    min-width: 100px;
  }
  
  .dynamic-type-selector-wrapper .select__SD__value-container {
    padding: 0.5rem !important;
  }
  
  .dynamic-type-selector-wrapper .select__SD__single-value {
    font-size: 0.75rem !important;
  }
  
  .dynamic-type-value-field .field__wrapper input,
  .dynamic-type-value-field .field__wrapper textarea {
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
  }
}