.matrix-add-cases .matrix-tool-workspace__content {
    width: min(96vw, 1380px) !important;
}

.matrix-add-cases #formcontainer > div > .title {
    position: sticky;
    z-index: 20;
    top: 0;
}

.matrix-add-cases .matrix-form-controls {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.matrix-add-cases .matrix-form-controls > tbody > tr > td {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 2px;
}

.matrix-add-cases .matrix-form-controls .widget {
    display: flex;
    min-width: 0;
    grid-column: span 2;
    flex-direction: column;
    float: none;
    gap: 3px;
    margin: 0;
}

/* Legacy forms separate labels and controls with a BR. In the modern flex
   layout that BR becomes an extra flex row and creates an unintended gap. */
.matrix-add-cases .matrix-form-controls .widget > br {
    display: none;
}

.matrix-add-cases .matrix-form-controls .widget[style*="display:none"] {
    display: none !important;
}

.matrix-add-cases .matrix-form-controls .lblcontainer,
.matrix-add-cases .matrix-form-controls .inputcontainer,
.matrix-add-cases .matrix-form-controls .divselect {
    width: 100% !important;
    height: auto;
    padding: 0 !important;
    float: none;
}

.matrix-add-cases .matrix-form-controls .lblcontainer {
    color: #536574;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.matrix-add-cases .matrix-form-controls input[type="text"],
.matrix-add-cases .matrix-form-controls select,
.matrix-add-cases .matrix-form-controls textarea {
    width: 100% !important;
    min-height: 30px;
}

.matrix-add-cases .matrix-form-controls .widget:has(#splist),
.matrix-add-cases .matrix-form-controls .widget:has(textarea),
.matrix-add-cases .matrix-form-controls .widget:has(input[id*="Address"]),
.matrix-add-cases .matrix-form-controls .widget:has(input[id*="address"]) {
    grid-column: span 4;
}

.matrix-add-cases .FormPanel {
    box-shadow: 0 1px 3px rgba(31, 49, 65, .04);
}

.matrix-add-cases .FormPanel > .title,
.matrix-add-cases .FormPanel > div > .title {
    margin: -10px -10px 10px;
    padding: 7px 10px;
    border-bottom: 1px solid #c8d3dc;
    background: #eef3f7;
}

.matrix-add-cases input[type="checkbox"] {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

@media (max-width: 1000px) {
    .matrix-add-cases .matrix-form-controls .widget { grid-column: span 3; }
    .matrix-add-cases .matrix-form-controls .widget:has(#splist),
    .matrix-add-cases .matrix-form-controls .widget:has(textarea) { grid-column: span 6; }
}
.matrix-add-cases .inputcontainer {
    position: relative;
}

.matrix-add-cases .inputcontainer > input.errtxt,
.matrix-add-cases .inputcontainer > textarea.errtxt {
    padding-right: 24px !important;
}

.matrix-add-cases .matrix-validation-error-icon {
    display: block;
    margin: 0 !important;
    object-fit: contain;
}

.matrix-add-cases #section2 > .title,
.matrix-add-cases #section3 > .title,
.matrix-add-cases #section4 > .title,
.matrix-add-cases #section5 > .title,
.matrix-add-cases #section6 > .title,
.matrix-add-cases #section7 > .title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-height: 38px;
    height: auto !important;
    padding: 5px 10px !important;
}

.matrix-add-cases #section2 > .title > .matrix-title-icon,
.matrix-add-cases #section3 > .title > .matrix-title-icon,
.matrix-add-cases #section4 > .title > .matrix-title-icon,
.matrix-add-cases #section5 > .title > .matrix-title-icon,
.matrix-add-cases #section6 > .title > .matrix-title-icon,
.matrix-add-cases #section7 > .title > .matrix-title-icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    object-fit: contain;
    vertical-align: middle;
}

.matrix-add-cases #section2 > .title > .matrix-title-text,
.matrix-add-cases #section3 > .title > .matrix-title-text,
.matrix-add-cases #section4 > .title > .matrix-title-text,
.matrix-add-cases #section5 > .title > .matrix-title-text,
.matrix-add-cases #section6 > .title > .matrix-title-text,
.matrix-add-cases #section7 > .title > .matrix-title-text {
    line-height: 16px;
}

.matrix-add-cases #section2 > .title > .divchk,
.matrix-add-cases #section3 > .title > .divchk,
.matrix-add-cases #section4 > .title > .divchk,
.matrix-add-cases #section5 > .title > .divchk,
.matrix-add-cases #section7 > .title > .divchk {
    position: static !important;
    right: auto !important;
    float: none !important;
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 4px;
    min-height: 18px;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    line-height: 18px !important;
    white-space: nowrap;
}

.matrix-add-cases #section2 > .title > .divchk input[type="checkbox"],
.matrix-add-cases #section3 > .title > .divchk input[type="checkbox"],
.matrix-add-cases #section4 > .title > .divchk input[type="checkbox"],
.matrix-add-cases #section5 > .title > .divchk input[type="checkbox"],
.matrix-add-cases #section7 > .title > .divchk input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
}