.fp-calculator-main
{
    .container-xl
    {
        @media only screen and (min-width:$lg_1200) {
            max-width:800px;
            padding: 20px;
            border-radius: 24px;
            border: 1px solid $bgLightPink;   
        }
    }
    .fp-calculator-box
    {
            padding: 20px;
            border-radius: 24px;
            border: 1px solid $bgLightPink;
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 100%;
            text-align: center;

            &:hover,&.active
            {
                background: rgb($bgLightPink, 0.2);
                cursor: pointer;
            }
    
            @media only screen and (max-width: $xl_1400) {
                padding: 30px;
            }
    
            @media only screen and (max-width: $sm_767) {
                padding: 20px;
                border-radius: 15px;
            }
            .support-detail
            {
                width: 90%;
                @media only screen and (min-width: $sm_768) and (max-width: $md_991){
                    width:85%;
                }
            }
            .fp-head-20
            {
               color:$textPurple;
            }
            
    }
    .expertise-wrapper
    {
        ul
        {
            margin-left: 20px;
        }
        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            outline: none;
            margin-bottom: 0.5rem;
            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                height:18px;
                width: 18px;
                background:$bgPurple; /* <<< change this */
                border-radius: 50%;
                cursor: pointer;
                border: none;
            }
            &::-moz-range-thumb {
                height:18px;
                width: 18px;
                background:$bgPurple; /* <<< change this */
                border-radius: 50%;
                cursor: pointer;
                border: none;
            }
            
        }
        .expertise-value
        {
            color:$textPink;
        }
        .slider-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 15px;
        }
        
    }
 
}