body.calculator-modal-open {
    overflow: hidden;
}


#concrete-calculator {
    width: 100%;
    padding: 64px 32px;
    display: flex;
    justify-content: center;
}

#concrete-calculator .concrete-calculator-wrapper {
    width: 100%;
    max-width: 1400px;
}

#concrete-calculator .concrete-calculator-wrapper .concrete-calc-intro {
    width: 100%;
    text-align: start;
}

#concrete-calculator .concrete-calculator-wrapper .concrete-calc-intro h1 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: 0;
}

#concrete-calculator .concrete-calculator-wrapper .concrete-calc-intro p {
    margin-top: 0;
    font-size: 20px;
}

/* inner calc  */

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper {
    width: 100%;
}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container {}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-top: 24px;
}

@media (max-width: 1024px) {
    #concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    #concrete-calculator {
        padding: 32px 8px !important;
    }
}

@media (max-width: 576px) {

    #concrete-calculator .calcs #slabs-square-footings-walls-calcs,
    #hole-column-round-footings-calcs,
    #circular-slab-tube-calcs,
    #curb-gutter-barrier-calcs,
    #stairs-calcs {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 12px !important;
    }

    #concrete-calculator .calcs .calc-wrapper.unit {
        width: 100% !important;
    }

    #concrete-calculator .calcs .calculate-btn button {
        width: 100%;
    }
}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper .option {
    background-color: #b02762;
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 16px;
    border: 2px solid transparent;
    transition: .2s ease-in-out;
    text-align: center;
    cursor: pointer;
}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper .option.active {
    transform: translateY(-5px);
    border: 2px solid #b02762;
    background-color: #fff;
    color: #000;
}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper .option:hover {
    transform: translateY(-5px);
    border: 2px solid #b02762;
    background-color: #fff;
    color: #000;
}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper .option .option-img {
    width: auto;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper .option:hover .option-img svg {
	fill: #b02762;
	stroke: #b02762;
}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper .option .option-img svg {
    width: auto;
    height: 100%;
    max-width: 100%;
	transition: .2s ease-in-out;
}

#concrete-calculator .concrete-calculator-wrapper .inner-calc-wrapper .select-option-container .select-option-wrapper .option .option-img img {
    width: auto;
    height: 100%;
    max-width: 100%;
}

/* calcs  */

#concrete-calculator .calcs {
    width: 100%;
    max-width: 1140px;
    margin-top: 24px;
}

#concrete-calculator .calcs #slabs-square-footings-walls-calcs,
#concrete-calculator .calcs #hole-column-round-footings-calcs,
#concrete-calculator .calcs #circular-slab-tube-calcs,
#concrete-calculator .calcs #curb-gutter-barrier-calcs,
#concrete-calculator .calcs #stairs-calcs {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
}

#concrete-calculator .calcs #slabs-square-footings-walls-calcs.active,
#concrete-calculator .calcs #hole-column-round-footings-calcs.active,
#concrete-calculator .calcs #circular-slab-tube-calcs.active,
#concrete-calculator .calcs #curb-gutter-barrier-calcs.active,
#concrete-calculator .calcs #stairs-calcs.active {
    display: grid !important;
}

#concrete-calculator .calcs .calc-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

#concrete-calculator .calcs .calc-wrapper.unit {
    width: 33.3%;
}

#concrete-calculator .calcs .calc-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-top'%20d='m347.913%20199.336-81.538-85c-5.413-5.642-14.188-5.642-19.6%200l-81.538%2085c-8.731%209.101-2.548%2024.664%209.8%2024.664h163.077c12.348%200%2018.531-15.563%209.8-24.664z'%20fill='%236b6c7e'/%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-bottom'%20d='m165.236%20312.664%2081.538%2085c5.412%205.642%2014.188%205.642%2019.6%200l81.538-85c8.731-9.101%202.548-24.664-9.8-24.664H175.035c-12.347%200-18.531%2015.563-9.8%2024.664z'%20fill='%236b6c7e'/%3E%3C/svg%3E");
    background-position: right 0.5em center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    cursor: pointer;
    padding-right: 32px;
    padding: 8px 16px;
    background-color: #f1f2f5;
    border: 1px solid #e7e7ed;
    border-style: solid;
    font-size: 16px;
    height: 40px;
    transition: .2s box-shadow, .2s border-color, .2s background-color;
}

#concrete-calculator .calcs .calc-wrapper select:focus {
    outline: 0;
    /* remove default browser outline */
    border-color: #b02762;
    background-color: #f6f9ff;
    box-shadow:
        0 0 0 2px #fff,
        /* inner white ring */
        0 0 0 4px #b02762;
    /* outer blue ring */
}

