:root,
[data-bs-theme=light] {
    --reward-box-border-color-active: var(--bs-dark);
    --reward-box-border-color-redeemed: var(--bs-light);
    --reward-box-border-color-warning: rgba(255, 0, 0, 1)
}

[data-bs-theme=dark] {
    --reward-box-border-color-active: var(--bs-light);
    --reward-box-border-color-redeemed: var(--bs-dark);
}


html {
    font-family: sans-serif;
}

select {
    border: 0;
    font-size: 1rem;
    padding: 0;
}


.col-1-5 {
    flex: 0 0 auto;
    width: 12.5%;
}
.shadow {
    --bs-box-shadow: 0 0.5rem 1rem rgba(142, 153, 164, 0.6);
}
.shadow-sm {
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(142, 153, 164, 0.3);
}

.text-shadow {
    text-shadow: 1px 1px 2px var(--bs-primary-bg-subtle), -1px -1px 2px var(--bs-primary-bg-subtle), 1px -1px 2px var(--bs-primary-bg-subtle), -1px 1px 2px var(--bs-primary-bg-subtle);
}

.sticky-top {
    min-height: calc(6rem + (1.375rem + 1.5vw) * 1.2 + 3.375rem);
}
@media (min-width: 1200px) {
    .sticky-top {
        height: calc(8.5em + 3.375em);
    }
}
#header-headline {
    transition: 0.4s font-size, 0.4s padding;
}


.challenge-step-tickets {
    margin-bottom: 0;
}
.challenge-step-progress {
    margin-top: 0;
}

.challenge-step {
    cursor: pointer;
}

.challenge-total {
    margin-left: 1em;
    white-space: nowrap;
}
.challenge-total:before {
    content: "[";
}
.challenge-total:after {
    content: "]";
}

#container-rewards {
    background-repeat: no-repeat;
}
.rewards-row {
    align-items: center;
    margin-bottom: 1em;
    min-height: 5em;
}
.rewards-row p {
    margin: 0;
}
.reward-box {
    border-radius: 0.25em;
    cursor: pointer;
    display: inline-block;
    padding: 0.2em 0.35em;
}
.reward-box-border-active {
    --bs-border-color: var(--reward-box-border-color-active);
}
.reward-box-border-redeemed .reward-box {
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(142, 153, 164, 0.3), inset 0 0 5px var(--bs-primary-text-emphasis);
}
.reward-box-border-warning {
    --bs-border-color: var(--reward-box-border-color-warning);
    --bs-border-style: dashed;
}
.reward-box-border-warning .reward-box {
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(142, 153, 164, 0.3), inset 0 0 5px var(--reward-box-border-color-warning);
}
.reward-text {
    word-wrap: anywhere;
}
.reward-tickets {
    padding-right: 20px;
    background: right 5px url(../files/ticket.png) no-repeat;
}
.reward-redeemed:after {
    /*content: "\2713";*/
}