.wt9og {
    position: relative;
    display: inline-block;
    width: 100%;
}

.vYn40 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: clamp(100px, calc(-100vw / 10 + 220px), 160px);
}

.vYn40 textarea {
    height: 100%;
}


.wt9og textarea {
    /* --paramTextAreaHeight: 20px; */
    position: relative;
    width: 100%;
    height: var(--paramTextAreaHeight);
    min-height: var(--paramTextAreaHeight);
    box-sizing: border-box;
    overflow: hidden;
}

.wt9og textarea:hover {
    background-color: var(--button-hover-color);
}

.O0kTr {
    position: absolute;
    font-size: 0.9em;
    width: calc(100% - 30px);
    top: -1px;
    height: 100%;
    left: 8px;
    color: #888;
    pointer-events: none;
    display: none;
    white-space: nowrap;
    overflow: hidden;
    align-content: center;
}
.O0kTr.tH2_v, .O0kTr.OvNgi {
    height: 85%;
    white-space: wrap;
}
.O0kTr.tH2_v, .O0kTr.OvNgi {
    top: 0;
    transform: translateY(0);
    align-content: center;
}
.O0kTr ul {
    margin: 0;
}
.O0kTr.FmsTG {
    display: block;

}
.wt9og input:valid + .O0kTr,
.wt9og input:focus + .O0kTr {
    display: none;
}

.Om8Ay {
    animation: Om8Ay 3s ease-in-out infinite;
}

@keyframes Om8Ay {
    0%, 100% { border-color: var(--color-27); }
    /* 50% { box-shadow: 0 0 10px 5px rgba(0, 123, 255, 0.3); } */
    30%, 70% { border-color: orange; background-color: #24D3BA22; }
}

/* @keyframes paramTaskAttention {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
    50% { box-shadow: 0 0 1px 1px var(--color-27); background-color: #fff1; }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
} */

.oDeJy {
    position: relative;
    display: inline-block;
}

.L8mPe > input {
    width: 100%;
    color: white;
    border: 1px solid green;
    border-radius: 7px;
    background-color: #445;
    padding: 5px 40px 5px 7px;
}

.Tpj0A {
    display: none;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    background-color: #223;
    z-index: 3;
}

.Tpj0A.FmsTG {
    display: block;
}

.Tpj0A li {
    padding: 2px 0;
    cursor: pointer;
}

.Tpj0A li > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff2;
    border-radius: 5px;
    padding: 7px;
}
.Tpj0A li > div:hover {
    background-color: #fff5;
}

.Tpj0A li:last-child {
    border-bottom: none;
}

.Tpj0A li button {
    background: red;
    color: white;
    border: none;
    cursor: pointer;
}

.oDeJy.sfM0Z .Tpj0A {
    display: block;
}

.tMjxP {
    cursor: grab;
    margin-right: 10px;
}

.aj4Uz {
    position: absolute;
    right: -18px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url(3eb6af4d9c754fc1d4e4.svg);
    background-size: 100%;
    transform: translateX(-20px);
}
.aj4Uz.Qpkqz {
    display: none;
}

.Ty3_o {
    position: absolute;
    display: none;
    right: 3px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url(5820e3636c34c683663a.svg);
    background-size: 100%;
    transform: translateX(-15px);
}

.Ty3_o::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 20px;
    /* Position below the button */
    right: 0;
    width: 100px;
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 7px;
    text-align: center;
    /* white-space: nowrap; Prevent tooltip text from wrapping */
    opacity: 0;
    /* Initially hidden */
    transition: opacity 0.3s ease;
    /* Smooth fade-in */
    pointer-events: none;
}

.Ty3_o:hover::after {
    opacity: 1;
    /* Show the tooltip on hover */
}

.JVMiu {
    display: flex;
    justify-content: right;
    align-items: center;
}

.tMjxP {
    width: 20px;
    height: 20px;
    cursor: move;
    background-image: url(e3abb0e5dcb012fea452.svg);
    background-size: 100%;
}

.vc_av {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url(027939e5f160558b808e.svg);
    background-size: 100%;
}


