*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
    line-height: 1.75;
    min-height: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ol,
ul {
    list-style: none;
}

ol {
    list-style: auto;
    list-style-type: auto;
    padding-left: 1.625em;
}

blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
    content: "";
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

canvas,
svg {
    display: block;
    max-width: 100%;
    /* width: 100%; */
    height: auto;
}

img,
picture,
video {
    display: block;
    max-width: 100%;
    height: auto;
    background-color: rgb(0 0 0 / 2%);
    max-height: 75svh;
    width: auto;
    margin: 0 auto;
    border-radius: 0.75em 0.75em 0.75em 0.75em;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    font-size: 1em;
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

fieldset {
    border: none;
}

textarea {
    resize: none;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

sub,
sup {
    vertical-align: baseline;
    position: relative;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

button,
.btn,
a {
    cursor: pointer;
}

/* ----------------------------------------------------------------------------- */

:root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --body: #ffffff;
    --black: rgb(0 0 0 / 100%);
    --white: rgb(255 255 255 / 100%);
    --blue: #007aff;
    --red: #c50000;
    --green: #00ad00;
    --black-rgb: 0 0 0;
    --white-rgb: 255 255 255;
    --red-rgb: 197 0 0;
    --green-rgb: 0 173 0;
    --a: rgb(0 118 194);
    --link-color: rgb(24 90 188);
    --visited-link-color: rgb(104 29 168);

    --logo-yellow: #ca9b24;
    --logo-green: rgb(57 164 74 / 50%);

    --logo-yellow: #b28e2c;
    --logo-green: rgb(43 168 35 / 50%);
}

html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    -webkit-tap-highlight-color: transparent;
    font-family:
        ui-sans-serif,
        -apple-system,
        system-ui,
        Segoe UI,
        Helvetica,
        Apple Color Emoji,
        Arial,
        sans-serif,
        Segoe UI Emoji,
        Segoe UI Symbol;
    font-variation-settings: normal;
    line-height: 1.5;
    tab-size: 4;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    /* min-height: 100vh; */
    min-height: 100svh;
    /* padding: 2.7500em 0.5000em 12.5000em 0.5000em; */
    padding: 2.75em 1em 12.5em 1em;
    font-size: 16px;
    background-color: rgb(var(--white-rgb) / 100%);
    color: rgb(var(--black-rgb) / 94.12%);
}

.main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 65ch; */
    max-width: 42.375em;
    margin: 0 auto;
}

.header {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    background: rgb(var(--white-rgb) / 100%);
    background: linear-gradient(
        180deg,
        rgb(var(--white-rgb) / 100%) 75%,
        transparent
    );
    position: sticky;
    top: 0;
    z-index: 99999;
    padding-top: 0.5em;
    /* padding-bottom: 0.5000em; */
    padding-bottom: 1.25em;
}

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

svg.logo {
    max-width: 2.25em;
    transition: opacity 0.1s;
    text-shadow: 0em 0em rgba(0, 0, 0, 0.25);
}

svg.logo rect {
    fill: rgb(var(--white-rgb) / 100%);
}

svg.logo path {
    stroke-width: 1.75em;
    stroke-width: 2em;
}

body.home svg.logo {
    max-width: 6em;
    border-color: transparent;
}

body.home .logo path {
    stroke-width: 1.25em;
    stroke-width: 1.5em;
}

svg.svg-back {
    height: 1em;
    width: 1em;
    transform: rotate(0deg);
    stroke-width: 2;
    color: rgb(var(--black-rgb) / 20%);
    fill: none;
    stroke: currentColor;
    position: absolute;
    opacity: 0;
    margin-left: -0.1875em;
    transition: opacity 0.1s;
}

a.back span.div-back-svg {
    height: 2.25em;
    width: 2.25em;
    max-width: 2.25em;
    max-height: 2.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 624.9375em;
    box-shadow: 0 0 0px 0.0625em rgb(var(--black-rgb) / 20%);
    transition: background-color 0.1s;
}

a.back:hover span.div-back-svg svg.logo {
    opacity: 0;
}

a.back:hover span.div-back-svg svg.svg-back {
    opacity: 1;
}

a.back:hover .div-back-svg {
    background-color: rgb(0 0 0 / 2%);
}

