/* Donor Retention Calculator */
.retention-calc-wrap {
    width: 100%;
}

.retention-chart-container {
    position: relative;
    height: 380px;
    width: 100%;
}

.retention-slider-group {
    margin-bottom: 1.25rem;
}

.retention-slider-group label {
    font-family: muli, sans-serif;
    font-weight: 700;
    font-size: .9rem;
    color: #464646;
    margin-bottom: .25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.retention-slider-group label .slider-value {
    font-weight: 600;
    color: #00A1BE;
    font-size: 1rem;
}

.retention-slider-group input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #DEE2E6;
    border-radius: 3px;
    outline: none;
}

.retention-slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00A1BE;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.retention-slider-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #00A1BE;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.retention-insight {
    font-family: muli, sans-serif;
    font-size: .95rem;
    color: #464646;
    padding: .75rem 1rem;
    background: #F8F9FA;
    border-left: 4px solid #00A1BE;
    border-radius: .25rem;
    margin-top: 1.25rem;
}

.retention-callout {
    font-family: muli, sans-serif;
    font-size: .9rem;
    color: #464646;
    padding: 1rem 1.25rem;
    background: #E0F5F9;
    border: 1px solid #00A1BE;
    border-radius: .375rem;
    margin-top: 1rem;
}

.retention-callout strong {
    color: #038CA5;
}

.retention-mode-toggle .btn-retention-mode {
    background: #F8F9FA;
    color: #464646;
    border: 1px solid #DEE2E6;
    font-family: muli, sans-serif;
    font-weight: 600;
    font-size: .85rem;
    padding: .375rem .75rem;
    border-radius: .375rem;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.retention-mode-toggle .btn-retention-mode:hover {
    border-color: #00A1BE;
    color: #00A1BE;
}

.retention-mode-toggle .btn-retention-mode.active {
    background: #00A1BE;
    color: #fff;
    border-color: #00A1BE;
}

.retention-starting-input {
    max-width: 140px;
}

.retention-starting-input input {
    font-family: muli, sans-serif;
    font-weight: 600;
    font-size: .95rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .retention-chart-container {
        height: 280px;
    }
}