/* Font sizes: */
html {
  font-family: Arial, Helvetica, sans-serif;
  --size0: 13px;
  --size1: 17px;
  --size2: 21px;

  font-size: var(--size1);
  line-height: 1.3;
  --celeste0: rgb(203,255,255);
  --celeste: rgb(178,255,255);
  --celeste2: rgb(153,255,255);
  --celeste3: rgb(128,255,255);
  --celeste4: rgb(103,255,255);
  --celeste5: rgb(78,255,255);
  --celeste6: rgb(53,255,255);
  --celeste7: rgb(28,255,255);
  --celestet1: rgb(178,255,255, 0.35);
  --celestet5: rgb(78,255,255, 0.35);
  --gray0: rgb(255,255,255); /* white */
  --gray1: rgb(245,245,245); /* whitesmoke */
  --gray2: rgb(220,220,220); /* gainsboro */
                                /* lightgray: 211 */
  --gray3: rgb(192,192,192); /* silver */
  --gray4: rgb(169,169,169); /* darkgray */
  --gray5: rgb(128,128,128); /* gray */
  --gray6: rgb(64,64,64); /* NA */
  --gray9: rgb(13,13,13); /* NA */ 
  --grayt0: rgb(255,255,255, 1.0);
  --magenta: rgb(255,0,255);
  --blue: rgb(0, 0, 238); /* Chrome default link blue*/
  color: var(--gray9);
  /*margin-left: calc(100vw - 100%);  Scroll bar fix. */
  }
a {
  cursor: pointer; /* required for a without href. */
}

.jslink { color: blue; text-decoration: underline; }


body {
  height: 100vh; 
  margin: 0; 
  display: flex; 
  flex-direction: column;  
  min-width: 1000px;
}

footer {
  background: var(--celeste);
  border-top: 1px solid var(--celeste3);
  /*margin-top:24px;*/ /*margin-top:auto;*/
  margin-top: 118px; /* Must include room for .fleftpopup */
}

.fix {
  position: relative;
}

.fleft{
  margin-left: 24px;
}

header > .fleft { 
  position: fixed;
}

.fright {
  position: absolute;
  right:0;
  margin-right:24px;
 }

 header .fright {
  top: 0;
 }
 footer  .fright {
  bottom: 0;
 }

.fleftpopup {
  position: absolute;
  left:0;
  bottom: 56px;
  margin-left: 24px;
 }

.fleft > *, .fright > * , .fleftpopup > * {
  vertical-align: top;
  position: relative;
  margin: 12px 18px;  
}
.fright > * { display: inline-block; }
.fleft > * { display: block; }

  /*@media only screen and (max-width: 940px) {
    .fright > * { 
      display: block !important;
    }
    footer .fright {
      background-color: var(--celeste);
      border-top: 1px solid var(--celeste3);
      z-index: 900;
      border-radius: 4px;
      margin-right: 0;
      padding-right: 24px;
    }
  }*/


.fix * {
  color: var(--gray9);  
  text-decoration: none;
}

.fix a:hover {
  text-decoration: underline;
}

