.cf-form-field{margin-bottom:28px;position:relative}.cf-form-field-label{color:#494949;letter-spacing:1.08px;line-height:15px;text-transform:uppercase;font-weight:700;display:flex;font-size:13px;margin-bottom:7px}.cf-form-field-label-icon [class^=icon]{color:var(--cf-grey-regular);margin-left:5px;font-size:14px;line-height:15px;cursor:help}.cf-form.no-margin-label .cf-form-field-label{margin-bottom:0}.cf-form-field-input-group{position:relative;display:flex}.cf-form-field-input-wrapper input[type=text],.cf-form-field-input-wrapper input[type=number],.cf-form-field-input-wrapper input[type=email],.cf-form-field-input-wrapper input[type=password],.cf-form-field-input input[type=text],.cf-form-field-input input[type=number],.cf-form-field-input input[type=email],.cf-form-field-input input[type=password]{appearance:none;background-color:#fff;border:1px solid #c7cbd0;border-radius:4px;color:#494949;font-size:15px;font-weight:400;height:40px;letter-spacing:.23px;line-height:40px;outline:none;padding:0 10px;transition:all .2s ease-in-out;width:100%}.cf-form-field-input-wrapper input[type=text]:focus,.cf-form-field-input-wrapper input[type=number]:focus,.cf-form-field-input-wrapper input[type=email]:focus,.cf-form-field-input-wrapper input[type=password]:focus,.cf-form-field-input input[type=text]:focus,.cf-form-field-input input[type=number]:focus,.cf-form-field-input input[type=email]:focus,.cf-form-field-input input[type=password]:focus{border:1px solid var(--cf-blue);box-shadow:0 0 10px rgba(72,159,255,.4)}.cf-form-field-input-wrapper input[type=text].invalid,.cf-form-field-input-wrapper input[type=number].invalid,.cf-form-field-input-wrapper input[type=email].invalid,.cf-form-field-input-wrapper input[type=password].invalid,.cf-form-field-input input[type=text].invalid,.cf-form-field-input input[type=number].invalid,.cf-form-field-input input[type=email].invalid,.cf-form-field-input input[type=password].invalid{border-color:#e44545}.cf-form-field-input-wrapper textarea,.cf-form-field-input textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100px;border:1px solid #c7cbd0;border-radius:4px;background-color:#fff;padding:10px;color:#494949;font-size:15px;font-family:"Roboto",sans-serif;font-weight:400;letter-spacing:.23px;width:100%;outline:none;transition:all .2s ease-in-out}.cf-form-field-input-wrapper textarea:hover,.cf-form-field-input textarea:hover{border-color:#999}.cf-form-field-input-wrapper textarea:focus,.cf-form-field-input textarea:focus{border:1px solid #489fff;box-shadow:0 0 10px rgba(72,159,255,.4)}.cf-form-field-input-wrapper textarea.disabled,.cf-form-field-input textarea.disabled{opacity:1;background-color:#ededed;border-color:#ededed}.cf-form-field-input-wrapper textarea.invalid,.cf-form-field-input textarea.invalid{border-color:#e44545}.cf-form-field-input-wrapper{flex:1 1;position:relative}.cf-form-field-addon-block{background:#ebebeb;border-radius:0 3px 3px 0;color:#848484;font-size:18px;height:38px;line-height:40px;padding:2px 0 0 2px;position:absolute;right:1px;text-align:center;top:1px;transition:all .1s ease-in-out;width:40px}.cf-form-field-addon-block:hover{background:#e2e2e2}.cf-form-field-right-block{align-items:center;display:flex;padding:0 8px}.cf-form-field-right-block .icon{color:#848484;font-size:20px;opacity:.6;transition:all .1s ease-in-out}.cf-form-field-right-block .icon:hover{opacity:1}.cf-form-field-description{font-size:12px;line-height:15px;color:#858585;margin-top:7px;padding-left:10px}.cf-form-field-error-msg{color:var(--cf-red);margin-top:5px;position:absolute;white-space:nowrap}.cf-form .clickable{cursor:pointer}/*# sourceMappingURL=cf-form.css.map */
.stacked-indicators .top-left, .stacked-indicators .top-right, .stacked-indicators .bottom-left, .stacked-indicators .bottom-right {
  position: absolute;
  display: flex;
  z-index: 1;
  gap: 6px;
}
.stacked-indicators .top-left {
  top: 0;
  left: 0;
  align-items: flex-start;
}
.stacked-indicators .top-right {
  top: 0;
  right: 0;
  align-items: flex-start;
  flex-direction: row-reverse;
}
.stacked-indicators .bottom-left {
  bottom: 0;
  left: 0;
  align-items: flex-end;
  transform: translateX(10px) translateY(-10px);
}
.stacked-indicators .bottom-right {
  bottom: 0;
  right: 0;
  align-items: flex-end;
  flex-direction: row-reverse;
}
.stacked-indicators .vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stacked-indicators .horizontal {
  display: flex;
  gap: 6px;
}
.stacked-indicators .top-right .horizontal, .stacked-indicators .bottom-right .horizontal {
  flex-direction: row-reverse;
}
.stacked-indicators .bottom-left .vertical, .stacked-indicators .bottom-right .vertical {
  flex-direction: column-reverse;
}.img-tag {
  transition: opacity 0.2s ease-in-out;
  visibility: visible;
  opacity: 1;
}

.img-tag.img-tag-error {
  visibility: hidden;
  opacity: 0;
}

.img-tag.img-tag-loading {
  visibility: hidden;
  opacity: 0;
}

.div-loading,
.div-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

.div-error + .styleguide-masonry-data {
  visibility: hidden;
  opacity: 0;
}

.div-loading.cf-image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf-image-upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
}
.cf-image-upload-progress .progress-bar {
  height: 5px;
  background-color: var(--cf-blue);
}

.cf-image-stacked-video-duration-indicator {
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  width: unset;
  color: var(--cf-white);
  background-color: var(--cf-darkui-darker);
  padding: 0 6px;
  border-radius: 2px;
  position: unset !important;
}

