html {
  scroll-behavior: smooth;
}
body {
  font-display: "swap";
}
.Polaris-DatePicker__Day--disabled {
  background-color: #303030;
  color: white;
  outline: 0.0625rem solid transparent;
}
.Polaris-DatePicker__Day--disabled:hover {
  background-color: #303030;
  color: white;
  outline: 0.0625rem solid transparent;
}
select {
  padding-left: 0.5rem;
}
.Polaris-Icon {
  margin: 0;
}

.Polaris-Link#remove-hover-underline:hover {
  text-decoration: none;
}

.text--blue {
  color: #197cbd;
}

.text--error {
  color: var(--p-color-text-critical);
}

.text--lg {
  font-size: 0.9375rem;
}

.text-xl {
  font-size: 1.125rem;
}

.text--underline {
  text-decoration: underline;
}

.width-inherit {
  width: inherit;
}
.content-between {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-start {
  justify-content: 1start;
}
.justify-end {
  justify-content: flex-end;
}
.flex-1 {
  flex: 1;
}

.content-center {
  display: flex;
  width: 100%;
  justify-content: center;
}

.content-right {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.Polaris-Label .Polaris-Label__Text {
  font-size: 0.75rem;
}

.cursor-pointer {
  cursor: pointer;
}

.disable {
  pointer-events: none;
  opacity: 0.7;
}
.divider {
  padding-bottom: 0.5rem;
  border-bottom: 1px #33333333 solid;
}
label {
  font-weight: 450;
}

.ml-4 {
  margin-left: 0.25rem;
}
.ml-8 {
  margin-left: 0.5rem;
}
.ml-16 {
  margin-left: 1rem;
}
.ml-32 {
  margin-left: 2rem;
}
.mr-4 {
  margin-right: 0.25rem;
}
.mr-8 {
  margin-right: 0.5rem;
}
.mr-16 {
  margin-right: 1rem;
}
.mt-4 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.125rem;
}
.mt-8 {
  margin-top: 0.5rem;
}
.mt-12 {
  margin-top: 0.75rem;
}
.mt-16 {
  margin-top: 1rem;
}
.mt-24 {
  margin-top: 1.5rem;
}

.mt-32 {
  margin-top: 2rem;
}

.mb-4 {
  margin-bottom: 0.25rem;
}
.mb-8 {
  margin-bottom: 0.5rem;
}
.mb-10 {
  margin-bottom: 0.625rem;
}
.mb-12 {
  margin-bottom: 0.75rem;
}
.mb-16 {
  margin-bottom: 1rem;
}
.my-16 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.pl-8 {
  padding-left: 0.5rem;
}
.pl-16 {
  padding-left: 1rem;
}
.pb-4 {
  padding-bottom: 0.25rem;
}
.pb-8 {
  padding-bottom: 0.5rem;
}
.pb-12 {
  padding-bottom: 0.75rem;
}
.pd-16 {
  padding: 1rem;
}
.pr-6 {
  padding-right: 0.375rem;
}
.pr-8 {
  padding-right: 0.5rem;
}
.pr-8-i {
  padding-right: 0.5rem !important;
}
.p-16 {
  padding: 1rem;
}
.p-8 {
  padding: 0.5rem;
}
.px-8 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-16 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-16 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pt-4 {
  padding-top: 0.25rem;
}

.pt-8 {
  padding-top: 0.5rem;
}

.pt-12 {
  padding-top: 0.75rem;
}

.pt-16 {
  padding-top: 1rem;
}

.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.inline-flex {
  display: inline-flex;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.flex-column {
  flex-direction: column;
}
.align-center {
  align-items: center;
}
.align-start {
  align-items: flex-start !important;
}

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.child-flex-center > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mx-4 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.w-full {
  width: 100%;
}

.w-fit {
  width: fit-content;
}

.min-w-fit {
  min-width: fit-content;
}

.w-half {
  width: 50%;
}

.h-full {
  height: 100%;
}

.Polaris-TextField__Suffix {
  margin: 0;
  margin-right: 0.25rem;
}

.fw-500 {
  font-weight: 500;
}

.disable-content {
  opacity: 0.5;
  pointer-events: none;
}

.border-top {
  border-top: 1px solid #e7e7e7;
}

/* Prevent layout shift during font loading */
.font-stable {
  font-display: optional;
}

/* Will-change hint for dynamic content */
.will-change-contents {
  will-change: contents;
}

/* Editor image */
.tox-browse-url {
  display: none !important;
}

#emoji-close-div {
  display: none !important;
}

.editor-icon-container {
  display: flex;
  flex-wrap: wrap;
}

.editor-icon {
  display: flex;
  justify-content: center;
  padding: 4px;
  margin: 4px;
  width: 10%;
  cursor: pointer;
}
.editor-icon .est-emoji {
  height: 16px;
  width: 16px;
}
.editor-emoji-icon {
  color: #000;
  font-feature-settings: "clig" off, "liga" off;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 450;
  line-height: 20px;
  font-display: swap;
}
label {
  font-weight: 450;
}

.font-bungee-spice {
  line-height: normal;
  font-family: "Bungee Spice", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.note-group-select-from-files {
  display: none;
}

.Polaris-Listbox-TextOption__Checkbox {
  width: 100%;
}

.Polaris-Listbox-TextOption__Checkbox
  .Polaris-Choice.Polaris-Checkbox__ChoiceLabel {
  width: 100%;
}
.Polaris-Listbox-TextOption__Checkbox
  .Polaris-Choice.Polaris-Checkbox__ChoiceLabel
  .Polaris-Choice__Label {
  width: 100%;
}

.Polaris-Listbox-TextOption__Checkbox
  .Polaris-Choice.Polaris-Checkbox__ChoiceLabel
  .Polaris-Choice__Label
  > label {
  width: 100%;
}

.highlight-border {
  outline: 2px solid rgba(255, 184, 0, 0.56);
  animation: highlight-border 1.5s linear infinite;
  border-radius: 12px;
}

.bold-text-styled .Polaris-Text--root {
  font-size: 0.95rem;
}

.font-bold {
  font-weight: 700;
}

.ot-polaris-text-18 .Polaris-Text--root {
  font-size: 18px;
}

.gap-4 {
  gap: 0.25rem;
}

.gap-8 {
  gap: 0.5rem;
}

.gap-12 {
  gap: 0.75rem;
}

.gap-16 {
  gap: 1rem;
}

.gap-24 {
  gap: 1.5rem;
}

.text--gray {
  color: var(--p-color-text-disabled);
}

#btn-destructive-tone {
  background-color: var(--p-color-bg-fill-critical) !important;
}

#btn-destructive-tone:hover {
  background-color: var(--p-color-bg-fill-critical-hover) !important;
  color: #fff;
}

