:root {
    --eflyer: #00776e;
    --eflyer-100: #e0f2f0;
    --eflyer-200: #b9e2de;
    --eflyer-600: #0a8c82;
}

/* Merkstijl op Bootstrap primaries mappen */
.btn-primary {
    background-color: var(--eflyer);
    border-color: var(--eflyer);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--eflyer-600);
    border-color: var(--eflyer-600);
}

.keuzehulp-card {
    border: 1px solid var(--eflyer-200);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
    border-radius: 1rem;
    overflow: hidden;
}

.keuzehulp-head {
    background: var(--eflyer-200);
}

.keuzehulp-badge {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
}

.input-unit {
    color: #6c757d;
    pointer-events: none;
    font-weight: 600;
    padding-left: 5%;
    padding-top: 5%;
}

.hint {
    font-size: .9rem;
    color: #6c757d;
}

.segmented {
    gap: 0;
}

.segmented .btn {
    border-color: var(--eflyer-200);
    box-shadow: none !important;
    border-radius: 0;
}

.segmented .btn+.btn {
    margin-left: -1px;
}

.segmented .btn:first-child {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.segmented .btn:last-child {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

/* Actieve staat in Bootstrap 4.2 (data-toggle=buttons) */
.segmented .btn-outline-secondary.active,
.segmented .btn-outline-secondary:active,
.segmented .btn-outline-secondary.active:focus {
    background: var(--eflyer);
    color: #fff;
    border-color: var(--eflyer);
}

@media (max-width: 576px) {
    .segmented {
        display: flex;
        flex-wrap: wrap;
    }

    .segmented .btn {
        flex: 1 1 0;
        text-align: center;
    }
}

.segmented .btn {
    flex: 1 1 0;
    text-align: center;
}

#choice-card {
    position: relative;
}

.load-overlay {
    position: absolute;
    text-align: center;
    background: rgba(185,226,222, .75);
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    z-index: 10;
}