body.home h1 {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 500;
    background: linear-gradient(
        162deg,
        var(--logo-yellow) 10%,
        var(--logo-green) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: 0em 0em rgba(0, 0, 0, 0.12);
    line-height: 1;
}

body.home h1 span {
    color: #757575;
    font-size: 0.666665em;
    letter-spacing: -0.0269em;
    font-weight: 600;
    text-transform: uppercase;
}

.logo defs linearGradient > stop {
    stop-color: var(--logo-yellow);
}

.logo defs linearGradient > stop + stop {
    stop-color: var(--logo-green);
}

button,
.btn {
    align-items: center;
    border-color: transparent;
    /* border-radius: 0.6250em; */
    border-radius: 0.75em;
    border-radius: 0.875em;
    border-width: 0.0625em;
    display: inline-flex;
    flex-shrink: 0;
    font-weight: 400;
    justify-content: center;
    padding: 0.692em 0.75em;
    padding: 0.75em 1.25em;
    /* padding: 0.8em 0.7500em; */
    /* padding: 12px 20px; */
    pointer-events: auto;
    width: 100%;
    font-size: 1em;
    border-style: solid;
    color: unset;
    transition: box-shadow 0.1s;
}

.btn-secondary {
    background-color: rgb(var(--white-rgb) / 100%);
}

.btn-secondary:hover {
    background-color: rgb(var(--black-rgb) / 5%);
    text-decoration: none;
    /* background: linear-gradient(162deg, #b28e2c63 50%, rgb(43 168 35 / 25%) 100%); */
}

.icon-sm {
    stroke-width: 2;
    flex-shrink: 0;
    height: 1em;
    width: 1em;
}

svg.icon-left {
    width: 1.35em;
    height: 1.35em;
}

svg.icon-left-wwoof {
    /* width: 1.875em; */
    /* height: 1.875em; */
    width: 2.5em;
    height: 2.5em;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

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

.justify-center {
    justify-content: center;
}

.gap-4 {
    gap: 0.25em;
}

.gap-8 {
    gap: 0.5em;
}

.gap-16 {
    gap: 1.2em;
}

.gap-34 {
    gap: 2.125em;
}

.gap-44 {
    gap: 2.75em;
}

.width-full {
    width: 100%;
}

.space-between {
    justify-content: space-between;
}

.btn-grup {
    gap: 0.25em;
}

.btn-grup a,
.btn-grup .btn {
    position: relative;
}

.btn-grup a:last-child:before,
.btn-grup .btn:last-child:before {
    background-color: transparent;
}

.btn-grup a.icon:before,
.btn-grup .btn.icon:before {
    width: calc(100% - 1em - 1.375em - 1em);
    left: calc(1em + 1.375em + 1em);
}

a.link,
button.link {
    border-radius: 0.625em;
    display: inline-flex;
    font-weight: 500;
    justify-content: center;
    padding: 0.5em 0.75em;
    align-items: center;
    gap: 0.5em;
    color: rgb(var(--black-rgb) / 54.12%);
    font-size: 0.8125em;
    font-size: 1em;
    transition: background-color 0.1s;
}

a.link svg,
button.link svg {
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
}

a.link svg path,
button.link svg path {
    fill: currentColor;
}

a.link:hover,
button.link:hover {
    text-decoration: none;
    /* background-color: rgb(0 0 0 / 2%); */
    background-color: rgb(var(--black-rgb) / 5%);
}

footer.footer > div span {
    border-left: 0.0625em solid;
    border-color: rgb(var(--black-rgb) / 20%);
    height: 1.375em;
    opacity: 0;
}

a {
    /* color: var(--a); */
    color: var(--link-color);
    position: relative;
}

a:visited {
    color: var(--visited-link-color);
}

a[target="_blank"]::after {
    content: "↗";
    display: inline;
    font-size: 0.8em;
    margin-left: 0.25em;
    top: -0.15em;
    vertical-align: baseline;
    white-space: nowrap;
    position: relative;
}

a.link[target="_blank"]:after {
    content: "";
}

a:hover {
    text-decoration: underline;
}

p {
    padding: 0.5em 0.9375em;
}

input#age {
    text-align: right;
    width: 100%;
}

.label-btn-grup {
    margin-left: 0em;
    margin-bottom: 0.4375em;
    text-transform: uppercase;
    font-size: 0.8125em;
    /* color: #757575; */
    color: rgb(var(--black-rgb) / 54.12%);
    position: sticky;
    top: 3.25em;
    z-index: 1;
    background-color: rgb(var(--white-rgb) / 100%);
    padding: 0.5em;
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    background: linear-gradient(
        180deg,
        rgb(var(--white-rgb) / 100%) 75%,
        transparent
    );
}

div#photo-container {
    width: 7.5em;
    height: 7.5em;
    margin: 0 auto;
    border-width: 0.0625em;
    border-style: solid;
    border-color: rgb(var(--black-rgb) / 20%);
    border-radius: 624.9375em;
    margin-bottom: 2em;
    position: relative;
    overflow: hidden;
    background-color: rgb(var(--white-rgb) / 100%);
    transition: all 0.2s;
}

div#photo-container:hover {
    box-shadow:
        0 0 0 0.125em rgb(var(--white-rgb) / 100%),
        0 0 0 0.1875em rgb(var(--black-rgb) / 20%);
    background-color: rgb(var(--black-rgb) / 5%);
}

button#enable-camera {
    height: 100%;
    display: flex !important;
    align-items: flex-end !important;
    position: absolute;
    z-index: 9999;
    top: 0;
}

button#enable-camera[style="display: flex;"] svg path {
    fill: white;
}

div#photo-container:before {
    content: "Photo";
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125em;
    color: rgb(var(--black-rgb) / 54.12%);
    font-weight: 500;
    text-transform: uppercase;
    transition: opacity 0.15s;
}

.success-pass-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background: hsl(0deg 0% 100% / 92%);
    backdrop-filter: blur(0.375em);
    /* display: flex; */
    align-items: center;
    justify-content: center;
    display: none;
}

.videosuccessdiv {
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 0;
    position: relative;
    width: 100%;
    /* max-width: 37.5em; */
}

.videosuccessdiv video {
    border-radius: 1rem;
    filter: grayscale(0.75);
    margin: 0 auto;
    width: 27.5em;
    max-width: 96%;
    height: auto;
}

.success-pass-video h1 {
    position: absolute;
    left: 0.5em !important;
    font-weight: 600 !important;
    text-shadow: 0.0625em 0.0625em 0.0625em rgb(0 0 0 / 80%);
    /* color: #0a3161; */
    color: #b31942 !important;
    display: flex;
    background: white;
    border-radius: 0.75rem;
    text-transform: uppercase;
    backdrop-filter: blur(0.3125em);
    box-shadow: inset 0em 0.0625em 0.125em 0em black;
    flex-direction: column;
    align-items: flex-start;
    line-height: 0.9;
    font-size: 2.25em !important;
    padding: 0.5em 0.75em;
    bottom: 0.25em !important;
}