.fix .narrow {
  height: 30px;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.fiximg {
  height: 30px;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.wrapper {
  width: 720px;
  margin-top:-32px;
}
.mainwrapper{
  margin: auto;
  /*margin-top: 320px;*/
  margin-top: max(10vh,120px);
}

@media screen and (max-width: 1500px){
  .mainwrapper{
    /*margin-left: 285px;*/
    margin-left: max(285px, 0.5 * (100% - 720px + min(285px, 0.67 * (1500px - 100%))));
    /* Auto-margin + gradually increasing padding as width decreases. */
  }
}

.docuwrapper{
  margin-top: 24px;
  margin-left: 360px;
  width: 800px !important;
  padding-bottom: 112px;
}

.docuwrapper > img {
  display: block;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
}

.docuwrapper h1{
  font-size: 2.35rem;
  text-align: left;
  /*font-style: italic;*/
  color: var(--gray6);
}

.docuwrapper h3{
  font-size: 1.9rem;
  margin-top: 82px;
  color: var(--gray6);
}
.docuwrapper h4{
  font-size: 1.15rem;
  color: var(--gray6);
  margin-top: 64px;
}
.docuwrapper h4 + p, .docuwrapper td > p:first-child {
  margin-top: 0;
}
.docuwrapper p, .docuwrapper td, .docuwrapper th {
  margin-bottom: 0;
  line-height: 1.15;  
}

.outwrapper {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

#comphet {
  /*position: relative;
  width: 90vw;*/
  /*left: calc(50% - 50vw);
  /*right: calc(50% - 50vw);*/
  margin-left: min(calc((100vw - 1060px) / -2),0px);
  width: calc(100vw - 84px); /* minus approximate scrollbar*/
  border-left: 42px solid white !important;
  overflow:hidden;
  }


.outwrapper table {
  font-size: 15px;
}

.outwrapper table table {
  margin: 0 -4px;
}

.outwrapper table table td, .outwrapper table table th {
  padding: 0 4px !important;
  border: 0 !important;
}

.outwrapper table table tbody tr:nth-child(even) {
  background-color: initial;
}

.outwrapper table table thead th {
  /*white-space: nowrap;*/
  /*background-color: var(--gray1);*/
  line-height: 1.15;
  font-weight: normal !important;
  background-color: initial;
  font-style: italic;
}

.rftable{
  margin-top: 0 !important;
}

.outwrapper .m {
  background-color: black;
  color: white;
}

.outwrapper .red, .rftable .red, tt .red {
  color: #FF0000;
}
.outwrapper .green, .rftable .green, tt .green {
  color: #008000;
}

.inner-ml-24 {
  margin-left: -24px;
  margin-right: -24px;
}
.inner-ml-24 > * {
  padding-left: 24px;
  padding-right: 24px;
}


hr {
  width: 100%;
  /*color: var(--celeste);
  background: var(--celeste);
  background: linear-gradient(to bottom,  white, white);
  position: relative;
  min-height: 18px;
  border-radius: 2px;*/
  margin-top: 92px;
  margin-bottom: 24px;
  /*border: 0;*/
}

.top {
  margin-top: 24px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 24px;
}

.top > h1 {
  text-align: center;
  flex: 1;
}

.inner {
  display: flex;
  padding-top: 24px;
  width: 100%;
}
  .inner h2 {
    font-weight: normal;
    margin:0;
    flex: 0 0 180px;
    font-size: 17px;
  }

  .inner.predict {
    line-height: 1;
    align-items: center;
  }
  
  .inner ul {
    font-size: 17px;
    margin-top: -2px !important;
  }
  .inner .ul-summary {
    margin-right:36px !important;
    font-weight: bold;
  }
  
  .mlauto { margin-left: auto !important }

  .tag {
    padding: 0 6px;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    min-width: 0;
    border-style: solid;
    border-width: 2px;
    border-radius: 4px;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    border-color: transparent;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.7;
    /*font-weight: initial !important;*/
  }
  
  .pred-red {
    background-color: #f3dfdf;
    color: #a72222;
  }
  
  .pred-green {
    background-color: #c6f5d6;
    color: #307246;
  }
    
  .outwrapper table td, .outwrapper table th {
    padding: 4px 10px !important;
  }
  
  .outwrapper > table {
    margin-top: 36px;
    /*width: 100%;*/
  }

table.vcfsummary {
  margin-top: 0 !important;
}
table.vcfsummary tr>td:not(:first-child){
  text-align: right !important;
}

table.vcfsummary th {
  text-align: center !important;
}


table.vcfresults {
  margin-left: auto;
  margin-right: auto;
  /*word-break: break-all;
  width: 100%;*/
}

table.vcfresults th, table.vcfresults td {
  padding: 6px !important;
  /*border: 0 !important;*/
}

  table.resultlinks {
    font-size: 15px;
    margin-top:12px !important;
  }
  /*table.resultlinks td, table.resultlinks th {
    border-left: 0;
    border-right: 0;
  }*/
  table.resultlinks tbody tr:nth-child(even) {
    background-color: initial;
  }
  table.resultlinks tr>:not(:last-child) {
    border-right-color: transparent;
  }
  table.resultlinks tr>:not(:first-child) {
      border-left-color: transparent;
  }
  table.resultlinks.transposed td, table.resultlinks.transposed th {
    padding: 4px 10px !important;
  }
  table.resultlinks.transposed th {
    background-color: var(--gray1);
    min-width: 120px;
  }

  table.resultlinks.transposed tr > * {
    /*border-bottom-color: transparent !important;
    border-top-color: transparent !important;*/
    border-right: 1px solid var(--gray2) !important;
  }

  table.resultlinks tr:first-child>* {
    border-top: 1px solid var(--gray2) !important;
  }
  table.resultlinks.transposed tr:last-child>* {
    border-bottom: 1px solid var(--gray2) !important;
  }
  
  pre {
    font-size: 15px;
    tab-size: 4;
    -moz-tab-size: 4;
    margin-bottom: 0;
  }

  tt {
    font-size: 15px;
  }
  
pre.codeblock{
  background-color: var(--gray1);
  padding: 8px;
}


#divfaqs {
  counter-reset: h4counter;
}
#divfaqs h4:before {
  content: counter(h4counter) ".\0000a0";
  counter-increment: h4counter;
}

