/* force fixed layout and a predictable table width (vw-based columns are relative to viewport) */
.tblrepo {
    table-layout: fixed !important;
    width: 77.77vw !important;
    max-width: 100% !important;
    overflow-x: auto;
}

/* neutralize generic th width helpers so they don't win the cascade */
.thb th.xlcolumn,
.thb th.lcolumn,
.thb th.mdcolumn,
.thb th.smcolumn,
.thb th.xscolumn,
.thb th.lastcolumn {
    width: auto !important;
    min-width: 0 !important;
}

.thp th.finish {
    width: 7.22vw;
    padding-left: 16px;
}

.prow td.prod-image {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    padding: 0.2rem;
    vertical-align: middle
}

    .prow td.prod-image .thumb-wrap {
        width: 48px;
        height: 48px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 4px;
        display: inline-block
    }
/* Also, ensure the table itself doesn't have any borders */
table.tblerepo.tblproducts {
    border-left: none !important;
    border-right: none !important;
}
    /* Remove left border from the first header cell */
    table.tblerepo.tblproducts th:first-child {
        border-left: none;
    }

    /* Remove right border from the last header cell */
    table.tblerepo.tblproducts th:last-child {
        border-right: none;
    }

    table.tblerepo.tblproducts.prow tr:first-child {
        border-left: none;
    }

    /* Remove right border from the last header cell */
    table.tblerepo.tblproducts.prow tr:last-child {
        border-right: none;
    }

    table.tblerepo.tblproducts tr {
        border-left: none;
        border-right: none;
    }

.prow td.prod-image .thumb-wrap img.thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border: 0
}

.prow td.prod-image {
    padding-left: 16px;
}

.thp th.products-product {
    width: 22.29vw;
}

.thp th.products-code {
    width: 11.66vw;
}
/* hide the header THs that are intentionally hidden */
.thb th.colour,
.thb th.thickness {
    display: none !important;
}


/*Mirror the same widths on the THs (scoped) */
.thb th.product {
    width: 11.58vw !important;
}

.thb th.code {
    width: 6.81vw !important;
}

.thb th.part-name {
    width: 6.46vw !important;
}

.thb th.panel-size-h-x-w {
    width: 10.75vw !important;
}

.thb th.edging {
    width: 7.01vw !important;
}

.thb th.edgebanding {
    width: 6.74vw !important;
}
/* mirror the <col> */
.thb th.edging-colour {
    width: 7.08vw !important;
}

.thb th.qty {
    width: 4.03vw !important;
}

.thb th.hinge-drilling {
    width: 6vw !important;
}

.thb th.holes {
    width: 3.47vw !important;
}

.thb th.grain {
    width: 2.43vw !important;
}

.narrow {
    padding-left: 3px;
    padding-right: 3px;
    min-width: 2.5rem;
}
/* Style for a normal row on hover */
.tblproducts tbody tr:hover {
    cursor: pointer;
    background-color: #f5f5f5; /* Light grey on hover */
}

/* Style for a selected row */
.tblproducts tbody tr.selected {
    background-color: #add8e6; /* Light blue when selected */
    font-weight: bold;
}

.hidden {
    display: none;
}

.tblrepo {
}

.ptitle {
    margin: 0.49vw 0 0 1.04vw;
}
/* Style the group container */
.filter-group {
    display: flex;
    gap: 0.54vw;
    /* padding: 20px; */
}

    /* Hide the actual radio buttons */
    .filter-group input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Style the labels to look like buttons */
    .filter-group label {
        /*  padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #f0f0f0; */
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Style the label of the checked radio button */
    .filter-group input[type="radio"]:checked + label {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
        /* Group 1507 */
        /* Rectangle 10 */

        background: #413D72;
        border-color: #413D72;
        /* Wood */

        color: #FFFFFF;
    }

    /* Add a hover effect for unselected buttons */
    .filter-group label:not(:has(input:checked)):hover {
        background-color: #e0e0e0;
    }

/* Content to be filtered */
.item {
    /* display: block; 
    padding: 10px; */
    margin-bottom: 5px;
    /* border: 1px solid #eee; */
}

    .item.hidden {
        display: none;
    }

.btnfit {
    width: fit-content;
    height: 2.22vw;
    box-sizing: border-box;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 0.83vw;
    line-height: 14px;
    align-items: center;
    color: #74737D;
    /* margin-right:0.54vw; */
    padding: 0.62vw 0.82vw 1.02vw 0.82vw;
}

.custom-select-wrapper {
    position: relative;
    width: 100%; /* Adjust as needed */
}

    .custom-select-wrapper::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        border: 2px solid #333; /* Customize color and thickness */
        border: 1.5px solid #202020;
        border-top: none;
        border-left: none;
        pointer-events: none; /* Ensures clicks go to the select element */
        /* Icon */
    }

