@import url("https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css");

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  /* letter-spacing: 1px; */
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Add accessible line-height */
/* 4. Improve text rendering */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* overflow: clip; */
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
  resize: none;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

/* General Styles */
html,
body {
  margin: 0;
  height: 100%;
  max-height: 100%;
  font-family: Arial, sans-serif;
}
body {
  background-color: #f5f5f5;
  background-image: url("../../img/global/body-bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* scrollbar */
* {
  scroll-behavior: smooth;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

* {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* .header,
.footer {
  background-color: #ffffff;
  padding: 15px;
  text-align: center;
}

.header {
  border-bottom: 1px solid #e0e0e0;
}

.footer {
  border-top: 1px solid #e0e0e0;
} */
header.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  max-height: 100%;
}

header.header img.ueni-img {
  width: 90%;
  max-width: 40px;
  margin-inline: auto;
  position: absolute;
  bottom: 1.25rem;
}

header.header .loading-app-img {
  width: 100%;
  max-width: 140px;
  margin-inline: auto;
}

header.header .loading-error-msg[aria-hidden="true"],
header.header .loading-app-img[aria-hidden="true"],
body:not(:has(.main-app[aria-hidden="true"])) header.header,
header.header:has(.loading-app-img[aria-hidden="false"]) .loading-error-msg {
  display: none;
}

header.header:has(.loading-app-img[aria-hidden="true"]) .loading-error-msg,
header.header .loading-error-msg {
  margin-inline: 1.5rem;
  display: block;
  text-align: center;
  display: none;
}

.main-app {
  padding: 20px;
  max-height: 100%;
  /* overflow: clip; */
  display: none !important;
}

.main-app[aria-hidden="true"] {
  display: none;
}

.app-body-header {
  text-align: center;
  margin-bottom: 20px;
}

.app-title {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

.app-subtitle {
  max-width: 540px;
  margin-inline: auto;
}

.app-subtitle p {
  font-size: 14px;
  color: #666666;
  margin: 5px 0;
}

.app-body-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto 10px auto;
}

.app-card {
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: default;
  user-select: none;
  border: 2px solid white;
}

.app-card[data-locked="false"] {
  transition: box-shadow 0.3s, background-color 0.2s, border-color 0.3s;
  cursor: pointer;
}

.app-card[data-locked="false"]:hover,
.app-card[data-locked="false"]:focus {
  background-color: #fcfcfc;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
  border-color: #dc493a66;
  transition: box-shadow 0.4s, background-color 0.3s, border-color 15s;
}

.app-card[data-locked="false"]:active {
  background-color: #fdfdfd;
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s, background-color 0.3s, border-color 15s;
}

.app-card[data-locked="true"] {
  opacity: 0.4;
  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.05);
}

.app-card-icon {
  position: absolute;
  width: 18px;
  height: 18px;
  top: -4px;
  right: -4px;
}

.app-card-icon > i.fi {
  position: absolute;
  top: 0;
  font-size: 18px;
}

.app-card-icon > i.fi.fi-sr-lock {
  /* color: #336699; */
  color: #1b73f0;
  opacity: 1;
}

.app-card-icon > i.fi.fi-sr-unlock {
  color: #14ccae;
  display: none;
}

[data-locked="false"] .app-card-icon > i.fi.fi-sr-lock {
  display: none;
}

[data-locked="true"] .app-card-icon > i.fi.fi-sr-unlock {
  display: none;
}

/* https://www.svgrepo.com/collection/solar-bold-icons/5 */
.app-card-background {
  border-radius: 8px;
  background: var(--card-background, url(""));
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: 170% 170%;
  opacity: 17.5%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

[data-bucket="basics"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/basics-toon.png");
}

[data-bucket="your_business"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/business-toon.png");
}

[data-bucket="your_vision"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/vision-toon.png");
}

[data-bucket="your_offerings"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/offerings-toon.png");
}

[data-bucket="your_style"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/style-toon.png");
  /* transform: scaleX(-1);
  background-position: 220% -70%; */
}

[data-bucket="features"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/features-toon.png");
}

[data-bucket="growth"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/growth-toon.png");
}

[data-bucket="your_files"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/uploads-toon.png");
}

[data-bucket="preview"] .app-card-background {
  transition: background-size 1s, background-position 0.5s, opacity 1s, filter 1s;
}

[data-bucket="preview"] .app-card-background {
  --card-background: url("./../../img/cards/bg-svg/preview-toon.png");
}

[data-locked="false"][data-bucket="preview"] .app-card-background {
  /* --card-background: url("./img/cards/preview.svg"); */
  background-size: 50%;
  background-position: 50% 50%;
  opacity: 0.8;
  filter: hue-rotate(50deg);
}

.app-card-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 3;
}

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

.app-card-content,
.app-card-content span {
  width: 100%;
}

.app-card-content span {
  text-align: center;
  font-size: clamp(12px, calc(0.45vw + 12px), 18px);
  /* font-size: clamp(2px, 0.45vw, 180px); */
  font-weight: bold;
  color: #333333;
}

.app-card-content img {
  width: calc(100% - 20px);
  max-width: 50px;
}

/* .app-card[data-locked="true"] .app-card-stars {
  display: none;
} */

.app-card-stars {
  position: absolute;
  top: 16%;
}

.page-header-stars {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}

.app-card-stars .fi-sr-star,
.page-header-stars .fi-sr-star {
  color: #333;
  opacity: 7.5%;
}

.app-card-stars .fi-sr-star:before {
  text-shadow: 0px 0px 1px #6e2407;
}

.page-header-stars .fi-sr-star {
  font-size: 10px;
  display: flex;
}

[data-locked="false"][data-stars="1"] .app-card-stars .star1,
[data-locked="false"][data-stars="2"] .app-card-stars .star1,
[data-locked="false"][data-stars="2"] .app-card-stars .star2,
[data-locked="false"][data-stars="3"] .app-card-stars .star1,
[data-locked="false"][data-stars="3"] .app-card-stars .star2,
[data-locked="false"][data-stars="3"] .app-card-stars .star3,
[data-locked="false"][data-stars="4"] .app-card-stars .star1,
[data-locked="false"][data-stars="4"] .app-card-stars .star2,
[data-locked="false"][data-stars="4"] .app-card-stars .star3,
[data-locked="false"][data-stars="4"] .app-card-stars .star4,
[data-locked="false"][data-stars="5"] .app-card-stars .star1,
[data-locked="false"][data-stars="5"] .app-card-stars .star2,
[data-locked="false"][data-stars="5"] .app-card-stars .star3,
[data-locked="false"][data-stars="5"] .app-card-stars .star4,
[data-locked="false"][data-stars="5"] .app-card-stars .star5 {
  color: #1b73f0;
  opacity: 100%;
}

[data-locked="false"][data-stars="1"] .app-card-stars .star1,
[data-locked="false"][data-stars="2"] .app-card-stars .star2,
[data-locked="false"][data-stars="3"] .app-card-stars .star3,
[data-locked="false"][data-stars="4"] .app-card-stars .star4,
[data-locked="false"][data-stars="5"] .app-card-stars .star5 {
  font-size: 18px;
}

[data-stars="1"] .page-header-stars .star1,
[data-stars="2"] .page-header-stars .star1,
[data-stars="2"] .page-header-stars .star2,
[data-stars="3"] .page-header-stars .star1,
[data-stars="3"] .page-header-stars .star2,
[data-stars="3"] .page-header-stars .star3,
[data-stars="4"] .page-header-stars .star1,
[data-stars="4"] .page-header-stars .star2,
[data-stars="4"] .page-header-stars .star3,
[data-stars="4"] .page-header-stars .star4,
[data-stars="5"] .page-header-stars .star1,
[data-stars="5"] .page-header-stars .star2,
[data-stars="5"] .page-header-stars .star3,
[data-stars="5"] .page-header-stars .star4,
[data-stars="5"] .page-header-stars .star5 {
  color: #eee;
  opacity: 1;
  font-size: 11px;
}

.app-main-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.bmw-button {
  width: 100%;
  max-width: 540px;
  background-color: #1760dd;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
  position: relative;
  margin-bottom: 10px;
}

.bmw-button:hover,
.bmw-button:focus {
  transition: background-color 0.3s, box-shadow 0.4s;
  background-color: rgb(249, 63, 6);
  box-shadow: 0 0 6px 1px rgba(249, 63, 6, 0.35);
}

.bmw-button:active {
  transition: background-color 0.2s;
  background-color: #1760dd;
}

.bmw-button[data-locked="true"],
.bmw-button[data-locked="true"]:hover,
.bmw-button[data-locked="true"]:focus,
.bmw-button[data-locked="true"]:active {
  cursor: default;
  background-color: #ddd;
  box-shadow: unset;
  color: #ccc;
}

.bmw-button[data-locked="true"]::before {
  content: "Not Enough Data To Build Your Website";
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 3px 6px;
  line-height: 1;
  background: #1b73f0;
  color: white;
  font-size: 13px;
  border-radius: 4px;
  font-weight: 400;
}

/*# Bucket Page // FORM PAGE */
.bucket-page {
  --outer-padding: 20px;
  --bucket-window-size: 540px;
  position: fixed;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  height: calc(100% - var(--outer-padding));
  width: calc(100% - var(--outer-padding));
  max-width: var(--bucket-window-size);
  border-radius: 6px;
  /* box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.2); */
  margin-left: auto;
  background: #fbfbfb;
  /* background-image: linear-gradient(135deg, rgba(250, 250, 250, 1) 0%, #00a5dc 100%);
  background-image: url("../../img/global/bucket-bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */

  /* -- */
  --bucket-header-height: 7.5rem;
  --bucket-buttons-height: 0rem;
  --bucket-footer-height: 3rem;
  z-index: 100;
  /* transition: inset 0.3s, transform 0.3s; */
  transition: width 0.3s, height 0.3s;
  overflow: clip;
  /* transition-delay: 1s; */
  /* transition: inset 0.5s, transform 0.5s; */
  --loading-text: "Loading...";
  --loading-text-fallback: "Loading...";
}

.bucket-page.with-buttons,
.bucket-page[data-bucket="Basics"].basics-loaded {
  /* --bucket-buttons-height: 3rem; */
}

/* .bucket-page.show-buttons {
  --bucket-buttons-height: 3rem;
} */

/* .bucket-page[data-loading="true"]::before {
  content: var(--loading-text, var(--loading-text-fallback));
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 58px;
  color: white;
  position: absolute;
  background: rgba(27, 68, 141, 0.9);
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1000;
  font-size: 1.125rem;
  font-weight: 400;
}

.bucket-page[data-loading="true"]::after {
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\f455";

  display: flex;
  justify-content: center;
  color: #5cb5fe;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  z-index: 1000;
  font-size: 6rem;
  transform: translateY(-3rem);
} */

.bucket-page:not([data-loading="true"]) .bucket-loader {
  display: none;
}

.bucket-page[data-loading="true"] .bucket-loader {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  position: absolute;

  background: rgba(21, 43, 86, 0.9);
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1000;
}

@keyframes bucketLoaderSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.bucket-page[data-loading="true"] .bucket-loader > i.fi {
  width: 6rem;
  height: 6rem;
  color: #5cb5fe;
  aspect-ratio: 1 / 1;
  animation: bucketLoaderSpin 1s linear infinite;
  transform-origin: center;
}

.bucket-page[data-loading="true"] .bucket-loader > i.fi::before {
  font-size: 6rem;
}

.bucket-page[data-loading="true"] .bucket-loader > .loader-text {
  font-size: 1.125rem;
  font-weight: 400;
  color: white;
  text-align: center;
}

.bucket-page[data-loading="true"] .bucket-loader > .loader-text::before {
  content: var(--loading-text, var(--loading-text-fallback));
}

.page-menu {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
  --header-height: 6rem;
  --disappearance-duration: 0.4s;
}

.page-menu .page-menu-background {
  transition: opacity var(--disappearance-duration) ease-out;
  height: 100%;
  width: 100%;
  background: rgba(21, 43, 86, 0.9);
  flex-direction: row-reverse;
  opacity: 0;
  display: flex;
}

.page-menu .page-menu-background .page-menu-content {
  transition: transform 0.6s ease-out;
  max-width: 16.5rem;
  width: 100%;
  background: #eff8ff;
  height: 100%;
  transform: translateX(110%);
}

.page-menu[aria-hidden="false"] .page-menu-background {
  opacity: 1;
}

.page-menu[aria-hidden="false"] .page-menu-background .page-menu-content {
  transform: translateX(0);
}

.page-menu .menu-header {
  height: var(--header-height);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 2px 22px 1rem 1rem;
}

.page-menu .menu-header > i.fi {
  font-size: 1.5rem;
  cursor: pointer;
}

.page-menu .menu-items {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100% - var(--header-height));
}

.page-menu .menu-item {
  width: 100%;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  user-select: none;
}

.page-menu .menu-item:hover,
.page-menu .menu-item:focus {
  background-color: #daeeff;
}

.page-menu .menu-item:active,
.page-menu .menu-item[data-type="reset"].deleting {
  transition: background-color 0.1s ease;
  background-color: #bde2ff;
}

.page-menu .menu-item i {
  display: flex;
  font-size: 1.5rem;
}

.page-menu .menu-item span {
  line-height: 1;
  font-size: 18px;
  font-weight: 500;
}

.page-menu .menu-item[data-type="reset"] .fi-sr-refresh {
  transition: transform 0.5s ease;
}

.page-menu .menu-item[data-type="reset"]:active .fi-sr-refresh,
.page-menu .menu-item[data-type="reset"].deleting .fi-sr-refresh {
  transform: rotate(180deg);
}

.page-header,
.page-main,
.page-button-container,
.page-footer,
.page-header-icons,
.inner-bucket {
  --main-dimension-transition-speed: 1s;
  width: 100%;
  transition: height var(--main-dimension-transition-speed), width var(--main-dimension-transition-speed);
}

.page-header,
.page-main,
.page-button-container,
.page-footer {
  width: 100%;
}

/* .page-header-icons > .fi-sr-cross {
  position: absolute;
  right: 1.5rem;
  cursor: pointer;
}

.page-header-icons > .fi-rr-cloud-share,
.page-header-icons > .fi-sr-rotate-right {
  position: absolute;
  left: 1.5rem;
}

.page-header-icons > .fi-rr-cloud-share {
  cursor: pointer;
}

.page-header-icons > .fi-sr-rotate-right {
  opacity: 0;
  transform: scale(0);
}

.page-header-icons[data-saving="true"] > .fi-rr-cloud-share {
  display: none;
}
.page-header-icons[data-saving="true"] > .fi-sr-rotate-right {
  display: flex;
  animation: rotate-saving-icon 2s linear infinite;
}

.page-header:has(.page-header-icons.buckets) {
  padding: 1rem;
}

.page-header-icons.buckets {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  top: unset;
  transform: unset;
  height: auto;
  max-height: 100%;
}

.page-header-icons.buckets .bucket-top-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  overflow: hidden;
}

.page-header-icons.buckets .bucket-top-icon.arrow {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
}

.page-header-icons.buckets .bucket-top-icon.arrow > img {
  width: 100%;
  max-width: 40px;
}

.page-header-icons.buckets .bucket-top-icon.end {
  grid-column: 9;
}

.page-header-icons.buckets .bucket-top-icon > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
} */

@keyframes rotate-saving-icon {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate-saving-icon {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.page-header-icons[data-saving="true"] > .fi-sr-rotate-right {
  -webkit-animation: rotate-saving-icon 2s linear infinite;
  animation: rotate-saving-icon 2s linear infinite;
}

/* .page-header-icons > .fi:hover,
.page-header-icons > .fi:focus {
  text-shadow: 0px 0px 4px rgba(230, 76, 15, 0.9);
} */

.page-header-icons > .fi:active {
  transform: scale(0.975);
}

.page-header {
  height: var(--bucket-header-height);
  background: transparent;
  /* padding-block: 1rem; */
  margin-top: var(--margin-top);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #daeeff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
}

.page-header .page-header-top,
.page-header .page-header-bottom {
  flex: 50%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.page-header .page-header-top {
  justify-content: flex-end;
  padding-bottom: 2px;
}

.page-header .page-header-bottom {
  justify-content: flex-start;
}

.page-header h2 {
  color: #1e1e1e;
  text-align: center;
  line-height: 1;
  font-size: 22px;
  font-weight: 600;
  margin-inline: calc(1.25rem + 40px);
}

.page-header-icons {
  position: absolute;
  bottom: 4px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-inline: 1.25rem;
  align-items: center;
}

.page-header-icons > .fi {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5cb5fe;
  font-size: 1.75rem;
  transition: transform 0.1s;
  cursor: pointer;
}

.page-header-icons > .fi:last-child {
  color: #152b56;
}

.page-header-icons > .fi.fi-rr-cloud {
  transform: scaleX(111%);
  position: relative;
  color: transparent;
}

.page-header-icons > .fi.fi-rr-cloud::after {
  position: absolute;
  font-family: uicons-bold-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\fb38";
  font-size: 12px;
  top: 11px;
}

.page-header-icons > .fi.fi-rr-cloud.saving::after {
  content: "\f6a5";
  transform: scaleY(111%);
  background-image: conic-gradient(from 16deg, #daeeff, #1a4db3);
  background-clip: text;
  color: transparent;
  animation: bucketLoaderSpin 1s linear infinite;
  top: 0;
  font-size: 1.25rem;
}

.page-header .page-header-bottom .step-pills {
  display: flex;
  gap: 3px;
  padding-top: 8px;
  padding-inline: 70px;
  --pill-radius: 6px;
  --bucket-completion: 0%;
}

.page-header .page-header-bottom .step-pills [class^="step"]:first-child {
  border-top-left-radius: var(--pill-radius);
  border-bottom-left-radius: var(--pill-radius);
}

.page-header .page-header-bottom .step-pills [class^="step"]:last-child {
  border-top-right-radius: var(--pill-radius);
  border-bottom-right-radius: var(--pill-radius);
}

.page-header .page-header-bottom .step-pills [class^="step"] {
  background: #90d0ff;
  background: linear-gradient(90deg, #3695fb var(--bucket-completion), #90d0ff var(--bucket-completion));
  height: 10px;
  flex: 1;
  border-radius: var(--pill-radius);
}

.page-header .page-header-bottom .step-pills [class^="step"][data-active="false"] {
  background: rgba(189, 226, 255, 0.8);
}

.page-header .page-header-bottom .step-pills [class^="step"][data-active="true"] {
  border: 1px solid #1860dd;
  box-shadow: 0px 0px 4px -1px #1b448d;
}

.page-header .page-header-bottom .step-pills [class^="step"][data-active="previous"] {
  cursor: pointer;
}

.page-header .page-header-bottom .step-counter {
  display: flex;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  font-size: 12px;
  font-weight: 500;
  margin-top: 1rem;
}

.page-header .page-header-bottom .step-counter * {
  user-select: none;
  cursor: default;
}

.page-main {
  padding: 0.75rem;
  height: calc(100% - var(--bucket-header-height) - var(--bucket-buttons-height) - var(--bucket-footer-height));
  overflow: hidden;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 10px; */
  gap: 5px;
  max-width: var(--bucket-window-size);
  margin-inline: auto;
  padding-block: 0;
  /* padding-top: 1.5rem; */
  overscroll-behavior: contain;
}

.page-main:has(.items-confirmation-container.shown) {
  padding-top: 0.75rem;
}

[data-bucket="Basics"] .page-main {
  overflow-y: scroll;
  padding: 1.5rem calc(0.75rem - 8px) 0.75rem 0.75rem;
}

.page-main[data-loading="true"]::before {
  content: "";
  position: absolute;
  top: var(--header-adj-height);
  left: 0;
  z-index: 100;
  width: 100%;
  height: calc(100% - var(--header-adj-height) - var(--buttons-adj-height) - var(--footer-adj-height));
  background-color: #f7f8f7;
  background-image: url("./../../img/global/loading.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20%;
}

.page-button-container {
  height: var(--bucket-buttons-height);
  max-height: 20%;
  background: #1b73f0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  overflow: hidden;
  gap: 10px;
  padding-inline: 10px;
  box-shadow: 0px 0px 15px -3px rgba(27, 115, 240, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.page-button-container .button {
  min-width: 90px;
  width: 100%;
  max-width: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--bucket-buttons-height);
  height: calc(var(--bucket-buttons-height) - 20px);
  max-height: 3rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.4s ease;
}

.page-button-container .button.reset {
  background: #363020;
  color: white;
  grid-column: 1;
}

.page-button-container .button.confirm {
  display: none !important;
  background: white;
  color: #1760dd;
  grid-column: 2;
}

.bucket-page:not(.with-buttons) .page-button-container .button {
  height: 0px;
  font-size: 0.1px;
}

.page-button-container .button:active {
  min-width: 116px;
  width: 100%;
  max-width: 192px;
  box-shadow: unset;
}

.page-button-container .button.reset:hover,
.page-button-container .button.reset:focus {
  background: hsl(44, 26%, 15%);
  box-shadow: 0 2px 6px 2px hsla(45, 26%, 50%, 0.35);
}

.page-button-container .button.reset:active {
  background: hsl(44, 26%, 19%);
}

.page-button-container .button.confirm:hover,
.page-button-container .button.confirm:focus {
  background: hsl(17, 88%, 99%);
  box-shadow: 0 2px 6px 2px hsl(0deg 0% 99% / 35%);
}

.page-button-container .button.confirm:active {
  background: white;
}

.bucket-page.can-confirm .page-button-container .confirm {
  display: flex !important;
}

.page-footer {
  height: var(--bucket-footer-height);
  max-height: 15%;
  background: #1b73f0;
  position: inherit;
  z-index: 101;
}

.bucket-page .page-footer {
  --nav-width: 179px;
  display: grid;
  /* grid-template-columns: var(--nav-width) minmax(var(--nav-width), 1fr) var(--nav-width); */
  grid-template-columns: fit-content(75px) minmax(var(--nav-width), 1fr) fit-content(75px);
  transition: grid-template-columns 0.5s;
}

.bucket-page .page-footer .footer-mid {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bucket-page .page-footer .footer-mid .button {
  min-width: 90px;
  width: fit-content;
  max-width: 180px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  height: 30px;
  max-height: 3rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.4s ease;
  background: #fef1ec;
  color: #1b73f0;
}

.bucket-page .page-footer .footer-mid .button.reset,
.bucket-page .page-footer .footer-mid .button.overview {
  min-width: 30px;
  width: 30px;
  overflow: hidden;
  background: transparent;
  display: none;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.bucket-page .page-footer .footer-mid .button.overview {
  width: fit-content;
  background-color: #ecf1fe;
  padding: 4px 8px;
}

.bucket-page.with-buttons .page-footer .footer-mid .button.reset {
  display: flex;
}

.bucket-page .page-footer .footer-mid .button.reset > .fi,
.bucket-page .page-footer .footer-mid .button.overview > .fi {
  display: flex;
  font-size: 1.5rem;
  transform: rotate(0);
  color: #ecf1fe;
  transition: transform 1s;
}

.bucket-page .page-footer .footer-mid .button.overview > .fi {
  color: #ea7317;
  font-size: 1rem;
}

.bucket-page .page-footer .footer-mid .button.reset > .button-text-wrapper {
  transform: translateY(12px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 5px;
  width: 0px;
  overflow: hidden;
  display: none;
  transition: width 0.8s ease, transform 0.3s ease;
}

.bucket-page .page-footer .footer-mid .button.overview > .button-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 5px;
  color: #ea7317;
  font-size: 15px;
}

.bucket-page .page-footer .footer-mid .button.overview > .button-text-wrapper.submit-now {
  margin-left: 0;
}

.bucket-page .page-footer .footer-mid .button.overview:has(> .submit-now) {
  background-color: #1e07ad;
  padding: 8px 16px;
}

.bucket-page .page-footer .footer-mid .button.overview:has(> .submit-now) > .button-text-wrapper.submit-now {
  color: #f3f3f3;
  font-size: 18px;
  font-weight: 500;
}

.bucket-page .page-footer .footer-mid .button.reset.deleting > .button-text-wrapper {
  transform: translateY(-12px);
  font-size: 1rem;
}

.bucket-page .page-footer .footer-mid .button.reset:hover > .button-text-wrapper,
.bucket-page .page-footer .footer-mid .button.reset.deleting > .button-text-wrapper,
.bucket-page .page-footer .footer-mid .button.overview:hover > .button-text-wrapper {
  width: fit-content;
  display: block;
}

.bucket-page .page-footer .footer-mid .button.reset .validation-text {
  width: 2px;
  overflow: hidden;
  transition: width 0.3s ease;
}

.bucket-page .page-footer .footer-mid .button.reset.deleting .validation-text {
  width: fit-content;
}

.bucket-page .page-footer .footer-mid .button.reset:hover > .fi {
  color: #3695fb;
}

.bucket-page .page-footer .footer-mid .button.reset.deleting > .fi,
.bucket-page .page-footer .footer-mid .button.reset:hover > .fi,
.bucket-page .page-footer .footer-mid .button.reset:focus > .fi,
.bucket-page .page-footer .footer-mid .button.reset:active > .fi {
  font-size: 1.25rem;
  transform: rotate(112.5deg);
}

.bucket-page .page-footer .footer-mid .button.reset.deleting > .fi {
  transform: rotate(292.5deg);
}

.bucket-page .page-footer .footer-mid .button.reset.deleting > .fi {
  color: #fef1ec;
}

.bucket-page .page-footer .footer-mid .button:active {
  box-shadow: unset;
}

.bucket-page .page-footer .footer-mid .button.reset:hover,
.bucket-page .page-footer .footer-mid .button.reset:focus,
.bucket-page .page-footer .footer-mid .button.reset.deleting {
  background: #dbeeff;
  box-shadow: 0 2px 6px 0px hsla(208, 100%, 93%, 0.1);
  width: 90px;
}

.bucket-page .page-footer .footer-mid .button.reset.deleting {
  background: #1760dd;
  color: #ecf1fe;
}

.bucket-page .page-footer .footer-mid .button.reset:active {
  background: #ecf1fe;
}

.bucket-page .page-footer .footer-mid .button.reset:active,
.bucket-page .page-footer .footer-mid .button.reset:active > .fi {
  color: #1760dd;
}

.bucket-page .page-footer .footer-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  overflow: hidden;
  padding: 5px 10px;
  margin-block: auto;
  height: 100%;
  width: 100%;
  user-select: none;
  transition: border-color 0.7s ease, border-radius 0.5s ease;
  color: #fef5f1;
  cursor: pointer;
  border-top: 1px solid transparent;
  min-width: 106px;
}

.bucket-page .page-footer .footer-nav.left-back {
  justify-content: flex-start;
  border-right: 1px solid transparent;
}

.bucket-page .page-footer .footer-nav.right-next {
  justify-content: flex-end;
  border-left: 1px solid transparent;
}

.bucket-page.with-buttons .page-footer .footer-nav.left-back {
  border-top-right-radius: 6px;
}

.bucket-page .page-footer .footer-nav.left-back > span {
  text-align: left;
}

.bucket-page.with-buttons .page-footer .footer-nav.right-next {
  border-top-left-radius: 6px;
}

.bucket-page .page-footer .footer-nav.right-next > span {
  text-align: right;
}

.bucket-page .page-footer .footer-nav > img {
  object-fit: contain;
  max-width: 20px;
}

.bucket-page .page-footer .footer-nav > i.fi {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bucket-page .page-footer .footer-nav > span {
  display: block;
  width: 0px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.5s ease;
}

.bucket-page .page-footer .footer-nav:hover,
.bucket-page .page-footer .footer-nav:focus {
  background: rgba(255, 255, 255, 0.075);
  /* border-color: rgba(254, 245, 241, 0.25); */
}

.bucket-page .page-footer .footer-nav:active {
  background: rgba(255, 255, 255, 0.125);
}

.bucket-page:has(.items-confirmation-container.shown) .footer-nav.right-next {
  visibility: hidden;
}

/* .bucket-page .page-footer .footer-nav:hover > span,
.bucket-page .page-footer .footer-nav:focus > span {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.bucket-page .page-footer:has(.footer-nav.left-back:hover),
.bucket-page .page-footer:has(.footer-nav.left-back:focus) {
  grid-template-columns: fit-content(var(--nav-width)) minmax(var(--nav-width), 1fr) fit-content(75px);
}

.bucket-page .page-footer:has(.footer-nav.right-next:hover),
.bucket-page .page-footer:has(.footer-nav.right-next:focus) {
  grid-template-columns: fit-content(75px) minmax(var(--nav-width), 1fr) fit-content(var(--nav-width));
} */

.bucket-page .page-footer .footer-nav > span {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.bucket-page .page-footer:has(.footer-nav.left-back) {
  grid-template-columns: auto 1fr auto;
}

.bucket-page .preview-page,
.bucket-page .help-page {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: white;
  transition: transform 1s ease-in-out;
  --preview-header-height: 4rem;
  --preview-bucket-top-adjustment: 1.25rem;
  /* overflow-y: auto; */
  box-sizing: content-box;
  overflow: overlay;
  user-select: none;
}

.bucket-page .help-page {
  z-index: 1000;
}

.bucket-page .preview-page .simplebar-scrollbar::before,
.bucket-page .help-page .simplebar-scrollbar::before {
  background-color: #0e1b53;
}

/* Standard scrollbar properties for Firefox */
.bucket-page .preview-page,
.bucket-page .help-page {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; /* 15% opacity */
}

.bucket-page .preview-page[aria-hidden="true"] {
  /* transition: transform 1s ease-in-out; */
  transform: translateX(-560px);
}

.bucket-page .help-page[aria-hidden="true"] {
  /* transition: transform 1s ease-in-out; */
  transform: translateY(100%);
}

.bucket-page .preview-page .preview-header,
.bucket-page .help-page .help-header {
  width: 100%;
  height: var(--preview-header-height);
  background: #0e1b53;
  display: flex;
  justify-content: space-between;
  padding: 1.25rem;
  color: white;
  z-index: 1100;
  position: sticky;
  top: 0;
}

.bucket-page .preview-page .preview-header > .ueni-img,
.bucket-page .help-page .help-header > .ueni-img {
  filter: invert(1);
  width: 24px;
  height: 24px;
}

.bucket-page .preview-page .preview-header > i.fi,
.bucket-page .help-page .help-header > i.fi {
  font-size: 1.5rem;
  display: flex;
  cursor: pointer;
}

.bucket-page .preview-page .preview-main,
.bucket-page .help-page .help-main {
  background: rgba(14, 27, 83, 1);
  /* background: repeating-radial-gradient(circle at 0 0, transparent 0, #ffffff11 21px),
    linear-gradient(128deg, rgba(31, 61, 185, 1) 0%, rgba(14, 27, 83, 1) 100%); */
  background: linear-gradient(128deg, rgba(31, 61, 185, 1) 0%, rgba(14, 27, 83, 1) 100%);
  /*url("../../img/global/bucket-bg.svg")*/
  padding-block: 1rem calc(1rem + var(--preview-bucket-top-adjustment));
  position: sticky;
  top: var(--preview-header-height);
  z-index: 1000;
}

.bucket-page .preview-page .preview-main * {
  z-index: 1001;
}

.bucket-page .help-page .help-main {
  background: white;
  height: calc(100% - var(--preview-header-height));
  overflow-y: auto;
  z-index: 1001;
  padding: 1.5rem;
}

.bucket-page .help-page .help-main {
  background: white;
  height: calc(100% - var(--preview-header-height));
  overflow-y: auto;
  z-index: 1001;
  padding: 1.5rem;
}

.bucket-page .help-page .help-main .help-next-container {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bucket-page .help-page .help-main .help-next-container .help-next-button {
  height: 100%;
  min-width: 90px;
  width: 100%;
  background: #0d9f3d;
  color: #fef1ec;
  box-shadow: 0px 3px 4px -2px rgba(13, 159, 61, 0.75);
  padding: 6px 12px;
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
  /* opacity: 0; */
  opacity: 1;
  transition: opacity 0.3s ease, box-shadow 0.4s ease, background-color 0.4s ease, border 0.4s ease, color 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #0d9f3d;
}

.bucket-page .help-page .help-main .help-next-container .help-next-button:hover,
.bucket-page .help-page .help-main .help-next-container .help-next-button:focus {
  box-shadow: 0px 4px 4px -2px rgba(24, 175, 74, 0.75);
  background-color: #18af4a;
}

.bucket-page .help-page .help-main .help-next-container .help-next-button:active {
  transition: opacity 0.3s ease, box-shadow 0.4s ease, background-color 0.2s ease, border 0.2s ease, color 0.2s ease;
  box-shadow: 0px 3px 2px -2px rgba(13, 159, 61, 0.85);
  background-color: #0d9f3d;
}

.bucket-page .help-page .help-main .help-next-container .help-next-button > i.fi {
  display: flex;
}

.help-main h2 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #2c3e50;
}

.help-main h3 {
  font-size: 20px;
  margin-top: 25px;
  margin-bottom: 10px;
  color: #34495e;
}

.help-main p {
  font-size: 16px;
  margin-bottom: 10px;
  text-align: justify;
  line-height: 2;
}

.help-main ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 10px;
}

.help-main ul li {
  margin-bottom: 8px;
}

.help-main strong {
  color: #1b73f0;
}

.help-main img {
  border: 1px solid rgba(27, 115, 240, 0.5);
  width: 100%;
  height: auto;
  margin: 15px 0;
  border-radius: 10px;
  box-shadow: 0 4px 10px -2px rgba(27, 115, 240, 0.5);
  width: 80%;
  min-width: 250px;
  margin-inline: auto;
}

.help-main .confirm-suggestion,
.help-main .edit-suggestion,
.help-main .overview-btn {
  padding: 1px 6px;
  border-radius: 20px;
  white-space: nowrap;
  user-select: none;
  transition: box-shadow 0.3s ease;
  font-size: 13px;
}

.help-main .confirm-suggestion > i.fi,
.help-main .edit-suggestion > i.fi,
.help-main .overview-btn > i.fi {
  display: inline-flex;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  margin-right: 2px;
}

.help-main .confirm-suggestion {
  background: #d6ffe4;
  color: #0d9f3d;
}

.help-main .edit-suggestion {
  background: #fdcedc;
  color: #f50d53;
}

.help-main .overview-btn {
  background: #fdfdfd;
  color: #0e1b53;
  border: 1px solid #0e1b53;
}

@media (max-width: 600px) {
  .help-main h2 {
    font-size: 20px;
  }

  .help-main h3 {
    font-size: 18px;
  }

  .help-main p,
  .help-main ul li {
    font-size: 14px;
  }
}

.help-main a {
  color: #1b73f0;
  text-decoration: none;
}

.help-main a:hover {
  text-decoration: underline;
}

.help-main img {
  max-width: 100%;
  height: auto;
}

.bucket-page .help-page .help-main * {
  z-index: 1002;
}

.bucket-page .preview-page .preview-main::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 999;
  background-image: url("../../img/global/shape-bg.svg");
}

.bucket-page .preview-page .preview-main .gauge-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  --gauge-adjustment: 20px;
  background-color: transparent;
}

.bucket-page .preview-page .preview-main .gauge-wrapper {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  height: 100%;
  margin-top: calc(var(--gauge-adjustment) * -1);
}

.bucket-page .preview-page .preview-main .gauge-background,
.bucket-page .preview-page .preview-main .gauge-foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

.bucket-page .preview-page .preview-main .gauge-bg-arc {
  stroke: #152b56;
  stroke: url(#gauge-background-gradient);
}

.bucket-page .preview-page .preview-main #progress-arc {
  stroke: url(#gauge-gradient);
}

.bucket-page .preview-page .preview-main .gauge-bg-arc,
.bucket-page .preview-page .preview-main #progress-arc {
  stroke-width: 9;
  fill: none;
}

.bucket-page .preview-page .preview-main .gauge-center-text {
  position: absolute;
  top: calc(50% + var(--gauge-adjustment));
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  line-height: 1;
}

.bucket-page .preview-page .preview-main .percentage {
  font-size: 3rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}

.bucket-page .preview-page .preview-main .caption {
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  margin-top: 0.4em;
}

.bucket-page .preview-page .preview-main .gauge-lock {
  font-size: 1.75rem;
  color: #fff;
  margin-top: 0.4em;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.bucket-page .preview-page .preview-main .gauge-lock::before {
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\f92a";
}

.bucket-page .preview-page .preview-main[data-unlocked="true"] .gauge-lock::before {
  content: "\fedb";
}

.bucket-page .preview-page .preview-main #progress-dot {
  fill: #fff;
  stroke: none;
  pointer-events: none;
}

.bucket-page .preview-page .preview-main .final-submission {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem;
}

.bucket-page .preview-page .preview-main .final-submission .submission-button,
.bucket-page .preview-page .preview-footer .submission-button,
.bucket-page .preview-page .preview-footer .submission-button {
  background: #111d5c;
  box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.4);
  min-height: 3rem;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  border-radius: 8px;
  color: white;
  cursor: default;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  padding-inline: 1rem;
}

.bucket-page .preview-page .preview-main .final-submission .submission-button i.fi,
.bucket-page .preview-page .preview-footer .submission-button i.fi {
  display: flex;
}

.bucket-page .preview-page .preview-main[data-unlocked="true"] .final-submission .submission-button,
.bucket-page .preview-page:has(.preview-main[data-unlocked="true"]) .preview-footer .submission-button {
  background: #0d9f3d;
  box-shadow: unset;
  cursor: pointer;
  color: white;
}

.bucket-page .preview-page .preview-main[data-unlocked="true"] .final-submission .submission-button:hover,
.bucket-page .preview-page .preview-main[data-unlocked="true"] .final-submission .submission-button:focus,
.bucket-page .preview-page:has(.preview-main[data-unlocked="true"]) .preview-footer .submission-button:hover,
.bucket-page .preview-page:has(.preview-main[data-unlocked="true"]) .preview-footer .submission-button:focus {
  background: #18df59;
}

.bucket-page
  .preview-page
  .preview-main[data-unlocked="true"]
  .final-submission
  .submission-button[data-complete="false"],
.bucket-page
  .preview-page:has(.preview-main[data-unlocked="true"]):has(.submission-button[data-complete="false"])
  .preview-footer
  .submission-button {
  background: #1b73f0;
}

.bucket-page
  .preview-page
  .preview-main[data-unlocked="true"]
  .final-submission
  .submission-button[data-complete="false"]:hover,
.bucket-page
  .preview-page
  .preview-main[data-unlocked="true"]
  .final-submission
  .submission-button[data-complete="false"]:focus,
.bucket-page
  .preview-page:has(.preview-main[data-unlocked="true"]):has(.submission-button[data-complete="false"])
  .preview-footer
  .submission-button:hover,
.bucket-page
  .preview-page:has(.preview-main[data-unlocked="true"]):has(.submission-button)
  .preview-footer
  .submission-button[data-complete="false"]:focus {
  background: #3785f1;
}

.bucket-page .preview-page .preview-main[data-unlocked="true"] .final-submission .submission-button:active,
.bucket-page .preview-page:has(.preview-main[data-unlocked="true"]) .preview-footer .submission-button:active {
  box-shadow: inset 0px 2px 6px -1px rgba(0, 0, 0, 0.25);
}

.bucket-page .preview-page .preview-main .final-submission .submission-subtitle {
  color: white;
  text-align: center;
  max-width: 350px;
  font-weight: 300;
  padding-inline: 1rem;
}

.bucket-page .preview-page .preview-buckets {
  padding: calc(1rem + var(--preview-bucket-top-adjustment)) 1rem;
  width: 100%;
  background: white;
  /* transform: translateY(calc(var(--preview-bucket-top-adjustment) * -1)); */
  margin-top: calc(var(--preview-bucket-top-adjustment) * -1);
  z-index: 1002;
  position: relative;
  --buckets-radius: 1.5rem;
  border-top-left-radius: var(--buckets-radius);
  border-top-right-radius: var(--buckets-radius);
}

.bucket-page .preview-page .preview-buckets .buckets-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card {
  background: #daeeff;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  width: 100%;
  /* height: 100px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  --card-info-min-height: 4.75rem;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card > * {
  min-height: var(--card-info-min-height);
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-indicator {
  width: var(--card-info-min-height);
  height: var(--card-info-min-height);
  flex: var(--card-info-min-height);
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-indicator .bucket-icon {
  --bucket-percentage: 0;

  position: relative;
  width: var(--card-info-min-height);
  height: var(--card-info-min-height);
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    #3c8de4 0deg,
    #60ccf5 calc(calc(var(--bucket-percentage) * 3.6deg) - 90deg),
    #3c8de4 calc(var(--bucket-percentage) * 3.6deg),
    #111d5611 calc(var(--bucket-percentage) * 3.6deg),
    #111d5611 360deg
  );
  padding: 5px;
  background-clip: border-box;
  -webkit-background-clip: border-box;

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

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-indicator .bucket-icon::before {
  content: "";
  position: absolute;
  top: 5px;

  left: 5px;
  right: 5px;
  bottom: 5px;
  background: #1b73f0;
  border-radius: 50%;
}

.bucket-page
  .preview-page
  .preview-buckets
  .buckets-content
  .buckets-card[data-unlocked="false"]
  .bucket-indicator
  .bucket-icon {
  opacity: 0.15;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-indicator .bucket-icon i {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 22px;
  display: flex;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data {
  display: flex;
  flex-direction: column;
  margin-inline: 1rem;
  flex: calc(100% - var(--card-info-min-height) - 30% - 4rem);
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data .soustitle {
  font-size: 14px;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data .title {
  font-size: 1.25rem;
  font-weight: 500;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data .subtitle {
  font-size: 1rem;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data .subtitle .perc,
.bucket-page
  .preview-page
  .preview-buckets
  .buckets-content
  .buckets-card[data-complete="true"]
  .bucket-data
  .subtitle {
  color: #1b73f0;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data .subtitle-zero,
.bucket-page
  .preview-page
  .preview-buckets
  .buckets-content
  .buckets-card[data-unlocked="false"]
  .bucket-data
  .subtitle {
  display: none;
}

.bucket-page
  .preview-page
  .preview-buckets
  .buckets-content
  .buckets-card[data-unlocked="false"]
  .bucket-data
  .subtitle-zero {
  display: block;
}

.bucket-page
  .preview-page
  .preview-buckets
  .buckets-content
  .buckets-card[data-complete="true"]
  .bucket-indicator
  .bucket-icon::after {
  position: absolute;
  content: "\f3d3";
  background: white;
  border-radius: 50%;
  font-size: 1.375rem;
  color: #0d9f3d;
  top: 0;
  left: 0;
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-link {
  padding: 1rem 1.5rem;
  padding-right: 0.5rem;
  border-left: 2px solid #a3d8ff;
  /* min-width: 30%; */
  flex: 30%;
  height: 100%;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;

  text-decoration: underline;
}
.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-link > span {
  /* border-bottom: 1px solid black; */
  text-align: center;
  cursor: pointer;
  word-wrap: break-word;
  white-space: break-spaces;
  word-break: keep-all;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-link > span:hover,
.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-link > span:focus {
  font-weight: 500;
}

.bucket-page .preview-page .preview-buckets .buckets-content .buckets-card.locked .bucket-link {
  text-decoration: none;
  font-size: 1.5rem;
  color: #1b73f0;
}

.bucket-page .preview-page .preview-footer {
  width: 100%;
  background: white;
  box-shadow: 0px -8px 12px -3px rgba(0, 0, 0, 0.15);

  z-index: 1100;
  padding: 1rem;
  /* padding-bottom: 1.5rem; */

  position: sticky;
  bottom: 0;
  transition: transform 0.5s ease;
  transition-delay: 0.5s;
}

.bucket-page .preview-page .preview-footer .submission-button {
  min-height: 4rem;
  box-shadow: unset;
  background-color: #e7e7e7;
  color: b0b0b0;
  font-weight: 500;
  padding: 0.75rem 1rem;
  text-align: center;
}

.bucket-page .preview-page .preview-footer.cover {
  z-index: 2000;
  transform: translateY(200px);
  padding-top: 8px;
  color: #c93333;
  transition-delay: 0s;
}

.bucket-page .preview-page .preview-footer.cover.shown {
  transform: translateY(0) !important;
}

.bucket-page .preview-page .preview-footer.cover > p {
  padding-bottom: 5px;
  text-align: center;
  font-size: 14px;
}

.bucket-page .preview-page .preview-footer.cover .submission-button {
  min-height: 3rem;
  font-size: 1rem;
}

@media only screen and (max-width: 519px) {
  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card {
    --card-info-min-height: 4rem;
    padding: 0.75rem 1rem;
  }

  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-link {
    padding-inline: 0.5rem 0;
    font-size: 1rem;
  }

  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data .subtitle {
    font-size: 12px;
  }

  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data .title {
    font-size: 17px;
  }

  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data .subtitle {
    font-size: 11px;
  }

  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data {
    flex: calc(100% - var(--card-info-min-height) - 78px - 2.5rem);
  }
}

/* Feedback Card Styles */
.feedback-card {
  background: #f9f9f9;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  top: -0.5rem;
}

.feedback-card[data-pass="true"] {
  display: none;
}

.feedback-card .bucket-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  color: #f6ba09;
  display: none;
}

.feedback-card[data-pass="false"] .bucket-indicator,
.feedback-card .bucket-indicator i.fi {
  display: flex;
  font-size: 1.25rem;
}

.feedback-card .bucket-icon {
  background: conic-gradient(
    from 180deg,
    #3c8de4 0deg,
    #60ccf5 calc(calc(var(--bucket-percentage) * 3.6deg) - 90deg),
    #3c8de4 calc(var(--bucket-percentage) * 3.6deg),
    #111d5611 calc(var(--bucket-percentage) * 3.6deg),
    #111d5611 360deg
  );
}

.feedback-card .bucket-data {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
}

.feedback-card .bucket-data .soustitle {
  font-size: 12px;
  color: #555;
  position: absolute;
  left: 0;
  top: -4px;
  background: #0e1b53;
  padding: 0 8px;
  border-radius: 7px;
  color: white;
}

.feedback-card .bucket-data .title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.feedback-card .bucket-data .title {
  color: #0d9f3d;
}

.feedback-card[data-pass="false"] .bucket-data .title {
  color: #f6ba09;
}

.feedback-card .bucket-data .subtitle {
  font-size: 1rem;
  color: #666;
  margin-top: 0.25rem;
}

.feedback-card .bucket-link {
  padding: 0.5rem 1rem;
  border-left: 2px solid #a3d8ff;
  flex: 30%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  font-size: 14px;
  margin-top: 0.5rem;
}

.feedback-card .bucket-link > * {
  width: 100%;
}

.feedback-card .bucket-link > span.link {
  display: none;
  color: #e6f7ff;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  background: #1b73f0;
  padding: 3px 5px;
  border-radius: 5px;
  line-height: 1;
  width: fit-content;
  margin-top: 0.5rem;
}

.feedback-card .bucket-link > span.link:hover,
.feedback-card .bucket-link > span.link:focus {
  font-weight: 600;
  box-shadow: 0px 0px 6px -2px #1b73f066;
}

.feedback-card .bucket-link > span.link:active {
  font-weight: 500;
}

.feedback-card .question-feedback-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  width: 100%;
}

.feedback-card .question-feedback-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.feedback-card .question-feedback-link {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  width: 100%;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
  text-decoration: none;
  color: #333;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.feedback-card .question-feedback-link:hover,
.feedback-card .question-feedback-link:focus {
  background: #e6f7ff;
  border-color: #1b73f0;
}

.feedback-card .question-feedback-link::before,
.feedback-card .question-feedback-link::before {
  content: "";
  opacity: 0;
  transition: opacity 0.1s ease;
}

.feedback-card .question-feedback-link::before,
.feedback-card .question-feedback-link::before {
  content: "Click to Adjust Answer";
  background: #1b73f0;
  border-color: #e6f7ff;
  color: #e6f7ff;
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 11px;
  padding: 3px 5px;
  border-radius: 6px;
  line-height: 1;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.feedback-card .question-feedback-link .question {
  font-weight: 600;
  font-size: 12px;
  color: #1b73f0;
}

.feedback-card .confirmation-slider {
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  text-align: center;
}

/* Status container */
.feedback-card [id$="-feedback-status"] {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 26px;
  height: 52px;
  position: relative;
}

/* Fade-in animation */
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.feedback-card .text-notice {
  user-select: none;
  font-size: 14px;
  line-height: 1;
  animation: fadein 4s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: rgba(27, 116, 240, 0.8);
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding-inline: 10px;
}

.feedback-card .text-notice > i.fi {
  display: flex;
  justify-content: center;
  align-items: center;
}

.feedback-card .delete-notice {
  display: none;
  user-select: none;
  font-size: 20px;
  line-height: 50px;
  color: #ed4545;
  animation: fadein 4s ease;
  z-index: 1;
}

/* Range slider base */
.feedback-card [id$="-feedback-confirm"] {
  appearance: none !important;
  background: transparent;
  height: 50px;
  padding: 0 5px;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Range slider thumb */
.feedback-card [id$="-feedback-confirm"]::-webkit-slider-thumb {
  appearance: none !important;
  height: 40px;
  width: 160px;
  border: 1px solid #1b73f0;
  border-radius: 20px;
  cursor: e-resize;
  background: no-repeat center center;
  background-image: url(data:image/gif;base64,R0lGODlhIAAXAJEDAD1740KC7Ttx0////yH5BAEAAAMALAAAAAAgABcAAAJInI9poO0/hAiwOjmtPliwbXUeWIkSRTam9CHrC7NJTK9oVOfYp/ejDwzWAkKaofhqIU2tFG7lnDGj0k6T+pRgFbstd+SdXR0FADs=),
    linear-gradient(top, #4d90fe, #4787ed);
  background-color: rgba(27, 116, 240, 0.4);
}

.feedback-card [id$="-feedback-confirm"]:hover::-webkit-slider-thumb {
  border-color: #1b73f0;
  background-color: rgba(27, 116, 240, 0.3);
}

.feedback-card .deleting [id$="-feedback-status"] {
  background: #1b74f0;
  border: 1px solid #1b74f0cc;
  cursor: pointer;
}

.feedback-card .deleting .text-notice {
  color: white;
}

.feedback-card .deleting:hover [id$="-feedback-status"] {
  background: #3695fb;
  border: 1px solid #3695fbcc;
  box-shadow: 0px 0px 14px -2px #1b74f099;
}

.feedback-card .deleting:hover .text-notice {
  color: white;
}

@media only screen and (max-width: 389px) {
  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-link {
    font-size: 12px;
    flex: 64px;
  }

  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data {
    flex: calc(100% - var(--card-info-min-height) - 64px - 1.5rem);
  }
}

@media only screen and (max-width: 349px) {
  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-link {
    display: none;
  }

  .bucket-page .preview-page .preview-buckets .buckets-content .buckets-card .bucket-data {
    flex: calc(100% - var(--card-info-min-height) - 1rem);
  }
}

@media only screen and (max-width: 576px) {
  .bucket-page .page-footer {
    --nav-width: 80px;
  }
}

/* @media only screen and (hover: none) and (pointer: coarse) {
  .bucket-page .page-footer .footer-nav > span {
    display: none !important;
  }

  .bucket-page .page-footer:has(.footer-nav.left-back:hover),
  .bucket-page .page-footer:has(.footer-nav.left-back:focus) {
    grid-template-columns: fit-content(75px) minmax(var(--nav-width), 1fr) fit-content(30px);
  }

  .bucket-page .page-footer:has(.footer-nav.right-next:hover),
  .bucket-page .page-footer:has(.footer-nav.right-next:focus) {
    grid-template-columns: fit-content(30px) minmax(var(--nav-width), 1fr) fit-content(75px);
  }
} */

/*@ Quantitative Card Container */
.quantitative-card {
  /* background: #f9f9f9;
  border-radius: 1.5rem;
  padding: 1rem 1.5rem;
  width: 100%;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: relative; */
}

.quantitative-feedback {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.quantitative-feedback h3,
.quantitative-feedback h4 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.quantitative-feedback p {
  /* margin: 0.5rem 0; */
}
.quantitative-feedback ul {
  padding-inline-start: 24px;
}

.quantitative-referral-button {
  background: #1b73f0;
  border: 1px solid #1b73f0;
  color: #fff;
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  align-self: flex-end;
  text-decoration: none;
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
  width: 100%;
}
.quantitative-referral-button:hover,
.quantitative-referral-button:focus {
  background: #1b73f022;
  border: 1px solid #1b73f0;
  color: #1b73f0;
}

.offer-quote {
  border-left: 2px solid #6fbaf0;
  padding-left: 1rem;
  margin-bottom: 8px;
}

.offer-quote:first-of-type {
  margin-top: 8px;
}

@media only screen and (max-width: 519px) {
  .quantitative-card {
    padding: 0.75rem 1rem;
  }
  .quantitative-referral-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

.new-buttons-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
}

.new-grid-button {
  background: #1b73f0;
  border: 1px solid #1b73f0;
  color: #fff;
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}

.new-grid-button:hover,
.new-grid-button:focus {
  background: #1b73f022;
  border: 1px solid #1b73f0;
  color: #1b73f0;
}

@media only screen and (max-width: 519px) {
  .new-grid-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

.inner-bucket {
  --bucket-completion: 0%;
  --radius: 6px;
  --border-color: rgba(27, 115, 240, 0.25);
  /* outline: 1px solid rgba(255, 255, 255, 1); */
  border: 1px solid var(--border-color);
  border-bottom: 1px dashed var(--border-color);
  border-top: 0px solid transparent;
  background: #fff;
  border-radius: 0;
  /* overflow: clip; */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.inner-bucket[data-locked="true"] {
  transition: color 0.5s;
  color: #33333333;
}

.inner-bucket:first-of-type,
.inner-bucket:first-of-type .inner-header {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.inner-bucket:last-of-type,
.inner-bucket:last-of-type .inner-header {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.inner-bucket:first-of-type {
  border-top: 1px solid var(--border-color);
}
.inner-bucket:last-of-type {
  border-bottom: 1px solid var(--border-color);
}

.inner-bucket .inner-header {
  /* --background-color: #1b73f0; */
  --background-color: hsl(17, 98%, 95%);

  position: relative;
  width: 100%;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(90deg, var(--background-color) var(--bucket-completion), white var(--bucket-completion));
  /* transition: border-color 1s ease;
  border-bottom: 1px solid transparent; */
}

.inner-bucket[aria-hidden="false"] .inner-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px dotted rgba(27, 115, 240, 0.5);
}
.inner-bucket[aria-hidden="false"] .inner-header .inner-header-title {
  color: #1b73f0;
  /* font-weight: 600; */
}

/* .inner-bucket[data-locked="false"][aria-hidden="false"] .inner-header {
  position: sticky;
  top: -1rem;
  z-index: 150;
} */

/* .inner-bucket[data-locked="false"][aria-hidden="false"] .inner-header {
  border-bottom: 1px solid rgba(218, 68, 113, 0.5);
} */

.inner-bucket .inner-header .inner-header-title {
  min-height: 1rem;
  border-radius: 12px;
  width: 100%;
  padding: 6px 8px;
  line-height: 1;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 2px;
  /* text-decoration: underline dashed #1b73f0;
  text-decoration-thickness: 2px; */
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color 0.5s, font-weight 0.5s ease, background 0.3s ease;
  background: linear-gradient(90deg, #333 var(--bucket-completion), #333 var(--bucket-completion));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-transform: uppercase; */
}

.inner-bucket[data-locked="true"] .inner-header .inner-header-title,
.inner-bucket[data-locked="true"] .inner-header .inner-header-icons {
  background: linear-gradient(
    90deg,
    rgba(144, 47, 9, 0.2) var(--bucket-completion),
    rgba(51, 51, 51, 0.2) var(--bucket-completion)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.inner-bucket .inner-header .inner-header-title .fi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
}

/* .inner-bucket .inner-header .inner-header-title .fi-br-unlock {
  visibility: hidden;
} */

.inner-bucket[data-locked="false"] .inner-header .inner-header-title .fi-br-lock {
  display: none;
}

.inner-bucket:not([data-locked="false"]) .inner-header .inner-header-title .fi-br-unlock {
  display: none;
}

.inner-bucket .inner-header .inner-header-icons {
  position: absolute;
  right: 0;
  top: 0;
}

.inner-bucket .inner-header .inner-header-icons .fi-sr-plus-small {
  position: absolute;
  top: 7px;
  right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s, transform 0.5s;
  transform: rotate(45deg);
  font-size: 1.2rem;
  color: #1b73f0;
}

.inner-bucket[aria-hidden="true"] .inner-header .inner-header-icons .fi-sr-plus-small {
  transform: unset;
}
.inner-bucket[data-locked="true"] .inner-header .inner-header-icons .fi-sr-plus-small {
  opacity: 0;
}

.inner-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s;
}

.inner-bucket:not([aria-hidden="true"]) .inner-content {
  grid-template-rows: 1fr;
}

.inner-bucket[data-locked="true"] .inner-content {
  grid-template-rows: 0fr;
}

.inner-bucket[aria-hidden="true"] .inner-content > .inner-content-expandable,
.inner-bucket[data-locked="true"] .inner-content > .inner-content-expandable {
  padding: 0px 10px;
  opacity: 0;
}

.inner-content > .inner-content-expandable {
  transition: padding 0.5s, opacity 1.5s;
  padding: 10px;
  overflow: hidden;
  /* background: blue; */
  opacity: 1;
}

/* form */
.form-container {
  width: 100%;
  /* background: red; */
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group {
  display: flex;
  /* display: none; */
  flex-direction: column;
  /* position: relative; */
  width: 100%;
  overflow: auto;
  min-height: calc(100%);
  min-height: calc(100% + 12px);
  /* margin-bottom: 50%; */
  padding-block: 12px;
  /* margin-bottom: 12px; */
  padding-right: 3px;
}

[data-bucket="Basics"] .form-group {
  min-height: unset;
  overflow: unset;
  margin-bottom: 0;
  padding-block: 0;
  padding-right: 0;
}

.page-main > .form-group {
  opacity: 0.3;
  transition: transform 0.3s ease;
}

[data-bucket="Basics"] .page-main > .form-group:not(:has(> label > .label-title)) {
  margin-top: 5px;
}

[data-bucket="Basics"] .page-main > .form-group:not(:has(> label > .label-title))[data-handle="business_email"] {
  margin-top: 10px;
}

.page-main > .form-group.focused-group,
.page-main > .form-group.focused-group *:not(label:has(input:checked), .other-choice),
.page-main > .form-group.focused-group *:not(label:has(input:checked), .specify-choice) {
  color: #1b73f0 !important;
}

.page-main > .form-group.focused-group {
  /* position: relative;
  border-bottom: 2px dashed #cc3333;
  border-top: 2px dashed #cc3333; */
  opacity: 0.65;
}

.page-main > .form-group.snapping-up {
  transform: translateY(18px);
  position: relative;
}

.page-main > .form-group.snapping-down {
  transform: translateY(-18px);
  position: relative;
}

.page-main:has(> .form-group.snapping-up)::before,
.page-main:has(> .form-group.snapping-down)::after {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  color: #1b73f0;
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-size: 1.5rem;
  opacity: 0.6;
}

.page-main:has(> .form-group.snapping-up)::before {
  /* content: "\f188"; */
  top: calc(var(--bucket-header-height) + 10px);
}
.page-main:has(> .form-group.snapping-down)::after {
  /* content: "\f185"; */
  bottom: calc(var(--bucket-footer-height) + 10px);
}

/* .page-main > .form-group.focused-group::before,
.page-main > .form-group.focused-group::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
}

.page-main > .form-group.focused-group::before {
  border-bottom-color: #cc3333;
  top: -16px;
  animation: arrow-bounce-top 0.6s infinite;
}

.page-main > .form-group.focused-group::after {
  border-top-color: #cc3333;
  bottom: -16px;
  animation: arrow-bounce-bottom 0.6s infinite;
}

@keyframes arrow-bounce-top {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

@keyframes arrow-bounce-bottom {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(4px);
  }
} */

/* .page-main > .form-group:has(+ .form-group[data-active="true"]),
.page-main > .form-group[data-active="true"] + .form-group {
  opacity: 1;
} */

.page-main:has(.warning-text.shown) .next-bucket-container {
  opacity: 0 !important;
  transition: opacity 3s ease;
  overflow: hidden;
  max-height: 2.5rem;
}

.page-main:has(.warning-text.shown) .next-bucket-container .next-bucket-button {
  transition: transform 1s ease;
  transform: translateY(100vh);
}

.page-main .next-bucket-container {
  display: none;
  justify-content: center;
  width: 100%;
  min-height: 2.5rem;
  margin-block: 1rem 0.5rem;
}

.page-main .next-bucket-container.shown {
  display: flex;
}

.page-main .next-bucket-container .next-bucket-button {
  height: 100%;
  min-width: 90px;
  width: 100%;
  background: #0d9f3d;
  color: #fef1ec;
  box-shadow: 0px 3px 4px -2px rgba(13, 159, 61, 0.75);
  padding: 6px 12px;
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
  /* opacity: 0; */
  opacity: 1;
  transition: opacity 0.3s ease, box-shadow 0.4s ease, background-color 0.4s ease, border 0.4s ease, color 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #0d9f3d;
}

.page-main .next-bucket-container .next-bucket-button:hover,
.page-main .next-bucket-container .next-bucket-button:focus {
  /* border: 1px solid #1b73f0; */
  /* color: #1b73f0; */
  /* font-weight: 700; */
  box-shadow: 0px 4px 4px -2px rgba(24, 175, 74, 0.75);
  background-color: #18af4a;
}

.page-main .next-bucket-container .next-bucket-button:active {
  transition: opacity 0.3s ease, box-shadow 0.4s ease, background-color 0.2s ease, border 0.2s ease, color 0.2s ease;
  box-shadow: 0px 3px 2px -2px rgba(13, 159, 61, 0.85);
  background-color: #0d9f3d;
}

.page-main .next-bucket-container .next-bucket-button > i.fi {
  display: flex;
}

.form-group[data-active="true"],
[data-bucket="Basics"] .form-group,
.page-main > .form-group[data-visible="true"].items:has(.items-confirmation-container.shown) {
  opacity: 1;
  /* display: flex; */
}

.page-main > .form-group[data-visible="true"].items:has(.items-confirmation-container.shown) {
  top: -0.75rem;
}

.form-group[aria-hidden="true"] {
  display: none;
}

/* .form-group::after {
  position: absolute;
  left: 0;
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\fb1b";
}

.form-group[data-answered="true"]::after {
} */

.form-group label {
  font-size: 1rem;
  display: block;
  position: relative;
}

.form-group input[type="text"],
.form-group input[type="file"],
.form-group input[type="color"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 4px;
  outline: none;
  border: none;
  background: transparent;
}

.form-group textarea {
  min-height: 68px;
  overflow-y: scroll;
  padding-block: 12px;
}

.form-group[data-suggested="true"] textarea {
  max-height: 300px;
}

.form-group[data-suggested="true"] textarea {
  max-height: 300px;
}

.input-wrapper {
  --font-size: 1rem;

  /* - */
  background: transparent;
  /* background-color: #fef5f1; */
  padding: 8px;
  border: 2px solid #e7e7e7;
  /* border-top: none;
  border-left: none;
  border-right: none; */
  border-radius: 8px;
  /* box-shadow: inset 0 -1px 0 #1b73f0; */
  transition: box-shadow 0.5s, border-color 0.6s, outline 0.6s, background-color 0.6s;
  outline: none;
  color: #333;
  position: relative;
  font-size: var(--font-size);
}

.input-wrapper:has(textarea) {
  padding-block: 0;
}

.input-wrapper > .clear-text {
  position: absolute;
  right: 12px;
  top: 15px;
  display: flex;
  cursor: pointer;
  text-shadow: 2px 2px 0 #fbfbfb, -2px -2px 0 #fbfbfb, -2px 2px 0 #fbfbfb, 2px -2px 0 #fbfbfb, 2px 0px 0 #fbfbfb,
    -2px 0px 0 #fbfbfb, 0px 2px 0 #fbfbfb, 0px -2px 0 #fbfbfb;
  opacity: 0.3;
}

.input-wrapper:hover > .clear-text {
  opacity: 1;
  color: #1b73f0;
}

.form-group .input-wrapper:has(input:placeholder-shown) > .clear-text,
.form-group .input-wrapper:has(textarea:placeholder-shown) > .clear-text,
.form-group .input-wrapper:has(select:not(:valid)) > .clear-text {
  opacity: 0;
}

.form-group label.paragraph-input {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.form-group label.paragraph-input .input-wrapper {
  min-width: 120px;
  /* max-width: 270px; */
  flex: 1;
  /* max-width: 100%; */
  margin-left: 4px;
  padding-left: 4px;
  padding-block: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.form-group label .label-title {
  /* margin-bottom: 0; */
  font-weight: 500;
  /* margin-bottom: 10px; */
  line-height: 1.3;
}

.form-group label.paragraph-input .label-title {
  margin-bottom: 0;
  font-weight: 400;
}

.form-group label.paragraph-input input[type="text"] {
  font-size: 1.25rem;
  color: #1b73f0;
  padding-block: 0;
  padding-left: 0;
  /* transition: width 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; */
}

.form-group label .input-wrapper:has(input[type="text"][disabled]) > .clear-text,
.form-group label .input-wrapper:has(textarea[disabled]) > .clear-text,
.form-group label .input-wrapper:has(textarea[readonly]) > .clear-text {
  display: none;
}

.form-group .inline-input {
  display: inline;
  flex: 1;
  font-size: 1.25rem;
  color: #1b73f0;
  background: transparent;
  padding: 2px;
  margin-left: 2px;
  border: 1px solid transparent;
  min-width: 60px;
  border-radius: 8px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: inset 0 -1px 0 #1b73f0;
  transition: box-shadow 0.5s, border-color 0.6s, outline 0.6s, background-color 0.6s;
  outline: none;
  position: relative;
  font-size: var(--font-size);
  cursor: text;
  line-height: 1.35;
  word-break: break-word;
}

.form-group .inline-input:hover {
  box-shadow: inset 0 -2px 0 #1b73f0;
}

.form-group .inline-input:focus {
  border-color: #1b73f0;
}

.form-group .inline-input:active {
  box-shadow: inset 0 -2px 0 #1b73f0;
  border-color: #1b73f0;
}

.form-group .inline-input:not([contenteditable="true"]) {
  min-width: 60px;
  max-width: 100%;
  border: none;
  border: 1px solid hsla(205, 100%, 78%, 50%);
  border-radius: 8px;
  background-color: #fbfbfb;
  box-shadow: unset;
  outline: none;
  cursor: default;
  /* user-select: none; */
  line-height: 1.65;
}

.form-group label.paragraph-input:not(:has(input[disabled])) .label-title > .label-title.end-string {
  display: none;
}

.form-group label.paragraph-input:has(input[disabled]) > .label-title.end-string {
  display: none;
}

.input-wrapper:hover,
.input-wrapper:has(input:hover),
.input-wrapper:has(select:hover),
.input-wrapper:has(textarea:hover) {
  box-shadow: inset 0 -2px 0 #1b73f0;
  border-color: #1b73f0;
}

.input-wrapper:has(input:focus),
.input-wrapper:has(select:focus),
.input-wrapper:has(textarea:focus) {
  border-color: #1b73f0;
}

.input-wrapper:has(input:active),
.input-wrapper:has(select:active),
.input-wrapper:has(textarea:active) {
  box-shadow: inset 0 -2px 0 #1b73f0;
  border-color: #1b73f0;
}

.form-group:has(.warning-text.shown) {
  --warning-color: #da4471;
  /* color: var(--warning-color); */
}

.form-group:has(.warning-text.shown) .input-wrapper {
  /* outline: 2px solid var(--warning-color); */
  border-color: var(--warning-color);
  box-shadow: none;
  box-shadow: inset 0 -1px 0 var(--warning-color);
}

.form-group:has(.warning-text.shown) .input-wrapper:has(input:hover),
.form-group:has(.warning-text.shown) .input-wrapper:has(input:focus),
.form-group:has(.warning-text.shown) .input-wrapper:has(input:active) {
  box-shadow: inset 0 -2px 0 var(--warning-color);
}

.form-group .input-wrapper:has(input[type="text"])::before,
.form-group .input-wrapper:has(textarea)::before,
.form-group .input-wrapper:has(select)::before {
  content: var(--field-title);
  --transition-speed: 0.3s;
  --padding-block: 2px;
  --padding-inline: calc(2 * var(--padding-block));

  /* - */
  padding: var(--padding-block) var(--padding-inline);
  background-color: transparent;
  border-radius: calc(2 * var(--padding-inline));
  position: absolute;
  top: 15px;
  left: 6px;
  color: #bbb;
  line-height: 1.1;
  transition: inset calc(var(--transition-speed) * 1.5) ease, color calc(var(--transition-speed) * 1) ease,
    background-color calc(var(--transition-speed) * 1) ease, font-size calc(var(--transition-speed) * 1.5) ease,
    padding calc(var(--transition-speed) * 1) ease, text-shadow calc(var(--transition-speed) * 1) ease;
  transition-delay: calc(var(--transition-speed) * 0.5);
  pointer-events: none;
  max-width: 100%;
  /* max-height: calc(var(--font-size) + calc(var(--padding-block) * 2)); */
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: var(--font-size);
}

.form-group .input-wrapper:has(input[type="text"][disabled])::before {
  left: 28px;
}

.form-group.items .card-row .input-wrapper input[type="text"]::placeholder,
.form-group.items .card-row .input-wrapper textarea::placeholder,
.form-group.items .card-row .input-wrapper:has(input[type="text"])::before,
.form-group.items .card-row .input-wrapper:has(textarea)::before,
.form-group.team .card-row .input-wrapper input[type="text"]::placeholder,
.form-group.team .card-row .input-wrapper textarea::placeholder,
.form-group.team .card-row .input-wrapper:has(input[type="text"])::before,
.form-group.team .card-row .input-wrapper:has(textarea)::before,
.form-group .input-wrapper.url-collection::before {
  color: #5cb5fe;
}

.form-group .input-wrapper:has(input[type="text"]:not([disabled]):hover)::before,
.form-group .input-wrapper:has(textarea:not([disabled]):hover)::before,
.form-group .input-wrapper:has(select:not([disabled]):hover)::before,
.form-group .input-wrapper:has(input[type="text"]:not([disabled]):focus)::before,
.form-group .input-wrapper:has(textarea:not([disabled]):focus)::before,
.form-group .input-wrapper:has(select:not([disabled]):focus)::before,
.form-group .input-wrapper:has(input[type="text"]:not([disabled]):active)::before,
.form-group .input-wrapper:has(textarea:not([disabled]):active)::before,
.form-group .input-wrapper:has(select:not([disabled]):active)::before,
.form-group .input-wrapper:has(input:not(:placeholder-shown))::before,
.form-group .input-wrapper:has(textarea:not(:placeholder-shown))::before,
.form-group .input-wrapper:has(select:valid)::before,
.form-group .input-wrapper.url-collection:not(:has(.team-input))::before,
.form-group .input-wrapper.url-collection:has(textarea)::before {
  transition: inset calc(var(--transition-speed) * 1) ease, color calc(var(--transition-speed) * 1) ease,
    background-color calc(var(--transition-speed) * 2) ease, font-size calc(var(--transition-speed) * 1) ease,
    padding calc(var(--transition-speed) * 1) ease;
  background-color: #fbfbfb;
  background-color: transparent;
  text-shadow: 2px 2px 0 #fbfbfb, -2px -2px 0 #fbfbfb, -2px 2px 0 #fbfbfb, 2px -2px 0 #fbfbfb, 2px 0px 0 #fbfbfb,
    -2px 0px 0 #fbfbfb, 0px 2px 0 #fbfbfb, 0px -2px 0 #fbfbfb;
  position: absolute;
  color: #1b73f0;
  top: -8px;
  left: 6px;
  font-size: 10px;
  max-height: 14px;
  padding-right: 4px;
}

.label-title {
  font-size: 1.25rem;
}

.label-subtitle {
  font-size: 1rem;
}

.label-subtitle,
.label-title:not(:has(+ .label-subtitle)) {
  margin-bottom: 0.5rem;
}

.label-title:has(.inline-input) {
  line-height: 1.65;
}

.form-group .input-wrapper:has(input:focus),
.form-group .input-wrapper:has(textarea:focus) {
  /* background-color: #fbfbfb; */
  box-shadow: inset 0 -2px 0 #1b73f0;
}

.form-group .input-wrapper:has(input[disabled]),
.form-group .input-wrapper:has(input[disabled]:hover),
.form-group .input-wrapper:has(input[disabled]:focus),
.form-group .input-wrapper:has(input[disabled]:active),
.form-group .input-wrapper:has(textarea[disabled]),
.form-group .input-wrapper:has(textarea[disabled]:hover),
.form-group .input-wrapper:has(textarea[disabled]:focus),
.form-group .input-wrapper:has(textarea[disabled]:active),
.form-group .input-wrapper:has(select[disabled]),
.form-group .input-wrapper:has(select[disabled]:hover),
.form-group .input-wrapper:has(select[disabled]:focus),
.form-group .input-wrapper:has(select[disabled]:active) {
  /* border: 2px solid hsla(205, 100%, 78%, 50%);*/
  border: 2px solid #ededed;
  background-color: #fbfbfb;
  box-shadow: unset;
  outline: none;
  padding-left: 28px;
}

.form-group .input-wrapper:has(input[disabled])::after,
.form-group .input-wrapper:has(textarea[disabled])::after,
.form-group .input-wrapper:has(select[disabled])::after {
  content: "\fa46";
  line-height: 1;
  position: absolute;
  top: 16px;
  /* right: 1rem; */
  left: 10px;
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: #1973f080;
  font-size: 16px;
  text-shadow: 0px 0px 2px rgba(225, 133, 96, 0.3);
}

.form-group .input-wrapper input[disabled],
.form-group .input-wrapper textarea[disabled] {
  color: #1b73f0;
}

.form-group .paragraph-input .input-wrapper:has(input[disabled]),
.form-group .paragraph-input .input-wrapper:has(input[disabled]:hover),
.form-group .paragraph-input .input-wrapper:has(input[disabled]:focus),
.form-group .paragraph-input .input-wrapper:has(input[disabled]:active) {
  padding: 0;
  min-width: 60px;
  flex: 0 0 auto;
  max-width: 100%;
  /* display: inline-flex; */
  border: none;
  display: none;
}
.form-group .paragraph-input .input-wrapper:has(input[disabled])::after {
  display: none;
}

.form-group .paragraph-input .input-wrapper input[disabled] {
  display: none;
  width: auto;
  max-width: 100%;
  /* cursor: not-allowed; */
}

.input-extras {
  margin-top: 5px;
  padding-left: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.input-extras > span {
  line-height: 1;
  color: #1b73f0;
  padding: 6px;
  border-radius: 1rem;
  background-color: #daeeff;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  user-select: none;
  cursor: pointer;
  transition: background-color 0.2s ease, padding 0.2s ease, margin 0.2s ease;
}

.input-extras > span > i.fi {
  display: none;
}

.input-extras > span > i.fi {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.input-extras > span:hover,
.input-extras > span:focus {
  background-color: #3695fb;
}

.input-extras > span:active {
  background-color: #1b73f0;
  padding: 3px 5px;
  margin: 1px;
}

.input-extras.centered-flex-row {
  justify-content: center;
}

.input-extras.content-fit {
  justify-content: center;
  width: fit-content;
}

.input-extras:not(:has(> *)) {
  display: none;
}

.input-extras:has(> .auto-complete-suggestions):not(:has(> *:not(.auto-complete-suggestions))) {
  margin-top: 0;
}

.input-extras label.extra-check {
  padding-left: 6px;
  margin-left: 20px;
  flex: 100%;
  position: relative;
  font-size: 12px;
}

.input-extras label.extra-check:has(input[type="checkbox"]):after,
.input-extras label.extra-check:has(input[type="checkbox"]):before,
.input-extras label.extra-check:has(input[type="checkbox"]) {
  transition: color 0.3s ease, opacity 0.3s ease;
}

.input-extras label.extra-check:has(input[type="checkbox"]:disabled),
.input-extras label.extra-check:has(input[type="checkbox"]:disabled):before,
.input-extras label.extra-check:has(input[type="checkbox"]:disabled):after {
  color: #1b73f0;
}

.input-extras label.extra-check:before {
  /* font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; */
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
  /* content: "\f30a"; */
  color: #333333;
  width: 16px;
  height: 16px;
  content: "";
  border-radius: 4px;
  border: 2px solid #1b73f0;
}

.input-extras label.extra-check:after {
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 50%;
  left: -13px;
  font-size: 10px;
  transform: translateY(-50%);
  content: "\f3d7";
  color: #1b73f0;
  /* display: none; */
  opacity: 0;
}

.input-extras label.extra-check:has(input[type="checkbox"]:checked):before {
  background: #1b73f0;
}

.input-extras label.extra-check:has(input[type="checkbox"]:checked):after {
  color: white;
}

.input-extras label.extra-check:has(input[type="checkbox"]:checked):after,
.input-extras label.extra-check:has(input[type="checkbox"]:checked):before,
.input-extras label.extra-check:has(input[type="checkbox"]:checked) {
  opacity: 1;
  transition: color 0.3s ease, opacity 0.8s ease;
}

.input-extras .auto-complete-suggestions:not(:has(.suggestion-text)),
.input-extras .auto-complete-suggestions[aria-hidden="true"],
.form-group:has(+ [data-answered="true"]) .input-extras .auto-complete-suggestions {
  display: none;
}

.input-extras .auto-complete-suggestions {
  display: block;
  width: calc(100% - 10px);
  position: fixed;
  top: 100px;
  z-index: 1200;
  transform: translateX(-3px);
  border-radius: 8px;
  border: 2px solid #1b73f0;
  background: white;
  box-shadow: 0 0px 8px -1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.input-extras .auto-complete-suggestions .suggestions-title,
.input-extras .auto-complete-suggestions .suggestions-footer {
  padding: 4px 8px;
  border-bottom: 1px solid #1b73f0;
  background: #1b73f0;
  color: white;
}

.input-extras .auto-complete-suggestions .suggestions-title {
  padding-right: 1.25rem;
}

.input-extras .auto-complete-suggestions .suggestions-title .fi {
  font-size: 12px;
  position: absolute;
  right: 8px;
  top: 8px;
  cursor: pointer;
}

.input-extras .auto-complete-suggestions .suggestions-title .fi:hover,
.input-extras .auto-complete-suggestions .suggestions-title .fi:focus {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}
.input-extras .auto-complete-suggestions .suggestions-title .fi:active {
  text-shadow: unset;
}

.input-extras .auto-complete-suggestions .suggestions-footer {
  font-size: 10px;
  padding: 4px;
  background: hsl(17, 88%, 93%);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top: 1px solid hsl(17, 88%, 88%);
  display: flex;
  justify-content: flex-end;
}

.input-extras .auto-complete-suggestions .suggestions-footer > img {
  width: 120px;
}

.input-extras .auto-complete-suggestions .results {
  overflow-y: auto;
  min-height: 100px;
  max-height: min(160px, 30vh);
  width: 100%;
}

.input-extras .auto-complete-suggestions .results .suggestion-text {
  padding: 8px;
  transition: background-color 0.4s ease, color 0.4s ease;
  position: relative;
}

.input-extras .auto-complete-suggestions .results .suggestion-text:hover,
.input-extras .auto-complete-suggestions .results .suggestion-text:focus {
  background-color: #bde2ff;
  color: white;
  cursor: pointer;
}

.input-extras .auto-complete-suggestions .results .suggestion-text.select-myself {
  padding-top: 12px;
}

.input-extras .auto-complete-suggestions .results .suggestion-text.select-myself::before {
  content: "I can't find my address - write my own: ";
  position: absolute;
  top: 0;
  font-size: 10px;
  font-weight: 700;
  color: #1b73f0;
}

.form-group .suggestion-box-outer {
  display: none;
  justify-content: flex-end;
  align-items: flex-end;
  /* background: white;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, transparent 100%); */
  /* position: absolute;
  bottom: 0px; */
  width: 100%;
  /* height: 50%; */
  /* min-height: 50px; */
  /* border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border: 2px solid #e7e7e7;
  border-top: unset; */
  line-height: 1;
  /* padding-top: 24px; */
  /* flex-wrap: wrap; */
  /* --suggestion-note-ratio: 60%; */
}

.form-group[data-suggested="true"] .suggestion-box-outer {
  display: flex;
}

.form-group[data-suggested="true"] .suggestion-box-inner {
  display: flex;
  width: 100%;
  justify-content: center; /* flex-end original */
  align-items: center;
  gap: 8px;
  padding: 8px;
  flex-wrap: wrap-reverse; /* new */
}

.form-group .suggestion-box-inner .suggestion-note {
  display: flex;
  justify-content: center; /* flex-start original */
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  gap: 4px;
  flex: 1;
  white-space: nowrap;
  max-height: fit-content;
  user-select: none;
}

.form-group .suggestion-box-inner .suggestion-note > i.fi {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.form-group .suggestion-box-inner .suggestion-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 1rem; /* 12px original */
  max-height: fit-content;
}

.form-group .suggestion-box-inner .suggestion-buttons .confirm-suggestion,
.form-group .suggestion-box-inner .suggestion-buttons .edit-suggestion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.form-group .suggestion-box-inner .suggestion-buttons > * > i.fi {
  display: flex;
  font-size: 14px;
}

.form-group .suggestion-box-inner .suggestion-buttons .confirm-suggestion {
  background: #d6ffe4;
  color: #0d9f3d;
}

.form-group .suggestion-box-inner .suggestion-buttons .edit-suggestion {
  background: #fdcedc;
  color: #f50d53;
}

.form-group .suggestion-box-inner .suggestion-buttons .confirm-suggestion:hover,
.form-group .suggestion-box-inner .suggestion-buttons .confirm-suggestion:focus {
  background: #e1feeb;
  box-shadow: 0px 0px 8px -4px rgb(13, 159, 61, 0.35);
}

.form-group .suggestion-box-inner .suggestion-buttons .confirm-suggestion:active {
  background: #ccffdd;
  box-shadow: 0px 0px 6px -4px rgb(13, 159, 61, 0.35);
}

.form-group .suggestion-box-inner .suggestion-buttons .edit-suggestion:hover,
.form-group .suggestion-box-inner .suggestion-buttons .edit-suggestion:focus {
  background: #fcd9e4;
  box-shadow: 0px 0px 6px -4px rgb(245, 13, 83, 0.5);
}

.form-group .suggestion-box-inner .suggestion-buttons .edit-suggestion:active {
  background: #fdc4d5;
  box-shadow: 0px 0px 6px -4px rgb(245, 13, 83, 0.5);
}

.form-group:has(.suggestion-box-outer) .input-wrapper:has(textarea[readonly]) {
  border-color: #e7e7e7;
  box-shadow: none;
  /* background-color: #f5f7ff; */
}

.form-group:has(.suggestion-box-outer) .input-wrapper:has(textarea[readonly]) textarea {
  color: #1b448d;
  cursor: default;
}

/* .form-group:has(.suggestion-box-outer) textarea {
  min-height: 92px;
  padding-bottom: 2rem;
} */

@media only screen and (max-width: 459px) {
  .form-group .suggestion-box-inner {
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
  }

  /* .form-group .suggestion-box-inner .suggestion-buttons {
    font-size: 13px;
  } */

  /* .form-group:has(.suggestion-box-outer) textarea {
    min-height: 92px;
    padding-bottom: 3.375rem;
    max-height: 240px;
  } */
}

.form-group .navigation-container {
  position: fixed;
  bottom: 55px;
  right: 12px;
  display: flex;
  opacity: 0;
  flex-direction: column;
  gap: 6px;
  transform: translateX(100vh);
  transition: opacity 0.4s ease;
}

.form-group[data-active="true"] .navigation-container {
  transform: unset;
  opacity: 1;
}

.form-group .navigation-container .nav-up,
.form-group .navigation-container .nav-down {
  padding: 6px;
  border: 2px solid #1b73f0;
  border-radius: 4px;
  background: rgb(255, 255, 255, 0.3);
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.4s ease, color 0.3s ease, opacity 0.3s ease-in;
}

.form-group .navigation-container .nav-up:hover,
.form-group .navigation-container .nav-up:focus,
.form-group .navigation-container .nav-down:hover,
.form-group .navigation-container .nav-down:focus {
  background: #1b73f0;
  color: white;
}

.form-group .navigation-container .nav-up:hover *,
.form-group .navigation-container .nav-up:focus *,
.form-group .navigation-container .nav-down:hover *,
.form-group .navigation-container .nav-down:focus * {
  color: white;
}

.form-group:first-child .navigation-container .nav-up,
.form-group:last-child .navigation-container .nav-down,
.form-group[data-answered="false"] .navigation-container .nav-down {
  opacity: 0;
  cursor: default;
}

.form-group .navigation-container > div > i.fi {
  display: flex;
  color: #1b73f0;
}

.auto-complete-suggestions-new {
  padding-inline: 12px;
  padding-bottom: 36px;
  position: relative;
}

.input-wrapper:has(.auto-complete-suggestions-new) {
  padding-inline: 0;
  padding-bottom: 0;
  border: 2px solid #1b73f0;
}

.input-wrapper:has(.auto-complete-suggestions-new) input[type="text"] {
  padding-inline: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #1b73f0;
}

.auto-complete-suggestions-new .address-confirmation-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.auto-complete-suggestions-new .address-confirmation-container .address-confirmation-button {
  width: 100%;
  background: #d8ffe5;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #0d9f3d;
  padding-block: 2px;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.auto-complete-suggestions-new .address-confirmation-container .address-confirmation-button:hover {
  box-shadow: 0 0 12px -4px #0d9f3d22;
  background: #dcfee7;
  color: rgb(21, 193, 79);
}

.auto-complete-suggestions-new .address-confirmation-container .address-confirmation-button:active {
  box-shadow: unset;
  background: #d8ffe5;
  transform: scale(0.98);
}

.auto-complete-suggestions-new .suggestions-header {
  position: relative;
  left: -12px;
  width: calc(100% + 24px);
  background: #1b73f0;
  color: white;
  padding-inline: 24px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.auto-complete-suggestions-new .confirm-button-example-span {
  font-size: 11px;
  font-weight: 600;
  user-select: none;
}

/* .auto-complete-suggestions-new .confirm-button-example-span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;

  color: #1b73f0;
  padding: 0 6px;
  user-select: none;
  background: #ecf1fe;
  border-radius: 25px;
}

.auto-complete-suggestions-new .confirm-button-example-span > i.fi {
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
} */

@media only screen and (max-width: 459px) {
  .auto-complete-suggestions-new .suggestions-header {
    flex-direction: column;
    padding-bottom: 6px;
    font-size: 13px;
  }
}

/* .auto-complete-suggestions-new .address-confirmation-container .address-confirmation-button[disabled],
.auto-complete-suggestions-new .address-confirmation-container .address-confirmation-button[disabled]:hover,
.auto-complete-suggestions-new .address-confirmation-container .address-confirmation-button[disabled]:focus,
.auto-complete-suggestions-new .address-confirmation-container .address-confirmation-button[disabled]:active, */
.auto-complete-suggestions-new:not(:has(input:checked)) .address-confirmation-container .address-confirmation-button,
.auto-complete-suggestions-new:not(:has(input:checked))
  .address-confirmation-container
  .address-confirmation-button:hover,
.auto-complete-suggestions-new:not(:has(input:checked))
  .address-confirmation-container
  .address-confirmation-button:focus,
.auto-complete-suggestions-new:not(:has(input:checked))
  .address-confirmation-container
  .address-confirmation-button:active {
  box-shadow: unset;
  background: hsl(140, 10%, 92%);
  transform: unset;
  color: #bbb;
  cursor: default;
}

.auto-complete-suggestions-new .address-confirmation-container .address-confirmation-button > i.fi {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.auto-complete-suggestions-new .suggestions-footer {
  padding: 4px 8px;
  border-bottom: 1px solid #eff8ff;
  background: #eff8ff;
  color: white;
  font-size: 10px;
  padding: 4px;
  background: #eff8ff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top: 1px solid #eff8ff;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.auto-complete-suggestions-new .suggestions-footer > img {
  width: 120px;
}

.form-group .auto-complete-suggestions-new .results label > input[type="radio"] {
  /* display: inline-block; */
}

.form-group .auto-complete-suggestions-new .results .result > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-block: 12px;
  cursor: pointer;
  /* background: #ffeeee; */
}

/* .form-group .auto-complete-suggestions-new .results .result > label:hover {
  background: #ecf1fe;
} */

.form-group .auto-complete-suggestions-new .results .result:not(:last-child) > label {
  border-bottom: 2px solid #ededed;
}

.form-group .auto-complete-suggestions-new .results .result > label .radio-icon {
  position: relative;
  min-width: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #1b73f0;
  /* background: #eff8ff; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-group .auto-complete-suggestions-new .results .result > label .radio-icon::after {
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: none;
  justify-content: center;
  align-items: center;
  content: "\f313";
  font-size: 22px;
  /* position: absolute;
  top: 0; */
  color: #1b448d;
}

.form-group .auto-complete-suggestions-new .results .result > label .result-string {
  font-weight: 500;
  line-height: 1;
}

.form-group .auto-complete-suggestions-new .results .result > label .result-string:has(.additional-string) {
  width: 100%;
}

.form-group .auto-complete-suggestions-new .results .result > label .result-string .additional-string {
  color: #888;
  font-size: 12px;

  color: #1b73f0;
  font-size: 14px;
  border-top: 1px dashed #1b73f0;
  margin-top: 4px;
  padding-top: 2px;
  width: 100%;
  font-weight: 400;
}

.form-group .auto-complete-suggestions-new .results .result > label:has(input:checked) .radio-icon {
  background: #bde2ff;
  /* content: "\f97b"; */
}

.form-group .auto-complete-suggestions-new .results .result > label:has(input:checked) .radio-icon::after {
  display: flex;
}

.auto-complete-suggestions-new:not(:has(.results .result)) {
  padding-top: 12px;
}

input#business_address {
  padding-left: 36px;
  position: relative;
}

.input-wrapper:not(:has(.auto-complete-suggestions-new)) input#business_address {
  padding-left: 28px;
}

.input-wrapper:not(:has(.auto-complete-suggestions-new)) input#business_address[disabled] {
  padding-left: 4px;
}

.input-wrapper:has(input#business_address)::after,
.form-group .input-wrapper:has(input#business_address[disabled])::after {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: uicons-regular-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f677";
  /* content: "\fa46"; */
  left: 10px;
  top: 15px;
  z-index: 100;
  position: absolute;
  color: #e7e7e7;
  transition: color 0.6s ease-out;
}

.input-wrapper:has(input#business_address):has(div.auto-complete-suggestions-new)::after,
.input-wrapper:has(input#business_address:hover)::after,
.input-wrapper:has(input#business_address:focus)::after,
.input-wrapper:has(input#business_address:active)::after {
  color: #1b73f0;
}

.input-wrapper:has(input#business_address[disabled])::after {
  color: #e7e7e7;
}

.page-main:has([data-handle="business_description"][data-answered="true"])
  .form-group
  .input-wrapper:has(input#business_address)::after {
  content: "\fb34";
  font-family: uicons-solid-straight !important;
  color: #0d9f3d;
}

.page-main:has([data-handle="business_description"][data-answered])
  .form-group
  .input-wrapper:has(input#business_address[disabled])::after {
  content: "\fa46";
  right: unset;
  font-family: uicons-solid-rounded !important;
  color: #1973f080;
}

.warning-text {
  padding-left: 6px;
  font-size: 10px;
  color: var(--warning-color);
  margin-bottom: 5px;
  transition: opacity 0.5s ease, transform 0.3s ease;
  /* height: 15px; */
  opacity: 1;
  position: absolute;
  bottom: 42px;
  left: 0;
  padding: 2px 6px;
  background-color: var(--warning-color);
  color: white;
  text-align: center;
  z-index: 99;
  width: 100%;
}

.warning-text:not(.shown) {
  /* visibility: none; */
  /* height: 1px; */
  opacity: 0;
  transform: translateY(4rem);
  color: transparent;
}

.form-group:has(.warning-text.shown) .input-wrapper:has(*:not([invalid]))::before {
  --warning-color: #da4471;
  color: var(--warning-color);
}

.form-group:has(.inline-input:not(.other-choice)):has(.inline-input:not(.specify-choice)) .warning-text:not(.shown) {
  height: 0;
  /* margin-bottom: 5px; */
}
.form-group:has(.inline-input) .warning-text.shown {
  /* height: 20px; */
  opacity: 1;
}

.page-main > .form-group.snapping-up .warning-text.shown,
.page-main > .form-group.snapping-down .warning-text.shown {
  opacity: 0;
  transform: translateY(4rem);
  color: transparent;
}

/* .form-group:has(.inline-input) + .form-group:not(:has(.inline-input)) {
  margin-top: 20px;
} */

.form-group[data-visible="false"] {
  display: none;
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
  display: none;
}

.form-group input[type="radio"] + label,
.form-group input[type="checkbox"] + label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 1.125rem;
}

.form-group input[type="radio"]:checked + label::before,
.form-group input[type="checkbox"]:checked + label::before {
  content: "\2022";
  font-size: 2rem;
  color: #1b73f0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.form-group .options-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(91px, 1fr);
}

.form-group .options-wrapper label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  cursor: pointer;
  position: relative;
  justify-content: center;
  transition: height 0.5s ease;
  min-height: 91px;
}

.form-group .options-wrapper input[type="radio"],
.form-group .options-wrapper input[type="checkbox"] {
  display: none;
}

.form-group .options-wrapper label {
  border: 1px solid rgba(27, 115, 240, 0.4);
  border-radius: 6px;
  transition: box-shadow 0.6s ease, background-color 0.3s ease, color 0.3s ease;
  user-select: none;
  text-align: center;
  padding: 4px 8px;
  position: relative;
}

.form-group .options-wrapper label.other-choice,
.form-group .options-wrapper label.specify-choice {
  padding-block: 12px;
  position: relative;
  grid-column: span 2;
  grid-row: auto;
  /* grid-row-end: span 2; */
  /* height: fit-content;
  max-height: 91px; */
}

.form-group .options-wrapper label.other-choice::after {
  --other-option: "Other";
  content: var(--other-option);
  transition: inset 0.5s ease, font-size 0.5s ease, height 0.5s ease, width 0.5s ease, color 0.1s ease;
  height: 100%;
  min-height: 28.3px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* position: absolute; */
}

.form-group .options-wrapper label.other-choice:has(input[type="radio"]:checked)::after,
.form-group .options-wrapper label.other-choice:has(input[type="checkbox"]:checked)::after,
.form-group .options-wrapper label.specify-choice:has(input[type="radio"]:checked)::after,
.form-group .options-wrapper label.specify-choice:has(input[type="checkbox"]:checked)::after {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 4px;
  font-size: 10px;
  max-width: calc(100% - 1rem);
  height: 12px;
  min-height: 12px;
}

.form-group .options-wrapper label:hover,
.form-group .options-wrapper label:focus {
  border: 1px solid rgba(27, 115, 240, 1);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 rgba(27, 115, 240, 1), 0px 0px 14px -6px rgba(27, 115, 240, 0.6);
}

.form-group .options-wrapper label:active {
  transition: unset;
  box-shadow: inset 0 -2px 0 rgba(27, 115, 240, 1), 0px 0px 6px rgba(27, 115, 240, 0.4);
}

.form-group .options-wrapper label:has(input[type="radio"]:checked),
.form-group .options-wrapper label:has(input[type="checkbox"]:checked) {
  background-color: #1b73f0;
  color: white;
  box-shadow: 0px 0px 14px -6px rgba(27, 115, 240, 0.6);
}

.form-group
  .options-wrapper:has(input[type="radio"])
  label:not(:has(input[type="radio"]:checked))
  .inline-input.specify-choice,
.form-group
  .options-wrapper:has(input[type="checkbox"])
  label:not(:has(input[type="checkbox"]:checked))
  .inline-input.specify-choice,
.form-group
  .options-wrapper:has(input[type="radio"])
  label:not(:has(input[type="radio"]:checked))
  .inline-input.other-choice,
.form-group
  .options-wrapper:has(input[type="checkbox"])
  label:not(:has(input[type="checkbox"]:checked))
  .inline-input.other-choice,
.form-group
  .options-wrapper:has(input[type="checkbox"])
  label:not(:has(input[type="checkbox"]:checked))
  .uncheck-option {
  display: none;
  color: #1b73f0;
}

.form-group .options-wrapper:has(input[type="checkbox"]) label.other-choice:has(input[type="checkbox"]:checked),
.form-group .options-wrapper:has(input[type="checkbox"]) label.specify-choice:has(input[type="checkbox"]:checked) {
  /* pointer-events: none; */
  cursor: text;
}

.form-group .uncheck-option {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.form-group .uncheck-option:hover,
.form-group .uncheck-option:focus {
  text-shadow: 0px 0px 4px rgba(244, 244, 244, 0.4), 1px 1px 4px rgba(27, 115, 240, 0.4);
}

.form-group .uncheck-option:active {
  text-shadow: 0px 0px 4px rgba(244, 244, 244, 0.4);
}

.form-group .inline-input.other-choice,
.form-group .inline-input.specify-choice {
  /* pointer-events: none; */
  box-shadow: none;
  border: none;
  outline: none;
  color: white;
  overflow-y: auto;
  max-height: 67px;
}

.form-group .inline-input.other-choice:hover,
.form-group .inline-input.specify-choice:hover {
  box-shadow: none;
}

.form-group:has(.options-wrapper input[type="checkbox"]) .options-wrapper,
.form-group:has(.options-wrapper input[type="radio"]) .options-wrapper {
  position: relative;
  padding-top: 22px;
}

.form-group:has(.options-wrapper input[type="checkbox"]) .options-wrapper:before,
.form-group:has(.options-wrapper input[type="radio"]) .options-wrapper:before {
  font-size: 12px;
  line-height: 1;
  border-radius: 10px;
  border: 2px solid #1b73f0;
  color: #1b73f0;
  font-weight: 600;
  position: absolute;
  top: -5px;
  right: 0;
  padding: 2px 4px;
  background-color: white;
}

.form-group:has(.options-wrapper input[type="radio"]) .options-wrapper:before {
  content: "Pick One Item";
}

.form-group:has(.options-wrapper input[type="checkbox"]) .options-wrapper:before {
  content: "Pick Multiple Items";
}

.form-group .options-wrapper.imagery {
  grid-auto-rows: minmax(150px, 1fr);
}

.form-group .options-wrapper.imagery label {
  flex-direction: column;
  min-height: 150px;
  height: 100%;
}

.form-group .options-wrapper.imagery label img {
  border-radius: 5px;
  max-height: 180px;
}

.form-group .options-wrapper.imagery label {
  overflow: hidden;
  container-type: inline-size;
}

.form-group .options-wrapper.imagery label .choice-caption {
  margin-top: auto;
  position: absolute;
  bottom: 0px;
  /* background: white;
  background: linear-gradient(
    0deg,
    rgba(250, 195, 174, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.7) 90%
  ); */
  background: #90d0ffe6;
  box-shadow: -5px 0px 12px -3px rgba(255, 255, 255, 0.6);
  padding: 4px;
  width: 100%;
  font-size: 14px;
  opacity: 0;
  transform: translateY(50%);
  transition: opacity 0.4s ease, transform 0.6s ease;
  font-weight: 600;
}

.form-group .options-wrapper.imagery label:hover .choice-caption {
  opacity: 1;
  transform: translateY(0%);
}

.form-group
  .options-wrapper.imagery:has(input[type="checkbox"])
  label:has(input[type="checkbox"]:checked)
  .choice-caption,
.form-group .options-wrapper.imagery:has(input[type="radio"]) label:has(input[type="radio"]:checked) .choice-caption {
  background: #1860dd;
  box-shadow: -5px 0px 15px -6px rgba(245, 150, 121, 0.4);
  opacity: 1;
  transform: unset;
}

.form-group .options-wrapper.imagery .template-label-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  position: relative;
  margin-bottom: 5px;
}

.form-group .options-wrapper.imagery .template-label-wrapper:has(input[type="radio"]:checked)::before,
.form-group .options-wrapper.imagery .template-label-wrapper:has(input[type="checkbox"]:checked)::before {
  content: "\fc3e";
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: white;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3;
  font-size: 1.3rem;
  text-shadow: 1px 1px 0 #1b73f0, -1px -1px 0 #1b73f0, -1px 1px 0 #1b73f0, 1px -1px 0 #1b73f0, 1px 0px 0 #1b73f0,
    -1px 0px 0 #1b73f0, 0px 1px 0 #1b73f0, 0px -1px 0 #1b73f0;
}

.form-group .options-wrapper.imagery .template-label-wrapper .view-live {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  background: #1b73f0;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease;
}

.form-group .options-wrapper.imagery .template-label-wrapper .view-live:hover,
.form-group .options-wrapper.imagery .template-label-wrapper .view-live:focus {
  background: #1b73f0dd;
}

.form-group .options-wrapper.imagery .template-label-wrapper .view-live i.fi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

/* .form-group:has(.options-wrapper input[type="checkbox"]) .label-title,
.form-group:has(.options-wrapper input[type="radio"]) .label-title {
  position: relative;
  padding-bottom: 22px;
}

.form-group:has(.options-wrapper input[type="radio"]) .label-title:before,
.form-group:has(.options-wrapper input[type="checkbox"]) .label-title:before {
  font-size: 12px;
  line-height: 1;
  border-radius: 10px;
  border: 2px solid #1b73f0;
  color: #1b73f0;
  font-weight: 600;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px 4px;
  background-color: white;
   width: 100%; 
 } 

.form-group:has(.options-wrapper input[type="radio"]) .label-title:before {
  content: "Pick One Item";
}

.form-group:has(.options-wrapper input[type="checkbox"]) .label-title:before {
  content: "Pick Multiple Items";
}
*/
.form-group.file-group {
  /* position: relative; */
}

/* The input wrapper for the file field */
.form-group.file-group .file-selector-wrapper {
  position: relative;
  cursor: pointer;
  /* overflow: hidden; */
  --field-title: "Browse...";
  border-style: dashed;
  border: 1px solid #1b73f0;
  border-bottom: unset;
  box-shadow: inset 0 -2px 0 #1b73f0;
}

.form-group.file-group .file-selector-wrapper:hover {
  /* border: 1px dashed #1b73f0; */
  background-color: #1b73f0;
  color: white;
  border-bottom: unset;
}

.form-group.file-group .file-selector-wrapper input[type="file"] {
  display: none;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  z-index: 2;
}

.form-group.file-group .file-selector-wrapper::after {
  display: block;
  content: var(--field-title);
  width: 100%;
  text-align: center;

  /*background-color: #1b73f0;*/
  color: #1b73f0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  transition: background-color 0.2s;
}

/* Hover and focus states for better feedback */
.form-group.file-group .file-selector-wrapper:hover::after,
.form-group.file-group .file-selector-wrapper:has(input[type="file"]:focus)::after {
  color: #1b73f0;
  color: #1860dd;
  color: white;
}

.form-group.file-group .file-selector-wrapper:has(input[type="file"]:active) {
  background-color: #1860dd;
}

.form-group.file-group .file-selector-wrapper:has(input[type="file"]:active)::after {
  color: white;
}

/* Grid of selected files */
.file-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

.file-list-grid .file-item {
  --file-card-radius: 6px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid rgba(27, 115, 240, 0.4);
  border-radius: var(--file-card-radius);
  padding: 5px;
  padding-inline: 4px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  position: relative;
  transition: box-shadow 0.3s, background-color 0.3s, border-color 0.3s;
  height: 100%;
  width: 100%;
}

.file-list-grid .file-item.file-review {
  padding-bottom: 5px;
}

.file-list-grid .file-item::before {
  content: var(--file-extension);
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: rgba(255, 255, 255, 1);
  color: #1b73f0;
  padding: 4px;
  line-height: 1;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 3;
}

.file-list-grid .file-item:hover::before,
.file-list-grid .file-item:focus::before,
.file-list-grid .file-item:active::before {
  opacity: 1;
}

.file-list-grid .file-item[data-loading="true"] {
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
}

.file-list-grid .file-item[data-loading="true"]::after {
  content: "";
  background: red;
  background: url("./../../img/global/loading.gif");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

.file-list-grid .file-item[data-external="true"] {
  border: 1px solid rgba(27, 115, 240, 0.15);
}

.file-list-grid .file-item[data-loading="true"] img.preview {
  display: none;
}

.file-list-grid .file-item[data-external="true"] img.preview {
  opacity: 0.3;
}

.file-list-grid .file-item img.preview {
  aspect-ratio: 90 / 67;
  border-radius: 4px;
  object-fit: cover;
  background: url("./../../img/global/png-bg.png");
  background-size: 120%;
}

.file-list-grid .img-visualizer {
  position: fixed;
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.7s ease;
  z-index: 100;
  /* padding: 2px; */
  border-radius: 6px;
  background: white;
  box-shadow: 0px 0px 20px 6px rgba(21, 43, 86, 0.9);
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.file-list-grid .img-visualizer[aria-hidden="true"] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.file-list-grid .img-visualizer i {
  position: absolute;
  right: 7px;
  top: 7px;
  display: flex;
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease, text-shadow 0.3s ease;
  padding: 10px 10px 1rem 1rem;
  z-index: 200;
}

.file-list-grid .img-visualizer i:hover,
.file-list-grid .img-visualizer i:focus {
  transform: scale(1.05);
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}

.file-list-grid .img-visualizer i:active {
  transform: scale(1);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  transition: unset;
}

.file-list-grid:has(.img-visualizer:not([aria-hidden="true"]))::after {
  content: "";
  position: fixed;
  z-index: 99;
  background: rgba(21, 43, 86, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.file-list-grid .img-visualizer img.large {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
  user-select: none;
  flex-shrink: 1;
  flex-grow: 1;
  display: block;
  background: url("./../../img/global/png-bg.png");
  background-size: 10%;
}

.file-list-grid .file-item:has(img.preview) > i,
.file-list-grid .file-item:has(img.preview) .file-name,
.file-list-grid .file-item[data-loading="true"] > i,
.file-list-grid .file-item[data-loading="true"] .file-name,
.file-list-grid .file-item[data-loading="true"] .remove-file,
.file-list-grid .file-item[data-loading="true"] .confirm-file,
.file-list-grid .file-item[data-loading="true"] .external-file-buttons-container {
  display: none;
}

.file-list-grid .file-item i {
  font-size: 2rem;
  color: #1b73f0;
}

.file-list-grid .file-item .fi-sr-file-pdf,
.file-list-grid .file-item .fi-sr-file-video {
  color: #e73c3c;
}

.file-list-grid .file-item .fi-sr-document {
  color: #3498db;
}

.file-list-grid .file-item .fi-sr-file-image {
  color: #e67e22;
}

.file-list-grid .file-item .fi-sr-file-spreadsheet {
  color: #2ecc71;
}

.file-list-grid .file-item .fi-sr-file-zipper {
  color: #9b59b6;
}

.file-list-grid .file-item .fi-sr-file {
  /* no color: default */
}

.file-list-grid .file-item .file-name {
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.file-list-grid .file-item .external-file-buttons-container {
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 3px;
  container-type: inline-size;

  position: absolute;
  bottom: 0;
  user-select: none;
  border-bottom-left-radius: calc(var(--file-card-radius) - 2px);
  border-bottom-right-radius: calc(var(--file-card-radius) - 2px);
}

.file-list-grid .file-item .remove-file,
.file-list-grid .file-item .confirm-file {
  flex: 1;
  padding: 0px 8px;
  /* border: 1px solid transparent; */
  color: #1b73f0;
  background-color: white;
  transition: background-color 0.2s, color 0.2s;
}

.file-list-grid .file-item .confirm-file {
  font-weight: 500;
  display: none;
}

.file-list-grid .file-item[data-external="true"] .confirm-file {
  display: inline;
}

/* Hover states */
.file-list-grid .file-item:hover {
  box-shadow: 0 0 4px 0px rgba(27, 115, 240, 0.6);
  border-color: #1b73f0;
}

.file-list-grid .file-item .remove-file.focus,
.file-list-grid .file-item .remove-file.focus,
.file-list-grid .file-item .confirm-file:hover,
.file-list-grid .file-item .confirm-file:focus {
  /* border-top-color: #fefbfa; */
  background-color: #1b73f0;
  color: #fefbfa;
}

.file-list-grid .file-item .remove-file:active,
.file-list-grid .file-item .confirm-file:active {
  /* border-color: #1860dd; */
  background-color: #1860dd;
  color: #fefbfa;
}

.file-group .url-upload-wrapper {
  /* display: flex; */
  margin-top: 10px;
  gap: 10px;
  display: none;
}

.file-group .url-upload-wrapper > input[type="text"] {
  --font-size: 15px;

  background: transparent;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 -1px 0 #1b73f0;
  transition: box-shadow 0.5s, border-color 0.6s, outline 0.6s, background-color 0.6s;
  outline: none;
  color: #1b73f0;
  position: relative;
  font-size: var(--font-size);
}

.file-group .url-upload-wrapper > input[type="text"]::placeholder {
  color: #bbb;
}

.file-group .url-upload-wrapper > input[type="text"]:hover,
.file-group .url-upload-wrapper > input[type="text"]:focus,
.file-group .url-upload-wrapper > input[type="text"]:active {
  box-shadow: inset 0 -2px 0 #1b73f0;
}

.file-group:has(.warning-text.shown) .url-upload-wrapper > input[type="text"] {
  border: 2px solid #da4471;
}

.file-group .url-upload-wrapper > .submit-url {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1b73f0;
  line-height: 1;
  padding: 4px 8px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #1b73f0;
  color: white;
  box-shadow: 0 2px 8px -4px #1b73f0;
  cursor: pointer;
  user-select: none;
}

.file-group .url-upload-wrapper > .submit-url:hover,
.file-group .url-upload-wrapper > .submit-url:focus {
  background-color: #3695fb;
  border-color: #3695fb;
  box-shadow: 0 2px 6px -3px #1b73f0;
}

.file-group .url-upload-wrapper > .submit-url[disabled="true"] {
  background-color: #bbb;
  border-color: #bbb;
  box-shadow: unset;
  cursor: default;
}

.file-group .url-upload-wrapper {
  position: relative;
  padding-top: 48px;
}

.file-group .url-upload-wrapper::before {
  content: 'If you have a public link/url to the files, please paste the link here and click "Upload"';
  position: absolute;
  width: 100%;
  top: 0;
  text-align: left;
  font-size: 15px;
  color: #1b448d;
}

.page-main:has(.items-confirmation-container.shown) {
  overflow: hidden;
}

.page-main:has(.items-confirmation-container.shown) > *:not(.form-group.items),
.page-main:has(.items-confirmation-container.shown) .form-group.items .items-outer-container,
.page-main:has(.items-confirmation-container.shown) .form-group.items .input-extras,
.page-main:has(.items-confirmation-container.shown) .form-group.items .add-items-container {
  display: none;
}

.form-group.items {
  display: block;
}

.page-main:has(.items-confirmation-container.shown) > .form-group.items {
  height: 100%;
}

.form-group.items .items-confirmation-container {
  display: none;
  position: absolute;
  width: 100%;
  height: calc(100% - var(--bucket-header-height) - var(--bucket-footer-height));
  padding-bottom: 22px;
  top: var(--bucket-header-height);
  left: 0;
  background: #fbfbfb;
}

.form-group.items .items-confirmation-container.shown {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  /* padding-top: 0.75rem; */
  padding: 0.75rem;
}

.form-group.items .items-confirmation-container .confirmation-body-outer {
  flex-grow: 1;
  /* overflow: hidden; */
  overflow: visible;
  border-radius: 10px;
  border: 1px solid #1b73f0;
  border-left: unset;
  border-right: unset;
}

.form-group.items .items-confirmation-container .confirmation-body {
  height: 100%;
  /* overflow-y: scroll; */
  overflow: visible;
  padding: 0 10px;
}

.form-group.items .items-confirmation-container .confirmation-body .options-wrapper.item-options {
  padding-top: 0;
  margin-top: 16px;
  margin-bottom: 20px;
  grid-auto-rows: minmax(12px, 1fr);
  row-gap: 15px;
  column-gap: 10px;
}

.form-group.items .items-confirmation-container .confirmation-body .options-wrapper.item-options::before {
  display: none;
  content: unset;
}

.form-group.items .items-confirmation-container .confirmation-body .options-wrapper.item-options > label {
  background: #fbfbfb;
}

.form-group.items
  .items-confirmation-container
  .confirmation-body
  .options-wrapper.item-options
  > label:has(input:checked) {
  background: #1b73f0;
}

.form-group.items .item-type-name {
  --type-indent: 5px;
  /* color: #1b73f0;
  color: #f5f5f5; */
  color: #eff8ff;
  width: calc(100% + calc(2 * var(--type-indent)));
  background: #fbfbfb;
  background: #5cb5fe;
  box-shadow: inset 2px -4px 8px -6px rgba(27, 115, 240, 0.5), 0px 4px 6px -4px rgba(27, 115, 240, 0.6);
  font-weight: 600;
  /* padding-block: 2px; */
  padding-inline: var(--type-indent);
  padding-top: 4px;
  padding-bottom: 2px;
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  align-items: center;
  position: sticky;
  /* top: -1px; */
  top: calc(-0.75rem - 1px);
  left: calc(0px - var(--type-indent));
  transform: translateX(calc(0px - var(--type-indent)));
  margin-bottom: 5px;
  border-radius: 4px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 12px;
  z-index: 2;
  border-bottom: 2px solid #5cb5fe;
  border-left: 2px solid #5cb5fe;
  user-select: none;
  /*border-right: 2px solid #fbfbfb;*/
}

.form-group.items .item-type-name > span {
  flex-grow: 1;
}

.form-group.items .item-type-name > i.fi {
  background: rgb(245, 190, 190, 0);
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: color 0.6s ease, background-color 0.5s ease;
}

.form-group.items .item-type-name > i.fi:hover {
  background: rgb(245, 190, 190, 1);
  color: white;
}

.form-group.items .item-type-name > i.fi:active {
  background: #1b73f0;
  color: white;
}

.form-group.items .item-type-name::before {
  content: "";
  width: calc(100% + var(--type-indent));
  height: 10px;
  position: absolute;
  background: #fbfbfb;
  bottom: 100%;
  left: -5px;
  z-index: -1;
}

.form-group.items .items-confirmation-container .confirmation-body .options-wrapper.item-options label.item-option {
  --item-category: "Empty Category";
  position: relative;
  min-height: 12px;
  padding: 12px;
}

.form-group.items
  .items-confirmation-container
  .confirmation-body
  .options-wrapper.item-options
  label.item-option::before {
  content: var(--item-category);
  display: inline;
  max-width: 165px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  position: absolute;
  top: -9px;
  left: -6px;
  border-radius: 4px;
  font-size: 11px;
  background: #1b73f0;
  color: #f5f5f5;
  padding: 0 4px;
  border: 1px solid transparent;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.form-group.items
  .items-confirmation-container
  .confirmation-body
  .options-wrapper.item-options
  label.item-option:has(input:checked)::before {
  border: 1px solid #f5f5f566;
  box-shadow: 4px 4px 12px -8px #f5f5f5;
}

.form-group.items
  .items-confirmation-container
  .confirmation-body
  .options-wrapper.item-options
  label.item-option::after {
  content: "\f1ee";
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: white;
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.form-group.items
  .items-confirmation-container
  .confirmation-body
  .options-wrapper.item-options
  label.item-option:has(input:checked)::after {
  opacity: 1;
}

.form-group.items
  .items-confirmation-container
  .confirmation-body
  .options-wrapper.item-options
  label.item-option
  .item-name {
  font-size: 1rem;
}

.form-group.items .items-confirmation-container .confirmation-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
}

.form-group.items .items-confirmation-container .confirmation-footer .confirm-items-btn {
  background-color: #1b73f0;
  color: white;
  border-radius: 8px;
  text-align: center;
  width: 100%;
  padding: 6px 12px;
  box-shadow: 0px 3px 4px -2px rgba(27, 115, 240, 0.75);
  user-select: none;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group.items .items-confirmation-container .confirmation-footer .confirm-items-btn:hover,
.form-group.items .items-confirmation-container .confirmation-footer .confirm-items-btn:focus {
  box-shadow: 0px 4px 4px -2px rgba(27, 115, 240, 0.75);
  background-color: #1b73f0e6;
}

.form-group.items .items-confirmation-container .confirmation-footer .confirm-items-btn:active {
  box-shadow: 0px 3px 2px -2px rgba(27, 115, 240, 0.85);
  background-color: #1b73f0;
  transition: box-shadow 0.1s ease;
}

.form-group.items,
.form-group.team {
  /* position: relative; */
}

.form-group.items .add-items-container {
  position: sticky;
  z-index: 100;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-block: 10px;
}

.form-group.items .add-item {
  --image-selection-bg: #1b73f0;
  border-radius: 16px;
  background: var(--image-selection-bg);
  padding: 4px 12px 4px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 2px 2px 10px -2px rgb(0, 0, 0, 0.3);
  z-index: 100;
  font-size: 14px;
  font-weight: 500;
  color: #fdfdfd;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
}

.form-group.items .add-item:hover,
.form-group.items .add-item:focus {
  --image-selection-bg: #5cb5fe;
  box-shadow: 2px 2px 10px -2px rgb(0, 0, 0, 0.4);
}

.form-group.items .add-item:active {
  --image-selection-bg: #3695fb;
  box-shadow: 2px 2px 6px -2px rgb(0, 0, 0, 0.2);
}

.form-group.items .add-item i.fi {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-group.items .items-outer-container,
.form-group.team .team-outer-container {
  --item-type: "Items";
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding-top: 37px;
  position: relative;
}

.form-group.items .items-outer-container {
  --cascade-radius: 12px;
  border: 1px solid #1b73f0;
  border-top-left-radius: var(--cascade-radius);
  border-top-right-radius: var(--cascade-radius);
  /* overflow: hidden; */
  padding-top: 28px;
  display: flex;
  min-height: auto;
  /* min-height: -webkit-fit-content;
  min-height: fit-content; */
}

.form-group.items .items-outer-container:has(+ .items-outer-container),
.form-group.team .team-outer-container:has(+ .team-outer-container) {
  margin-bottom: 25px;
}

.form-group.items .items-outer-container:empty,
.form-group.team .team-outer-container:empty {
  display: none;
}

.form-group.items .items-outer-container::before,
.form-group.team .team-outer-container::before {
  content: var(--item-type);
  position: absolute;
  top: 0;
  background-color: #1b73f0;
  padding: 2px 6px;
  width: 100%;
  /* border-radius: 6px; */
  border-bottom: 2px solid hsl(17, 88%, 98%);
  color: hsl(17, 88%, 98%);
  font-weight: 500;
}

.form-group.items .items-outer-container::before {
  border-bottom: unset;
  border-top-left-radius: var(--cascade-radius);
  border-top-right-radius: var(--cascade-radius);
}

.form-group.items .item-card-container {
  position: fixed;
  height: 100%;
  top: 0;
  width: 100%;
  background: rgba(27, 115, 240, 0.7);
  background: #0e1b53e6;
  z-index: 200;
  left: 0;
  overflow-y: auto;
  border: 1px solid #1b73f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.form-group.items .item-card-container > .item-card {
  /* margin-inline: 10px; */
  /* margin-top: 10px; */
  background-color: #ffffff;
  background-image: repeating-radial-gradient(circle at 100% 0, transparent 0, hwb(215 31% 6% / 0.05) 10px),
    repeating-linear-gradient(hwb(215 31% 6% / 0.05), hwb(215 31% 6% / 0.01));
  max-height: calc(100% - 0px);
  height: 100%;
  overflow-y: auto;
}

.form-group.items .item-card-container > .item-card[data-simplebar] {
  width: 100%;
  height: fit-content;
}

.form-group.items .item-card-container > .item-card .card-controls .close-item {
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #5cb5fe;
  transition: width 0.5s, opacity 0.3s;
  padding-inline: 4px;
}

.form-group.items .item-card-container > .item-card .card-controls .close-item:hover,
.form-group.items .item-card-container > .item-card .card-controls .close-item:focus {
  background: #5cb5fe;
  border-radius: 12px;
}

.form-group.items .item-card-container > .item-card .card-controls .close-item i.fi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: width 0.5s, opacity 0.3s;
}

.form-group.items .item-card-container > .item-card .card-controls .close-item .text {
  transition: width 0.5s, opacity 0.3s;
  width: 0px;
  max-width: fit-content;
  overflow: hidden;
  opacity: 0;
}

.form-group.items .item-card-container > .item-card .card-controls .close-item:hover .text,
.form-group.items .item-card-container > .item-card .card-controls .close-item:focus .text,
.form-group.items .item-card-container > .item-card .card-controls .close-item:active .text {
  width: 45px;
  opacity: 1;
  color: white;
}

.form-group.items .item-card-container > .item-card .card-controls .close-item:active {
  background: #5cb5feaa;
}

.form-group.items .item-card-container > .item-card .card-controls .close-item:active,
.form-group.items .item-card-container > .item-card .card-controls .close-item:active i.fi,
.form-group.items .item-card-container > .item-card .card-controls .close-item:active .text {
  transition: unset;
}

.form-group.items .item-card-container > .item-card .card-controls .close-item:hover > *,
.form-group.items .item-card-container > .item-card .card-controls .close-item:focus > *,
.form-group.items .item-card-container > .item-card .card-controls .close-item:active > * {
  color: white;
}

.form-group.items .item-card-container > .item-card .image-menu-container {
  position: relative;
  height: 0;
}

.form-group.items .item-card-container > .item-card .image-menu-container .image-menu {
  position: absolute;
  bottom: 0;
  right: 0;
  width: fit-content;
  border-radius: 25px;
  gap: 4px;
  padding-inline: 8px;
}

.form-group.items .item-card-container > .item-card .image-menu-container .image-menu .add-image-text {
  font-size: 12px;
  white-space: nowrap;
  color: white;
}

.form-group.items .item-card,
.form-group.team .team-card {
  position: relative;
  background: rgba(27, 115, 240, 0.05);
  border: 1px solid rgba(27, 115, 240, 0.4);
  border-radius: 6px;
  box-shadow: 0px 0px 8px -1px rgba(27, 115, 240, 0.2);
  padding: 10px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  /* gap: 10px;*/
  /* background: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(27, 115, 240, 0.05) 10px),
    repeating-linear-gradient(rgba(27, 115, 240, 0.05), rgba(27, 115, 240, 0.02)); */
}

/* .form-group.items .item-card:nth-child(even), */
.form-group.team .team-card:nth-child(even) {
  background: rgba(27, 115, 240, 0.1);
  /* background: repeating-radial-gradient(circle at 100% 0, transparent 0, hwb(215 31% 6% / 0.05) 10px),
    repeating-linear-gradient(hwb(215 31% 6% / 0.05), hwb(215 31% 6% / 0.01)); */
  /* background: white; */
}

.form-group.items .item-card.new,
.form-group.team .team-card.new {
  background: rgba(27, 115, 240, 0.03);
  background: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(27, 115, 240, 0.02) 10px),
    repeating-linear-gradient(rgba(27, 115, 240, 0.05), rgba(27, 115, 240, 0.02));
}

.form-group.items .item-card.deleting,
.form-group.team .team-card.deleting {
  background: rgba(244, 87, 76, 0.1);
  border: 1px solid rgba(244, 87, 76, 0.4);
}

.form-group.items .item-card[aria-hidden="true"],
.form-group.items .item-card.hidden-card,
.form-group.team .team-card[aria-hidden="true"],
.form-group.team .team-card.hidden-card {
  height: min-content;
}

.form-group.items .item-card[aria-hidden="true"] > *:not(.card-controls, .card-header),
.form-group.items .item-card.hidden-card > *:not(.card-controls, .card-header),
.form-group.team .team-card[aria-hidden="true"] > *:not(.card-controls, .card-header),
.form-group.team .team-card.hidden-card > *:not(.card-controls, .card-header) {
  display: none;
}

.form-group.items .item-card[aria-hidden="true"] .card-header,
.form-group.items .item-card.hidden-card .card-header,
.form-group.team .team-card[aria-hidden="true"] .card-header,
.form-group.team .team-card.hidden-card .card-header {
  visibility: visible;
  margin-bottom: 0;
}

.form-group.items .card-header,
.form-group.team .card-header {
  /* visibility: hidden; */
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  color: #1b73f0;
  margin-right: 74px;
  line-height: 1;
  margin-bottom: 5px;
  min-height: 19.19px;
  user-select: none;
}

.form-group.items .card-header > span,
.form-group.team .card-header > span {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  line-height: 1.2;
}

.form-group.items .card-header i,
.form-group.team .card-header i {
  font-size: 1rem;
  color: #1b73f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-group.items .card-header i.fi-sr-trash,
.form-group.team .card-header i.fi-sr-trash {
  position: absolute;
  top: 0;
  left: 0;
}

.form-group.items .card-controls,
.form-group.team .card-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
  z-index: 3;
}

.form-group.items .card-controls i.fi,
.form-group.team .card-controls i.fi {
  cursor: pointer;
  font-size: 1rem;
  color: #5cb5fe;
  transition: color 0.3s;
}

.form-group.items .card-controls i.fi-rr-arrows,
.form-group.items .card-controls i.fi-sr-trash,
.form-group.items .card-controls i.fi-sr-eye-crossed,
.form-group.team .card-controls i.fi-rr-arrows,
.form-group.team .card-controls i.fi-sr-eye-crossed {
  display: none;
}

.form-group.items .card-controls i.fi:hover,
.form-group.items .card-controls i.fi:focus,
.form-group.team .card-controls i.fi:hover,
.form-group.team .card-controls i.fi:focus {
  color: #1b73f0;
}

.form-group.items .card-controls i.fi-sr-eye,
.form-group.items .card-controls i.fi-sr-trash-can-slash,
.form-group.team .card-controls i.fi-sr-eye,
.form-group.team .card-controls i.fi-sr-trash-can-slash {
  display: none;
}

.form-group.items .card-controls i.fi-sr-trash-can-slash,
.form-group.team .card-controls i.fi-sr-trash-can-slash {
  color: #da4471;
}

.form-group.items .item-card[aria-hidden="true"] .card-controls i.fi-sr-eye,
.form-group.items .item-card.hidden-card .card-controls i.fi-sr-eye,
.form-group.items .item-card.deleting .card-controls i.fi-sr-trash-can-slash,
.form-group.team .team-card[aria-hidden="true"] .card-controls i.fi-sr-eye,
.form-group.team .team-card.hidden-card .card-controls i.fi-sr-eye,
.form-group.team .team-card.deleting .card-controls i.fi-sr-trash-can-slash {
  display: block;
}

.form-group.items .item-card.deleting .card-controls .fi-sr-trash::before,
.form-group.team .team-card.deleting .card-controls .fi-sr-trash::before {
  content: "\fe85";
  color: #f4574c;
}

.form-group.items .item-card[aria-hidden="true"] .card-controls i.fi-sr-eye-crossed::before,
.form-group.items .item-card.hidden-card .card-controls i.fi-sr-eye-crossed::before,
.form-group.team .team-card[aria-hidden="true"] .card-controls i.fi-sr-eye-crossed::before,
.form-group.team .team-card.hidden-card .card-controls i.fi-sr-eye-crossed::before {
  content: "\f61f";
}

.form-group.items .card-controls i.fi-rr-arrows,
.form-group.team .card-controls i.fi-rr-arrows {
  cursor: move;
}

.form-group.items .card-section,
.form-group.team .card-section {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.form-group.items .card-row,
.form-group.team .card-row {
  display: flex;
  gap: 1rem;
  margin-block: 5px;
}

.form-group.items .card-row:last-child,
.form-group.team .card-row:last-child {
  margin-bottom: 0px;
}

.form-group.items .card-row-2 > .card-section,
.form-group.team .card-row-2 > .card-section {
  flex: 1;
}

.form-group.items .card-row-60 > .card-section:first-child,
.form-group.team .card-row-60 > .card-section:first-child {
  flex: 0 0 60%;
}

.form-group.items .images-section .images-title,
.form-group.team .images-section .images-title {
  user-select: none;
  width: 100%;
  text-align: center;
  /* background: #1b73f0a5; */
  color: #1860dd;
  font-weight: 600;
  font-size: 14px;
  border-radius: 66px;
  margin-block: 10px;
  border-bottom: 2px solid #1b73f0;
  box-shadow: 0px 3px 6px -4px #1b73f0a5;
  position: relative;
}

.form-group.items .images-section:not(:has(.image-wrapper)) .images-title,
.form-group.team .images-section:not(:has(.image-wrapper)) .images-title {
  margin-bottom: 45px;
}
.form-group.items .images-section:not(:has(.image-wrapper)) .images-title::after,
.form-group.team .images-section:not(:has(.image-wrapper)) .images-title::after {
  content: "No images selected...";
  position: absolute;
  bottom: calc(0px - 100% - 13px);
  color: #1b73f0;
  border: 1px dashed #1b73f0;
  background: rgba(245, 250, 255, 0.2);
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px;
}

.form-group.items .images-container,
.form-group.team .images-container {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  /*margin-bottom: 10px;*/
}

.form-group.items .images-container .image-wrapper,
.form-group.team .images-container .image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  border: 1px solid rgba(27, 115, 240, 0.4);
  border-radius: 6px;
  background: rgba(245, 245, 245, 0.35);
  box-shadow: 0px 0px 8px -1px rgba(27, 115, 240, 0.2);
}

.form-group.items .images-container .image-wrapper > i.fi-sr-trash,
.form-group.team .images-container .image-wrapper > i.fi-sr-trash {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 5;
  padding: 6px;
  border-radius: 50%;
  line-height: 1;
  width: 26px;
  height: 26px;
  background: #3695fb;
  color: white;
  font-size: 14px;
  text-shadow: 0px 0px 2px rgba(225, 133, 96, 0.3);
  box-shadow: 0px 0px 6px -1px rgba(27, 115, 240, 0.6);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-group.items .images-container .image-wrapper > i.fi-sr-trash:hover,
.form-group.items .images-container .image-wrapper > i.fi-sr-trash:focus,
.form-group.team .images-container .image-wrapper > i.fi-sr-trash:hover,
.form-group.team .images-container .image-wrapper > i.fi-sr-trash:focus {
  background: rgba(218, 68, 113, 0.9);
}

.form-group.items .images-container .image-wrapper > i.fi-sr-trash:active,
.form-group.team .images-container .image-wrapper > i.fi-sr-trash:active {
  background: rgba(218, 68, 113, 1);
  text-shadow: unset;
}

.form-group.items .images-container .image-wrapper.deleting > i.fi-sr-trash,
.form-group.team .images-container .image-wrapper.deleting > i.fi-sr-trash {
  background: #da4471;
}

.form-group.items .images-container .image-wrapper.deleting > i.fi-sr-trash::before,
.form-group.team .images-container .image-wrapper.deleting > i.fi-sr-trash::before {
  content: "\fe85";
}

.form-group.items .images-container .image-wrapper img,
.form-group.team .images-container .image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.form-group.items .add-image-button,
.form-group.team .add-image-button {
  font-weight: 600;
  color: #1b73f0;
  cursor: pointer;
  user-select: none;
  background: #1b73f033;
  border-radius: 8px;
  border: 2px solid #1b73f0;
  text-align: center;
  transition: background-color 0.4s ease, color 0.5s ease;
}

.form-group.items .add-image-button:hover,
.form-group.items .add-image-button:focus,
.form-group.team .add-image-button:hover,
.form-group.team .add-image-button:focus {
  background: #1b73f0a5;
  color: white;
  box-shadow: 0px 0px 6px -1px rgba(27, 115, 240, 0.6);
}

.form-group.items .add-image-button:active,
.form-group.team .add-image-button:active {
  background: #1b73f0;
}

.form-group.items .images-section .image-menu,
.form-group.team .images-section .image-menu {
  --image-selection-bg: #1b73f0;
  position: absolute;
  bottom: 5px;
  right: 5px;
  border-radius: 50%;
  background: var(--image-selection-bg);
  padding: 4px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 2px 2px 8px -2px rgb(0, 0, 0, 0.2);
}

.form-group.items .images-section .image-menu > i.fi,
.form-group.team .images-section .image-menu > i.fi {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
}

.form-group.items .images-section .image-menu .image-menu-expand,
.form-group.team .images-section .image-menu .image-menu-expand {
  border-radius: 14px;
  transform-origin: calc(100% - 15px) calc(100% - 15px);
  transform: scale(0);
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--image-selection-bg);
  /*padding-block: 10px;*/
  display: flex;
  flex-direction: column-reverse;
  transition: transform 0.3s ease;
  user-select: none;
  box-shadow: 3px 3px 8px -2px rgb(241, 89, 30, 0.25);
}

.form-group.items .images-section .image-menu:hover .image-menu-expand,
.form-group.team .images-section .image-menu:hover .image-menu-expand {
  transform: scale(1);
  min-height: 30px;
  overflow: hidden;
  cursor: pointer;
}

.form-group.items .images-section .image-menu .image-menu-expand i.fi,
.form-group.team .images-section .image-menu .image-menu-expand i.fi {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-group.items .images-section .image-menu .image-menu-expand .image-menu-option,
.form-group.team .images-section .image-menu .image-menu-expand .image-menu-option {
  opacity: 0;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: white;
  transition: opacity 0.6s ease;
  padding-inline: 10px;
  padding-block: 5px;
  cursor: pointer;
}

.form-group.items .images-section .image-menu:hover .image-menu-expand .image-menu-option,
.form-group.team .images-section .image-menu:hover .image-menu-expand .image-menu-option {
  opacity: 1;
}

.form-group.items .images-section .image-menu .image-menu-expand .image-menu-option:first-child,
.form-group.team .images-section .image-menu .image-menu-expand .image-menu-option:first-child {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.form-group.items .images-section .image-menu .image-menu-expand .image-menu-option:last-child,
.form-group.team .images-section .image-menu .image-menu-expand .image-menu-option:last-child {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.form-group.items .images-section .image-menu .image-menu-expand .image-menu-option:only-child,
.form-group.team .images-section .image-menu .image-menu-expand .image-menu-option:only-child {
  border-radius: 14px;
}

.form-group.items .images-section .image-menu .image-menu-expand .image-menu-option:hover,
.form-group.items .images-section .image-menu .image-menu-expand .image-menu-option:focus,
.form-group.team .images-section .image-menu .image-menu-expand .image-menu-option:hover,
.form-group.team .images-section .image-menu .image-menu-expand .image-menu-option:focus {
  background: #5cb5fe;
}

.form-group.items .images-section .image-menu .image-menu-expand .image-menu-option:active,
.form-group.team .images-section .image-menu .image-menu-expand .image-menu-option:active {
  background: #3695fb;
}

.form-group.items .images-section .image-menu .image-menu-expand .image-menu-option [type="file"],
.form-group.team .images-section .image-menu .image-menu-expand .image-menu-option [type="file"] {
  display: none;
}

.form-group.items .images-section.url-upload .image-menu .image-menu-expand .image-menu-option.url,
.form-group.team .images-section.url-upload .image-menu .image-menu-expand .image-menu-option.url {
  display: none;
}

.form-group.items .images-section .url-upload-wrapper,
.form-group.team .images-section .url-upload-wrapper {
  display: none;
  margin-top: 10px;
  gap: 10px;
  margin-bottom: 32px;
}

.form-group.items .images-section .url-upload-wrapper > input[type="text"],
.form-group.team .images-section .url-upload-wrapper > input[type="text"] {
  --font-size: 15px;

  background: transparent;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 -1px 0 #1b73f0;
  transition: box-shadow 0.5s, border-color 0.6s, outline 0.6s, background-color 0.6s;
  outline: none;
  color: #1b73f0;
  position: relative;
  font-size: var(--font-size);
}

.form-group.items .images-section .url-upload-wrapper > input[type="text"]::placeholder,
.form-group.team .images-section .url-upload-wrapper > input[type="text"]::placeholder {
  color: #bbb;
}

.form-group.items .images-section .url-upload-wrapper > input[type="text"]:hover,
.form-group.items .images-section .url-upload-wrapper > input[type="text"]:focus,
.form-group.items .images-section .url-upload-wrapper > input[type="text"]:active,
.form-group.team .images-section .url-upload-wrapper > input[type="text"]:hover,
.form-group.team .images-section .url-upload-wrapper > input[type="text"]:focus,
.form-group.team .images-section .url-upload-wrapper > input[type="text"]:active {
  box-shadow: inset 0 -2px 0 #1b73f0;
}

.form-group.items .images-section:has(.warning-text.shown) .url-upload-wrapper > input[type="text"],
.form-group.team .images-section:has(.warning-text.shown) .url-upload-wrapper > input[type="text"] {
  border: 2px solid #da4471;
}

.form-group.items .images-section .url-upload-wrapper > .submit-url,
.form-group.team .images-section .url-upload-wrapper > .submit-url {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1b73f0;
  line-height: 1;
  padding: 4px 8px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #1b73f0;
  color: white;
  box-shadow: 0 2px 8px -4px #1b73f0;
  cursor: pointer;
  user-select: none;
}

.form-group.items .images-section .url-upload-wrapper > .submit-url:hover,
.form-group.items .images-section .url-upload-wrapper > .submit-url:focus,
.form-group.team .images-section .url-upload-wrapper > .submit-url:hover,
.form-group.team .images-section .url-upload-wrapper > .submit-url:focus {
  background-color: #3695fb;
  border-color: #3695fb;
  box-shadow: 0 2px 6px -3px #1b73f0;
}

.form-group.items .images-section .url-upload-wrapper > .submit-url[disabled="true"],
.form-group.team .images-section .url-upload-wrapper > .submit-url[disabled="true"] {
  background-color: #bbb;
  border-color: #bbb;
  box-shadow: unset;
  cursor: default;
}

.form-group.items .images-section.url-upload .url-upload-wrapper,
.form-group.team .images-section.url-upload .url-upload-wrapper {
  display: flex;
}

.item-table {
  width: 100%;
  border-collapse: collapse;
}

.item-table .item-row {
  user-select: none;
  position: relative;
  /* border-bottom: 1px dotted #66666666; */
}

.item-table .item-row:hover {
  position: relative;
  cursor: default;
}

/* .item-table .item-row .icon-column:hover::after, */
.item-table .item-row .thumb-column:hover::after,
.item-table .item-row .name-column:hover::after,
.item-table .item-row .price-column:hover::after,
.item-table .item-row .promo-price-column:hover::after {
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  content: "\fa7f";
  background: #0e1b53c6;
  top: 0;
  right: 0;
  /* width: calc(100% - 33px); */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}

@media only screen and (hover: none) and (pointer: coarse) {
  .item-table .item-row .thumb-column:hover::after,
  .item-table .item-row .name-column:hover::after,
  .item-table .item-row .price-column:hover::after,
  .item-table .item-row .promo-price-column:hover::after {
    content: "";
    display: none;
  }
}

.item-table .item-row:has(.grip:hover) {
  background: #1b73f0;
  color: white;
}

.item-table .item-row:has(.grip:hover) i.fi {
  color: white;
}

.item-table .item-row:has(.delete:hover),
.item-table .item-row.deleting {
  background: #da4471;
  color: white;
}

.item-table .item-row:has(.delete:hover) i.fi,
.item-table .item-row.deleting i.fi {
  color: white;
}

.item-table .item-row.deleting i.fi-sr-trash::before {
  content: "\fe85";
}

.item-table .item-row:has(.grip:hover) .thumbnail,
.item-table .item-row:has(.delete:hover) .thumbnail,
.item-table .item-row.deleting .thumbnail {
  /* background: #426ead; */
  /* filter: saturate(0.5); */
  opacity: 0.2;
}

.item-table .item-row:last-child {
  overflow: hidden;
  border-bottom-left-radius: var(--cascade-radius);
  border-bottom-right-radius: var(--cascade-radius);
  /* display: block; */
}

.item-table th,
.item-table td {
  text-align: left;
}

.item-row .name-string {
  max-width: 325px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.name-header {
  background: #c3e5ff;
  display: none;
}

.name-header th {
  font-weight: 600;
}

.category-header th {
  background-color: #daeeff;
  font-weight: 500;
  padding-left: 12px;
}

.category-header th {
  position: sticky;
  top: -14px;
  z-index: 5; /* or higher if needed */
}

.thumbnail {
  width: 40px;
  height: 40px;
}

.thumbnail > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #eee; */
}

.thumbnail.empty > img {
  /* width: 70%;
  height: 70%; */
  width: 95%;
  height: 95%;
}

.icon-column {
  padding: 0 4px;
  cursor: pointer;
  width: 30px;
  max-width: 30px;
}

.icon-column.grip {
  cursor: grab;
  display: none;
}
.icon-column.grip:active {
  cursor: grabbing;
}

.icon-column > i.fi {
  display: flex;
  margin-inline: auto;
  width: 16px;
  height: 16px;
  color: #666;
}

.icon-column.delete > i.fi {
  color: #da447144;
  color: #da4471;
}

.name-column {
  padding-left: 10px;
}

.thumb-column {
  width: 42px;
  max-width: 42px;
}

.price-column {
  min-width: 54px;
  max-width: 72px;
  width: 72px;
}

.hidden-column {
  display: none;
}

@media only screen and (max-width: 566px) {
  .item-row .name-string {
    max-width: 300px;
  }
}

@media only screen and (max-width: 530px) {
  .item-row .name-string {
    max-width: 265px;
  }
}

@media only screen and (max-width: 500px) {
  .item-row .name-string {
    max-width: 235px;
  }
}

@media only screen and (max-width: 475px) {
  .item-row .name-string {
    max-width: 210px;
  }
}

@media only screen and (max-width: 450px) {
  .item-row .name-string {
    max-width: 185px;
  }
}

@media only screen and (max-width: 420px) {
  .item-row .name-string {
    max-width: 150px;
  }
}

@media only screen and (max-width: 375px) {
  .item-row .name-string {
    max-width: 150px;
  }
}

@media only screen and (max-width: 350px) {
  .item-row .name-string {
    max-width: 125px;
  }
}

@media only screen and (max-width: 325px) {
  .item-row .name-string {
    max-width: 80px;
  }
}

/*@ Team Now */

.form-group.team .card-row .card-section.form-group {
  --field-title: "Profile URLs";
}

.form-group.team .team-outer-container {
  display: flex;
  flex-direction: column;
}

.form-group.team .team-outer-container .main-image-section {
  text-align: center;
  margin-bottom: 20px;
  user-select: none;
}

.form-group.team .team-outer-container .main-image-section .main-member-image {
  max-width: 120px;
  border-radius: 50%;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.form-group.team .team-card.new {
  cursor: pointer;
  user-select: none;
  min-height: 80px;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  color: #1b73f0;
  font-weight: 600;
  transition: all 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.form-group.team .team-card.new > i.fi {
  font-size: 1.5rem;
}

.form-group.team .team-card.new:hover,
.form-group.team .team-card.new:focus {
  background: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(27, 115, 240, 0.06) 11px),
    repeating-linear-gradient(rgba(27, 115, 240, 0.12), rgba(27, 115, 240, 0.06));
  border: 1px solid #1b73f0;
}

.form-group.team .team-card.new:active {
  background: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(27, 115, 240, 0.06) 8px),
    repeating-linear-gradient(rgba(27, 115, 240, 0.12), rgba(27, 115, 240, 0.06));
  transition: background 0.03s ease, color 0.03s ease, border 0.03s ease;
  border: 1px solid #1b73f0;
}

.form-group.items .card-row .input-wrapper,
.form-group.team .card-row .input-wrapper {
  border: 1px solid #90d0ff;
}

.form-group.team .team-card .input-wrapper.url-collection {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group.team .team-card .input-wrapper.url-collection .team-input {
  border-radius: 2px;
  border-bottom: 1px dashed rgba(27, 115, 240, 0.7);
}

.form-group.team .team-card .input-wrapper.url-collection .team-input:last-child {
  border-bottom: unset;
}

.form-group.team .team-card .input-wrapper.url-collection .team-input::placeholder {
  color: #33333333;
}

.form-group.team .team-card .thumbnails-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  max-width: 200px;
  margin-inline: auto;
  user-select: none;
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bde2ff;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  min-height: 32px;
  min-width: 32px;
  position: relative;
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell:hover,
.form-group.team .team-card .thumbnails-grid .thumbnail-cell:focus {
  border: 1px solid #1a4db3;
  box-shadow: 0px 0px 5px -1px rgba(26, 77, 179, 0.45);
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell:active {
  border: unset;
  box-shadow: 0px 0px 5px -1px rgba(26, 77, 179, 0.05);
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell > img {
  aspect-ratio: 1 /1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell > i {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1860dd;
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell:nth-child(6) {
  display: none;
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell.deleting::before {
  position: absolute;
  content: "\fe85";
  background: rgba(218, 68, 113, 0.8);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: flex;
  color: #eff8ff;
  justify-content: center;
  align-items: center;
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell:only-child {
  grid-column: 1 / -1;
  min-width: 120px;
  font-size: 14px;
  gap: 5px;
  padding-inline: 5px;
  color: #1860dd;
  font-weight: 600;
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell > span {
  display: none;
}

.form-group.team .team-card .thumbnails-grid .thumbnail-cell:only-child > span {
  display: block;
}

/*@ Color Now */

.form-group.color .label-subtitle {
  margin-bottom: 1.2rem;
}

.form-group.color:has(.options-wrapper input[type="radio"]) .options-wrapper {
  padding-top: 0;
}
.form-group.color:has(.options-wrapper input[type="radio"]) .options-wrapper:before {
  display: none;
}

.form-group.color .options-wrapper {
  --cell-height: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 60px));
  gap: 10px;
  grid-auto-rows: minmax(var(--cell-height), 1fr);
  max-width: 100%;
  margin-inline: auto;
}

.form-group.color .options-wrapper label {
  --color-rgb: 255, 255, 255;
  --color-rgb-contrast: 0, 0, 0;
  min-height: var(--cell-height);
}

.form-group.color .options-wrapper > label {
  width: 100%;
}

.form-group.color .options-wrapper label:not(.other-choice) {
  background: rgb(var(--color-rgb), 1);
  border-color: rgb(var(--color-rgb), 0.8);
  aspect-ratio: 1/1;
  margin-inline: auto;
  border-radius: 50%;
  box-shadow: 0px 0px 10px -3px rgba(27, 115, 240, 0.7);
  position: relative;
  padding: 0;
}

.form-group.color .options-wrapper label:not(.other-choice):has(input[type="radio"]:checked) {
  background: rgb(var(--color-rgb), 1);
  color: var(--color-rgb-contrast);
  box-shadow: 0px 0px 5px -1px rgba(27, 115, 240, 1);
  /* text-shadow: 1px 1px 0 #33333333, -1px -1px 0 #33333333, -1px 1px 0 #33333333, 1px -1px 0 #33333333,
    1px 0px 0 #33333333, -1px 0px 0 #33333333, 0px 1px 0 #33333333, 0px -1px 0 #33333333; */
}

.form-group.color .options-wrapper label:not(.other-choice):has(input[type="radio"]:checked)::before {
  content: "\f3d7";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.5rem;
  transform: translateX(-50%) translateY(-50%);
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.form-group.color .options-wrapper label.other-choice,
.form-group.color .options-wrapper label.specify-choice {
  grid-column: 1 / -1;
}

.form-group.color .options-wrapper label.other-choice > input[type="text"],
.form-group.color .options-wrapper label.specify-choice > input[type="text"] {
  background: transparent;
  line-height: 1;
  padding: 2px;
}

.form-group.color .options-wrapper label.color-selector {
  background: rgb(var(--color-rgb), 0.7);
  border-color: rgb(var(--color-rgb), 0.8);
}

.form-group.color .options-wrapper label.color-selector .selector-input {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.form-group.color .options-wrapper label.color-selector .selector-input::before {
  content: "Pick a Color";
  font-size: 10px;
  background: #1b73f0;
  color: white;
  white-space: nowrap;
  padding: 0 4px;
  position: absolute;
  bottom: -1px;
  left: -4px;
  border-radius: 10px;
}

.form-group.color .options-wrapper label.color-selector::after {
  content: "\fada";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.2rem;
  color: white;
  transform: translateX(-50%) translateY(-50%);
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.form-group.color .options-wrapper label.color-selector:not(.other-choice):has(input[type="radio"]:checked)::after {
  display: none;
}

.form-group.color .options-wrapper label.color-selector input[type="color"] {
  height: 0;
  width: 0;
  transform: scale(0.01);
}

.form-group.color .options-wrapper label.color-selector > label.selector-input {
  background: transparent !important;
  border: none !important;
  width: 100%;
  height: 100%;
}

/*@ URL List now */

.form-group.url-list .input-wrapper.url-collection {
  --field-title: "URL List";
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  padding-bottom: 6px;
}

/* .form-group.url-list .input-wrapper.url-collection::before {
  padding-left: 26px;
} */

.form-group .input-wrapper.url-collection:has(input[type="text"]:not([disabled]):hover)::before,
.form-group .input-wrapper.url-collection:has(textarea:not([disabled]):hover)::before,
.form-group .input-wrapper.url-collection:has(select:not([disabled]):hover)::before,
.form-group .input-wrapper.url-collection:has(input[type="text"]:not([disabled]):focus)::before,
.form-group .input-wrapper.url-collection:has(textarea:not([disabled]):focus)::before,
.form-group .input-wrapper.url-collection:has(select:not([disabled]):focus)::before,
.form-group .input-wrapper.url-collection:has(input[type="text"]:not([disabled]):active)::before,
.form-group .input-wrapper.url-collection:has(textarea:not([disabled]):active)::before,
.form-group .input-wrapper.url-collection:has(select:not([disabled]):active)::before,
.form-group .input-wrapper.url-collection:has(input:not(:placeholder-shown))::before,
.form-group .input-wrapper.url-collection:has(textarea:not(:placeholder-shown))::before,
.form-group .input-wrapper.url-collection:has(select:valid)::before {
  padding-left: 6px;
}

.form-group.url-list .input-wrapper.url-collection .url-wrapper {
  position: relative;
}

.form-group.url-list .input-wrapper.url-collection .url-wrapper::after {
  position: absolute;
  top: 8px;
  /* transform: translateY(-50%); */
  left: 4px;
  font-family: uicons-solid-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 14px;
  color: rgba(27, 115, 240, 0.7);
  -webkit-font-smoothing: antialiased;
  content: "\f6a3";
}

.form-group.url-list .input-wrapper.url-collection .url-input {
  border-radius: 4px;
  border-bottom: 1px dashed rgba(27, 115, 240, 0.4);
  padding-left: 26px;
}

.form-group.url-list .input-wrapper.url-collection .url-input.reason {
  /* border-bottom: 1px solid rgba(27, 115, 240, 0.7);
  border-left: 1px solid rgba(27, 115, 240, 0.7); */
  display: block;
  margin-left: 26px;
  width: calc(100% - 26px);
  border-bottom-left-radius: 12px;

  min-height: 1px;
  height: 1px;
  border: unset;
  opacity: 0;
  padding: 0;
  margin-top: 0;
  transition: all 0.4s ease;
}

.form-group.url-list .input-wrapper.url-collection .url-input.reason.shown,
.form-group.url-list .input-wrapper.url-collection .url-input.reason:focus {
  border-bottom: 1px solid rgba(27, 115, 240, 0.7);
  border-left: 1px solid rgba(27, 115, 240, 0.7);
  min-height: 37px;
  opacity: 1;
  padding: 6px;
  margin-top: 12px;
}

.form-group.url-list .input-wrapper.url-collection .url-wrapper:has(.url-input.reason.shown)::before,
.form-group.url-list .input-wrapper.url-collection .url-wrapper:has(.url-input.reason:focus)::before {
  content: "Provide a Reason:";
  position: absolute;
  top: 38px;
  font-size: 10px;
  color: rgb(27, 115, 240);
  left: 30px;
}

.form-group.url-list .input-wrapper.url-collection .url-input.reason.hiddenReason,
.form-group.url-list .input-wrapper.url-collection .url-wrapper:has(.url-input.reason.hiddenReason)::before,
.form-group.url-list .input-wrapper.url-collection .url-wrapper:has(.url-input.reason.hiddenReason:focus)::before {
  display: none;
}

.form-group.url-list
  .input-wrapper.url-collection
  .url-wrapper
  input[type="text"].url-input:placeholder-shown:not(:focus) {
  border-bottom: unset;
}

.form-group.url-list .input-wrapper.url-collection .url-wrapper input[type="text"].url-input::placeholder {
  color: rgba(27, 115, 240, 0.7);
  opacity: 0.7;
}

/*@ HIDDEN GROUPS */
.form-group[data-handle="place_id"] {
  display: none;
}

footer.footer .is-submitted-modal {
  position: fixed;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: calc(100vw - 20px);
  max-width: 540px;
  left: 50%;
  height: calc(100% - 20px);
  flex-direction: column;
  text-align: center;
  gap: 20px;
  /* padding: 20px; */
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background: #eff8ff;
  user-select: none;
  display: none;
  z-index: -100;
  opacity: 0;
}

footer.footer .is-submitted-modal .submitted-modal-content {
  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: auto;
  height: 100%;
  text-align: center;
  padding: 20px;
}

footer.footer .is-submitted-modal[aria-hidden="false"],
footer.footer .is-submitted-modal .submitted-modal-content.no-calendly {
  display: flex;
  z-index: 9999;
  opacity: 1;
}

footer.footer .is-submitted-modal .ueni-img {
  max-width: 48px;
  margin-top: auto;
  margin-inline: auto;
  margin-bottom: 10px;
}

footer.footer .is-submitted-modal > i.fi,
footer.footer .is-submitted-modal .submitted-modal-content > i.fi {
  margin-top: auto;
  color: #0d9f3d;
  font-size: 5rem;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  margin-bottom: 10px;
}

footer.footer .is-submitted-modal > h3,
footer.footer .is-submitted-modal .submitted-modal-content > h3 {
  color: #0d9f3d;
}

footer.footer .is-submitted-modal p {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

footer.footer .is-submitted-modal .modal-links a {
  font-size: 14px;
  color: #1b73f0;
  text-decoration: none;
  margin: 0 5px;
  transition: color 0.2s ease-in-out;
}

footer.footer .is-submitted-modal .modal-links a:hover {
  color: #0056b3;
}

#dlc-iframe {
  height: 280px;
}
@media only screen and (max-width: 550px) {
  #dlc-iframe {
    height: calc(calc(100vw - 40px) * 0.6);
  }
}

.iframe-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
  --iframe-radius: 8px;
}

.iframe-overlay-header {
  height: 3rem;
  width: calc(100% - 20px);
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-top-right-radius: var(--iframe-radius);
  border-top-left-radius: var(--iframe-radius);
  gap: 10px;
  border-bottom: 2px solid #333;
}

.iframe-overlay-header .iframe-overlay-header-title {
  font-weight: 700;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  width: calc(100% - 110px);
  line-height: 1;
  gap: 3px;
  color: #1b73f0;
}

.iframe-overlay-header .iframe-overlay-header-title .iframe-template-name {
  font-weight: 400;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
  font-size: 14px;
  width: 100%;
  color: #333;
  line-height: 1.2;
}

.iframe-container {
  position: relative;
  width: calc(100% - 20px);
  height: calc(100% - 20px - 3rem);
  background-color: #fff;
  border-bottom-right-radius: var(--iframe-radius);
  border-bottom-left-radius: var(--iframe-radius);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #333;
}

.live-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.iframe-close-button {
  font-size: 1rem;
  color: white;
  cursor: pointer;
  z-index: 1001;
  transition: background 0.3s;
  flex: 1;
  width: fit-content;
  white-space: nowrap;
  background: #1b73f0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 50px;
}

.iframe-close-button > i.fi {
  font-size: 12px;
}

.iframe-close-button:hover {
  background: #1b73f0dd;
}

/*@ TOGGLE */
.form-group.toggle {
  flex-direction: row;
  justify-content: space-between;
}

.form-group.toggle label {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  text-align: left;
  line-height: 1;
}

.form-group.toggle .label-subtitle {
  margin-bottom: 0;
}

.toggle-button {
  position: relative;
  /* height: 26px; */
}

.toggle-button:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.knob,
.btn-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.btn {
  position: relative;
  /* top: 50%; */
  width: 74px;
  height: 36px;
  /* margin-top: -20px; */
  overflow: hidden;
}

.btn.btn-pill,
.btn.btn-pill > .btn-bg {
  border-radius: 100px;
}

.btn.btn-rect {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knob {
  z-index: 2;
}

.btn-bg {
  width: 100%;
  background-color: #fcebeb;
  transition: 0.3s ease all;
  z-index: 1;
}

[data-type="toggle-button"] input[type="checkbox"] {
  display: block;
}

[data-type="toggle-button"] .knob:before {
  content: "NO";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #f44336;
  border-radius: 50%;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

[data-type="toggle-button"] .checkbox:active + .knob:before {
  width: 46px;
  border-radius: 100px;
}

[data-type="toggle-button"] .checkbox:checked:active + .knob:before {
  margin-left: -26px;
}

[data-type="toggle-button"] .checkbox:checked + .knob:before {
  content: "YES";
  left: 42px;
  background-color: #1b73f0;
}

[data-type="toggle-button"] .checkbox:checked ~ .btn-bg {
  background-color: #daeeff;
}

#calendly-container {
  width: 100%;
  height: 903px;
  min-height: 903px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background: white;
  margin-block: 20px;
}

@media only screen and (hover: none) and (pointer: coarse) {
  .form-group .options-wrapper.imagery label img {
    margin-bottom: 10px;
  }
  .form-group .options-wrapper.imagery label .choice-caption {
    margin-top: auto;
    position: unset;
    bottom: unset;
    background: unset;
    padding: unset;
    width: 100%;
    font-size: 14px;
    opacity: 1;
    transform: unset;
  }

  .form-group
    .options-wrapper.imagery:has(input[type="checkbox"])
    label:has(input[type="checkbox"]:checked)
    .choice-caption,
  .form-group .options-wrapper.imagery:has(input[type="radio"]) label:has(input[type="radio"]:checked) .choice-caption {
    background: unset;
    box-shadow: unset;
    opacity: unset;
    transform: unset;
  }
}

@container (max-width: 200px) {
  .file-list-grid .file-item[data-external="true"] .remove-file:not(.focus) {
    background-color: #1b73f0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0.5;
    border-top-left-radius: 6px;
  }

  .file-list-grid .file-item[data-external="true"] .remove-file:not(.focus) > .button-text,
  .file-list-grid .file-item[data-external="true"]:has(.remove-file.focus) .confirm-file > .button-text {
    display: none;
  }

  .file-list-grid .file-item[data-external="true"] .remove-file.focus {
    background-color: #f4574c;
    border-top-left-radius: 6px;
  }

  .file-list-grid .file-item[data-external="true"] .confirm-file:hover {
    color: #fefbfa;
  }

  .file-list-grid .file-item[data-external="true"] .confirm-file::after,
  .file-list-grid .file-item[data-external="true"] .remove-file:not(.focus)::after {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: uicons-solid-rounded !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    visibility: visible;
    font-size: 12px;
  }

  .file-list-grid .file-item[data-external="true"]:has(.remove-file.focus) .confirm-file::after {
    content: "\f119";
  }

  .file-list-grid .file-item[data-external="true"] .remove-file:not(.focus)::after {
    content: "\fe91";
  }

  .file-list-grid .file-item[data-external="true"] .confirm-file {
    flex-grow: 10;
    border-top-right-radius: 6px;
  }

  .file-list-grid .file-item[data-external="true"]:has(.remove-file.focus) .confirm-file {
    color: #f4574c;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0.1;
  }
  .file-list-grid .file-item[data-external="true"]:has(.remove-file.focus) .confirm-file:hover {
    color: #fefbfa;
  }
}

/*@ Media queries */
@media only screen and (max-width: 480px) {
  .app-card-stars .fi-sr-star {
    font-size: 12px;
  }
  [data-locked="false"][data-stars="1"] .app-card-stars .star1,
  [data-locked="false"][data-stars="2"] .app-card-stars .star2,
  [data-locked="false"][data-stars="3"] .app-card-stars .star3,
  [data-locked="false"][data-stars="4"] .app-card-stars .star4,
  [data-locked="false"][data-stars="5"] .app-card-stars .star5 {
    font-size: 13.5px;
  }

  .form-group label.paragraph-input .label-title,
  .form-group label.paragraph-input input[type="text"] {
    font-size: 1rem;
  }

  .form-group label.paragraph-input input[type="text"] {
    padding-right: 0;
  }

  .form-group label.paragraph-input .input-wrapper {
    padding: 1px 2px 3px 2px;
  }

  .label-title:has(.options-wrapper .inline-input) {
    line-height: 1.75;
  }

  .form-group .inline-input {
    line-height: 1.375;
  }

  .form-group .options-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    grid-auto-rows: auto;
  }

  .form-group .options-wrapper label.other-choice,
  .form-group .options-wrapper label.specify-choice {
    padding-block: 12px;
    position: relative;
    grid-column: span 1;
    grid-row: auto;
  }
}

@media only screen and (max-width: 374px) {
  .app-cards-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .app-card-content span {
    font-size: 20px;
  }

  .bucket-page {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    inset: 0;
    transform: translate(0%, 0%);
  }
}

@media only screen and (min-width: 1367px) {
  .app-card-content span {
    font-size: 18px;
  }
}

@media (pointer: coarse) and (hover: none) {
  .page-main,
  [data-bucket="Basics"] .page-main {
    padding-right: 0.75rem;
  }
}
.screen-error {
  display: none;
}
@media only screen and (max-width: 299px) {
  *:not(html, body, .screen-error, .header),
  .loading-error-msg {
    display: none !important;
  }
  .screen-error {
    display: block;
    text-align: center;
    margin-inline: 1rem;
  }
}

/*@ EXTRAS */
.blog-notify {
  width: 100%;
  background-color: #f9f9dd;
  border: 1px solid #f9f9aa;
  padding: 10px 15px;
  margin-top: 10px;
  border-radius: 20px;
  box-sizing: border-box;
  color: #330;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

.card-save-btn {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  padding: 10px 0;
  border: 0;
  border-radius: 4px;
  background: #1b73f0;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.card-save-btn:hover {
  background: #155dc0;
}


/*@ Tailwind CSS classes */

.hidden {
  display: none !important;
}

/* Background colors */
.bg-sky-100 { background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1)); }
.bg-sky-200 { background-color: rgb(186 230 253 / var(--tw-bg-opacity, 1)); }
.bg-sky-300 { background-color: rgb(125 211 252 / var(--tw-bg-opacity, 1)); }
.bg-sky-400 { background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1)); }

.bg-green-100 { background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); }
.bg-green-200 { background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1)); }
.bg-green-300 { background-color: rgb(134 239 172 / var(--tw-bg-opacity, 1)); }
.bg-green-400 { background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1)); }

/* Text colors */
.text-sky-100 { color: rgb(224 242 254 / var(--tw-text-opacity, 1)); }
.text-sky-200 { color: rgb(186 230 253 / var(--tw-text-opacity, 1)); }
.text-sky-300 { color: rgb(125 211 252 / var(--tw-text-opacity, 1)); }
.text-sky-400 { color: rgb(56 189 248 / var(--tw-text-opacity, 1)); }

.text-green-100 { color: rgb(220 252 231 / var(--tw-text-opacity, 1)); }
.text-green-200 { color: rgb(187 247 208 / var(--tw-text-opacity, 1)); }
.text-green-300 { color: rgb(134 239 172 / var(--tw-text-opacity, 1)); }
.text-green-400 { color: rgb(74 222 128 / var(--tw-text-opacity, 1)); }

/* Font sizes */
.text-xs {
  font-size: 0.75rem; 
  line-height: 1rem;
}

/* Spacing */
.p-1 {
  padding: 0.25rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.m-1 {
  margin: 0.25rem;
}

/* Borders */
.rounded-xl {
  border-radius: 0.75rem;
}

.form-group .options-wrapper label.specify-choice::after {
  /* --specify-option: "Trade or Industry Association"; */
  content: var(--specify-option);
}

/* Show option description */

.form-group .options-wrapper .option-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
}

.form-group .options-wrapper .option-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.form-group .options-wrapper .option-title {
  font-weight: 500;
}

.form-group .options-wrapper .option-description {
  font-size: 0.8em;
  color: #666;
  margin-top: 0.2rem;
}

.form-group .options-wrapper label:has(input[type="radio"]:checked) .option-description {
  color: #dadde7;
  font-weight: 500;
}