body   {font-size:1em; color:#95B3D7; font-family:"Calibri","sans-serif";} 
  .plug  {font-size: 0.7em; color:#95B3D7;}
  .hdr0  {font-size:1em; color:#FFF;    width: 95%;  background-color: #77d;   padding: 10px;               margin: 10px ;}
  .hdrA0 {width:100%; height:100%;}
  .hdrA0:hover {background-color:rgb(0,0,0,0);}
  .hdr1  {position:relative; font-size:1.5em; color:#FFF;    width: calc(100% - 20px);  background-color: #77d;   padding: 4px 10px 4px 10px;  margin: 4px 4px 4px 4px;}
  .hdr2  {position:relative; font-size:1.2em; color:#FFF;    width: 80%;  background-color: #99f;   padding: 4px 10px 4px 10px;  margin: 4px 4px 4px 4px;}
  .hdr2a {position:relative; font-size:1.2em; color:#FFF;    width: calc(100% - 20px);  background-color: #99f;   padding: 4px 10px 4px 10px;  margin: 4px 4px 4px 4px;}
  .hdr2b {position:relative; font-size:1.2em; color:#FFF;    width: calc(100% - 20px);  background-color: #99f;   padding: 4px 10px 4px 10px;  margin: 4px 4px 4px 4px;}
  .hdr2c {position:relative; font-size:1.2em; color:#FFF;    width: calc(100% - 20px);  background-color: #99f;   padding: 4px 10px 4px 10px;  margin: 4px 4px 4px 4px;}
  .hdr2d {position:relative; font-size:1.2em; color:#FFF;    width: calc(100% - 20px);  background-color: #99f;   padding: 4px 10px 4px 10px;  margin: 4px 4px 4px 4px; font-weight: bold;}
  .nrm   {font-size:0.6em; color:#365F91; width: 80%;  background-color: #77d;   padding: 10px;               margin: 0 10px;}
  th     {font-size:0.8em; color:#FFFFAA;                                        padding: 2px 4px 2px 4px;}
  tb     {border-style:solid; border-width:1px; border-color:#365F91;}
  tr     {font-size:0.8em; color:#365F91;}
  td     {padding: 2px 4px 2px 4px;}

.fitpage    { position:relative; width: 100%; min-width: 400px;}
.resdiv     { position:relative; width: 100%; }
.resbody    { display: table-row-group; }
.teamrestab { font-size:1.0em; width:  98%; border-collapse:collapse; padding: 2px 2px 2px 2px;}
.restab     { font-size:1.0em; width: 100%; border-collapse:collapse; padding: 2px 2px 2px 2px;}
.resrow     { font-size:1.1em; width: 100%; border-collapse:separate; background-color:#77d; text-align:left; margin: 2px;}
.teamresrow { font-size:1.1em; width: 100%; border-collapse:separate; background-color:#77d; text-align:left; margin: 2px;}

 .clstable   { font-size:1.0em; width: 100%; border:0px; border-spacing:0;}
 .clstr1     { font-size:1.0em; width: 100%; border:0px;}
 .clstr2     { font-size:1.0em; width: 100%; border:0px;}
 .clstr3     { font-size:1.0em; width: 100%; border:0px;}
 .clstr4     { font-size:0.8em; width: 100%; border:0px; border-spacing:10px;}
 .clstr5     { font-size:1.2em; width: 100%; border:0px;}
 .trsub      { border-top:1px dashed #77d;}
 .trmain     { border-top:2px solid  #77d; margin: 0px;background-color:#dadcff}
 .trsubx     { border-top:1px dashed #77d; border-bottom:1px dashed #77d;}
 .tdpos      { font-size:1.5em; border:inherit; font-weight:bold;}
 .tdfps      { font-size:1.0em; border:inherit; font-weight:normal; font-style:italic;}
 .tdnam      { font-size:1.2em; border:inherit; font-weight:bold;}
 .tdclb      { font-size:0.9em; border:none;    font-weight:normal; font-style:italic;}
 .tdbut      { font-size:1.1em; border:inherit; text-wrap:nowrap; font-style:italic;}
 .tdtea      { font-size:1.1em; border:inherit;}
 .tdfm       { font-size:1.2em; border:inherit;}
 .tdsy       { font-size:1.2em; border:inherit;}
 .tdar       { font-size:1.2em; border:inherit;}
 .tdpn       { font-size:1.2em; border:inherit;}
 .tdbn       { font-size:1.2em; border:inherit;}
 .tdtm       { font-size:1.2em; border:inherit;}
 .tddd       { font-size:1.2em; border:inherit;}
 .tdsy       { font-size:1.2em; border:inherit;}
 .tdar       { font-size:1.2em; border:inherit;}
 .tdhd       { font-size:1.2em; border:inherit;}
 .tdtt       { font-size:1.2em; border:inherit; text-align:center;}

 .tdqal      { font-size:1.3em; border:inherit; text-align:center;}
 .tdtot      { font-size:1.3em; border:inherit; text-align:center; font-weight:bold;}
 .spacer     { background-color: #fff;   padding: 2px;}

 .thtt1      { text-align:center; }
 .thtotal    { text-align:center; }
 .clstdleft  { min-width: 100px;  background-image: url("logo1.png"); background-repeat: no-repeat; background-position: center; border-bottom-width: 0;}
 .clstdleft2 { min-width: 100px;  background-image: url("logo2.png"); background-repeat: no-repeat; background-position: center; border-bottom-width: 0;}

 .clstd1 {font-size:1.4em; color:#FFF; width:  80%; border:0px; background-color: #f66;  padding: 10px;               margin: 10px 0 10px 10px;}
 .clstd2 {font-size:1.1em; color:#FFF; width:  80%; border:0px; background-color: #99f;  padding: 4px 10px 4px 10px;  margin: 0 10px;}
 .clstd3 {font-size:1.1em; color:#FFF; width:  80%; border:0px; background-color: #99f;  padding: 4px 10px 4px 10px;  margin: 0 10px;}
 .clstd4 {font-size:0.8em; color:#FFF; width:  80%; border:0px; background-color: #99f;  padding: 4px 10px 4px 10px;  margin: 10px 10px 10px 10px; font-weight: bold;}
 .clstd5 {font-size:1.1em; color:#FFF;                          background-color: #99f;  padding: 4px 10px 4px 10px;  margin: 4px 4px 4px 0px;}
 .warn   {font-size:1.1em; color:#F44; width:  80%; border:0px; background-color: #ff7;  padding: 4px 10px 4px 10px;  margin: 0 10px; border-bottom-width: 0;}

 .compname{ width: 90%;  background-color: #7777dd;  padding: .5em;  margin: .5em;}

 .classname{  width: 90%;  background-color: #f66;  padding: 4px  2px 4px  2px;  margin: 2px  2px;}
 .classdiv {  position:relative; width: calc(100% - 20px);  background-color: #f66;  padding: 4px 10px 4px 10px;  margin: 4px 4px 4px 4px;}
 .classname{  font-size:1.0em; display:inline;}
 .classtime{  font-size:0.7em; display:inline; float:right;}
 .Finished  {  background-color: #0b0;}
 .InProgress{  background-color: #bb0;}

 a {  color: white;  text-decoration: none; display: block; }
 a:hover   {  background-color: #775;}
 a:active  {  background-color: black;}
#a:visited {  background-color: #ccc;}

.ddhidden { height:     0; overflow: hidden;                 -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown  {                overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown1 { height:  50px; overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown2 { height:  70px; overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown3 { height:  90px; overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown4 { height: 110px; overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown5 { height: 130px; overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown6 { height: 150px; overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown7 { height: 170px; overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddshown8 { height: 190px; overflow: hidden; font-size: 1em; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; transition: height 0.3s ease; }
.ddth {font-size: 1.1em;  background-color:#77d;}
.ddtr {font-size: 1em;}
.ddtd {text-align: center; }
.ddbut {color: #77d; width: 20px; padding: 0px; margin: 0px;}

.filterdiv   { width: calc(100% - 20px); font-size:1.2em; color:#FFF; background-color: #f99;  padding: 4px 10px 4px 10px;  margin: 4px 4px 18px 4px; line-height: 180%;}
.filtersel   { flex: 1; border: 2px solid #ddd;  background: #eee;  padding: 2px;  transition: 0.4s; }
.filterlabel { font-size:1.2em; color:#6f6;  }
.filterspan  { display: inline-block; }

.spanButton  { background-color: #99f; border-radius: 15px; padding: 0px 8px 0px 8px;  cursor: pointer;}
.backButton  { display: inline; width: 20px; font-size: 0.7em; background-color: #88e; border-radius: 15px; padding: 2px 12px 2px 12px; vertical-align: 2px; cursor: pointer;}
.backButton:after {  content: "\25c0   Back"}  /* Back arrow and text- replace if you wish */

select {  flex: 1;}
select {  border: 2px solid #ddd;  background: #eee;  padding: 4px;  transition: 0.4s;}
select:hover, select:focus {  background: #ddd;}

option               { display: flex;  justify-content: flex-start;  gap: 20px;  border: 2px solid #ddd;  background: #eee;  padding: 10px;  transition: 0.4s;}
option:first-of-type { border-radius: 8px 8px 0 0;}
option:last-of-type  { border-radius: 0 0 8px 8px;}

option:not(option:last-of-type) { border-bottom: none;}
option:nth-of-type(odd)         { background: #fff;}

option:hover,
option:focus {  background: plum;}
option .icon {  font-size: 1.6rem;  text-box: trim-both cap alphabetic;}
selectedcontent .icon {  display: none;}
option:checked {  font-weight: bold;}

/*
select::picker-icon        {  color: #999;  transition: 0.4s rotate;}
select:open::picker-icon   {  rotate: 180deg;}
::picker(select)           {  border: none;}

option::checkmark {  order: 1;  margin-left: auto;  content: "✅";}
::picker(select)  {  opacity: 0;  transition: all 0.4s allow-discrete;}
::picker(select):popover-open {  opacity: 1;}
@starting-style   {  ::picker(select):popover-open {    opacity: 0;  }}
::picker(select)  {  top: calc(anchor(bottom) + 1px);  left: anchor(10%);}
*/