.selected-value {
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
}

.options-container {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 1;
    max-height: 27.49vw; /* Scrollable if many options */
    width: 44.5vw;
    padding: 0.97vw 1.66vw;
}

.filter-input {
    width: 22.19vw;
    height: 3.33vw;
    padding: 8px;
    border: 1px solid #eee;
    margin: 0 8px 8px 0;
}

.options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 27.49vw; /* Scrollable if many options */
    width: 51.6vw;
}

    .options-list li {
        padding: 8px;
        cursor: pointer;
    }

        .options-list li:hover {
            background-color: #f0f0f0;
        }

.btnopex {
    align-items: center;
    padding: 11.5px 24px;
    gap: 8px;
    width: 219px;
    height: 40px;
    background: #8AC53F;
    border-radius: 10px;
    border: 0;
    /*border: 2px solid #FFFFFF;*/

    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    order: 1;
}
/* Rectangle 8 */
.newrow {
    box-sizing: border-box;
    width: 110px;
    height: 36px;
    left: 80px;
    top: 347px;
    border: 1px solid #413D72;
    border-radius: 2px;
    /* Add Row */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-size: 0.83vw;
    line-height: 0.99vw;
    /* leading-trim and text-edge are draft CSS properties.

    Read more: https://drafts.csswg.org/css-inline-3/#leading-trim
    */
    color: #413D72;
}

.formb {
    overflow-y: scroll;
    margin: 4vw 4vw;
}

.field {
    /* Customer Name */

    width: 120px;
    height: 11px;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: normal;
    font-size: 1.6vw;
    line-height: 1.9vw;
    /* leading-trim and text-edge are draft CSS properties.

    /* Read more: https://drafts.csswg.org/css-inline-3/#leading-trim
    */
    /*leading-trim: both;
    text-edge: cap; */
    color: #777777;
    background-color: #fff;
    padding-left: 0;
    border: 0;
}

input {
    /* Rectangle 1 */

    box-sizing: border-box;
    background: #F5F5F5;
    border: 1px solid #E5E5E5;
}

.col-form-label, .form-control, textarea, input {
    font-family: 'Rubik';
    font-style: normal;
    font-size: 0.83vw;
    line-height: 0.99vw;
    font-weight: 400;
    color: #74737D;
    padding-bottom:12px;
    /* Rectangle 7 */
}