.cf-image-stacked-crop-indicator {
  width: 24px;
  height: 24px;
  background-color: var(--cf-darkui-darker);
  color: var(--cf-white);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}.tab-select {
  list-style: none;
}
.tab-select .tab-title a,
.tab-select .tab-title-dropdown .dropdown-title a {
  color: #333;
  font-weight: 600;
  letter-spacing: var(--cf-letter-spacing-s);
  display: block;
  line-height: 16px;
  padding: 17px 18px;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
}
.tab-select .tab-title a:hover,
.tab-select .tab-title-dropdown .dropdown-title a:hover {
  text-decoration: none;
}
.tab-select .tab-title.hidden,
.tab-select .tab-title-dropdown .dropdown-title.hidden {
  display: none !important;
}
.tab-select.vertical .tab-title-group + .tab-title {
  margin-top: 20px;
}
.tab-select.vertical .tab-title + .tab-title-group {
  margin-top: 10px;
}
.tab-select.vertical .tab-title-group .group-title {
  line-height: 16px;
  padding: 10px 0;
  text-transform: uppercase;
  color: gray;
  font-weight: 500;
}
.tab-select.vertical .tab-title {
  position: relative;
  display: block;
}
.tab-select.vertical .tab-title + .tab-title {
  margin-top: 8px;
}
.tab-select.vertical .tab-title a {
  background-color: #F6F6F6;
  box-shadow: inset -4px 0 0 0 #F6F6F6;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 4px 0 0 4px;
}
.tab-select.vertical .tab-title a:hover {
  border: 0;
  background-color: #EDEDED;
  box-shadow: inset -4px 0 0 0 #D1D1D1;
}
.tab-select.vertical .tab-title.active a {
  background-color: RGB(230, 238, 246);
  box-shadow: inset -4px 0 0 0 var(--cf-blue);
}
.tab-select.horizontal .tab-title,
.tab-select.horizontal .tab-title-dropdown {
  display: inline-block;
}
.tab-select.horizontal .tab-title a,
.tab-select.horizontal .tab-title-dropdown .dropdown-title a {
  color: #333;
  font-weight: 600;
  letter-spacing: var(--cf-letter-spacing-s);
  display: block;
  line-height: 16px;
  padding: 10px 18px;
  font-size: 13px;
  text-align: center;
  text-transform: uppercase;
  min-width: 140px;
}
.tab-select.horizontal .tab-title a:hover,
.tab-select.horizontal .tab-title-dropdown .dropdown-title a:hover {
  text-decoration: none;
}.tab-layout {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  position: relative;
}
.tab-layout .tab-content-container > .tab-content {
  position: fixed;
  top: -5000px;
  left: -5000px;
  visibility: hidden;
  opacity: 0;
  display: none;
}
.tab-layout .tab-content-container > .tab-content.active {
  display: block;
  position: static;
  visibility: visible;
  opacity: 1;
}
.tab-layout.vertical-tab {
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.tab-layout.vertical-tab .tab-select {
  flex: 0 0 260px;
}
.tab-layout.vertical-tab .tab-content-container {
  flex: 1;
  min-width: 0;
}.panel-heading {
  border-radius: 5px 5px 0 0;
  padding: 20px 30px;
  background-color: #fff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
.panel-heading .action-buttons {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
}
.panel-heading .panel-title-wrapper label {
  font-size: 13px;
  letter-spacing: var(--cf-letter-spacing-s);
  text-transform: uppercase;
  line-height: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.panel-heading .panel-title-wrapper .panel-title {
  margin: 0 20px 0 0;
  white-space: pre-wrap;
  word-break: break-all;
}.upsert-form-footer-btns {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
}
.upsert-form-footer-btns > button {
  margin-left: 0 !important;
}.devtools-tab {
  display: flex;
  padding: 0 var(--pd);
  gap: 20px;
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, currentColor 10%, transparent);
}
.devtools-tab-item {
  display: inline-block;
  padding: 10px 2px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.devtools-tab-item.active {
  border-bottom: 3px solid var(--dreem-app-color-accent);
}
.devtools-illustration {
  display: none;
}
.devtools-illustration-container {
  display: flex;
  width: 100%;
  height: 268px;
}
.devtools-illustration.active {
  display: flex;
}
.devtools-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--dreem-app-small-font);
  margin: 10px -8px;
  font-size: 13px;
  line-height: 20px;
}
.devtools-section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 0 12px;
  text-transform: uppercase;
  opacity: 0.3;
}
.devtools-section-block {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  cursor: pointer;
  transition: var(--dreem-app-transition);
  border: 2px solid transparent;
}
.devtools-section-block:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.devtools-section-block.active {
  border: 2px solid var(--dreem-app-color-accent);
}
.devtools-section-block.active svg {
  color: var(--dreem-app-color-accent);
}
.devtools-section-content {
  flex: 1;
  min-width: 0;
}
.devtools-section-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.devtools-section-description {
  font-size: 12px;
  opacity: 0.6;
}.dreem-container-kbar-positioner {
  z-index: var(--dreem-app-z-layer-100);
}
.dreem-container-kbar-positioner * {
  font-family: var(--dreem-app-font);
}
@keyframes kbar-bdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dreem-container-kbar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--dreem-app-background-layer-1) 70%, transparent);
  z-index: var(--dreem-app-z-layer-100);
  backdrop-filter: blur(10px);
  animation: kbar-bdrop 0.25s ease-in-out;
  animation-fill-mode: forwards;
  animation-play-state: running;
  pointer-events: none;
}
.dreem-container-kbar-animator {
  width: 100%;
  max-width: 600px;
  background-color: color-mix(in srgb, var(--dreem-app-background-layer-3) 80%, transparent);
  backdrop-filter: blur(100px) saturate(500%) brightness(150%);
  filter: drop-shadow(0px 0px 100px rgba(0, 0, 0, 0.5));
  color: var(--dreem-app-color);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: var(--dreem-app-wrapper-radius);
  overflow: hidden;
  --empty-state-gap: 30px;
  --empty-state-padding: 143px 30px;
  --empty-state-body-gap: 10px;
  --empty-state-title-font-size: 22px;
  --empty-state-description-font-size: 13px;
}
.dreem-container-kbar-animator > div > div {
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
}
.dreem-container-kbar-animator > div > div:hover {
  scrollbar-color: color-mix(in srgb, currentColor 20%, transparent) transparent;
}
.dreem-container-kbar-search-input {
  width: calc(100% - 28px - 32px);
  padding: 16px;
  margin: 14px;
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  color: var(--dreem-app-color);
  outline: none;
  border: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: var(--dreem-app-block-radius);
  transition: var(--dreem-app-transition);
}
.dreem-container-kbar-search-input::placeholder {
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.dreem-container-kbar-search-input:focus {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.dreem-container-kbar-search-input:not(:placeholder-shown) {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.dreem-container-kbar-results__group-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 22px;
}
.dreem-container-kbar-results__group-name > span {
  font-weight: 500;
  font-size: 12px;
  line-height: 28px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.3;
}
.dreem-container-kbar-results__view-all-btn {
  background: none;
  border: none;
  color: var(--dreem-app-color-accent);
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  transition: var(--dreem-app-transition);
  opacity: 0.7;
}
.dreem-container-kbar-results__view-all-btn:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--dreem-app-color-accent) 10%, transparent);
}
.dreem-container-kbar-results__view-all-btn:active {
  transform: scale(0.95);
}
.dreem-container-kbar-results__item {
  padding: 10px 16px 10px 10px;
  margin-left: 10px;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  background-color: transparent;
}
.dreem-container-kbar-results__item.active {
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  --icon-color: var(--dreem-app-color-accent);
}
.dreem-container-kbar-results__item__left {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.dreem-container-kbar-results__item__left__icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color, var(--dreem-app-color));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: var(--dreem-app-element-radius);
  background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
  position: relative;
}
.dreem-container-kbar-results__item__left__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dreem-container-kbar-results__item__left__title-placeholder {
  width: 300px !important;
  height: 10px !important;
  background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: var(--dreem-app-element-radius);
}
.dreem-container-kbar-results__item__left__sub-placeholder {
  width: 100px !important;
  height: 10px !important;
  background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: var(--dreem-app-element-radius);
}
.dreem-container-kbar-results__item__left__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dreem-container-kbar-results__item__left__content__title {
  display: flex;
  align-items: center;
  gap: 5px;
}
.dreem-container-kbar-results__item__left__content__title__ancestor-name {
  opacity: 0.5;
}
.dreem-container-kbar-results__item__left__content__title__ancestor-spacer {
  display: flex;
}
.dreem-container-kbar-results__item__left__content__title__name {
  text-transform: capitalize;
}
.dreem-container-kbar-results__item__left__content__subtitle {
  font-size: 12px;
  line-height: 16px;
  opacity: 0.5;
}
.dreem-container-kbar-results__item__shortcut {
  display: flex;
  gap: 6px;
}
.dreem-container-kbar-results__item__shortcut__item {
  padding: 6px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  color: color-mix(in srgb, currentColor 60%, transparent);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: var(--dreem-app-element-radius);
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
}
.dreem-container-kbar-footer {
  padding: 5px;
}
.dreem-container-kbar-empty {
  width: calc(100% - 16px);
  padding: 16px;
  margin: 0 8px -12px 8px;
  display: flex;
  align-items: center;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: var(--dreem-app-element-radius);
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  gap: 20px;
  opacity: 0.5;
}.dreem-container-login-form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  gap: 30px;
}
.dreem-container-login-form-header {
  display: flex;
  flex-flow: column nowrap;
  gap: 30px;
}
.dreem-container-login-form-header .logo-dreem {
  height: 34px;
  width: 109px;
}
.dreem-container-login-form-header .title-wrapper {
  align-self: stretch;
  padding: 20px 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  word-wrap: break-word;
  max-width: 400px;
}
.dreem-container-login-form-header .title-wrapper .title {
  font-size: 32px;
  line-height: 40px;
}
.dreem-container-login-form-header .title-wrapper .subtitle {
  font-size: 13px;
  line-height: 20px;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-family: var(--dreem-app-small-font);
  max-width: 300px;
}
.dreem-container-login-form-header .close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  opacity: 0.7;
  cursor: pointer;
}
.dreem-container-login-form-header .close-button:hover {
  opacity: 1;
}
.dreem-container-login-form-header .subtitle p {
  margin-bottom: 10px;
}
.dreem-container-login-form-header .subtitle p:last-child {
  margin-bottom: 0;
}
.dreem-container-login-form .options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dreem-container-login-form .options .login-button {
  min-height: 48px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  box-sizing: border-box;
  transition: all ease-in-out 0.15s;
  text-decoration: none;
}
.dreem-container-login-form .options .login-button .login-button-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.dreem-container-login-form .options .login-button .login-button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dreem-container-login-form .options .login-button:focus-visible {
  outline: 2px solid #2aa764;
  outline-offset: 4px;
}
.dreem-container-login-form .options .login-button:hover {
  background: color-mix(in srgb, currentColor 15%, transparent);
}
.dreem-container-login-form .options .login-button:active {
  background: color-mix(in srgb, currentColor 20%, transparent);
}
.dreem-container-login-form .options .login-button.hidden {
  display: none;
}
.dreem-container-login-form .options .login-button:disabled, .dreem-container-login-form .options .login-button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.dreem-container-login-form .terms-section {
  display: inline-block;
  padding: 0 8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 300;
  text-align: center;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.dreem-container-login-form .terms-section .terms-link {
  color: #2aa764;
  text-decoration: none;
}
.dreem-container-login-form .terms-section .terms-link:focus-visible {
  outline: 2px solid #2aa764;
  outline-offset: 1px;
  border-radius: 1px;
}.dreem-container-login-dialog-detail {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px;
}.dreem-container-change-plan-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 36px !important;
  margin-bottom: 20px;
  font-family: inherit !important;
  padding: 24px !important;
}
.dreem-container-change-plan-dialog-header-close {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 10px;
  cursor: pointer;
  color: color-mix(in srgb, currentColor 30%, transparent);
  transition: var(--dreem-app-transition);
  background-color: transparent;
  border-radius: 100%;
}
.dreem-container-change-plan-dialog-header-close:hover {
  color: color-mix(in srgb, currentColor 100%, transparent);
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.dreem-container-change-plan-dialog-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 20px;
  gap: 20px;
}
.dreem-container-change-plan-dialog-section {
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
}
.dreem-container-change-plan-dialog-section-stretch {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
}
.dreem-container-change-plan-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dreem-container-change-plan-dialog-summary {
  padding: 0 24px;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
}
.dreem-container-change-plan-dialog-description {
  opacity: 0.5;
}
.dreem-container-change-plan-dialog-description:is(ul) {
  padding-left: 20px;
}
.dreem-container-change-plan-dialog-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dreem-container-change-plan-dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px !important;
  gap: 10px !important;
}
.dreem-container-change-plan-dialog-plan-price {
  margin-left: auto;
}
.dreem-container-change-plan-dialog-plan-price-tag {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  padding: 0 4px;
  border-radius: var(--dreem-app-element-radius);
  background-color: color-mix(in srgb, currentColor 20%, transparent);
  margin: 0 10px;
}.dreem-container-session-gallery-modal {
  z-index: var(--dreem-app-z-layer-2) !important;
}
.dreem-container-session-gallery-modal * {
  font-family: var(--dreem-app-font);
  box-sizing: border-box;
}
.dreem-container-session-gallery-modal-paper {
  width: 100dvw;
  height: 100dvh;
  max-width: calc(100dvw - 30px) !important;
  max-height: calc(100dvh - 30px) !important;
  margin: 15px !important;
  background-color: var(--dreem-app-background-layer-3) !important;
  color: var(--dreem-app-color) !important;
  border-radius: var(--dreem-app-block-radius) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}.dreem-container-credit-package {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  background-color: var(--dreem-app-background-layer-3);
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  cursor: pointer;
  transition: var(--dreem-app-transition);
  animation: credit-package 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
@keyframes credit-package {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.dreem-container-credit-package:nth-child(1) {
  animation-delay: calc(0.05s * 1);
}
.dreem-container-credit-package:nth-child(2) {
  animation-delay: calc(0.05s * 2);
}
.dreem-container-credit-package:nth-child(3) {
  animation-delay: calc(0.05s * 3);
}
.dreem-container-credit-package:nth-child(4) {
  animation-delay: calc(0.05s * 4);
}
.dreem-container-credit-package:hover {
  background-color: var(--dreem-app-color-accent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  color: #fff;
}
.dreem-container-credit-package-name {
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  opacity: 0.5;
}
.dreem-container-credit-package-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.dreem-container-credit-package-price {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  user-select: none;
}
.dreem-container-credit-package-credit {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  flex: 1;
}
.dreem-container-credit-package--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}.dreem-container-dialog {
  z-index: var(--dreem-app-z-layer-2) !important;
}
.dreem-container-dialog > [class*=backdrop] {
  backdrop-filter: blur(10px);
  transition: var(--dreem-app-transition);
}
@keyframes message-fly-up {
  0% {
    transform: scale(0.8);
    opacity: 0;
    margin-bottom: -10px;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    margin-bottom: 0;
  }
}
.dreem-container-dialog * {
  font-family: var(--dreem-app-font);
  box-sizing: border-box;
}
.dreem-container-dialog-paper {
  width: 560px;
  height: fit-content;
  max-width: calc(100dvw - 30px) !important;
  max-height: calc(100dvh - 30px) !important;
  margin: 15px !important;
  background-color: var(--dreem-app-background-layer-3) !important;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  color: var(--dreem-app-color) !important;
  border-radius: var(--dreem-app-wrapper-radius) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
.dreem-container-dialog-topup-header {
  display: flex;
  flex-direction: column !important;
  justify-content: center;
  padding: 25px 25px 0 25px !important;
  position: relative;
}
.dreem-container-dialog-topup-header-text {
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 36px !important;
  margin-bottom: 20px;
}
.dreem-container-dialog-topup-header-description {
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 15px 5px 15px;
  margin: 0 -10px 0 -10px;
}
.dreem-container-dialog-topup-header-description-content {
  opacity: 0.4;
}
.dreem-container-dialog-topup-header-description-content u {
  cursor: pointer;
}
.dreem-container-dialog-topup-header-description-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.dreem-container-dialog-topup-header-credit {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dreem-container-dialog-topup-header-credit p {
  text-decoration: underline;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  opacity: 0.3;
  cursor: pointer;
  transition: var(--dreem-app-transition);
}
.dreem-container-dialog-topup-header-credit p:hover {
  opacity: 1;
}
.dreem-container-dialog-topup-header-badge {
  align-self: flex-start;
  border-radius: 100px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  padding: 4px 4px 4px 12px;
  cursor: pointer;
  transition: var(--dreem-app-transition);
  margin-bottom: 30px;
}
.dreem-container-dialog-topup-header-badge:hover {
  background-color: color-mix(in srgb, currentColor 20%, transparent);
}
.dreem-container-dialog-topup-header-illustration {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
  width: 100%;
  height: 100%;
  color: var(--dreem-app-color-accent);
  opacity: 0.2 !important;
  filter: blur(5px);
}
.dreem-container-dialog-topup-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
  width: 100px;
  aspect-ratio: 1/1;
  background-color: var(--dreem-app-color-accent);
  filter: blur(50px);
  border-radius: 100%;
  pointer-events: none;
  opacity: 0.5;
}
.dreem-container-dialog-topup-header-close {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 10px;
  cursor: pointer;
  color: color-mix(in srgb, currentColor 30%, transparent);
  transition: var(--dreem-app-transition);
  background-color: transparent;
  border-radius: 100%;
}
.dreem-container-dialog-topup-header-close:hover {
  color: color-mix(in srgb, currentColor 100%, transparent);
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.dreem-container-dialog-topup-header-alert {
  background-color: color-mix(in srgb, var(--dreem-app-color-warning) 10%, transparent);
  border-radius: var(--dreem-app-block-radius);
  color: var(--dreem-app-color-warning);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px -10px 15px -10px;
}
.dreem-container-dialog-topup-header-alert-description {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}
.dreem-container-dialog-topup-header-need-more {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 15px 5px 15px;
  margin: 10px -10px 0 -10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.dreem-container-dialog-topup-header-need-more-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.dreem-container-dialog-topup-header-need-more-des {
  font-size: 11px;
  line-height: 16px;
  opacity: 0.5;
}
.dreem-container-dialog-topup-body {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  transition: var(--dreem-app-transition);
  overflow: visible !important;
  padding: 15px !important;
  gap: 8px;
  position: relative;
}
.dreem-container-dialog-topup-body-loading {
  grid-column: 1/3;
  grid-row: 1/2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dreem-container-dialog-topup-body-only-available {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background-color: color-mix(in srgb, var(--dreem-app-background-layer-3) 50%, transparent);
  backdrop-filter: blur(4px);
}
.dreem-container-dialog-topup-body-only-available-content {
  border-radius: var(--dreem-app-block-radius);
  background-color: color-mix(in srgb, currentColor 30%, var(--dreem-app-background-layer-3));
  padding: 20px;
  font-size: 14px;
  line-height: 20px;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.dreem-container-dialog-confirm-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  gap: 20px;
  background: color-mix(in srgb, var(--dreem-app-background-layer-3) 50%, transparent);
  backdrop-filter: blur(30px);
  z-index: 1;
}
.dreem-container-dialog-confirm-overlay-icon {
  animation: message-fly-up 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  color: var(--dreem-app-color-accent);
}
.dreem-container-dialog-confirm-overlay-warning-icon {
  animation: message-fly-up 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  color: var(--dreem-app-color-warning);
}
.dreem-container-dialog-confirm-overlay-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-top: 20px;
  max-width: 400px;
  animation: message-fly-up 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation-delay: 0.05s;
}
.dreem-container-dialog-confirm-overlay-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: color-mix(in srgb, currentColor 50%, transparent);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
  animation: message-fly-up 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation-delay: 0.1s;
}.dreem-container-referral-close {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 1;
}
.dreem-container-referral-banner {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
}
.dreem-container-referral-banner:after {
  content: "";
  position: absolute;
  right: -60px;
  top: -50px;
  width: 200px;
  height: 100px;
  background: var(--dreem-app-color-accent);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.dreem-container-referral-banner-icon {
  position: absolute;
  right: 50px;
  bottom: -50px;
  width: 250px;
  height: 250px;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
  color: var(--dreem-app-color-accent);
}
.dreem-container-referral-banner-title {
  font-size: 30px;
  line-height: 36px;
  z-index: 1;
}
.dreem-container-referral-banner-sub {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  opacity: 0.5;
  z-index: 1;
}
.dreem-container-referral-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 25px;
  align-items: flex-start;
}
.dreem-container-referral-content-form {
  width: 100%;
  display: flex;
}
.dreem-container-referral-content-form-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dreem-container-referral-content-label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.dreem-container-referral-content-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dreem-container-referral-content-item {
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.5;
  list-style: disc;
  margin-left: 20px;
  position: relative;
}
.dreem-container-referral-content-term {
  color: inherit;
  font-size: 12px;
  opacity: 0.4;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 4px;
  transition: var(--dreem-app-transition);
  text-align: center;
  align-self: center;
}
.dreem-container-referral-content-term:hover {
  opacity: 1;
}.dreem-container-left-menu {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: var(--res-left-menu-align, center);
  padding: var(--res-left-menu-padding, 15px 15px 20px 15px);
  height: var(--res-left-menu-height, 100%);
}
.dreem-container-left-menu-content {
  flex-shrink: 0;
  display: flex;
  flex-direction: var(--res-left-menu-content-direction, column);
  align-items: center;
  gap: 13px;
  justify-content: space-between;
  height: 100%;
  padding: 2px;
}
.dreem-container-left-menu-content-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--dreem-app-color-accent);
  --common-mask-indicator-size: var(--res-left-menu-avatar-size, 40px);
  --common-mask-indicator-icon-size: 16px;
  --common-mask-indicator-radius: 100px;
}
.dreem-container-left-menu-content-page-name {
  font-size: 24px;
  line-height: 36px;
  user-select: none;
  transition: var(--dreem-app-transition);
  min-width: 0;
  padding: 0 6px;
}
.dreem-container-left-menu-content-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  color: inherit;
  transition: var(--dreem-app-transition);
  opacity: 0.5;
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.dreem-container-left-menu-content-item:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  opacity: 1;
}
.dreem-container-left-menu-content-item.active {
  color: var(--dreem-app-color-accent);
  background-color: color-mix(in srgb, currentColor 20%, transparent);
  opacity: 1;
}
.dreem-container-left-menu-content-center {
  gap: 8px;
  flex: 1;
}
.dreem-container-left-menu-content-bottom {
  gap: 16px;
}
.dreem-container-left-menu-content-bottom, .dreem-container-left-menu-content-center {
  display: flex;
  flex-direction: var(--res-left-menu-content-direction, column);
  align-items: center;
}
.dreem-container-left-menu-content-quick-action {
  display: var(--res-quick-action-display, flex);
  align-items: baseline;
  gap: 2px;
  font-size: 12px;
  line-height: 16px;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: var(--bg, color-mix(in srgb, currentColor 10%, transparent));
  padding: 6px 8px;
  transition: var(--dreem-app-transition);
  cursor: pointer;
}
.dreem-container-left-menu-content-quick-action:hover {
  --op: 1;
  --bg: color-mix(in srgb, currentColor 15%, transparent);
}
.dreem-container-left-menu-content-quick-action-text {
  transition: var(--dreem-app-transition);
  opacity: var(--op, 0.5);
}
.dreem-container-left-menu-mobile-hidden-triggers {
  display: none;
}
.dreem-container-left-menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--dreem-app-z-layer-30);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 20px;
  background: var(--dreem-app-background-layer-1);
  color: var(--dreem-app-color);
  overflow-y: auto;
  isolation: isolate;
  animation: fade-in-mobile-menu 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.dreem-container-left-menu-mobile::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--dreem-app-color-accent) 20%, transparent) 0%, transparent 70%), radial-gradient(circle at bottom right, color-mix(in srgb, var(--dreem-app-color) 10%, transparent) 0%, transparent 40%);
  animation: fade-in-mobile-menu-bg 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.dreem-container-left-menu-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dreem-container-left-menu-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 0 0;
}
.dreem-container-left-menu-mobile-nav-item {
  font-family: var(--dreem-app-font);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--dreem-app-color);
  text-decoration: none;
  padding: 4px 6px;
  transition: var(--dreem-app-transition);
  animation: fade-up-mobile-menu-item 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(1) {
  animation-delay: 0.03s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(2) {
  animation-delay: 0.06s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(3) {
  animation-delay: 0.09s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(4) {
  animation-delay: 0.12s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(5) {
  animation-delay: 0.15s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(6) {
  animation-delay: 0.18s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(7) {
  animation-delay: 0.21s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(8) {
  animation-delay: 0.24s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(9) {
  animation-delay: 0.27s;
}
.dreem-container-left-menu-mobile-nav-item:nth-child(10) {
  animation-delay: 0.3s;
}
.dreem-container-left-menu-mobile-nav-item.active {
  color: var(--dreem-app-color-accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.dreem-container-left-menu-mobile-divider {
  height: 1px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  margin: 10px 6px;
}
.dreem-container-left-menu-mobile-extras {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dreem-container-left-menu-mobile-extras-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 6px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: var(--dreem-app-transition);
  animation: fade-up-mobile-menu-item 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.dreem-container-left-menu-mobile-extras-row:nth-child(1) {
  animation-delay: 0.335s;
}
.dreem-container-left-menu-mobile-extras-row:nth-child(2) {
  animation-delay: 0.37s;
}
.dreem-container-left-menu-mobile-extras-row:nth-child(3) {
  animation-delay: 0.405s;
}
.dreem-container-left-menu-mobile-extras-row:nth-child(4) {
  animation-delay: 0.44s;
}
.dreem-container-left-menu-mobile-extras-row:nth-child(5) {
  animation-delay: 0.475s;
}
.dreem-container-left-menu-mobile-extras-row:nth-child(6) {
  animation-delay: 0.51s;
}
.dreem-container-left-menu-mobile-extras-row:hover {
  opacity: 0.85;
}
.dreem-container-left-menu-mobile-extras-row-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dreem-container-left-menu-mobile-extras-row-title {
  font-family: var(--dreem-app-font);
  font-size: 16px;
  color: var(--dreem-app-color);
}
.dreem-container-left-menu-mobile-extras-row-desc {
  font-family: var(--dreem-app-small-font);
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, currentColor 40%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes fade-in-mobile-menu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-up-mobile-menu-item {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-mobile-menu-bg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}.impersonation-banner {
  display: flex;
  align-items: start;
  justify-content: center;
  background-color: transparent;
  font-size: 12px;
  line-height: 18px;
  color: #000000;
  font-family: var(--dreem-app-small-font);
  font-weight: 500;
  width: 100dvw;
  height: 100dvh;
  flex-shrink: 0;
  z-index: calc(var(--dreem-app-z-layer-100) + 1);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  padding: 4px;
}
.impersonation-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px 6px 12px;
  background-color: var(--dreem-app-color-accent);
  color: #fff;
  border-radius: 0 0 var(--dreem-app-block-radius) var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value);
  position: relative;
  pointer-events: all;
}
.impersonation-banner svg {
  fill: var(--dreem-app-color-accent);
  margin-top: 2px;
}
.impersonation-banner::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: var(--dreem-app-wrapper-radius);
  corner-shape: var(--dreem-app-corner-shape-value);
  box-shadow: 0 0 0 500vmax var(--dreem-app-color-accent);
  z-index: -1;
  pointer-events: none;
}
.impersonation-banner u {
  cursor: pointer;
}.dreem-container-accept-invite-page {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: transparent !important;
  backdrop-filter: none !important;
  background-image: url("/app/images/backdrop-blur.webp");
  background-repeat: no-repeat;
  background-size: cover;
  transition: none !important;
}
.dreem-container-accept-invite-page-content {
  width: 400px;
  background-color: var(--dreem-app-background-layer-3);
  border-radius: var(--dreem-app-wrapper-radius);
  padding: 30px;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}.dreem-container-not-found-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dreem-container-not-found-page-illustration {
  width: 100%;
  max-width: 200px;
  color: var(--dreem-app-color-accent);
  filter: drop-shadow(0px 0px 5px var(--dreem-app-color-accent)) drop-shadow(0px 10px 20px var(--dreem-app-color-accent));
}
.dreem-container-not-found-page-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 50px 20px;
  text-align: center;
}
.dreem-container-not-found-page-title-text {
  font-size: 30px;
  font-weight: 600;
}
.dreem-container-not-found-page-title-subtitle {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.3;
  max-width: 300px;
}.dreem-container-login-failed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dreem-container-login-failed-dialog {
  min-width: 450px;
  height: 100dvh;
  max-height: fit-content;
  margin: 15px;
  background-color: var(--dreem-app-background-layer-3);
  color: var(--dreem-app-color);
  border-radius: var(--dreem-app-wrapper-radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  height: fit-content;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 40px 36px;
  gap: 30px;
}
.dreem-container-login-failed-dialog .header {
  display: flex;
  flex-flow: column nowrap;
  gap: 30px;
}
.dreem-container-login-failed-dialog .header .logo-dreem {
  height: 34px;
  width: 109px;
}
.dreem-container-login-failed-dialog .header .title-wrapper {
  align-self: stretch;
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  word-wrap: break-word;
}
.dreem-container-login-failed-dialog .header .title-wrapper .title {
  font-size: 32px;
  line-height: 40px;
}
.dreem-container-login-failed-dialog .header .title-wrapper .subtitle {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.dreem-container-login-failed-dialog .options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dreem-container-login-failed-dialog .options .login-button {
  min-height: 48px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  box-sizing: border-box;
  transition: all ease-in-out 0.15s;
  text-decoration: none;
}
.dreem-container-login-failed-dialog .options .login-button .login-button-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.dreem-container-login-failed-dialog .options .login-button .login-button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dreem-container-login-failed-dialog .options .login-button:focus-visible {
  outline: 2px solid #2aa764;
  outline-offset: 4px;
}
.dreem-container-login-failed-dialog .options .login-button:hover {
  background: color-mix(in srgb, currentColor 15%, transparent);
}
.dreem-container-login-failed-dialog .options .login-button:active {
  background: color-mix(in srgb, currentColor 20%, transparent);
}
.dreem-container-login-failed-dialog .options .login-button.hidden {
  display: none;
}
.dreem-container-login-failed-dialog .options .login-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.dreem-container-login-failed-dialog .terms-section {
  display: inline-block;
  padding: 0 8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 300;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.dreem-container-login-failed-dialog .terms-section .terms-link {
  color: #2aa764;
  text-decoration: none;
}
.dreem-container-login-failed-dialog .terms-section .terms-link:focus-visible {
  outline: 2px solid #2aa764;
  outline-offset: 1px;
  border-radius: 1px;
}.dreem-container-topup-callback-page {
  background-color: var(--dreem-app-background-layer-1);
  color: var(--dreem-app-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
}
.dreem-container-topup-callback-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  gap: 20px;
}
.dreem-container-topup-callback-page-content-icon-success {
  color: var(--dreem-app-color-accent);
}
.dreem-container-topup-callback-page-content-icon-failed {
  color: var(--dreem-app-color-warning);
}
.dreem-container-topup-callback-page-content-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-top: 20px;
  max-width: 400px;
}
.dreem-container-topup-callback-page-content-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
}.suspended-page {
  width: 100dvw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--dreem-app-background-layer-3);
  transition: none !important;
  overflow: hidden auto;
  justify-content: safe center;
  align-items: center;
}
.suspended-page__container {
  max-width: 450px;
  background-color: color-mix(in srgb, var(--dreem-app-color-danger) 10%, transparent);
  border: 2px solid color-mix(in srgb, var(--dreem-app-color-danger) 40%, transparent);
  border-radius: var(--dreem-app-wrapper-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  margin: 50px 16px;
}
.suspended-page__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  color: var(--dreem-app-color-danger);
  margin-left: -8px;
}
.suspended-page__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}
.suspended-page__description {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 24px;
  font-family: var(--dreem-app-small-font);
  opacity: 0.5;
}
.suspended-page__details {
  border-radius: 8px;
  margin-bottom: 24px;
  text-align: left;
}
.suspended-page__details-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.suspended-page__details-item:last-child {
  margin-bottom: 0;
}
.suspended-page__details-label {
  font-size: 14px;
}
.suspended-page__details-value {
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
  font-family: var(--dreem-app-small-font);
  opacity: 0.5;
}
.suspended-page__contact {
  border-radius: 8px;
  margin-bottom: 30px;
}
.suspended-page__contact p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  font-family: var(--dreem-app-small-font);
  opacity: 0.5;
}
.suspended-page__contact hr {
  opacity: 0.2;
}
.suspended-page__workspaces {
  max-width: 450px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 16px 50px 16px;
}
.suspended-page__workspaces-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: left;
}
.suspended-page__workspace-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 12px 12px;
  gap: 12px;
  border-radius: 100px;
  transition: var(--dreem-app-transition);
  background-color: color-mix(in srgb, currentColor 2%, transparent);
  cursor: pointer;
}
.suspended-page__workspace-item:hover {
  background-color: color-mix(in srgb, currentColor 5%, transparent);
}
.suspended-page__workspace-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.suspended-page__workspace-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 4px;
}
.suspended-page__workspace-label {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.5;
  font-family: var(--dreem-app-small-font);
}
.suspended-page__workspace-avatar {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  object-fit: cover;
}
.suspended-page__workspace-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.suspended-page__workspace-name {
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.suspended-page__logout {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}
.suspended-page__logout-button {
  width: 100%;
  padding: 12px 24px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  background-color: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  font-weight: 500 !important;
}
.suspended-page__logout-button:hover {
  background-color: #e5e7eb !important;
  border-color: #9ca3af !important;
}.icon-d-cf-logo-color {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0063 4C20.517 4 23.8357 5.5288 26.1215 8.19328C27.2663 9.53488 27.1141 11.5485 25.773 12.6986C24.4319 13.8453 22.4144 13.6931 21.2691 12.3515C21.2533 12.3338 21.2331 12.3165 21.2211 12.2987L21.224 12.3035L21.1237 12.1931C20.0605 11.0454 18.5763 10.3912 17.0058 10.3912C16.6923 10.3912 16.3847 10.4171 16.0847 10.4666L6.65027 9.93808L6.69059 9.86944C7.36547 8.73856 8.21939 7.7296 9.21587 6.87712L9.22355 6.87376C11.3168 5.08144 14.0375 4 17.0063 4Z' fill='url(%23paint0_linear_27646_144615)'/%3E%3Cpath d='M7.77104 8.3421L11.6595 14.2927C11.4862 14.8327 11.3931 15.4077 11.3931 16.0039C11.3931 18.2267 12.6925 20.1511 14.5722 21.0597L14.6715 21.1063L14.6883 21.1101L14.8333 21.1739C15.501 21.4571 16.2325 21.6122 17.0019 21.6122C18.6882 21.6122 20.2578 20.8725 21.3296 19.5765L21.4256 19.457C22.5104 18.0698 24.5202 17.8255 25.9093 18.9122C27.2946 19.9951 27.5384 22.0053 26.4536 23.392C24.1597 26.3229 20.7166 28 17.0019 28C10.3846 28 5 22.6178 5 16C5 13.937 5.52464 11.9978 6.44528 10.2991L6.56528 10.0826C6.91712 9.46626 7.3208 8.88402 7.77104 8.3421Z' fill='url(%23paint1_linear_27646_144615)'/%3E%3Cpath opacity='0.8' d='M7.77104 8.3421L11.6595 14.2927C11.4862 14.8327 11.3931 15.4077 11.3931 16.0039C11.3931 18.2267 12.6925 20.1511 14.5722 21.0597L14.6715 21.1063L14.6883 21.1101L14.8333 21.1739C15.501 21.4571 16.2325 21.6122 17.0019 21.6122C18.6882 21.6122 20.2578 20.8725 21.3296 19.5765L21.4256 19.457C22.5104 18.0698 24.5202 17.8255 25.9093 18.9122C27.2946 19.9951 27.5384 22.0053 26.4536 23.392C24.1597 26.3229 20.7166 28 17.0019 28C10.3846 28 5 22.6178 5 16C5 13.937 5.52464 11.9978 6.44528 10.2991L6.56528 10.0826C6.91712 9.46626 7.3208 8.88402 7.77104 8.3421Z' fill='url(%23paint2_radial_27646_144615)'/%3E%3Cpath d='M7.77104 8.3421L11.6595 14.2927C11.4862 14.8327 11.3931 15.4077 11.3931 16.0039C11.3931 18.2267 12.6925 20.1511 14.5722 21.0597L14.6715 21.1063L14.6883 21.1101L14.8333 21.1739C15.501 21.4571 16.2325 21.6122 17.0019 21.6122C18.6882 21.6122 20.2578 20.8725 21.3296 19.5765L21.4256 19.457C22.5104 18.0698 24.5202 17.8255 25.9093 18.9122C27.2946 19.9951 27.5384 22.0053 26.4536 23.392C24.1597 26.3229 20.7166 28 17.0019 28C10.3846 28 5 22.6178 5 16C5 13.937 5.52464 11.9978 6.44528 10.2991L6.56528 10.0826C6.91712 9.46626 7.3208 8.88402 7.77104 8.3421Z' fill='url(%23paint3_radial_27646_144615)'/%3E%3Cpath d='M7.77104 8.34161L11.6595 14.2922C11.4862 14.8322 11.3931 15.4067 11.3931 16.0034C11.3931 18.2263 12.6925 20.1501 14.5722 21.0592L14.6715 21.1058L14.6883 21.1096L14.8333 21.1735C15.501 21.4567 16.2325 21.6117 17.0019 21.6117C18.6882 21.6117 20.2578 20.872 21.3296 19.576L21.4256 19.4565C22.5104 18.0693 24.5202 17.825 25.9093 18.9117C27.2946 19.9946 27.5384 22.0043 26.4536 23.3915C24.1597 26.3224 20.7166 28 17.0019 28C10.3846 28 5 22.6178 5 16C5 13.937 5.52464 11.9978 6.44528 10.2991L6.56528 10.0826C6.91712 9.46577 7.3208 8.88401 7.77104 8.34161Z' fill='url(%23paint4_radial_27646_144615)' fill-opacity='0.8'/%3E%3Cpath d='M7.77104 8.3421L11.6595 14.2927C11.4862 14.8327 11.3931 15.4077 11.3931 16.0039C11.3931 18.2267 12.6925 20.1511 14.5722 21.0597L14.6715 21.1063L14.6883 21.1101L14.8333 21.1739C15.501 21.4571 16.2325 21.6122 17.0019 21.6122C18.6882 21.6122 20.2578 20.8725 21.3296 19.5765L21.4256 19.457C22.5104 18.0698 24.5202 17.8255 25.9093 18.9122C27.2946 19.9951 27.5384 22.0053 26.4536 23.392C24.1597 26.3229 20.7166 28 17.0019 28C10.3846 28 5 22.6178 5 16C5 13.937 5.52464 11.9978 6.44528 10.2991L6.56528 10.0826C6.91712 9.46626 7.3208 8.88402 7.77104 8.3421Z' fill='url(%23paint5_radial_27646_144615)'/%3E%3Cpath d='M10.3045 18.8311C11.6696 19.9495 13.1706 20.7064 14.6399 21.1029C14.6557 21.1067 14.6677 21.1101 14.6879 21.1139C12.7463 20.2293 11.3931 18.2719 11.3931 16.0039C11.3931 12.9112 13.9069 10.3912 17.0058 10.3912C18.6272 10.3912 20.1565 11.0882 21.225 12.3055C20.5525 11.1059 19.6035 9.95585 18.3906 8.96513C15.3963 6.50897 11.7373 5.77313 9.21539 6.87713C8.09459 7.83617 7.15379 8.99345 6.44531 10.2991C5.88899 12.9779 7.33379 16.3927 10.3045 18.8272V18.8311Z' fill='url(%23paint6_linear_27646_144615)'/%3E%3Cpath d='M10.3049 18.8281C11.6691 19.9456 13.1705 20.7049 14.6393 21.0995C14.6537 21.1033 14.6691 21.1072 14.6835 21.111C12.7424 20.2278 11.3888 18.2685 11.3888 16C11.3888 12.9059 13.9059 10.3888 17 10.3888C18.6185 10.3888 20.1536 11.0857 21.2221 12.303C20.5501 11.1049 19.5968 9.9539 18.3881 8.96318C15.392 6.50846 11.7315 5.7731 9.21245 6.8771C8.09213 7.83422 7.15037 8.9939 6.44285 10.2995C5.88893 12.9779 7.32989 16.3907 10.3049 18.8281Z' fill='url(%23paint7_linear_27646_144615)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_27646_144615' x1='17.7423' y1='14.6256' x2='15.4735' y2='3.69818' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23476FE7' style='stop-color:%23476FE7;stop-color:color(display-p3 0.2784 0.4353 0.9059);stop-opacity:1;'/%3E%3Cstop offset='0.297' stop-color='%233D5DE6' style='stop-color:%233D5DE6;stop-color:color(display-p3 0.2392 0.3647 0.9020);stop-opacity:1;'/%3E%3Cstop offset='0.5224' stop-color='%233550E7' style='stop-color:%233550E7;stop-color:color(display-p3 0.2078 0.3137 0.9059);stop-opacity:1;'/%3E%3Cstop offset='0.7264' stop-color='%232D47E8' style='stop-color:%232D47E8;stop-color:color(display-p3 0.1765 0.2784 0.9098);stop-opacity:1;'/%3E%3Cstop offset='1' stop-color='%23253FEB' style='stop-color:%23253FEB;stop-color:color(display-p3 0.1451 0.2471 0.9216);stop-opacity:1;'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_27646_144615' x1='26.7891' y1='22.9119' x2='4.45738' y2='15.9977' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2373B1E2' style='stop-color:%2373B1E2;stop-color:color(display-p3 0.4510 0.6941 0.8863);stop-opacity:1;'/%3E%3Cstop offset='0.1627' stop-color='%237FADD8' style='stop-color:%237FADD8;stop-color:color(display-p3 0.4980 0.6784 0.8471);stop-opacity:1;'/%3E%3Cstop offset='0.297' stop-color='%238AA4CD' style='stop-color:%238AA4CD;stop-color:color(display-p3 0.5412 0.6431 0.8039);stop-opacity:1;'/%3E%3Cstop offset='0.4123' stop-color='%23909EC7' style='stop-color:%23909EC7;stop-color:color(display-p3 0.5647 0.6196 0.7804);stop-opacity:1;'/%3E%3Cstop offset='0.5224' stop-color='%239594C0' style='stop-color:%239594C0;stop-color:color(display-p3 0.5843 0.5804 0.7529);stop-opacity:1;'/%3E%3Cstop offset='0.615' stop-color='%23948DBE' style='stop-color:%23948DBE;stop-color:color(display-p3 0.5804 0.5529 0.7451);stop-opacity:1;'/%3E%3Cstop offset='0.7264' stop-color='%239383BB' style='stop-color:%239383BB;stop-color:color(display-p3 0.5765 0.5137 0.7333);stop-opacity:1;'/%3E%3Cstop offset='0.8541' stop-color='%237D71C3' style='stop-color:%237D71C3;stop-color:color(display-p3 0.4902 0.4431 0.7647);stop-opacity:1;'/%3E%3Cstop offset='1' stop-color='%235359D8' style='stop-color:%235359D8;stop-color:color(display-p3 0.3255 0.3490 0.8471);stop-opacity:1;'/%3E%3C/linearGradient%3E%3CradialGradient id='paint2_radial_27646_144615' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(20.9195 26.2782) rotate(-161.896) scale(8.58175 10.8922)'%3E%3Cstop stop-color='%23BFDFEC' style='stop-color:%23BFDFEC;stop-color:color(display-p3 0.7490 0.8745 0.9255);stop-opacity:1;'/%3E%3Cstop offset='1' stop-color='%23BFDFEC' stop-opacity='0' style='stop-color:none;stop-opacity:0;'/%3E%3C/radialGradient%3E%3CradialGradient id='paint3_radial_27646_144615' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(7.0454 23.1294) rotate(-141.843) scale(12.568 6.91296)'%3E%3Cstop stop-color='%23A784AE' style='stop-color:%23A784AE;stop-color:color(display-p3 0.6549 0.5176 0.6824);stop-opacity:1;'/%3E%3Cstop offset='1' stop-color='%23A784AE' stop-opacity='0' style='stop-color:none;stop-opacity:0;'/%3E%3C/radialGradient%3E%3CradialGradient id='paint4_radial_27646_144615' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(12.69 27.222) rotate(-150.092) scale(10.2244 7.87263)'%3E%3Cstop stop-color='%23E8D1AE' stop-opacity='0.8007' style='stop-color:%23E8D1AE;stop-color:color(display-p3 0.9098 0.8196 0.6824);stop-opacity:0.8007;'/%3E%3Cstop offset='1' stop-color='%23E8D1AE' stop-opacity='0' style='stop-color:none;stop-opacity:0;'/%3E%3C/radialGradient%3E%3CradialGradient id='paint5_radial_27646_144615' cx='0' cy='0' r='1' gradientTransform='matrix(-3.52942 8.07852 5.17953 2.26289 26.2542 17.1838)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2370AEF2' stop-opacity='0.83' style='stop-color:%2370AEF2;stop-color:color(display-p3 0.4392 0.6824 0.9490);stop-opacity:0.83;'/%3E%3Cstop offset='1' stop-color='%236896DF' stop-opacity='0' style='stop-color:none;stop-opacity:0;'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint6_linear_27646_144615' x1='13.7677' y1='6.72637' x2='13.7928' y2='20.8846' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231F2158' style='stop-color:%231F2158;stop-color:color(display-p3 0.1216 0.1294 0.3451);stop-opacity:1;'/%3E%3Cstop offset='0.0854' stop-color='%2323276A' style='stop-color:%2323276A;stop-color:color(display-p3 0.1373 0.1529 0.4157);stop-opacity:1;'/%3E%3Cstop offset='0.22' stop-color='%232D3383' style='stop-color:%232D3383;stop-color:color(display-p3 0.1765 0.2000 0.5137);stop-opacity:1;'/%3E%3Cstop offset='0.31' stop-color='%23363E92' style='stop-color:%23363E92;stop-color:color(display-p3 0.2118 0.2431 0.5725);stop-opacity:1;'/%3E%3Cstop offset='0.4551' stop-color='%23494EA8' style='stop-color:%23494EA8;stop-color:color(display-p3 0.2863 0.3059 0.6588);stop-opacity:1;'/%3E%3Cstop offset='0.5801' stop-color='%235C5EB1' style='stop-color:%235C5EB1;stop-color:color(display-p3 0.3608 0.3686 0.6941);stop-opacity:1;'/%3E%3Cstop offset='0.7179' stop-color='%236764AC' style='stop-color:%236764AC;stop-color:color(display-p3 0.4039 0.3922 0.6745);stop-opacity:1;'/%3E%3Cstop offset='0.8652' stop-color='%23746DA7' style='stop-color:%23746DA7;stop-color:color(display-p3 0.4549 0.4275 0.6549);stop-opacity:1;'/%3E%3Cstop offset='1' stop-color='%237B78A6' style='stop-color:%237B78A6;stop-color:color(display-p3 0.4824 0.4706 0.6510);stop-opacity:1;'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint7_linear_27646_144615' x1='13.7742' y1='20.8' x2='13.7742' y2='5.31325' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.41' stop-color='%23201E47' stop-opacity='0.21' style='stop-color:%23201E47;stop-color:color(display-p3 0.1255 0.1176 0.2784);stop-opacity:0.21;'/%3E%3Cstop offset='1' stop-color='%231C1A44' style='stop-color:%231C1A44;stop-color:color(display-p3 0.1098 0.1020 0.2667);stop-opacity:1;'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
}

.common-mask-indicator {
  width: var(--common-mask-indicator-size, 100%);
  height: var(--common-mask-indicator-size, 100%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.common-mask-indicator-mask {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--common-mask-indicator-radius, 0px);
  clip-path: var(--common-mask-indicator-clip, none);
  mask-image: var(--common-mask-indicator-mask, radial-gradient(circle calc(var(--common-mask-indicator-icon-size, 10px) / 2 + 1px + var(--common-mask-indicator-icon-offset, 0px)) at calc(100% - var(--common-mask-indicator-icon-size, 10px) / 2 + 2px) calc(100% - var(--common-mask-indicator-icon-size, 10px) / 2 + 2px), transparent 100%, black 100%));
}
.common-mask-indicator-mask.no-mask {
  mask-image: none;
  clip-path: none;
}
.common-mask-indicator-icon {
  position: absolute;
  width: var(--common-mask-indicator-icon-size, 10px);
  height: var(--common-mask-indicator-icon-size, 10px);
  bottom: var(--common-mask-indicator-icon-bottom, -2px);
  right: var(--common-mask-indicator-icon-right, -2px);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.common-mask-indicator-icon.warning {
  color: var(--dreem-app-color-warning);
}
.common-mask-indicator-icon.error {
  color: var(--dreem-app-color-danger);
}
.common-mask-indicator-icon.success {
  color: var(--dreem-app-color-accent);
}
.common-mask-indicator-icon.disabled {
  filter: grayscale(90%);
}

.common-context-menu {
  display: flex;
  flex-direction: column;
  gap: var(--common-context-menu-gap, 2px);
  background-color: var(--common-context-menu-bg, color-mix(in srgb, var(--dreem-app-background-layer-4) 60%, transparent)) !important;
  backdrop-filter: var(--common-context-menu-backdrop-filter, blur(20px));
  color: var(--common-context-menu-color, var(--dreem-app-color));
  border-radius: var(--common-context-menu-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  overflow: var(--common-context-menu-overflow, auto);
  box-shadow: var(--common-context-menu-shadow, 0 20px 80px rgba(0, 0, 0, var(--dreem-app-shadow-percentage)));
  padding: 8px;
  width: var(--common-context-menu-width, 200px);
  max-width: var(--common-context-menu-max-width, calc(100dvw - 20px));
  font-family: var(--dreem-app-font);
  position: relative;
  max-height: var(--common-context-menu-max-height, calc(100dvh - 20px));
}
.common-context-menu.bg-solid {
  background-color: var(--dreem-app-background-layer-4) !important;
}
.common-context-menu.rounder {
  border-radius: var(--dreem-app-wrapper-radius);
}
.common-context-menu.no-padding {
  padding: 0;
}
.common-context-menu.above-menu {
  background-color: color-mix(in srgb, var(--dreem-app-background-layer-6) 60%, transparent) !important;
}
.common-context-menu.pills-menu {
  flex-direction: column-reverse;
  --common-context-menu-gap: 4px;
  --common-context-menu-bg: transparent;
  --common-context-menu-backdrop-filter: none;
  --common-context-menu-shadow: none;
  --dreem-image-fit: cover;
  --dreem-image-wp-width: 24px;
  --dreem-image-wp-height: 24px;
  --common-context-menu-item-padding-vel: 6px;
  --common-context-menu-item-padding-hoz: 6px;
  --common-context-menu-item-bg-color: #ffffff66;
  --common-context-menu-color: #ffffff;
  --common-context-menu-item-active-bg-color: rgb(0, 159, 85);
  --dreem-app-image-radius: 100px;
  --common-context-menu-item-radius: 100px;
  --common-context-menu-item-width: fit-content;
  --common-context-menu-item-content-justify: center;
  --common-context-menu-item-shadow: 0 10px 100px rgb(0 0 0 / 58%);
  --common-context-menu-overflow: visible;
  --common-context-menu-item-backdrop-filter: blur(20px) brightness(0.8);
  --common-context-menu-item-outline-color: #ffffff2e;
}
.common-context-menu.pills-menu > * {
  animation: zoom 300ms ease-in-out;
  animation-fill-mode: both;
  z-index: 1;
}
.common-context-menu.pills-menu > *:nth-child(1) {
  animation-delay: 0ms;
  z-index: 9;
}
.common-context-menu.pills-menu > *:nth-child(2) {
  animation-delay: 50ms;
  z-index: 8;
}
.common-context-menu.pills-menu > *:nth-child(3) {
  animation-delay: 100ms;
  z-index: 7;
}
.common-context-menu.pills-menu > *:nth-child(4) {
  animation-delay: 150ms;
  z-index: 6;
}
.common-context-menu.pills-menu > *:nth-child(5) {
  animation-delay: 200ms;
  z-index: 5;
}
.common-context-menu.pills-menu > *:nth-child(6) {
  animation-delay: 250ms;
  z-index: 4;
}
.common-context-menu.pills-menu > *:nth-child(7) {
  animation-delay: 300ms;
  z-index: 3;
}
.common-context-menu.pills-menu > *:nth-child(8) {
  animation-delay: 350ms;
  z-index: 2;
}
.common-context-menu.pills-menu > *:nth-child(9) {
  animation-delay: 400ms;
  z-index: 1;
}
.common-context-menu.pills-menu > *:nth-child(10) {
  animation-delay: 450ms;
  z-index: 0;
}
@keyframes zoom {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.common-context-menu.pills-menu * {
  corner-shape: unset !important;
}
.common-context-menu-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.common-context-menu.max-300 {
  --common-context-menu-max-width: 300px;
}
.common-context-menu.fit {
  --common-context-menu-width: fit-content;
}
.common-context-menu.wide {
  --common-context-menu-width: 300px;
}
.common-context-menu.long {
  --common-context-menu-width: 400px;
}
.common-context-menu.longer {
  --common-context-menu-width: 500px;
}
.common-context-menu.small {
  --common-context-menu-item-padding-hoz: 6px;
}
.common-context-menu-header {
  display: flex;
  gap: var(--common-context-menu-item-padding-hoz, 10px);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: var(--common-context-menu-item-padding-vel, 10px) var(--common-context-menu-item-padding-hoz, 10px);
}
.common-context-menu-username {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: 0 var(--common-context-menu-item-padding-hoz, 10px);
  margin-top: var(--common-context-menu-item-padding-vel, 10px);
}
.common-context-menu-email {
  font-size: 12px;
  line-height: 20px;
  color: color-mix(in srgb, currentColor 50%, transparent);
  padding: 0 var(--common-context-menu-item-padding-hoz, 10px);
  margin-bottom: var(--common-context-menu-item-padding-vel, 10px);
  word-break: break-word;
  font-family: var(--dreem-app-small-font);
}
.common-context-menu-separator {
  height: 1px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  margin: 4px var(--common-context-menu-item-padding-hoz, 10px);
}
.common-context-menu-group-name {
  font-size: 10px;
  line-height: 20px;
  padding: 6px var(--common-context-menu-item-padding-hoz, 10px) 0 var(--common-context-menu-item-padding-hoz, 10px);
  opacity: 0.5;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 500;
}
.common-context-menu-group {
  display: flex;
  flex-direction: column;
}
.common-context-menu-group:not(:last-child) {
  margin-bottom: 8px;
}
.common-context-menu-group-title {
  font-size: 10px;
  line-height: 20px;
  padding: 6px var(--common-context-menu-item-padding-hoz, 10px) 4px var(--common-context-menu-item-padding-hoz, 10px);
  opacity: 0.5;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 500;
}
.common-context-menu-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.common-context-menu-item, .common-context-menu-item.MuiMenuItem-root {
  pointer-events: var(--common-context-menu-items-pointer-events, auto);
  width: var(--common-context-menu-item-width, auto);
  cursor: pointer;
  display: flex;
  background-color: var(--common-context-menu-item-bg-color, transparent) !important;
  padding: var(--common-context-menu-item-padding-vel, 10px) var(--common-context-menu-item-padding-hoz, 10px) !important;
  line-height: var(--common-context-menu-icon-size, 20px) !important;
  border-radius: var(--common-context-menu-item-radius, var(--dreem-app-element-radius)) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  gap: var(--common-context-menu-item-padding-vel, 10px) !important;
  transition: var(--dreem-app-transition) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  font-family: var(--dreem-app-small-font) !important;
  box-shadow: var(--common-context-menu-item-shadow, none);
  backdrop-filter: var(--common-context-menu-item-backdrop-filter, none);
  outline: 1px solid var(--common-context-menu-item-outline-color, transparent);
  outline-offset: -1px;
}
.common-context-menu-item.selected, .common-context-menu-item.MuiMenuItem-root.selected {
  --common-context-menu-item-color: var(--dreem-app-color-accent);
  --common-context-menu-item-opacity: 1;
}
.common-context-menu-item.--active, .common-context-menu-item.MuiMenuItem-root.--active {
  --common-context-menu-item-bg-color: var(
    --common-context-menu-item-active-bg-color,
    color-mix(in srgb, currentColor 10%, transparent)
  );
}
.common-context-menu-item.--warning, .common-context-menu-item.MuiMenuItem-root.--warning {
  --common-context-menu-item-color: var(--dreem-app-color-warning);
  --common-context-menu-item-opacity: 1;
  --common-context-menu-item-bg-color: color-mix(in srgb, var(--dreem-app-color-warning) 10%, transparent);
}
.common-context-menu-item.disabled, .common-context-menu-item.MuiMenuItem-root.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.common-context-menu-item:hover, .common-context-menu-item.MuiMenuItem-root:hover {
  --common-context-menu-item-opacity: 1;
  --common-context-menu-item-bg-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-context-menu-item-icon-box, .common-context-menu-item.MuiMenuItem-root-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--common-context-menu-icon-size, 20px);
  height: var(--common-context-menu-icon-size, 20px);
  opacity: var(--common-context-menu-item-opacity, 0.5);
  color: var(--common-context-menu-item-color, currentColor);
  flex-shrink: 0;
}
.common-context-menu-item-content, .common-context-menu-item.MuiMenuItem-root-content {
  display: flex;
  flex-direction: column;
  justify-content: var(--common-context-menu-item-content-justify, flex-start);
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding-right: 10px;
}
.common-context-menu-item-content-title, .common-context-menu-item.MuiMenuItem-root-content-title {
  font-size: var(--common-context-menu-item-content-font-size, 14px);
  line-height: var(--common-context-menu-icon-size, 20px);
  font-weight: var(--common-context-menu-item-content-font-weight, 400);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.common-context-menu-item-content-description, .common-context-menu-item.MuiMenuItem-root-content-description {
  font-size: 11px;
  line-height: 16px;
  opacity: 0.5;
}

.common-popper-button {
  display: flex;
}

.common-empty-state {
  display: flex;
  flex-flow: var(--empty-state-flex-flow, column nowrap);
  padding: var(--empty-state-padding, 30px);
  gap: var(--empty-state-gap, 50px);
  height: var(--empty-state-height, calc(100% - var(--empty-state-margin-bottom, 0px) - var(--empty-state-margin-top, 0px)));
  width: var(--empty-state-width, calc(100% - var(--empty-state-margin-left, 0px) - var(--empty-state-margin-right, 0px)));
  justify-content: var(--empty-state-justify-content, center);
  align-items: var(--empty-state-align-items, center);
  background: var(--empty-state-bg-color, transparent);
  border-radius: var(--empty-state-border-radius, 0px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  margin-left: var(--empty-state-margin-left, 0px);
  margin-right: var(--empty-state-margin-right, 0px);
  margin-top: var(--empty-state-margin-top, 0px);
  margin-bottom: var(--empty-state-margin-bottom, 0px);
  min-height: var(--empty-state-min-height, 0px);
  min-width: var(--empty-state-min-width, 0px);
  z-index: var(--empty-state-z-index, auto);
  backdrop-filter: var(--empty-state-backdrop-filter, none);
  position: var(--empty-state-position, relative);
  left: var(--empty-state-left, unset);
  top: var(--empty-state-top, unset);
  transform: var(--empty-state-transform, unset);
}
.common-empty-state-body {
  display: flex;
  flex-flow: column nowrap;
  align-items: var(--empty-state-body-align-items, center);
  gap: var(--empty-state-body-gap, 20px);
}
.common-empty-state-body-title {
  display: var(--empty-state-title-display, block);
  font-size: var(--empty-state-title-font-size, 30px);
  font-weight: 400;
  line-height: 120%;
  word-wrap: break-word;
  text-align: center;
}
.common-empty-state-body-description {
  display: var(--empty-state-description-display, block);
  font-size: var(--empty-state-description-font-size, 14px);
  font-weight: 400;
  line-height: 20px;
  word-wrap: break-word;
  text-align: center;
  opacity: 0.5;
  font-family: var(--dreem-app-small-font);
}

.common-ellipsis-wrapper {
  flex: var(--ellipsis-flex, unset);
  min-width: var(--ellipsis-min-width, 0);
  display: flex;
  align-items: center;
  gap: var(--ellipsis-gap, 2px);
  color: var(--ellipsis-color, inherit);
  opacity: var(--ellipsis-opacity, 1);
  overflow: hidden;
}
.common-ellipsis-wrapper:hover {
  --ellipsis-icon-opacity: 0.3;
  --ellipsis-icon-transform: translateX(0);
}
.common-ellipsis-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.common-ellipsis-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ellipsis-line-height, 20px);
  height: var(--ellipsis-line-height, 20px);
  opacity: var(--ellipsis-icon-opacity, var(--res-ellipsis-icon-opacity, 0));
  flex-shrink: 0;
  transform: var(--ellipsis-icon-transform, var(--res-ellipsis-icon-box-transform, translateX(-5px)));
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.common-ellipsis-icon-box.always {
  --ellipsis-icon-opacity: 0.3;
  --ellipsis-icon-transform: translateX(0);
}
.common-ellipsis-icon-box:hover {
  --ellipsis-icon-opacity: 1;
}
.common-ellipsis-icon {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin-top: var(--ellipsis-icon-margin-top, 0);
}
.common-ellipsis-icon.active {
  color: var(--ellipsis-icon-active-color, inherit);
}

.common-search {
  border-radius: var(--search-radius, 100px);
  margin: var(--search-margin, 0);
  position: relative;
  display: flex;
  align-items: center;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1);
  background-color: var(--search-background-color, color-mix(in srgb, currentColor 10%, transparent));
  backdrop-filter: var(--search-backdrop-filter, none);
  overflow: hidden;
  font-family: var(--search-font-family, var(--dreem-app-small-font));
  flex-shrink: var(--search-flex-shrink, unset);
}
.common-search:not(.opened) {
  --search-input-cursor: pointer;
}
.common-search.opened {
  outline: 1px solid var(--search-outline-open-color, color-mix(in srgb, currentColor 20%, transparent));
  --search-background-color-hover: transparent;
  --search-background-color: transparent;
  --search-icon-opacity: 1;
}
.common-search:hover {
  --search-icon-opacity: 1;
  background-color: var(--search-background-color-hover, color-mix(in srgb, currentColor 20%, transparent));
}
.common-search-icon-box {
  position: absolute;
  cursor: pointer;
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--search-icon-opacity, 0.5);
  transition: 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1);
}
.common-search-input {
  flex: 1;
  color: inherit;
  font-size: var(--search-font-size, 14px);
  font-weight: var(--search-font-weight, 500);
  line-height: var(--search-line-height, 120%);
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  outline: none;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  text-overflow: ellipsis;
  height: 100%;
  cursor: var(--search-input-cursor, text);
}
.common-search-input::placeholder {
  color: inherit;
  opacity: 0.2;
}

.common-indicators {
  width: 100%;
  height: 100%;
  border-radius: var(--dreem-app-image-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  position: absolute;
  -webkit-transition: var(--dreem-app-transition);
  transition: var(--dreem-app-transition);
  pointer-events: none;
  top: 0;
  left: 0;
}
.common-indicators-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-indicators-item.medium {
  padding: 4px;
}
.common-indicators-item.circle {
  border-radius: 100px;
}
.common-indicators-item.bg-color {
  background-color: color-mix(in srgb, currentColor 20%, var(--dreem-app-background-layer-1) 20%);
}
.common-indicators-item.bg-color.bg-hover {
  transition: var(--dreem-app-transition);
}
.common-indicators-item.bg-color.bg-hover:hover {
  background-color: color-mix(in srgb, currentColor 20%, var(--dreem-app-background-layer-1) 30%);
}
.common-indicators-item.blur-bg {
  backdrop-filter: blur(10px) saturate(2);
}
.common-indicators-item.clickable {
  pointer-events: auto;
  cursor: pointer;
}
.common-indicators-item.is-video {
  border-radius: var(--dreem-app-indicator-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 2px;
}
.common-indicators-item.is-video-icon {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
}
.common-indicators-item.is-feedback {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  height: calc(100% - 16px);
  --btn-height: 26px;
  --btn-padding: 0 3px;
  --btn-min-width: 26px;
  --btn-icon-height: 20px;
  --btn-icon-width: 20px;
  --btn-bg-color: color-mix(in srgb, currentColor 20%, var(--dreem-app-background-layer-5) 100%);
  --btn-bg-color-hover: color-mix(in srgb, currentColor 50%, var(--dreem-app-background-layer-5) 100%);
  --btn-backdrop-filter: var(--is-feedback-backdrop-filter, blur(10px) saturate(2));
}
.common-indicators-item.is-feedback .indicator-like {
  --btn-color: white;
  --btn-bg-color: var(--dreem-app-color-accent);
}
.common-indicators-item.is-feedback .indicator-dislike {
  --btn-color: white;
  --btn-bg-color: #e2991c;
}
.common-indicators-item.is-action-synthetic {
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 10px;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
  border-radius: 0 0 var(--dreem-app-image-radius) var(--dreem-app-image-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-indicators-item.is-action-synthetic .left {
  display: flex;
  gap: 10px;
}
.common-indicators-item.is-action-synthetic .indicator-like {
  --btn-color: white;
  --btn-bg-color: var(--dreem-app-color-accent);
}
.common-indicators-item.is-action-synthetic .indicator-dislike {
  --btn-color: white;
  --btn-bg-color: #e2991c;
}
.common-indicators-item.is-view-type-dropdown {
  --dr-form-field-value-padding: 0;
  --dr-form-field-height: 20px;
  --dr-form-field-radius: var(--dreem-app-indicator-radius);
  --dr-form-field-bg: transparent;
  --dr-form-field-font-size: 11px;
  --dr-select-indicator-size: 10px;
  --dr-select-indicator-ratio: 1/2;
  --dr-form-field-font-weight: 500;
  --dr-form-field-letter-spacing: 0.2px;
  --dr-form-field-text-transform: uppercase;
  --dr-form-field-font-family: var(--dreem-app-font);
  --dr-form-field-transition: none;
  max-width: calc(100% - 8px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  font-family: var(--dreem-app-font);
  line-height: 20px;
  padding: 0 4px;
  border-radius: var(--dreem-app-indicator-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: rgba(0, 0, 0, 0.5);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  display: var(--is-view-type-dropdown-show, block);
}
.common-indicators-item.is-view-type-dropdown-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.common-indicators-item.is-talent-name {
  line-height: 16px;
  font-weight: 400;
  font-family: var(--dreem-app-small-font);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
  border-radius: 0 0 var(--dreem-app-image-radius) var(--dreem-app-image-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  width: 100%;
  padding: 8px 10px;
  align-items: flex-start;
  justify-content: flex-start;
}
.common-indicators-item.is-talent-name .name {
  color: #fff;
  width: 100%;
  max-width: calc(100% - 30px);
  font-size: 11px;
  line-height: 16px;
  border-radius: var(--dreem-app-indicator-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-indicators-item.is-prompt-name {
  width: 100%;
  font-size: 14px;
  font-family: var(--dreem-app-small-font);
  line-height: 22px;
  font-weight: 500;
  padding: 8px 24px 8px 10px;
  align-items: center;
  border-radius: 0 0 var(--dreem-app-image-radius) var(--dreem-app-image-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  display: flex;
  justify-content: flex-end;
}
.common-indicators-item.is-prompt-name.has-shadow {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}
.common-indicators-item.is-prompt-name .name {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 10px;
  color: #fff;
}
.common-indicators-item.is-preview, .common-indicators-item.is-delete {
  border-radius: var(--dreem-app-indicator-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 2px;
  cursor: pointer;
}
.common-indicators-item.is-preview.medium, .common-indicators-item.is-delete.medium {
  padding: 3px;
}
.common-indicators-item.is-rejection {
  color: var(--dreem-app-color-danger);
}
.common-indicators-item.is-selected {
  color: var(--dreem-app-color-accent);
  pointer-events: none;
}
.common-indicators-item.is-selected-circle {
  border-radius: 100px;
  display: var(--is-selected-circle-show, flex);
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: var(--dreem-app-color-accent);
}
.common-indicators-item.is-deselected-circle {
  border-radius: 100px;
  display: var(--is-deselected-circle-show, flex);
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #fff;
  opacity: var(--is-deselected-circle-opacity, var(--res--deselected-circle-opacity, 0));
  pointer-events: var(--is-deselected-circle-pointer-events, all);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.3803921569);
  background-color: rgba(0, 0, 0, 0.12);
}
.common-indicators-item.is-video-duration {
  max-width: calc(100% - 8px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  font-family: var(--dreem-app-font);
  line-height: 20px;
  padding: 0 6px;
  border-radius: var(--dreem-app-indicator-radius);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}
.common-indicators-item.is-video-duration.medium {
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
}
.common-indicators-item.is-new {
  border-radius: var(--dreem-app-indicator-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  font-size: 10px;
  font-weight: 400;
  user-select: none;
}
.common-indicators-item.is-version {
  border-radius: var(--dreem-app-indicator-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: rgba(0, 0, 0, 0.35);
  color: #fff;
  padding: 0px 7px;
  line-height: 22px;
  font-size: 11px;
  font-weight: 500;
  user-select: none;
  min-width: 22px;
}
.common-indicators-item.is-video-processing {
  border-radius: var(--dreem-app-indicator-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  height: 18px;
  line-height: 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  user-select: none;
  max-width: calc(100% - 8px);
  text-transform: uppercase;
}
.common-indicators-item.is-video-processing span {
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  font-family: var(--dreem-app-small-font);
  white-space: nowrap;
}
.common-indicators-item:has(.img-loading-indicator) {
  width: 100%;
  height: 100%;
  --dreem-image-loading-indicator-size: clamp(18px, 16%, 48px);
}
.common-indicators-item.is-clamp-size {
  width: 100%;
  height: 100%;
  --indicator-size: clamp(20px, 28%, 48px);
}
.common-indicators-item.is-blur-overlay {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px) brightness(0.5);
  border-radius: var(--dreem-app-image-radius, 4px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-indicators-item.is-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: var(--dreem-app-image-radius, 4px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}

.common-vertical-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: var(--common-vertical-menu-flex, unset);
  padding: var(--common-vertical-menu-padding, 0);
  margin: var(--common-vertical-menu-margin, 0);
  background: var(--common-vertical-menu-background, transparent);
  border-radius: var(--common-vertical-menu-border-radius, 0);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  width: 100%;
}
.common-vertical-menu-group {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.common-vertical-menu-group-name {
  font-size: 12px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.3;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  padding: 12px;
}
.common-vertical-menu-list {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden auto;
  gap: 2px;
}
.common-vertical-menu-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  height: var(--common-vertical-menu-item-height, 44px);
  border-radius: var(--common-vertical-menu-border-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  cursor: pointer;
  transition: var(--common-vertical-menu-transition, var(--dreem-app-transition));
}
.common-vertical-menu-list-item.active, .common-vertical-menu-list-item:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-vertical-menu-list-item.active {
  --common-vertical-menu-icon-color: var(--cf-vertical-menu-selection-color, currentColor);
  --common-vertical-menu-icon-opacity: 1;
}
.common-vertical-menu-list-item-icon-box {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: var(--common-vertical-menu-icon-opacity, 0.5);
  color: var(--common-vertical-menu-icon-color, currentColor);
  flex-shrink: 0;
}
.common-vertical-menu-list-item-name {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}

.common-parent .common-child-hover {
  display: var(--common-show-child-show, none) !important;
}
.common-parent .common-child-hover.has-transition {
  animation: common-child-hover-show 0.2s ease-in-out;
}
.common-parent:hover, .common-parent:has(.common-flag-child) {
  --common-show-child-show: flex;
}
@keyframes common-child-hover-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.common-hide-on-mobile {
  display: var(--common-hide-on-mobile-display, flex) !important;
}

.common-hide-on-desktop {
  display: var(--common-hide-on-desktop-display, flex) !important;
}

.common-dreem-image-wrapper {
  border-radius: var(--dreem-app-image-radius, 4px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  width: var(--dreem-image-wp-width, 100%);
  min-width: var(--dreem-image-min-width, unset);
  max-width: var(--dreem-image-max-width, 100%);
  height: var(--dreem-image-wp-height, 100%);
  aspect-ratio: var(--dreem-image-ratio, 1/1);
  background-color: var(--dreem-image-bg, transparent);
  cursor: var(--dreem-image-cursor, default);
  pointer-events: var(--dreem-image-pointer-events, inherit);
  display: var(--dreem-image-wp-show, flex);
  position: relative;
  flex-shrink: 0;
  color: var(--dreem-image-wp-color, currentColor);
}
.common-dreem-image-wrapper:hover {
  --dreem-image-opacity: var(--dreem-image-hover-opacity, 1);
}
.common-dreem-image-wrapper:has(.common-shimmer-wave) {
  --dreem-image-cursor: progress;
  --dreem-image-opacity: 0.5;
}
.common-dreem-image-wrapper:has([data-file-name="safety-warning-placeholder.png"]) {
  --is-view-type-dropdown-show: none;
}
.common-dreem-image-wrapper .img-loading-indicator {
  width: var(--dreem-image-loading-indicator-size, 18px) !important;
  height: var(--dreem-image-loading-indicator-size, 18px) !important;
  display: var(--dreem-image-loading-indicator-display, flex);
}
.common-dreem-image-wrapper .is-clamp-size svg {
  width: var(--indicator-size, 20px) !important;
  height: var(--indicator-size, 20px) !important;
}
.common-dreem-image-wrapper.selected img,
.common-dreem-image-wrapper.selected video {
  --dreem-image-outline: var(--dreem-app-outline-select-width) solid var(--dreem-app-color-accent);
}
.common-dreem-image-wrapper.selected.warning {
  --dreem-image-outline: var(--dreem-app-outline-select-width) solid var(--dreem-app-color-warning);
}
.common-dreem-image-wrapper.hide-when-loading.img-loading {
  --dreem-image-wp-show: none;
}
.common-dreem-image-wrapper.clickable {
  --dreem-image-cursor: pointer;
}
.common-dreem-image-wrapper.readonly {
  --dreem-image-pointer-events: none;
}
.common-dreem-image-wrapper.img-loading.clickable {
  --dreem-image-cursor: default;
}
.common-dreem-image-wrapper.img-loading, .common-dreem-image-wrapper.img-error {
  --dreem-image-bg: var(--dreem-app-background-image);
  --dreem-image-show: none;
  --dreem-image-ratio: var(--dreem-image-loading-ratio, 1/1);
  --is-view-type-dropdown-show: none;
}
.common-dreem-image-wrapper.img-empty {
  --dreem-image-bg: var(--dreem-app-background-image);
  --dreem-image-ratio: var(--dreem-image-empty-ratio, 1/1);
}
.common-dreem-image-wrapper.placeholder {
  --dreem-image-bg: color-mix(in srgb, currentColor 5%, var(--dreem-app-background-image) 20%);
  --dreem-image-ratio: var(--dreem-image-placeholder-ratio, 1/1);
  transition: var(--dreem-app-transition);
}
.common-dreem-image-wrapper.placeholder.clickable:hover {
  --dreem-image-bg: color-mix(in srgb, currentColor 20%, var(--dreem-app-background-image) 30%);
}
.common-dreem-image-wrapper.no-corner-shape {
  corner-shape: unset;
}
.common-dreem-image-wrapper.no-corner-shape * {
  corner-shape: unset !important;
}
.common-dreem-image-wrapper img,
.common-dreem-image-wrapper video,
.common-dreem-image-wrapper .common-dreem-image {
  background-color: var(--dreem-app-background-image);
  border-radius: var(--dreem-app-image-radius, 4px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  width: var(--dreem-image-width, 100%);
  height: var(--dreem-image-height, 100%);
  object-fit: var(--dreem-image-fit, contain);
  user-select: none;
  display: var(--dreem-image-show, block);
  opacity: var(--dreem-image-opacity, 1);
  transition: var(--dreem-image-transition, none);
  filter: var(--dreem-image-filter, none);
  outline: var(--dreem-image-outline, var(--dreem-app-outline-select-width) solid transparent);
  outline-offset: var(--dreem-image-outline-offset, calc(var(--dreem-app-outline-select-width) * -1));
  user-drag: none;
  -webkit-user-drag: none;
}

.common-form-field.cf-form-field, .common-form-field {
  flex: 1;
  min-width: 0;
  margin: var(--dr-form-field-margin, 0);
  display: flex;
  flex-direction: column;
  gap: var(--dr-form-field-gap, 4px);
}
.common-form-field.cf-form-field.fit, .common-form-field.fit {
  flex: unset;
  width: fit-content;
  flex-shrink: 0;
}
.common-form-field.cf-form-field.fill, .common-form-field.fill {
  height: 100%;
  --dr-form-field-input-flex: 1;
  --dr-editor-height: 100%;
}
.common-form-field.cf-form-field:has(.invalid), .common-form-field.cf-form-field.invalid, .common-form-field:has(.invalid), .common-form-field.invalid {
  --dr-form-field-outline: 1px solid var(--dreem-app-color-danger);
}
.common-form-field.cf-form-field:has(input:disabled):hover, .common-form-field.cf-form-field:has(textarea:disabled):hover, .common-form-field.cf-form-field:has(.disabled):hover, .common-form-field:has(input:disabled):hover, .common-form-field:has(textarea:disabled):hover, .common-form-field:has(.disabled):hover {
  --dr-form-field-bg: color-mix(in srgb, currentColor 5%, transparent);
  --dr-select-indicator-op: 0.5;
  --dr-form-field-label-color: color-mix(in srgb, currentColor 40%, transparent);
}
.common-form-field.cf-form-field:hover, .common-form-field:hover {
  --dr-form-field-bg: color-mix(in srgb, currentColor 10%, transparent);
  --dr-icon-calendar-op: 1;
  --dr-select-indicator-op: 1;
  --dr-form-field-label-color: color-mix(in srgb, currentColor 100%, transparent);
}
.common-form-field.cf-form-field:has(input:focus), .common-form-field.cf-form-field:has(textarea:focus), .common-form-field:has(input:focus), .common-form-field:has(textarea:focus) {
  --dr-form-field-label-color: color-mix(in srgb, currentColor 100%, transparent);
  --dr-form-field-outline: var(
    --dr-form-field-outline-focus,
    1px solid color-mix(in srgb, currentColor 20%, transparent)
  );
  --dr-form-field-bg: var(--dr-form-field-bg-focus, transparent);
  --dr-icon-calendar-op: 1;
  --dr-select-indicator-op: 1;
}
.common-form-field.cf-form-field .cf-form-field-label, .common-form-field.cf-form-field-label, .common-form-field .cf-form-field-label, .common-form-field-label {
  margin: 0;
  font-size: 12px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--dr-form-field-label-color, color-mix(in srgb, currentColor 40%, transparent));
  transition: var(--dreem-app-transition);
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.common-form-field.cf-form-field .cf-form-field-label-icon, .common-form-field.cf-form-field-label-icon, .common-form-field .cf-form-field-label-icon, .common-form-field-label-icon {
  display: flex;
}
.common-form-field.cf-form-field .cf-form-field-label [class^=icon], .common-form-field.cf-form-field-label [class^=icon], .common-form-field .cf-form-field-label [class^=icon], .common-form-field-label [class^=icon] {
  cursor: inherit;
}
.common-form-field.cf-form-field .cf-form-select, .common-form-field .cf-form-select {
  width: 100%;
  font-size: 13px;
  line-height: var(--common-reset-form-field-height, 44px);
  font-weight: 400;
  outline-offset: -1px;
  outline: var(--dr-form-field-outline, 1px solid transparent);
  transition: var(--dreem-app-transition);
  background-color: var(--dr-form-field-bg, color-mix(in srgb, currentColor 5%, transparent));
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border: none;
  color: inherit;
  font-family: inherit;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.common-form-field.cf-form-field .cf-form-select .cf__control, .common-form-field .cf-form-select .cf__control {
  width: 100%;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent;
  min-height: unset !important;
  gap: 2px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  transition: all ease-in-out 0.05s;
  padding: 0;
}
.common-form-field.cf-form-field .cf-form-select .cf__control .cf__value-container, .common-form-field .cf-form-select .cf__control .cf__value-container {
  padding: 0 14px;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.common-form-field.cf-form-field .cf-form-select .cf__control .cf__value-container .cf__placeholder, .common-form-field .cf-form-select .cf__control .cf__value-container .cf__placeholder {
  position: absolute;
  line-height: inherit;
  margin: 0;
  height: unset;
  top: unset;
  color: inherit;
  opacity: 0.2;
}
.common-form-field.cf-form-field .cf-form-select .cf__control .cf__value-container .cf__input-container, .common-form-field .cf-form-select .cf__control .cf__value-container .cf__input-container {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  border-radius: 0;
  background-color: transparent;
  letter-spacing: 0;
}
.common-form-field.cf-form-field .cf-form-select .cf__control .cf__value-container .cf__input-container input, .common-form-field .cf-form-select .cf__control .cf__value-container .cf__input-container input {
  border: none !important;
  outline: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  border-radius: 0 !important;
  background-color: transparent;
  letter-spacing: 0 !important;
  padding: 0 !important;
  height: var(--common-reset-form-field-height, 44px) !important;
  box-shadow: none !important;
}
.common-form-field.cf-form-field .cf-form-select .cf__control .cf__indicators, .common-form-field .cf-form-select .cf__control .cf__indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--common-reset-form-field-height, 44px);
  aspect-ratio: 1/1;
}
.common-form-field.cf-form-field .cf-form-select .cf__control .cf__indicators .cf__indicator-separator, .common-form-field .cf-form-select .cf__control .cf__indicators .cf__indicator-separator {
  display: none;
}
.common-form-field.cf-form-field .cf-form-select .cf__control .cf__indicators .cf__indicator, .common-form-field .cf-form-select .cf__control .cf__indicators .cf__indicator {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1/1;
  color: inherit;
}
.common-form-field.cf-form-field .cf-form-select .cf__control .cf__indicators .cf__indicator svg, .common-form-field .cf-form-select .cf__control .cf__indicators .cf__indicator svg {
  width: 16px;
  height: 16px;
  opacity: var(--dr-select-indicator-op, 0.5);
  color: var(--dr-icon-caret-color, currentColor);
}
.common-form-field.cf-form-field .cf-form-select .cf__control--menu-is-open, .common-form-field .cf-form-select .cf__control--menu-is-open {
  --dr-select-indicator-op: 1;
}
.common-form-field.cf-form-field .cf-form-select .cf__control--is-focused, .common-form-field .cf-form-select .cf__control--is-focused {
  --dr-select-indicator-op: 1;
}
.common-form-field.cf-form-field .cf-form-select .cf__menu, .common-form-field .cf-form-select .cf__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--dreem-app-background-layer-4);
  color: var(--dreem-app-color);
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0, 0, 0, var(--dreem-app-shadow-percentage));
  padding: 8px;
  font-family: var(--dreem-app-small-font);
}
.common-form-field.cf-form-field .cf-form-select .cf__menu .cf__menu-list, .common-form-field .cf-form-select .cf__menu .cf__menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.common-form-field.cf-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option, .common-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: inherit;
  cursor: pointer;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  transition: var(--dreem-app-transition);
}
.common-form-field.cf-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option:hover, .common-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-form-field.cf-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option--is-selected, .common-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option--is-selected {
  background-color: var(--dreem-app-color-accent);
  color: #fff;
}
.common-form-field.cf-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option--is-focused, .common-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option--is-focused {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-form-field.cf-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option--is-focused.cf__option--is-selected, .common-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option--is-focused.cf__option--is-selected {
  background-color: var(--dreem-app-color-accent);
  color: #fff;
}
.common-form-field.cf-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option--is-disabled, .common-form-field .cf-form-select .cf__menu .cf__menu-list .cf__option--is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.common-form-field.cf-form-field .cf-form-select .cf__menu .cf__menu-list .cf__menu-notice--loading, .common-form-field .cf-form-select .cf__menu .cf__menu-list .cf__menu-notice--loading {
  color: inherit;
  opacity: 0.5;
  padding: 0;
  font-size: 13px;
  line-height: 20px;
  padding: 8px 12px;
}
.common-form-field.cf-form-field .measure-element, .common-form-field .measure-element {
  position: absolute;
}
.common-form-field.cf-form-field .cf-form-field-input,
.common-form-field.cf-form-field .cf-form-field-input-wrapper, .common-form-field.cf-form-field-input, .common-form-field .cf-form-field-input,
.common-form-field .cf-form-field-input-wrapper, .common-form-field-input {
  display: flex;
  position: relative;
  font-family: var(--dreem-app-small-font);
  flex: var(--dr-form-field-input-flex, unset);
  min-height: 0;
}
.common-form-field.cf-form-field .cf-form-field-input:has([class*=addon-block]) input,
.common-form-field.cf-form-field .cf-form-field-input-wrapper:has([class*=addon-block]) input, .common-form-field.cf-form-field-input:has([class*=addon-block]) input, .common-form-field .cf-form-field-input:has([class*=addon-block]) input,
.common-form-field .cf-form-field-input-wrapper:has([class*=addon-block]) input, .common-form-field-input:has([class*=addon-block]) input {
  padding-right: 40px;
}
.common-form-field.cf-form-field .cf-form-field-input .MuiAutocomplete-inputRoot, .common-form-field.cf-form-field .cf-form-field-input > input,
.common-form-field.cf-form-field .cf-form-field-input textarea,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot,
.common-form-field.cf-form-field .cf-form-field-input-wrapper > input,
.common-form-field.cf-form-field .cf-form-field-input-wrapper textarea, .common-form-field.cf-form-field-input .MuiAutocomplete-inputRoot, .common-form-field.cf-form-field-input > input,
.common-form-field.cf-form-field-input textarea, .common-form-field .cf-form-field-input .MuiAutocomplete-inputRoot, .common-form-field .cf-form-field-input > input,
.common-form-field .cf-form-field-input textarea,
.common-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot,
.common-form-field .cf-form-field-input-wrapper > input,
.common-form-field .cf-form-field-input-wrapper textarea, .common-form-field-input .MuiAutocomplete-inputRoot, .common-form-field-input > input,
.common-form-field-input textarea {
  width: 100%;
  font-size: var(--dr-form-field-font-size, 14px);
  font-weight: 400;
  outline-offset: -1px;
  outline: var(--dr-form-field-outline, 1px solid transparent);
  transition: var(--dreem-app-transition);
  background-color: var(--dr-form-field-bg, color-mix(in srgb, currentColor 5%, transparent));
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border: none;
  color: inherit;
  font-family: inherit;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.common-form-field.cf-form-field .cf-form-field-input .MuiAutocomplete-inputRoot[type=number]::-webkit-inner-spin-button, .common-form-field.cf-form-field .cf-form-field-input .MuiAutocomplete-inputRoot[type=number]::-webkit-outer-spin-button, .common-form-field.cf-form-field .cf-form-field-input > input[type=number]::-webkit-inner-spin-button, .common-form-field.cf-form-field .cf-form-field-input > input[type=number]::-webkit-outer-spin-button,
.common-form-field.cf-form-field .cf-form-field-input textarea[type=number]::-webkit-inner-spin-button,
.common-form-field.cf-form-field .cf-form-field-input textarea[type=number]::-webkit-outer-spin-button,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot[type=number]::-webkit-inner-spin-button,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot[type=number]::-webkit-outer-spin-button,
.common-form-field.cf-form-field .cf-form-field-input-wrapper > input[type=number]::-webkit-inner-spin-button,
.common-form-field.cf-form-field .cf-form-field-input-wrapper > input[type=number]::-webkit-outer-spin-button,
.common-form-field.cf-form-field .cf-form-field-input-wrapper textarea[type=number]::-webkit-inner-spin-button,
.common-form-field.cf-form-field .cf-form-field-input-wrapper textarea[type=number]::-webkit-outer-spin-button, .common-form-field.cf-form-field-input .MuiAutocomplete-inputRoot[type=number]::-webkit-inner-spin-button, .common-form-field.cf-form-field-input .MuiAutocomplete-inputRoot[type=number]::-webkit-outer-spin-button, .common-form-field.cf-form-field-input > input[type=number]::-webkit-inner-spin-button, .common-form-field.cf-form-field-input > input[type=number]::-webkit-outer-spin-button,
.common-form-field.cf-form-field-input textarea[type=number]::-webkit-inner-spin-button,
.common-form-field.cf-form-field-input textarea[type=number]::-webkit-outer-spin-button, .common-form-field .cf-form-field-input .MuiAutocomplete-inputRoot[type=number]::-webkit-inner-spin-button, .common-form-field .cf-form-field-input .MuiAutocomplete-inputRoot[type=number]::-webkit-outer-spin-button, .common-form-field .cf-form-field-input > input[type=number]::-webkit-inner-spin-button, .common-form-field .cf-form-field-input > input[type=number]::-webkit-outer-spin-button,
.common-form-field .cf-form-field-input textarea[type=number]::-webkit-inner-spin-button,
.common-form-field .cf-form-field-input textarea[type=number]::-webkit-outer-spin-button,
.common-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot[type=number]::-webkit-inner-spin-button,
.common-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot[type=number]::-webkit-outer-spin-button,
.common-form-field .cf-form-field-input-wrapper > input[type=number]::-webkit-inner-spin-button,
.common-form-field .cf-form-field-input-wrapper > input[type=number]::-webkit-outer-spin-button,
.common-form-field .cf-form-field-input-wrapper textarea[type=number]::-webkit-inner-spin-button,
.common-form-field .cf-form-field-input-wrapper textarea[type=number]::-webkit-outer-spin-button, .common-form-field-input .MuiAutocomplete-inputRoot[type=number]::-webkit-inner-spin-button, .common-form-field-input .MuiAutocomplete-inputRoot[type=number]::-webkit-outer-spin-button, .common-form-field-input > input[type=number]::-webkit-inner-spin-button, .common-form-field-input > input[type=number]::-webkit-outer-spin-button,
.common-form-field-input textarea[type=number]::-webkit-inner-spin-button,
.common-form-field-input textarea[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.common-form-field.cf-form-field .cf-form-field-input .MuiAutocomplete-inputRoot:disabled, .common-form-field.cf-form-field .cf-form-field-input > input:disabled,
.common-form-field.cf-form-field .cf-form-field-input textarea:disabled,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot:disabled,
.common-form-field.cf-form-field .cf-form-field-input-wrapper > input:disabled,
.common-form-field.cf-form-field .cf-form-field-input-wrapper textarea:disabled, .common-form-field.cf-form-field-input .MuiAutocomplete-inputRoot:disabled, .common-form-field.cf-form-field-input > input:disabled,
.common-form-field.cf-form-field-input textarea:disabled, .common-form-field .cf-form-field-input .MuiAutocomplete-inputRoot:disabled, .common-form-field .cf-form-field-input > input:disabled,
.common-form-field .cf-form-field-input textarea:disabled,
.common-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot:disabled,
.common-form-field .cf-form-field-input-wrapper > input:disabled,
.common-form-field .cf-form-field-input-wrapper textarea:disabled, .common-form-field-input .MuiAutocomplete-inputRoot:disabled, .common-form-field-input > input:disabled,
.common-form-field-input textarea:disabled {
  color: var(--dr-form-field-disabled-color, color-mix(in srgb, currentColor 50%, transparent));
}
.common-form-field.cf-form-field .cf-form-field-input fieldset,
.common-form-field.cf-form-field .cf-form-field-input-wrapper fieldset, .common-form-field.cf-form-field-input fieldset, .common-form-field .cf-form-field-input fieldset,
.common-form-field .cf-form-field-input-wrapper fieldset, .common-form-field-input fieldset {
  display: none;
}
.common-form-field.cf-form-field .cf-form-field-input > input,
.common-form-field.cf-form-field .cf-form-field-input .MuiAutocomplete-inputRoot,
.common-form-field.cf-form-field .cf-form-field-input-wrapper > input,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot, .common-form-field.cf-form-field-input > input,
.common-form-field.cf-form-field-input .MuiAutocomplete-inputRoot, .common-form-field .cf-form-field-input > input,
.common-form-field .cf-form-field-input .MuiAutocomplete-inputRoot,
.common-form-field .cf-form-field-input-wrapper > input,
.common-form-field .cf-form-field-input-wrapper .MuiAutocomplete-inputRoot, .common-form-field-input > input,
.common-form-field-input .MuiAutocomplete-inputRoot {
  line-height: var(--common-reset-form-field-height, 44px);
  padding: var(--common-reset-form-field-input-padding, 0 14px);
  text-overflow: ellipsis;
  height: var(--common-reset-form-field-height, 44px);
}
.common-form-field.cf-form-field .cf-form-field-input .MuiAutocomplete-endAdornment,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .MuiAutocomplete-endAdornment, .common-form-field.cf-form-field-input .MuiAutocomplete-endAdornment, .common-form-field .cf-form-field-input .MuiAutocomplete-endAdornment,
.common-form-field .cf-form-field-input-wrapper .MuiAutocomplete-endAdornment, .common-form-field-input .MuiAutocomplete-endAdornment {
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-form-field.cf-form-field .cf-form-field-input .MuiButtonBase-root,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .MuiButtonBase-root, .common-form-field.cf-form-field-input .MuiButtonBase-root, .common-form-field .cf-form-field-input .MuiButtonBase-root,
.common-form-field .cf-form-field-input-wrapper .MuiButtonBase-root, .common-form-field-input .MuiButtonBase-root {
  color: inherit !important;
}
.common-form-field.cf-form-field .cf-form-field-input textarea,
.common-form-field.cf-form-field .cf-form-field-input-wrapper textarea, .common-form-field.cf-form-field-input textarea, .common-form-field .cf-form-field-input textarea,
.common-form-field .cf-form-field-input-wrapper textarea, .common-form-field-input textarea {
  resize: none;
  height: var(--common-reset-form-field-textarea-height, 100px);
  line-height: 20px;
  padding: var(--common-reset-form-field-textarea-padding, 12px 14px);
}
.common-form-field.cf-form-field .cf-form-field-input textarea::placeholder,
.common-form-field.cf-form-field .cf-form-field-input-wrapper textarea::placeholder, .common-form-field.cf-form-field-input textarea::placeholder, .common-form-field .cf-form-field-input textarea::placeholder,
.common-form-field .cf-form-field-input-wrapper textarea::placeholder, .common-form-field-input textarea::placeholder {
  color: inherit;
  opacity: 0.2;
}
.common-form-field.cf-form-field .cf-form-field-input-control,
.common-form-field.cf-form-field .cf-form-field-input-wrapper-control, .common-form-field.cf-form-field-input-control, .common-form-field .cf-form-field-input-control,
.common-form-field .cf-form-field-input-wrapper-control, .common-form-field-input-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 2px;
  height: 100%;
  aspect-ratio: 1/1.5;
  max-height: 36px;
  align-self: center;
}
.common-form-field.cf-form-field .cf-form-field-input-control-icon,
.common-form-field.cf-form-field .cf-form-field-input-wrapper-control-icon, .common-form-field.cf-form-field-input-control-icon, .common-form-field .cf-form-field-input-control-icon,
.common-form-field .cf-form-field-input-wrapper-control-icon, .common-form-field-input-control-icon {
  cursor: pointer;
  opacity: 0.5 !important;
  position: absolute;
}
.common-form-field.cf-form-field .cf-form-field-input-control-icon:first-child,
.common-form-field.cf-form-field .cf-form-field-input-wrapper-control-icon:first-child, .common-form-field.cf-form-field-input-control-icon:first-child, .common-form-field .cf-form-field-input-control-icon:first-child,
.common-form-field .cf-form-field-input-wrapper-control-icon:first-child, .common-form-field-input-control-icon:first-child {
  top: 2px;
}
.common-form-field.cf-form-field .cf-form-field-input-control-icon:last-child,
.common-form-field.cf-form-field .cf-form-field-input-wrapper-control-icon:last-child, .common-form-field.cf-form-field-input-control-icon:last-child, .common-form-field .cf-form-field-input-control-icon:last-child,
.common-form-field .cf-form-field-input-wrapper-control-icon:last-child, .common-form-field-input-control-icon:last-child {
  bottom: 2px;
}
.common-form-field.cf-form-field .cf-form-field-input-control-icon:hover,
.common-form-field.cf-form-field .cf-form-field-input-wrapper-control-icon:hover, .common-form-field.cf-form-field-input-control-icon:hover, .common-form-field .cf-form-field-input-control-icon:hover,
.common-form-field .cf-form-field-input-wrapper-control-icon:hover, .common-form-field-input-control-icon:hover {
  opacity: 1 !important;
}
.common-form-field.cf-form-field .cf-form-field-input .icon-right,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .icon-right, .common-form-field.cf-form-field-input .icon-right, .common-form-field .cf-form-field-input .icon-right,
.common-form-field .cf-form-field-input-wrapper .icon-right, .common-form-field-input .icon-right {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  position: absolute;
  right: 0;
  opacity: var(--dr-icon-calendar-op, 0.5) !important;
  color: var(--dr-icon-calendar-color, currentColor);
  transition: var(--dreem-app-transition);
  height: var(--common-reset-form-field-height, 44px);
}
.common-form-field.cf-form-field .cf-form-field-input .cf-form-field-addon-block, .common-form-field.cf-form-field .cf-form-field-input-addon-block,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .cf-form-field-addon-block,
.common-form-field.cf-form-field .cf-form-field-input-wrapper-addon-block, .common-form-field.cf-form-field-input .cf-form-field-addon-block, .common-form-field.cf-form-field-input-addon-block, .common-form-field .cf-form-field-input .cf-form-field-addon-block, .common-form-field .cf-form-field-input-addon-block,
.common-form-field .cf-form-field-input-wrapper .cf-form-field-addon-block,
.common-form-field .cf-form-field-input-wrapper-addon-block, .common-form-field-input .cf-form-field-addon-block, .common-form-field-input-addon-block {
  background-color: transparent;
  color: inherit;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1/1;
  width: unset;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--dreem-app-element-radius) var(--dreem-app-element-radius) 0;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  cursor: pointer;
}
.common-form-field.cf-form-field .cf-form-field-input .cf-form-field-addon-block:hover, .common-form-field.cf-form-field .cf-form-field-input-addon-block:hover,
.common-form-field.cf-form-field .cf-form-field-input-wrapper .cf-form-field-addon-block:hover,
.common-form-field.cf-form-field .cf-form-field-input-wrapper-addon-block:hover, .common-form-field.cf-form-field-input .cf-form-field-addon-block:hover, .common-form-field.cf-form-field-input-addon-block:hover, .common-form-field .cf-form-field-input .cf-form-field-addon-block:hover, .common-form-field .cf-form-field-input-addon-block:hover,
.common-form-field .cf-form-field-input-wrapper .cf-form-field-addon-block:hover,
.common-form-field .cf-form-field-input-wrapper-addon-block:hover, .common-form-field-input .cf-form-field-addon-block:hover, .common-form-field-input-addon-block:hover {
  opacity: 1;
}
.common-form-field.cf-form-field .cf-form-field-input.negative-margin,
.common-form-field.cf-form-field .cf-form-field-input-wrapper.negative-margin, .common-form-field.cf-form-field-input.negative-margin, .common-form-field .cf-form-field-input.negative-margin,
.common-form-field .cf-form-field-input-wrapper.negative-margin, .common-form-field-input.negative-margin {
  margin: var(--dr-form-field-negative-margin, 0) !important;
}
.common-form-field.cf-form-field .cf-form-field-input.no-bg,
.common-form-field.cf-form-field .cf-form-field-input-wrapper.no-bg, .common-form-field.cf-form-field-input.no-bg, .common-form-field .cf-form-field-input.no-bg,
.common-form-field .cf-form-field-input-wrapper.no-bg, .common-form-field-input.no-bg {
  --dr-form-field-bg: transparent;
}
.common-form-field.cf-form-field .cf-form-field-error-msg, .common-form-field.cf-form-field-error-msg, .common-form-field .cf-form-field-error-msg, .common-form-field-error-msg {
  position: relative;
  color: var(--dreem-app-color-danger);
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
}
.common-form-field.cf-form-field .cf-form-field-description, .common-form-field.cf-form-field-description, .common-form-field .cf-form-field-description, .common-form-field-description {
  position: relative;
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: inherit;
  opacity: 0.5;
  font-family: var(--dreem-app-small-font);
}
.common-form-field.cf-form-field .cf-async-select-wrapper, .common-form-field .cf-async-select-wrapper {
  display: flex;
  width: 100%;
}

.common-form-select {
  width: 100% !important;
  font-size: var(--dr-form-field-font-size, 14px) !important;
  line-height: var(--dr-form-field-height, 44px) !important;
  font-weight: var(--dr-form-field-font-weight, 400) !important;
  letter-spacing: var(--dr-form-field-letter-spacing, 0) !important;
  text-transform: var(--dr-form-field-text-transform, none) !important;
  outline-offset: -1px !important;
  outline: var(--dr-form-field-outline, 1px solid transparent) !important;
  transition: var(--dr-form-field-transition, var(--dreem-app-transition)) !important;
  background-color: var(--dr-form-field-bg, color-mix(in srgb, currentColor 5%, transparent)) !important;
  border-radius: var(--dr-select-radius, var(--dreem-app-element-radius)) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border: none !important;
  color: inherit !important;
  font-family: var(--dr-form-field-font-family, var(--dreem-app-small-font)) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.common-form-select-separator {
  height: 1px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  margin: 4px var(--common-context-menu-item-padding-hoz, 10px);
}
.common-form-select-group-name {
  font-size: 10px;
  line-height: 20px;
  padding: 6px var(--common-context-menu-item-padding-hoz, 10px) 0 var(--common-context-menu-item-padding-hoz, 10px);
  opacity: 0.5;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 500;
}
.common-form-select-custom-value {
  display: flex;
  align-items: center;
  gap: 8px;
}
.common-form-select:hover {
  background-color: var(--dr-form-field-bg-hover, color-mix(in srgb, currentColor 8%, transparent)) !important;
}
.common-form-select:focus-within {
  background-color: var(--dr-form-field-bg-focus-within, transparent) !important;
  outline: 1px solid transparent !important;
}
.common-form-select.focus-with-background {
  --dr-form-field-bg-focus-within: color-mix(in srgb, currentColor 10%, transparent);
}
.common-form-select.small {
  line-height: 22px !important;
  --dr-form-field-height: 22px !important;
  --dr-form-field-value-padding: 0 2px 0 8px !important;
  --dr-form-field-font-size: 12px !important;
  --dr-select-indicator-size: 12px !important;
  --dr-select-radius: var(--dreem-app-base-radius);
}
.common-form-select.small-rounded {
  line-height: 22px !important;
  --dr-form-field-height: 22px;
  --dr-form-field-value-padding: 0 2px 0 8px;
  --dr-form-field-font-size: 12px;
  --dr-select-indicator-size: 10px;
  --dr-select-indicator-ratio: 3/4;
  --dr-select-radius: 100px;
  --dr-select-indicator-justify-content: flex-start;
  --dr-form-field-bg-focus-within: color-mix(in srgb, currentColor 10%, transparent);
  --dr-form-field-bg: transparent;
}
.common-form-select.medium {
  line-height: 32px !important;
  --dr-form-field-height: 32px !important;
  --dr-form-field-value-padding: 0 4px 0 10px !important;
  --dr-form-field-font-size: 14px !important;
  --dr-select-indicator-size: 12px !important;
  --dr-select-radius: var(--dreem-app-element-radius);
}
.common-form-select.fit {
  width: fit-content !important;
  max-width: 100% !important;
}
.common-form-select.fit.empty .common-form-select__value-container {
  min-width: 60px !important;
}
.common-form-select.no-bg {
  background-color: transparent !important;
}
.common-form-select.negative-margin {
  margin: var(--dr-select-negative-margin, 0) !important;
}
.common-form-select--is-disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}
.common-form-select__control {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  min-height: unset !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  transition: all ease-in-out 0.05s !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.common-form-select__value-container {
  padding: var(--dr-form-field-value-padding, 0 14px) !important;
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.common-form-select__placeholder {
  line-height: inherit !important;
  margin: 0 !important;
  height: unset !important;
  top: unset !important;
  color: inherit !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 0.2 !important;
  width: 100% !important;
}
.common-form-select__single-value {
  color: inherit !important;
  margin: 0 !important;
}
.common-form-select__input-container {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  letter-spacing: 0 !important;
}
.common-form-select__input-container input {
  border: none !important;
  outline: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  height: 44px !important;
  width: 100% !important;
  box-shadow: none !important;
}
.common-form-select__input-container::after {
  display: none;
}
.common-form-select__indicators {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--dr-form-field-height, 44px) !important;
  aspect-ratio: var(--dr-select-indicator-ratio, 1/1) !important;
}
.common-form-select__indicator-separator {
  display: none !important;
}
.common-form-select__indicator {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: var(--dr-select-indicator-justify-content, center) !important;
  height: 100% !important;
  aspect-ratio: var(--dr-select-indicator-ratio, 1/1) !important;
  color: inherit !important;
}
.common-form-select__indicator svg {
  width: var(--dr-select-indicator-size, 16px) !important;
  height: var(--dr-select-indicator-size, 16px) !important;
  opacity: var(--dr-select-indicator-op, 0.3) !important;
  color: var(--dr-icon-caret-color, currentColor) !important;
}
.common-form-select__control--menu-is-open {
  --dr-select-indicator-op: 1 !important;
}
.common-form-select__control--is-focused {
  --dr-select-indicator-op: 1 !important;
}
.common-form-select__menu {
  min-width: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  background-color: color-mix(in srgb, var(--dreem-app-background-layer-4) 60%, transparent) !important;
  backdrop-filter: blur(20px);
  color: var(--dreem-app-color) !important;
  border-radius: var(--dreem-app-block-radius) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  overflow: hidden !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, var(--dreem-app-shadow-percentage)) !important;
  padding: 8px 0 8px 8px !important;
  font-family: var(--dreem-app-small-font) !important;
}
.common-form-select__menu.above-popper {
  background-color: color-mix(in srgb, var(--dreem-app-background-layer-6) 60%, transparent) !important;
}
.common-form-select__menu.small-menu {
  --common-form-select-menu-option-padding: 4px 8px;
}
.common-form-select__menu.fit {
  width: fit-content !important;
}
.common-form-select__menu-notice {
  opacity: 0.4 !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 20px !important;
}
.common-form-select__menu-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 8px 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.common-form-select__option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: var(--common-form-select-menu-option-padding, 8px 12px) !important;
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: inherit !important;
  cursor: pointer !important;
  border-radius: var(--dreem-app-element-radius) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  transition: var(--dreem-app-transition) !important;
  min-height: unset !important;
}
.common-form-select__option > div {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.common-form-select__option:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
}
.common-form-select__option--is-selected {
  background-color: var(--dreem-app-color-accent) !important;
  color: #fff !important;
}
.common-form-select__option--is-focused, .common-form-select__option.Mui-focusVisible {
  background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
}
.common-form-select__option--is-focused.common-form-select__option--is-selected, .common-form-select__option.Mui-focusVisible.common-form-select__option--is-selected {
  background-color: var(--dreem-app-color-accent) !important;
}
.common-form-select__option--is-disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}
.common-form-select .measure-element {
  position: absolute;
}
.common-form-select-async-select-wrapper {
  display: flex;
  width: 100%;
}
.common-form-select__menu-portal {
  z-index: var(--dreem-app-z-layer-10) !important;
}

.common-select[class*=MuiSelect-root] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--common-select-font-size, 14px);
  line-height: 20px;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: var(--common-select-bg, color-mix(in srgb, currentColor 5%, transparent));
  cursor: pointer;
  position: relative;
  outline-offset: -2px;
  outline: 2px solid transparent;
  transition: var(--dreem-app-transition);
  font-family: var(--dreem-app-small-font) !important;
}
.common-select[class*=MuiSelect-root].MuiInputBase-readOnly {
  cursor: not-allowed;
  opacity: 0.5;
}
.common-select[class*=MuiSelect-root].Mui-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: inherit;
}
.common-select[class*=MuiSelect-root] [class*=MuiSelect-select] {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: var(--common-select-height, 44px);
  padding: var(--common-select-padding, 0px 30px 0px 14px);
  height: var(--common-select-height, 44px);
  min-height: var(--common-select-min-height, unset);
  -webkit-text-fill-color: inherit;
}
.common-select.stretch {
  width: 100%;
}
.common-select fieldset {
  border: none;
  top: 0;
}
.common-select-open {
  outline: var(--common-select-open-outline, 1px solid color-mix(in srgb, currentColor 20%, transparent)) !important;
  --common-select-bg: transparent;
  --common-select-caret-opacity: 1;
}
.common-select-caret {
  transition: var(--dreem-app-transition);
  opacity: var(--common-select-caret-opacity, 0.2) !important;
  position: absolute;
  right: 10px;
  pointer-events: none;
}
.common-select:hover {
  --common-select-caret-opacity: 1;
  --common-select-bg: var(--common-select-bg-hover, color-mix(in srgb, currentColor 10%, transparent));
}
.common-select-menu[class*=MuiMenu-paper] {
  margin: 10px 0;
  color: var(--dreem-app-color) !important;
  border-radius: var(--common-dialog-radius, var(--dreem-app-block-radius)) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: color-mix(in srgb, var(--dreem-app-background-layer-4) 60%, transparent) !important;
  backdrop-filter: blur(20px);
  border: none !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, var(--dreem-app-shadow-percentage)) !important;
  font-family: var(--dreem-app-small-font) !important;
}
.common-select-menu[class*=MuiMenu-paper] [class*=MuiMenu-list] {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.common-select-menu[class*=MuiMenu-paper].above-popper {
  background-color: color-mix(in srgb, var(--dreem-app-background-layer-6) 60%, transparent) !important;
}
.common-select-menu-item {
  font-size: var(--common-select-font-size, 14px) !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  border-radius: var(--dreem-app-element-radius) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  transition: var(--dreem-app-transition);
}
.common-select-menu-item:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
}
.common-select-menu-item[class*=Mui-selected] {
  background-color: var(--dreem-app-color-accent) !important;
  color: #fff;
}
.common-select-menu-item[class*=Mui-selected]:hover {
  background-color: color-mix(in srgb, var(--dreem-app-color-accent) 40%, transparent) !important;
}
.common-select-menu-item[class*=Mui-selected][class*=Mui-focusVisible] {
  background-color: color-mix(in srgb, var(--dreem-app-color-accent) 20%, transparent) !important;
  color: #fff;
}
.common-select-menu-item[class*=Mui-focusVisible] {
  background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
}
.common-select-menu-divider {
  height: 1px;
  background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
  margin: 8px 8px 8px 0px !important;
}
.common-select-menu-search {
  height: 30px;
  width: 100%;
  border-radius: 4px;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1);
  background-color: transparent;
  backdrop-filter: none;
  overflow: hidden;
  font-family: var(--dreem-app-small-font);
  flex-shrink: unset;
}
.common-select-menu-search-icon-box {
  pointer-events: none;
  left: 0px;
  position: absolute;
  cursor: pointer;
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1);
}
.common-select-menu-search-input {
  padding-left: 30px;
  padding-right: 30px;
  flex: 1;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 120%;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  outline: none;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  text-overflow: ellipsis;
  height: 100%;
  cursor: text;
}

.common-dialog {
  z-index: var(--dreem-app-z-layer-2) !important;
  font-family: var(--dreem-app-font);
  --pd: 30px;
}
.common-dialog * {
  box-sizing: border-box;
}
.common-dialog.fake-backdrop [class*=MuiBackdrop] {
  background-color: transparent !important;
  backdrop-filter: none !important;
  background-image: var(--dreem-app-backdrop-universel-overlay);
  background-repeat: no-repeat;
  background-size: 100dvw 100dvh;
  background-position: top left;
  transition: none !important;
}
.common-dialog.blur-backdrop[class*=MuiBackdrop] {
  backdrop-filter: blur(10px);
  transition: var(--dreem-app-transition);
}
.common-dialog.blur-backdrop-strong [class*=MuiBackdrop] {
  backdrop-filter: blur(100px);
  transition: var(--dreem-app-transition);
}
.common-dialog *[class*=MuiBackdrop] {
  background-color: color-mix(in srgb, transparent, var(--dreem-app-background-layer-1) 60%) !important;
  backdrop-filter: blur(5px);
}
.common-dialog.rounder {
  --common-dialog-radius: var(--dreem-app-wrapper-radius);
}
.common-dialog.wide {
  --common-dialog-width: 400px;
}
.common-dialog.wider {
  --common-dialog-width: 500px;
}
.common-dialog.long {
  --common-dialog-width: 600px;
}
.common-dialog.longer {
  --common-dialog-width: 800px;
}
.common-dialog.full {
  --common-dialog-width: 100dvw;
  --common-dialog-height: 100dvh;
  --common-dialog-radius: 0;
}
.common-dialog.no-margin {
  --common-dialog-margin: 0px;
}
.common-dialog.zIndex-30 {
  z-index: var(--dreem-app-z-layer-30) !important;
}
.common-dialog-icon {
  padding: 10px;
  align-self: flex-start;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--common-dialog-severity-color, var(--dreem-app-color-accent)) 10%, transparent);
  display: flex;
  color: var(--common-dialog-severity-color, var(--dreem-app-color-accent));
}
.common-dialog-warning {
  --common-dialog-severity-color: var(--dreem-app-color-warning);
}
.common-dialog-error {
  --common-dialog-severity-color: var(--dreem-app-color-danger);
}
.common-dialog-paper {
  width: var(--common-dialog-width, 300px) !important;
  height: var(--common-dialog-height, fit-content) !important;
  max-width: calc(100dvw - var(--common-dialog-margin, 15px) * 2) !important;
  max-height: calc(100dvh - var(--common-dialog-margin, 15px) * 2) !important;
  margin: var(--common-dialog-margin, 15px) !important;
  background-color: var(--dreem-app-background-layer-3) !important;
  border: none;
  color: var(--dreem-app-color) !important;
  border-radius: var(--common-dialog-radius, var(--dreem-app-block-radius)) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, var(--dreem-app-shadow-percentage)) !important;
}
.common-dialog-paper.bg-color-0 {
  background-color: transparent !important;
  box-shadow: none !important;
}
.common-dialog-close {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 10px;
  cursor: pointer;
  color: color-mix(in srgb, currentColor 30%, transparent);
  transition: var(--dreem-app-transition);
}
.common-dialog-close:hover {
  color: color-mix(in srgb, currentColor 100%, transparent);
}
.common-dialog-title {
  padding: var(--pd) var(--pd) calc(var(--pd) - 20px) var(--pd) !important;
  display: flex;
  align-items: flex-start !important;
  gap: var(--pd) !important;
  font-family: var(--dreem-app-font) !important;
  flex-direction: column;
}
.common-dialog-title-text {
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  max-width: 100%;
}
.common-dialog-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: calc(var(--pd) / 2) var(--pd) 10px var(--pd) !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.common-dialog-body-content-sub {
  font-size: 13px;
  font-family: var(--dreem-app-small-font);
  white-space: break-spaces;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.common-dialog-body-content-sub ul {
  margin: 0;
  padding-left: 20px;
}
.common-dialog-body-content-sub ul li {
  margin-bottom: 4px;
}
.common-dialog-footer {
  padding: var(--pd) !important;
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  gap: var(--pd) !important;
  font-family: var(--dreem-app-font) !important;
}
.common-dialog-footer-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.common-settings-section {
  max-width: var(--common-settings-section-max-width, 800px);
  margin: var(--res-common-settings-section-margin, 0 10px 0 0);
  display: flex;
  flex-direction: var(--common-settings-section-direction, column);
  gap: var(--common-settings-section-gap, 30px);
  padding: var(--res-common-settings-section-padding, var(--common-settings-section-padding, 30px));
  background-color: var(--res-common-settings-section-bg, var(--dreem-app-background-layer-2));
  border-radius: var(--res-common-settings-section-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-settings-section-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.common-settings-section.no-padding {
  --common-settings-section-padding: 0px;
}
.common-settings-section.no-gap {
  --common-settings-section-gap: 0px;
}
.common-settings-section:last-child {
  margin-bottom: var(--res-common-settings-section-margin-bottom, 30px);
}
.common-settings-section-header {
  display: flex;
  flex-direction: var(--res-common-settings-section-header-flex-direction, row);
  align-items: var(--res-common-settings-section-header-align-items, center);
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--dreem-app-color);
  padding: var(--common-settings-section-header-padding, 0px);
}
.common-settings-section-header.has-padding {
  --common-settings-section-header-padding: 30px;
}
.common-settings-section-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: var(--res-common-settings-section-header-left-flex-direction, row);
  align-items: var(--res-common-settings-section-header-left-align-items, center);
  gap: 10px;
}
.common-settings-section-header-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
}
.common-settings-section-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.common-settings-section-scroll {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
}

.common-text-editor .rich-text-editor {
  width: 100%;
}
.common-text-editor .rich-text-editor:focus-within {
  --dr-editor-outline: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  --dr-editor-bg: transparent;
}
.common-text-editor .rich-text-editor .rsw-editor {
  width: 100%;
  height: var(--dr-editor-height, fit-content);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  outline-offset: -1px;
  outline: var(--dr-editor-outline, 1px solid transparent);
  transition: var(--dreem-app-transition);
  background-color: var(--dr-editor-bg, color-mix(in srgb, currentColor 5%, transparent));
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border: none;
  color: inherit;
  font-family: inherit;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar {
  background-color: color-mix(in srgb, currentColor 3%, transparent);
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-btn {
  color: inherit;
  border: none;
  outline: none;
  background-color: transparent;
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--dreem-app-transition);
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-btn:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-btn[data-active=true] {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd {
  height: 30px;
  background-color: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  font-family: inherit;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
[data-theme=light] .common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd:focus {
  outline: 1px solid var(--dreem-app-color-accent);
  background-color: transparent;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd option {
  background-color: var(--dreem-app-background-layer-3);
  color: var(--dreem-app-color);
  padding: 8px 12px;
  border: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-family: inherit;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-theme=light] .common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd option:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd option:checked, .common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd option:focus {
  background-color: var(--dreem-app-color-accent);
  color: white;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-dd option[hidden] {
  display: none;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .toolbar-html-btn-wrapper {
  margin-left: auto;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-toolbar .rsw-separator {
  margin: 6px;
  border: none;
  width: 1px;
  border-radius: 1px;
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce {
  min-height: 100px;
  max-height: 400px;
  overflow: hidden auto;
  padding: 15px;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce h1,
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce h2,
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce h3,
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce h4,
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce h5,
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce h6 {
  font-weight: 600;
  line-height: 140%;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce font {
  color: inherit !important;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce i {
  font-style: italic;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce:focus {
  outline: none;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce a {
  color: inherit;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce ul {
  list-style: disc;
  padding-left: 20px;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce ol {
  list-style: decimal;
  padding-left: 20px;
}
.common-text-editor .rich-text-editor .rsw-editor .rsw-ce blockquote {
  border-left: 3px solid color-mix(in srgb, currentColor 15%, transparent);
  padding-left: 20px;
  color: inherit;
  opacity: 0.8;
}
.common-text-editor .rich-text-editor.disabled {
  color: var(--dr-editor-disabled-color, color-mix(in srgb, currentColor 50%, transparent));
}
.common-text-editor .rich-text-editor.has-error .rsw-editor {
  outline: 1px solid var(--dreem-app-color-danger);
}
.common-text-editor .rich-text-editor .rich-text-error {
  color: var(--dreem-app-color-danger);
  font-size: 12px;
  margin-top: 4px;
  font-family: var(--dreem-app-small-font);
}

.common-date-time-picker.rdrCalendarWrapper {
  color: inherit;
  font-family: inherit;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
  --cell-height: 37px;
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper {
  padding: 6px;
  height: unset;
  display: flex;
  gap: 4px;
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper button {
  flex-shrink: 0;
  margin: 0;
  background-color: transparent;
  color: inherit;
  position: relative;
  height: 28px;
  width: 28px;
  border: none;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--dreem-app-transition);
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper button:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper button.rdrPprevButton i {
  border-color: transparent currentColor transparent transparent;
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper button.rdrNextButton i {
  border-color: transparent transparent transparent currentColor;
  margin: 0;
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper button.rdrPprevButton::after {
  transform: rotate(90deg) translateX(0px) translateY(1px);
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper button.rdrNextButton::after {
  transform: rotate(-90deg) translateX(0px) translateY(1px);
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: 0;
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrMonthPicker,
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrYearPicker {
  min-width: fit-content;
  margin: 0;
  flex: 1;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  background-color: transparent;
  border: none;
  color: inherit;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  padding: 0;
  height: 28px;
  font-family: var(--dreem-app-small-font);
  outline-offset: -1px;
  outline: 1px solid transparent;
  transition: var(--dreem-app-transition);
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrMonthPicker:hover,
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrYearPicker:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrMonthPicker select,
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrYearPicker select {
  min-width: fit-content;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  padding: 0;
  outline: none;
  appearance: none;
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrMonthPicker:focus,
.common-date-time-picker.rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrYearPicker:focus {
  outline-color: var(--dreem-app-color-accent);
  background-color: transparent;
}
.common-date-time-picker.rdrCalendarWrapper .rdrDateDisplayWrapper:empty {
  display: none;
}
.common-date-time-picker.rdrCalendarWrapper .rdrMonth {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--dreem-app-small-font);
  padding: 0 4px;
}
.common-date-time-picker.rdrCalendarWrapper .rdrDayHovered .rdrDayNumber::after {
  display: none;
}
.common-date-time-picker.rdrCalendarWrapper .rdrDayNumber {
  position: absolute;
  height: var(--cell-height);
  top: 0 !important;
}
.common-date-time-picker.rdrCalendarWrapper .rdrDayNumber span {
  line-height: var(--cell-height);
}
.common-date-time-picker.rdrCalendarWrapper .rdrSelected {
  width: 100%;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--dreem-app-color-accent);
  transition: var(--dreem-app-transition);
}
.common-date-time-picker.rdrCalendarWrapper .rdrDayPassive {
  opacity: 0.3;
}
.common-date-time-picker.rdrCalendarWrapper .rdrDayToday .rdrDayNumber span:after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--dreem-app-color-accent);
}
.common-date-time-picker.rdrCalendarWrapper .rdrDayStartPreview,
.common-date-time-picker.rdrCalendarWrapper .rdrDayEndPreview {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  position: absolute;
  height: var(--cell-height);
  top: 0 !important;
  outline: none;
  border: none;
  color: inherit !important;
}
.common-date-time-picker.rdrCalendarWrapper .rdrDay {
  color: inherit !important;
  height: var(--cell-height);
  position: relative;
}
.common-date-time-picker.rdrCalendarWrapper .rdrDay span {
  position: absolute;
  height: 100%;
  border-radius: 100px;
}
.common-date-time-picker.rdrCalendarWrapper .rdrWeekDay {
  color: inherit;
  opacity: 0.3;
  height: var(--cell-height);
}
.common-date-time-picker.rdrCalendarWrapper .rdrDayNumber span {
  color: inherit;
}
.common-date-time-picker.time-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px;
  user-select: none;
}
.common-date-time-picker.time-picker .time-input {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  flex: 1;
  min-width: 0;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  padding-right: 8px;
  border: 1px solid transparent;
  transition: var(--dreem-app-transition);
}
.common-date-time-picker.time-picker .time-input:has(input:focus) {
  background-color: transparent;
  border: 1px solid var(--dreem-app-color-accent);
}
.common-date-time-picker.time-picker .time-input input {
  background-color: transparent;
  border: none;
  color: inherit;
  font-size: 13px;
  line-height: 32px;
  font-weight: 400;
  outline: none;
  font-family: var(--dreem-app-small-font);
  flex: 1;
  min-width: 0;
  padding-left: 12px;
}
.common-date-time-picker.time-picker .time-input-control {
  display: flex;
  flex-direction: column;
}
.common-date-time-picker.time-picker .time-input-control .btn-increase-icon {
  cursor: pointer;
  opacity: 0.5 !important;
}
.common-date-time-picker.time-picker .time-input-control .btn-increase-icon:hover {
  opacity: 1 !important;
}
.common-date-time-picker-footer {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.common-backdrop {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(35px) !important;
}

.common-empty-illustration {
  height: 60px;
  display: flex;
  flex-flow: row nowrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.common-empty-illustration-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-empty-illustration-icon-wrapper.icon-third {
  width: 34px;
  height: 34px;
}
.common-empty-illustration-icon-wrapper.icon-second {
  width: 48px;
  height: 48px;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.common-empty-illustration-icon-wrapper.icon-main {
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-radius: 16px;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-empty-illustration-icon-wrapper.warning {
  color: var(--dreem-app-color-warning);
}
.common-empty-illustration-icon-wrapper.error {
  color: var(--dreem-app-color-danger);
}

.common-snackbar-wrapper {
  position: fixed;
  left: var(--res-snackbar-left, 20px);
  right: var(--res-snackbar-right, auto);
  bottom: var(--res-snackbar-bottom, 20px);
  top: var(--res-snackbar-top, auto);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
@keyframes snackbar-slide-in {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.common-snackbar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.common-snackbar-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--snackbar-icon-color, var(--dreem-app-color-accent));
  position: relative;
}
.common-snackbar-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300%;
  height: 300%;
  background: currentColor;
  border-radius: 100px;
  filter: blur(50px);
  opacity: 1;
}
.common-snackbar-close-btn-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.common-snackbar-close-btn-wrap::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--snackbar-countdown, 1) * 360deg), transparent 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), white calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), white calc(100% - 2px));
  pointer-events: none;
  opacity: 0.5;
}
.common-snackbar-message {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.common-snackbar-message P {
  opacity: 0.8;
}
.common-snackbar-item {
  pointer-events: auto;
  width: var(--res-snackbar-width, 338px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background-color: var(--dreem-app-background-layer-5);
  color: var(--dreem-app-color);
  border-radius: var(--dreem-app-wrapper-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  font-family: var(--dreem-app-small-font);
  overflow: hidden;
  animation: snackbar-slide-in 338ms ease-out;
  animation-fill-mode: both;
  transform-origin: bottom right;
  --btn-bg-color: color-mix(in srgb, currentColor 5%, transparent);
}
.common-snackbar-item.success {
  --snackbar-icon-color: var(--dreem-app-color-accent);
}
.common-snackbar-item.error {
  --snackbar-icon-color: var(--dreem-app-color-danger);
}
.common-snackbar-item.info {
  --snackbar-icon-color: var(--dreem-app-color-info);
}
.common-snackbar-item.warning {
  --snackbar-icon-color: var(--dreem-app-color-warning);
}

.common-selection {
  position: var(--selection-position, absolute);
  bottom: var(--selection-bottom, 26px);
  left: 50%;
  transform: var(--selection-transform, translateX(-50%));
  z-index: var(--dreem-app-z-layer-2);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--selection-padding, 8px);
  background-color: var(--selection-bg, color-mix(in srgb, var(--dreem-app-color) 10%, var(--dreem-app-background-layer-1) 50%));
  color: var(--dreem-app-color);
  border-radius: var(--selection-radius, 100px);
  backdrop-filter: blur(100px);
  filter: var(--selection-filter, drop-shadow(2px 10px 10px rgba(0, 0, 0, 0.3137254902)));
  overflow: hidden;
  transition: var(--dreem-app-transition);
  opacity: 1;
  pointer-events: all;
  margin-bottom: 0px;
  width: var(--selection-width, 280px);
  min-width: fit-content;
}
.common-selection.compact-relative {
  --selection-position: static;
  --selection-transform: translateX(0);
  --selection-width: none;
  --selection-padding: 4px;
  --selection-filter: none;
  --selection-bg: transparent;
  --selection-icon-after-content: none;
}
.common-selection.is-select-all {
  width: 280px;
}
.common-selection.hide {
  opacity: 0;
  pointer-events: none;
  margin-bottom: -10px;
}
.common-selection-title {
  white-space: nowrap;
  line-height: 28px;
  font-weight: 600;
  font-size: 14px;
  padding: 0 6px;
  flex: 1;
}
.common-selection-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--snackbar-icon-color, var(--dreem-app-color-accent));
  position: relative;
}
.common-selection-icon::after {
  content: var(--selection-icon-after-content, "");
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: currentColor;
  border-radius: 100px;
  filter: blur(50px);
  opacity: 1;
}
.common-selection-separator {
  width: 1px;
  height: 24px;
  background-color: color-mix(in srgb, currentColor 15%, transparent);
  flex-shrink: 0;
}

.common-separator-vel {
  width: 24px;
  height: 2px;
  border-radius: 10px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-separator-vel.blur {
  backdrop-filter: blur(20px) brightness(0.8) saturate(2);
}
.common-separator-hor {
  width: 2px;
  height: 24px;
  border-radius: 10px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-separator-hor.blur {
  backdrop-filter: blur(20px) brightness(0.8) saturate(2);
}

.common-sidebar {
  margin-left: var(--common-sidebar-ml, unset);
  margin-right: var(--common-sidebar-mr, calc(-1 * var(--common-sidebar-width, 450px)));
  margin-top: var(--common-sidebar-mt, 15px);
  margin-bottom: var(--common-sidebar-mb, 15px);
  width: var(--common-sidebar-width, 450px);
  height: var(--common-sidebar-height, calc(100vh - var(--common-sidebar-mt, 15px) - var(--common-sidebar-mb, 15px)));
  background-color: var(--common-sidebar-bg-color, transparent);
  border-radius: var(--common-sidebar-border-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  display: var(--common-sidebar-display, flex);
  flex-direction: column;
  transition: var(--common-sidebar-transition, none);
  position: var(--common-sidebar-position, relative);
  z-index: var(--common-sidebar-z-index, unset);
}
.common-sidebar.opened {
  margin-right: var(--common-sidebar-mr-opened, 15px);
  margin-left: var(--common-sidebar-ml-opened, unset);
  --common-sidebar-display: var(--common-sidebar-display-opened, flex);
}
.common-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--common-sidebar-padding, 20px);
  padding: var(--common-sidebar-padding, 20px);
  border-bottom: 1px solid color-mix(in srgb, currentColor 5%, transparent);
}
.common-sidebar-header-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  flex-shrink: 0;
}
.common-sidebar-header-title {
  font-size: 20px;
  line-height: 36px;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  flex: 1;
  min-width: 0;
}
.common-sidebar-content {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.common-sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--common-sidebar-padding, 20px);
  gap: var(--common-sidebar-padding, 20px);
}
.common-sidebar-footer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  opacity: 0.5;
}
.common-sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.common-thumnail-size {
  display: flex;
  align-items: center;
  gap: 10px;
}
.common-thumnail-size-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: var(--dreem-app-transition);
}
.common-thumnail-size-icon-box:hover {
  opacity: 1;
}
.common-thumnail-size-icon-box.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.common-thumnail-size input {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  outline: none;
  color: inherit;
  border-radius: 2px;
  margin: 0;
}
.common-thumnail-size input::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  background-color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -7px;
  transition: var(--dreem-app-transition);
}
.common-thumnail-size input::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  border-radius: 1px;
  transition: var(--dreem-app-transition);
}
.common-thumnail-size input-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 68px;
}

.common-shimmer-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  border-radius: var(--dreem-app-image-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-shimmer-wave-base {
  position: absolute;
  inset: 4px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 12px 12px;
}
.common-shimmer-wave-pattern {
  position: absolute;
  inset: 4px;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 12px 12px;
  mask-image: radial-gradient(circle, transparent 30%, rgb(0, 0, 0) 50%, transparent 80%);
  mask-size: 200% 400%;
  animation: wave-move 4s infinite linear;
}
@keyframes wave-move {
  0% {
    -webkit-mask-position: 0 -50%;
    mask-position: 0 -50%;
  }
  100% {
    -webkit-mask-position: 0 150%;
    mask-position: 0 150%;
  }
}

.common-select-box-item:has(.deselected), .common-select-box-item.deselected {
  --dreem-image-opacity: var(--common-select-deselected-image-opacity, 1);
  --is-deselected-circle-opacity: var(--common-select-deselected-opacity, 0.5);
  --is-deselected-circle-show: var(--common-select-deselected-display, flex);
}
.common-select-box-item:has(.readonly):hover {
  --dreem-image-opacity: 1;
}
.common-select-box-item:hover {
  --is-deselected-circle-show: var(--common-select-deselected-display-hover, flex);
  --is-deselected-circle-opacity: 0.7;
  --dreem-image-opacity: 0.7;
  --dreem-image-transition: var(--dreem-app-transition);
}
.common-select-box-item.is-assigned {
  --dreem-image-opacity: 0.5;
}
.common-select-box-item.is-assigned:hover {
  --dreem-image-opacity: 0.5;
}
.common-select-box.hide-placeholder-checkbox {
  --common-select-deselected-opacity: 0;
  --common-select-deselected-display: none;
  --common-select-deselected-display-hover: flex;
}
.common-select-box.highlight-selected {
  --common-select-deselected-image-opacity: 0.5;
}

.submission-asset-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.common-mask-backdrop-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(30px);
  mask-image: radial-gradient(circle at 50% 30%, transparent 35%, black 80%, black 100%);
  background: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0) 80%);
  width: 100%;
  height: 100%;
}

.common-config-dialog {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  flex: 1;
  min-height: 0;
  --common-config-dialog-block-left-width: clamp(250px, 20%, 380px);
  --common-config-dialog-block-right-width: clamp(300px, 25%, 560px);
  --common-config-dialog-z-index-base: 3;
  --common-config-dialog-progressive-glass-height: calc(
    var(--common-config-dialog-padding) + 40px + 30px + 30px + 28px
  );
}
.common-config-dialog-mobile-warning {
  display: var(--res-config-dialog-mobile-display, none);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: var(--dreem-app-z-layer-3);
  width: 100%;
  height: 100%;
  background-color: var(--dreem-app-background-layer-1);
  --empty-state-width: min(300px, 80dvw);
  --empty-state-title-font-size: 24px;
}
.common-config-dialog.--col {
  flex-direction: column;
}
.common-config-dialog .--header {
  padding: var(--header-padding, var(--common-config-dialog-padding) var(--common-config-dialog-padding) 20px var(--common-config-dialog-padding));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--common-config-dialog-z-index-base) + 3);
}
.common-config-dialog .--header.relative {
  position: relative;
}
.common-config-dialog .--header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.common-config-dialog .--header-center {
  display: flex;
}
.common-config-dialog .--header-right {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  flex: 1;
}
.common-config-dialog .--breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  font-size: 12px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.common-config-dialog .--absolute-area {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: calc(var(--common-config-dialog-z-index-base) + 3);
}
.common-config-dialog .--progressive-glass {
  position: absolute;
  width: 100%;
  left: 0;
  height: var(--common-config-dialog-progressive-glass-height);
  background-color: transparent !important;
  background-image: var(--dreem-app-backdrop-universel-overlay);
  background-repeat: no-repeat;
  background-size: 100dvw 100dvh;
  background-position: top left;
  transition: none !important;
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.995) 30%, rgba(0, 0, 0, 0.98) 40%, rgba(0, 0, 0, 0.94) 50%, rgba(0, 0, 0, 0.84) 60%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.1) 90%, transparent 100%);
  z-index: var(--common-config-dialog-z-index-base);
  pointer-events: none;
}
.common-config-dialog .--main {
  padding-left: calc(var(--common-config-dialog-block-left-width) + var(--common-config-dialog-padding));
  padding-right: var(--common-config-dialog-block-right-width);
  overflow: hidden scroll;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.common-config-dialog .--main.small-header {
  --common-config-dialog-progressive-glass-height: calc(
    var(--common-config-dialog-padding) + 40px + var(--common-config-dialog-padding)
  );
}
.common-config-dialog .--main.no-right-block {
  padding-right: var(--common-config-dialog-padding);
}
.common-config-dialog .--main.no-left-block {
  padding-left: var(--common-config-dialog-padding);
}
.common-config-dialog .--main.no-scroll {
  overflow: hidden;
}
.common-config-dialog .--main.hide {
  display: none;
}
.common-config-dialog .--block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: absolute;
  top: 0;
  height: 100%;
}
.common-config-dialog .--block.left {
  left: 0;
  width: var(--common-config-dialog-block-left-width);
}
.common-config-dialog .--block.right {
  right: 0;
  width: var(--common-config-dialog-block-right-width);
}

.common-resize-handle {
  position: absolute;
  z-index: 10;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}
.common-resize-handle.active {
  pointer-events: all;
  opacity: 1;
}
.common-resize-handle.handle-bottom-right {
  bottom: -12px !important;
  right: -12px !important;
  cursor: nwse-resize !important;
  width: 24px !important;
  height: 24px !important;
}
.common-resize-handle.handle-bottom-right > * {
  pointer-events: none;
}
.common-resize-handle.handle-bottom-left {
  display: none;
}
.common-resize-handle.handle-top-right {
  display: none;
}
.common-resize-handle.handle-top-left {
  display: none;
}
.common-resize-handle.handle-top {
  display: none;
}
.common-resize-handle.handle-bottom {
  display: none;
}
.common-resize-handle.handle-left {
  display: none;
}
.common-resize-handle.handle-right {
  display: none;
}

.common-contenteditable {
  font-size: var(--common-contenteditable-font-size, 14px);
  font-weight: var(--common-contenteditable-font-weight, 400);
  line-height: var(--common-contenteditable-line-height, 28px);
  padding: var(--common-contenteditable-padding, 6px 10px);
  margin: var(--common-contenteditable-margin, 0 -10px);
  background-color: transparent;
  transition: var(--dreem-app-transition);
  cursor: text;
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
  outline: 1px solid transparent;
  outline-offset: -1px;
  border: none;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  transition: var(--dreem-app-transition);
  max-width: 100%;
  width: fit-content;
}
.common-contenteditable:hover {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}
.common-contenteditable:focus {
  background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
  outline-color: color-mix(in srgb, currentColor 20%, transparent);
}
.common-contenteditable.is-empty::before {
  content: attr(data-placeholder);
  pointer-events: none;
  opacity: 0.3;
}

.common-tab {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.common-tab.no-interaction {
  --common-tab-cursor: default;
  --common-tab-hover-bg-color: transparent;
}
.common-tab-item {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: var(--common-tab-cursor, pointer);
  padding: 12px 20px 12px 12px;
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  transition: var(--dreem-app-transition);
}
.common-tab-item.no-icon {
  padding: 0 30px 0 62px;
}
.common-tab-item.active, .common-tab-item:hover {
  background-color: var(--common-tab-hover-bg-color, color-mix(in srgb, currentColor 10%, transparent));
}
.common-tab-item.active {
  --common-tab-icon-color: var(--dreem-app-color-accent);
}
.common-tab-item.active:hover {
  background-color: var(--common-tab-hover-bg-color, color-mix(in srgb, currentColor 20%, transparent));
}
.common-tab-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--common-tab-icon-color, color-mix(in srgb, currentColor 50%, transparent));
  --dreem-app-corner-shape-value: unset;
  --common-mask-indicator-size: 24px;
  --common-mask-indicator-icon-size: 12px;
}
.common-tab-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.common-tab-label {
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.6px;
  font-weight: 600;
  opacity: 0.4;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
}
.common-tab-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
}
.common-tab-description {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  opacity: 0.5;
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
  font-family: var(--dreem-app-small-font);
}
.common-tab-separator {
  height: 1px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  margin: 0 10px;
}

.common-bg-noise {
  background-image: var(--dreem-app-backdrop-universel-overlay);
}

.common-tag {
  font-family: var(--dreem-app-small-font);
  font-size: 10px;
  letter-spacing: 0.6px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  display: flex;
  padding: 2px 7px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: color-mix(in srgb, currentColor 20%, transparent);
  opacity: 0.6;
  text-transform: uppercase;
}
.common-tag.active {
  opacity: 1;
  color: var(--dreem-app-color-accent);
}
.common-tag.warning {
  opacity: 1;
  color: var(--dreem-app-color-warning);
}

.common-move-gradient-text {
  background: linear-gradient(90deg, var(--dreem-app-color), color-mix(in srgb, var(--dreem-app-color) 60%, transparent), color-mix(in srgb, var(--dreem-app-color) 40%, transparent), color-mix(in srgb, var(--dreem-app-color) 35%, transparent), color-mix(in srgb, var(--dreem-app-color) 40%, transparent), color-mix(in srgb, var(--dreem-app-color) 60%, transparent), var(--dreem-app-color));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: moveGradient 1.6s linear infinite reverse;
  opacity: 1 !important;
}
@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.common-comment {
  width: var(--common-comment-width, 350px);
  flex-shrink: 0;
  background: var(--common-comment-bg, color-mix(in srgb, currentColor 5%, transparent));
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  max-height: 100%;
}
.common-comment-header {
  display: flex;
  flex-direction: column;
  margin: 20px 20px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.common-comment-header-label {
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.5;
  font-weight: 600;
}
.common-comment-header-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}
.common-comment-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  min-height: 0;
  padding: 10px 0;
}
.common-comment-list-empty {
  padding: 10px 20px;
  font-size: 13px;
  line-height: 20px;
  opacity: 0.5;
}
.common-comment-item {
  display: flex;
  padding: 10px 20px;
  gap: 12px;
  --common-mask-indicator-size: 28px;
  --common-mask-indicator-radius: 100px;
  --common-mask-indicator-icon-offset: 1px;
}
.common-comment-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  font-family: var(--dreem-app-small-font);
  min-width: 0;
}
.common-comment-item-user-name {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 10px;
}
.common-comment-item-user-date {
  line-height: 20px;
  font-size: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}
.common-comment-item-title {
  line-height: 16px;
  display: flex;
  justify-content: space-between;
}
.common-comment-item-text {
  font-size: 13px;
  line-height: 20px;
  margin: 0;
}
.common-comment-item-text span {
  font-weight: 500;
  font-size: 11px;
  border-radius: 4px;
  padding: 2px 4px;
  background-color: color-mix(in srgb, currentColor 20%, transparent);
  margin-right: 4px;
  display: inline;
}
.common-comment-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.common-comment-item-tags-tag {
  font-family: var(--dreem-app-small-font);
  font-size: 11px;
  line-height: 16px;
  padding: 6px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.common-carousel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: var(--common-carousel-margin, 0);
  --btn-backdrop-filter: blur(10px);
}
.common-carousel-prev, .common-carousel-next {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
.common-carousel-prev.hide, .common-carousel-next.hide {
  pointer-events: none;
  --btn-pointer-events: none;
  opacity: 0;
}
.common-carousel-list {
  display: flex;
  flex-direction: row;
  overflow: auto;
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  min-width: 0;
  mask-image: linear-gradient(to right, var(--mask-start, black), black 48px, black calc(100% - 48px), var(--mask-end, black));
  scrollbar-width: none;
  padding: var(--common-carousel-padding, 0);
  -ms-overflow-style: none;
}
.common-carousel-list.column {
  flex-direction: column;
  mask-image: linear-gradient(to bottom, var(--mask-start, black), black 48px, black calc(100% - 48px), var(--mask-end, black));
}
.common-carousel-list::-webkit-scrollbar {
  display: none;
}
.common-carousel-list.has-prev-arrow {
  --mask-start: transparent;
}
.common-carousel-list.has-next-arrow {
  --mask-end: transparent;
}

.common-cf-status-is-new {
  color: #6ca5d3;
}
.common-cf-status-is-submitted {
  color: var(--dreem-app-color-accent);
}
.common-cf-status-is-rejected {
  color: var(--dreem-app-color-danger);
}
.common-cf-status-is-cancel {
  color: var(--dreem-app-color-warning);
}

.common-html-renderer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--common-html-renderer-font-size, 14px);
  line-height: var(--common-html-renderer-line-height, 24px);
  font-family: var(--common-html-renderer-font-family, var(--dreem-app-small-font));
}
.common-html-renderer ul,
.common-html-renderer ol {
  padding-left: 26px;
  margin-top: 10px;
  margin-bottom: 10px;
  opacity: var(--common-html-renderer-list-opacity, 1);
}
.common-html-renderer ul li + li,
.common-html-renderer ol li + li {
  margin-top: 10px;
}
.common-html-renderer p {
  opacity: var(--common-html-renderer-p-opacity, 1);
}
.common-html-renderer hr {
  border: 1px solid color-mix(in srgb, var(--dreem-app-color) 10%, transparent);
  height: 0px;
  border-radius: 2px;
  margin: 0;
}
.common-html-renderer h2 {
  line-height: 40px;
}
.common-html-renderer h3 {
  line-height: 32px;
}
.common-html-renderer h4 {
  line-height: 28px;
}
.common-html-renderer h5,
.common-html-renderer h6 {
  line-height: 24px;
}
.common-html-renderer sub {
  vertical-align: sub;
}
.common-html-renderer sup {
  vertical-align: super;
}
.common-html-renderer pre {
  padding: 15px;
  border-radius: var(--msg-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background: var(--msg-bg);
  margin: 10px 0;
}
.common-html-renderer pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  corner-shape: unset;
}
.common-html-renderer table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--msg-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background: var(--msg-bg);
  margin: 10px 0;
  overflow: hidden;
}
.common-html-renderer table th,
.common-html-renderer table td {
  padding: 12px 16px;
  text-align: left;
}
.common-html-renderer table th {
  background: color-mix(in srgb, currentColor 5%, transparent);
  font-weight: 600;
}
.common-html-renderer table tr:nth-child(even) {
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.common-slider {
  position: relative;
  width: var(--dreem-slider-wp-width);
  height: var(--dreem-slider-wp-height);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dreem-app-background-layer-2, #000);
}
.common-slider:hover {
  --common-slider-controls-bottom: 12px;
  --common-slider-controls-padding: 6px;
  --common-slider-controls-gap: 10px;
}
.common-slider-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.common-slider-image-slot {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--dreem-app-transition);
  overflow: hidden;
}
.common-slider-image-slot.prev {
  margin-left: -100%;
  display: flex;
}
.common-slider-image-slot.next {
  margin-left: 100%;
  display: flex;
}
.common-slider-image-slot.active {
  display: flex;
}
.common-slider-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--common-slider-controls-bottom, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background-color: var(--common-slider-controls-bg, rgba(116, 116, 116, 0.3));
  backdrop-filter: var(--common-slider-controls-blur, blur(10px));
  border-radius: 100px;
  padding: var(--common-slider-controls-padding, 0px);
  gap: var(--common-slider-controls-gap, 0px);
  transition: var(--dreem-app-transition);
}
.common-slider-prev, .common-slider-next {
  --btn-bg-color: rgba(116, 116, 116, 0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-slider-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}
.common-slider-dots-track {
  position: relative;
  height: 8px;
}
.common-slider-dot {
  position: absolute;
  top: 50%;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.254);
  cursor: pointer;
  transition: all 0.5s ease;
}
.common-slider-dot.active {
  background: #fff;
  width: 20px;
}

.common-toggle-content {
  display: flex;
  flex-direction: column;
  gap: var(--common-toggle-content-gap, 8px);
}
.common-toggle-content-body {
  max-height: var(--toggle-content-collapsed-height, 200px);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to top, transparent, black var(--toggle-content-mask-height, 48px), black calc(100% - var(--toggle-content-mask-height, 48px)), black);
}
.common-toggle-content-body.expanded {
  max-height: 9999px;
  mask-image: none;
}
.common-toggle-content-btn {
  gap: 4px;
  cursor: pointer;
  padding: 0;
  transition: var(--dreem-app-transition);
  opacity: 0.5;
}
.common-toggle-content-btn:hover {
  opacity: 1;
}

.common-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  width: var(--common-avatar-size, 30px);
  height: var(--common-avatar-size, 30px);
  border-radius: var(--common-avatar-radius, 50%);
  corner-shape: var(--common-avatar-corner-shape, unset);
  background-color: var(--common-avatar-bg, color-mix(in srgb, currentColor 20%, transparent));
  color: var(--common-avatar-color, currentcolor);
  font-family: var(--common-avatar-font-family, var(--dreem-app-small-font));
  font-size: var(--common-avatar-font-size, 13px);
  font-weight: var(--common-avatar-font-weight, 700);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  overflow: hidden;
  outline: var(--common-avatar-outline, none);
  transition: var(--dreem-app-transition);
  cursor: var(--common-avatar-cursor, pointer);
}
@keyframes common-avatar-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.common-avatar.has-hover {
  --common-avatar-outline: 3px solid transparent;
}
.common-avatar.has-hover:hover {
  --common-avatar-outline: 3px solid color-mix(in srgb, currentColor 20%, transparent);
}
.common-avatar.has-hover:hover.active {
  --common-avatar-outline: 3px solid var(--dreem-app-color-accent);
}
.common-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 0;
  animation: common-avatar-fade-in 200ms ease-out forwards;
  animation-delay: 100ms;
}
@media (prefers-reduced-motion: reduce) {
  .common-avatar-img {
    animation: none;
    opacity: 1;
  }
}
.common-avatar-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--common-avatar-wrapper-gap, 8px);
  vertical-align: middle;
}
.common-avatar-name {
  font-size: var(--common-avatar-name-font-size, 13px);
  line-height: var(--common-avatar-name-line-height, 20px);
  color: var(--common-avatar-name-color, currentcolor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.common-avatar-text {
  line-height: 1;
}
.common-avatar.active {
  --common-avatar-outline: 2px solid var(--dreem-app-color-accent);
}
.common-avatar.disabled {
  opacity: 0.4;
}
.common-avatar.clickable {
  --common-avatar-cursor: pointer;
}

.common-section-title-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--common-section-title-description-gap, 8px);
  max-width: var(--common-settings-section-max-width, 800px);
  margin: 0 auto;
  padding: var(--common-section-title-description-padding, 0);
}
.common-section-title-description-title {
  font-size: var(--common-section-title-description-title-fs, 32px);
  line-height: var(--common-section-title-description-title-lh, 40px);
  font-weight: 400;
  color: var(--dreem-app-color);
}
.common-section-title-description-description {
  font-size: var(--common-section-title-description-description-fs, 14px);
  line-height: var(--common-section-title-description-description-lh, 20px);
  color: color-mix(in srgb, currentColor 60%, transparent);
  max-width: 600px;
  font-family: var(--dreem-app-small-font);
}

