:root{ /* Base colors share hue and saturation */ --base-grey: 210, 12%; --base-red: 360, 90%; --base-pink: 336, 65%; --base-purple: 280, 55%; --base-indigo: 241, 40%; --base-blue: 200, 76%; --base-teal: 170, 60%; --base-green: 133, 44%; --base-yellow: 55, 100%; --base-orange: 40, 100%; /* Palette colors vary by lightness*/ --grey-1000: var(--base-grey), 0%; /* black */ --grey-950: var(--base-grey), 15%; --grey-900: var(--base-grey), 20%; --grey-800: var(--base-grey), 30%; --grey-700: var(--base-grey), 40%; --grey-600: var(--base-grey), 50%; --grey-500: var(--base-grey), 60%; --grey-400: var(--base-grey), 70%; --grey-300: var(--base-grey), 80%; --grey-200: var(--base-grey), 90%; --grey-100: var(--base-grey), 95%; --grey-50: var(--base-grey), 97%; --grey-0: var(--base-grey), 100%; /* white */ --red-900: var(--base-red), 20%; --red-800: var(--base-red), 30%; --red-700: var(--base-red), 35%; --red-600: var(--base-red), 40%; --red-500: var(--base-red), 50%; --red-400: var(--base-red), 70%; --red-300: var(--base-red), 75%; --red-200: var(--base-red), 85%; --red-100: var(--base-red), 93%; --red-50: var(--base-red), 97%; --pink-900: var(--base-pink), 20%; --pink-800: var(--base-pink), 30%; --pink-700: var(--base-pink), 35%; --pink-600: var(--base-pink), 40%; --pink-500: var(--base-pink), 50%; --pink-400: var(--base-pink), 70%; --pink-300: var(--base-pink), 75%; --pink-200: var(--base-pink), 85%; --pink-100: var(--base-pink), 93%; --pink-50: var(--base-pink), 97%; --purple-900: var(--base-purple), 20%; --purple-800: var(--base-purple), 30%; --purple-700: var(--base-purple), 35%; --purple-600: var(--base-purple), 40%; --purple-500: var(--base-purple), 50%; --purple-400: var(--base-purple), 70%; --purple-300: var(--base-purple), 75%; --purple-200: var(--base-purple), 85%; --purple-100: var(--base-purple), 93%; --purple-50: var(--base-purple), 97%; --indigo-900: var(--base-indigo), 20%; --indigo-800: var(--base-indigo), 30%; --indigo-700: var(--base-indigo), 35%; --indigo-600: var(--base-indigo), 40%; --indigo-500: var(--base-indigo), 50%; --indigo-400: var(--base-indigo), 60%; --indigo-300: var(--base-indigo), 70%; --indigo-200: var(--base-indigo), 80%; --indigo-100: var(--base-indigo), 90%; --indigo-50: var(--base-indigo), 97%; --teal-900: var(--base-teal), 20%; --teal-800: var(--base-teal), 30%; --teal-700: var(--base-teal), 35%; --teal-600: var(--base-teal), 40%; --teal-500: var(--base-teal), 50%; --teal-400: var(--base-teal), 70%; --teal-300: var(--base-teal), 75%; --teal-200: var(--base-teal), 85%; --teal-100: var(--base-teal), 93%; --teal-50: var(--base-teal), 97%; --green-900: var(--base-green), 20%; --green-800: var(--base-green), 28%; --green-700: var(--base-green), 35%; --green-600: var(--base-green), 40%; --green-500: var(--base-green), 48.6%; --green-400: var(--base-green), 70%; --green-300: var(--base-green), 75%; --green-200: var(--base-green), 85%; --green-100: var(--base-green), 93%; --green-50: var(--base-green), 97%; --yellow-900: var(--base-yellow), 20%; --yellow-800: var(--base-yellow), 30%; --yellow-700: var(--base-yellow), 35%; --yellow-600: var(--base-yellow), 40%; --yellow-500: var(--base-yellow), 50%; --yellow-400: var(--base-yellow), 70%; --yellow-300: var(--base-yellow), 75%; --yellow-200: var(--base-yellow), 85%; --yellow-100: var(--base-yellow), 93%; --yellow-50: var(--base-yellow), 97%; --orange-900: var(--base-orange), 20%; --orange-800: var(--base-orange), 30%; --orange-700: var(--base-orange), 35%; --orange-600: var(--base-orange), 40%; --orange-500: var(--base-orange), 50%; --orange-400: var(--base-orange), 70%; --orange-300: var(--base-orange), 75%; --orange-200: var(--base-orange), 85%; --orange-100: var(--base-orange), 93%; --orange-50: var(--base-orange), 97%; --blue-900: var(--base-blue), 20%; --blue-800: var(--base-blue), 30%; --blue-700: var(--base-blue), 35%; --blue-600: var(--base-blue), 40%; --blue-500: var(--base-blue), 50%; --blue-400: var(--base-blue), 70%; --blue-300: var(--base-blue), 75%; --blue-200: var(--base-blue), 85%; --blue-100: var(--base-blue), 93%; --blue-50: var(--base-blue), 97%; --size-1: .25rem; --size-2: .5rem; --size-3: .75rem; --size-4: 1rem; --size-5: 1.25rem; --size-6: 1.5rem; --size-7: 1.75rem; --size-8: 2rem; --size-9: 3rem; --size-10: 4rem; --size-11: 5.5rem; --size-12: 7.5rem; --size-fluid-1: clamp(.5rem, 1vw, 1rem); --size-fluid-2: clamp(1rem, 2vw, 1.25rem); --size-fluid-3: clamp(1.25rem, 3vw, 1.5rem); --size-fluid-4: clamp(1.5rem, 4vw, 2.25rem); --size-fluid-5: clamp(2.25rem, 5vw, 2.75rem); --size-fluid-6: clamp(2.75rem, 7vw, 3.5rem); --font-lineheight-00: .95; --font-lineheight-0: 1.1; --font-lineheight-1: 1.25; --font-lineheight-2: 1.375; --font-lineheight-3: 1.5; --font-lineheight-4: 1.75; --font-lineheight-5: 2; --font-size-00: .5rem; --font-size-0: .75rem; --font-size-1: 1rem; --font-size-2: 1.1rem; --font-size-3: 1.25rem; --font-size-4: 1.5rem; --font-size-5: 2rem; --font-size-6: 2.5rem; --font-size-7: 3rem; --font-size-8: 3.5rem; --font-sans: 'Source Sans Pro', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; --border-size-1: 1px; --border-size-2: 2px; --border-size-3: 5px; --radius-1: 4px; --radius-2: 6px; --radius-3: 1rem; --radius-4: 2rem; --radius-5: 4rem; --radius-6: 8rem; --ease-1: cubic-bezier(.25, 0, .5, 1); --ease-2: cubic-bezier(.25, 0, .4, 1); --ease-3: cubic-bezier(.25, 0, .3, 1); --ease-4: cubic-bezier(.25, 0, .2, 1); --ease-5: cubic-bezier(.25, 0, .1, 1); --layer-1: 1; --layer-2: 2; --layer-3: 3; --layer-4: 4; --layer-5: 5; --layer-important: 2147483647; --shadow-color: 220 3% 15%; --shadow-strength: 1%; --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)); --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)); --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); --animation-fade-in: fade-in .5s var(--ease-3); --animation-fade-in-bloom: fade-in-bloom .5s var(--ease-3); --animation-fade-out: fade-out .5s var(--ease-3); --animation-scale-up: scale-up .5s var(--ease-3); --animation-scale-down: scale-down .5s var(--ease-3); --animation-slide-out-up: slide-out-up .5s var(--ease-3); --animation-slide-out-down: slide-out-down .5s var(--ease-3); --animation-slide-out-right: slide-out-right .5s var(--ease-3); --animation-slide-out-left: slide-out-left .5s var(--ease-3); --animation-slide-in-up: slide-in-up .5s var(--ease-3); --animation-slide-in-down: slide-in-down .5s var(--ease-3); --animation-slide-in-right: slide-in-right .5s var(--ease-3); --animation-slide-in-left: slide-in-left .5s var(--ease-3); --animation-shake-x: shake-x .75s var(--ease-out-5); --animation-shake-y: shake-y .75s var(--ease-out-5); --animation-spin: spin 2s linear infinite; --animation-ping: ping 5s var(--ease-out-3) infinite; --animation-blink: blink 1s var(--ease-out-3) infinite; --animation-float: float 3s var(--ease-in-out-3) infinite; --animation-bounce: bounce 2s var(--ease-squish-2) infinite; --animation-pulse: pulse 2s var(--ease-out-3) infinite; --ease-1: cubic-bezier(.25, 0, .5, 1); --ease-2: cubic-bezier(.25, 0, .4, 1); --ease-3: cubic-bezier(.25, 0, .3, 1); --ease-4: cubic-bezier(.25, 0, .2, 1); --ease-5: cubic-bezier(.25, 0, .1, 1); --ease-in-1: cubic-bezier(.25, 0, 1, 1); --ease-in-2: cubic-bezier(.50, 0, 1, 1); --ease-in-3: cubic-bezier(.70, 0, 1, 1); --ease-in-4: cubic-bezier(.90, 0, 1, 1); --ease-in-5: cubic-bezier(1, 0, 1, 1); --ease-out-1: cubic-bezier(0, 0, .75, 1); --ease-out-2: cubic-bezier(0, 0, .50, 1); --ease-out-3: cubic-bezier(0, 0, .3, 1); --ease-out-4: cubic-bezier(0, 0, .1, 1); --ease-out-5: cubic-bezier(0, 0, 0, 1); --ease-in-out-1: cubic-bezier(.1, 0, .9, 1); --ease-in-out-2: cubic-bezier(.3, 0, .7, 1); --ease-in-out-3: cubic-bezier(.5, 0, .5, 1); --ease-in-out-4: cubic-bezier(.7, 0, .3, 1); --ease-in-out-5: cubic-bezier(.9, 0, .1, 1); --fill-success: hsla(var(--green-700)); --fill-success-overlay: hsla(var(--green-500),.1); --fill-warning: hsla(var(--yellow-200)); --fill-warning-overlay: hsla(var(--yellow-500),.1); --fill-warning-dark: hsla(var(--orange-400)); --fill-danger: hsla(var(--red-600)); --fill-danger-overlay: hsla(var(--red-500),.1); --fill-info: hsla(var(--blue-600)); --fill-info-overlay: hsla(var(--blue-500),.1); --fill-info-overlay-light: hsla(var(--blue-500),.075); --fill-hover-overlay: hsla(var(--yellow-600),.05); --fill-focus-overlay: hsla(var(--yellow-500),.1); --fill-grey-overlay: hsla(var(--grey-500),.3); --fill-white-overlay: hsla(var(--grey-0),.2); --fill-0: hsla(var(--grey-0));/* white */ --fill-50: hsla(var(--grey-50));/* lightest block grey */ --fill-100: hsla(var(--grey-200));/* light grey */ --fill-1000: hsla(var(--grey-1000));/* black - to implement*/ --fill-950: hsla(var(--grey-950));/* darkest block grey*/ --fill-900: hsla(var(--grey-900));/* dark grey */ --fill-brand: 133, 44%, 42%; --line-success: hsla(var(--green-600)); --line-warning: hsla(var(--yellow-600)); --line-danger: hsla(var(--red-600)); --line-info: hsla(var(--blue-600)); --line-50: hsla(var(--grey-300)); --line-500: hsla(var(--grey-500)); --line-950: hsla(var(--grey-700)); --icon-success: hsla(var(--green-700)); --icon-warning: hsla(var(--orange-500)); --icon-danger: hsla(var(--red-600)); --icon-info: hsla(var(--blue-600)); --icon-light: hsla(var(--grey-400)); --icon-lightest: hsla(var(--grey-0));/* white */ --icon-g: hsla(var(--indigo-500)); --icon-i: hsla(var(--pink-500)); --icon-p: hsla(var(--teal-500)); --icon-a: hsla(var(--blue-500)); --icon-c: hsla(var(--purple-500)); --text-success: hsla(var(--green-800)); --text-success-light: hsla(var(--green-200)); --text-warning: hsla(var(--yellow-900)); --text-warning-light: hsla(var(--yellow-200)); --text-danger: hsla(var(--red-800)); --text-danger-light: hsla(var(--red-200)); --text-info: hsla(var(--blue-800)); --text-1000: hsla(var(--grey-1000)); /* black */ --text-950: hsla(var(--grey-700)); /* lightest inline grey */ --text-0: hsla(var(--grey-0));/* white */ --text-disabled: hsla(var(--grey-500));/* disabled text */ --text-link: hsla(var(--green-800)); accent-color: hsla(var(--green-500)); } /* resets from styles.css */ html {overflow-y:scroll;font-size:15px;interpolate-size: allow-keywords;} body{color:var(--text-1000);font-family:var(--font-sans);-webkit-text-size-adjust: none;line-height:1.6em;background:var(--fill-50);margin:0;} :root:has(ab-guest-layout) {--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size:18px;} *, *::before, *::after { box-sizing: border-box; } a { color: var(--text-link); text-decoration: underline; } a:hover, a:focus { text-decoration: none; color: var(--text-1000); } a, abbr {text-decoration-thickness: .2ex;text-underline-offset: .3ex;} :focus-visible { outline-width: 2px; outline-style: solid; outline-color: var(--text-link); } :host([hidden]){display:none!important;} img, video{max-width: 100%;} @media (prefers-reduced-motion: no-preference) { :focus-visible { transition: outline-offset 145ms var(--ease-2); } :where(:not(:active)):focus-visible { transition-duration: 0.15s; } } @media print { * { background: #FFF !important; color: black !important; text-shadow: none !important; filter:none !important;border-color:#000!important;outline-color: #000!important;} /* Black prints faster */ a, a:visited { color: #000 !important; } :root{accent-color: black;} } html, body, ab-app-layout, ab-guest-layout { min-height: 100vh; display: block; } :root{ --_headerOffset: 71px; } ab-app-layout, ab-guest-layout{background: var(--fill-0);} ab-app-layout .app_body{flex:1;min-width: 0;} @media only screen and (min-width: 1441px){ ab-app-layout .app_body, ab-app-layout footer.app_footer { margin-left:0; } } ab-guest-layout:not(.hydrated) {opacity: 0;} ab-guest-layout.hydrated { transform: translate3d(0,0,0); backface-visibility: hidden; perspective: 1000px; animation: fadeInUp .75s ease; } @media (prefers-reduced-motion: no-preference) { @keyframes fadeInUp { 0% { opacity:0; transform:translateY(10px) } 100% { opacity:1; transform:translateY(0) } } } @media only screen and (width >= 768px) { ab-app-layout:has(ab-app-nav[is-persistent]) { display: grid; grid-template-columns: 180px 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "appAlert appAlert" "appHeader appHeader" "appNav appMain" "appNav appFooter"; } } @media only screen and (width >= 1024px) { ab-app-layout:has(ab-app-nav[is-persistent]) { grid-template-columns: 240px 1fr; } } @media only screen and (min-width: 1441px) { ab-app-layout { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "appAlert appAlert" "appHeader appHeader" "appNav appMain" "appNav appFooter"; } ab-app-header{ top: 0; z-index: var(--layer-4); position: sticky; height:var(--_headerOffset); } ab-app-nav{ overflow-y: auto; top: var(--_headerOffset); position: sticky; height:calc(100vh - var(--_headerOffset)); } } ab-app-layout > ab-alert-block { grid-area: appAlert; display: block; min-height: 37px; text-align: center; } ab-app-header { grid-area: appHeader; background:#000; min-height:var(--_headerOffset); padding: var(--size-4); display: flex; gap: var(--size-4); align-items: center; font-size: 15px; flex-wrap: wrap; } ab-app-header[color="auto"] { background:var(--fill-0); border-bottom: 1px solid var(--line-50); } ab-app-header.has-search [slot="top-right-section"] * { flex: 1; } ab-app-header.has-search [slot="top-right-section"] div:first-child { white-space: nowrap; } ab-app-nav { grid-area: appNav; } @media only screen and (width < 768px) { [slot="top-menu-items"] { min-height: 56px; } ab-app-header.has-search [slot="top-right-section"] div:first-child { display: none; } } .ab-app-body, ab-page, ab-app-layout > .app_body /*support legacy*/{ grid-area: appMain; height:100% } .app-logo { display: block; width: 200px; height: 30px; margin:0; } .app-logo-amsplus { display: block; width: 126px; height: 30px; margin:0; } .app-logo-engageplus { display: block; height: 30px; margin:0; } @media only screen and (max-width: 1024px) { .app-logo { display: block; width: 34px; height: 30px; overflow: hidden; } .app-logo-amsplus { display: block; width: 34px; height: 30px; overflow: hidden; } } @media only screen and (max-width: 768px) { .app-logo-engageplus { display: block; width: 34px; height: 30px; overflow: hidden; } } ab-app-layout ab-app-footer { grid-area: appFooter; padding: var(--size-4); } ab-alert-block a, ab-help-block a {color:var(--text-1000);} ab-app-layout:not(.hydrated), ab-app-header:not(.hydrated), ab-app-nav:not(.hydrated), ab-page:not(.hydrated), ab-page-header:not(.hydrated), ab-nav-x:not(.hydrated), ab-nav-y:not(.hydrated) {visibility: visible;} ab-nav-x {min-height: 40px;display: block;background: var(--fill-50);} ab-nav-y, [slot="sectionLevelVerticalNav"]{ display: grid;height: 100%;} ab-page-header {min-height: 75px;display: block;background: var(--fill-50);padding: var(--size-6);} ab-page-header:not(.hydrated) [slot="headerEnd"] {float:right;} ab-page { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-rows: auto auto auto 1fr; grid-template-areas: "sectionAlert sectionAlert sectionAlert sectionAlert" "sectionVNav pageHeader pageHeader appSummary" "sectionVNav pageVNav sectionHNav appSummary" "sectionVNav pageVNav page appSummary"; } [slot="sectionLevelBannerAlert"]{ grid-area: sectionAlert; } [slot="sectionLevelVerticalNav"]{ grid-area: sectionVNav; } [slot="pageHeader"]{ grid-area: pageHeader; } [slot="horizontalNav"]{ grid-area: sectionHNav; } [slot="pageLevelVerticalNav"]{ grid-area: pageVNav; } #main-content{ padding: var(--size-6); grid-area: page; background: var(--fill-0); min-width: 0; } [slot="recordSummary"]{ grid-area: appSummary; display: block; width:300px; background:var(--fill-50); } .page-wrapper > :not([slot="sectionLevelBannerAlert"]):not([slot="sectionLevelVerticalNav"]):not([slot="pageHeader"]):not([slot="horizontalNav"]):not([slot="pageLevelVerticalNav"]):not(#main-content):not([slot="recordSummary"]):not(script){ display: contents; } .visuallyhidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .list-y { display: flex; flex-wrap: wrap; line-height: var(--font-lineheight-0); place-items: baseline; } .list-align_center{ place-content: center; } .list-gap_sm{ gap: var(--size-4); } .list-gap_md{ gap: var(--size-7); } .list-gap_lg{ gap: var(--size-9); } @media only screen and (max-width: 768px) { #nav-y:target { visibility: visible; transform: translateX(0); } @media (prefers-reduced-motion: no-preference){ #nav-y:target { transition:transform .25s var(--ease-3); } } } @media only screen and (max-width: 768px) { #app_nav:target { visibility: visible; transform: translateX(0); background-color: rgba(0,0,0,.5); } @media (prefers-reduced-motion: no-preference){ #app_nav:target { transition:transform .25s var(--ease-3); transition: background-color .25s var(--ease-3); } } } /* preloaders */ .skeleton-text-animated { display: inline-block; width: 100%; border-radius: .1em; line-height: var(--font-lineheight-0); user-select: none; pointer-events: none; position: relative; background: linear-gradient( to right, rgba(0, 0, 0, .065) 8%, rgba(0, 0, 0, .15) 18%, rgba(0, 0, 0, .065) 33% ); background-size: 800px 104px; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: shimmer; animation-timing-function: linear; } @media (prefers-reduced-motion: no-preference) { @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } } /* @media (prefers-color-scheme: dark) { :host(.skeleton-text-animated) {filter:invert(100%);} } */ @media print { ab-app-header, ab-button-icon{display: none!important;} ab-page{display: flex !important;flex-direction: column;} [slot="recordSummary"]{position: relative!important;} } /* temporary, we should update these utilities in main.min.css and remove this layer */ @layer reset, defaults, overrides; @layer overrides { /* higher specificity, but lower layer priority */ .text_medium_large{ font-size: 1.5rem!important; line-height: 1.6rem!important; margin-bottom: .25rem!important; } .text_medium{ font-size: 1.25rem!important; line-height: 1.3rem!important; margin-bottom: .25rem!important; } } table.ab-table { border-collapse: collapse; line-height: var(--font-lineheight-0); margin-bottom: var(--size-4); width:100%; position: relative; } .ab-table td, .ab-table th { border-bottom: 1px solid var(--line-50); padding: var(--size-2); } .ab-table tbody tr:last-child td, .ab-table tbody tr:last-child th { border-bottom:0; } .table-nowrap tbody td:not(:has(*)), .table-nowrap tbody th:not(:has(*)) { max-width: 23ch; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ab-table tbody{width:100%} table.ab-table:has(ab-list-checkbox) { margin-bottom: var(--size-9); } .ab-table th:has(ab-list-checkbox), .ab-table td:has(ab-list-checkbox) { padding:var(--size-1); width:28px; height:28px; line-height: 1; } .ab-table.sticky-th th:has(ab-list-checkbox){ z-index: var(--layer-3); } .ab-table tbody tr:has(ab-list-checkbox[checked]) td, .ab-table tbody tr:has(ab-list-checkbox[checked]) th {background-image: linear-gradient( var(--fill-warning-overlay), var(--fill-warning-overlay) ), linear-gradient( var(--fill-0), var(--fill-0) );} .ab-table th{text-align: left;} .ab-table thead th {background-color: var(--fill-50);font-weight: 600;border-right: 1px solid var(--line-50);cursor: pointer;} /*sortable column heads*/ .ab-table thead th[aria-sort], .ab-table thead th[aria-controls]:hover {background-color: var(--fill-100);} /*unsortable column heads*/ .ab-table thead:not(.no-sortable) th:not([aria-controls]){cursor:not-allowed;} .ab-table thead.no-sortable th{cursor:auto;} .ab-table thead tr th:first-child {border-top-left-radius: var(--radius-2);} .ab-table thead tr th:last-child {border-top-right-radius: var(--radius-2);border-right:0;} /* stripe td */ .stripe-row td, .stripe-row th{border-bottom: 0;} .stripe-row tbody tr:nth-child(2n + 2) th, .stripe-row tbody tr:nth-child(2n + 2) td{background-image:linear-gradient( var(--fill-info-overlay-light), var(--fill-info-overlay-light) ), linear-gradient( var(--fill-0), var(--fill-0) );} /* Darker striped rows when checkbox is checked */ .stripe-row tbody tr:nth-child(2n + 2):has(ab-list-checkbox[checked]) td, .stripe-row tbody tr:nth-child(2n + 2):has(ab-list-checkbox[checked]) th { background-image: linear-gradient( var(--fill-warning-overlay), var(--fill-warning-overlay) ), linear-gradient( var(--fill-info-overlay-light), var(--fill-info-overlay-light) ), linear-gradient( var(--fill-0), var(--fill-0) ); } /* sticky th */ .sticky-th thead { z-index: var(--layer-2); position: relative; } .sticky-th thead th { position: sticky; top: 0; border-top: 0; background-clip: padding-box; box-shadow: 0 1px 0 var(--line-50); } .sticky-th th, .sticky-th td { scroll-snap-align: start; background-clip: padding-box; border-right:1px solid var(--line-50); z-index: var(--layer-1); } .sticky-th td:last-child { border-right:0; } .sticky-th tbody th { position: sticky; top: 0; left: 0; font-weight: normal; background-clip: padding-box; background-color: var(--fill-0); box-shadow: 1px 0 0 var(--line-50); z-index: 0; } @media only screen and (width < 768px) { .sticky-th.table-rwd tbody th { position: relative; background-color: unset; } .stripe-row.table-rwd tbody tr:nth-child(2n+2) td, .stripe-row.table-rwd tbody tr:nth-child(2n+2) th { background-color: unset; background-image: unset; } } .sticky-th tbody { z-index: var(--layer-1); position: relative; } .sticky-th tbody tr:last-child th, .sticky-th tbody tr:last-child td { border-bottom: 0; } .sticky-th thead th.sticky-column-th { left: 0; z-index: var(--layer-2); box-shadow: 1px 1px 0 var(--line-50); border-right:0; } .ab-table .sticky-th th{border-bottom:0;} .ab-table.rwd-table:last-child { margin-bottom: 0; } @media only screen and (max-width: 768px) { .table-rwd, .table-rwd tbody { display: flex; flex-direction: column; gap: var(--size-3); } .table-rwd tr { border: 2px solid var(--line-50); border-radius: var(--radius-2); background: linear-gradient(90deg, var(--fill-50) 120px, var(--fill-0) 120px); display: flex; flex-direction: column; } .table-rwd td, .table-rwd th { padding: var(--size-2); } .table-rwd [data-tblColumn] { display: flex; } .table-rwd [data-tblColumn]::before { content: attr(data-tblColumn); font-weight: 700; width: 120px; flex: none; padding-right: var(--size-2); } .ab-table.table-rwd th:has(ab-list-checkbox), .ab-table.table-rwd td:has(ab-list-checkbox) { padding: var(--size-2); width: auto; height: auto; align-items: center; } .table-rwd thead { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; } .table-rwd td:last-child { border-bottom: 0; } :host(.component-rwd) .table-wrapper{ margin-top:var(--size-2); } @media only screen and (width < 768px) { :host(.component-rwd) .table-wrapper.scroll { max-height:none; scroll-snap-type: none; scroll-behavior: unset; } } }