.tasty {
  color: var(--celeste3);
  font-style: italic;
}
.blue {
  color: var(--blue);
}
.tastysm {
  color: var(--blue);
  /*font-style: italic;*/
  font-weight: bold;
  text-decoration: underline;
}
.tastyfd {
  font-style: italic;
  font-weight: bold;
}
.grey {color:var(--gray4)}

.code {
	font-family: monospace, "Courier New", Courier ; font-size: 14px;
}

.conservation > *:not(.nocode)  {
  padding-right: 0px !important;
}

.conservation > *:not(.nocode) ~ *:not(.nocode) { /* does not apply to first */
  padding-left: 0px !important;  
}

.conservation > .nocode {
  font-family: Arial, Helvetica, sans-serif !important;
  white-space: nowrap;
  font-size: 15px;
}


.box { border: 1px solid #999999 }


h1 {
  font-size: 2.4rem;
  text-align: center;
  margin:auto 0;
  padding-bottom:24px;
}

.plaintextbox{
  margin: 6px 2px 0;
}

label {
  display: block;
}

.mainlabel {
  display: block;
  padding: 4px 2px 8px;
  font-size: 1.15rem;
  /*font-weight: bold;*/
  cursor: pointer;
  /*margin-top:24px;*/
  /*margin-bottom:4px;*/
}

.cblabel {
  margin: 4px 0;
  white-space: nowrap;
}

input[type='text'], input[type='number'], input[type='email'], textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: .7em;
  border: 1px solid var(--gray3);
  border-radius: 4px;
  box-shadow: 0 0 0 var(--grayt0);
  font-size: 17px;
  font-family: inherit;
  position: relative; /* required for z-index in :focus*/
}

input[type='text']:disabled {
  background-color: var(--gray0);
  border: 1px solid var(--gray3);
}

input[type='text']:focus, input[type='number']:focus, input[type='email']:focus, textarea:focus, .focusdummy {
  border-color: var(--celeste5) !important;
  box-shadow: 0 0 0 2px var(--celeste2) !important;
  outline: 0;
  z-index: 100;
}

select:before {
  top: calc(50% - 5px);
  border-top-width: 0;
  border-bottom-width: 4px;
}

select:after {
  top: calc(50% + 1px);
  border-top-width: 4px;
  border-bottom-width: 0;
}

select {
  position: relative;
  padding: .2em .7em;
  padding-right: 16px;
  border: 1px solid var(--gray3);
  border-radius: 4px;
  background-color: var(--white);
  outline: 0;
  font-size: 15px;
  font-family: inherit;
  color: var(--black);
  line-height: 1.1;

}


button {
  position: relative;
  display: inline-block;
  padding: .7em;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  outline: 0;
  font-family: inherit;
  font-size: 17px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: var(--gray9);
  background-color: var(--celeste); 
  border-color: var(--celeste); 
}

button[type='submit']:hover, .clearstyle:hover {
  border-color: var(--celeste0);
  background-color: var(--celeste3);
}

button[type='submit']:focus, .clearstyle:focus {
  border-color: var(--celeste0);
  background-color: var(--celeste3);
  outline: 0;
  box-shadow: 0 0 0 2px var(--celeste6);
}


button[type='reset'], .pred-light {
  border-color: var(--gray3) !important;
  background-color: var(--gray0) !important;
  color: var(--gray5) !important;
  /* no hover */
}

button[type='reset']:focus {
  border-color: var(--celeste0);
  box-shadow: 0 0 0 2px var(--celeste6);
  outline: 0;
}

button[type='button']:not(.clearstyle) {
  border-color: var(--gray3);
  background-color: var(--gray1);
  color: var(--gray6);
}