.common-card {
  display: flex;
  flex-direction: column;
  background-color: var(--common-card-bg, var(--dreem-app-background-layer-2));
  border-radius: var(--common-card-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  padding: var(--common-card-wrapper-padding, 0 0 20px 0);
  max-width: var(--common-card-max-width, 800px);
  width: 100%;
  transition: var(--dreem-app-transition);
}
.common-card-header {
  padding: var(--common-card-padding, 30px);
}
.common-card-item {
  border-top: 1px solid color-mix(in srgb, currentColor 5%, transparent);
  padding: var(--common-card-padding, 30px) 0;
  margin: 0 var(--common-card-padding, 30px);
}
.common-card-item.block {
  display: block;
}
.common-card-header, .common-card-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--common-card-row-gap, 16px);
}
.common-card-header.mobile-wrap, .common-card-item.mobile-wrap {
  flex-direction: var(--common-card-row-direction, row);
  align-items: var(--common-card-row-align-items, flex-start);
}
.common-card-header.warning, .common-card-item.warning {
  color: var(--dreem-app-color-warning);
}
.common-card-header-info, .common-card-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--common-card-info-gap, 6px);
}
.common-card-header-info-title {
  font-size: var(--common-card-header-title-fs, 24px);
  line-height: var(--common-card-header-title-lh, 28px);
  font-weight: 500;
  font-family: var(--dreem-app-font);
}
.common-card-item-info-title {
  font-size: var(--common-card-item-title-fs, 15px);
  line-height: var(--common-card-item-title-lh, 20px);
  font-weight: 500;
  font-family: var(--dreem-app-font);
}
.common-card-header-info-description, .common-card-item-info-description {
  font-size: var(--common-card-description-fs, 12px);
  line-height: var(--common-card-description-lh, 18px);
  color: color-mix(in srgb, currentColor 30%, transparent);
  font-family: var(--dreem-app-small-font);
  max-width: 500px;
}
.common-card-label {
  font-size: var(--common-card-label-fs, 12px);
  line-height: var(--common-card-label-lh, 16px);
  font-weight: 600;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-family: var(--dreem-app-small-font);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px var(--common-card-padding, 30px) 14px var(--common-card-padding, 30px);
}