.success-pass-video h1 span {
    color: #0a3161 !important;
    font-size: unset !important;
    text-transform: uppercase !important;
}

.videosuccessdiv + h4 {
    color: #394457;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    font-weight: 700;
}

.videosuccessdiv + h4 > span {
    display: flex;
    gap: 0.5em;
}

label.toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    cursor: pointer;
}

label.toggle input {
    display: none;
}

label.toggle .circle {
    position: absolute;
    top: 0.0938em;
    left: 0.0938em;
    background: white;
    background: rgb(var(--white-rgb) / 100%);
    width: 1.0625em;
    height: 1.0625em;
    border-radius: 50%;
    transition: transform 0.3s;
}

label.toggle input[type="checkbox"]:checked + .slider .circle {
    transform: translateX(0.5938em);
}

label.toggle input[type="checkbox"]:checked + .slider {
    /* background-color: black; */
    /* border-color: black; */
    background-color: rgb(var(--black-rgb) / 94.12%);
    border-color: rgb(var(--black-rgb) / 94.12%);
}

label.toggle input[type="checkbox"]:checked ~ textarea,
#diet-other:checked ~ #diet-details {
    margin-top: 0.75em;
    width: 100%;
    margin-bottom: 0.75em;
}

span.toggle-label {
    display: inline-block;
    max-width: calc(100% - 5.375em);
    padding: 0em 0em;
    position: relative;
    font-size: 1em;
    color: rgb(var(--black-rgb) / 94.12%);
    transition: all 0.2s;
}

.radio-custom {
    /* width: 1.2500em; */
    /* height: 1.2500em; */
    width: 1.75em;
    height: 1.75em;
    border: 0.0625em solid rgb(var(--black-rgb) / 20%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.3s,
        border-color 0.3s;
    position: relative;
}

.radio-custom::after {
    content: "";
}

input[type="radio"]:checked + .radio-custom {
    /* border: 0.3750em solid black; */
    /* border: 0.50em solid black; */
    border: 0.5em solid rgb(var(--black-rgb) / 94.12%);
}

input[type="radio"]:checked + .radio-custom::after {
    transform: scale(1);
}

.btn-secondary.focus {
    box-shadow: inset 0 0 0 0.0625em rgb(var(--black-rgb) / 20%);
    background-color: rgb(var(--white-rgb) / 100%);
}

label.toggle + textarea {
    width: calc(100% - 3.5em);
}

.consent-text {
    /* color: #757575; */
    color: rgb(var(--black-rgb) / 54.12%);
    display: block;
    font-size: 0.8313em;
    font-weight: 400;
}

.text-red {
    color: rgb(var(--red-rgb) / 100%);
}

.text-green,
.text-red.text-green {
    color: rgb(var(--green-rgb) / 100%);
}

.btn-primary {
    /* background-color: black; */
    background-color: rgb(var(--black-rgb) / 94.12%);
    color: rgb(var(--white-rgb) / 100%);
    font-size: 0.9375em;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-primary:hover {
    box-shadow:
        0 0 0 0.125em white,
        0 0 0em 0.1875em black;
}

.btn-primary:active {
    box-shadow:
        0 0 0 0.25em white,
        0 0 0em 0.3125em black;
}

.btn.btn-secondary:active {
    box-shadow:
        0 0 0 0.125em rgb(var(--white-rgb) / 100%),
        0 0 0em 0.1875em rgb(var(--black-rgb) / 20%);
    z-index: 1;
}

:disabled {
    opacity: 0.05;
    cursor: not-allowed;
    /* color: white; */
}

div#video-container,
.success-pass-video {
    display: none;
    position: fixed;
    width: 100%;
    max-width: 100svw;
    max-height: 100svh;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(var(--white-rgb) / 100%);
    backdrop-filter: blur(1.5em);
    z-index: 999999;
    margin: 0;
    padding: 0;
    height: 100%;
}

div#video-container:after,
div#video-container:before {
    content: "";
    background-color: rgb(255 255 255 / 50%);
    position: fixed;
    z-index: 1;
}

div#video-container:before {
    width: 0.0625em;
    height: 60%;
    top: 20%;
    left: 50%;
}

div#video-container:after {
    width: 60%;
    height: 0.0625em;
    top: 50%;
    left: 20%;
}

div#video-container video {
    position: absolute;
    width: 100svw;
    height: 100svh;
    object-fit: cover;
    margin: 0;
    max-height: none;
    border-radius: inherit;
}

button#capture {
    position: absolute;
    bottom: 0.5em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    background-color: rgb(255 0 0 / 50%);
    backdrop-filter: blur(0.5em);
    width: auto;
    font-size: 0.8313em;
    border-radius: 624.9375em;
    color: white;
}

button#capture:hover {
    box-shadow: none;
}

button#close-camera {
    position: fixed;
    z-index: 999;
    background-color: rgb(255 255 255 / 8%);
    backdrop-filter: blur(0.5em);
    top: 0.5em;
    right: 0.5em;
    width: 2em;
    height: 2em;
    min-height: auto;
    max-height: 2em;
    padding: 0;
    border-radius: 624.9375em;
}

button#close-camera svg {
    stroke-width: 1.5;
    flex-shrink: 0;
    height: 1.125em;
    width: 1.125em;
}

button#close-camera svg path {
    fill: white;
}

div#output {
    z-index: 1;
    position: relative;
    max-height: 7.5em;
}

div#output img {
    max-height: 7.5em;
    border-radius: inherit;
}

.personal-data {
    max-width: 27.5em;
    position: relative;
}

hr {
    width: calc(100% - 1.75em);
    margin: 3em auto 3em auto;
    border-top: 0.0625em solid;
    border-color: rgb(var(--black-rgb) / 5%);
}

