body {
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

/* Table Styles */

table,
tbody {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif; /*new */
}

.block-table {
    border-collapse: separate !important; /*new*/
}

.block-table,
.block-table > tbody,
.block-table > tbody > tr,
.block-table > tbody > td {
    display: block;
}

.block-table,
.block-table > tbody,
.block-table > tbody > tr {
    width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;

    margin: 0;
    padding: 0;
    overflow-x: hidden;

    border-collapse: collapse;
    border-spacing: 0;

    font-size: 13px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);

    display: table;
}

.table,
.table tbody,
.table tr,
.table td {

}

.table tbody {
    width: 100%;
    overflow-x: auto;
}

tr:after {
    content: "";
    display: table;
    clear: both;
}

td.half-width {
    display: table;
    width: 50%;
    max-width: 50%;
    overflow-x: auto;
    padding: 10px;
    float: left;
}

td.full-width {
    display: table;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 10px;
}

.table > tbody > tr > th,
.table > tbody > tr > td {
    padding: 10px;
    vertical-align: middle;
    border: 1px solid #e2e3e3;
}

body.dark-theme .table > tbody > tr > th,
body.dark-theme .table > tbody > tr > td {
    border-color: #666; /*$c-dt-table-border*/
}

.table tbody th {
    color: #434446;
}

body.dark-theme .table tbody th {
    color: #fff; /*$c-dt-table-header-text*/
}

.table .table-head > th,
.table .table-head > td,
.table th.table-head /*new*/
{
    border: 1px solid #cccdcd;
    background-color: #e2e3e3;
    text-align: left;
    color: #434446; /*new*/
    font-weight: bold; /*new*/
}

body.dark-theme .table .table-head > th,
body.dark-theme .table .table-head > td,
body.dark-theme .table th.table-head {
    background-color: #282828; /*$c-dt-table-background*/
    border-color: #666; /*$c-dt-table-border*/
    color: #fff; /*$c-dt-table-header-text*/
}

.table tbody > tr > td {
    color: #707173;
}

body.dark-theme .table tbody > tr > td {
    color: #cccdcd; /*$c-dt-table-text*/
}

.table-striped > tbody > tr:nth-child(even) {
    background-color: #f9f9f9;
}

body.dark-theme .table-striped > tbody > tr:nth-child(even) {
    background-color: #3d3d3d; /*lighten($c-dt-table-background, 5%);*/
}

.footnote {
    font-size: 12px;
    color: #8d8d8f;
    padding: 0.25em 2em;
}

/* ---------------- new ---------------------*/
.table th.crosstab-header {
    text-align: center;
}

.table tbody > tr > td.crosstab-value {
    text-align: right;
}

.table tbody th.to-hide {
    padding: 0;
}

a {
    text-decoration: none;
    color: #707173;
}

body.dark-theme a {
    color: #cccdcd; /*$c-dt-table-text*/
}

.well {
    border: 1px solid #e2e3e3;
    border-radius: 2px;
    color: #707173;
    display: inline-block;
    line-height: 16px;
    padding: 7px 10px;
}

body.dark-theme .well {
    color: #cccdcd; /*$c-dt-table-text*/
}

.well.no-border{
    border-width: 0px;
}

.box-shadow {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

.prevent-shadow {
    box-shadow: none;
}

.valign-bottom {
    vertical-align: bottom !important;
}

.valign-top {
    vertical-align: top !important;
}

.bottom-spacing {
    margin-bottom: 28px !important;
}

.headline {
    color: #222326;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
}

body.dark-theme .headline {
    color: #fff;
}

.js-reorder-left, .js-reorder-right {
}

.js-reordered-left {
    float: left !important;
}

.js-reordered-right {
    float: right !important;
}

.table > tbody > tr > td.cell-as-link {
    padding: 0;
}

td.cell-as-link a {
    padding: 10px;
    display: block;
}

.info_box {
    margin: 10px 0;
    border: 1px solid #e2e3e3;
    color: #338dc7;
    padding: 15px 30px;
    font-size: 14px;
}

body.dark-theme .info_box {
    border: 1px solid #666;
}

/*table-dark-theme displays table in dark mode for cases when body.dark-theme can't be set.
 For example $iframe.contents().find('body').addClass('dark-theme') in 'dark-theme' CoreInitializer not working when iframe uses different domain due to XSS protection
 From https://api.jquery.com/contents/:
   The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.
 Related: GWUA-5373
 */
.table-dark-theme > tbody > tr > th,
.table-dark-theme > tbody > tr > td {
    border-color: #666; /*$c-dt-table-border*/
}

.table-dark-theme tbody th {
    color: #fff; /*$c-dt-table-header-text*/
}

.table-dark-theme .table-head > th,
.table-dark-theme .table-head > td,
.table-dark-theme th.table-head {
    background-color: #282828; /*$c-dt-table-background*/
    border-color: #666; /*$c-dt-table-border*/
    color: #fff; /*$c-dt-table-header-text*/
}

.table-dark-theme tbody > tr > td {
    color: #cccdcd; /*$c-dt-table-text*/
}

.table-dark-theme.table-striped > tbody > tr:nth-child(even) {
    background-color: #3d3d3d; /*lighten($c-dt-table-background, 5%);*/
}