.common-uploadable-avatar {
  width: var(--common-uploadable-avatar-size, 100px);
  height: var(--common-uploadable-avatar-size, 100px);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  border-radius: var(--common-uploadable-avatar-radius, 10000px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  display: flex;
  margin: 0 20px 0 0;
}
.common-uploadable-avatar.square {
  --common-uploadable-avatar-radius: var(--dreem-app-element-radius);
}
.common-uploadable-avatar:hover {
  --common-uploadable-avatar-op: 1;
}
.common-uploadable-avatar-action, .common-uploadable-avatar-loading {
  background-color: rgba(0, 0, 0, 0.537254902);
  backdrop-filter: blur(4px);
  color: #ffffff;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  width: 100%;
  position: absolute;
  border-radius: var(--common-uploadable-avatar-radius, 10000px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  display: flex;
  transition: var(--dreem-app-transition);
}
.common-uploadable-avatar-action {
  opacity: var(--common-uploadable-avatar-op, 0);
}

.common-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  border-radius: 100px;
  background-color: var(--common-switch-bg, color-mix(in srgb, currentColor 10%, transparent));
  padding: var(--common-switch-padding, 4px);
  gap: 0px;
  width: fit-content;
  user-select: none;
  overflow: hidden;
  font-family: var(--dreem-app-small-font);
  flex-shrink: 0;
  backdrop-filter: var(--common-switch-backdrop-filter, none);
  transition: var(--dreem-app-transition);
  height: var(--common-switch-height, 36px);
}
.common-switch:hover {
  --common-switch-bg: var(--common-switch-bg-hover, color-mix(in srgb, currentColor 15%, transparent));
}
.common-switch.--toggle {
  cursor: pointer;
}
.common-switch.--no-bg {
  --common-switch-bg: transparent;
  --common-switch-padding: 0px;
  --common-switch-bg-hover: transparent;
}
.common-switch.--outline {
  --common-switch-track-bg: transparent;
  --common-switch-track-outline: 2px solid var(--dreem-app-color-accent);
  --common-switch-track-outline-offset: -2px;
}
.common-switch.--medium {
  --common-switch-height: 40px;
}
.common-switch.--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.common-switch-track {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 100px;
  background-color: var(--common-switch-track-bg, color-mix(in srgb, currentColor 15%, transparent));
  outline: var(--common-switch-track-outline, none);
  outline-offset: var(--common-switch-track-outline-offset, 0px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.common-switch-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px calc(var(--common-switch-height, 36px) / 2 - 4px);
  border-radius: 100px;
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.common-switch-item:not(.--disabled) {
  cursor: pointer;
}
.common-switch-item.--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.common-switch-item.active {
  color: currentColor;
}
.common-switch-item:not(.active):not(.--disabled):hover {
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.common-switch-item-label {
  display: flex;
  align-items: center;
}
.common-switch-item-indicator {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.common-switch-item-indicator.warning {
  color: var(--dreem-app-color-warning);
}
.common-switch.--toggle .common-switch-item {
  cursor: inherit;
  pointer-events: none;
}@media (max-width: 800px) {
  html {
    --res-deselected-circle-opacity: 0.6;
    --res-gallery-grid-number: 3;
    --res-ellipsis-icon-opacity: 0.5;
    --res-ellipsis-icon-box-transform: translateX(0px);
    --res-video-controller-wrapper-margin: 8px;
    --res-video-controller-wrapper-radius: var(--dreem-app-element-radius);
    --res-video-controller-wrapper-tooltip: none;
    --res-tooltip-display: none;
    --cf-pts-btn-size: 32px;
    --res-pts-content-width: 100%;
    --res-snackbar-left: 16px;
    --res-snackbar-right: 16px;
    --res-snackbar-bottom: auto;
    --res-snackbar-top: 70px;
    --res-snackbar-bg: var(--dreem-app-background-layer-3);
    --res-snackbar-width: calc(100dvw - 32px);
    --res-saved-views-list-icon-display: flex;
    --res-saved-views-list-icon-opacity: 0.5;
    --res-main-layout-direction: column;
    --res-left-menu-content-direction: row;
    --res-left-menu-height: 60px;
    --res-left-menu-align: stretch;
    --res-left-menu-padding: 6px 12px;
    --res-left-menu-gap: 5px;
    --res-left-menu-item-height: 60px;
    --res-left-menu-item-width: 40px;
    --res-quick-action-display: none;
    --res-left-menu-item-border-bottom: inset 0 -2px 0 0 var(--dreem-app-color-accent);
    --res-left-menu-item-radius: 0px;
    --res-left-menu-logo-size: 30px;
    --res-left-menu-avatar-size: 24px;
    --res-left-menu-workspace-size: 22px;
    --res-left-menu-item-active-bg: transparent;
    --common-config-dialog-padding: 20px;
    --common-card-padding: 20px;
    --common-card-radius: 0;
    --common-card-wrapper-padding: 20px 0;
    --common-card-row-direction: column;
    --common-card-row-align-items: stretch;
    --res-pts-switch-height: 32px;
    --res-content-block-padding: 16px;
    --res-content-gap: 10px;
    --res-studio-header-padding: 0 12px 16px 16px;
    --res-studio-header-height: auto;
    --res-studio-header-title-display: none;
    --res-header-btn-session-wp-flex-shrink: none;
    --res-header-btn-session-wp-min-width: 0;
    --res-studio-session-width: 100dvw;
    --res-studio-sidebar-z-index: calc(var(--dreem-app-z-layer-1) + 4);
    --res-studio-sidebar-position: absolute;
    --res-msg-font-size: 14px;
    --res-msg-line-height: 22px;
    --res-studio-content-margin: 0;
    --res-studio-sessions-padding: 0 16px;
    --res-studio-chatbox-tools-position: static;
    --res-studio-chatbox-tools-padding: 0px 8px;
    --res-chat-empty-title-font-size: 20px;
    --res-chat-empty-justify-content: center;
    --res-chat-empty-chat-box-wp-mb: 0;
    --res-chat-box-empty-message-font-size: 30px;
    --res-chat-box-empty-message-line-height: 36px;
    --res-chat-box-empty-message-padding: 12px 16px;
    --res-chat-box-empty-message-width: 100%;
    --res-chat-feed-radius: 0;
    --res-config-dialog-mobile-display: flex;
    --res-studio-messages-bg-radius: 0;
    --res-chat-box-after-radius: 0;
    --res-studio-messages-bg: radial-gradient(
      circle at 50% 100%,
      color-mix(in srgb, var(--dreem-app-color-accent) 20%, transparent) 0%,
      transparent 70%
    );
    --res-chat-box-order: 1;
    --msg-text-bg: color-mix(in srgb, var(--dreem-app-color-accent) 20%, transparent);
    --msg-text-padding: 10px 20px;
    --msg-text-radius: var(--dreem-app-element-radius) var(--dreem-app-block-radius) var(--dreem-app-block-radius) var(--dreem-app-block-radius);
    --res-dashboard-wrapper-padding: 16px;
    --res-asset-header-height: auto;
    --res-asset-sidebar-padding: 0 16px;
    --res-asset-sidebar-width: min(300px, 80dvw);
    --res-asset-sidebar-mobile-overlay-display: flex;
    --res-asset-sidebar-position: absolute;
    --res-asset-header-padding: 24px;
    --res-asset-header-toolbar-display: none;
    --res-asset-header-actions-flex-shrink: none;
    --res-asset-header-actions-min-width: 0;
    --res-asset-gallery-padding: 0 16px 16px 16px;
    --res-asset-table-margin: 0 16px 16px 16px;
    --res-asset-table-width: calc(100% - 32px);
    --res-asset-empty-state-margin-left: 16px;
    --res-asset-grid-item-info-font-size: 12px;
    --res-gallery-grid-wrapper-min-width: 100dvw;
    --res-asset-title-width: auto;
    --common-sidebar-height: calc(100dvh - 60px);
    --common-sidebar-mt: 0;
    --common-sidebar-mr-opened: 0;
    --common-sidebar-mb: 0;
    --common-sidebar-position: absolute;
    --common-sidebar-width: 100dvw;
    --common-sidebar-z-index: var(--dreem-app-z-layer-3);
    --res-assign-to-products-max-width: 100dvw;
    --common-sidebar-display: none;
    --res-product-header-height: auto;
    --res-product-sidebar-padding: 0 16px;
    --res-product-sidebar-width: min(300px, 80dvw);
    --res-product-sidebar-mobile-overlay-display: flex;
    --res-product-sidebar-position: absolute;
    --res-product-header-padding: 24px;
    --res-product-header-toolbar-display: none;
    --res-product-header-actions-flex-shrink: none;
    --res-product-header-actions-min-width: 0;
    --res-product-gallery-padding: 0 16px 16px 16px;
    --res-product-table-margin: 0 16px 16px 16px;
    --res-product-table-width: calc(100% - 32px);
    --res-product-empty-state-margin-left: 16px;
    --res-product-grid-item-info-font-size: 12px;
    --res-product-title-width: auto;
    --res-settings-header-display: none;
    --res-settings-body-flex-direction: column;
    --res-settings-body-sidebar-flex-direction: row;
    --res-settings-body-sidebar-height: auto;
    --res-settings-body-sidebar-width: 100dvw;
    --res-settings-body-content-gap: 2px;
    --res-menu-collapsible-flex-flow: row nowrap;
    --res-menu-collapsible-group-title-display: none;
    --res-settings-body-content-padding: 0px 0;
    --res-menu-collapsible-item-padding: 10px 16px 10px 10px;
    --res-menu-collapsible-item-radius: 100px;
    --res-menu-collapsible-padding: 16px;
    --res-connections-tab-group-padding: 0 16px;
    --res-workspace-information-body-flex-direction: column;
    --res-plan-billing-toggle-direction: rtl;
    --common-section-title-description-gap: 6px;
    --common-section-title-description-padding: 0 16px;
    --common-section-title-description-title-fs: 22px;
    --common-section-title-description-title-lh: 28px;
    --common-section-title-description-description-fs: 12px;
    --common-section-title-description-description-lh: 16px;
    --subscription-page-gap: 40px;
    --subscription-page-padding: 0 0 40px;
    --plan-list-padding-x: 16px;
    --faq-padding-x: 16px;
    --comparison-padding-x: 16px;
    --comparison-feature-flex: 2;
    --comparison-cell-padding: 16px 20px;
    --comparison-cell-head-padding: 16px;
    --comparison-cell-head-direction: column;
    --comparison-cell-head-align: flex-start;
    --comparison-cell-head-gap: 8px;
    --comparison-section-title-padding: 10px 16px;
    --comparison-feature-title-fs: 14px;
    --comparison-feature-title-lh: 20px;
    --comparison-value-fs: 14px;
    --comparison-value-lh: 20px;
  }
  html .common-context-menu {
    position: fixed !important;
    transform: none !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    width: calc(100dvw - 16px) !important;
    max-width: none !important;
    animation: fade-in 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
    padding: 12px !important;
  }
  html .common-context-menu-item {
    padding: 16px !important;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
      margin-bottom: -20px;
    }
    to {
      opacity: 1;
      margin-bottom: 0px;
    }
  }
}
@media (min-width: 801px) {
  html {
    --common-hide-on-mobile-display: flex;
    --common-hide-on-desktop-display: none;
    --common-config-dialog-padding: 50px;
  }
}.common-table-wrapper {
  position: relative;
  max-height: var(--cf-table-max-height, unset);
  max-width: var(--cf-table-max-width, unset);
  width: var(--cf-table-width, 100%);
  height: var(--cf-table-height, 100%);
  overflow: var(--cf-table-overflow, hidden);
  scrollbar-gutter: var(--cf-table-scrollbar-gutter, stable);
  color: var(--cf-table-color, currentColor);
  background-color: var(--cf-table-bg, transparent);
  border-radius: var(--cf-table-border-radius, 0);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  flex-direction: column;
  display: flex;
  padding: var(--cf-table-padding, 0);
  margin: var(--cf-table-margin, 0);
  font-family: var(--cf-table-font-family, inherit);
  font-size: var(--cf-table-font-size, 14px);
  line-height: var(--cf-table-line-height, 20px);
  font-weight: var(--cf-table-font-weight, normal);
  min-width: 0;
  min-height: 0;
  flex: var(--cf-table-flex, unset);
  user-select: var(--cf-table-user-select, none);
}
.common-table-selection {
  display: flex;
  align-items: center;
  background-color: var(--cf-table-bg, transparent);
  height: var(--cf-table-selection-height, 30px);
  padding: var(--cf-table-selection-padding, 4px);
  font-size: 12px;
  gap: 4px;
}
.common-table-selection u {
  cursor: pointer;
}
.common-table-header {
  display: flex;
  align-items: center;
  min-width: fit-content;
  position: sticky;
  top: 0;
  z-index: calc(var(--cf-table-zindex-wrapper, 1) + 2);
  background-color: var(--cf-table-bg, transparent);
  height: var(--cf-table-header-height, 50px);
  --cf-zindex-sticky-left: calc(var(--cf-table-zindex-wrapper, 1) + 3);
  --cf-table-row-bg-hover: transparent;
  --cf-table-sticky-left-bg-hover: var(--cf-table-bg, transparent);
}
.common-table-header-cell {
  position: relative;
  display: flex;
  align-items: center;
}
.common-table-header-cell-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  font-weight: 500;
  opacity: 0.5;
}
.common-table-header-cell-sort-icons {
  display: flex;
  padding: 4px;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: var(--cf-table-sort-bg, transparent);
}
.common-table-header-cell:hover {
  --cf-table-sort-bg: var(
    --cf-table-sort-hover-bg,
    color-mix(in srgb, currentColor 15%, transparent)
  );
  --cf-table-resizer-bg: color-mix(
    in srgb,
    currentColor 10%,
    transparent
  );
}
.common-table-header.has-resizing {
  cursor: col-resize;
  --cf-table-cell-sortable-cursor: col-resize;
}
.common-table-body {
  flex: 1;
  gap: var(--cf-table-gap, 0);
  flex-direction: column;
  display: flex;
  min-width: var(--cf-table-min-body-width, fit-content);
  min-height: var(--cf-table-min-body-height, fit-content);
}
.common-table-loading {
  margin-top: var(--cf-table-gap, 0);
}
.common-table-row {
  display: flex;
  align-items: var(--cf-table-row-align-items, center);
  gap: var(--cf-table-row-gap, 0);
  width: 100%;
  padding: var(--cf-table-row-padding, 0);
  height: var(--cf-table-header-height, 50px);
  background-color: var(--cf-table-row-bg, transparent);
  flex-shrink: 0;
  border-bottom: var(--cf-table-row-border, 1px solid color-mix(in srgb, currentColor 10%, transparent));
  border-radius: var(--cf-table-row-border-radius, 0);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  cursor: var(--cf-table-row-cursor, default);
}
.common-table-row-sticky-left {
  position: sticky;
  left: 0;
  z-index: var(--cf-zindex-sticky-left, calc(var(--cf-table-zindex-wrapper, 1) + 1)) !important;
  background-color: var(--cf-table-sticky-left-bg, var(--cf-table-bg, transparent));
  height: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  --cf-table-cell-opacity: 1;
}
.common-table-row:hover {
  --cf-table-sticky-left-bg: var(
    --cf-table-sticky-left-bg-hover,
    color-mix(in srgb, currentColor 5%, var(--cf-table-bg, transparent))
  );
  --cf-table-row-bg: var(
    --cf-table-row-bg-hover,
    color-mix(in srgb, currentColor 5%, var(--cf-table-bg, transparent))
  );
}
.common-table-row.selected {
  --cf-table-sticky-left-bg: color-mix(
    in srgb,
    var(--cf-table-selection-color, currentColor) 10%,
    var(--cf-table-bg, transparent)
  );
  --cf-table-row-bg: color-mix(
    in srgb,
    var(--cf-table-selection-color, currentColor) 10%,
    var(--cf-table-bg, transparent)
  );
}
.common-table-row.highlighted {
  --cf-table-sticky-left-bg: color-mix(
    in srgb,
    currentColor 3%,
    var(--cf-table-bg, transparent)
  );
  --cf-table-row-bg: color-mix(
    in srgb,
    currentColor 3%,
    var(--cf-table-bg, transparent)
  );
}
.common-table-checkbox {
  display: flex;
  opacity: var(--cf-table-checkbox-opacity, 0.2);
  cursor: pointer;
}
.common-table-checkbox.checked {
  color: var(--cf-table-selection-color, currentColor);
  --cf-table-checkbox-opacity: 1;
}
.common-table-checkbox:hover {
  --cf-table-checkbox-opacity: 1;
}
.common-table-cell {
  height: 100%;
  display: flex;
  gap: var(--cf-table-cell-gap, 10px);
  align-items: center;
  padding: 0 10px;
  text-transform: var(--cf-table-cell-text-transform, none);
  font-weight: var(--cf-table-cell-font-weight, 400);
  letter-spacing: var(--cf-table-cell-letter-spacing, 0px);
  opacity: var(--cf-table-cell-opacity, 1);
  z-index: var(--cf-table-zindex-wrapper, 1);
  min-width: 0;
}
.common-table-cell:first-child {
  border-bottom-left-radius: var(--cf-table-row-border-radius, 0);
  border-top-left-radius: var(--cf-table-row-border-radius, 0);
  padding: var(--cf-table-cell-first-padding, 0 10px);
}
.common-table-cell:last-child {
  border-bottom-right-radius: var(--cf-table-row-border-radius, 0);
  border-top-right-radius: var(--cf-table-row-border-radius, 0);
}
.common-table-cell.sortable {
  cursor: var(--cf-table-cell-sortable-cursor, pointer);
}
.common-table-cell.is-resizing {
  --cf-table-resizer-bg: var(--cf-table-selection-color);
}
.common-table-cell.sticky {
  position: sticky;
  right: var(--right, unset);
  left: var(--left, 0);
  z-index: var(--cf-zindex-sticky-left, calc(var(--cf-table-zindex-wrapper, 1) + 1)) !important;
  background-color: var(--cf-table-sticky-left-bg, var(--cf-table-bg, transparent));
  height: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  --cf-table-cell-opacity: 1;
}
.common-table-resizer {
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  cursor: col-resize;
  background-color: var(--cf-table-resizer-bg, transparent);
}.common-saved-views-button {
  min-width: 0;
  padding: 0 6px;
  border: none;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: var(--cf-saved-views-button-bg, color-mix(in srgb, currentColor 5%, transparent));
  cursor: pointer;
  color: var(--cf-saved-views-color, var(--dreem-app-color));
  font-size: var(--cf-saved-views-button-font-size, 13px);
  font-weight: 500;
  height: var(--cf-saved-views-button-line-height, 28px);
  line-height: var(--cf-saved-views-button-line-height, 28px);
  font-family: var(--cf-saved-views-button-font-family, var(--dreem-app-font));
  display: flex;
  align-items: center;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
  outline: 1px solid var(--cf-saved-views-button-outline, transparent);
  outline-offset: -1px;
  min-width: fit-content;
  overflow: hidden;
  backdrop-filter: var(--cf-saved-views-button-backdrop-filter, none);
}
.common-saved-views-button:hover {
  --cf-saved-views-button-icon-caret-opacity: 1;
  --cf-saved-views-button-label-opacity: 1;
  background-color: var(--cf-saved-views-button-bg-hover, color-mix(in srgb, currentColor 20%, transparent));
}
.common-saved-views-button.readonly {
  cursor: not-allowed;
  pointer-events: none;
}
.common-saved-views-button.has-value {
  --cf-saved-views-button-bg: var(
    --cf-saved-views-button-bg-has-value,
    color-mix(in srgb, currentColor 15%, transparent)
  );
}
.common-saved-views-button.no-bg {
  --cf-saved-views-button-bg: transparent;
}
.common-saved-views-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--cf-saved-views-button-icon-color, currentColor);
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
}
.common-saved-views-button-icon-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--cf-saved-views-button-icon-color, currentColor);
  opacity: var(--cf-saved-views-button-icon-caret-opacity, 0.5);
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
}
.common-saved-views-button-label {
  user-select: none;
  min-width: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  padding: 0 4px 0 6px;
  opacity: var(--cf-saved-views-button-label-opacity, 0.5);
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
}
.common-saved-views-button-value {
  user-select: none;
  padding: 0 4px;
  min-width: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: var(--cf-saved-views-button-value-color, var(--dreem-app-color));
  max-width: 150px;
}
.common-saved-views-button.opened {
  background-color: transparent;
  --cf-saved-views-button-more-color: var(--cf-saved-views-button-icon-color-opened, var(--dreem-app-color-accent));
  --cf-saved-views-button-label-opacity: 1;
  --cf-saved-views-button-icon-color: var(--cf-saved-views-button-icon-color-opened, currentColor);
  --cf-saved-views-button-icon-caret-opacity: 1;
  outline: 1px solid var(--cf-saved-views-button-outline-opened, color-mix(in srgb, currentColor 20%, transparent));
}
.common-saved-views-button-remove {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cf-saved-views-button-remove-bg, transparent);
  color: inherit;
  width: var(--cf-saved-views-button-line-height, 28px);
  height: var(--cf-saved-views-button-line-height, 28px);
  margin-right: -6px;
  flex-shrink: 0;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
  cursor: pointer;
}
.common-saved-views-button-remove:hover {
  background-color: var(--cf-saved-views-button-remove-bg-hover, color-mix(in srgb, currentColor 10%, transparent));
}
.common-saved-views-list {
  display: flex;
  align-items: center;
  flex-wrap: var(--cf-saved-views-list-flex-wrap, nowrap);
  gap: 10px;
  margin: var(--cf-saved-views-list-margin, 0 15px);
  padding: var(--cf-saved-views-list-padding, 0);
  width: var(--cf-saved-views-list-width, unset);
  font-family: var(--cf-saved-views-list-font-family, var(--dreem-app-small-font));
  min-width: 0;
}
.common-saved-views-list-selected {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: var(--cf-saved-views-list-selected-flex-wrap, nowrap);
  position: relative;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  overflow: hidden;
}
.common-saved-views-list-selected-viewport {
  overflow: hidden;
  flex: 1;
  position: relative;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-saved-views-list-selected-track {
  display: flex;
  gap: 4px;
  transition: transform 240ms ease;
}
.common-saved-views-list-selected-nav-right, .common-saved-views-list-selected-nav-left {
  background-color: var(--cf-saved-views-button-bg, color-mix(in srgb, currentColor 10%, transparent));
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  z-index: 1;
  cursor: pointer;
  height: var(--cf-saved-views-button-line-height, 28px);
  display: flex;
  align-items: center;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
}
.common-saved-views-list-selected-nav-right:hover, .common-saved-views-list-selected-nav-left:hover {
  background-color: var(--cf-saved-views-button-bg-hover, color-mix(in srgb, currentColor 20%, transparent));
}
.common-saved-views-list-selected-nav-right:active, .common-saved-views-list-selected-nav-left:active {
  background-color: var(--cf-saved-views-button-bg-active, color-mix(in srgb, currentColor 30%, transparent));
}
.common-saved-views-date-popup {
  --cf-saved-views-popup-width: 300px;
}
.common-saved-views-popup {
  z-index: var(--cf-saved-views-popup-z-index, var(--dreem-app-z-layer-3));
  display: flex;
  flex-direction: column;
  background-color: var(--cf-saved-views-popup-bg, color-mix(in srgb, var(--dreem-app-background-layer-5) 60%, transparent));
  backdrop-filter: blur(20px);
  color: var(--cf-saved-views-popup-color, var(--dreem-app-color));
  border-radius: var(--cf-saved-views-popup-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  padding: 8px;
  width: var(--cf-saved-views-popup-width, 200px);
  font-family: var(--dreem-app-small-font);
  position: relative;
  margin: 6px -8px !important;
  font-size: var(--cf-saved-views-popup-item-font-size, 13px);
  font-weight: var(--cf-saved-views-popup-item-font-weight, 400);
  line-height: var(--cf-saved-views-popup-item-height, 30px);
  --search-radius: 4px;
  --search-background-color: transparent;
  --search-background-color-hover: color-mix(in srgb, currentColor 10%, transparent);
  --search-outline-open-color: transparent;
  --search-font-size: 13px;
  --search-font-weight: 400;
}
.common-saved-views-popup.sub {
  margin: -8px 4px !important;
}
.common-saved-views-popup-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}
.common-saved-views-popup-group-name {
  font-size: 10px;
  line-height: 20px;
  padding: 6px var(--cf-saved-views-popup-item-padding-hoz, 6px) 0 var(--cf-saved-views-popup-item-padding-hoz, 6px);
  opacity: 0.5;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 500;
  user-select: none;
}
.common-saved-views-popup-scroll {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden auto;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-height: 0;
  max-height: 400px;
  margin-right: -8px;
  padding-right: 8px;
}
.common-saved-views-popup-infinite {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.common-saved-views-popup-empty {
  padding: 0 6px;
  display: flex;
  align-items: center;
  height: var(--cf-saved-views-popup-item-height, 30px);
}
.common-saved-views-popup-item {
  list-style: none;
  padding: 0 var(--cf-saved-views-popup-item-padding-hoz, 6px);
  display: flex;
  align-items: center;
  height: var(--cf-saved-views-popup-item-height, 30px);
  min-width: 0;
  cursor: pointer;
  color: var(--cf-saved-views-popup-item-color, var(--dreem-app-color));
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  gap: 4px;
  transition: var(--cf-saved-views-transition, 0.25s background-color cubic-bezier(0.25, 0.1, 0.25, 1));
}
.common-saved-views-popup-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.common-saved-views-popup-item-input {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  position: relative;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  overflow: hidden;
  height: var(--cf-saved-views-popup-item-height, 30px);
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
}
.common-saved-views-popup-item-input:has(input:focus), .common-saved-views-popup-item-input:has(input:focus-within) {
  outline: 1px solid var(--cf-saved-views-popup-item-icon-color-selected, var(--dreem-app-color-accent));
}
.common-saved-views-popup-item-input:hover {
  --cf-saved-views-popup-item-input-controls-opacity: 1;
}
.common-saved-views-popup-item-input-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}
.common-saved-views-popup-item-input-wrapper input {
  flex: 1;
  min-width: 0;
  background-color: transparent;
  padding: 0px 12px;
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  color: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  line-height: inherit;
}
.common-saved-views-popup-item-input-wrapper input[type=number]::-webkit-inner-spin-button, .common-saved-views-popup-item-input-wrapper input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.common-saved-views-popup-item-input-wrapper input[type=number] {
  -moz-appearance: textfield;
}
.common-saved-views-popup-item-input-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 24px;
  height: 100%;
}
.common-saved-views-popup-item-input-controls-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: transparent;
  opacity: var(--cf-saved-views-popup-item-input-controls-opacity, 0.5);
  cursor: pointer;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
}
.common-saved-views-popup-item-input-controls-item:active {
  background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
}
.common-saved-views-popup-item-input-controls-item:hover {
  opacity: 1;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-saved-views-popup-item-date-picker {
  display: flex;
  gap: 2px;
  padding: 0 0 0 24px;
}
.common-saved-views-popup-item-date-picker.selected {
  --cf-saved-date-picker-opacity: 1;
  --cf-saved-date-picker-pointer-events: all;
}
.common-saved-views-popup-item-date-picker-input {
  flex: 1;
  min-width: 0;
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  padding: 8px;
  font-family: inherit;
  font-size: 11px;
  border: none;
  outline: none;
  color: inherit;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  opacity: var(--cf-saved-date-picker-opacity, 0.5);
  pointer-events: var(--cf-saved-date-picker-pointer-events, none);
  cursor: pointer;
}
.common-saved-views-popup-item-date-picker-input:hover {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}
.common-saved-views-popup-item.selected {
  --cf-saved-views-popup-item-icon-opacity: 1;
  --cf-saved-views-popup-item-icon-color: var(
    --cf-saved-views-popup-item-icon-color-selected,
    var(--dreem-app-color-accent)
  );
  color: var(--cf-saved-views-popup-item-color-selected, currentColor);
}
.common-saved-views-popup-item:hover {
  background-color: var(--cf-saved-views-popup-item-bg-hover, color-mix(in srgb, currentColor 10%, transparent));
}
.common-saved-views-popup-item.disabled {
  pointer-events: none;
}
.common-saved-views-popup-item-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--cf-saved-views-popup-item-icon-color, currentColor);
  opacity: var(--cf-saved-views-popup-item-icon-opacity, 0.3);
}
.common-saved-views-popup-item-text {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  padding: 0 4px;
  text-align: left;
  user-select: none;
}
.common-saved-views-popup-item-separator {
  height: 1px;
  background-color: var(--cf-saved-views-popup-item-separator-bg, color-mix(in srgb, currentColor 3%, transparent));
  margin: 6px 0;
}
.common-saved-views-popup-item-clear {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 30px;
  background-color: transparent;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  padding: 0 6px;
  gap: 4px;
  flex-shrink: 0;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
}
.common-saved-views-popup-item-clear:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.common-saved-views-popup-item-clear:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.common-saved-views-save-view-button-wrapper {
  display: flex;
  align-items: center;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  flex-shrink: 0;
}