.form-control {
    box-sizing: border-box;
    background: #F1F4FC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}

th {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: normal;
    font-size: 0.83vw;
    line-height: 0.99vw;
    color: #333333;
    border-bottom: 1px solid #E5E5E5;
}

.elabel {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: normal;
    font-size: 0.83vw;
    line-height: 0.99vw;
    color: #333333;
}

.thb {
    /* margin-bottom: 1.57vw; */
}

    .thb tr {
        background: #F1F4FC;
        border-radius: 8px 8px 0px 0px;
        height: 2.91vw;
    }

.thp tr {
    background: #fff;
    border-radius: 8px 8px 0px 0px;
    height: 2.91vw;
    border-left: none !important;
    border-right: none !important;
}

th.firstcolumn {
    padding: 16px 16px;
    border-radius: 8px 0px 0px 0px;
    box-sizing: border-box;
    box-shadow: 0px 2px 16px -8px rgba(0, 0, 0, 0.25);
}

th, .firstcolumn {
}

tbody tr {
    border: 1px solid #E5E7EB;
}

th.lastcolumn {
    border: solid #E5E7EB;
    border-width: 1px 1px 1px 0px;
    border-radius: 0px 8px 0px 0px;
}

.input-group {
    border: 1px 0px 1px 0px solid #E5E7EB;
    margin-bottom: 2vw;
}

td {
    padding: 16px 12px 16px 0;
}

    td.first {
        padding-left: 16px;
    }

tbody:before {
    /* content:"@@"; */
    display: block;
    line-height: 1.57vw;
    text-indent: -99999px;
}

.par {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    display: flex;
    align-items: center;
    color: #202020;
    width: 53.88vw;
}

.headk {
    font-family: 'Rubik Bold';
    font-style: normal;
    font-size: 36px;
    line-height: 125%;
    display: flex;
    align-items: center;
    margin-bottom: 1.66vw;
    font-weight: 200;
    letter-spacing: -0.02em;
    color: #202020;
}

.btnmoove {
    width: 200px;
    width: 10vw;
    height: 48px;
    height: calc(2.25rem + 2px);
    background: #413D72;
    border-radius: 2px;
    /* Submit */

    font-family: 'Rubik';
    font-style: normal;
    font-size: 1.1vw;
    line-height: 1.32vw;
    color: #FFFFFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
}

.cprice {
    width: 144px;
    height: 43px;
    background: #413D72;
    border-radius: 8px;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
}

.cost {
    /* Rectangle 231 */

    width: 94px;
    height: 43px;
    background: #F1F4FC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    /* 124.61 */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #202020;
}

.btnmoove.disabled, .btnmoove:disabled {
    background: #413D72;
}

input.form-check-input {
    width: auto;
    height: auto;
}

.input-group-text {
    width: 14vw;
    height: 4.8vw;
    max-height: 48px;
}

input {
    width: 20vw;
    height: 4.8vw;
    max-height: 48px;
}

textarea.form-control {
    width: 41.61vw;
    height: 14vw;
    max-height: 150px;
}

.login-container {
    width: 100%;
    height: 59vw;
    max-height: 90vw;
    background: #FFFFFF;
    border-radius: 0 0 16px 16px;
    padding: 2.77vw 2.77vw;
    margin-top: 0;
    overflow-y: auto;
}

.info-container, .info-shortcontainer {
    width: 44.8vw;
    height: 29.4vw;
    max-height: 90vw;
    background: #FFFFFF;
    border-radius: 16px 16px;
    padding: 3.38vw 3.38vw;
    margin-top: 2.76vw;
}

.info-title {
    /* Edging Location Guide */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-size: 1.88vw;
    line-height: 125%;
    display: flex;
    align-items: center;
    color: #3F3F3F;
    margin-bottom: 2.5vw;
}


.info-span {
    /* Supporting text */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-size: 1.04vw;
    line-height: 150%;
    color: #333333;
}

.info-box {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 1.04vw;
    line-height: 1.6vw;
    leading-trim: both;
    text-edge: cap;
    color: #333333;
    margin-bottom: 0.52vw;
}

.scroller {
    overflow-y: auto;
    height: 52vw;
    overflow-x: clip;
}

.page-container {
    min-height: 100%;
    margin-bottom: -30px;
}

    .page-container:after {
        content: "";
        display: block;
    }

    footer, .page-container:after {
        height: 30px;
    }

.form-container {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.16vw;
}

.qblogin {
    width: 3.33vw;
    height: 3.33vw;
    margin-bottom: 2.5vw;
}

.redinfo {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 1.04vw;
    line-height: 150%;
    color: #FF0000;
    margin-top: 3.9vw;
}

.btnwhite {
    background: white;
    border: 0px solid;
    border-radius: 5px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 0.94vw;
    line-height: 1.45vw;
    text-align: center;
    color: #667085;
    width: 8.7vw;
    height: 3.125vw;
    margin-top: 1vw;
    margin-right: 4.17VW;
    border-radius: 8px;
    /* _Button base */

    box-sizing: border-box;
    /* Auto layout */
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    /* Shadow/xs */
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    /* Text */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-size: 0.94vw;
    line-height: 1.45vw;
    color: #333333;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.hid {
    display: none;
}

.btnimport {
    width: 106px;
    height: 43px;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    box-sizing: border-box;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #202020;
    background: #fff;
    padding: 16px 16px;
}

td.edge {
    padding-top: 0px;
    height: 50%
}

    td.edge input.form-control {
        height: 50%
    }

tbody tr.matadd {
    border-bottom-color: rgba(255,255,255,0);
    border-left-color: rgba(255,255,255,0);
    border-right-color: rgba(255,255,255,0);
    /* You may need to reset other borders */
}

.btnreq, .newrow {
    /* Group 1408 */
    background: #fff;
    width: 122px;
    height: 43px;
    /* Rectangle 9 */
    margin-left: 16px;
    box-sizing: border-box;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    /* Add Row */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #202020;
}
.btnadd {
    background: #fff;
    /* Rectangle 9 */

    box-sizing: border-box;
    width: 163px;
    height: 43px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    /* Add Customer */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #202020;
    /* Icon */

}
.btnuser{
    width:124px;
}
.tblcustomers thead th{
    /* Customer Name */
    padding: 16px 16px;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #74737D;
}
.submit {
    /* Group 1419 */

    width: 75px;
    height: 43px;
    /* Rectangle 9 */

    background: #413D72;
    border-radius: 8px;
    /* Apply */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    margin-top: 8px;
}
.tblcustomers tbody tr td {
    padding: 16px 16px;
    /* ABC Construction */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    align-items: center;
    color: #202020;
}
.btnreq {
    width: 180px;
}
.myfield {
    /* Rectangle 7 */

    box-sizing: border-box;
    height: 48px;
    background: #F1F4FC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    
    /* Select */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #74737D;
}
.pricingcustomer{
    width:200px;
}
.shift {
    width: 80px;
}
.myform{
    margin-top: 32px;
}
/* .newrow{
    width:8.46vw;
    } */
th.edge {
    border-bottom-color: rgba(255,255,255,0);
}
/* td.edge label{
    padding-bottom:20px;
    } */
.custom-checkbox-container input {
    /* Hide the default checkbox */
    appearance: none;
    -webkit-appearance: none; /* For Safari */
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
}

.custom-checkbox-container .checkmark {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #eee;
    border: 2px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 8px; /* Space between the box and the label text */
    vertical-align: middle; /* Align the custom box with the text */
    position: relative;
}
/* Change background when checked */
.custom-checkbox-container input:checked ~ .checkmark {
    background-color: #888;
    border-color: #888;
}

    /* Create the checkmark */
    .custom-checkbox-container input:checked ~ .checkmark::after {
        content: "✔"; /* Unicode checkmark character */
        position: relative;
        left: -2px;
        top: -5px;
        color: black;
        content: ''; /* Empty content is needed for pseudo-element */
        position: absolute;
        width: 6px;
        height: 12px;
        border: solid black; /* Change the border color here */
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        top: 2px; /* Adjust as needed */
        left: 7px; /* Adjust as needed */
    }
/* Add hover effect for better user experience */
.custom-checkbox-container .checkmark:hover {
    background-color: #ccc;
}

/* Add a focus ring for accessibility */
.custom-checkbox-container input:focus + .checkmark {
    box-shadow: 0 0 0 2px #222;
}

.custom-checkbox-container input:checked + .checkmark::after {
    color: green !important; /* Add !important to force the color change */
}

@@media screen and (max-width: 768px) {
    .hid {
        display: block;
    }

    .col-form-label, .form-control, textarea, input, .newrow, .btnmoove, .hid {
        font-size: 3.72vw;
        line-height: 4.42vw;
    }

    .page-container {
        height: 240vh;
    }

    .newrow {
        margin-bottom: 9.3vw;
        width: 28.6vw;
    }

    .login-container {
        width: 82.4vw;
        height: 314.2vw;
        max-height: 314.2vw;
        min-height: 314.2vw;
        padding: 4.42vw 4.42vw 9.3vw 4.42vw;
        overflow-y: auto;
        margin-top: 4.65vw;
    }

    .info-title {
        font-size: 5.12vw;
        line-height: 6.4vw;
    }

    .agreement {
        /* I agree to the terms and conditions. */

        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 1.1vw;
        line-height: 1.32vw;
        display: flex;
        align-items: center;
        color: #74737D;
    }

    .redinfo {
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 3.72vw;
        line-height: 150%;
        color: #FF0000;
        margin-top: 3.9vw;
    }


    .info-span, .info-box {
        font-size: 3.72vw;
        line-height: 3.72vw;
        margin-bottom: 0.93vw;
    }

    .info-container {
        width: 81.4vw;
        height: 82.4vw;
        max-height: 82.4vw;
        min-height: 82.4vw;
        padding: 4.42vw 4.42vw 9.3vw 4.42vw;
        overflow-y: auto;
        margin-top: 4.65vw;
    }

    .info-shortcontainer {
        width: 81.4vw;
        height: 55.12vw;
        max-height: 55.12vw;
        min-height: 55.12vw;
    }

    .scroller {
        overflow-y: auto;
        height: 310.2vw;
        overflow-x: clip;
    }

    .input-group {
        display: block;
    }

    .input-group-text {
        width: 70vw;
        height: 30vw;
        max-height: 48px;
    }

    .field {
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 3.7vw;
        line-height: 5.6vw;
    }

    input {
        width: 80vw;
        height: 11.62vw;
        max-height: 50px;
    }

    textarea {
        width: 72.1vw;
        height: 42.1vw;
        max-height: 42.1vw;
    }

    .product {
        width: 50vw;
    }

    .lcolumn {
        width: 40vw;
    }

    .mdcolumn {
        width: 35vw;
    }

    .smcolumn {
        width: 20vw;
    }

    .xscolumn {
        width: 15vw;
    }

    th {
        font-size: 3.7vw;
        line-height: 5.6vw;
    }

    table {
    }

    .tblrepo {
        overflow: auto;
        width: 170vw;
        min-height: 20vw;
        border-radius: 8px;
    }

    .tbldown {
        min-height: 10vw;
    }

    .tbldev {
        overflow-x: scroll;
        width: 73vw;
    }

    .qblogin {
        width: 11.16vw;
        height: 11.16vw;
        margin-bottom: 2.5vw;
    }

    .btnwhite {
        height: 13.96vw;
        width: 28.6vw;
        margin-right: 9.3vw;
        line-height: 6.5vw;
        font-size: 4.18vw;
        margin-top: 18.6vw;
    }
}
/* Panel Size two-line header: left aligned and same visual height as other headers */
.panelsize-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* left align the two lines */
    justify-content: center;
    height: 2.91vw; /* match .thb tr height */
}

    .panelsize-header .ps-main {
        font-size: 0.83vw; /* match header font-size */
        line-height: 1;
    }

    .panelsize-header .ps-sub {
        font-size: 0.83vw; /* same size as headers */
        line-height: 1;
        margin-top: 0.12vw; /* small gap between lines */
        color: #333333;
    }

