@media screen {


    .calculator .item {
        background-color: #ebebeb;
        margin: 5px 0;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        border: 1px solid #c5c5c5;
    }

    .calculator .price {
        font-weight: bold;
        display: block;
        text-align: center;
    }



    .calculator .options .jsslider {
        margin: 0 150px;
        margin-bottom: 1rem;
    }

    .calculator .options .jsslider,
    .calculator .options .jsslider::before,
    .calculator .options .jsslider:after {
        background-color: bisque;
        border: none;
    }

    .calculator .options .jsslider:before,
    .calculator .options .jsslider:after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 100px;
    }

    .calculator .options .jsslider:before {
        left: -50px;
    }

    .calculator .options .jsslider:after {
        right: -50px;
    }

    .calculator .options ul {
        display: flex;
        list-style: none;
        justify-content: space-between;
        padding: 0;
        margin: 5px 0;
        flex-wrap: wrap;
        gap: 10px;
        column-gap: normal;
    }

    .calculator .options ul li {
        flex: 1;
        text-align: center;
        margin: 0 5px;
        padding: 5px;
        cursor: pointer;
        border-radius: 5px;
    }

    .calculator .selected,
    .calculator .preselected,
    .calculator .options ul li.selected,
    .calculator .options ul li.preselected {
        background-color: #007bff;
        color: #fff;
    }

    .calculator #total {
        font-size: 1.5em;
        font-weight: bold;
        margin-top: 20px;
        background-color: #043e7d;
        color: #fff;
        text-align: center;
        padding: 1rem;
    }


}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
    .calculator .item {
        max-width: 35%;
    }
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
    .calculator .options {
        width: 80%;
    }
}