.rodat-survey {
    --survey-color: rgb(240, 240, 240);
    background-color: var(--survey-color);
}

.rodat-survey-element-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-inline: 1em;
    min-height: 3.5em;
}

.rodat-survey-element-title {
    font-size: 120%;
}

.rodat-survey-element-text {
    font-size: 110%;
}

.rodat-survey-element-head>.rodat-survey-element-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.rodat-survey-element-ui {
    margin-top: 1em;
}

.rodat-survey-element-result {
    white-space: nowrap;
}

.rodat-survey-element-result,
.rodat-option,
.rodat-quantity-input-modifier {
    transition: background-color .2s ease-in-out;
    background-color: white;
    border-radius: 1.5em;
    padding: .4em 1em;
    cursor: pointer;
}

.rodat-survey-element-result>a {
    margin: -.4em -1em;
    border-radius: 1.5em;
    padding: .4em 1em;
    white-space: nowrap;
    color: currentColor;
}

.rodat-option:hover,
.rodat-quantity-input-modifier:hover {
    background-color: rgb(240, 240, 240) !important;
}

.rodat-option-selected {
    background-color: rgb(230, 254, 230) !important;
}

.rodat-option-selected:hover {
    background-color: rgb(242, 254, 230) !important;
}

.rodat-survey-element-result-hidden {
    display: none;
}

.rodat-survey-element-body>.rodat-survey-element-wrap {
    transition: margin-bottom .3s ease-in-out;
    padding: 1em 1em;
    margin-inline: .4em;
    background-color: white;
}

.rodat-survey-element-last>.rodat-survey-element-body>.rodat-survey-element-wrap {
    margin-bottom: .4em;
}

.rodat-quantity-display {
    display: flex;
    justify-content: center;
    margin-inline: auto;
    position: relative;
    width: fit-content;
    align-items: center;
}

.rodat-quantity-display>.rodat-quantity-number {
    transition: opacity .2s ease-in-out;
    position: absolute;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    left: var(--left);
    transform: translateX(-50%) translateY(-2em);
    border-radius: 1.5em;
    padding: .4em 1em;
    background-color: white;
    -webkit-box-shadow: 0 1px 10px -6px rgba(0, 0, 0, .42), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 4px 5px -2px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 10px -6px rgba(0, 0, 0, .42), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 4px 5px -2px rgba(0, 0, 0, .1);
}

.rodat-quantity-display:hover>.rodat-quantity-number {
    opacity: 1;
}

.rodat-quantity-input-modifier {
    transition: all .3s ease-in-out;
    opacity: 1;
    cursor: pointer;
    position: absolute;
}

.rodat-quantity-input-modifier-hidden {
    opacity: 0;
    pointer-events: none;
    cursor: auto;
}

.rodat-quantity-input-increment {
    right: -1em;
    transform: translateX(100%);
}

.rodat-quantity-input-decrement {
    left: -1em;
    transform: translateX(-100%);
}

.rodat-quantity-input-modifier-hidden.rodat-quantity-input-decrement,
.rodat-quantity-input-modifier-hidden.rodat-quantity-input-increment {
    transform: translateX(0%) scale(0);
}

.rodat-single-choice-input {
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.rodat-multiple-choice-input {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: fit-content;
    margin-inline: auto;
    gap: .2em;
}

.rodat-bottom-floating {
    position: sticky;
    bottom: 0;
}

.rodat-bottom-floating {
    background-color: rgb(230, 254, 230);
}

.rodat-bottom-floating>.rodat-survey-element-body>.rodat-survey-element-wrap {
    background-color: unset !important;
    --available-height: fit-content;
    overflow: auto;
    max-height: var(--available-height);
}