/* =============================================================================
   Consultation Summary  -  Vision & Prescription / Examination / Assessments
   -----------------------------------------------------------------------------
   The Consultation Summary markup in

     templates/UsNewConsultation/NewDoctorWorkUpParent.html
     templates/UsNewConsultation/UsPatientVisitMain.html
     templates/UsNewConsultation/uibpopup/Historypopupnew.html

   is styled entirely by the single-property utility classes in
   assets/frameworks (d__f--, px__12--, fs__11--, bg__FFFFFF--n, bb__F3F4F6--n,
   br__10-- ...) plus the max-width variants max1366:/maxlg:/maxmd: in
   assets/frameworks/20-responsive.css. Nothing below styles an element that
   the templates are able to put a class on.

   What is left here is only what a utility class cannot reach:

     1. the --csum-* design tokens, which the rules below resolve;
     2. the uib-accordion chrome. uib-accordion transcludes our heading into
        its own .panel / .panel-heading / .panel-title / .panel-body elements,
        which the template never authors and therefore cannot class;
     3. state selectors whose state lives on an ANCESTOR - .csum__arow--.expanded
        painting its > td children, .csum__atabs-- > li.active > a - and the
        :hover/:focus pairs that go with them. A utility on the child would key
        off the child's own state, not the row's, so the behaviour differs;
     4. two structural rules whose match depends on runtime DOM (the svg-icon
        directive rewrites the icon element; ng-repeat decides which
        .csum__eyecols-- is :last-child).

   Verified by a differential cascade simulation over all three templates at
   1920/1366/1200/991/767/480px: computed styles are unchanged.
   ============================================================================= */

.csum__wrap-- {
    --csum-brand: #1D5558;
    --csum-brand-10: rgba(29, 85, 88, .10);
    --csum-surface: #FFFFFF;
    --csum-border: #E5E7EB;
}

.csum__accordion-- > .panel-group {
    margin-bottom: 0;
}

.csum__accordion-- > .panel-group > .panel {
    background: var(--csum-surface);
    border: 1.5px solid var(--csum-border);
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}

.csum__accordion-- > .panel-group > .panel + .panel {
    margin-top: 0;
}

.csum__accordion-- > .panel-group > .panel > .panel-heading {
    min-height: 36px;
    padding: 0 16px;
    background: var(--csum-surface);
    border: none;
    border-radius: 0;
}

.csum__accordion-- > .panel-group > .panel.panel-open > .panel-heading {
    border-bottom: 1.5px solid var(--csum-border);
}

.csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title, .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a, .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a > span {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}

.csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a:hover, .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a:focus, .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a:active {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.csum__accordion-- > .panel-group > .panel > .panel-collapse > .panel-body {
    min-height: 100px;
    padding: 0;
    background: var(--csum-surface);
    border: none;
    border-radius: 0 0 8px 8px;
}

.csum__accordion--.csum__accordion--inset > .panel-group > .panel > .panel-collapse > .panel-body {
    padding: 10px 12px;
}

.csum__sec--head > .csum__icon-- {
    width: 20px;
    height: 20px;
}

.csum__accordion-- > .panel-group > .panel.panel-open .csum__chev-- {
    transform: rotate(0deg);
}

.csum__tbl-- > tbody > tr:last-child > td {
    border-bottom: none;
}

.csum__grp--body > .csum__eyecols--:last-child {
    margin-bottom: 0;
}

.csum__atabs-- > li > a:hover, .csum__atabs-- > li > a:focus, .csum__atabs-- > li.active > a {
    color: var(--csum-brand);
    text-decoration: none;
}

.csum__atabs-- > li.active > a {
    font-weight: 800;
    border-bottom-color: var(--csum-brand);
}

.csum__arow--:hover > td {
    background: #FAFBFC;
}

.csum__arow--.expanded > td, .csum__arow--.expanded:hover > td {
    background: var(--csum-brand-10);
    border-bottom: none;
}

.csum__arow--.expanded .csum__achev-- {
    transform: rotate(90deg);
}

@media (max-width: 767px) {
    .csum__seg--lbl:first-child {
        border-right: none;
    }

    .csum__seg--row > .csum__seg--cell:last-child {
        border-bottom: none;
    }

    .csum__accordion-- > .panel-group > .panel > .panel-heading {
        padding: 0 12px;
    }
}






/*Need to replace into seperate files*/

.d__b--n {
    display: block;
}

/* explicit fr track lists, matching the .gtc__2--1fr / .gtc__3--1fr family */
.gtc__1--1fr {
    grid-template-columns: 1fr;
}

/* Explicit fr track lists that load BEFORE 20-responsive.css, so the
   max-width variants there can override them. The gtc__2--1fr / gtc__3--1fr
   spellings of these values live in css/responsive.css, which loads after
   20-responsive.css and therefore cannot be overridden by a variant. */
.gc__2--1fr {
    grid-template-columns: 1fr 1fr;
}

.gc__3--1fr {
    grid-template-columns: 1fr 1fr 1fr;
}
/* non-important twins: the component rules these replace were not
   !important, and the max-width / last: / :hover rules that override
   them would lose to an !important declaration. */
.mt__0--n {
    margin-top: 0px;
}

.pt__0--n {
    padding-top: 0px;
}

.pr__0--n {
    padding-right: 0px;
}

.pb__0--n {
    padding-bottom: 0px;
}

.pl__0--n {
    padding-left: 0px;
}

.pt__10--n {
    padding-top: 10px;
}

.pt__12--n {
    padding-top: 12px;
}

.pr__20--n {
    padding-right: 20px;
}

.pb__10--n {
    padding-bottom: 10px;
}
/* intrinsic sizing, matching the existing .w__max-- / .h__max-- */
.minw__max-- {
    min-width: max-content;
}

/* matches the calc spelling used by .flex__1--1-calc50m10 in 10-flex.css */
.maxw__calc50m10-- {
    max-width: calc(50% - 10px);
}
/* non-important twins: the component rules these replace were not
   !important, and the max-width / last: / :hover rules that override
   them would lose to an !important declaration. */
.ta__l--n {
    text-align: left;
}

.fs__11--n {
    font-size: 11px;
}

.lh__1-3--n {
    line-height: 1.3;
}

.vl__middle--n {
    vertical-align: middle;
}

.vl__top--n {
    vertical-align: top;
}

/* border-right / border-left reset - completes the bd{t,r,b,l}__ family
   alongside the existing .bt__none-- and .bb__none-- */
.bdr__none-- {
    border-right: none !important;
}

.bdl__none-- {
    border-left: none !important;
}

/* transparent bottom border, sized - tab underline placeholder */
.bb__t--2px {
    border-bottom: 2px solid transparent;
}

.brt__93C5FD--1px {
    border-right: 1px solid #93C5FD;
}

/* non-important twins: the component rules these replace were not
   !important, and the max-width / last: / :hover rules that override
   them would lose to an !important declaration. */
.bt__none--n {
    border-top: none;
}

.bdr__none--n {
    border-right: none;
}

.bdl__none--n {
    border-left: none;
}

.bg__EAFAF0--n {
    background-color: #EAFAF0;
}

.tc__0891B2--n {
    color: #0891B2;
}

/* non-important twins: the component rules these replace were not
   !important, and the max-width / last: / :hover rules that override
   them would lose to an !important declaration. */
.bg__1D555814--n {
    background-color: rgba(29, 85, 88, .08);
}

.bg__1D55581A--n {
    background-color: rgba(29, 85, 88, .10);
}
/* Max-width (descending) utilities.
   Narrower blocks come last so they win on equal specificity, mirroring the
   min-width blocks above. maxlg and maxmd are the exact complements of
   lg (>=992px) and md (>=768px); max1366 has no pair in that scale and is
   named for its value. */

/* max1366 <= 1366px */
@media (max-width:1366px) {
    .max1366\:m__8-- {
        margin-top: 8px;
        margin-right: 8px;
        margin-bottom: 8px;
        margin-left: 8px;
    }

    .max1366\:p__10--x {
        padding-right: 10px;
        padding-left: 10px;
    }

    .max1366\:p__10--y {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .max1366\:p__8--x {
        padding-right: 8px;
        padding-left: 8px;
    }

    .max1366\:p__8--y {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .max1366\:pb__14-- {
        padding-bottom: 14px;
    }

    .max1366\:pl__28-- {
        padding-left: 28px;
    }

    .max1366\:pr__14-- {
        padding-right: 14px;
    }

    .max1366\:pt__12--n {
        padding-top: 12px;
    }
}

/* maxlg <= 991px  (complement of lg >= 992px) */
@media (max-width:991px) {
    .maxlg\:fb__100p-- {
        flex-basis: 100%;
    }

    .maxlg\:g__14-- {
        row-gap: 14px;
        column-gap: 14px;
    }

    .maxlg\:gtc__1--1fr {
        grid-template-columns: 1fr;
    }

    .maxlg\:maxw__100p-- {
        max-width: 100%;
    }

    .maxlg\:p__10--x {
        padding-right: 10px;
        padding-left: 10px;
    }

    .maxlg\:p__10--y {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* maxmd <= 767px  (complement of md >= 768px) */
@media (max-width:767px) {
    .maxmd\:bb__D1D5DB--1half {
        border-bottom-width: 1.5px;
        border-bottom-style: solid;
        border-bottom-color: #D1D5DB;
    }

    .maxmd\:bdr__none--n {
        border-right-width: 0;
        border-right-style: none;
        border-right-color: currentcolor;
    }

    .maxmd\:g__14-- {
        row-gap: 14px;
        column-gap: 14px;
    }

    .maxmd\:gtc__1--1fr {
        grid-template-columns: 1fr;
    }

    .maxmd\:mx__6-- {
        margin-left: 6px;
        margin-right: 6px;
    }

    .maxmd\:p__6--x {
        padding-right: 6px;
        padding-left: 6px;
    }

    .maxmd\:pb__12-- {
        padding-bottom: 12px;
    }

    .maxmd\:pl__12-- {
        padding-left: 12px;
    }

    .maxmd\:pr__12-- {
        padding-right: 12px;
    }
}
/* ================================================================
   Structural position variants
   last: / first: mirror the hover:/focus:/active: families above. They
   carry the pseudo-class itself, so the browser re-evaluates position for
   every ng-repeat clone at runtime; a plain utility would have to be
   hard-coded onto whichever element happens to be last in the template.
   ================================================================ */

.last\:bdr__none--n:last-child {
    border-right-width: 0;
    border-right-style: none;
    border-right-color: currentcolor;
}

.last\:mb__0--:last-child {
    margin-bottom: 0px;
}

.first\:brt__D1D5DB--1half:first-child {
    border-right-width: 1.5px;
    border-right-style: solid;
    border-right-color: #D1D5DB;
}