:root {
    --blue: #3aa5fc;
    --darkblue: #1695fd;
    --blue-600: #028cfd;
    --blue-700: #0074d3;
    --blue-800: #005397;
    --blue-900: #01325a;
    --lightblue: #94cfff;
    --gray: rgb(230, 231, 232);
    --darkgray: rgb(184, 184, 184);
    --lightgray: rgb(247, 248, 250);
    --green: #40eec0;
    --green-solid: #00e8ab; /*rgb(0, 232, 171)*/
    --green-100: rgb(229, 253, 247); /* #e5fdf7 */

    --yellow: #fffd63;
    --yellow-solid: #f7f76e;
    --yellow-soft: rgb(255, 254, 138); /*#fffe8a*/
    --amber: #f4d371;
    --orange-200: #fed7aa;
    --orange: #ffc074;
    --orange-400: #fdae4e;
    --orange-500: #ffa73c;
    --sky-200: #bae6fd;
    --smoke: #f2f2f0;
    --danger: #fe8080;
    --danger-500: #fc6d6d;
    --purple: #7788f8;
    --sand: #fafaf8;
    --indigo: rgb(112, 135, 255); /*#7087ff*/
    --indigo-100: rgb(235, 246, 255);
    --violet: #94a4ff;
    --fill-light: rgb(185, 185, 192);
    --fill-soft: rgb(83, 84, 97);
    --fill-color: #3b3c4b;
    --fill-strong: rgb(10, 11, 30);
    --ring-color: #3b3c4b;
    --text-strong: #0a0b1e;
    --text-color: rgb(10, 11, 30);
    --border-strong: rgb(10, 11, 30);
    --dark: #3b3c4b;
    --text-soft: rgb(83, 84, 97);
    --text-strong: rgb(10, 11, 30);
    --text-light: rgb(153, 153, 155);
    --primary-bg: #fff;
    --secondary-bg: #f2f2f0;
    --black: #0a0b1e;
    --dark-800: #1a202c;
    --third-bg: rgb(247, 248, 250);
    --border-soft: rgb(240, 241, 243);
    --border-color: rgb(230, 231, 232);
    --border-popup: #1a202c;
    --border-dark: #3e3f49;
    --border-soft-dark: #cacaca;
    --shadow-soft: rgba(10, 11, 30, 0.07) 1px 1px 3px 0px;
    --modal-shadow: rgba(10, 11, 30, 0.13) 4px 4px 17px 0px;
}
button {
    position: relative;
    border-radius: calc(var(--radius) * 8);
}
/* reusable classes for components */
.radius-xs { border-radius: calc(var(--radius) * 2); }
.radius-sm { border-radius: calc(var(--radius) * 4); }
.radius { border-radius: calc(var(--radius) * 6); }
.radius-md { border-radius: calc(var(--radius) * 8); }
.radius-lg { border-radius: calc(var(--radius) * 10); }
.radius-xl { border-radius: calc(var(--radius) * 12); }
.radius-2xl { border-radius: calc(var(--radius) * 16); }
.bg-white { background-color: #fff; }
.bg-dark, .hover\:bg-dark:hover { background-color: var(--dark); }
.bg-dark-800, .hover\:bg-dark-800:hover { background-color: var(--dark-800); }
.bg-black, .hover\:bg-black:hover { background-color: var(--black); }
.bg-sand, .hover\:bg-sand:hover { background-color: var(--sand); }
.bg-green, .hover\:bg-green:hover { background-color: var(--green); }
.bg-green-solid, .hover\:bg-green-solid:hover { background-color: var(--green-solid); }
.bg-lightgray, .hover\:bg-lightgray:hover { background-color: var(--lightgray); }
.bg-gray, .hover\:bg-gray:hover { background-color: var(--gray); }
.bg-yellow { background-color: var(--yellow); }
.bg-amber, .hover\:bg-amber:hover { background-color: var(--amber); }
.bg-yellow-soft { background-color: var(--yellow-soft); }
.bg-yellow-solid { background-color: var(--yellow-solid); }
.bg-orange { background-color: var(--orange); }
.bg-orange-200 { background-color: var(--orange-200); }
.bg-sky-200 { background-color: var(--sky-200); }
.bg-smoke, .hover\:bg-smoke:hover { background-color: var(--smoke); }
.bg-lightgray, .hover\:bg-lightgray:hover { background-color: var(--third-bg); }
.bg-danger { background-color: var(--danger); }
.bg-danger-500 { background-color: var(--danger-500); }
.bg-blue { background-color: var(--blue); }
.bg-lightblue { background-color: var(--lightblue); }
.bg-darkblue { background-color: var(--darkblue); }
.bg-purple { background-color: var(--purple); }
.bg-violet { background-color: var(--violet); }
.bg-indigo { background-color: var(--indigo); }
.text-green, .hover\:text-green:hover { color: var(--green); }
.text-green-solid, .hover\:text-green-solid:hover { color: var(--green-solid); }
.text-gray, .hover\:text-gray:hover { color: var(--gray); }
.text-darkgray, .hover\:text-darkgray:hover { color: var(--darkgray); }
.hover\:text-white:hover, .text-white { color: #fff; }
.text-white { color: #fff; }
.text-yellow { color: var(--yellow); }
.text-yellow-soft { color: var(--yellow-soft); }
.text-yellow-solid { color: var(--yellow-solid); }
.text-orange { color: var(--orange); }
.text-orange-200 { color: var(--orange-200); }
.text-orange-400 { color: var(--orange-400); }
.text-orange-500 { color: var(--orange-500); }
.text-smoke { color: var(--smoke); }
.text-danger { color: var(--danger); }
.text-danger-500 { color: var(--danger-500); }
.text-blue { color: var(--blue); }
.text-darkblue { color: var(--darkblue); }
.text-blue-600 { color: var(--blue-600); }
.text-blue-700 { color: var(--blue-700); }
.text-blue-800 { color: var(--blue-800); }
.text-blue-900 { color: var(--blue-900); }
.text-purple { color: var(--purple); }
.text-violet { color: var(--violet); }
.text-indigo { color: var(--indigo); }
.text-strong, .hover\:text-strong:hover { color: var(--text-strong); }
.text-color, .hover\:text-color:hover { color: var(--text-color); }
.text-dark, .hover\:text-dark:hover { color: var(--dark); }
.text-soft, .hover\:text-soft:hover { color: var(--text-soft); }
.text-light, .hover\:text-light:hover { color: var(--text-light); }
.text-dark-800, .hover\:text-dark-800:hover { color: var(--dark-800); }
.text-white-transparent { color: rgba(255, 255, 255, 0.1); }
.text-white-transparent\/2 { color: rgba(255, 255, 255, 0.2); }
.text-white-transparent\/3 { color: rgba(255, 255, 255, 0.3); }
.text-white-transparent\/4 { color: rgba(255, 255, 255, 0.4); }
.text-white-transparent\/5 { color: rgba(255, 255, 255, 0.5); }
.text-white-transparent\/6 { color: rgba(255, 255, 255, 0.6); }

.text-dark-transparent { color: rgba(0,0,0, 0.1); }
.text-dark-transparent\/2 { color: rgba(0,0,0, 0.2); }
.text-dark-transparent\/3 { color: rgba(0,0,0, 0.3); }
.text-dark-transparent\/4 { color: rgba(0,0,0, 0.4); }
.text-dark-transparent\/5 { color: rgba(0,0,0, 0.5); }
.text-dark-transparent\/6 { color: rgba(0,0,0, 0.6); }
.fill-white { fill: #fff; }
.fill-light { fill: var(--fill-light); }
.fill-soft { fill: var(--fill-soft); }
.fill-color { fill: var(--fill-color); }
.fill-strong { fill: var(--fill-strong); }
.fill-orange { fill: var(--orange); }
.fill-danger { fill: var(--danger); }
.fill-blue { fill: var(--blue); }
.fill-purple { fill: var(--purple); }
.fill-indigo { fill: var(--indigo); }
.fill-violet { fill: var(--violet); }
.fill-green { fill: var(--green); }
.fill-yellow { fill: var(--yellow); }
.hover\:border-popup:hover, .border-popup { border-color: var(--border-popup); }
.hover\:border-color:hover, .border-color { border-color: var(--border-color); }
.hover\:border-soft:hover, .border-soft { border-color: var(--border-soft); }
.hover\:border-soft-dark:hover, .border-soft-dark { border-color: var(--border-soft-dark); }
.hover\:border-dark:hover, .border-dark { border-color: var(--border-dark); }
.hover\:border-strong:hover, .border-strong { border-color: var(--border-strong); }
.hover\:border-orange:hover, .border-orange { border-color: var(--orange); }
.hover\:border-green:hover, .border-green { border-color: var(--green); }
.hover\:border-blue:hover, .border-blue { border-color: var(--blue); }
.hover\:border-indigo:hover, .border-indigo { border-color: var(--indigo); }
.hover\:border-danger:hover, .border-danger { border-color: var(--danger); }
.hover\:border-yellow:hover, .border-yellow { border-color: var(--yellow); }
.primary-bg { background-color: var(--primary-bg); }
.secondary-bg { background-color: var(--secondary-bg); }
.third-bg { background-color: var(--third-bg); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.modal-shadow { box-shadow: var(--modal-shadow); }
.h-\[128px\] { height: 128px; }
.switch {
    appearance: none;
    position: relative;
    display: inline-block;
    background: lightgray;
    vertical-align: middle;
    border-radius: 12px;
    width: 44px;
    height: 24px;
    border-width: 0;
    transition: 0.25s linear background;
}
.switch:hover {
    cursor: pointer;
}
.switch::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    transition: 0.25s linear left;
}
.switch:focus-visible {
    outline: 2px solid dodgerblue;
    outline-offset: 2px;
}
.switch:focus {
    outline: none;
    outline-color: transparent;
}
.switch:checked {
    background: var(--indigo);
}
.switch:checked::before {
    left: calc(50% + 1px);
}
[data-view="0"] {
    display: none !important;
}
[data-visible="0"] {
    display: none !important;
}
button.radius-0 {
    border-radius: 0 0 0 0;
}
button::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.01);
}
.animate-press:active {
    -webkit-animation-duration: 1s;
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: keypress; 
    animation-name: keypress; 
}
button.active:enabled:active,
button[data-active="true"]:active,
button[data-active="1"]:active,
.press-effect {
    -webkit-animation-duration: 1s;
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
    -webkit-animation-name: keypress; 
    animation-name: keypress; 
}
button.selected:hover,
button[data-active="0"]:hover {
    cursor: default;
}
[data-role="select"] [data-role="headline"]::before {
    content: '';
    width: 19px; 
    height: 18px;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    transform: translate(-0.5rem, -50%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/public/dist/svg/caret-down.svg);
}
/* needs tweaking for auto-adjusting */
[data-role="select"] [data-role="dropdown"] {
    max-height: 194px;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    transform: translateY(6px);
}
.tapped\:bg-green {
    background-color: var(--green);
}
.bottom-marker::before {
    content: '';
    width: 100%;
    height: 4.5px;
    border-radius: 4000px !important;
    background: var(--black);
    left: 0;
    top: 100%;
    position: absolute;
}
[data-page][data-position] {
    transition: transform 0.5s ease-in-out;
}
[data-page][data-position="+off"] {
    transform: translateX(calc(100% + 5px));
}
[data-page][data-position="-off"] {
    transform: translateX(-100%);
}

@media screen and (min-width: 569px) {
    [data-role="select"] [data-role="dropdown"]::-webkit-scrollbar {
        width: 6px;
    }
    [data-role="select"] [data-role="dropdown"]::-webkit-scrollbar-thumb {
        background-color: var(--gray);
    }
    [data-role="select"] [data-role="dropdown"]::-webkit-scrollbar-button {
        background-color: transparent;
    }
    [data-role="select"] [data-role="dropdown"]::-webkit-scrollbar-corner {
        background-color: transparent;
    }
}
[data-role="select"][data-state="0"] [data-role="dropdown"] {
    display: none !important;
    height: 0;
    visibility: hidden;
}
[data-role="select"][data-state="1"] [data-role="dropdown"] [data-selected="1"] {
    background-color: var(--green);
}

[data-event="drop-table-menu"]::before {
    content: '';
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
    background: rgba(255, 255, 255, 0.01);
}

@keyframes keypress {
    0% {transform: scale(1);} 
    10%, 20% {transform: scale(0.9);} 
    30%, 50%, 70%, 90% {transform: scale(1.1);} 
    40%, 60%, 80% {transform: scale(1.1);} 
    100% {transform: scale(1);}
}
[data-label]:hover::before {
    content: attr(data-label);
    position: absolute;
    padding: 6px;
    border-radius: 8px;
    font-size: 12.8px;
    line-height: 1.2;
    font-weight: 600;
    background: var(--black);
    color: #fff;
    width: fit-content;
    min-width: 105px;
    text-align: center;
    max-width: 500px;
    top: -6px;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -100%);
}
[data-label]:hover::after {
    content: '';
    position: absolute;
    border-left: 6px transparent solid;
    border-right: 6px transparent solid;
    border-top: 6px var(--black) solid;
    top: -1px;
    left: 50%;
    transform: translate(-50%, -100%);
}
.arrow-down::after {
    content: '';
    position: absolute;
    border-left: 7px transparent solid;
    border-right: 7px transparent solid;
    border-top: 7px var(--black) solid;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -1px);
}
.flip-card {
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}
.flip-card:hover {
    cursor: pointer;
}
.flip-card .front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.flip-card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}
.flip-card[data-flip="back"] {
    transform: rotateY(180deg);
}