body.profile hr {
    margin: 3em auto 3em auto;
}

strong {
    font-weight: 600;
}

ul {
    list-style: disc;
    list-style-type: disc;
    padding-left: calc(1.625em * 1.75);
}

ul ul {
    list-style: circle;
    list-style-type: circle;
}

li {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    padding-left: 0.375em;
}

/* otp */
body.otp {
    padding: 1em;
    justify-content: center;
    gap: 1.5em;
}

.otp-container {
    text-align: center;
    gap: 1.5em;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    height: calc(100svh - 2em);
    justify-content: center;
    align-items: center;
}

.otp-container h2 {
    display: none;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 0.625em;
}

.otp-input {
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    font-size: 1.5em;
    border-radius: 624.9375em;
    outline: none;
    caret-color: transparent;
    transition:
        background-color 0.3s,
        border-color 0.3s;
    background-color: rgb(var(--white-rgb) / 100%);
    box-shadow: inset 0 0 0 0.1em rgb(var(--black-rgb) / 20%);
    color: transparent;
}

.otp-input.filled {
    background-color: rgb(var(--black-rgb) / 100%) !important;
    box-shadow: inset 0 0 0 0em rgb(var(--black-rgb) / 20%);
}

.otp-input:focus {
    border-color: rgb(var(--black-rgb) / 100%);
    box-shadow:
        0 0 0 0.125em rgb(var(--white-rgb) / 100%),
        0 0 0 0.1875em rgb(var(--black-rgb) / 20%);
    outline: none;
}

.error-message + .otp-inputs input.otp-input {
    box-shadow:
        0 0 0 0.125em rgb(var(--white-rgb) / 100%),
        0 0 0 0.1875em rgb(var(--red-rgb) / 54.12%);
    background-color: rgb(var(--red-rgb) / 20%);
}

form#otp-form {
    display: flex;
    flex-direction: column;
}

.error-message {
    color: rgb(var(--red-rgb) / 100%);
    font-size: 0.8313em;
    order: 2;
    position: absolute;
    width: 100%;
    bottom: 0em;
}

