/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
#dynamicInputs label {
    font-size: 16px;
}
.bag-of-concrete-title {
    font-size: 24px;
}
.bg-secondary-subtl {
    padding: 30px;
}

/* Custom color for the range slider track */
input[type="range"]::-webkit-slider-runnable-track {
    background: #bababa;
    height: 2px;
    border-radius: 10px;
}

/* Custom thumb styling for rounded square */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #c0c0c0;
    border-radius: 4px;
    border: none;
    margin-top: -9px;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #bababa;
    border-radius: 4px;
    border: none;
}

input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #bababa;
    border-radius: 4px;
    border: none;
}

.pallet {
    width: 100%;
    height: 180px;
    background: url("../images/pallet-bag.png") no-repeat center/contain;
}

.bag {
    background: #848484;
    width: 30px;
    height: 8px;
    border-radius: 10px;
}

.bag-stack {
    display: flex;
    height: 180px;
    align-items: flex-end;
    padding-bottom: 10px;
}

.calc-radio input:checked {
    background-color: #bababa;
    border-color: #bababa;
}

@media screen and (max-width: 1024px) {
    #output {
        display: block !important;
    }
    .bag-of-concrete-title {
        font-size: 18px;
    }
    .bg-secondary-subtl {
        padding: 15px;
    }
}