.waving::before {
    content: '';
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    background: inherit;
    border: 3.9px inherit solid;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: wave;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
}
.bg-pure-black {
    background: #000;
}
.aspect-ratio-1 {
    aspect-ratio: 1;
}
@keyframes wave {
    0% { transform: translate(-50%, -50%) scale(1); opacity: .320; }
    100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate-tada {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.bg-yellow-gradient {
    background-image: linear-gradient(0deg, var(--blue), var(--yellow));
}
.decoration-gray {
    text-decoration-color: var(--gray);
}
.decoration-dashed {
    text-decoration-style: dashed;
}
.decoration-dashed {
    text-decoration-style: dotted;
}

/* components to use */
.bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.top-center-left {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}
.captions {
    transition: opacity 0.2s ease-in-out;
}
.step-on-focus {
    z-index: 9999;
    position: fixed;
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}
@media screen and (max-width: 569px) {
    .object-fit {
        object-fit: cover;
    }
}
@media screen and (min-width: 986px) {

    [data-page][data-position] {
        transition: transform 1s ease-in-out;
    }

    .scroll-css::-webkit-scrollbar {
        background: transparent;
        width: 7px;
    }
    .scroll-css::-webkit-scrollbar-thumb {
        background-color: #aaa;
        /*border-radius: 9000px;*/
    }
    .scroll-color.scroll-dark::-webkit-scrollbar-thumb {
        background-color: #aaa;
        /*border-radius: 9000px;*/
    }
    .scroll-light::-webkit-scrollbar {
        background: transparent;
        width: 6px;
    }
    .scroll-light::-webkit-scrollbar-thumb {
        background-color: rgb(218, 218, 218);
    }
    .scroll-light.scroll-dark::-webkit-scrollbar-thumb {
        background-color: rgb(218, 218, 218);
        /*border-radius: 9000px;*/
    }
}