.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.status-hidden {
    display: none;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop
*/
html {
    /* This defines what 1rem is*/
    font-size: 62.5%; /*1 rem = 10px; 10px/16px = 62.5% */

    @media only screen and (max-width: 75em) { // width < 1200?
        font-size: 56.25%; /*1 rem = 9px, 9/16 = 50% */
    }

    @media only screen and (max-width: 56.25em) { /* width < 900 */
        font-size: 50%; /*1 rem = 8px, 8/16 = 50% */
    }

    @media only screen and (min-width: 112.5em) {
        font-size: 75%; /* 1rem = 12, 12/16 */
    }
}

body {
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    @media only screen and (max-width: 37.5em) { /* width < 600 */
        min-width: 60rem;
    }

    /*font-size: 16px;*/
    /* line-height: 1.7;*/
    /* color: #333; */
}

    /*@media only screen and (max-width: 56.25em) {
        padding: 0;
    }*/
}
.header {
    /*background: linear-gradient(to right, #08b, #eee);*/
    border-bottom: 1px solid rgba(200, 200, 200, 0.6);
}
.title-bar {
    background: #396A92;
    border: 1px solid #396A92;
}
.nav-bar {
    margin:0;
    background-color:#9AB4CB;
    border: none;
}

.main-background-light {
    background: rgba(191, 221, 223, 0.6);
}

.tb {
    border : 2px solid purple;
}



.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
/*
<span class="material-symbols-outlined">
logout
</span>
*/

#debug {
	border: 1px solid #000;
	background-color: white;
	/* clear: both;*/
	width: 30em;
	height: 20em;
	margin: auto auto auto 2rem;
	padding: 0.1em;
	overflow:  scroll;
	position: fixed;
	bottom: 2rem;
	left: 6rem;
	z-index: 10;
	display: none; /*block;*/
}
.statement-panel, .company-list-table{
  overflow: auto;
  margin: 0.5rem auto;
}
.metrics-panel {
    margin: 0.5rem auto;
    display: block;
}
.company-list-table {
    max-height: 71vh;
}
.statement-panel {
    max-height: 74vh;
}
.metrics-panel-table {
    max-height: 33vh;
}
.company-list-panel p.panel-heading{
    position: sticky;
    left: 0;
    right: 0;
}
/*.statement-css th, .company-list-table th,
.statement-css td. .company-list-table td {
    background: white;
}*/

.statement-css thead th:first-child,
.statement-css tbody th:first-child,
.company-list-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2; /* 2 */
  min-width: 15rem;
  max-width: 30vw;
}
/*.statement-css tbody th:first-child {
  overflow: scroll;
}*/
.statement-css thead th,
.company-list-table thead th {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
}

.statement-css tbody td {
    min-width: 8em;
}

.statement-css thead th,
.company-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.statement-css caption {
    position: sticky;
    padding-left: 25%;
    text-align: left;
}

.statement-css tbody th,
.company-list-table tbody th {
    /*word-wrap: break-word;
    overflow-wrap: break-word;    max-width: 15rem;*/
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: white;
}

.statement-css tbody td {
    text-align: right;

}

table.statement-css thead tr, table.statement-css tbody tr {
    border-bottom: 0.2px dotted #ccc;
}

table.statement-css td,
table.statement-css th {
    padding: 0.5rem;
    margin: 0.5rem;
}
.company-list-table thead th:nth-child(even),
.company-list-table tbody td:nth-child(even),
table.statement-css thead th:nth-child(even),
table.statement-css tbody td:nth-child(even)
{
    background-color: #fafafa;
}

table.statement-css thead th:nth-child(odd),
table.statement-css tbody td:nth-child(odd)
{
    background-color: white;
}

.statement-item {
    /* display: flex; //inline-block; */
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
}

.agg-row-top {
    border-top: 0.2px solid #ccc;
}

.site-title {
    margin: 0.5rem auto 0.5rem auto;
    padding: 0.5rem;
    width: 20rem;
}
.search-component {
    padding-left: 10rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.missing-message {
    max-width: 40rem;
    margin-left: 10rem;
    margin-top: 0.5rem;
}
.margin-center {
    margin-left: auto;
    margin-right: auto;
}
/* .company-list-table { */
/*     max-height: 80vh; */
/* } */

.company-list-table thead tr th {
    text-align: center !important;
}
.company-list-table thead tr th div {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: 100%;
}
.company-list-table thead th div {
    width: 100%;
}
.company-list-table thead th div button {
    width: 100%;
}

.company-list-table tbody tr td:not(:first-child) {
    text-align: right;
}
.stmt-type-dropdown {
    left: 30%;
    transform: translateX(-30%);
}
.material-left-margin {
    margin-left: 1rem;
}

.progress-bar-container {
    z-index: 100;
    width: 30%;
    display: none;
}
.gdpr-panel {
    position: fixed;
    z-index: 40;
    bottom: 0px;
    width: 100vw;
}

.disclaimer {
    max-height: 8rem;
    overflow: scroll;
}

.exp-icon {
    cursor: pointer;
}

.metrics-chart {
    width: 100%;
    height: 50vh;
    @media only screen and (max-height: 37.5em) {
        height: 100vh;
    }
}
.metrics-chart-modal {
    width: 60vw;
    height: 60vh;
    @media only screen and (max-height: 37.5em) {
        height: 80vh;
        margin-top: 0.5rem;
    }
    @media only screen and (max-width: 37.5em) {
        width: 80vw;
        margin-left: 0.5rem;
    }
}
.metrics-chart-modal p {
    max-width: 95%;
}

.text-center {
    text-align: center;
}
td.doc {
    text-decoration: underline;
    cursor: pointer;
}


.modalDoc {
    z-index: 110;
    top: 10rem;
    left: 10rem;
    width: 50rem;
    height: 20rem;
    position: fixed;
    background-color: white;
    border: 0.5px solid #BBB;
    overflow: auto;
}

.plus-minus {
    float: left;
    margin-right: 2rem;
}
.dateAscDescHeadContainer {
    float: right;
    padding: 0px;
    margin: 0.1rem;
}
.dateAscDescHeadContainerMetricesUI {
    float: left;
    padding: 0px;
    margin: 0.1rem;
}
.parentTopBottomHeadContainer {
    float: left;
    padding: 0px;
    margin: 0.1rem;    
}