#concrete-calculator .calcs .calc-wrapper input {
    background-color: #f1f2f5;
    border: 1px solid #e7e7ed;
    border-style: solid;
    font-size: 16px;
    height: 40px;
    padding: 8px 16px;
    transition: .2s box-shadow, .2s border-color, .2s background-color;
}

#concrete-calculator .calcs .calc-wrapper input:focus {
    outline: 0;
    /* remove default browser outline */
    border-color: #b02762;
    background-color: #f6f9ff;
    box-shadow:
        0 0 0 2px #fff,
        /* inner white ring */
        0 0 0 4px #b02762;
    /* outer blue ring */
}


#concrete-calculator .calcs .calculate-btn {
    display: flex;
    align-items: end;
}

#concrete-calculator .calcs .calculate-btn button {
    display: flex;
    height: 40px;
    padding: 0 20px;
    color: #fff;
    background-color: rgb(0, 165, 111);
    border-radius: 2px;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    border: none !important;
    transition: .2s ease-in-out;
}

#concrete-calculator .calcs .calculate-btn button:hover {
    background-color: rgb(2, 122, 82);
    color: #fff;
}

#concrete-calculator .calcs .calculate-btn button:disabled {
    background-color: #d3d3d3b7;
    cursor: not-allowed;
}

#concrete-calculator .calcs .calculate-btn button:hover:disabled {
    color: black !important;
}


/* modal  */

#calculator-overlay {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(0px);
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 2;
    opacity: 0;
    padding: 32px;
    display: flex;
    align-items: start;
    justify-content: center;
    overflow-y: auto;
    transition: .2s backdrop-filter ease-in-out, .2s opacity ease-in-out, visibility .2s;
}

#calculator-overlay.active {
    backdrop-filter: blur(12px);
    visibility: visible;
    pointer-events: all;
    opacity: 1;
}

@media (max-width: 576px) {

    #calculator-overlay,
    #calculator-overlay #calculator-modal {
        padding: 16px !important;
    }

}

#calculator-overlay #calculator-modal {
    width: 100%;
    max-width: 800px;
    background-color: #fff;
    padding: 32px;
    border-radius: 4px;
    overflow-y: auto;
}

#calculator-overlay #calculator-modal .calc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 32px;
}

#calculator-overlay #calculator-modal .calc-modal-head .close-modal-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
}

#calculator-overlay #calculator-modal .calc-modal-head .close-modal-btn button {
    width: 100%;
    padding: 4px;
    margin: 0;
    background-color: unset;
    display: flex;
    border: 2px solid black;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
}

#calculator-overlay #calculator-modal .calc-modal-head .close-modal-btn button:hover {
    background-color: black;
}

#calculator-overlay #calculator-modal .calc-modal-head .close-modal-btn button svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

#calculator-overlay #calculator-modal .calc-modal-head .close-modal-btn button:hover svg {
    fill: #fff;
}

#calculator-overlay #calculator-modal .calc-results-body {
    width: 100%;
    margin-top: 32px;
}

#calculator-overlay #calculator-modal .calc-results-body .result {
    width: 100%;
    background-color: green;
    padding: 8px 8px;
    color: #fff;
    border-radius: 2px;
    margin-bottom: 12px;
}

#calculator-overlay #calculator-modal .calc-results-body .volumes {
    padding: 8px;
    margin-bottom: 32px;
    font-size: 20px;
}

#calculator-overlay #calculator-modal .calc-results-body .volumes #cubic-feet,
#cubic-yards,
#cubic-meters {
    color: green;
    font-weight: bold;
}

#calculator-overlay #calculator-modal .calc-results-body .pre-mixed-results {
    padding: 8px;
}


/* table  */

.pre-mixed-table {
    margin-top: 8px;
    max-width: 460px;
    /* tweak to taste */
}

/* basic table look */
.pre-mixed-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pre-mixed-table td {
    padding: 4px 8px;
    border: 1px solid #d0d0d0;
    /* light grid lines */
    vertical-align: top;
}

/* first column a bit narrower */
.pre-mixed-table td:first-child {
    width: 45%;
    white-space: nowrap;
}

/* green values, bold */
#pre-mixed-lbs,
#pre-mixed-kgs,
#60-lb-bags,
#80-lb-bags {
    color: #2fa54a;
    /* adjust green */
    font-weight: 600;
}

/* footnote text under table */
.pre-mixed-table>p {
    margin-top: 6px;
    font-size: 12px;
    color: #555;
}

/* shape  */

#calculator-overlay #calculator-modal .result-img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

#calculator-overlay #calculator-modal .result-img img {
    width: auto;
    height: 100px;
    max-width: 100%;
}

/* get quote  */

