:root {
    --bgColor: #0fddaf;
    --txtColor: #ffffff;
    --borColor: rgba(0, 0, 0, 0);
    --sizeVar: 3px;
    --textPrimary: #4b4760;
    --textSecondary: #7f7989;
    --borderColor: #cccccc;
}

/*body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: calc(var(--sizeVar) * 1.75);
}*/

.flexDiv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin: 32px;
}

.selectWrapper {
    width: 175px; /*width: 100%;*/
    position: relative;
    z-index: 9999; /* Higher value ensures it's on top */
    top: 100%; /* Positions the dropdown right below its parent */
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms linear 0s;
    filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.24));
    padding-top: calc(var(--sizeVar) / 2);
}

.multiSelect {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    border: 1px solid var(--borderColor);
    box-sizing: border-box;
    border-radius: calc(var(--sizeVar) / 2);
    position: absolute;
    width: auto;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #ffffff;
    transition: transform 300ms ease-in-out 0s, clip-path 300ms ease-in-out 0s;
}

    .multiSelect div {
        color: var(--textPrimary);
        padding: 16px;
        width: auto;
        cursor: pointer;
    }

        .multiSelect div:hover {
            background-color: #f6f6f6;
        }

.bottomBorder {
    border-bottom: 1px solid var(--borderColor);
}

.topBorder {
    border-top: 1px solid var(--borderColor);
}

.iconDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.noSpace {
    justify-content: flex-start;
    gap: 6px;
}

.titleDiv {
    pointer-events: none;
    font-weight: 700;
}

.justHover i {
    opacity: 0;
}

.justHover:hover i {
    opacity: 1;
}

.multiSelect .placeholder {
    color: var(--textSecondary);
    font-style: italic;
}

.multiSelect .narrow {
    padding-top: 10px;
    padding-bottom: 10px;
}

.multiSelect i {
    color: var(--textSecondary);
}

.multiSelect {
    transform: translateX(100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

    .multiSelect:nth-of-type(1) {
        transform: translateX(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

.sec_btn {
    --bgColor: #869cff;
}

button {
    font-family: "Roboto", sans-serif;
    font-size: calc(var(--sizeVar) * 1.75);
    font-weight: 500;
    border: none;
    outline: none;
    padding: var(--sizeVar) calc(var(--sizeVar) * 2);
    border-radius: calc(var(--sizeVar) / 2);
    cursor: pointer;
    background-color: var(--bgColor);
    color: var(--txtColor);
    box-shadow: 0 0 0 1px var(--borColor) inset;
}

    button:focus {
        --borColor: rgba(0, 0, 0, 0.4);
    }

    button:hover {
        --bgColor: #1fcc9e;
    }

.sec_btn:hover {
    --bgColor: #6279e7;
}

.tri_btn:hover {
    --bgColor: #f8f7f8;
}

button:active {
    --bgColor: #1db284;
}

.sec_btn:active {
    --bgColor: #5468c7;
}

.tri_btn:active {
    --bgColor: #e7e7e7;
}



/* * { */
/* margin: 0; */
/* padding: 0; */
/* text-transform: uppercase; */
/* font-family: fredoka one; */
/* } */
/* body { */
/* width: 100vw; */
/* height: 100vh; */
/* display: grid; */
/* grid: */
/* "header" 10% */
/* "main" 90%; */
/* } */
/* header { */
/* grid-area: header; */
/* display: flex; */
/* align-items: center; */
/* padding: 10px; */
/* border-bottom: 3px solid black; */
/* } */
/* #menu-button { */
/* width: 45px; */
/* height: 45px; */
/* display: flex; */
/* flex-direction: column; */
/* justify-content: space-between; */
/* align-items: center; */
/* position: fixed; */
/* z-index: 7; */
/* right: 10px; */
/* cursor: pointer; */
/* } */
/* #menu-button:hover div { */
/* background: coral !important; */
/* border-color: coral !important; */
/* } */
/* div { */
/* width: 100%; */
/* height: 20%; */
/* background: black; */
/* border: 1px solid black; */
/* } */
/* main { */
/* grid-area: main; */
/* background: silver; */
/* } */
/* nav { */
/* display: grid; */
/* position: fixed; */
/* z-index: 5; */
/* background: dimgray; */
/* width: 100vw; */
/* height: 100vh; */
/* } */
/* ul { */
/* width: 100%; */
/* height: 100%; */
/* display: grid; */
/* grid: */
/* "one two three" */
/* "four five six"; */
/* } */
/* li { */
/* border: 1px solid black; */
/* background: white; */
/* list-style: none; */
/* height: 100%; */
/* width: 100%; */
/* display: grid; */
/* place-items: center; */
/* font-size: 2em; */
/* font-weight: 400; */
/* } */
/* li:nth-child(1) { */
/* grid-area: one; */
/* transform-origin: left; */
/* } */
/* li:nth-child(2) { */
/* grid-area: two; */
/* transform-origin: left; */
/* } */
/* li:nth-child(3) { */
/* grid-area: three; */
/* transform-origin: top; */
/* } */
/* li:nth-child(4) { */
/* grid-area: four; */
/* transform-origin: bottom; */
/* } */
/* li:nth-child(5) { */
/* grid-area: five; */
/* transform-origin: right; */
/* } */
/* li:nth-child(6) { */
/* grid-area: six; */
/* transform-origin: right; */
/* } */
/* li:hover { */
/* color: red; */
/* box-shadow: inset 0 0 20px 3px black; */
/* -webkit-text-stroke: 1px darkred; */
/* text-shadow: 2px 2px 2px black; */
/* font-weight: 900; */
/* transition: 0.125s; */
/* } */
/* span { */
/* cursor: pointer; */
/* } */

/* a { */
/* width: 100px; */
/* height: 75px; */
/* position: absolute; */
/* bottom: 10px; */
/* right: 10px; */
/* } */
/* img { */
/* width: 100%; */
/* } */