.success-pass-video {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.videosuccessdiv video {
    border-radius: 0.625em;
}

.hidden-submit {
    display: none;
}

label.toggle .slider {
    display: inline-block;
    position: relative;
    /* background: black; */
    background: rgb(var(--black-rgb) / 20%);
    /* width: 1.8750em; */
    /* height: 1.2500em; */
    width: 2.625em;
    height: 1.75em;
    border: 0.875em solid rgb(var(--black-rgb) / 20%);
    border-radius: 624.9375em;
    cursor: pointer;
    transition: background 0.3s;
}

label.toggle .circle {
    display: inline-block;
    position: absolute;
    /* top: -0.5625em; */
    /* left: -0.5625em; */
    /* width: 1.1250em; */
    /* height: 1.1250em; */
    top: -0.8125em;
    left: -0.8125em;
    width: 1.625em;
    height: 1.625em;
    background: rgb(var(--white-rgb) / 100%);
    border-radius: 50%;
    border: 0em solid rgb(var(--white-rgb) / 100%);
}

label.toggle input[type="checkbox"]:checked + .slider .circle {
    /* transform: translateX(0.6250em); */
    transform: translateX(0.875em);
    /* background: white; */
    /* border-color: white; */
    background: rgb(var(--white-rgb) / 100%);
    border-color: rgb(var(--white-rgb) / 100%);
}

svg.svg-more {
    height: 1em;
    width: 1em;
    transform: rotate(180deg);
    stroke-width: 0.125em;
    stroke-width: 0.15em;
    color: rgb(var(--black-rgb) / 45%);
    fill: none;
    stroke: currentColor;
    transition: transform 0.15s;
}

a:hover .svg-more {
    transform: rotate(180deg) translateX(-0.5em);
}

label.gray {
    color: #757575;
}

.btn-primary.btn-danger:before {
    content: "";
    background: transparent;
    position: absolute;
    left: -0.25em;
    top: -0.25em;
    bottom: -0.25em;
    right: -0.25em;
    color: transparent;
    border: 0.0625em solid currentColor;
    border-radius: 624.9375em;
    transition: color 0.25s;
}

.btn-primary.btn-danger:hover:before {
    color: rgba(255, 0, 0, 0.5);
    border: 0.0625em solid currentColor;
    border-radius: 624.9375em;
}

body.home .main {
    padding: 2.75em 0.5em 2.75em 0.5em;
    height: calc(100% - 2.75em);
    overflow-y: auto;
    scrollbar-width: none; /* Для Firefox */
    -ms-overflow-style: none; /* Для IE и Edge */
}

body.home .personal-data {
    max-width: 21.875em;
}

body.home .content.width-full {
    margin-top: calc(2.75em + 3em);
    transition: margin-top 0.2s;
}

body.contact .content.width-full {
    margin-top: 0;
}

body.home a.btn.btn_a.relative.btn-secondary,
footer.rules a {
    font-weight: 500;
    box-shadow: 0 0 0 0.0625em rgb(var(--black-rgb) / 20%);
    /* background: rgb(var(--white-rgb) / 75%); */
    /* -webkit-backdrop-filter: grayscale(0) blur(10px); */
    backdrop-filter: grayscale(0) blur(10px);
}

body.home a.btn.btn_a.relative.btn-secondary:active,
footer.rules a:active {
    box-shadow:
        0 0 0 0.1875em rgb(var(--white-rgb) / 100%),
        0 0 0 0.25em rgb(var(--black-rgb) / 20%);
}

.header h1 {
    font-size: 1.0625em;
    text-transform: uppercase;
    font-weight: 500;
    background: linear-gradient(
        162deg,
        var(--logo-yellow) 50%,
        var(--logo-green) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* text-shadow: 0.0000em 0.0000em rgba(0, 0, 0, 0.25); */
    line-height: 1;
    top: auto;
    padding: inherit;
    letter-spacing: 0.02em;
}

ol.wwoofers-applications {
    list-style: auto;
}

ol.wwoofers-applications li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

ol.wwoofers-applications li button.btn.relative.btn-danger-outline {
    font-size: 0.8313em;
    border-color: rgb(var(--black-rgb) / 20%);
    padding: 0.25em 0.5em;
    min-height: auto;
    color: rgb(var(--red-rgb) / 100%);
}

ol.wwoofers-applications li button.btn.relative.btn-danger-outline:hover {
    border-color: rgb(var(--red-rgb) / 100%);
}

body.home {
    padding: 0;
    /* background-color: #fcfcfc; */
    max-height: 100svh;
    overflow-y: hidden;
}

.video-bg,
.video-bg video {
    display: none;
}

.flex.body-video .video-bg {
    width: 50%;
    /* order: 1; */
    border-radius: 1em 0 0 1em;
    /* overflow: hidden; */
    background-color: rgb(var(--white-rgb) / 100%);
    z-index: 1;
    /* min-width: 40vw; */
    height: auto;
}

.margin-top-96 {
    margin-top: 6em;
}

.max-width-375 {
    max-width: 23.4375em;
}

.margin-bottom-100 {
    margin-bottom: 1em;
}

.margin-24px-auto-48px-auto {
    margin: 1.5em auto 3em auto;
}

.max-width-440px {
    max-width: 27.5em;
}

.margin-bottom-16px {
    margin-bottom: 1em;
}

ol.all-wwoofers {
    max-width: 27.5em;
    margin: 0 auto;
    width: 100%;
    padding-left: 0;
}

ol.all-wwoofers li {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 0.75em;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

ol.all-wwoofers li img {
    border: 0.0625em solid rgb(var(--black-rgb) / 20%);
    width: 4em !important;
    height: 4em !important;
    border-radius: 50%;
}

ol.all-wwoofers li img + div {
    flex-direction: column;
}

ol.all-wwoofers li img + div > a {
    font-size: 1.125em;
}

ol.all-wwoofers li img + div > a + form button {
    margin: 0;
    padding: 0;
    font-size: 0.83125em;
    color: #757575;
    width: auto;
}

li form {
    z-index: -1;
    opacity: 0;
    transition: all 0.1s;
    padding: 1em;
    display: none;
}

li.more-options form {
    z-index: 1;
    opacity: 1;
    display: block;
}

li form button {
    font-size: 0.83125em;
    color: rgb(var(--red-rgb) / 100%);
    padding: 1em;
    background-color: rgb(var(--red-rgb) / 5%);
    border: 0.0625em solid transparent;
    border-radius: 0.75em;
    font-weight: 500;
}

a.delete-link {
    width: 100%;
    padding: 1em;
    border: 0.0625em solid transparent;
    border-radius: 0.75em;
    justify-content: space-between;
    color: rgb(var(--black-rgb) / 94.12%);
    font-weight: 500;
}

a.delete-link:after {
    content: "";
    display: none;
}

a.delete-link span.delete-link-span {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

a.delete-link:hover {
    background-color: rgb(0 0 0 / 2%);
    border: 0.0625em solid rgb(var(--black-rgb) / 20%);
}

li form button:hover {
    background-color: rgb(var(--red-rgb) / 8%);
    border: 0.0625em solid rgb(var(--red-rgb) / 20%);
}

.success-pass-video.frog {
    background-color: rgb(var(--white-rgb) / 100%);
}

.success-pass-video.frog .success-pass {
    width: 100%;
    height: 100%;
}

.success-pass-video.frog .videosuccessdiv video {
    width: 100%;
    filter: brightness(1.01);
    max-width: 100%;
    margin: auto;
    margin-left: 0;
    margin-bottom: 0;
    order: 3;
    border-radius: 0;
}

.success-pass-video.frog .success-pass .videosuccessdiv {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    height: 100%;
}

.success-pass-video.frog .videosuccessdiv video + div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    width: 100%;
    order: 2;
    padding: 1em;
    justify-content: flex-end;
    margin-bottom: 0;
    position: relative;
    top: 15svh;
    z-index: 1;
}

.success-pass-video.frog .videosuccessdiv video + div + div {
    width: 0;
}

.success-pass-video.frog .videosuccessdiv video + div h2 {
    color: rgb(var(--green-rgb) / 100%);
    font-size: 2em;
    font-weight: 500;
    padding: 0 0.425em;
}

a.back {
    text-decoration: none;
}

a.back h1 span:first-child,
a.back:hover h1 span:last-child {
    opacity: 1;
}

a.back:hover h1 span:first-child,
a.back h1 span:last-child {
    opacity: 0;
}

a.back h1 span:last-child,
a.back:hover h1 span:last-child {
    position: absolute;
    color: rgb(var(--black-rgb) / 20%);
    -webkit-text-fill-color: initial;
    text-transform: none;
    font-weight: 400;
}

figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    /* z-index: -1; */
    width: 100%;
    margin-block-start: 1em;
    margin-block-end: 2em;
}

li figure {
    max-width: calc(100% - 1.625em - 0.375em);
}

figcaption {
    color: rgb(var(--black-rgb) / 54.12%);
    color: rgb(var(--black-rgb) / 75%);
    padding: 0.5em 1em;
    padding: 1em 1em 0.5em 1em;
    text-align: center;
    font-size: 0.8125em;
    font-size: 0.9em;
    max-width: calc(100% - 0.75em - 0.75em);
    margin: 0 auto;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    display: block;
}

h2 {
    font-weight: bold;
    position: sticky;
    top: 1.5em;
    display: block;
    background-color: rgb(var(--white-rgb) / 100%);
    background: linear-gradient(
        180deg,
        rgb(var(--white-rgb) / 100%) 75%,
        transparent
    );
    padding-top: 1em;
    padding-bottom: 1.25em;
    z-index: 1;
}

span.v-guide {
    color: rgb(var(--black-rgb) / 54.12%);
    padding: 0.5em 1em;
    text-align: center;
    font-size: 0.8125em;
    font-weight: 600;
}

small {
    font-size: 0.8125em;
    color: rgb(var(--black-rgb) / 54.12%);
}

h1 {
    font-size: 1.375em;
}
h2 {
    font-size: 1.25em;
}
h3 {
    font-size: 1.125em;
    margin-block-start: 1.75em;
    margin-block-end: 0.5em;
}
h4 {
    font-size: 1em;
    margin-block-start: 1em;
    margin-block-end: 0.25em;
}
h5 {
    font-size: 0.875em;
}
h6 {
    font-size: 0.8313em;
}

footer.rules a {
    box-shadow:
        0 0 0 0.0625em rgb(var(--black-rgb) / 20%),
        0px 0.2em 0.6em rgb(var(--black-rgb) / 8%);
    background: rgb(var(--white-rgb) / 75%);
    -webkit-backdrop-filter: grayscale(0) blur(10px);
    backdrop-filter: grayscale(0) blur(10px);
}

footer.rules.flatbtn a {
    box-shadow:
        0 0 0 0.0625em rgb(var(--black-rgb) / 20%),
        0px 0em 0em rgb(var(--black-rgb) / 0%);
}

.btn-secondary > div > .flex.flex-col input,
.btn-secondary > div > .flex.flex-col .input {
    order: 1;
    opacity: 0;
    transition: all 0.2s;
    width: 100%;
}

.btn-secondary.focus > div > .flex.flex-col input,
.btn-secondary.focus > div > .flex.flex-col .input,
.btn-secondary.label-done > div > .flex.flex-col input,
.btn-secondary.label-done > div > .flex.flex-col .input {
    opacity: 1 !important;
}

.btn-secondary label {
    position: relative;
    top: 0.88em;
    transition: all 0.2s;
    min-height: 1.75em;
}

.btn-secondary.focus label,
.btn-secondary.label-done label {
    top: 0;
    font-size: 0.83125em;
    min-height: 2.1055em;
}

.btn-secondary > div > .flex.flex-col .toggle-container input,
.btn-secondary > div > .flex.flex-col .toggle-container .input,
.btn-secondary .toggle-container label,
.btn-secondary.focus .toggle-container label,
.btn-secondary.label-done .toggle-container label {
    top: 0;
    font-size: 1em;
    min-height: 1.75em;
}

.input.required + label:after,
input[required] + label:after {
    content: "*";
    color: rgb(var(--red-rgb) / 100%);
    margin-left: 0.25em;
}

.btn-secondary.focus input[required] + label:after,
.btn-secondary.focus .input.required + label:after {
    content: "required";
    background-color: rgb(var(--red-rgb) / 20%);
    padding: 0.25em 0.5em;
    border-radius: 1em;
    font-size: 0.75em;
    position: relative;
    top: -0.15em;
    transition:
        color 0.2s,
        background-color 0.2s;
}

.input.required + label.gray:after,
input[required] + label.gray:after {
    color: rgb(var(--green-rgb) / 90%);
    opacity: 0;
}

.btn-secondary.focus input[required] + label.gray:after,
.btn-secondary.focus .input.required + label.gray:after {
    background-color: rgb(var(--green-rgb) / 15%);
}

footer {
    transition: all 0.4s;
}

footer.x3 {
    transform: translateY(200%);
}

.videoiframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 = 9 / 16 = 0.5625 * 100 */
    height: 0;
    overflow: hidden;
    border-radius: 0.75em 0.75em 0.75em 0.75em;
}

.videoiframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.contact-page {
    position: absolute;
    opacity: 0;
    width: 100%;
    z-index: -1;
    transition: all 0.2s;
    transform: scale(0.95);
    flex-direction: column;
    gap: 0.5em;
    display: none;
}

body.contact .contact-page {
    opacity: 1;
    z-index: 9999;
    transform: scale(1);
    position: relative;
    display: flex;
    margin-bottom: 3em;
}

body.contact .admin {
    opacity: 0;
    transform: scale(0.95);
    z-index: -1;
    transition: all 0.2s;
    position: absolute;
}

body .admin {
    transition: all 0.2s;
    transform: scale(1);
}

body.home .contact-page a.btn.btn_a.relative.btn-secondary {
    font-weight: 400;
    box-shadow: none;
}

button.link span:first-child {
    opacity: 1;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.link span:last-child {
    opacity: 0;
    border: none;
    position: absolute;
    display: flex;
    align-items: center;
    /* color: rgb(var(--red-rgb) / 50%); */
    color: rgb(var(--black-rgb) / 75%);
    /* color: #555; */
}

body.contact button.link span:first-child {
    opacity: 0;
}

body.contact button.link:hover {
    background-color: rgb(var(--red-rgb) / 5%);
}
body.contact button.link span:last-child {
    opacity: 1;
}

img[alt="ava"] {
    width: 3.5em;
    height: 3.5em;
    border-radius: 3em;
}
.join {
    width: 4em;
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3em;
}

span.local-time {
    display: none;
    color: rgb(var(--black-rgb) / 54.12%);
    font-size: 0.8125em;
    font-weight: 400;
    margin-top: -0.5em;
}

body.contact span.local-time {
    display: block;
}

.active-label {
    font-weight: 600;
}

label.toggle + textarea {
    margin-top: 0.75em;
}

svg.icon-phone {
    height: 1em;
    width: 1em;
    transform: rotate(-90deg);
    color: rgb(var(--black-rgb) / 54.12%);
    fill: currentColor;
}

body.wwoofers-list .wwoofer-info {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

body.wwoofers-list ol.all-wwoofers li {
    display: flex;
    justify-content: flex-start;
}

body.wwoofers-list ol.all-wwoofers li {
    width: 100%;
    padding: 1em;
    border: 0.0625em solid transparent;
    border-radius: 0.75em;
    justify-content: space-between;
    color: rgb(var(--black-rgb) / 94.12%);
    font-weight: 500;
}

body.wwoofers-list .wwoofer-info img + span {
    justify-content: space-between;
    gap: 1em;
}

span.nation {
    display: none;
}

img[alt="Automated aquaponic system components developed by Aftaz Growing Systems"] {
    max-width: 14em;
}

/* @media (min-width: 768px)  */

@media (min-aspect-ratio: 1/1) {
    .flex.body-video .video-bg + div {
        border-radius: 1.5em;
        background-color: rgb(var(--white-rgb) / 100%);
        order: 0;
    }

    .video-bg {
        position: relative;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0em;
        right: 0;
        bottom: 0;
        order: 1;
        overflow: hidden;
        /* display: flex; */
        align-items: center;
        justify-content: center;
    }

    .video-bg,
    .video-bg video {
        display: flex;
    }

    .video-bg .video-container {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0em;
        overflow: hidden;
    }

    .video-bg .video-container:after {
        content: "";
        position: absolute;
        top: 0;
        left: -10%;
        height: 100%;
        width: 100%;
    }

    .video-bg .video-container video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        left: 0;
        bottom: 0%;
        right: 0;
        max-height: none;
        border-radius: initial;
        background-color: transparent;
    }

    .header {
        width: calc(100% + 5.625em);
        gap: 1.5em;
    }

    .success-pass-video.frog .videosuccessdiv video {
        width: 40%;
        order: 0;
        background-color: transparent;
    }

    .success-pass-video.frog .success-pass .videosuccessdiv {
        flex-direction: row;
    }

    .success-pass-video.frog .videosuccessdiv video + div {
        width: 40%;
        top: auto;
        justify-content: center;
        order: 1;
    }

    .success-pass-video.frog .videosuccessdiv video + div + div {
        width: 20%;
        order: 3;
    }
}

@media (min-width: 1440px) {
    body {
        /* font-size: 20px; */
        font-size: 16px;
    }
}

@media (min-width: 1980px) {
    body {
        /* font-size: 24px; */
        font-size: 20px;
    }
}

@media print {
    body {
        font-size: 14px !important;
        background-color: white !important;
    }

    .logo defs linearGradient > stop {
        stop-color: black !important;
    }

    .logo defs linearGradient > stop + stop {
        stop-color: white !important;
    }

    .header,
    .label-btn-grup {
        position: relative;
        top: 0em;
    }

    .header h1 {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        background-clip: initial !important;
        color: #757575 !important;
        text-shadow: none !important;
    }

    .no-print {
        display: none !important;
    }

    .print-new-page {
        page-break-before: always;
        break-before: page;
    }

    .avoid-break {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --black-rgb: 255 255 255;
        --white-rgb: 0 0 0;
        --a: rgb(0 153 255);
        --link-color: #8ab4f8;
        --visited-link-color: rgb(215 174 251);
    }

    body.contact button.link:hover {
        background-color: rgb(var(--red-rgb) / 15%);
    }
}

.avoid-break.width-full.photodiv {
    position: relative;
    top: 0.5em;
    left: 0;
}

.avoid-break.width-full.photodiv.lip-photo button#enable-camera {
    align-items: center !important;
}

.avoid-break.width-full.photodiv.lip-photo div#photo-container {
    width: 3.35em;
    height: 3.35em;
    margin-bottom: 0em;
}

