pygsti_dataviz.css

.notapplicable {
    color: DarkSlateBlue;
    font-weight: bold;
    font-size: 20pt;
}    

.successmsg {
    color: green;
    font-weight: bold;
    font-style: normal;
}

.successmsg2 {
    color: green;
    font-weight: normal;
    font-style: normal;
}

.failmsg {
    color: red;
    font-style: italic;
}

.errorbar {
    color: #0000A0;
}
th .errorbar {
    color: #ADD8E6;
}

.nmerrorbar {
    color: red;
}

/* Plotly mode-bar styles: only show download button */
.modebar {
    /* display: none; */
}
.modebar-group {
    margin-left: 0px !important; /* removes space btwn bar buttons */
}
.modebar-btn {
    display: none;
}
.modebar-btn[data-title="Download plot as a png"] {
    display: inline;
}
.modebar-btn[data-title="Download PDF"] {
    display: inline;
}
.modebar-btn[data-title="Download python pickle"] {
    display: inline;
}
.modebar-btn[data-title="Reset axes"] {
    display: inline;
}




.katex {
    font-size: 1em !important;
}

.dataTable td, .dataTable th {
	/* appearance */
	border: 2px solid #333;
	
	/* size */
	padding: 5px;
	}

.dataTable {
        /* text */
        font-family: "Computer Modern Serif","times new roman",serif;
	/*Helvetica, Arial, sans-serif;*/

	/* no space between cells */
	border-spacing: 0px;
	border-collapse: collapse;

	/* auto-size columns & center table in it's parent div */
	width: auto;
	margin: auto;
	margin-top: 5px;
	max-width: 100%;
	overflow: auto; /*hidden; - this hides content sometimes - needed?  */
        }

/*.dataTable tr {
    width: 20%;
}*/

.dataTable a {
	/* link text */
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #000000;
	}
.dataTable a:hover { color: #0000FF; }

.dataTable tbody tr td {
	/* appearance */
	background-color: #ffffff;
		
	/* text */
	color: #262c31;

	/* font */
	font-family: "Computer Modern Serif","times new roman",serif;

	/* font-size: 90%; */
	font-size: 10pt;

	/* text alignment */
	text-align: center;
	vertical-align: middle;
	}

.dataTable tbody tr.odd td {
	/* appearance */
	background-color: #d6e0ef;
	}

.dataTable thead tr th,
.dataTable tfoot tr td {
	/* appearance */
        background-color: #333;	
		
	/* text */
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	}

.dataTableHeading {
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
}

.dataTableHeading > a {
        text-decoration: none;
	color: #333;
}

.dataTableHeading > a:hover {
	color: #00CDF0;
}

	
	
/* For now, also include plotly style additions here too */
.plotly-graph-div {
    margin: auto; /*to center plots*/
}

.pygsti-wsoutput-group {
    display: inline-block; /* shrink to fit contents for resizable */
    max-width: 100%; /* so we can set width as a "desired" width, constrained by parent width */
    vertical-align: top; /* so divs in table cells align to TD properly */
}

/* maximum height for fluid report figures */
figure > div.pygsti-wsoutput-group {
    vertical-align: top; /* so multiple groups (e.g. tables) align at top */
    max-height: 10000px;
}

.abswrap {
  position: absolute;
  left: 0;
  top: 0;
  text-align: left;
}

.relwrap {
  position: relative;
  left: 0; top:0 /*-0.51em;*/
  /*height: inherit; from td*/
}

/* relwrap elements typically have height=0 b/c they only contain an abswrap
   element (which doesn't count) - so setting top to 100percent puts the
   relwrap at the bottom of it's containing div, then setting bottom=0 in
   abswrap aligns the bottom of the absolute-positioned div with the height=0
   relwrap element at the bottom of the containing div, as desired.
*/
.bot_abswrap {
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: left;
}
.bot_relwrap {
  position: relative;
  left: 0; top:100%;
  /*height: inherit; from td*/
}


.plotContainingTD {
    text-align: left !important;
    vertical-align: top !important;
}

.containerAmidstResize {
    background-image: url('https://raw.githubusercontent.com/pyGSTio/pyGSTi/gh-pages/pyGSTi_icon.png'),
    url('offline/images/pyGSTi_icon.png');
    background-size: 50% 50%;
    background-position: center, center;
    background-repeat: no-repeat;
}

.containerAmidstResize div.plotly-graph-div {
    visibility: hidden;
}

.pygBackground {
    background-image: url('https://raw.githubusercontent.com/pyGSTio/pyGSTi/gh-pages/pyGSTi_icon.png'),
    url('offline/images/pyGSTi_icon.png');
    background-size: 50% 50%;
    background-position: center, center;
    background-repeat: no-repeat;
}

.switch_container {
    margin: 2px;
}

.switch_container span {
    float: left;
    font-size: 9pt;
}

.switch_container legend {
    /* float: left; */
    padding: 5px;
    font-size: 9pt;
    color: white;
}

.switch_container label {
    float: left;
    padding: 5px;
    font-size: 9pt;
}

.switch_container .pygsti-slider-label {
    margin-left: 1.5em; /* to match slider */
}

.sidenav .switch_container label {
    color: white;
}

.sidenav .switch_container label.ui-checkboxradio-label {
    color: black;
}

.ui-selectmenu-menu .ui-menu-item {
    font-size: 8pt; /* combo-box options text (select text governed by "span" above) */
}

.ui-selectmenu-button.ui-button {
    width: auto; /* make non-sidebar combo boxes adjust width to fit contents */
}

.switch_container .ui-slider {
    width: 80%;
    float: left;
}

.switch_container .ui-slider-handle {
    font-size: 10pt;
}

fieldset {
    border: 0px none;
    text-align: left; /* for button groups */
    padding: 3px 10px 3px 10px; /* reduce default vertical spacing */
}

/* Plotly hovertext size */
.hovertext text {
    font-size: 10px !important;
}

/* Download links beneath tables */
.dlLink {
    font-size: 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #000000;
    float: left;
}


ul.collapsibleList, .collapsibleList ul {
  list-style: none;
  margin: 2px;
  /*margin-left: 0;*/
  padding-left: 0;
}


.collapsibleList li:before {
  content: "\0A0 \0A0 \0A0 \0A0 \0A0";
  padding-right: 5px;
}

.collapsibleList li {
  padding-left: 1em;
  text-indent: -1em;
  cursor : auto;
  font-size: 14px;
}

.collapsibleList li.collapsibleListOpen:before {
  content: "\25BC \020";
  padding-right: 5px;
}
.collapsibleList li.collapsibleListOpen{
  cursor           : pointer;
}

.collapsibleList li.collapsibleListClosed:before {
  content: "\25BA \020";
  padding-right: 5px;
}
.collapsibleList li.collapsibleListClosed{
  cursor           : pointer;
}