.common-saved-views-saved-list {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: var(--cf-saved-views-list-width, 300px);
  flex: var(--cf-saved-views-list-flex, unset);
  padding: var(--cf-saved-views-list-padding, 0);
  margin: var(--cf-saved-views-list-margin, 0);
  background: var(--cf-saved-views-list-background, transparent);
  border-radius: var(--cf-saved-views-list-border-radius, 0);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  transition: var(--cf-saved-views-list-transition, none);
}
.common-saved-views-saved-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cf-saved-views-list-header-height, 44px);
  position: sticky;
  top: 0;
  z-index: var(--cf-saved-views-list-header-z-index, 2);
  flex-shrink: 0;
  padding: 0 8px;
  gap: 8px;
  background-color: var(--cf-saved-views-list-header-background, var(--dreem-app-background-layer-1));
  --search-font-size: 12px;
  --search-font-weight: 400;
  --search-background-color: transparent;
  --search-background-color-hover: color-mix(in srgb, currentColor 10%, transparent);
}
.common-saved-views-saved-list-header-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.3;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.common-saved-views-saved-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  border-radius: var(--cf-saved-views-list-border-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-saved-views-saved-list-collapsiable {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
  overflow: hidden;
  height: 100%;
}
.common-saved-views-saved-list-collapsiable.collapsed {
  grid-template-rows: 0fr;
}
.common-saved-views-saved-list-wrapper {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  gap: 2px;
}
.common-saved-views-saved-list-item {
  pointer-events: var(--cf-saved-views-list-item-pointer-events, auto);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--cf-saved-views-list-item-padding, 12px);
  height: var(--cf-saved-views-list-item-height, 44px);
  border-radius: var(--cf-saved-views-list-border-radius, var(--dreem-app-block-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  cursor: pointer;
  transition: var(--cf-saved-views-list-transition, var(--dreem-app-transition));
  --ellipsis-flex: 1;
}
.common-saved-views-saved-list-item .fixed-opacity-icon {
  --cf-saved-views-list-icon-opacity: 0.5;
}
.common-saved-views-saved-list-item.not-dragging {
  --cf-saved-views-list-item-pointer-events: none;
}
.common-saved-views-saved-list-item.opened-popup, .common-saved-views-saved-list-item.active, .common-saved-views-saved-list-item:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  --cf-saved-views-list-icon-menu-opacity: 1;
  --cf-saved-views-list-icon-menu-display: flex;
}
.common-saved-views-saved-list-item.disabled {
  pointer-events: none;
}
.common-saved-views-saved-list-item:hover {
  --cf-saved-views-list-icon-drag-opacity: 0.5;
  --cf-saved-views-list-icon-opacity: 0;
}
.common-saved-views-saved-list-item.active {
  --cf-saved-views-list-icon-color: var(--cf-vertical-menu-selection-color, currentColor);
  --cf-saved-views-list-icon-opacity: 1;
}
.common-saved-views-saved-list-item.active:hover {
  --cf-saved-views-list-icon-opacity: 0;
}
.common-saved-views-saved-list-item.active .fixed-opacity-icon {
  --cf-saved-views-list-icon-opacity: 1;
}
.common-saved-views-saved-list-item-drag {
  cursor: grabbing;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 0px;
  width: var(--cf-saved-views-list-item-height, 44px);
  height: var(--cf-saved-views-list-item-height, 44px);
  align-items: center;
  transition: var(--cf-saved-views-transition, 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1));
  outline: none !important;
  border: none !important;
  z-index: 1;
}
.common-saved-views-saved-list-item-drag-icon {
  opacity: var(--cf-saved-views-list-icon-drag-opacity, 0) !important;
  color: var(--cf-saved-views-list-icon-drag-color, currentColor);
}
.common-saved-views-saved-list-item-drag:hover {
  --cf-saved-views-list-icon-drag-opacity: 1;
  --cf-saved-views-list-icon-drag-color: var(--cf-vertical-menu-selection-color, currentColor);
}
.common-saved-views-saved-list-item-icon-box {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: var(--cf-saved-views-list-icon-opacity, 0.5);
  color: var(--cf-saved-views-list-icon-color, currentColor);
  flex-shrink: 0;
}
.common-saved-views-saved-list-item-icon-menu {
  width: 20px;
  height: 20px;
  display: var(--cf-saved-views-list-icon-menu-display, var(--res-saved-views-list-icon-display, none));
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: var(--cf-saved-views-list-icon-menu-opacity, var(--res-saved-views-list-icon-opacity, 0));
}
.common-saved-views-saved-list-item-name {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}