button[type='button']:not(.clearstyle):hover {
  border-color: var(--gray2);
  background-color: var(--gray2);
}

button[type='button']:not(.clearstyle):focus {
  border-color: var(--celeste0);
  box-shadow: 0 0 0 2px var(--celeste6);
  outline: 0;
}

/* Dropdown. */

.caret-down {
  padding-right: .8em;
}

.caret-down:after {
  content: "";
  position: absolute;
  z-index: 30;
  top: calc(50% - 2px);
  right: 0;
  border-style: solid;
  border-width: 4px;
  border-top-width: 4px;
  border-bottom-width: 0;
  border-color: currentColor transparent;
  pointer-events: none;
}

.caret-down-left {
  padding-left: .8em;
}
.caret-down-left:after {
  content: "";
  position: absolute;
  z-index: 30;
  top: calc(50% - 2px);
  left: 0;
  border-style: solid;
  border-width: 4px;
  border-top-width: 4px;
  border-bottom-width: 0;
  border-color: currentColor transparent;
  pointer-events: none;
}

.dd-outer > a, .dd-outer > span {
  position: relative;
  z-index: 700;
}

.tagico:hover ~ .dd,
.dd-outer a:hover ~ .dd, 
.dd-outer a:hover ~ .dd-help,
.dd-help:hover,
.dd-help:hover ~ .dd,
.dd:hover {
  display: block;
}

.dd {
  display: none;
  position: absolute;
  top: 48px;
  background-color: white;
  border: 1px solid var(--gray3);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
  z-index: 800;
  right:-32px;
}
.dd.sciart { 
  width: 510px; 
  right:-100px;
}

.du {
  top: initial !important;
  bottom: 48px;
}

/* LISTS */


/* ul */
ul {
  padding-left: 0; /* Resets default */
  list-style: none; 
  margin: 0 !important; /* overwrites .fleft > * or ul default */
}
.ul-nav { padding: 18px 0; /* extra space on top */ }
.ul-navdocu { width: 240px; /*min-content;*/ }
ul.dd, .ul-ex { padding: 12px; /* extra space on top */ }
.docuwrapper ul { padding: 8px 0 0;  }
.ul-ex { min-width: 236px; }
.ul-ref { width: 530px; right: -100px; }
li > ul, .docuwrapper li, .outwrapper ul:not(.ul-resultlink) li { list-style: initial; }

/* li */
li { padding: 8px; }
li li, .docuwrapper li, .outwrapper ul:not(.ul-resultlink) li { margin-left: 20px; }
.outwrapper li { padding: 0 0 0 8px; line-height: 1.15;  }
.docuwrapper li { padding: 0 0 0 8px; }
.docuwrapper li li { list-style-type: circle !important; }
ul { margin: -4px 0 !important }
ul.ul-resultlink li, .ul-vcf li, .ul-model li, .ul-summary li { padding: 4px 0 !important}

.ul-nav > li > *, .dd li > * {
  display: block;
  padding: 6px 18px;
}
.ul-nav li li > * { padding: 0; }

a.nav-basic {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  border-radius: 1000px !important;
  padding: 6px 18px 6px 46px !important;
  font-weight: bold;
}

.nav-cite {
  padding-left: 46px !important;
  position: relative;
  display: inline-block;
  width: 680px;
}

a.nav-basic.nav-noico {
  padding-left: 18px !important;
}

a.nav-basic:hover:not(.nav-active):not(.nav-block) {
  background-color: var(--gray1);
  text-decoration: underline;
}

a.nav-active:not(.nav-block) {
  background-color: var(--celeste);
}

a.logolink, span.logolink {
  padding: 6px 18px 6px 62px !important;
  white-space: nowrap;
  position: relative;
}


/* LISTS (dd) */

/*
.docuwrapper ul {
  padding-left: 24px;
  margin-top: calc(1em - 6px); 
  margin-bottom: -6px; 
}
.docuwrapper li {
  padding-left: 6px !important;
}
*/

/* Todo: make nicer. 
ul.allmlp0 {
  padding-left: 0 !important;
  margin-left: 6px; 
  margin-top: 28px;
}

ul.allmlp0 > li, header ul ul li {
  padding-left: 0 !important;
}

ul.allmlp0 > li > a, header ul ul li > a {
  margin-left: 0 !important;
}

.docuwrapper li, header ul ul li {
  margin: 0;
}
*/
ol { counter-reset: list; }
ol > li { list-style: none !important;  margin-left: 0 !important}
ol > li:before {
  content: "[" counter(list) "]";
  counter-increment: list;
  left: 0;
  position: absolute;
}
ol.parentheses > li:before {
  content: "(" counter(list) ")" !important;
  counter-increment: list;
  left: 0;
  position: absolute;
}

