@charset "utf-8";
html {box-sizing:border-box; overflow-x:hidden; overflow-y:scroll }
*,*:before,*:after {box-sizing:inherit }
* {margin:0; padding:0 }

html,body {font-family:"Arial",serif; font-size:14px; line-height:1.5 }
body {text-align:left }
ul {list-style-type:disc }
ul, ol {padding:0 0 .8em 1.5em }
li {padding:.3em .2em .5em .2em }
li ul, li ol {padding-bottom:0 }
ol li { padding-left:1em; }

hr {margin-bottom: 1em }
h1,h2,h3,h4,h5 {font-weight:400 }
h1 {font-size:1.9em}
h2 {font-size:1.8em; padding-bottom:.3em }
h3 {font-size:1.2em; padding-bottom:1.4em }
h4 {font-size:1.7em; padding-top:1.6em; padding-bottom:.8em }
h5 {font-size:1.3em; padding-top:2em; padding-bottom:1em }

img {vertical-align:middle }
p {padding:.5em .2em 0 .2em; text-align:justify; text-indent:2.5em }
.about-text { padding-bottom: 1.9em; margin-top:-0.7em  }
table {border-collapse:collapse }

fieldset {padding:1.5em 2em 2.5em 2em; background:#f9f9f9; margin-top:1.5em }
fieldset legend {font-size:1.4em }

button {padding:.6em 1.5em .6em 1.5em; margin:.3em; font-size:1.2em; }
select {padding:.5em 1em .5em 1.5em; }

input {width:4.5em;	padding:.3em; margin:.2em;	text-align:center }
.input-wide {width:5.5em; margin-left:-.8em; }

#header {padding:.5em .3em 1em .3em; width:100%; color:#1e1e1e; text-align:center }
.logo {max-height:5.4em; max-width:12.5% }
.logo img {max-height:5.4em; max-width:100%; margin:.2em 0}

.footer {position:fixed; z-index:999; top:100%; padding:.3em 1.5em .2em 1.5em; width:100%; background-color:#cacaca; font-size:11px }
.w3c-validator {width:auto; height:1.7em }
.row:after {content:""; display:table; clear:both }
.sticky {position:sticky; top:0; width:100%; z-index:999 }
.menu-top {overflow:hidden; background-color:#333; font-size:1.1em }

.menu-top a{
    float:left;
    display:block;
    color:#f2f2f2;
    text-align:center;
    padding:.7em 1.2em;
    text-decoration:none;
}
.menu-top a:hover, .menu-top a.active, .menu-left a.active {background-color:#ccc;	color:#1e1e1e }
.breadcrumbs{
    background-color:#fff;
    font-size:1.1em;
    padding:.5em;
    border-bottom:1px dotted lightgrey;
    min-height:2.7em
}
.breadcrumbs-separator {font-size:1.1em; padding:0 .5em }
.bold {font-weight:700 }
.menu-label {text-decoration:none; font-weight:700; color:#1e1e1e }
.menu-left div {padding:.5em; padding-left:1.2em; border-radius:.3em }
.menu-left div.selected {font-weight:bold }

div.submenu {padding-left:2.5em }
div.subsubmenu {padding-left:3em }

.flag-item {float:right }
.flag {width:2.1em; height:1.4em; margin-top:-.1em; border:1px solid #666666}
.selected {background-color:#00693c; color:white; text-decoration:none }

.media-object {text-align:justify; padding:.8em .4em 1.2em .4em }
.media-object-small {text-align:justify; padding:1em .4em 0.3em .4em }

.media-object-header {font-size:1.3em; padding:0 0 .2em 0 }
.media-object-small-header {font-size:1.3em; padding:0 }
.media-object-icon {max-width:3em; min-width:3em; margin-right:1em }
.media-object-small-icon {max-width:2.5em; min-width:2.5em; margin:0.5em 1em 0 0}
.icon {max-width:2em; min-width:2em; margin-right:.5em }

.print-link {float: right;}
.print-link i {font-size: 1.8em; padding:.2em }

.login-page form {
    background:#eaeaea;
    max-width:27em;
    padding:2.5em 3.5em 2.5em 3.5em;
    margin:1.2em 0 3em 0;
    border-radius:.3em;
    box-shadow:0 0 20px 0 rgba(0,0,0,.2),0 5px 5px 0 rgba(0,0,0,.24)
}
.login-page form input {
    outline:0;
    background:#ffffff;
    width:100%;
    border:0;
    margin:0 0 .6em 0;
    padding:1em;
    box-sizing:border-box
}
.login-page form input.button {
    text-transform:uppercase;
    background:#00693c;
    color:#ffffff;
    margin-top: 1em;
    border-radius:.3em;
}
.login-page form input:disabled {background: #f2f2f2; border-style:none; color:#1e1e1e }
.login-page form div {margin:.8em 0 .2em 0; font-size:.9em; text-align: center }
.login-page form div.login-message { margin:-1.2em 0 1.2em 0; }
select.user-select { width: 6.5em; padding:.5em; margin:.4em}

.google-map {
    width:100%;
    max-width:25em;
    height:auto;
    margin-top:.5em;
    border:1px solid #aaa;
}
.about-logo {
    height:2.5em;
    width:auto;
    max-width:100%;
    margin:0 2.5em 2em 1em;
}

.ionsTable { margin:1em 0 2em 0; }
.ionsTable, .ionsTable tr td, .ionsTable tr th {text-align:center; border:1px solid #1e1e1e; }
.ionsTable, .ionsTable tr td {border-top-style:none; border-left-style:none; }
.ionsTable tr th { min-width:4.7em; padding:.3em; background:#eaeaea }

#electroneutrality_info {padding-bottom:1.2em }
.inputColumn {float:left; padding:0 .5em 0 .5em }

.resultTable, .adminTable {border:1px solid #1e1e1e }
.resultTable tr:nth-child(even), .adminTable tr:nth-child(even) {background-color:#f2f2f2 }
.resultTable tr th, .adminTable tr th {text-align:center; border:1px solid #1e1e1e; background:#eaeaea }
.resultTable tr td, .adminTable tr td { border:1px solid #1e1e1e; border-top-style:none; border-bottom-style:none }

.resultTable tr th, .resultTable tr td { width: 7em; text-align:center; }
.resultTable th { padding: 0 .4em 0 .4em; }

.nameList tr td:first-child, .nameList tr td:nth-child(2) { width: 12em; text-align:left; padding: .1em .5em;}

.adminTable { margin: .5em 1em; }
.adminTable tr th, .adminTable tr td { padding: .2em .5em; }
.adminTable input { width: 10em; }
.adminTable input.checkbox, .adminTable input.radio { width: 2em; }
.adminButton { padding-top:1.5em; font-size:1em;}

table thead tr th.header {
    background-image: url(../../images/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 1.6em
}
table thead tr th.headerSortUp { background-image: url(../../images/asc.gif); }
table thead tr th.headerSortDown { background-image: url(../../images/desc.gif); }

.inputTable {margin-bottom: 1.3em }
.inputTable tr td:first-child { width:17em; min-width:17em }
.inputTable tr td input { margin-right:.5em }
#bc { position:relative; margin-left:-4.8em }
#result-fieldset {display:none; background-color:#fff; margin-top:5em }

#chartContainer,#chartContainer2 {height:400px; width:100% }
.submit-button {width:100%; margin-top:1.2em; margin-bottom:1em; text-align:right }

#myProgress {width: 100%; background-color: #cacaca }
#myProgress, .progress-text {margin-top:2.5em }
.show-on-loading {display:none }
#myBar { width: 0%; height: 2.4em; background-color: #00693c; text-align: center; line-height: 2.4em; color: white; }

#extend {margin:1.2em .9em .5em 0; width: 1em }
.output-button {display:none }
.dataset-button {margin-bottom: 2.5em }
.accordion-button {width:100%; margin-bottom:0 }
.accordion-body {width:99.8%; padding:1em; margin:0 .4em 0 .4em; border:1px solid #cacaca; border-top-style:none }

.loading {padding-top:2em }
.loading img {width:3em }

.errorInput {border:.3em solid #a71930 }
.errorInput:focus{outline: none }
.errorMsg {color: #a71930; padding:2em 0 }

.menu-left {padding:2.5em 0 5em 1em }
.middle {padding:2em 1.5em 0 1.5em }
.oneCol {padding:2em 1.5em 0 1.5em }
.content-body {margin-bottom: 6em }
.eq2 {width: 2em; min-width: 17.33%; height: 3em; float: left }
.eq3 {width: 2em; min-width: 25%; height: 3em; float: left }
.eq4 {width: 2em; min-width: 33.33%; height: 3em; float: left }

.equation { width:2em; }
.equation, .equation-line, .eq3, .eq4 { padding-top: .5em; padding-bottom: .5em }
.task {font-weight: bold; padding-top: 2.2em}

.float-left {float:left }
.float-right {float:right }
.text-align-center {text-align:center }
.display-none {display: none;}
.padding-top {padding-top: 1.5em }
.padding-bottom {padding-bottom: 1.5em }
.margin-top {margin-top: 1.5em }
.margin-bottom {margin-bottom: 1.5em }
/*! Extracts from:
 * Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
    .fa, .fas, .far {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        line-height: 1;
    }

    .fa-address-book:before { content: "\f2b9"; }
    .fa-address-card:before { content: "\f2bb"; }
    .fa-at:before { content: "\f1fa"; }
    .fa-book-open:before { content: "\f518"; }
    .fa-cog:before { content: "\f013"; }
    .fa-download:before { content: "\f019"; }
    .fa-home:before { content: "\f015"; }
    .fa-file-alt:before { content: "\f15c"; }
    .fa-print:before { content: "\f02f"; }
    .fa-save:before { content: "\f0c7"; }
    .fa-undo:before { content: "\f0e2"; }
    .fa-window-maximize:before { content: "\f2d0"; }

    @font-face {
        font-family: 'Font Awesome 5 Free';
        font-style: normal;
        font-weight: 400;
        src: url("../../fontawesome/fa-regular-400.eot");
        src: url("../../fontawesome/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../fontawesome/fa-regular-400.woff2") format("woff2"), url("../../fontawesome/fa-regular-400.woff") format("woff"), url("../../fontawesome/fa-regular-400.ttf") format("truetype"), url("../../fontawesome/fa-regular-400.svg#fontawesome") format("svg");
	}
    .far { font-family: 'Font Awesome 5 Free'; font-weight: 400; }
    @font-face {
        font-family: 'Font Awesome 5 Free';
        font-style: normal;
        font-weight: 900;
        src: url("../../fontawesome/fa-solid-900.eot");
        src: url("../../fontawesome/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fontawesome/fa-solid-900.woff2") format("woff2"), url("../../fontawesome/fa-solid-900.woff") format("woff"), url("../../fontawesome/fa-solid-900.ttf") format("truetype"), url("../../fontawesome/fa-solid-900.svg#fontawesome") format("svg");
    }
    .fa, .fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; }

/* End of Extracts*/

.fa {font-size: 1.6em; margin:.1em}
.media-object-fa {vertical-align:top; text-align:center; width: 4em }
.media-object-fa a {width:100%; display:block }
.fa-icon {font-size: 2.5em; margin-right:.5em }
.fa-home {font-size: 1.1em; margin:.1em .4em }
.calculate-text {
    display: inline-block; font-style: normal; font-variant: normal; line-height: 1;
    font-weight: 400; font-size: 1.2em; margin:.5em .1em .3em .1em
}

@keyframes spin-reverse {
    0% {transform: scaleX(-1) rotate(-360deg) }
    100% {transform: scaleX(-1) rotate(0deg) }
}

.green {color: #00693c }
.red {color: #a71930 }
.black {color: #1e1e1e }

.tooltip, .tooltip-wide , .tooltip-top, .tooltip-top-small {position: relative }

.tooltiptext {
    visibility: hidden;
    background-color: #ffffff;
    color: #1e1e1e;
    text-align: center;
    border: 1px solid #1e1e1e;
    border-radius: 6px;
    padding: 5px 0;

    position: absolute;
    left: 0%;
    z-index: 1;
}
.tooltip .tooltiptext {
    top: 90%;
    width: 7.3em;
    margin-left: -7.1em;
}
.tooltip-wide .tooltiptext {
    top: 90%;
    width: 10em;
    margin-left: -9.8em;
}

.tooltip-top .tooltiptext {
    top: 0%;
    width: 8em;
    margin-left: -8em;
    height: 5.4em;
    margin-top: -5.4em;
}
.tooltip-top-small .tooltiptext {
    top: 0%;
    width: 8em;
    margin-left: -8em;
    height: 3.8em;
    margin-top: -3.8em;
}
.tooltip:hover .tooltiptext, .tooltip-wide:hover .tooltiptext, .tooltip-top:hover .tooltiptext, .tooltip-top-small:hover .tooltiptext {visibility: visible }

/* Responsive */
 @media screen and (max-width:849px){
    .content-body {margin-bottom: 8em }
    .menu-top a {padding:.4em }
    .menu-left, .print-link {display:none }
    .footer {min-height:4.8em; margin-top:-4.8em }

    h1 {font-size:1.5em }
    h2 {font-size:1.6em }
    h4 {font-size:1.2em; padding:1em 0 .6em 0 }
    .mobile-padding-top {padding-top: 3em}
    .media-object {text-align:left; padding:.7em .4em .5em .4em }
    .media-object-header, .media-object-small-header {font-size:1.2em }

    ul {padding:0 1em 0 1em }
    ol {padding:0 1em 0 1em }

    p {margin:.5em 0 .5em 0; text-indent:1.5em }
    fieldset {padding:.5em .5em 1em .5em }
    fieldset legend {font-size:1.2em }
    .padding-results {padding:0 1.5em 0 1.5em }

    .small-button {padding:.1em; font-size:1em }
    input {padding:.1em }
    select {padding:.2em; margin-left:.5em; }
}
@media screen and (min-width:850px){
    .mobile-only {display:none }
    .menu-left {width:20%; float:left }
    .middle {width:80%; float:left; padding-left:3em; padding-right:3em }
    .oneCol {padding:3.5em 3em 0 3em }
    .padding-left {padding-left:1.5em }
    .padding-right {padding-right:1.5em }
    .padding-results {padding:0 3em 0 2.5em }
    .footer {min-height:2.4em; margin-top:-2.4em }

    .sm12{width:100%; float:left }
    .sm11{width:91.66%; float:left }
    .sm10{width:83.33%; float:left }
    .sm9 {width:75%; float:left }
    .sm8 {width:66.66%; float:left }
    .sm7 {width:58.33%; float:left }
    .sm6 {width:50%; float:left }
    .sm5 {width:41.66%; float:left }
    .sm4 {width:33.33%; float:left }
    .sm3 {width:25%; float:left }
    .sm2 {width:16.66%; float:left }
    .sm1 {width: 8.33%; float:left }
}
@media screen and (min-width:1100px){
    .menu-left {width:17%; float:left }
    .middle {width:83%; float:left; padding-left:4.5em; padding-right:4.5em }
    .oneCol {padding-left:6em; padding-right:6em }
    .padding-left {padding-left:3em }
    .padding-right {padding-right:3em }
    .padding-results {padding:0 4.5em 0 4.5em }
    .matrix-description {display:table-cell; height:8em; vertical-align:middle}

    .lg12{width:100%; float:left }
    .lg11{width:91.66%; float:left }
    .lg10{width:83.33%; float:left }
    .lg9 {width:75%; float:left }
    .lg8 {width:66.66%; float:left }
    .lg7 {width:58.33%; float:left }
    .lg6 {width:50%; float:left }
    .lg5 {width:41.66%; float:left }
    .lg4 {width:33.33%; float:left }
    .lg3 {width:25%; float:left }
    .lg2 {width:16.66%; float:left }
    .lg1 {width:8.33%; float:left }
}
@media screen and (min-width:1400px){
    .menu-left {width:15%; float:left }
    .middle {width:85%; float:left }
}
@media print {
    @page {margin-top: 2cm; margin-bottom: 2cm }
    * {max-width:20cm !important }

    #header, .footer, .oneCol, .middle {width:20cm !important; min-width:20cm !important; padding: 0 }

    .p12{width:100%; float:left }
    .p11{width:91.66%; float:left }
    .p10{width:83.33%; float:left }
    .p9 {width:75%; float:left }
    .p8 {width:66.66%; float:left }
    .p7 {width:58.33%; float:left }
    .p6 {width:50%; float:left }
    .p5 {width:41.66%; float:left }
    .p4 {width:33.33%; float:left }
    .p3 {width:25%; float:left }
    .p2 {width:16.66%; float:left }
    .p1 {width: 8.33%; float:left }

    .print-hide, .sticky, .menu-left, .w3c-validator, button, .submit-button, .print-link, .login-page {display:none !important }
    input {border-style:none; margin:0; background-color:#ffffff }
    select {
    	border-style:none;
    	-moz-appearance: none;  /* for Firefox */
    	-webkit-appearance: none; /* for Chrome */
    }
    select::-ms-expand {display: none; /* For IE10 */ }

    fieldset {padding:.3em 0 0 0; border-style:none}
    #result-fieldset {margin: 0.6cm 0 0 0 }
    #chartContainer, #chartContainer2 {max-width:100% !important; min-width:100% !important; margin-top:-0.6em}

    #header {padding:0 0 1em 0; border-bottom:1px dotted lightgrey }
    .footer {position:static }
    a {text-decoration:none; color:#1e1e1e }
    .content-body {margin-bottom: 0em;}
    .oneCol, .middle {padding-top:2em; padding-bottom:0 }
    .logo {padding-top:.2cm }
    .logo, .logo img {width: 1.7cm; max-width:1.7cm }

    h1{	font-size:1.6em }
    h2, h3, h4 {page-break-after: avoid !important }
    .mobile-padding-top {padding-top: 3em}
    .print-together, .media-object, .media-object-small, li, img, .js-plotly-plot, .accordion-body {page-break-inside: avoid }
    ul {page-break-before: avoid }
    .icon, .media-object-icon {max-width:1cm; width:1cm; margin-right:.5em }

    .ionsTable {margin: .5em 0 1em 0}
    .ionsTable tr td {padding:.05cm}
    	.accordion-body {border:none; padding:0 .4em 1em .4em;	}

    .green, .red, .black {color: #1e1e1e }
}

body { counter-reset: h4counter h5counter rowcounter; }
h4:before {
    content: counter(h4counter) ".\0000a0\0000a0";
    counter-increment: h4counter;
}
h4.nocount:before {
    content: none;
    counter-increment: none;
}
h4 { counter-reset: h5counter; }
h5:before {
    content: counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0";
    counter-increment: h5counter;
}
.rowcounter:before {
    content: counter(rowcounter) "\0000a0\0000a0";
    counter-increment: rowcounter;
}
/*
.no-select {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}
*/
@media screen {
    th, .inputTable, #result-fieldset, #electroneutrality_info {cursor:default }
    button, .button, select, .print-link, .option-box, .header {cursor:pointer }
    .fa-spin-reverse {transform: scaleX(-1); animation: spin-reverse 2s infinite linear }
    .print-only {display:none}
}
blockquote {
    margin: 0 auto;
    padding: 1em;
    border-left: 5px solid #999;
    margin-bottom: 3em;
}
blockquote span {
    color: #555;
    font-size: 12pt;
    line-height: 1.4;
    font-size: 14pt;
    font-family: 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;
}
blockquote footer {
    margin-top: .5em;
    color: #777;
    font-size: 12pt;
    font-style: italic;
}

.submit-button button {height: 3.7em}
.current { background-color:#bababa; font-weight: bold; border-radius: 0.3em}
ul.option-box { list-style-type: none; padding: 0; }
ul.option-box li { min-width: 10em; }
ul.option-box li form div { padding: 0.2em 1em 0 1em; }

.border-right {border-right: 1px solid grey}
.border-left {border-left: 1px solid grey}
.list-table tr td { padding: .5em 0 }
.list-table tr td:first-child { padding-right: 1.5em }
.matrix {width: 12em }
.matrix-description { padding-left:4em }

[contenteditable="true"] {
    font-family: "Courier new";
}