@charset "UTF-8"; .tablesaw { width: 100%; max-width: 100%; empty-cells: show; border-collapse: collapse; border: 0; padding: 0; } .tablesaw.tablesaw-swipe .tablesaw-cell-persist { border-right: 0; } .tablesaw * { box-sizing: border-box; } :root { --button-text: $color-primary-500; --button-selected-background: $color-primary-600; --button-checkbox-selected-background: $color-primary-800; --button-selected-shadow: rgba($color-primary-400,.45); --button-interaction-shadow: $color-primary-400; } .tablesaw-btn { border: 1px solid #e4eaec; border-radius: .25em; background: none; box-shadow: 0 1px 0 white; color: #76838f; cursor: pointer; display: inline-block; margin: 0; padding: .5em .85em .4em .85em; position: relative; text-align: center; text-decoration: none; text-transform: capitalize; -webkit-appearance: none; -moz-appearance: none; appearance: none; } a.tablesaw-btn { color: var(--button-text); } .tablesaw-btn:hover { text-decoration: none; } /* Default radio/checkbox styling horizonal controlgroups. */ .tablesaw-btn:active { background-color: #ddd; } @supports (box-shadow: none) { .tablesaw-btn:focus { background-color: #fff; outline: none; } .tablesaw-btn:focus { box-shadow: 0 0 2px var(--button-interaction-shadow) !important; } } .tablesaw-btn-select select { background: none; border: none; display: inline-block; position: absolute; left: 0; top: 0; margin: 0; width: 100%; height: 100%; z-index: 2; min-height: 1em; opacity: 0; color: transparent; } .tablesaw-btn select option { background: #fff; color: #000; } .tablesaw-btn { display: inline-block; width: auto; height: auto; position: relative; top: 0; } .tablesaw-btn.btn-small { font-size: 1.0625em; line-height: 19px; padding: .3em 1em .3em 1em; } .tablesaw-btn.btn-micro { font-size: .8125em; padding: .4em .7em .25em .7em; } .tablesaw-btn-select { padding-right: 1.5em; text-align: left; display: inline-block; color: #76838f; padding-right: 2.5em; min-width: 7.25em; text-align: left; } .tablesaw-btn-select:after { position: absolute; display: inline-block; font-family: "Web Icons"; -webkit-font-feature-settings: normal; font-feature-settings: normal; -webkit-font-kerning: auto; font-kerning: auto; -webkit-font-language-override: normal; font-language-override: normal; font-size-adjust: none; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: 400; line-height: 1; text-rendering: auto; background: transparent; background: none; content: ""; padding: 0; left: auto; right: auto; margin: 0 5px 0; top: 10px; bottom: 0; width: 1.8em; } .tablesaw-btn-select.btn-small:after, .tablesaw-btn-select.btn-micro:after { background: none; box-shadow: none; border-left-width: 0; } /* Column navigation buttons for swipe and columntoggle tables */ .tablesaw-advance .tablesaw-btn { -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; text-shadow: 0 1px 0 #fff; border-radius: 0.215rem; } .tablesaw-advance .tablesaw-btn.btn-micro { font-size: .8125em; padding: .3em .7em .25em .7em; margin-top: 8px; margin-bottom: 5px; } .tablesaw-advance a.tablesaw-nav-btn:first-child { margin-left: 0; } .tablesaw-advance a.tablesaw-nav-btn:last-child { margin-right: 0; } .tablesaw-advance a.tablesaw-nav-btn { display: inline-block; overflow: hidden; background-position: 50% 50%; margin-left: .25em; margin-right: .25em; position: relative; font-family: "Web Icons"; -webkit-font-feature-settings: normal; font-feature-settings: normal; -webkit-font-kerning: auto; font-kerning: auto; -webkit-font-language-override: normal; font-language-override: normal; font-size: inherit; font-size-adjust: none; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: 400; line-height: 1; text-rendering: auto; } .tablesaw-advance a.tablesaw-nav-btn.down:before { content: ""; } .tablesaw-advance a.tablesaw-nav-btn.up:before { content: ""; } .tablesaw-advance a.tablesaw-nav-btn.left:before { content: ""; } .tablesaw-advance a.tablesaw-nav-btn.right:before { content: ""; } .tablesaw-advance a.tablesaw-nav-btn.disabled { opacity: .25; cursor: default; pointer-events: none; } /* Table Toolbar */ .tablesaw-bar { clear: both; } .tablesaw-bar * { box-sizing: border-box; } .tablesaw-bar-section { float: left; } .tablesaw-bar-section label { font-size: .875em; padding: .5em 0; clear: both; display: block; color: #76838f; margin-right: .5em; text-transform: uppercase; } .tablesaw-btn, .tablesaw-enhanced .tablesaw-btn { margin-top: .5em; margin-bottom: .5em; } .tablesaw-btn-select, .tablesaw-enhanced .tablesaw-btn-select { margin-bottom: 0; } /* TODO */ .tablesaw-bar .tablesaw-bar-section .tablesaw-btn { margin-left: .4em; margin-top: 0; text-transform: uppercase; border: none; box-shadow: none; background: transparent; font-size: 1em; padding-left: .3em; vertical-align: baseline; } .tablesaw-bar .tablesaw-bar-section .btn-select { min-width: 0; } .tablesaw-bar .tablesaw-bar-section .btn-select:after { padding-top: 0; } .tablesaw-bar .tablesaw-bar-section select { color: #76838f; text-transform: none; background: transparent; } .tablesaw-bar-section ~ table { clear: both; } .tablesaw-bar-section .a11y-sm { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; width: 1px; } @media (min-width: 24em) { .tablesaw-bar-section .a11y-sm { clip: none; height: auto; width: auto; position: static; overflow: visible; } } .tablesaw th, .tablesaw td { padding: .5em .7em; text-align: left; vertical-align: middle; } .tablesaw thead th { text-align: left; } /* Table rows have a gray bottom stroke by default */ .tablesaw-row-border tr { border-bottom: 1px solid #dfdfdf; } /* Zebra striping */ .tablesaw-row-zebra tr:nth-child(2n) { background-color: #f8f8f8; } .tablesaw caption { text-align: left; margin: .59375em 0; } .tablesaw-swipe .tablesaw-cell-persist { border-right: 2px solid #e4e1de; } .tablesaw-swipe-shadow .tablesaw-cell-persist { border-right-width: 1px; } .tablesaw-swipe-shadow .tablesaw-cell-persist { box-shadow: 3px 0 4px -1px #e4e1de; } /* Styles for the table stack mode */ .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: none; } /* Mobile first styles: Begin with the stacked presentation at narrow widths */ /* Support note IE9+: @media only all */ @media only all { /* Show the table cells as a block level element */ .tablesaw-stack { clear: both; } .tablesaw-stack td, .tablesaw-stack th { text-align: left; display: block; } .tablesaw-stack tr { clear: both; display: table-row; } /* Make the label elements a percentage width */ .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: inline-block; padding: 0 .6em 0 0; width: 30%; } /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */ .tablesaw-stack th .tablesaw-cell-label-top, .tablesaw-stack td .tablesaw-cell-label-top { display: block; padding: .4em 0; margin: .4em 0; } .tablesaw-cell-label { display: block; } /* Avoid double strokes when stacked */ .tablesaw-stack tbody th.group { margin-top: -1px; } /* Avoid double strokes when stacked */ .tablesaw-stack th.group b.tablesaw-cell-label { display: none !important; } } @media (max-width: 767.98px) { /* Table rows have a gray bottom stroke by default */ .tablesaw-stack tbody tr { display: block; width: 100%; } .tablesaw-stack thead td, .tablesaw-stack thead th { display: none; } .tablesaw-stack tbody td, .tablesaw-stack tbody th { display: block; float: left; clear: left; width: 100%; } .tablesaw-cell-label { vertical-align: top; } .tablesaw-cell-content { display: inline-block; max-width: 67%; } .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label, .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content { display: block; width: 100%; max-width: 100%; padding: 0; } .tablesaw-stack td:empty, .tablesaw-stack th:empty { display: none; } } @media (min-width: 768px) { .tablesaw-stack tr { display: table-row; } /* Show the table header rows */ .tablesaw-stack td, .tablesaw-stack th, .tablesaw-stack thead td, .tablesaw-stack thead th { display: table-cell; margin: 0; } /* Hide the labels in each cell */ .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: none !important; } } .tablesaw-fix-persist { table-layout: fixed; } @media only all { /* Unchecked manually: Always hide */ .tablesaw-swipe th.tablesaw-cell-hidden, .tablesaw-swipe td.tablesaw-cell-hidden { display: none; } } /* Styles for the table columntoggle mode */ .tablesaw-overflow { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* More in skin.css */ } .tablesaw-overflow > .tablesaw { margin-top: 2px; /* sortable focus rings are clipped */ } /* Used for a11y text on button: "Columns" */ .tablesaw-columntoggle-btn span { text-indent: -9999px; display: inline-block; } .tablesaw-columntoggle-btnwrap { position: relative; /* for dialog positioning */ } .tablesaw-columntoggle-btnwrap .dialog-content { padding: .5em; } .tablesaw-columntoggle tbody td { line-height: 1.5; } /* Remove top/bottom margins around the fieldcontain on check list */ .tablesaw-columntoggle-popup { display: none; } .tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup { display: block; position: absolute; top: 2em; right: 0; background-color: #fff; padding: .5em .8em; border: 1px solid #e4eaec; box-shadow: 0 1px 2px #e4eaec; border-radius: 0.215rem; z-index: 1; } .tablesaw-columntoggle-popup fieldset { margin: 0; } /* Hide all prioritized columns by default */ @media only all { .tablesaw-columntoggle th.tablesaw-priority-6, .tablesaw-columntoggle td.tablesaw-priority-6, .tablesaw-columntoggle th.tablesaw-priority-5, .tablesaw-columntoggle td.tablesaw-priority-5, .tablesaw-columntoggle th.tablesaw-priority-4, .tablesaw-columntoggle td.tablesaw-priority-4, .tablesaw-columntoggle th.tablesaw-priority-3, .tablesaw-columntoggle td.tablesaw-priority-3, .tablesaw-columntoggle th.tablesaw-priority-2, .tablesaw-columntoggle td.tablesaw-priority-2, .tablesaw-columntoggle th.tablesaw-priority-1, .tablesaw-columntoggle td.tablesaw-priority-1, .tablesaw-columntoggle th.tablesaw-priority-0, .tablesaw-columntoggle td.tablesaw-priority-0 { display: none; } } .tablesaw-columntoggle-btnwrap .dialog-content { top: 0 !important; right: 1em; left: auto !important; width: 12em; max-width: 18em; margin: -.5em auto 0; } .tablesaw-columntoggle-btnwrap .dialog-content:focus { outline-style: none; } /* Preset breakpoints if "" class added to table */ /* Show priority 1 at 320px (20em x 16px) */ @media (min-width: 20em) { .tablesaw-columntoggle th.tablesaw-priority-1, .tablesaw-columntoggle td.tablesaw-priority-1 { display: table-cell; } } /* Show priority 2 at 480px (30em x 16px) */ @media (min-width: 30em) { .tablesaw-columntoggle th.tablesaw-priority-2, .tablesaw-columntoggle td.tablesaw-priority-2 { display: table-cell; } } /* Show priority 3 at 640px (40em x 16px) */ @media (min-width: 40em) { .tablesaw-columntoggle th.tablesaw-priority-3, .tablesaw-columntoggle td.tablesaw-priority-3 { display: table-cell; } .tablesaw-columntoggle tbody td { line-height: 2; } } /* Show priority 4 at 800px (50em x 16px) */ @media (min-width: 50em) { .tablesaw-columntoggle th.tablesaw-priority-4, .tablesaw-columntoggle td.tablesaw-priority-4 { display: table-cell; } } /* Show priority 5 at 960px (60em x 16px) */ @media (min-width: 60em) { .tablesaw-columntoggle th.tablesaw-priority-5, .tablesaw-columntoggle td.tablesaw-priority-5 { display: table-cell; } } /* Show priority 6 at 1,120px (70em x 16px) */ @media (min-width: 70em) { .tablesaw-columntoggle th.tablesaw-priority-6, .tablesaw-columntoggle td.tablesaw-priority-6 { display: table-cell; } } @media only all { /* Unchecked manually: Always hide */ .tablesaw-columntoggle th.tablesaw-cell-hidden, .tablesaw-columntoggle td.tablesaw-cell-hidden { display: none; } /* Checked manually: Always show */ .tablesaw-columntoggle th.tablesaw-cell-visible, .tablesaw-columntoggle td.tablesaw-cell-visible { display: table-cell; } } .tablesaw-columntoggle-popup .btn-group > label { display: block; padding: .2em 0; white-space: nowrap; cursor: default; } .tablesaw-columntoggle-popup .btn-group > label input { margin-right: .8em; } .tablesaw-sortable-head { position: relative; vertical-align: top; } /* Override */ .tablesaw .tablesaw-sortable-head { padding: 0; } .tablesaw-sortable-btn { min-width: 100%; color: inherit; background: transparent; border: 0; /* same as cell padding in tables.css */ padding: .5em .7em; text-align: inherit; font: inherit; text-transform: inherit; } .tablesaw-sortable-arrow:after { display: inline-block; width: 10px; height: 14px; content: " "; margin-left: .3125em; } .tablesaw-sortable-ascending .tablesaw-sortable-arrow:after, .tablesaw-sortable-descending .tablesaw-sortable-arrow:after { font-family: "Web Icons"; -webkit-font-feature-settings: normal; font-feature-settings: normal; -webkit-font-kerning: auto; font-kerning: auto; -webkit-font-language-override: normal; font-language-override: normal; font-size: inherit; font-size-adjust: none; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: 400; line-height: 1; text-rendering: auto; } .tablesaw-sortable-ascending .tablesaw-sortable-arrow:after { content: ""; } .tablesaw-sortable-descending .tablesaw-sortable-arrow:after { content: ""; } .tablesaw-advance { float: right; } .tablesaw-advance.minimap { margin-right: .4em; } .tablesaw-advance-dots { float: left; margin: 0; padding: 0; list-style: none; } .tablesaw-advance-dots li { display: table-cell; margin: 0; padding: .4em .2em; } .tablesaw-advance-dots li i { width: 4px; height: 4px; background: #a3afb7; border-radius: 100%; display: inline-block; } .tablesaw-advance-dots-hide { opacity: .3; cursor: default; pointer-events: none; } .tablesaw-bar .tablesaw-columntoggle-popup .btn-group { display: inline-block; } .tablesaw tfoot th, .tablesaw thead th { font-weight: 500; }