/**
 * 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;
 }

select,
select:focus,
input,
input:focus {
    box-shadow: none !important;
}

select {
    pointer-events: all;
    cursor: pointer;
}
.height-limit-text{
	font-size: 9px;
}
 /* 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: 150px;
     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: 150px;
     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;
     }
 }