/* Desktop-first, see phones at the bottom */

:root {
    --poll-panel-text: white;
    --poll-panel-text-subtle: rgb(215, 215, 215);
    --poll-panel-gap: 15px;
    --scrollbar: hsl(0, 0%, 33%);
}

@keyframes styles-module__fadeInFromLeft___1xity {
    0% {
        opacity: 0;
        transform: translateX(-100%) translateY(-50%);
    }
    50% {
        opacity: 0;
        transform: translateX(-50%) translateY(-50%);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
    }
}

@keyframes styles-module__fadeInFromBottom___2V_Nb {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(100%);
    }
    50% {
        opacity: 0;
        transform: translateX(0) translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

.styles-module__Outer___3AOBp {
    box-sizing: border-box;
    background: rgba(35, 36, 42, 0.8);
    position: absolute;
    top: 50%;
    max-height: 100%;
    transform: translateY(-50%);
    padding: var(--poll-panel-gap);
    gap: var(--poll-panel-gap);
    width: 308px;
    border-radius: 0 5px 5px 0;

    display: flex;
    flex-direction: column;

    font-size: 16px;
    line-height: 1.4;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    animation: styles-module__fadeInFromLeft___1xity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;

    /* Try to win the z-index wars (╯°□°)╯︵ ┻━┻ */
    z-index: 100000;
}

.styles-module__CloseButton___29iTL {
    color: var(--poll-panel-text);
    font-size: 1.125rem;
}

.styles-module__HeaderTitle___246pF {
    color: var(--poll-panel-text);
    font-size: 1.25rem;
    line-height: 1.3;
}

.styles-module__HeaderOuter___3yugg {
    display: flex;
    align-items: center;
    gap: 10px;
}

.styles-module__Question___3xOWa {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--poll-panel-text);
}

.styles-module__QuestionOuter___2KezH {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.styles-module__QuestionSubtitle___1nIY6 {
    font-size: 1rem;
    color: var(--poll-panel-text-subtle);
}

.styles-module__Divider___398k0 {
    background-color: hsla(0, 0%, 100%, 0.1);
    margin-left: calc(-1 * var(--poll-panel-gap));
    margin-right: calc(-1 * var(--poll-panel-gap));
    height: 1px;
}

.styles-module__Main___3I1SE {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.styles-module__ScrollWrapper___3mGx8 {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--poll-panel-gap);
    margin: calc(-1 * var(--poll-panel-gap));
    padding: var(--poll-panel-gap);
    flex: 1;

    /* Scrollbar */
    scrollbar-color: var(--scrollbar) transparent;
    scrollbar-width: thin;
    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    *::-webkit-scrollbar-thumb {
        background: var(--scrollbar);
        border-radius: 10px;
    }
    *::-webkit-scrollbar-track {
        background: transparent;
    }
}

@media (max-width: 550px) or (max-height: 550px) {
    /* Phones */
    .styles-module__Outer___3AOBp {
        width: unset;
        transform: unset;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: styles-module__fadeInFromBottom___2V_Nb 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
        border-radius: 0;
    }
}

button.styles-module__Contained___2Nzov {
    /* Reset button styles, keeping accessibility outline */
    all: unset;
    outline: revert;
    /******************************************************/

    /* Custom styles */
    background-color: var(--button-background);
    color: var(--button-text);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 7px;
    font-weight: 500;
    cursor: var(--button-cursor);
    transition: all 0.2s ease-in-out;
    /* Remove text selection */
    -webkit-user-select: none;
            user-select: none;
    /** Remove tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
}

button.styles-module__Contained___2Nzov:hover {
    background-color: var(--button-background-hover);
    /* filter: var(--button-hover-filter); */
}

button.styles-module__IconButton___2ZFhM {
    /* Reset button styles, keeping accessibility outline */
    all: unset;
    outline: revert;
    /******************************************************/

    outline: revert;
    padding: 10px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    color: white;
    font-size: 1.125rem;
    cursor: pointer;
}

button.styles-module__IconButton___2ZFhM:hover {
    background-color: hsl(0, 0%, 100%, 0.15);
}

@keyframes styles-module__rotate___bIL1b {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.styles-module__LoadingSpinner___397Se {
    animation: styles-module__rotate___bIL1b 1s linear infinite;
}

.styles-module__Outer___co2Qw {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 5px;
}

.styles-module__OuterError___3Z8kz {
    background-color: rgb(253, 237, 237);
    color: rgb(95, 33, 32);
}
.styles-module__OuterNeutral___2cAP- {
    background-color: rgb(61, 61, 61);
    color: rgb(255, 255, 255);
}

.styles-module__Text___1Qsqy {
    color: inherit;
    font-size: 0.8rem;
}

.styles-module__Icon___3RJdn {
    width: 24px;
    height: 24px;
}

@keyframes styles-module__rotate___2Fi5o {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.styles-module__LoadingSpinner___2yxm8 {
    animation: styles-module__rotate___2Fi5o 1s linear infinite;
}

.styles-module__Outer___2HXmr {
    display: flex;
}

.styles-module__InputLabelWrapper___3N4ja {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Show cursor here, since otherwise the flex gap between .Input and .Label
     won't have a cursor */
    cursor: pointer;
}

.styles-module__RadioInput___dtCTs {
    align-self: start;
    flex-shrink: 0;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    border: 2.5px solid var(--radio-background-colour);
    /* Show cursor here, since clicking the input selects the radio button */
    cursor: pointer;
}
.styles-module__RadioInput___dtCTs:checked::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--radio-background-colour);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.styles-module__CheckboxInput___1m0Me {
    align-self: start;
    flex-shrink: 0;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    position: relative;
    border: 2.5px solid var(--radio-background-colour);
    /* Show cursor here, since clicking the input selects the radio button */
    cursor: pointer;
}
.styles-module__CheckboxInput___1m0Me:checked {
    background-color: var(--radio-background-colour);
}
.styles-module__CheckboxInput___1m0Me:checked::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: var(--radio-background-colour);
    border-radius: 50%;
    position: absolute;
    top: 48%;
    left: 52%;
    transform: translate(-50%, -50%);
    transform-origin: bottom left;
    background-color: var(--radio-colour);
    clip-path: polygon(10% 50%, 0 60%, 40% 100%, 100% 10%, 90% 0%, 40% 80%);
}

.styles-module__Label___1ZhMI {
    color: white;
    /* Show cursor here, since clicking the label should also select the radio button */
    cursor: pointer;
    pointer-events: none;
    word-break: break-word;
    line-height: 1.4rem;
}

@keyframes styles-module__fadeOut___38En9 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.styles-module__fadeOut___38En9 {
    animation: styles-module__fadeOut___38En9 1s;
}

.styles-module__unsetAnimation___2Mt-O {
    animation: unset;
}

.styles-module__VotesOuter___1an1k {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.styles-module__ResultsGraphOptionVotesCount___1Oqzs {
    color: hsl(0, 0%, 76%);
    font-size: 0.875rem;
}

.styles-module__OptionOuter___3hbv3 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}