/* Style inputs, select elements and textareas */

    .containerCalculator .calculatorRow {
        width: 100%!important;
    }

    #calcular-frete-loader {
        display: none;
        justify-content: center;
        align-items: center;
    }

    .tableResult {
        display: none;
    }

    .containerCalculator input[type=text],
    .containerCalculator select,
    .containerCalculator textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        resize: vertical;
    }

    /* Style the label to display next to the inputs */
    .containerCalculator label {
        padding: 12px 12px 12px 0;
        display: inline-block;
    }

    /* Style the submit button */
    .containerCalculator input[type=submit] {
        background-color: #333333;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        float: right;
    }

    /* Style the containerCalculator */
    .containerCalculator {
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
        margin-top: 10px;
        margin-bottom: 20px;
        width: 100%;
    }

    /* Floating column for labels: 25% width */
    .containerCalculator .col-25 {
        float: left;
        width: 25%;
        margin-top: 6px;
    }

    /* Floating column for inputs: 75% width */
    .containerCalculator .col-75 {
        float: left;
        width: 100%;
        margin-top: 6px;
    }

    /* Clear floats after the columns */
    .containerCalculator .row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {

        .containerCalculator .col-25,
        .containerCalculator .col-75,
        input[type=submit],
        .containerCalculator input[type=text] {
            width: 100%;
            margin-top: 10;
        }
    }

    .containerCalculator #calcular-frete {
        margin-top: 12px;
        width: 100%;
        padding: 12px 20px;
        border: 0;
        border-radius: 4px;
        cursor: pointer;
    }

    .containerCalculator .shipping-estimate-note,
    .containerCalculator .observation-shipping-free,
    .containerCalculator #destiny-shipping-mehor-envio {
        display: block;
        margin-top: 8px;
    }

    .containerCalculator .resultado-frete td {
        padding: 10px 0;
    }


    .containerCalculator .supimpa-me-cep-inline {
        display: flex;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .containerCalculator .supimpa-me-cep-inline #inputCep {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .containerCalculator .supimpa-me-cep-inline #calcular-frete {
        flex: 0 0 180px;
        width: auto;
        margin-top: 0;
        white-space: nowrap;
    }

    .containerCalculator .supimpa-shipping-quote td {
        line-height: 1.45;
    }

    .containerCalculator .supimpa-shipping-delivery {
        display: inline-block;
        margin-top: 4px;
        color: inherit;
        opacity: .9;
    }

    @media screen and (max-width: 600px) {
        .containerCalculator .supimpa-me-cep-inline {
            flex-direction: column;
            gap: 8px;
        }

        .containerCalculator .supimpa-me-cep-inline #inputCep,
        .containerCalculator .supimpa-me-cep-inline #calcular-frete {
            width: 100%;
            flex-basis: auto;
        }
    }


    .containerCalculator #destiny-shipping-mehor-envio {
        margin-top: 10px;
    }

    .containerCalculator .shipping-estimate-note {
        margin-top: 4px;
    }

    .containerCalculator .supimpa-shipping-estimated {
        display: inline-block;
        margin-top: 4px;
        color: inherit;
        opacity: .9;
    }