.tableindentWidth {
    width: 30px;
}

.SclName {
    text-align: left;
    border-radius: 18px 0 0 18px;
    overflow: hidden;
}

.tableFamily tr.cat > td.SclName:first-child ~ td.dueCartName.nomobile:last-child {
    border-radius: 0 18px 18px 0;
    overflow: hidden;
}

.SclName img {
    display: inline-block;
    margin-left: 10px;
    float: left;
}

.SclName span {
    display: inline-block;
    margin-top: 5px;
    margin-left: 10px;
    color: white;
    font-size: 120%;
    font-weight: bold;
    font-style: normal;
    text-align: left;
}

tr.cat .fn[colspan=3] {
    min-width: 22ex;
}

tr.d1WebItem .fn {
    /* IE11 only supports "word-wrap" instead of proper "overflow-wrap" property. */
    word-wrap: break-word;
    max-width: 36ex;
}

@media only screen and (max-device-width: 640px), (max-width: 1100px) {
    .tableindentWidth {
        width: 0px;
    }

    td.fn {
        font-size: 11pt;
    }

    tr.cat .fn[colspan=3] {
        min-width: 10ex;
    }

    tr.d1WebItem .fn {
        max-width: 16ex;
    }

    .SclName span {
        font-size: inherit;
        margin-top: 10px;
    }

    .SclName {
        border-radius: 18px;
    }
}

.separatorLight {
    box-shadow: inset 0 2px 1px -1px #C0C0C0;
}

.separatorDark {
    box-shadow: inset 0 2px 1px -1px #000;
}

/* ============================================================
   Fee table modernization – Figma 77:2089 (master-detail accordion)
   Tokens: Title #1C211F, Body #616369, Pale-Blue BG #F0F5FA,
   Mid-Blue #7191B1, Light Stroke #E8E8E8, Stroke #C7C7C7,
   Radius 16px, Inner Shadow inset 0 1px 4px rgba(12,12,13,.05).
   Scoped to .feetable-accordion (emitted verbatim as CssClass, so it
   survives ASP.NET ClientID rewriting of the mainDiv wrapper).
   ============================================================ */
.feetable-accordion {
    border-collapse: separate;
    border-spacing: 0;
    color: #616369;
    font-size: 13px;
    width: 100%;
}

/* School header row – plain white heading, no colored bar (Figma 77:2089) */
.feetable-accordion tr.cat > td.SclName {
    border-radius: 0;
    padding: 24px 4px 12px;
    background-color: transparent;
    border-bottom: 1px solid #E5E7EB;
    vertical-align: middle;
}

.feetable-accordion tr.cat > td.SclName img {
    float: none;
    height: 40px;
    max-height: 44px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 12px;
}

.feetable-accordion tr.cat > td.SclName span {
    display: inline-block;
    margin: 0 0 0 4px;
    color: #1C211F;
    font-size: 19px;
    font-weight: 650;
    font-weight: 700;
    vertical-align: middle;
}

.feetable-accordion tr.cat > td.SclName span.feeSchoolCount {
    margin-left: 10px;
    color: #9CA3AF;
    font-size: 14px;
    font-weight: 500;
}

/* ---- Year master row (collapsible) ---- */
.feetable-accordion tr.feeYearRow {
    cursor: pointer;
}

.feetable-accordion tr.feeYearRow td.feeYearMaster {
    padding: 17px 18px;
    color: #1C211F;
    border: 0;
    border-radius: 0;
    background-color: #FFFFFF;
}

.feetable-accordion tr.feeYearRow.is-collapsed td.feeYearMaster {
    border-radius: 12px;
}

/* Chevron toggles rotation when collapsed */
.feetable-accordion .feeYearChevron {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 12px;
    vertical-align: middle;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #8E8F92;
    transition: transform 0.15s ease;
}

.feetable-accordion tr.feeYearRow.is-collapsed .feeYearChevron {
    transform: rotate(-90deg);
}

.feetable-accordion .feeYearLabel {
    font-size: 16px;
    font-weight: 700;
    color: #1C211F;
    vertical-align: middle;
}

.feetable-accordion .feeYearCount {
    display: inline-block;
    margin-left: 8px;
    padding: 0;
    background: none;
    color: #9CA3AF;
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
}

/* ---- Badge pills (object-type / category) ---- */
.feetable-accordion .feeYearBadges {
    float: right;
    text-align: right;
    max-width: 55%;
}