.L8mPe {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}
.M4b1J {
    width: 600px;
    max-width: 90vw;
    margin: auto;
    margin-bottom: 50px;
    flex: 1;
}

.M4b1J .wDlep {
    display: flex;
    justify-content: space-around;
    margin-top: 42px;
}

.M4b1J button {
    padding: 5px 20px;
    width: 100px;
    font-size: 0.8em;
    border: none;
    border-radius: 1000px;
    background-color: #f1f1f1;
    cursor: pointer;
    background-color: var(--color-27);
}

.M4b1J button.n_a8n {
    background-color: var(--grey-color);
}

.M4b1J button.YJM4u {
    padding: 10px 20px;
    width: 150px;
    font-size: 1em;
    font-weight: bold;
}

.M4b1J li {
    margin: 13px 0;
    line-height: 1.2;
}
/* app.css - Restructured */

/* FONTS */
/* font for the logo */
@font-face {
    font-family: Octarine-Bold;
    src: url(f57a997fec1295535f70.otf) format("opentype");
}

/* GLOBAL STYLES */
* {
    --font: "Maven Pro", sans-serif;
    --std-margin: 10px;
    --border-radius: 10px;
    --color-27: #24D3BA;
    --text-color: white;
    --grey-color: #899;
    --bg-color: #101112;
    --button-hover-color: #122;
}

c27 {
    color: var(--color-27);
}

body {
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    box-sizing: content-box;
    font-family: var(--font);
    font-optical-sizing: auto;
}

#app {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: auto;
    height: fit-content;
    color: white;
    /* border: 2px solid var(--color-27); */
    border-radius: var(--body-margin);
    border-bottom: 0px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.gL1zM {
    font-size: 1.0em;
    color: white;
    animation: gL1zM 1.7s infinite;
}

