.menu-wrap .menu-overlay,
.menu-wrap .menu {
  right: -100%;
  transition: right 0.35s ease-in-out;
}

.menu-wrap.menu-open .menu-overlay,
.menu-wrap.menu-open .menu {
  right: 0px;
}

.ideas-list__text a {
  word-break: break-all;
}

.nested-item__wrap>.nested-item:first-child>.nested-item__label {
  border-top: 0px !important;
  padding-top: 0px !important;
}

.choices__list--multiple .choices__item {
  min-height: 24px;
  line-height: 1.2;
  background: #f5f5f5;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  cursor: default;
  transition: font-size 0.3s, line-height 0.3s, height 0.3s;
  user-select: none;
  margin-inline-end: 4px;
  padding-inline-start: 8px;
  padding-inline-end: 4px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 2px;
}

.choices__list--multiple .choices__item[data-deletable]:focus-visible {
  outline-color: #e6f7ff;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #e6f7ff;
  border-color: #e6f7ff;
}

.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
  border-left: 0px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' focusable='false' data-icon='close' width='1em' height='1em' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z'%3E%3C/path%3E%3C/svg%3E");
}

.choices[data-type*=select-multiple] .choices__inner {
  padding-bottom: 0px;
}

.choices__inner {
  background-color: #fff;
  border-color: #d9d9d9;
  padding: 2px 24px 2px 12px;
  min-height: 30px;
}

.row-website .choices__inner {
  min-height: 36px;
}

.choices__input {
  background-color: #fff;
  margin-bottom: 2px;
}

@media (min-width: 640px) {

  .choices__list--dropdown .choices__item--selectable {
    padding-right: 12px;
  }
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f5f5f5;
}

.choices[data-type*=select-one] .choices__inner {
  padding-bottom: 2px;
}

.choices[data-type*=select-one]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(0%, -50%);
  top: 50%;
  margin-top: 0px;
  border: 0px;
  width: 24px;
  height: 24px;
}

.choices[data-type*=select-one].is-open:after {
  margin-top: 0px;
}

.choices__list--single {
  padding-top: 0px;
  padding-bottom: 0px;
  height: 100%;
}

.choices__list--single .choices__item {
  display: flex;
  align-items: center;
  height: 100%;
}

.row-website .choices__list--single .choices__item {
  height: 30px;
}

.heart {
  position: relative;
  width: 10px;
  height: 10px;
}

.heart__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: calc(10px * -.4);
  left: calc(10px * -.2);
  width: calc(10px * 1.5);
  height: calc(10px * 1.5);
  z-index: 2;
  cursor: pointer;
  transform: scale(1) rotate(45deg);
}

.heart__checkbox:focus {
  outline: none;
}

.heart__checkbox:hover~.heart__icon {
  transform: scale(1.1) rotate(45deg);
}

.heart__checkbox:checked~.heart__icon {
  -webkit-animation: heartAnimation forwards 1s;
  animation: heartAnimation forwards 1s;
}

.heart__icon {
  width: 10px;
  height: 10px;
  background: lightpink;
  transform: scale(1) rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 200ms ease-out;
}

.heart__icon::before,
.heart__icon::after {
  content: "";
  display: block;
  background: inherit;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
}

.heart__icon::before {
  top: 0;
  left: -50%;
}

.heart__icon::after {
  left: 0;
  top: -50%;
}

@-webkit-keyframes heartAnimation {
  0% {
    transform: scale(1.1) rotate(45deg);
  }

  25% {
    transform: scale(0.7) rotate(45deg);
  }

  45% {
    transform: scale(1.4) rotate(45deg);
    background: red;
  }

  70% {
    transform: scale(1) rotate(45deg);
    background: red;
  }

  100% {
    transform: scale(1.1) rotate(45deg);
    background: red;
  }
}

@keyframes heartAnimation {
  0% {
    transform: scale(1.1) rotate(45deg);
  }

  25% {
    transform: scale(0.7) rotate(45deg);
  }

  45% {
    transform: scale(1.4) rotate(45deg);
    background: red;
  }

  70% {
    transform: scale(1) rotate(45deg);
    background: red;
  }

  100% {
    transform: scale(1.1) rotate(45deg);
    background: red;
  }
}

/* treeselect */

.treeselect-list {
  transform: translate3d(0);
}

.treeselect-list__item-icon svg {
  stroke: #6b7280;
}

.treeselect-list__item-checkbox-container {
  border-color: #ddd;
}

.treeselect-list__item-label {
  color: rgb(17, 24, 39);
}

.treeselect-list__item-checkbox-container:focus-visible {
  outline-color: #60a5fa;
}

.treeselect-input {
  padding-left: 12px;
}

.treeselect-input--focused, .treeselect-list--focused {
  border-color: #e5e7eb;
}

.treeselect-input__tags-element {
  min-height: 24px;
  line-height: 1.2;
  background: #f5f5f5;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  cursor: default;
  transition: font-size 0.3s, line-height 0.3s, height 0.3s;
  user-select: none;
  margin-inline-end: 4px;
  padding-inline-start: 8px;
  padding-inline-end: 4px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 2px;
}

.treeselect-input__tags-element:hover {
  background-color: #f5f5f5;
  opacity: 0.9;
}

.treeselect-list__item--checked .treeselect-list__item-checkbox-container, .treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container {
  background-color: #60a5fa;
  border-color: #60a5fa;
}

.treeselect-list__item--focused {
  background-color: rgb(249, 250, 251)!important;
}

.treeselect-list__item--checked {
  background-color: #e6f7ff;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

input[autocomplete=one-time-code] {
  --otp-digits: 6;
	--otp-ls: 2ch;
	--otp-gap: 1.25;

	/* private consts */
	--_otp-bgsz: calc(var(--otp-ls) + 1ch);
	--_otp-digit: 0;

	all: unset;
	background: 
	linear-gradient(90deg, 
		var(--otp-bg, #1890ff4d) calc(var(--otp-gap) * var(--otp-ls)),
		transparent 0),
		linear-gradient(90deg, 
		var(--otp-bg, #1890ff26) calc(var(--otp-gap) * var(--otp-ls)),
		transparent 0
	);
	background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 0, 0 0;
	background-repeat: no-repeat, repeat-x;
	background-size: var(--_otp-bgsz) 100%;
	caret-color: var(--otp-cc, #222);
	caret-shape: block;
	clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
	font-family: ui-monospace, monospace;
	font-size: var(--otp-fz, 2em);
	inline-size: calc(var(--otp-digits) * var(--_otp-bgsz));
	letter-spacing: var(--otp-ls);
	padding-block: var(--otp-pb, 0.5ch);
	padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));

  position: relative;
  margin-left: 21px;
}

@media(max-width: 639px) {
  input[autocomplete=one-time-code] {
    font-size: var(--otp-fz, 1.5em);
  }
}

/* For this demo */
.digit-code.label span {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  margin-block-end: 1ch;
}