.avoid-break.width-full.photodiv.lip-photo div#photo-container:before {
    opacity: 0;
    display: none;
}

.avoid-break.width-full.photodiv.lip-photo {
    width: auto;
    margin-left: auto;
    margin-right: 0;
    position: sticky;
    z-index: 99999;
}

.avoid-break.width-full.photodiv.lip-photo div#photo-container div#output {
    max-height: 3.35em;
}

.avoid-break.width-full.photodiv.lip-photo div#photo-container div#output img {
    max-height: 3.35em;
}

.avoid-break.width-full.photodiv.lip-photo.take-photo div#photo-container {
    border-color: rgb(var(--red-rgb) / 100%);
    animation: pulse-shadow 1.5s infinite ease-in-out;
}

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0.1em rgb(var(--red-rgb) / 50%);
    }
    50% {
        box-shadow: 0 0 0.6em rgb(var(--red-rgb) / 90%);
    }
    100% {
        box-shadow: 0 0 0.1em rgb(var(--red-rgb) / 50%);
    }
}

p#photo-warning {
    color: rgb(var(--red-rgb) / 100%);
    background: linear-gradient(180deg, rgb(var(--red-rgb) / 5%), transparent);
    margin-bottom: 2em;
    border-top: 0.0625em solid rgb(var(--red-rgb) / 50%);
    font-size: 0.8313em;
}