#btn-destructive-tone::before {
  box-shadow: var(--p-shadow-button-primary-critical) !important;
}

@keyframes highlight-border {
  0% {
    outline-color: #fff;
  }

  25% {
    outline-color: #ffb800;
  }

  75% {
    outline-color: #fff;
  }

  to {
    outline-color: #ffb800;
  }
}

/* Timeline graphic stage */
.inactive-stage {
  opacity: 0.5;
}

.timeline-actived-tab .Polaris-Button--tertiary {
  background-color: var(--pc-button-color-hover);
}

/* Text editor */

.item-highlight-outline {
  /* outline: 2px solid #005bd3; */
  outline: 2px solid #65abff;
  border-radius: 2px;
  &.border-radius-8 {
    border-radius: 8px;
  }
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 500px;
}

.bg-gray {
  background-color: #f0f0f0 !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

@media (max-width: 768px) {
  .text-ellipsis {
    max-width: 70vw;
  }
}

.Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeLarge:has(
    #modal-cu-language-rule
  ) {
  width: 95vw;
  max-width: unset;
}

@media (max-width: 768px) {
  .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeLarge:has(
      #modal-cu-language-rule
    ) {
    width: 100vw;
    max-width: unset;
  }
}

.Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeLarge:has(
    #language-rule-modal-title
  ) {
  h2 {
    width: 100%;
  }
}

.Polaris-Modal-Dialog__Modal:has(.quota-compare-container) {
  max-width: 775px;
}

.Polaris-Modal-Dialog__Container:has(#editor-icon-container-id),
.Polaris-Modal-Dialog__Container:has(#language-rule-modal-discard-container),
.Polaris-Modal-Dialog__Container:has(#image-btn-in-editor),
.Polaris-Modal-Dialog__Container:has(#link-btn-in-editor),
.Polaris-Modal-Dialog__Container:has(#confirm-left-btn),
.Polaris-Modal-Dialog__Container:has(#editor-tips-template-container-id),
.Polaris-Modal-Dialog__Container:has(#confirm-auto-translate-content) {
  z-index: 520;
}

div:has(.Polaris-Modal-Dialog__Container):has(#editor-icon-container-id)
  + .Polaris-Backdrop,
div:has(.Polaris-Modal-Dialog__Container):has(
    #language-rule-modal-discard-container
  )
  + .Polaris-Backdrop,
div:has(.Polaris-Modal-Dialog__Container):has(#image-btn-in-editor)
  + .Polaris-Backdrop,
div:has(.Polaris-Modal-Dialog__Container):has(#link-btn-in-editor)
  + .Polaris-Backdrop,
div:has(.Polaris-Modal-Dialog__Container):has(#confirm-left-btn)
  + .Polaris-Backdrop,
div:has(.Polaris-Modal-Dialog__Container):has(
    #editor-tips-template-container-id
  )
  + .Polaris-Backdrop,
div:has(.Polaris-Modal-Dialog__Container):has(#confirm-auto-translate-content)
  + .Polaris-Backdrop {
  z-index: 519;
}

h2.Polaris-Text--root.Polaris-Text--headingMd.Polaris-Text--break:has(
    #cu-language-rule-modal-title
  ) {
  width: 100%;
}

li.Polaris-Listbox-Option[aria-label="Select all dates"] > div {
  border-bottom: 1px solid #e0e0e0;
}

.CustomPolarisButton {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgb(32, 34, 35);
  cursor: pointer;
  border-radius: 10px;
}

.CustomPolarisButton:hover:not(.CustomPolarisButton--pressed) {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(48, 48, 48, 1);
  box-shadow: transparent;
}

.CustomPolarisButton--pressed {
  font-weight: 600;
  background: rgb(223, 223, 223);
}
.CustomPolarisButton--pressed span {
  font-weight: 600;
}
.custom-wrapped-icon {
  width: 26px;
  height: 26px;
  background-color: #91d0ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
}

.special-offer-popover button .Polaris-Button__Icon .Polaris-Icon svg {
  fill: var(--p-color-text-critical);
}
.special-offer-popover button span {
  color: var(--p-color-text-critical);
}

.special-offer-popover > div:first-child:hover {
  background: var(--p-color-bg-surface-secondary-hover);
}

.trial-badge span.Polaris-Badge span {
  font-size: 12px !important;
}