.dd-help {
  display: none;
  position: absolute;
  height: 48px;
  top:0;
  width: calc(100% + 14px + 14px);
  left: -14px;
}

.dd-help.du {
  top: initial !important;
  bottom: 0;
}

.expos {
  position:absolute;
  top: -72px;
  width: 100%;
  box-sizing: border-box;
}

.exdesc {
  background-color: var(--celeste);
  border: 1px solid var(--celeste3);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
  z-index: 602;
  padding: 12px;
}

.exdesc > h2, .helptext > h2, .mutdis h2 {
  font-size: 17px;
  margin-top: 0;
}
.exdesc > p, .helptext > p, .mutdis p {
  font-size: 15px;
  margin-bottom: 0;
}

.exdesc > p:first-of-type, .helptext > p:first-of-type {
  margin-top: 0 !important;
}
.exdesc > span {
  color: var(--gray5);
  position: absolute;
  padding: 8px;
  top:0; right:0;
  line-height: 1;
  cursor: pointer;
}

.mutdis {
  /*top: 7px !important;*/
  top: -48px !important;
  right: 200px !important;
  width: 480px;
  /*background-color: var(--gray0) !important;
  border: 1px solid var(--gray2) !important;*/
}

.mutdis h2 {
  font-weight: bold;
}

.mutdis p {
  margin-top: 13px;
}

.mutdis * {
  line-height: 1.3;
}

.helptext {
  width: min-content;
  min-width: 236px;
  z-index: 300;
  padding: 12px;
}

.faketable {
  display: inline-block;
  vertical-align: top;
  font-style: italic;
}

.svgico {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  fill: var(--gray4);
  z-index: 200;
  cursor: pointer;
  transform: translateY(-50%);
}
.svg-high {
  height: 60px !important;
}

.tagico {
  position: absolute !important;
  top: 50%;
  margin: -11px 0 0 0 !important; /* 11px guessed. */
  fill: var(--gray4);
  z-index: 601;
  cursor: pointer;
}

.tagtext {
  position: initial !important;
  margin: 0 !important;
}

.imgico {
  position: absolute;
  top: 50%;
  height: 24px;
  margin-top: -12px;
  z-index: 200;
  cursor: pointer;
}


.svg-l {
  left: .7em;
}

.svg-r {
  right: .7em;
}

.svg-rr {
  right: -2.7em;
}

.svg-dark {
  fill: var(--gray9);
}

.svg-link {
  height: 12px;
  margin-left: 6px;
}

.dnone { display:none !important; }
.dhide {
  visibility: hidden;
  position: absolute;
}

/* .dualinp */
.dualinp > .didiv  {  /*TODO: MAKE NICER*/
  order: -1 !important;
  padding: .7em;
  border: 1px solid var(--gray3);
  border-right-width: 0;
  background-color: var(--gray1);
  color: var(--gray6);
  white-space: nowrap;
  line-height: 1.15;
  border-left-width: 1px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.dualinp > button {
  order: -2 !important;
  padding: .6em 1em .6em calc(.7em + 24px + 4px) !important;
  z-index: 500;
}

.dualinp > input {
  flex: 1 0;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.dualinp .middle-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}
.dualinp .middle-input:focus {
  border-right-width: 1px !important;
}

.dualinp .middle-input:focus + input {
  border-left-width: 0px !important;
}

.dualinp .end-input {
  border-left-width: 0px !important;
}

.dualinp > .end-input.focusdummy {
  border-left-width: 1px !important;
  z-index: 600;
}
.dualinp > .end-input.focusdummy + button {
  border-right-width: 0px !important;
}

/* .dualinp1 */

.dualinp1 > div{
  order: -1 !important;
  padding: .7em;
  border: 1px solid var(--gray3);
  border-right-width: 0;
  background-color: var(--gray1);
  color: var(--gray6);
  white-space: nowrap;
  line-height: 1.15;
  border-left-width: 1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;    
  border-bottom: 0 !important;
}

.dualinp1 input {
  flex: 1 0 !important;
  padding: .7em !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 0 !important;
  border-top-right-radius: 0 !important;
}

.dualinp1top  > div {
  border-top-left-radius: 4px !important;
}

.dualinp1:not(.dualinp1top):not(.dualinp1bottom) > div {
  border-top: 0;
}

.dualinp1top > input {
  border-top-right-radius: 4px !important;
}

.dualinp1bottom > div {
  border-bottom: 1px solid var(--gray3) !important;
  border-bottom-left-radius: 4px !important;
  border-top: 0;
}

.dualinp1bottom > input {
  border-bottom: 1px solid var(--gray3) !important;
  border-bottom-right-radius: 4px !important;
}

.dualinp1 > .middle-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0;
}
.dualinp1 > .middle-input:focus, .dualinp1 > .middle-input.focusdummy  {
  border-right-width: 1px !important;
}