button#save-button span:first-child,
button#save-button.take-photo-fuck span:last-child {
    display: block;
}

button#save-button.take-photo-fuck span:first-child,
button#save-button span:last-child {
    display: none;
}

.insta-div {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.insta-div a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color: white;
    font-size: 1.25em;
    font-weight: 500;
    gap: 0.5em;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgb(0 0 0 / 50%), transparent);
    opacity: 0;
    transition: opacity 0.15s;
}

.insta-div a span {
    gap: 0.25em;
    margin-bottom: 0em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-bottom: 2em;
    transition: padding-bottom 0.15s;
}

.insta-div a span svg {
    width: 3em;
}

.insta-div a:hover {
    opacity: 1;
}

.insta-div a:hover:after {
    content: "";
}

.insta-div a:hover span {
    padding-bottom: 4.6em;
}

body.home.contact .personal-data p {
    display: none;
}

body.home.contact a.link {
    width: 100%;
    padding: 0.5em 3.75em;
}

body.home.contact footer.footer {
    position: sticky;
    padding: 5em 0.25em 0.25em 0.25em;
    bottom: 0em;
    background: linear-gradient(0deg, rgb(var(--white-rgb) / 75%), transparent);
    /* -webkit-backdrop-filter: grayscale(0) blur(10px); */
    /* backdrop-filter: grayscale(0) blur(4px); */
    z-index: 999999;
}

