:root {
    --rodat-swipe-animation-duration: 0s;
}

.rodat-swipe {
    transition: background-color var(--rodat-swipe-animation-duration), -webkit-box-shadow var(--rodat-swipe-animation-duration), box-shadow var(--rodat-swipe-animation-duration);
    position: sticky;
    top: 0;
    z-index: 1;
    color: #777;
    background-color: #fffffff0;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.rodat-swipe-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rodat-swipe-container {
    width: max-content;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
}

.rodat-swipe-arrow,
.rodat-swipe-container > * {
    transition: opacity var(--rodat-swipe-animation-duration) ease-in-out,
    margin var(--rodat-swipe-animation-duration) ease-in-out,
    margin-inline var(--rodat-swipe-animation-duration) ease-in-out,
    padding var(--rodat-swipe-animation-duration) ease-in-out,
    padding-inline var(--rodat-swipe-animation-duration) ease-in-out,
    border-radius var(--rodat-swipe-animation-duration) ease-in-out,
    border-bottom var(--rodat-swipe-animation-duration) ease-in-out,
    box-shadow var(--rodat-swipe-animation-duration) ease-in-out;
    -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);
    cursor: pointer;
    font-weight: 500;
    margin-inline: 0em;
    padding-inline: 1em;
    border-bottom: 1px solid #77777700;
    border-radius: 1em;
    opacity: .7;
}

.rodat-swipe-arrow {
    background: white;
    opacity: 1;
    z-index: 1;
    position: absolute;
    border-radius: 0;
}

.rodat-swipe-container > .rodat-swipe-header-active {
    cursor: auto;
    -webkit-box-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0);
    box-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0);
    margin-inline: 1em;
    padding-inline: 0em;
    border-bottom: 1px solid currentColor;
    border-radius: 0px;
    opacity: 1;
}

.rodat-swipe-container > *:hover,
.rodat-swipe-arrow:hover {
    border-bottom: 1px solid currentColor;
}

.rodat-swipe-container > *:hover {
    opacity: 1;
}

.rodat-swipe-arrow:hover {
    opacity: .7;
}

.rodat-swipe-arrow-hidden {
    cursor: unset;
    opacity: 0 !important;
    pointer-events: none;
}

.rodat-swipe-arrow > svg {
    transition: width var(--rodat-swipe-animation-duration) ease-in-out;
    width: 2em;
    max-height: .5em;
    fill: currentColor;
}

.rodat-swipe-arrow:hover > svg {
    width: 4em;
}

.rodat-swipe-arrow-left {
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
    left: 0;
}

.rodat-swipe-arrow-left > svg {
    transform: rotate(90deg);
}

.rodat-swipe-arrow-right {
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
    right: 0;
}

.rodat-swipe-arrow-right > svg {
    transform: rotate(-90deg);
}

.rodat-swipe-content-container {
    position: relative;
}

.rodat-swipe-content {
    margin-block-start: 0 !important;
}

.rodat-swipe-content-animation {
    position: absolute;
    display: unset !important;
}

.rodat-swipe-content-hidden {
    display: none;
}

.rodat-swipe-content::after {
    display: block;
    height: 1px;
    content: "";
    width: 100%;
    margin-top: -1px;
}

@media print {
    .rodat-swipe-content-hidden {
        display: unset !important;
    }

    .rodat-swipe {
        display: none;
    }
}