#calculator-overlay #calculator-modal .get-quote {
    width: 100%;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas svg {
    width: 32px;
    height: 32px;
    max-width: 100%;
    min-width: 32px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .email-cta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background-color: #ded5e9;
    border-radius: 2px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .email-cta .email-icon {
    min-width: 32px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .email-cta .email {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .email-cta .email span {
    font-size: 14px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .email-cta .email a {
    font-size: 18px;
    font-weight: 600;
    color: black;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .email-cta .email a:hover {
    text-decoration: none;
}

/* phone  */

#calculator-overlay #calculator-modal .get-quote .quote-ctas .phone-cta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background-color: #3ecd55;
    border-radius: 2px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .phone-cta .phone-icon {
    min-width: 32px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .phone-cta .phone {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .phone-cta .phone span {
    font-size: 14px;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .phone-cta .phone a {
    font-size: 18px;
    font-weight: 600;
    color: black;
}

#calculator-overlay #calculator-modal .get-quote .quote-ctas .phone-cta .phone a:hover {
    text-decoration: none;
}


/* quote form  */

#calculator-overlay #calculator-modal .quote-form {
    width: 100%;
    display: grid;
    grid-template-rows: auto 0fr;
    /* btn visible, form collapsed */
    row-gap: 16px;
    transition: grid-template-rows .3s ease;
}

/* when open, second row gets space */
#calculator-overlay #calculator-modal .quote-form.form-open {
    grid-template-rows: auto 1fr;
}

#calculator-overlay #calculator-modal .quote-form .get-quote-btn {
    width: 100%;
}

#calculator-overlay #calculator-modal .quote-form .get-quote-btn button {
    width: 100%;
    display: flex;
    height: 40px;
    border-radius: 2px;
    color: #fff;
    background-color: rgb(0, 165, 111);
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    border: none !important;
    cursor: pointer;
    padding: 0 20px;
    transition: .2s ease-in-out
}

#calculator-overlay #calculator-modal .quote-form .get-quote-btn button:hover {
    background-color: rgb(2, 122, 82);
    color: #fff;
}


#calculator-overlay #calculator-modal .quote-form #contact-quote-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
    overflow: hidden;
    /* hide content when row is 0fr */
    min-height: 0;
    /* avoid weird min-content behaviour */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
}

/* fade in when open */
#calculator-overlay #calculator-modal .quote-form.form-open #contact-quote-form {
    opacity: 1;
    transform: translateY(0);
    overflow: visible !important;
}


#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field {
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: relative;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field.error::before {
    height: 100%;
    content: '';
    background-color: red;
    width: 6px;
    position: absolute;
    top: 0;
    left: -12px;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field label {
    position: absolute;
    left: 12px;
    top: calc(12px + 2px);
    font-size: 16px;
    line-height: 1;
    background: #fff;
    padding: 0 .35rem;
    transform-origin: left top;
    transition: top .15s ease, font-size .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
    pointer-events: auto;
    opacity: .85;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field:has(input:focus) label,
#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field:has(textarea:focus) label,
#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field:has(input:not(:placeholder-shown)) label,
#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field:has(textarea:not(:placeholder-shown)) label {
    top: -8px;
    font-size: 12px;
    transform: translateY(0);
    opacity: 1;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field.error .quote-error {
    display: flex !important;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field .quote-error {
    color: red;
    margin-top: 8px;
    align-items: center;
    gap: 8px;
    display: none;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field .quote-error img {
    width: 24px;
    height: 24px;
    max-width: 100%;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field .quote-error span {
    font-size: 14px;
    color: red;
}

/* inputs  */

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field input {
    width: 100%;
    height: 48px;
    border: 2px solid black !important;
    padding: 12px 12px !important;
    border-radius: 2px !important;
    transition: box-shadow .2s ease;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field input:focus-visible {
    outline: 0;
    border-color: #b02762 !important;
    background-color: #f6f3ff;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b02762;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field textarea:focus-visible {
    outline: 0;
    border-color: #b02762 !important;
    background-color: #f6f3ff;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b02762;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .quote-field textarea {
    width: 100%;
    border: 2px solid black !important;
    padding: 12px 12px !important;
    border-radius: 2px !important;
    transition: box-shadow .2s ease;
}


#calculator-overlay #calculator-modal .quote-form #contact-quote-form .submit-quote-btn {
    width: 100%;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .submit-quote-btn button {
    display: flex;
    height: 40px;
    border-radius: 2px;
    color: #fff;
    background-color: #b02762;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    border: none !important;
    cursor: pointer;
    padding: 0 20px;
    transition: .2s ease-in-out
}

@media (max-width: 767px) {
    #calculator-overlay #calculator-modal .quote-form #contact-quote-form .submit-quote-btn button {
        width: 100%;
    }
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .submit-quote-btn button:disabled {
    background-color: #d3d3d3b7 !important;
    cursor: not-allowed !important;
    color: black;
}

#calculator-overlay #calculator-modal .quote-form #contact-quote-form .submit-quote-btn button:hover {
    background-color: #8f1f4f;
}

/* end of quote form  */