body.home.contact .main {
    height: calc(100% - 0em);
    padding: 15em 0.5em 5em 0.5em;
}

.framer-blur-container {
    bottom: 0;
    cursor: none;
    flex: none;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: -1;
}

.framer-blur-container div {
    position: absolute;
    inset: 0;
    border-radius: 0px;
    pointer-events: none;
}
.framer-blur-container div:nth-child(1) {
    z-index: 1;
    backdrop-filter: blur(0.078125px);
    -webkit-backdrop-filter: blur(0.078125px);
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 0%,
        rgb(0, 0, 0) 12.5%,
        rgb(0, 0, 0) 25%,
        rgba(0, 0, 0, 0) 37.5%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 0%,
        rgb(0, 0, 0) 12.5%,
        rgb(0, 0, 0) 25%,
        rgba(0, 0, 0, 0) 37.5%
    );
}
.framer-blur-container div:nth-child(2) {
    z-index: 2;
    backdrop-filter: blur(0.15625px);
    -webkit-backdrop-filter: blur(0.15625px);
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 12.5%,
        rgb(0, 0, 0) 25%,
        rgb(0, 0, 0) 37.5%,
        rgba(0, 0, 0, 0) 50%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 12.5%,
        rgb(0, 0, 0) 25%,
        rgb(0, 0, 0) 37.5%,
        rgba(0, 0, 0, 0) 50%
    );
}
.framer-blur-container div:nth-child(3) {
    z-index: 3;
    backdrop-filter: blur(0.3125px);
    -webkit-backdrop-filter: blur(0.3125px);
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 25%,
        rgb(0, 0, 0) 37.5%,
        rgb(0, 0, 0) 50%,
        rgba(0, 0, 0, 0) 62.5%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 25%,
        rgb(0, 0, 0) 37.5%,
        rgb(0, 0, 0) 50%,
        rgba(0, 0, 0, 0) 62.5%
    );
}
.framer-blur-container div:nth-child(4) {
    z-index: 4;
    backdrop-filter: blur(0.625px);
    -webkit-backdrop-filter: blur(0.625px);
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 37.5%,
        rgb(0, 0, 0) 50%,
        rgb(0, 0, 0) 62.5%,
        rgba(0, 0, 0, 0) 75%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 37.5%,
        rgb(0, 0, 0) 50%,
        rgb(0, 0, 0) 62.5%,
        rgba(0, 0, 0, 0) 75%
    );
}
.framer-blur-container div:nth-child(5) {
    z-index: 5;
    backdrop-filter: blur(1.25px);
    -webkit-backdrop-filter: blur(1.25px);
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 50%,
        rgb(0, 0, 0) 62.5%,
        rgb(0, 0, 0) 75%,
        rgba(0, 0, 0, 0) 87.5%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 50%,
        rgb(0, 0, 0) 62.5%,
        rgb(0, 0, 0) 75%,
        rgba(0, 0, 0, 0) 87.5%
    );
}
.framer-blur-container div:nth-child(6) {
    z-index: 6;
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 62.5%,
        rgb(0, 0, 0) 75%,
        rgb(0, 0, 0) 87.5%,
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 62.5%,
        rgb(0, 0, 0) 75%,
        rgb(0, 0, 0) 87.5%,
        rgba(0, 0, 0, 0) 100%
    );
}
.framer-blur-container div:nth-child(7) {
    z-index: 7;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 75%,
        rgb(0, 0, 0) 87.5%,
        rgb(0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 75%,
        rgb(0, 0, 0) 87.5%,
        rgb(0, 0, 0) 100%
    );
}
.framer-blur-container div:nth-child(8) {
    z-index: 8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 87.5%,
        rgb(0, 0, 0) 100%
    );
}

.auto-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 8px;
    margin-top: 0.25em;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-radius: 0.875em;
    border-width: 0.0625em;
    box-shadow:
        inset 0 0 0 0.0625em rgb(var(--black-rgb) / 20%),
        0 0.1em 0.75em 0 rgb(var(--black-rgb) / 8%);
    background-color: rgb(var(--white-rgb) / 100%);
    padding: 0.75em 0.75em;
}

.auto-item b {
    font-weight: 700;
}

.auto-item {
    padding: 0.75em 1.25em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
    border-radius: 0.5em;
}
.auto-item:hover,
.auto-item.active {
    background-color: rgb(var(--black-rgb) / 5%);
}