.common-saved-views-columns-selector {
  display: flex;
  min-height: 0;
  height: 550px;
  margin-top: 10px;
}
.common-saved-views-columns-selector-col {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  display: flex;
}
.common-saved-views-columns-selector-col-separator {
  width: 1px;
  flex-shrink: 0;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.common-saved-views-columns-selector-col-header {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}
.common-saved-views-columns-selector-col-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  --search-margin: 0 25px;
  --search-width: calc(100% - 50px) !important;
  --empty-state-padding: 50px;
  --empty-state-margin-left: 25px;
  --empty-state-margin-right: 25px;
  --empty-state-body-gap: 10px;
  --empty-state-title-font-size: 18px;
  --empty-state-description-font-size: 12px;
  --empty-state-border-radius: var(--dreem-app-block-radius);
}
.common-saved-views-columns-selector-col-list-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
}
.common-saved-views-columns-selector-col-list-group-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.4;
  padding: 0 5px;
  margin: 0 25px;
}
.common-saved-views-columns-selector-col-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
  padding: 4px 6px;
  border-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: var(--checkbox-row-bg, transparent);
  margin: var(--item-margin, 0 25px);
}
.common-saved-views-columns-selector-col-item.selected {
  --checkbox-row-color: var(--dreem-app-color-accent);
  --checkbox-row-icon-opacity: 1;
}
.common-saved-views-columns-selector-col-item:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  --checkbox-row-icon-opacity: 0.8;
}
.common-saved-views-columns-selector-col-item-text {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.common-saved-views-columns-selector-col-item-type {
  font-size: 11px;
  font-family: var(--dreem-app-small-font);
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  padding: 2px 6px;
  background-color: color-mix(in srgb, currentColor 15%, transparent);
  color: color-mix(in srgb, currentColor 50%, transparent);
  flex-shrink: 0;
}
.common-saved-views-columns-selector-col-item-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--checkbox-row-color, var(--dreem-app-color));
  flex-shrink: 0;
  opacity: var(--checkbox-row-icon-opacity, 0.3);
}
.common-saved-views-columns-selector-col-item-icon-box {
  color: var(--checkbox-row-color, var(--dreem-app-color));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: var(--checkbox-row-icon-opacity, 0.3);
}
.common-saved-views-columns-selector-col:last-child {
  --item-margin: 0 25px 0 18px;
}.common-video-player-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--common-video-color, currentColor);
  font-family: var(--common-video-font-family, inherit);
  font-size: var(--common-video-font-size, 13px);
  line-height: var(--common-video-line-height, 20px);
  position: relative;
}
.common-video-player-wrapper:has(.common-video-player-view-content-loading) .common-video-player-controller-wrapper {
  display: none;
}
.common-video-player-wrapper:hover, .common-video-player-wrapper:has(.active) {
  --common-video-controller-wrapper-margin: var(--res-video-controller-wrapper-margin, 20px);
  --common-video-controller-wrapper-backdrop-filter: blur(50px) saturate(1.5);
  --common-video-controller-wrapper-background: rgba(0, 0, 0, 0.35);
  --common-video-controller-wrapper-radius: var(
    --res-video-controller-wrapper-radius,
    var(--dreem-app-wrapper-radius)
  );
  --common-video-controller-wrapper-outline: 2px solid rgba(255, 255, 255, 0.08);
}
.common-video-player-wrapper * {
  box-sizing: border-box;
  user-select: none;
}
.common-video-player-view {
  flex: 1;
  min-height: 0;
}
.common-video-player-view-content {
  width: 100%;
  height: 100%;
  position: relative;
}
.common-video-player-view-content-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  z-index: 1;
}
.common-video-player-view-content video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.common-video-player-controller {
  display: flex;
  align-items: center;
  gap: var(--common-video-controller-gap, 10px);
  padding: var(--common-video-controller-padding, 10px);
}
.common-video-player-controller-options {
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  display: flex;
  align-items: center;
  gap: var(--common-video-controller-gap, 2px);
  justify-content: flex-end;
  padding: var(--common-video-controller-padding, 0 10px);
  box-shadow: 0 1px 0 0 color-mix(in srgb, currentColor 5%, transparent);
  --common-video-controller-button-opacity: 0;
}
.common-video-player-controller-options-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--common-video-controller-gap, 4px);
  flex: 1;
  min-width: 0;
  overflow: auto;
}
.common-video-player-controller-options.active {
  --common-video-controller-button-opacity: 1;
}
.common-video-player-controller-progress {
  width: 100%;
  height: 32px;
  border-radius: 100px;
  overflow: hidden;
  background: transparent;
  outline: none;
  color: inherit;
  margin: 0;
  -webkit-appearance: none;
}
.common-video-player-controller-progress-wrapper {
  position: relative;
  flex: 1;
  min-width: 100px;
  display: flex;
  align-items: center;
}
.common-video-player-controller-progress-wrapper:hover {
  --common-video-progress-height: 16px;
}
.common-video-player-controller-progress-fill {
  position: absolute;
  left: 0;
  height: var(--common-video-progress-height, 4px);
  width: 0%;
  border-radius: 100px;
  background-color: color-mix(in srgb, currentColor 100%, transparent);
  pointer-events: none;
  transition: width, height 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), width 0.1s linear;
}
.common-video-player-controller-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: currentColor;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  transition: width, height 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: pointer;
  position: relative;
  z-index: 1;
  opacity: 0;
}
.common-video-player-controller-progress::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  width: 100%;
  height: var(--common-video-progress-height, 4px);
  cursor: pointer;
  border-radius: 100px;
  transition: width, height 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  background-color: color-mix(in srgb, currentColor 20%, transparent);
}
.common-video-player-controller-button, .common-video-player-controller-options-item {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--common-video-controller-button-gap, 4px);
  padding: var(--common-video-controller-button-padding, 6px);
  opacity: var(--common-video-controller-button-opacity, 1);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  border-radius: 100px;
  color: inherit;
  margin: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.common-video-player-controller-button span, .common-video-player-controller-options-item span {
  padding: 0 8px;
  text-align: center;
}
.common-video-player-controller-button:hover, .common-video-player-controller-options-item:hover {
  background-color: color-mix(in srgb, currentColor 20%, transparent);
}
.common-video-player-controller-button.inactive, .common-video-player-controller-options-item.inactive {
  opacity: 0.5;
}
.common-video-player-controller-button.active, .common-video-player-controller-options-item.active {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}
.common-video-player-controller-wrapper {
  width: calc(100% - var(--common-video-controller-wrapper-margin, 0px) * 2);
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(-50% - var(--common-video-controller-wrapper-margin, 0px)));
  display: flex;
  flex-direction: column;
  background: var(--common-video-controller-wrapper-background, transparent);
  border: var(--common-video-controller-wrapper-border, none);
  border-radius: var(--common-video-controller-wrapper-radius, 0);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  backdrop-filter: var(--common-video-controller-wrapper-backdrop-filter, blur(0px));
  margin: var(--common-video-controller-wrapper-margin, 0px);
  outline: var(--common-video-controller-wrapper-outline, 2px solid transparent);
  max-width: calc(100% - var(--common-video-controller-wrapper-margin, 0px) * 2);
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.common-video-player-controller-wrapper.fullscreen.hidden {
  opacity: 0;
  pointer-events: none;
}
.common-video-player-controller-volume-range {
  width: 50px;
  height: 20px;
  background: transparent;
  outline: none;
  color: inherit;
  margin: 0;
  -webkit-appearance: none;
}
.common-video-player-controller-volume-range:hover {
  --common-video-slider-thumb-width: 16px;
  --common-video-slider-thumb-height: 16px;
  --common-video-slider-thumb-mt: -7px;
}
.common-video-player-controller-volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #fff;
  width: var(--common-video-slider-thumb-width, 4px);
  height: var(--common-video-slider-thumb-height, 12px);
  border-radius: 10px;
  cursor: pointer;
  margin-top: var(--common-video-slider-thumb-mt, -5px);
  transition: all ease-in-out 0.1s;
}
.common-video-player-controller-volume-range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  cursor: pointer;
  border-radius: 1px;
  background-color: color-mix(in srgb, currentColor 20%, transparent);
  cursor: pointer;
}
.common-video-player-annotation-indicators {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.common-video-player-user-avatar {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 7px;
  color: #ffffff;
  background-color: #bdbdbd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  user-select: none;
  pointer-events: auto;
  transition: all 0.2s ease-in-out;
  outline: 2px solid transparent;
}
.common-video-player-user-avatar:hover {
  z-index: 3;
  outline: 4px solid var(--common-video-accent-color, var(--dreem-app-color-accent));
}
.common-video-player-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.common-video-player-user-avatar.selected {
  border: 2px solid var(--common-video-accent-color, var(--dreem-app-color-accent));
}
.common-video-player-tooltip-container:not(:first-child, :nth-child(2), :last-child) {
  display: none !important;
}.common-gallery-grid-wrapper {
  min-height: 0;
  min-width: var(--res-gallery-grid-wrapper-min-width, 0);
  display: flex;
  align-items: flex-start;
  flex: var(--cf-gallery-grid-wrapper-flex, unset);
  overflow: hidden auto;
  scrollbar-gutter: stable;
  gap: var(--cf-gallery-grid-wrapper-gap, 0px);
  margin: var(--cf-gallery-grid-wrapper-margin, 0px);
  padding: var(--cf-gallery-grid-wrapper-padding, 0px);
  user-select: var(--cf-gallery-grid-wrapper-user-select, none);
  border-radius: var(--cf-gallery-grid-wrapper-border-radius, 0px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: var(--cf-gallery-grid-wrapper-background-color, transparent);
}
.common-gallery-grid-0 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 0), minmax(0, 1fr)) !important;
}
.common-gallery-grid-1 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 1), minmax(0, 1fr)) !important;
}
.common-gallery-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 2), minmax(0, 1fr)) !important;
}
.common-gallery-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 3), minmax(0, 1fr)) !important;
}
.common-gallery-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 4), minmax(0, 1fr)) !important;
}
.common-gallery-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 5), minmax(0, 1fr)) !important;
}
.common-gallery-grid-6 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 6), minmax(0, 1fr)) !important;
}
.common-gallery-grid-7 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 7), minmax(0, 1fr)) !important;
}
.common-gallery-grid-8 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 8), minmax(0, 1fr)) !important;
}
.common-gallery-grid-9 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 9), minmax(0, 1fr)) !important;
}
.common-gallery-grid-10 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 10), minmax(0, 1fr)) !important;
}
.common-gallery-grid-11 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 11), minmax(0, 1fr)) !important;
}
.common-gallery-grid-12 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 12), minmax(0, 1fr)) !important;
}
.common-gallery-grid-13 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 13), minmax(0, 1fr)) !important;
}
.common-gallery-grid-14 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 14), minmax(0, 1fr)) !important;
}
.common-gallery-grid-15 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 15), minmax(0, 1fr)) !important;
}
.common-gallery-grid-16 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 16), minmax(0, 1fr)) !important;
}
.common-gallery-grid-17 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 17), minmax(0, 1fr)) !important;
}
.common-gallery-grid-18 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 18), minmax(0, 1fr)) !important;
}
.common-gallery-grid-19 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 19), minmax(0, 1fr)) !important;
}
.common-gallery-grid-20 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 20), minmax(0, 1fr)) !important;
}
.common-gallery-grid-21 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 21), minmax(0, 1fr)) !important;
}
.common-gallery-grid-22 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 22), minmax(0, 1fr)) !important;
}
.common-gallery-grid-23 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 23), minmax(0, 1fr)) !important;
}
.common-gallery-grid-24 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 24), minmax(0, 1fr)) !important;
}
.common-gallery-grid-25 {
  display: grid !important;
  grid-template-columns: repeat(var(--res-gallery-grid-number, 25), minmax(0, 1fr)) !important;
}
.common-gallery-grid-content {
  gap: var(--cf-gallery-grid-content-gap, 4px);
  padding: var(--cf-gallery-grid-content-padding, 2px);
  width: 100%;
  min-height: fit-content;
}
.common-gallery-grid-asset {
  display: flex;
  flex-direction: column;
  gap: var(--cf-gallery-grid-item-gap, 6px);
}
.common-gallery-grid-asset-image {
  object-fit: var(--cf-gallery-grid-item-image-object-fit, contain);
  width: 100%;
  height: 100%;
  cursor: var(--cf-gallery-grid-item-cursor, pointer);
  opacity: var(--cf-gallery-grid-item-opacity, 1);
  border-radius: var(--cf-gallery-image-radius, var(--dreem-app-image-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.common-gallery-grid-asset-image-wrapper {
  display: flex;
  aspect-ratio: 1/1;
  position: relative;
  background-color: var(--cf-gallery-grid-item-background, color-mix(in srgb, currentColor 15%, transparent));
  border-radius: var(--cf-gallery-image-radius, var(--dreem-app-image-radius));
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  outline-width: var(--cf-gallery-grid-item-outline-width, 0px);
  outline-color: var(--cf-gallery-grid-item-outline-color, transparent);
  outline-offset: var(--cf-gallery-grid-item-outline-offset, 0px);
  outline-style: solid;
  min-height: 0;
  width: 100%;
}
.common-gallery-grid-asset-image-wrapper.active {
  --cf-gallery-grid-item-outline-color: var(--dreem-app-color-accent);
  --cf-gallery-grid-item-outline-width: var(--dreem-app-outline-select-width);
  --cf-gallery-grid-item-outline-offset: calc(var(--dreem-app-outline-select-width) * -1);
}
.common-gallery-grid-empty {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--cf-gallery-grid-empty-border-radius, 0px);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  background-color: var(--cf-gallery-grid-empty-background-color, transparent);
}
.common-gallery-grid-empty h3 {
  opacity: 0.2;
  font-weight: 400;
}
.common-gallery-assets-grid-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background-color: transparent;
}.common-btn {
  display: flex;
  align-items: var(--btn-align-items, center);
  justify-content: var(--btn-justify-content, center);
  cursor: var(--btn-cursor, pointer);
  user-select: none;
  opacity: var(--btn-opacity, 1);
  text-align: var(--btn-text-align, center);
  outline: var(--btn-outline, 1px solid transparent);
  outline-offset: var(--btn-outline-offset, -1px);
  flex-shrink: 0;
  font-size: var(--btn-font-size, 12px);
  font-weight: var(--btn-font-weight, 400);
  font-family: var(--btn-font-family, var(--dreem-app-font));
  height: var(--btn-height, 32px);
  min-width: var(--btn-min-width, 32px);
  width: var(--btn-width);
  padding: var(--btn-padding, 0 8px);
  border-radius: var(--btn-radius, 100px);
  color: var(--btn-color, currentColor);
  background-color: var(--btn-bg-color, color-mix(in srgb, currentColor 10%, transparent));
  transition: var(--btn-transition, var(--dreem-app-transition));
  backdrop-filter: var(--btn-backdrop-filter, none);
  pointer-events: var(--btn-pointer-events, auto);
}
.common-btn.count-btn {
  --btn-icon-width: fit-content !important;
  --btn-icon-aspect-ratio: none;
}
.common-btn.count-btn .common-btn-number {
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dreem-app-color-accent);
  color: #fff;
  padding: 0 6px;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.common-btn.count-btn .common-btn-number.white {
  background-color: #fff;
  color: var(--dreem-app-color-accent);
}
.common-btn.box-icon-w-auto {
  --btn-icon-width: auto !important;
}
.common-btn.icon-color-50 {
  --btn-icon-color: color-mix(in srgb, currentColor 50%, transparent);
}
.common-btn.icon-color-50:hover {
  --btn-icon-color: var(--btn-icon-color-hover, currentColor);
}
.common-btn:hover {
  background: var(--btn-bg-color-hover, color-mix(in srgb, currentColor 20%, transparent));
}
.common-btn:active {
  background: var(--btn-bg-color-active, color-mix(in srgb, currentColor 30%, transparent));
}
.common-btn.icon-accent {
  --btn-icon-color: var(--dreem-app-color-accent);
}
.common-btn-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--btn-icon-height, 16px);
  width: var(--btn-icon-width, 16px);
  flex-shrink: 0;
  aspect-ratio: var(--btn-icon-aspect-ratio, 1/1);
  color: var(--btn-icon-color, currentColor);
  transition: var(--btn-transition, var(--dreem-app-transition));
}
.common-btn.no-ratio {
  --btn-icon-aspect-ratio: unset;
  --btn-icon-width: fit-content !important;
}
.common-btn span {
  padding: var(--btn-padding-span, 0 8px);
}
.common-btn.tag {
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  --btn-font-size: 10px;
  --btn-font-weight: 400;
  --btn-height: 20px;
  --btn-min-width: 20px;
  --btn-padding: 0 4px;
  --btn-icon-height: 16px;
  --btn-icon-width: 16px;
  --btn-padding-span: 0 4px;
  --btn-font-family: var(--dreem-app-small-font);
  --btn-radius: var(--dreem-app-base-radius);
  --btn-outline: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  --btn-bg-color: transparent;
  --btn-bg-color-hover: transparent;
  --btn-bg-color-active: transparent;
  --btn-cursor: default;
}
.common-btn.badge {
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  letter-spacing: 1px;
  --btn-font-size: 10px;
  --btn-font-weight: 500;
  --btn-height: 20px;
  --btn-min-width: 20px;
  --btn-padding: 0 4px;
  --btn-icon-height: 16px;
  --btn-icon-width: 16px;
  --btn-padding-span: 0 4px;
  --btn-font-family: var(--dreem-app-small-font);
}
.common-btn.tini {
  --btn-font-size: 12px;
  --btn-font-weight: 400;
  --btn-height: 28px;
  --btn-min-width: 28px;
  --btn-padding: 0 6px;
  --btn-icon-height: 16px;
  --btn-icon-width: 16px;
  --btn-padding-span: 0 6px;
  --btn-font-family: var(--dreem-app-small-font);
}
.common-btn.mini {
  --btn-font-size: 12px;
  --btn-font-weight: 400;
  --btn-height: 22px;
  --btn-min-width: 22px;
  --btn-padding: 0 4px;
  --btn-icon-height: 14px;
  --btn-icon-width: 14px;
  --btn-padding-span: 0 4px;
  --btn-font-family: var(--dreem-app-small-font);
}
.common-btn.extra {
  --btn-font-size: 16px;
  --btn-font-weight: 500;
  --btn-height: 48px;
  --btn-min-width: 48px;
  --btn-padding: 0 12px;
  --btn-icon-height: 24px;
  --btn-icon-width: 24px;
  --btn-padding-span: 0 10px 1px 10px;
}
.common-btn.medium {
  --btn-font-size: 14px;
  --btn-font-weight: 500;
  --btn-height: 36px;
  --btn-min-width: 36px;
  --btn-padding: 0 8px;
  --btn-icon-height: 20px;
  --btn-icon-width: 20px;
  --btn-padding-span: 0 10px 1px 10px;
}
.common-btn.large {
  --btn-font-size: 14px;
  --btn-font-weight: 500;
  --btn-height: 40px;
  --btn-min-width: 40px;
  --btn-padding: 0 10px;
  --btn-icon-height: 20px;
  --btn-icon-width: 20px;
  --btn-padding-span: 0 10px 1px 10px;
}
.common-btn.no-transition {
  --btn-transition: none;
}
.common-btn.no-interaction {
  --btn-bg-color-hover: color-mix(in srgb, currentColor 10%, transparent);
  --btn-bg-color-active: color-mix(in srgb, currentColor 10%, transparent);
  --btn-cursor: default;
  --btn-icon-color-hover: color-mix(in srgb, currentColor 50%, transparent);
}
.common-btn.no-interaction.disable {
  --btn-cursor: not-allowed;
  --btn-opacity: 0.6;
}
.common-btn-separate {
  width: 2px;
  height: 35%;
  border-radius: 2px;
  background-color: color-mix(in srgb, currentColor 20%, transparent);
}
.common-btn.dim {
  --btn-color: color-mix(in srgb, currentColor 50%, transparent);
}
.common-btn.dim:hover {
  --btn-color: currentColor;
}
.common-btn.opacity-50 {
  --btn-opacity: 0.5;
}
.common-btn.opacity-50:hover {
  --btn-opacity: 1;
}
.common-btn.radius-2 {
  --btn-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-btn.radius-4 {
  --btn-radius: var(--dreem-app-element-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-btn.radius-base {
  --btn-radius: var(--dreem-app-base-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-btn.color-accent {
  --btn-color: var(--dreem-app-color-accent);
}
.common-btn.color-warning {
  --btn-color: var(--dreem-app-color-warning-dark);
}
.common-btn.color-danger {
  --btn-color: var(--dreem-app-color-danger);
}
.common-btn.bg-color-accent {
  --btn-color: #fff;
  --btn-bg-color: var(--dreem-app-color-accent);
  --btn-bg-color-hover: color-mix(in srgb, currentColor 20%, var(--dreem-app-color-accent));
  --btn-bg-color-active: color-mix(in srgb, currentColor 30%, var(--dreem-app-color-accent));
}
.common-btn.bg-color-accent.no-interaction {
  --btn-bg-color-hover: var(--dreem-app-color-accent);
  --btn-bg-color-active: var(--dreem-app-color-accent);
}
.common-btn.bg-color-invert {
  --btn-color: var(--dreem-app-background-layer-1);
  --btn-bg-color: var(--dreem-app-color);
  --btn-bg-color-hover: color-mix(in srgb, var(--dreem-app-color) 95%, var(--dreem-app-background-layer-1));
  --btn-bg-color-active: color-mix(in srgb, var(--dreem-app-color) 80%, var(--dreem-app-background-layer-1));
}
.common-btn.bg-color-invert.no-interaction {
  --btn-bg-color-hover: var(--dreem-app-color);
  --btn-bg-color-active: var(--dreem-app-color);
}
.common-btn.bg-invert-warning {
  --btn-color: white;
  --btn-bg-color: var(--dreem-app-color-warning-dark);
}
.common-btn.bg-color-warning {
  --btn-color: #fff;
  --btn-bg-color: var(--dreem-app-color-warning-dark);
  --btn-bg-color-hover: color-mix(in srgb, currentColor 20%, var(--dreem-app-color-warning-dark));
  --btn-bg-color-active: color-mix(in srgb, currentColor 30%, var(--dreem-app-color-warning-dark));
}
.common-btn.bg-color-warning.no-interaction {
  --btn-bg-color-hover: var(--dreem-app-color-warning-dark);
  --btn-bg-color-active: var(--dreem-app-color-warning-dark);
}
.common-btn.bg-color-danger {
  --btn-bg-color: var(--dreem-app-color-danger);
  --btn-bg-color-hover: color-mix(in srgb, currentColor 20%, var(--dreem-app-color-danger));
  --btn-bg-color-active: color-mix(in srgb, currentColor 30%, var(--dreem-app-color-danger));
}
.common-btn.bg-color-danger.no-interaction {
  --btn-bg-color-hover: var(--dreem-app-color-danger);
  --btn-bg-color-active: var(--dreem-app-color-danger);
}
.common-btn.bg-color-0 {
  --btn-bg-color: transparent;
  --btn-backdrop-filter: none;
}
.common-btn.bg-color-0.no-interaction {
  --btn-bg-color-hover: transparent;
  --btn-bg-color-active: transparent;
}
.common-btn.bg-color-30 {
  --btn-bg-color: color-mix(in srgb, currentColor 30%, transparent);
  --btn-bg-color-hover: color-mix(in srgb, currentColor 40%, transparent);
  --btn-bg-color-active: color-mix(in srgb, currentColor 50%, transparent);
}
.common-btn.bg-color-30.no-interaction {
  --btn-bg-color-hover: color-mix(in srgb, currentColor 30%, transparent);
  --btn-bg-color-active: color-mix(in srgb, currentColor 30%, transparent);
}
.common-btn.outline-accent {
  --btn-outline: 1px solid var(--dreem-app-color-accent);
}
.common-btn.outline-color-50 {
  --btn-outline: 1px solid color-mix(in srgb, currentColor 50%, transparent);
}
.common-btn.outline-color-30 {
  --btn-outline: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}body #CybotCookiebotDialog * {
  font-family: var(--dreem-app-font) !important;
}
body #CybotCookiebotDialog > *:not(.CybotCookiebotDialogContentWrapper) {
  display: none !important;
}
body #CybotCookiebotDialog #CybotCookiebotDialogPoweredbyLink {
  display: flex;
  align-items: flex-start;
}
body #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonAccept {
  background-color: var(--dreem-app-color-accent) !important;
  height: 36px !important;
  border-radius: 100px;
  border: none;
  outline: none;
  line-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
body #CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
}
body #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText {
  font-size: 12px;
  line-height: 16px;
  opacity: 0.5;
}.cf-loader-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cf-loader-container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: cf-loader-347586843 1s linear infinite;
}
@keyframes cf-loader-347586843 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}.stacked-indicators {
  display: none;
}

