@media (min-width: 1300px) {
    .container {
        max-width: 1320px;
    }
}
/*.member-card { 
    border:1px solid #efefef;
    background-color: #fff;
    transition: 500ms ease;
}

.card-img {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}*/


:root {
    --color-primary: #0067a6;
    --color-primaryMedium: #4d95c1;
    --color-grey: #f2f2f2;
    --font-inter: 'Inter 18pt', sans-serif;
    --font-javanese: 'Javanese Text', serif;
}

/*.card-img img {
    width: 150px;
}

.member-card h6 {
    width: 100%;
    background-color: var(--color-grey);
    color: var(--color-primaryMedium);
    text-align:center;
    padding: 0.75rem 1rem;
    font-size: 1.5rem;
    margin-bottom: 0;
    box-shadow:3px 3px 6px rgba(0, 0, 0, 0.1);
    
}*/

.member-card{
    transition:300ms ease;
}

.member-card:hover {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}

    .member-card:hover .member-name {
        opacity: 1;
    }

/*calculator css*/

.input-group-text {
    /*    background-color:#fff;*/
    padding-right: 4px;
}

.form-card{
    background-color:#fff;
    box-shadow:3px 3px 6px rgba(0, 0, 0, 0.2);
    border:1px solid #ccc;    
}

.form-header {
    padding: 1rem 1rem 0.1rem 1rem;
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
    margin-bottom: 0;
    font-size: 1.7rem;
}

.form-card .form-section{
    padding-bottom:0.5rem;
    margin-bottom:1.5rem;
    border-bottom:1px solid #ddd;    
}

.form-card .form-section .label-input-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .form-card .form-section .label-input-div .form-label{
        text-transform:uppercase;
        font-weight:700;  
        white-space:nowrap;
    }

    .form-range {
        height: 0.75rem;
    }

.form-content {
    padding: 2rem;
}

.input-group, .form-select, .form-control {
    width: 250px;    
}

.pi-chartDiv{
    width:450px;
    position:relative;
}

    .pi-chartDiv .chart-data {
        position: absolute;
        left: 50%;
        top: 56%;
        transform: translate(-50%, -50%);
        height: 200px;
        width: 200px;
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        z-index:-1;
        font-size:1.1rem;
        padding:0.75rem;
        font-family:var(--font-inter);
    }

        .pi-chartDiv .chart-data span{
            font-size:1.5rem;
            font-weight:600;
        }

.list-group-item {
    display: flex;
    align-items:center;
    justify-content:space-between;
}

    .list-group-item .color-boxDiv {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
    }

        .list-group-item .color-boxDiv .color-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #0B4C6F;
        }
        .list-group-item .color-boxDiv .color-box.box-2 {
            background-color: #C589E8;
        }

        .list-group-item .color-boxDiv .color-box.box-3 {
            background-color: #36CFC9;
        }

            .list-group-item .color-boxDiv .color-box.box-4 {
                background-color: #FFA726;
            }

    .list-group-item .price {
        font-weight:700;
        font-size:1.3rem;
    }



/*Range-slider css*/
input[type="range"] {
    background-color: #ccc;
    border-radius: 1rem;
    padding-inline: 2px;
}

.range-slider {
    width: 100%;
    margin: 0 auto;
    position: relative;
    margin-block:0.5rem;
    padding-inline:1rem;
    border-radius:4px;
}

.range-sliderInput {
    -webkit-appearance: none;
    width: 100%;
}

    .range-sliderInput:focus {
        outline: none;
    }

    .range-sliderInput::before, .range-sliderInput::after {
        position: absolute;
        top: 2rem;
        color: #333;
        font-size: 14px;
        line-height: 1;
/*        padding: 3px 5px;*/
        background-color: rgba(0,0,0,.1);
        
    }

    .range-sliderInput::before {
        left: 0;
        content: attr(data-min);
    }

    .range-sliderInput::after {
        right: 0;
        content: attr(data-max);
    }

    .range-sliderInput::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.5rem;
        cursor: pointer;
        animate: 0.2s;
        background: linear-gradient(90deg, var(--color-primary), var(--range-progress), #dee4ec var(--range-progress));
        border-radius: 1rem;
    }

    .range-sliderInput.home-value::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.5rem;
        cursor: pointer;
        animate: 0.2s;
        background: linear-gradient(90deg, var(--color-primary), var(--range-home-progress), #dee4ec var(--range-home-progress));
        border-radius: 1rem;
    }

    .range-sliderInput.int-value::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.5rem;
        cursor: pointer;
        animate: 0.2s;
        background: linear-gradient(90deg, var(--color-primary), var(--range-int-progress), #dee4ec var(--range-int-progress));
        border-radius: 1rem;
    }


    .range-sliderInput::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 0.25rem solid var(--color-primary);
        box-shadow: 0 1px 3px rgba(0,0,255,.3);
        border-radius: 5px;
        background: #fff;
        cursor: pointer;
        height: 32px;
        width: 32px;
        transform: translateY(calc(-50% + 6px));
    }
/* end of Range-slider css*/
/* end of calculator css*/