.dualinp1 > .middle-input:focus + input, .dualinp1 > .middle-input.focusdummy + input {
  border-left-width: 0px !important;
}

.dualinp1:focus-within > input {
  border-bottom-width: 1px !important;
  border-style: solid  !important;
}

.dualinp1:focus-within + .dualinp1 > input {
  border-top: 0;
}
.dualinp1:focus-within + .dualinp1 > div {
  margin-top: -1px; /* fix to avoid jumping indel text */
}


/* mini*/ 

input[type='text'].mini, input[type='text'].minimiddle{
  width:39px !important; 
  padding: .1em .3em .1em .1em !important;
  line-height: 1;
  font-size: 13px;
  border-left-width: 0;
  text-align:center !important;
  border-right-width :0;
  border-top-width :0;
}

input[type='text'].minilong {
  width:44px !important; 
}

input[type='file'] {
  display:none;
}

input[type='text'].mini.small {
  width:24px !important; 
}

input[type='text'].minifull {
  /*border-left-width: 1px;*/
  border-left-width: 0;
  padding: .1em .3em !important;
}

input[type='text'].minimiddle {
  /*border-left-width: 1px;*/
  border-bottom-left-radius: 4px !important;
  border-right-width: 0;
  padding: .1em .3em !important;
  border-bottom-right-radius: 0 !important;
}

div.mini {
  border: 1px solid var(--gray3);
  border-right-width: 0;
  white-space: nowrap;
  padding: .2em 0em 0em .3em !important;
  line-height: 1 !important;
  font-size: 13px;
  background-color: white;
  color: var(--gray6);
  border-top-width: 0;
  border-left-width: 0;
  border-bottom-left-radius: 4px !important;
}


div.miniend {
  border: 1px solid var(--gray3);
  border-right-width: 0;
  white-space: nowrap;
  order: 2 !important;
  padding: .2em .3em 0em 0em !important;
  line-height: 1 !important;
  font-size: 13px;
  background-color: white;
  color: var(--gray6);
  border-top-width: 0;
  border-left-width: 0;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 4px !important;
}

table {
  margin-top: 24px;
  border-collapse: collapse;
  border-spacing: 0;
  /*font-size: 13px;*/
}

table td, table th {
  padding: 10px;
  border-top: 1px solid var(--gray2);
  border-left: 1px solid var(--gray2);
  border-right: 1px solid var(--gray2);
  vertical-align: top;
  text-align: left;
}

th.bt0 {
  border-top: none !important;
}

  table tr:last-of-type td, table tr:last-of-type th {
    border-bottom: 1px solid var(--gray2);
  }

table thead th {
  vertical-align: bottom;
  /*white-space: nowrap;*/
  background-color: var(--gray1);
  line-height: 1.15;
}

table tbody tr:nth-child(even) {
  /*background-color: var(--gray1);*/
}

.loading {
  display: inline-block;
}
.loading:after {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 6px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: var(--celeste3) transparent var(--celeste3) transparent;
  animation: loading 3s linear infinite;
}
@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#loadingtext {
  transform: translateY(-50%);
  top: 50%;
  position: absolute;
  margin-left: 10px;
  font-weight: bold;
}