.tblerepo {
    overflow: auto;
}

.tbledev {
    max-height: 17vw;
    overflow-y: scroll;
}
/* Add / paste these rules to align PanelSize.H and PanelSize.W inputs
   so they line up with other columns and match their height. */

.matrow td {
    vertical-align: middle;
}
    /* ensure cells align vertically */

    .matrow td.form-group.edge {
        padding: 0.25vw 0.5vw;
        /* keep same vertical rhythm as other columns */
    }

        /* Target the narrow panel-size inputs */
        .matrow td.form-group.edge .form-control.narrow,
        .matrow td.form-group.edge input.form-control.narrow {
            width: 100%; /* fill the column width so alignment matches other columns */
            box-sizing: border-box;
            height: 2.6vw; /* match other inputs' visual height; tweak as needed */
            padding: 0.45vw 0.6vw; /* match padding used elsewhere */
            line-height: 1.1; /* keep text vertically centered */
            font-size: 0.9vw; /* adjust to match other inputs */
            border-radius: 0.25vw;
        }

/* small screens fallback */
@@media (max-width: 768px) {
    .matrow td.form-group.edge .form-control.narrow {
        height: 40px;
        font-size: 14px;
    }
}

/* column widths applied to <col> (colgroup) 
.tblrepo col.product           { width: 17.5vw; }
.tblrepo col.code              { width: 8.17vw; }
.tblrepo col.part-name         { width: 7.75vw; }
.tblrepo col.colour            { width: 0vw;   } /* hidden column kept for position 
.tblrepo col.panel-size-h-x-w  { width: 10.5vw; }
.tblrepo col.edging            { width: 8.42vw; }
.tblrepo col.thickness         { width: 0vw;   } /* hidden 
.tblrepo col.edgebanding       { width: 1.1vw !important; } /* was 6.74vw 
.tblrepo col.edging-colour     { width: 8.5vw; }
.tblrepo col.qty               { width: 4.83vw; }
.tblrepo col.hinge-drilling    { width: 8.0vw; }
.tblrepo col.holes             { width: 4.17vw; }
.tblrepo col.grain             { width: 2.92vw; }
.tblrepo col.col-empty-1,
.tblrepo col.col-empty-2,
.tblrepo col.col-empty-3      { width: 1.2vw; } 
/* replace any previous fixed-width checkbox rules */

.delrow {
    border: hidden;
}

/* hide inline field validation messages inside the materials table so only the summary is visible */
.tblrepo span.text-danger,
.tbldev span.text-danger {
    display: none !important;
}

.nocalc {
    /* * Custom requests are excluded from this calculation. */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #FF0000;
    margin-left: 15px;
}

.porder {
    /* Rectangle 9 */

    box-sizing: border-box;
    width: 118px;
    height: 43px;
    border: 1px solid #413D72;
    border-radius: 8px;
    /* Place Order */

    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #413D72;
}

    .porder:disabled {
        border: 1px solid #6d6995;
        color: #6d6995;
    }