*[class*=MuiTooltip-popper] {
  pointer-events: none !important;
  z-index: var(--dreem-app-z-layer-30) !important;
  display: var(--res-tooltip-display, block) !important;
}
*[class*=MuiTooltip-popper].bg-blur *[class*=MuiTooltip-tooltip] {
  background-color: var(--common-context-menu-bg, color-mix(in srgb, var(--dreem-app-background-layer-6) 20%, transparent)) !important;
  backdrop-filter: var(--common-context-menu-backdrop-filter, blur(50px)) !important;
  color: var(--common-context-menu-color, var(--dreem-app-color)) !important;
  border-radius: var(--common-context-menu-radius, var(--dreem-app-block-radius)) !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset) !important;
  box-shadow: none !important;
  max-width: 300px !important;
}

*[class*=MuiAvatar-fallback] {
  display: none !important;
  background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
}

*[class*=MuiTooltip-tooltip] {
  color: var(--dreem-app-color) !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  max-width: 200px !important;
  font-family: var(--dreem-app-small-font) !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  border-radius: var(--dreem-app-element-radius) !important;
  background-color: var(--dreem-app-background-layer-5) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
  transition: none !important;
  margin: 2px !important;
  pointer-events: none !important;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}:root {
  --dreem-app-font: "Space Grotesk", sans-serif;
  --dreem-app-small-font: "Inter", sans-serif;
  --dreem-app-indicator-bg: #06060650;
  --dreem-app-color-accent: oklch(63.5% 0.184672 158.1);
  --dreem-app-color-warning: oklch(85.4% 0.161089 90.8);
  --dreem-app-color-warning-dark: oklch(0.76 0.15 91.09);
  --dreem-app-color-danger: oklch(69.9% 0.17149 20.6);
  --dreem-app-wrapper-padding: 15px;
  --dreem-app-wrapper-radius: 26px;
  --dreem-app-block-radius: 12px;
  --dreem-app-element-radius: 4px;
  --dreem-app-base-radius: 2px;
  --dreem-app-image-radius: 4px;
  --dreem-app-indicator-radius: 2px;
  --dreem-app-transition: 0.25s all cubic-bezier(0.25, 0.1, 0.25, 1);
  --dreem-studio-left-menu-display: flex;
  --dreem-studio-top-menu-display: none;
  --dreem-studio-main-layout-direction: row;
  --dreem-app-vertical-menu-width: 280px;
  --dreem-app-screen-header-height: 90px;
  --dreem-app-corner-shape-value: superellipse(1.2);
  --dreem-app-radius-step: 6px;
  --dreem-app-scrollbar-width: 0px;
  --dreem-app-outline-select-width: 2px;
  --dreem-app-default-ratio: 3/4;
  --dreem-app-backdrop-universel-overlay: url("/app/images/backdrop-blur.webp");
  --dreem-app-background: #060606;
  --dreem-app-background-layer-1: #060606;
  --dreem-app-background-layer-2: #121212;
  --dreem-app-background-layer-3: #1a1a1a;
  --dreem-app-background-layer-4: #2b2b2b;
  --dreem-app-background-layer-5: #414141;
  --dreem-app-background-layer-6: #5d5d5d;
  --dreem-app-background-image: color-mix(in srgb, currentColor 10%, transparent);
  --dreem-app-color: #fcfcfd;
  --dreem-app-skeleton-color: color-mix(in srgb, currentColor 15%, transparent);
  --dreem-app-z-layer-1: 1;
  --dreem-app-z-layer-2: 100;
  --dreem-app-z-layer-3: 200;
  --dreem-app-z-layer-4: 400;
  --dreem-app-z-layer-5: 500;
  --dreem-app-z-layer-6: 600;
  --dreem-app-z-layer-7: 700;
  --dreem-app-z-layer-8: 800;
  --dreem-app-z-layer-9: 900;
  --dreem-app-z-layer-10: 1000;
  --dreem-app-z-layer-20: 2000;
  --dreem-app-z-layer-30: 3000;
  --dreem-app-z-layer-100: 10000;
  --dreem-app-shadow-percentage: 0.35;
}