.flex { display: flex; }
.inline { display: inline; }
.flexinline { display: inline-flex; justify-content: space-between; }
.jc-sb { justify-content: space-between; }
.jc-se { justify-content: space-evenly; }
.jc-c { justify-content: center; }
.f-aic{ align-items: center; }
.f-ais { align-items: start !important }
.ta-c { text-align: center !important }
.ta-r { text-align: right; }
.ta-l { text-align: left; }
.w100 { width: 100%; }
.winit {width: initial !important; }
/*.fc1 > * { flex-basis: calc(50% - 16px); } */
.f-g3 { flex: 3 1 10px !important;} 
.f-g1 { flex: 1 1 10px !important;}
.f50 {flex:50%;}
.fix-flex-width-input {width: 0 !important; overflow:hidden;}
.fix-shadow-overflow {padding-right:4px; margin-right:21px !important; padding-bottom:4px; margin-bottom:-4px !important }

.f-cspaced { margin: 0 -24px; }
.f-cspaced > * { margin: 0 24px; }

.h100-16 { height: calc(100vh - 2 * 16px) } /* twice the top margin. */
.ov-ya { overflow-y: auto; }
.prel { position: relative; }
.ml12 { margin-left:12px !important; }
.ml8 { margin-left:8px !important; }
.mt0 { margin-top: 0px !important; }
.pt0 { padding-top: 0px !important; }
.pt16 { padding-top: 16px !important; }
.ml48 { margin-left: 48px !important; }
.ml4 { margin-left: 4px !important; }
.mt4 { margin-top: 4px !important; }
.mt6 { margin-top: 6px; }
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px !important;}
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mt18 { margin-top: 18px; }
.mt20 { margin-top: 20px; }
.mt24 { margin-top: 24px; }
.mt32 { margin-top: 32px; }
.mt34 { margin-top: 34px; }
.mt34 { margin-top: 34px; }
.mt48 { margin-top: 48px; }
.mb0 { margin-bottom: 0px !important; }
.mb48 { margin-bottom: 48px; }
.mt64 { margin-top: 64px; }
.mt88 { margin-top: 88px; }
.mt96 { margin-top: 96px; }
.mt128 { margin-top: 128px; }
.mt192 { margin-top: 192px; }
.mt256 { margin-top: 256px; }
.mb64 { margin-bottom: 64px !important; }
.mr18 { margin-right: 18px; }
.mr20 { margin-right: 20px; }
.mr24 { margin-right: 24px; }
.mr48 { margin-right: 48px; }
.mr64 { margin-right: 64px; }
.mr32 { margin-right: 32px !important }
.mr16 { margin-right: 16px !important }
.w42 { width: 42px; }
.pb24 { padding-bottom: 24px;}
.pb36 { padding-bottom: 36px;}
.fw-b {  font-weight: bold !important}
.fw-n {  font-weight: normal !important; }
.fs-i {  font-style: italic; }
.td-u {  text-decoration: underline; }
.ofwrap { overflow-wrap: break-word; } 
.ofwa { overflow-wrap: anywhere; } 
.nowrap { white-space: nowrap; }
.c-hm-32 > * { margin-left: 32px; margin-right: 32px; }
.dblock {display: block !important}
.dilblock {display: inline-block !important}
.lh-16 {  line-height: 1.6 !important;}
.mlmr-a {margin-left: auto; margin-right:auto;}
.td-n {text-decoration: none;}
.z10 {z-index: 10;}

.tagsm {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:1.1em;
  font-size: var(--size1);
  margin: 0 4px;
  padding-top: 1px;
  border: 1px solid var(--gray4);
  border-radius: 4px;
  line-height: 1.1;
  background-color: var(--gray4);
  color: var(--gray0);
  font-weight: bold;
}

.tagsm.rd  {
  border-radius: 1000px !important;
}

.mm {	color: black }
.m {	background-color: black;	color: white }
.c {	background-color: #CCCCCC; 	color: white }
.error {color: red;}
.box { border: 1px solid #999999 }

.cb-stack {
  display: inline-block;
  width: 124px;
  /* margin-top: 3px; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: -6px 12px -6px 0;
}

.cb-stack-lg {
  display: inline-block;
  width:50%;
  /* margin-top: 3px; */
  white-space: nowrap;
}

.tagsm-letters {
  margin: 0 1px !important;
  font-weight: initial !important;  
  cursor: pointer; 
  background-color: initial !important;
  border-color: var(--gray0) !important;
  color: var(--gray5) !important;
}

.tagsm-letters.active {
  border-color: var(--gray4) !important;
  background-color: var(--gray0) !important;
}

.shutdown_notification {
  border: 1px solid red;
  color: red;
  text-align: center;
  font-weight: bold;
  font-size: 14pt;
}