h1 {
    color: #4D575F;	
	font-size: 150%;
	font-family: 'Open Sans', sans-serif;
	font-variant: small-caps;
	padding: 10px;	
	border-bottom: 1px solid #4D575F;
}
h2 {
    color: #ffffff;
	background-color: #4D575F;
	font-size: 125%;
	font-family: 'Open Sans', sans-serif;
	padding: 10px;
}
h3 {
    color: #4D575F;
	font-size: 115%;
	font-family: 'Open Sans', sans-serif;
	padding: 10px;
	border-bottom: 3px solid #008be1;
}
h4 {
    color: #008be1;
	font-size: 105%;
	font-family: 'Open Sans', sans-serif;
	padding-left: 10px;
}
body {	
	font-size: 13px;
	font-family: 'Open Sans', sans-serif;
}

a:link    { color: #56aa1c }  /* unvisited links */
a:visited { color: #56aa1c }  /* visited links   */
a:hover   { color: #468b17 }  /* user hovers     */

table {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}

th.simple, td.simple {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #4D575F;
    width: 1px; /* min width, actually: this causes the width to fit the content */
    white-space: wrap
}

td.simple:not(:last-child), td.simple:not(:last-child) {
 white-space: nowrap
}

th.simple:last-child, td.simple:last-child {
    width: 100%;/* well, it's less than 100% in the end, but it will stretch to fill the remaining space*/
}

th.row_column_header, td.row_column_header , th.row_header, td.row_header {
    padding: 8px;
    text-align: left;
    border: 1px solid #4D575F;
    height: 100%;
}

th.row_column_header, th.row_header  {
    font-weight: bold;
    background-color: #EEF0F3;
}

th.row_column_header_2 {
    padding: 8px;
    text-align: center;
    border: 1px solid #4D575F;
    font-weight: bold;
    background-color: #D7DBDE;
}
td.row_column_error_flag {
    padding: 0px;
    text-align: center;
    border: 1px solid #4D575F;  
    height: 100%;
}

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup: left*/
.popup .popuptext_left {
    visibility: hidden;
    width: 280px;
    background-color: #4D575F;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 10%;
    margin-left: -28px; /**/
	white-space: pre-line;
}
/* Popup left arrow */
.popup .popuptext_left::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 10%;
    margin-left: 0px;
    border-width: 5px;
    border-style: solid;
    border-color: #4D575F transparent transparent transparent;	
}

/* The actual popup: right */
.popup .popuptext_right {
    visibility: hidden;
    width: 280px;
    background-color: #4D575F;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    right: 10%;
    margin-right: -28px; /**/
	white-space: pre-line;
}
/* Popup right arrow */
.popup .popuptext_right::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 10%;
    margin-right: 0px;
    border-width: 5px;
    border-style: solid;
    border-color: #4D575F transparent transparent transparent;	
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

/* Table of contents */
#toc_container {
    background-color: #EEF0F3;
    border: 1px solid #4D575F;      
    margin-bottom: 1em;
    padding: 20px;   
}

.toc_title {
    font-weight: 700;
    text-align: left;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}