.feetable-accordion .feeBadge {
    display: inline-block;
    margin-left: 6px;
    margin-bottom: 4px;
    padding: 5px 9px;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.feetable-accordion .feeBadge--school {
    background-color: #74A6E2;
}

.feetable-accordion .feeBadge--courses {
    background-color: #87CC67;
}

.feetable-accordion .feeBadge--cte {
    background-color: #0B896D;
}

.feetable-accordion .feeBadge--districts {
    background-color: #EBB500;
}

.feetable-accordion .feeBadge--default {
    background-color: #7191B1;
}

/* ---- Collapsed detail rows ---- */
.feetable-accordion tr.feeYear-hidden {
    display: none;
}

/* ---- Detail: category header row ---- */
.feetable-accordion tr.feeCatRow td {
    padding-top: 14px;
}

.feetable-accordion td.feeCatName {
    font-weight: 600;
    font-size: 15px;
    color: #1C211F;
    text-transform: none;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E7EB;
}

.feetable-accordion .feeCatBadge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 5px;
    background-color: #7191B1;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-right: 8px;
}

/* ---- Category theme tints & accents (direct, non-fragile) ---- */
/* School */
.feetable-accordion tr.feeTint--school.d0,
.feetable-accordion tr.feeTint--school.d1 {
    background-color: #F2F7FD;
}

.feetable-accordion tr.feeCat--school .feeCatBadge,
.feetable-accordion tr.feeColHdr--school .dueCat {
    color: #6EA0DB;
}

.feetable-accordion tr.feeCat--school .feeCatBadge {
    background-color: #6EA0DB;
    color: #FFFFFF;
}

.feetable-accordion tr.feeColHdr--school td {
    background-color: #F2F7FD;
}

/* CTE */
.feetable-accordion tr.feeTint--cte.d0,
.feetable-accordion tr.feeTint--cte.d1 {
    background-color: #F0F9F7;
}

.feetable-accordion tr.feeCat--cte .feeCatBadge {
    background-color: #14977D;
    color: #FFFFFF;
}

.feetable-accordion tr.feeColHdr--cte .dueCat {
    color: #14977D;
}

.feetable-accordion tr.feeColHdr--cte td {
    background-color: #F0F9F7;
}

/* Course */
.feetable-accordion tr.feeTint--course.d0,
.feetable-accordion tr.feeTint--course.d1,
.feetable-accordion tr.feeTint--courses.d0,
.feetable-accordion tr.feeTint--courses.d1 {
    background-color: #F4FAEF;
}

.feetable-accordion tr.feeCat--course .feeCatBadge,
.feetable-accordion tr.feeCat--courses .feeCatBadge {
    background-color: #7CC85D;
    color: #FFFFFF;
}

.feetable-accordion tr.feeColHdr--course .dueCat,
.feetable-accordion tr.feeColHdr--courses .dueCat {
    color: #7CC85D;
}

.feetable-accordion tr.feeColHdr--course td,
.feetable-accordion tr.feeColHdr--courses td {
    background-color: #F4FAEF;
}

/* District */
.feetable-accordion tr.feeTint--district.d0,
.feetable-accordion tr.feeTint--district.d1,
.feetable-accordion tr.feeTint--districts.d0,
.feetable-accordion tr.feeTint--districts.d1 {
    background-color: #FFF9E8;
}

.feetable-accordion tr.feeCat--district .feeCatBadge,
.feetable-accordion tr.feeCat--districts .feeCatBadge {
    background-color: #E5AD00;
    color: #FFFFFF;
}

.feetable-accordion tr.feeColHdr--district .dueCat,
.feetable-accordion tr.feeColHdr--districts .dueCat {
    color: #E5AD00;
}

.feetable-accordion tr.feeColHdr--district td,
.feetable-accordion tr.feeColHdr--districts td {
    background-color: #FFF9E8;
}

/* Column header labels (Fee / Paid / All Adj / Due) */
.feetable-accordion .dueCat {
    color: #7191B1;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 8px 4px;
}

/* Money columns – consistent width & alignment */
.feetable-accordion td.dueCartName {
    width: 105px;
    min-width: 105px;
    text-align: right;
    vertical-align: middle;
    color: #1C211F;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Fee name / body cells */
.feetable-accordion td.fn {
    color: #616369;
    width: auto;
    font-size: 14px;
    font-weight: 500;
}

/* Neutralize legacy indent spacer cells in modern layout */
.feetable-accordion td.tableindentWidth {
    width: 0;
    padding: 0;
}

/* Detail rows – comfortable padding + subtle separators */
.feetable-accordion tr.d0 td,
.feetable-accordion tr.d1 td {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EEF1F4;
}

/* Alternating body rows – white by default; category tint overrides */
.feetable-accordion tr.d0 {
    background-color: #FFFFFF;
}

.feetable-accordion tr.d1 {
    background-color: #FFFFFF;
}

/* Soft inner shadow separators between sections */
.feetable-accordion .separatorLight {
    box-shadow: inset 0 1px 4px rgba(12, 12, 13, 0.05);
}

/* Summary / total row emphasis */
.feetable-accordion td.dueSubTtlCart,
.feetable-accordion td.dueFmly {
    color: #1C211F;
    font-weight: 700;
    font-size: 14px;
    border-top: 1px solid #C7C7C7;
    padding-top: 12px;
    padding-bottom: 12px;
}