@keyframes gL1zM {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* TYPOGRAPHY */
h1 {
    font-weight: 500;
}

.UqwCi {
    margin: 50px auto 20px;
    font-size: min(7vw, 3em);
    text-align: center;
}

@media screen and (max-width: 500px) {
    .UqwCi {
        margin: 30px auto 20px;
    }
}

.P7lUs {
    margin: 20px auto 20px;
    font-size: 1em;
    text-align: center;
}

label {
    font-size: 1em;
    margin-left: 5px;
    color: var(--color-27);
}

/* LAYOUT UTILITIES */
.Oq408 {
    margin: var(--std-margin);
}

.c9SIL {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* COMPONENTS */
.W_Dsn {
    position: relative;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.zRRYB {
    position: relative;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.uqcXP {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    align-items: center;

    position: sticky;
    bottom: 20px;
    opacity: 0.9;
}

.UUUFl {
    position: relative;
    width: 24px;
    height: 24px;
    background-image: url(5431117fe38eed628c8b.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.jGhTr{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 30px;
    background-image: url(6a480fc114fd5c44272f.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.xKalM {
    position: relative;
    margin: var(--std-margin);
    flex: 1;
}

.uf_cp {
    max-width: min(500px, 90vw);
    padding: 20px;
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
}

.uf_cp a {
    color: var(--color-27);
    text-decoration: none;
}

.hC9nn p {
    margin-block-start: 0.2em;
    margin-block-end: 0;
    color: var(--color-27);
}

.hC9nn p .H2yjc {
    color: var(--color-27);
}

.hC9nn p ._1eXmW {
    color: white;
}

.SijJN {
    color: white;
    line-height: 1.1em;
}

.j6FKD {
    color: white;
    font-size: 0.8em;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    /* Adjust timing as needed */
}

.j6FKD.lXcPs {
    max-height: 10000px;
}

.r__B8 {
    background-color: #122;
    padding: 20px;
    color: white;
    border-radius: 10px;
    text-align: center;
    max-width: 80vw;
}

.r__B8 .uJD1T {
    display: flex;
    justify-content: space-between;
}

.GxVx0 {
    margin-bottom: 50px;
}

.qnf4I {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2%;
}

.hATfI {
    display: flex;
    flex-direction: column;
}

.HpjK8 {
    height: 60px;
    width: 100%;
}

.Y6ge8 {
    display: flex;
    justify-content: right;
    padding: 10px 0 10px;
    margin-bottom: -20px;
    gap: 7px;
    cursor: pointer;
}

.Y6ge8 .Xon4U {
    color: var(--color-27);
}

.Y6ge8 .yXH9R {
    margin-right: 5px;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.Y6ge8 .yXH9R.H_4Eu {
    transform: rotate(-90deg);
}

button.ZLF5u {
    background-color: transparent;
    border: 1px solid var(--color-27);
    color: var(--color-27);
    width: fit-content;
    margin: 10px auto;
}

.g226l {
    position: relative;
    margin-top: 15px;
}

.g226l.kXbge {
    grid-column: 1 / 4;
}

.g226l.E79vb {
    opacity: 0.4;
}

.g226l._Npe4 {
    display: none;
}

.g226l .djYb5 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.g226l input,
textarea {
    font-family: var(--font);
    color: white;
    border: 1px solid var(--color-27);
    border-radius: 7px;
    background-color: var(--bg-color);
    box-sizing: border-box;
    padding: 8px 5px;
    resize: none;
    scrollbar-color: #444 #122;
}

.g226l textarea {
    --paramTextAreaHeight: 27px;
}

.g226l.GfHWz textarea,
.g226l.f4l37 textarea {
    overflow: auto;
}

.kXbge textarea {
    resize: vertical;
}

.s0vJW {
    display: flex;
    background-color: red;
    align-items: bottom;
    height: 100%;
    height: 48px;
}

.pvV0N {
    position: relative;
    margin-top: 20px;
    flex-grow: 1;
}

.pvV0N.E79vb {
    opacity: 0.4;
}

.NF4jx {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.fcTNK {
    width: 100%;
    height: 80px;
    padding: 5px 7px;
    resize: vertical;
    /* Optional: allows manual resizing */
}

.gBNGv {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 2px 3px 0;
    font-size: 0.8em;
}

.UhZou {
    text-align: right;
    color: orange;
}

.x_9oX {
    color: white;
}

.ZQskC {
    height: 100px;
}

/* BUTTONS AND INTERACTIVE ELEMENTS */
button {
    cursor: pointer;
    border: none;
}

.Jat3j {
    border: 1px solid var(--color-27);
    border-radius: 1000px;
    padding: 5px 20px;
    color: var(--color-27);
    background-color: transparent;
    margin: 30px auto 10px;
}

.C6l0o {
    /* Make the button a block element */
    display: block;
}

.rHUa9 {
    min-width: 150px;
    height: 30px;
    border-radius: 1000px;
    margin: 7px 5px;
    /* padding: 5px 20px; */
    background-color: var(--color-27);
    font-size: 15px;
    color: black;
    border: 0;
    transition: transform 0.1s ease-in-out;
}

.rHUa9:hover {
    transform: scale(1.05);
}

.XG3KL,
.cb42r {
    background-color: transparent;
    border: 1px solid var(--color-27);
    color: var(--color-27);
}

.XG3KL {
    /* Placeholder for specificity */
}

.cb42r {
    background-image: url(f45153b0741b617a09d4.svg);
    background-size: 24px;
    background-position: 99% center;
    background-repeat: no-repeat;
}

.h5H3K {
    background-color: #ff9000;
    height: 50px;
    font-size: 1.2em;
    font-weight: bold;
    color: black;
    padding: 9px 70px 5px 20px;
    background-size: 28%;
    background-position: 90% 30%;
    background-repeat: no-repeat;
    background-image: url(bf903013f71b83416cc6.png);
}


.T9PME,
.G_2xX,
.d3feM {
    width: 20px;
    aspect-ratio: 1/1;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
}

.T9PME,
.d3feM {
    margin-left: 7px;
    background-image: url(163da051bfa50994545c.svg);
}

.G_2xX {
    background-image: url(f45153b0741b617a09d4.svg);
}

.d3feM {
    background-image: url(f45153b0741b617a09d4.svg);
}

.T9PME::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 20px;
    /* Position below the button */
    left: 3px;
    width: calc(100% - 15px);
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 3px;
    /* white-space: nowrap; Prevent tooltip text from wrapping */
    opacity: 0;
    /* Initially hidden */
    transition: opacity 0.3s ease;
    /* Smooth fade-in */
    pointer-events: none;
}

.T9PME:hover::after {
    opacity: 1;
    /* Show the tooltip on hover */
}

input[type="checkbox"] {
    -webkit-appearance: none;
    /* Remove default appearance (webkit browsers) */
    -moz-appearance: none;
    /* Remove default appearance (Firefox) */
    appearance: none;
    /* Remove default appearance (other browsers) */
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 1px;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: red;
    border: none;
    position: relative;
    /* For positioning the checkmark */
}

input[type="checkbox"]:checked::before {
    /* Checkmark */
    content: "\2713";
    /* Unicode checkmark character */
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

/* LINKS AND COLORS */
.vIC9A {
    display: inline-block;
    color: var(--color-27);
    cursor: pointer;
    text-decoration: none;
}

.vIC9A:hover {
    transform: scale(1.03);
}

.tmoRR {
    color: var(--color-27);
}

.V2aPC {
    color: var(--grey-color);
}

.tJwKm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    gap: 10px;
}

.eEPy1 {
    border-radius: 1000px;
    width: 110px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    background-size: 66%;
    background-repeat: no-repeat;
    background-position: center;
}

.eEPy1:hover {
    transform: scale(1.03);
}

.eEPy1.rI6l1 {
    background-image: url(6c3b2f79afb392349801.svg);
}

.eEPy1.JoNTU {
    background-image: url(97ed43f0e10fc2c9a622.svg);
    background-size: 60%;
    background-position: center 4px;
}

.eEPy1.YvmTQ {
    background-image: url(e4157d5ff47bb8809cd1.svg);
    background-size: 80%;
}

.eEPy1.x1JdK {
    background-image: url(99979baa24a721fc1c48.svg);
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
    .W_Dsn {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Zwei Spalten für kleinere Viewports */
        grid-template-rows: auto auto;
        /* Zwei Zeilen */
        grid-template-areas:
            "suggestions suggestions"
            "historyButton clearAllButton";
        /* div-1 und div-3 nebeneinander */
    }

    .XG3KL {
        grid-area: historyButton;
    }

    .m3_b3 {
        grid-area: suggestions;
        text-align: center;
        color: #ffffa5;
        margin-bottom: 10px;
    }

    .cb42r {
        grid-area: clearAllButton;
    }
}

@media screen and (max-width: 1200px) {
    .qnf4I {
        grid-template-columns: repeat(4, 1fr);
    }

    .g226l.kXbge textarea {
        --paramTextAreaHeight: 20px;
    }
}

@media screen and (max-width: 950px) {
    .qnf4I {
        grid-template-columns: repeat(3, 1fr);
    }

    .g226l.kXbge textarea {
        --paramTextAreaHeight: 20px;
    }
}

@media screen and (max-width: 700px) {
    .qnf4I {
        grid-template-columns: repeat(2, 1fr);
    }

    .g226l.kXbge {
        grid-column: 1 / 3;
    }

    .g226l.kXbge textarea {
        --paramTextAreaHeight: 40px;
    }
}

@media screen and (max-width: 400px) {
    .qnf4I {
        grid-template-columns: repeat(1, 1fr);
    }

    .g226l.kXbge {
        grid-column: 1 / 2;
    }

    .g226l.kXbge textarea {
        --paramTextAreaHeight: 60px;
    }
}

@media screen and (max-width: 500px) {
    .zRRYB {
        position: sticky;
        bottom: 20px;
        opacity: 0.9;
    }

    .uqcXP {
        position: sticky;
        bottom: 20px;
    }

    .rHUa9 {
        margin: 5px 5px;
        overflow: hidden;
        font-size: 0.9em;
    }
}

@media screen and (max-width: 500px) {
    .rHUa9 {
        margin: 7px 5px;
    }
}

@media screen and (max-width: 600px) {
    .A0S6H {
        display: none;
    }
}
.Nsrqo {
    margin: var(--std-margin);
    margin-bottom: 30px;
    flex: 1;
}

.u8VhP {
    margin: var(--std-margin);
    margin-bottom: 60px;
    flex: 1;
}

.q3k2J {
    font-size: 1.2em;
}

.q3k2J a {
    color: var(--color-27);
}

.Sb4QE {
    font-size: 0.9em;
    color: #bbb;
}

.Nsrqo strong, .u8VhP strong {
    font-weight: bold;
    color: var(--color-27);
}
.nY0uR {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(var(--color-27), 0.9);
    border: 1px solid var(--color-27);
    color: #888;
    font-size: 16px;
    border-radius: 1000px;
    transition: color 0.3sease;
    padding: 4px 30px 3px 10px;
    user-select: none;
}

.nY0uR:hover {
    background-color: var(--button-hover-color);
}

.nY0uR.FAkZj .LEfLR {
    color: #fff;
}

.LEfLR {
    font-size: 0.85em;
    padding: 2px;
}

.NIZCF {
    position: absolute;
    top: 0;
    right: -2px;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    transition: background-image 0.3s ease, background-color 0.3s ease;
    background-image: url(e5ac2fa940acab5f0d49.svg);
    background-size: 67%;
    background-position: center;
    background-repeat: no-repeat;
}

.NIZCF.FAkZj {
    background-image: url(35fd9709baddafdda7b9.svg);
}
.yHM1M {
    text-align: center;
    margin-bottom: 10px;
    color: var(--color-27);
}

.du8p2 {
    top: 0;
    padding: 20px;
    background-color: #344;
    border: 1px solid var(--color-27);
    border-radius: 5px;
}

.kbHtY {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    aspect-ratio: 1/1;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(f45153b0741b617a09d4.svg);
}

.vt3RW {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30px;
    cursor: pointer;
    background-color: #8993;
    max-width: min(80vw, 400px);
    margin: 5px;
    padding: 3px 20px 3px 3px;
    border-radius: 5px;
}

.vt3RW:hover {
    background-color: var(--color-27);
    color: black;
}

.PLLka {
    text-align: center;
    color: var(--color-grey);
}
.s5kv4 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    --duration: 200ms;
}

.X5vJ9 {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 10px;
    right: 10px;
    background-image: url(4862e872571a3183d95c.svg);
    background-size: 100%;
    background-color: rgba(0, 0, 0, 0.001);
    border: none;
    cursor: pointer;
    filter: var(--theme-filter);
    z-index: 200003;
}

.cbNS0 {
    --vertical-position: 50%;
    --translateY: calc(-1 * var(--vertical-position));

    position: absolute;
    min-width: 300px;
    top: var(--vertical-position);
    left: 50%;
    transform: translate(-50%, var(--translateY));
    z-index: 200002;
}

.oKXQ8 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: grey;
    z-index: 200001;
}

.oKXQ8.XkPAO {
    animation: cozYK var(--duration);
}

.oKXQ8.pPmXN {
    opacity: 0.5;
}

.oKXQ8:not(.pPmXN) {
    animation: GD82r var(--duration);
    opacity: 0;
}

.cbNS0.XkPAO {
    animation: MKY5w var(--duration);
}

.cbNS0.pPmXN {
    opacity: 1;
}

.cbNS0:not(.pPmXN) {
    animation: U8bxv var(--duration);
    opacity: 0;
}

.cbNS0.mBXSI {
    animation: 70ms alternate 2 mBXSI;
}

@keyframes MKY5w {
    from {
        opacity: 0;
        transform: translate(-50%, var(--translateY)) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, var(--translateY));
    }
}

@keyframes U8bxv {
    from {
        opacity: 1;
        transform: translate(-50%, var(--translateY));
    }

    to {
        opacity: 0;
        transform: translate(-50%, var(--translateY)) scale(0.8);
    }
}

@keyframes cozYK {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

@keyframes GD82r {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0;
    }
}
  
@keyframes mBXSI {
    from {
        transform: translate(-50%, var(--translateY));
    }

    to {
        transform: translate(-50%, var(--translateY)) scale(1.05);
    }
}
.cIUX8 {
    max-width: 90vw;
    margin: var(--std-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.z30kq {
    margin: var(--std-margin);
}

.z30kq h2 {
    color: var(--color-27);
}


.z30kq a {
    color: var(--color-27);
    text-decoration: none;
}


header {
    margin: var(--std-margin);
    overflow: auto;
}

.ky40p {
    position: sticky;
    margin: auto;
    z-index: 1000;
    background-color: #fb52aa;
    color: white;
    padding: 10px 20px;
    border-radius: 1000px;
    font-size: 1.0em;
}

.MZ5_N {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.SG0nU select{
    background-color: transparent;
    color: var(--color-27);
    border: none;
    outline: none;
}

.SG0nU option {
    background-color: var(--grey-color);
    color: white;
}

.s10j2 {
    text-align: center;
    font-family: Octarine-Bold;
    font-size: 1.7em;
    width: 3.5em;
    height: 1.3em;
    line-height: 1.5em;
    color: black;
    background-color: var(--color-27);
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.Dpemo {
    height: 35px;
    aspect-ratio: 1 / 1;
    background-image: url(c00b2edc8fb697ead454.svg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.R8qWG {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}


nav {
    margin: 0;
}

.SSMSl {
    color: var(--color-27);
    text-decoration: none;
    transition: color 0.1s ease-in-out;
}

.SSMSl:hover {
    color: white;
}

.lr5fg {
    border-radius: 1000px;
    padding: 5px 20px;
    background-color: var(--color-27);
    font-size: 15px;
    color: black;
    border: 0;
}
._TDYO {
    margin: var(--std-margin);
    border-top: 1px solid var(--grey-color);
}

.hfIPg {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    height: 30px;
    margin-top: 5px;
    font-size: 0.9em;
}

.R2mln {
    text-align: center;
}

.R2mln a {
    color: var(--color-27);
    text-decoration: none;
    margin: 0;
}

.OuKth {
    color: var(--color-27);
}

.OuKth.AuVzM {
    text-align: left;
}

.OuKth._O9rg {
    text-align: right;
}

.RZX5S {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.X8rs7 {
    margin: 7px auto;
}

.X8rs7 > img {
    height: 50px;
}
.Xsirn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* margin-top: 20px; */
}

.XA1Ok {
    position: relative;
    width: 24px;
    height: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 5px;
    cursor: pointer;
}

.XA1Ok::after {
    content: attr(data-alt);
    display: none;
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
  }
  
  .XA1Ok:hover::after {
    display: block;
  }

.DDbRA {
    background-image: url(5b8599c9de536a07d768.svg);
}

.ylD6U {
    width: 18px;
    height: 18px;
    background-image: url(5ad7666d04b3c92604fa.svg);
}

.IZxpr {
    background-image: url(a236a02cbeb24525fd3b.svg);
}

.ull78 {
    width: 30px;
    height: 30px;
    background-image: url(a63208de3d4b08cde581.svg);
}

.ZWZTN {
    background-image: url(845cde860a16351b36ff.svg);
}

.ZdObv {
    background-image: url(91084741d108d56af331.svg);
}

.PRFaB {
    background-image: url(6181e5cecd1a682846ba.svg);
}

.ILRa7 {
    background-image: url(d524ce60a5271a2d84bb.svg);
}

.WiWiJ {
    background-image: url(a73b65360c7e6f21dbac.svg);
}

.WjvVB {
    background-image: url(cabc2a06c7de40f5be26.svg);
}

.pmgGx {
    background-image: url(53a13b603c017952788d.svg);
}

.PRFaB {
    background-image: url(6181e5cecd1a682846ba.svg);
}

.hMsXT {
    background-image: url(47a4d1bfa91a2b132b38.svg);
}