@supports (corner-shape: var(--dreem-app-corner-shape-value)) {
  :root {
    --dreem-app-wrapper-radius: calc(26px + var(--dreem-app-radius-step) / 2 + var(--res-radius-mobile-offset, 0px));
    --dreem-app-block-radius: calc(12px + var(--dreem-app-radius-step) / 2 + var(--res-radius-mobile-offset, 0px));
    --dreem-app-element-radius: calc(4px + var(--dreem-app-radius-step) / 2 + var(--res-radius-mobile-offset, 0px) / 2);
    --dreem-app-indicator-radius: calc(2px + var(--dreem-app-radius-step) / 3 + var(--res-radius-mobile-offset, 0px) / 2);
    --dreem-app-image-radius: calc(4px + var(--dreem-app-radius-step) / 2 + var(--res-radius-mobile-offset, 0px) / 2);
    --dreem-app-base-radius: calc(2px + var(--dreem-app-radius-step) / 3 + var(--res-radius-mobile-offset, 0px) / 2);
  }
  @media (max-width: 800px) {
    :root {
      --res-radius-mobile-offset: 2px;
    }
  }
}
:root[data-theme=dark] {
  --dreem-app-color: #fcfcfd;
  --dreem-app-skeleton-color: color-mix(in srgb, currentColor 15%, transparent);
  --dreem-app-background-image: color-mix(in srgb, currentColor 10%, transparent);
  --dreem-app-background-layer-1: #060606;
  --dreem-app-background-layer-2: #121212;
  --dreem-app-background-layer-3: #1a1a1a;
  --dreem-app-background-layer-4: #2b2b2b;
  --dreem-app-background-layer-5: #414141;
  --dreem-app-background-layer-6: #5d5d5d;
  --dreem-app-shadow-percentage: 0.35;
  --dreem-app-backdrop-universel-overlay: url("/app/images/backdrop-blur.webp");
}

:root[data-theme=light] {
  --dreem-app-color: #060606;
  --dreem-app-skeleton-color: #d9d9d9;
  --dreem-app-background-image: #d7d7d7;
  --dreem-app-background-layer-1: #eeeeee;
  --dreem-app-background-layer-2: #fcfcfc;
  --dreem-app-background-layer-3: #f0f0f0;
  --dreem-app-background-layer-4: #fff;
  --dreem-app-background-layer-5: #fff;
  --dreem-app-background-layer-6: #ffffff;
  --dreem-app-shadow-percentage: 0.15;
  --dreem-app-backdrop-universel-overlay: url("/app/images/backdrop-blur-light.webp");
}.parent-0 .show-on-hover-0 {
  display: none !important;
}
.parent-0 .opacity-on-hover-0 {
  opacity: 0 !important;
}
.parent-0:hover .show-on-hover-0 {
  display: flex !important;
}
.parent-0:hover .opacity-on-hover-0 {
  opacity: 1 !important;
}

.parent-1 .show-on-hover-1 {
  display: none !important;
}
.parent-1 .opacity-on-hover-1 {
  opacity: 0 !important;
}
.parent-1:hover .show-on-hover-1 {
  display: flex !important;
}
.parent-1:hover .opacity-on-hover-1 {
  opacity: 1 !important;
}

.parent-2 .show-on-hover-2 {
  display: none !important;
}
.parent-2 .opacity-on-hover-2 {
  opacity: 0 !important;
}
.parent-2:hover .show-on-hover-2 {
  display: flex !important;
}
.parent-2:hover .opacity-on-hover-2 {
  opacity: 1 !important;
}

.parent-3 .show-on-hover-3 {
  display: none !important;
}
.parent-3 .opacity-on-hover-3 {
  opacity: 0 !important;
}
.parent-3:hover .show-on-hover-3 {
  display: flex !important;
}
.parent-3:hover .opacity-on-hover-3 {
  opacity: 1 !important;
}

.parent-4 .show-on-hover-4 {
  display: none !important;
}
.parent-4 .opacity-on-hover-4 {
  opacity: 0 !important;
}
.parent-4:hover .show-on-hover-4 {
  display: flex !important;
}
.parent-4:hover .opacity-on-hover-4 {
  opacity: 1 !important;
}

.parent-5 .show-on-hover-5 {
  display: none !important;
}
.parent-5 .opacity-on-hover-5 {
  opacity: 0 !important;
}
.parent-5:hover .show-on-hover-5 {
  display: flex !important;
}
.parent-5:hover .opacity-on-hover-5 {
  opacity: 1 !important;
}

.parent-6 .show-on-hover-6 {
  display: none !important;
}
.parent-6 .opacity-on-hover-6 {
  opacity: 0 !important;
}
.parent-6:hover .show-on-hover-6 {
  display: flex !important;
}
.parent-6:hover .opacity-on-hover-6 {
  opacity: 1 !important;
}

.parent-7 .show-on-hover-7 {
  display: none !important;
}
.parent-7 .opacity-on-hover-7 {
  opacity: 0 !important;
}
.parent-7:hover .show-on-hover-7 {
  display: flex !important;
}
.parent-7:hover .opacity-on-hover-7 {
  opacity: 1 !important;
}

.parent-8 .show-on-hover-8 {
  display: none !important;
}
.parent-8 .opacity-on-hover-8 {
  opacity: 0 !important;
}
.parent-8:hover .show-on-hover-8 {
  display: flex !important;
}
.parent-8:hover .opacity-on-hover-8 {
  opacity: 1 !important;
}

.parent-9 .show-on-hover-9 {
  display: none !important;
}
.parent-9 .opacity-on-hover-9 {
  opacity: 0 !important;
}
.parent-9:hover .show-on-hover-9 {
  display: flex !important;
}
.parent-9:hover .opacity-on-hover-9 {
  opacity: 1 !important;
}

.parent-10 .show-on-hover-10 {
  display: none !important;
}
.parent-10 .opacity-on-hover-10 {
  opacity: 0 !important;
}
.parent-10:hover .show-on-hover-10 {
  display: flex !important;
}
.parent-10:hover .opacity-on-hover-10 {
  opacity: 1 !important;
}.common-pts-dialog {
  z-index: var(--cf-pts-dialog-z-index, 1401) !important;
}
.common-pts-dialog * {
  box-sizing: border-box;
}
.common-pts-paper {
  background-color: transparent !important;
  color: var(--cf-pts-paper-color, #fff) !important;
  font-size: var(--cf-pts-paper-font-size, 14px) !important;
  line-height: var(--cf-pts-paper-line-height, 20px) !important;
  font-weight: var(--cf-pts-paper-font-weight, 400) !important;
  font-family: var(--cf-pts-paper-font-family, inherit) !important;
  overflow: hidden !important;
  height: 100dvh !important;
  width: 100dvw !important;
  display: flex;
  flex-direction: column;
  position: relative;
}
.common-pts-backdrop {
  backdrop-filter: var(--cf-pts-backdrop-filter, blur(20px)) !important;
  background-color: var(--cf-pts-paper-bg, rgba(0, 0, 0, 0.5));
}
.common-pts-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.common-pts-btn-swipe {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: var(--cf-pts-btn-size, 44px);
  height: var(--cf-pts-btn-size, 44px);
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
  display: var(--cf-pts-btn-swipe-display, flex);
  align-items: center;
  justify-content: center;
  border: none;
  color: inherit;
  cursor: pointer;
  outline: 2px solid transparent;
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: var(--cf-pts-backdrop-filter, blur(5px));
}
.common-pts-btn-swipe:hover {
  background: var(--btn-bg-color-hover, color-mix(in srgb, currentColor 20%, transparent));
}
.common-pts-btn-swipe.next {
  right: var(--cf-pts-btn-offset-right, 25px);
}
.common-pts-btn-swipe.previous {
  left: var(--cf-pts-btn-offset-left, 25px);
}
.common-pts-icon-button {
  width: var(--cf-pts-btn-size, 44px);
  height: var(--cf-pts-btn-size, 44px);
  border-radius: 50%;
  background-color: var(--btn-bg-color, color-mix(in srgb, currentColor 10%, transparent));
  transition: all 0.3s ease-in-out;
  display: flex;
  outline: 2px solid transparent;
  align-items: center;
  justify-content: center;
  border: none;
  color: inherit;
  cursor: pointer;
  backdrop-filter: var(--cf-pts-backdrop-filter, blur(5px));
  pointer-events: all;
  flex-shrink: 0;
}
.common-pts-icon-button:hover {
  background: var(--btn-bg-color-hover, color-mix(in srgb, currentColor 20%, transparent));
}
.common-pts-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  height: var(--cf-pts-header-height, 70px);
  position: relative;
  z-index: 1;
  padding: 0 20px;
  pointer-events: none;
  --common-switch-backdrop-filter: blur(20px) brightness(0.8) saturate(2);
  --common-switch-bg: color-mix(in srgb, currentColor 10%, transparent);
  --common-switch-height: var(--res-pts-switch-height, 44px);
  --btn-backdrop-filter: blur(20px) brightness(0.8) saturate(2);
  --btn-height: 44px;
  --btn-min-width: 44px;
  --btn-font-size: 14px;
  --btn-font-weight: 500;
  --btn-padding: 0 10px;
  --btn-icon-height: 20px;
  --btn-icon-width: 20px;
  --btn-padding-span: 0 10px 1px 10px;
}
.common-pts-header-count {
  opacity: var(--cf-pts-header-count-opacity, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  padding: 10px 20px;
  width: calc(var(--cf-pts-btn-size, 44px) * 2);
  height: var(--cf-pts-btn-size, 44px);
  background-color: rgba(0, 0, 0, 0.136);
  backdrop-filter: var(--cf-pts-backdrop-filter, blur(5px));
  border-radius: 100px;
  pointer-events: all;
  user-select: none;
  flex-shrink: 0;
}
.common-pts-header-right, .common-pts-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: var(--res-pts-header-left-flex, 1);
  min-width: 0;
}
.common-pts-header-right {
  justify-content: flex-end;
}
.common-pts-header-center {
  display: flex;
  justify-content: center;
  flex: 1;
  min-width: 0;
  pointer-events: auto;
}
.common-pts-header-center-file-name {
  display: var(--cf-pts-header-filename-display, flex);
  align-items: center;
  justify-content: center;
  pointer-events: all;
  font-size: 13px;
  max-width: 100%;
  line-height: 16px;
  font-weight: 400;
  padding: 0px calc(var(--cf-pts-btn-size, 44px) / 2);
  height: var(--cf-pts-btn-size, 44px);
  min-width: 50px;
  background-color: rgba(0, 0, 0, 0.136);
  backdrop-filter: var(--cf-pts-backdrop-filter, blur(5px));
  border-radius: 100px;
  font-family: var(--dreem-app-small-font);
}
.common-pts-header-center-file-name-text {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.common-pts-header-center-file-name-text .common-ellipsis-text {
  font-size: 14px;
}
.common-pts-image-wrapper {
  display: flex;
  width: auto;
  cursor: var(--cf-pts-image-wrapper-cursor, default);
}
.common-pts-item {
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  padding: var(--cf-pts-image-item-padding, 0);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--cf-pts-image-item-transition, var(--dreem-app-transition));
  outline: none !important;
}
.common-pts-item img {
  height: auto;
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
  transition: var(--cf-pts-image-img-transition, transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1));
}
.common-pts-item video {
  border-radius: var(--dreem-app-block-radius);
  corner-shape: var(--dreem-app-corner-shape-value, unset);
}
.common-pts-item-zooming-in {
  --cf-pts-image-wrapper-cursor: grab;
}
.common-pts-item-wheeling {
  --cf-pts-image-wrapper-cursor: grab;
}
.common-pts-item-panning {
  --cf-pts-image-wrapper-cursor: grabbing;
}
.common-pts-item-zooming-out {
  --cf-pts-image-wrapper-cursor: zoom-in;
}
.common-pts-content {
  flex-grow: 1;
  position: absolute;
  height: var(--cf-pts-content-height, 100%);
  width: var(--cf-pts-content-width, 100%);
  transition: var(--cf-pts-content-transition, 0.3s all cubic-bezier(0.4, 0, 0.2, 1));
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overflow: hidden;
  align-self: center;
}
.common-pts-footer {
  width: 100%;
  height: var(--cf-pts-footer-height, 70px);
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  user-select: none;
  padding: 0 20px;
  pointer-events: none;
}*:focus-visible {
  outline: none;
}
@supports (scrollbar-color: auto) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 10%, transparent) transparent;
  }
}
* ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: transparent;
}
* ::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 6px;
  background-clip: padding-box;
  border: 3px solid transparent;
}
* ::-webkit-scrollbar-track {
  background-color: transparent;
}

body {
  font-family: var(--dreem-app-font);
  box-sizing: border-box;
  overflow: hidden;
  --cf-pts-backdrop-filter: blur(20px) brightness(0.8) saturate(2);
  --cf-pts-dialog-z-index: var(--dreem-app-z-layer-20);
  --cf-pts-paper-font-family: var(--dreem-app-small-font);
}
body.safari {
  --msg-images-display-output: grid;
  --msg-images-width: 100%;
  --msg-images-wp-width-output: 100%;
  --msg-item-ratio: none;
  --canvas-fallback-ratio: 1/1;
  --canvas-fallback-object-fit: contain;
}
body:has(.turn-on-loading) #dreem-loading {
  display: flex;
}
body:has(.impersonation-banner) .app-container {
  padding-top: 20px;
}

.app-container {
  position: fixed;
  z-index: var(--dreem-app-z-layer-1);
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background-color: var(--dreem-app-background-layer-1);
  color: var(--dreem-app-color);
  display: flex;
  flex-direction: column;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--dreem-app-font);
}
.app-container .main-layout {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  flex-direction: var(--res-main-layout-direction, row);
}
.app-container .main-layout .main-content {
  flex: 1;
  min-height: 0;
  height: 100%;
  min-width: 0;
  display: flex;
}

#dreem-loading {
  width: 100dvw;
  height: 100dvh;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  color: var(--dreem-app-color-accent);
}