#timer{
  background: #000;
  width: 100px;
  font: small-caps lighter 23px "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  text-align:left;
  color:#fff;
  border-left: 3px solid #ed1f24;
background-color:rgba(0, 0, 0, 1);
}



/* width */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #222;
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: #888;
}

#timedate {
  font: small-caps lighter 23px/150% "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  text-align:left;
  width: 50%;
  margin: 40px auto;
  color:#fff;
  border-left: 3px solid #ed1f24;
  padding: 20px;
}

#t1{ width: 100%;color:#fff;font-size:12px }
#t2{ margin-left: 5px; text-align: right }

#f1{color:#000; font-size: 10px}
#f2{color: #000; font-size:25px;}
#f3{color:#666;font-size:12px}
#f4{color:#666;font-size:12px}
#f5{color:#000;font-size:12px }

#f6{ border-top1: 1px solid #ff0; color:#ff0; text-align:right;  font-size:10px}
#f7{color:#003300;font-size:10px }
#f8{color:#ffffff;font-size:10px}

.ftop3{background: #000; text-align:center; 
 box-shadow: 0px 0px 0px 0px rgb(255 255 100 / 80%);
}
#ftop3{text-align:center;color:#fff;font-size:12px;}


#fullscreen{ background: #000; color: #fff; font-size: 16px; font-weight:bold; }
#logout{ background: #fff; color: #000; font-size: 16px; font-weight:bold; }
#notes{ background: #fff; color: #000; width: 400px; height: 200px;};
#addnote{color:#ffffff;font-size:14px}
#addnote a:link{ color: #fff; text-decoration: none; }
#addnote a:visited {color: #fff;  text-decoration: none;  border:1px solid #fff;}
#addnote a:hover{ color: #ffff00; }


#fcon{color:#00ffff;font-size:12px}
#fses{text-align:right;color:#ff0;font-size:11px}
#fdev{color:#ff0000;font-size:12px;}
#sestotaltime{ color:#78ff00;font-size:12px };
#sestotaltime2{ color:#fff;font-size:12px };

#f9{color:#00ff00;font-size:10px }
#f10{color:#b4ff00}
#f11{color:#b4ff00}
#f12{color:#00ff00;font-size:10px}
#f13{color:#fff;font-size:10px}
#f14{color:#ffffff;font-size:10px}
#f15{color:#00ff00;font-size:10px}
#f16{color:#F88017;font-size:10px}
#f17{color:#fff;font-size:10px}
#f18{font-size: 16px; font-weight:bold; color: #ffffff}

#f28{font-size: 16px; font-weight:bold; color: #ff9100}
#f21{
    font-size: 18px; 
    font-weight:bold; 
    color: #00ff00;
    display:inline-block;
    line-height:30px;
    border-radius:25%;
    border:1px solid #00ff00;
	margin: 10px;
	margin-bottom: 10px;
	}
#f27{
    font-size: 22px; 
    font-weight:bold; 
    color: #fff;
    display:inline-block;
    line-height:30px;
    border-radius:20%;
    border:1px solid #fff;
    background: #fff;
    color: #000;
    border: 1px solid #fff;
	margin: 10px;
	margin-bottom: 10px;
	}



a:link#f27,
a:visited#f27,
a:hover#f27 {
	text-decoration: none;
    font-size: 22px; 
    font-weight:bold; 
    color: #000;
    display:inline-block;
    line-height:30px;
    border-radius:10%;
    border:1px solid #fff;
	margin: 10px;
	margin-bottom: 10px;
	}

#f19{color: #ff0000}

#td1{margin-top: 0px; padding-top:0px; background: linear-gradient(to bottom, #000, #000000, #ff0); font-size:10px; border-right:1px solid #ff0000; color:#fff; }
#td2{ height:30px; font-size:18px; font-weight:bold; }
#td3{ height:55px;border-bottom:1px solid #333; font-size: 14px; font-weight:bold }
#td4{ height:60px;border-bottom:1px solid #333 }
#td5{ height:50px;border-bottom:1px solid #333}
#td6{ height:20px;border-bottom:1px solid #333 }
#td7{ height:20px;border-bottom:1px solid #333 };
#td8{ height:20px; }

#td9{ border-right:1px solid #333; width:85px; }
#td10{ height:50px; }
#td11{ font-size:12px;background:#ccc;color:#000;}
#td12{ font-size:12px;background:#fff;color:#000;}

#td12{ border-left: 0px solid #333; border-bottom: 0px solid #222;  background: #000; font-size:11px;color:#222 }
#td13{ padding: 0 0px 3px 5px; }
#tdtop5{ font-size:12px;background:#0335fc; color:#fff;}

#div2{ font-size:14px; }