.clr-blue {
    color: #00ffff;
}

.t-red{
	color: #ff0000;
}

.h-nopad{
	display: inline;
}

.p-nopad{
	text-align: center;
	display: inline;
}

#ttblock{
	position: relative;
	left: 15%;
	display: block; 
	text-align: left;
}

.text-container {
  text-align: center;
}

.text-box{
  position: relative;
  vertical-align: top;
  top: 0px;  
  left: 0px;
  padding-left: 20px;
  display: inline-block; /* Make the width of box same as image */  
}

.text-box2{
  position: relative;
  top: 0px;  
  left: -15px; 
  vertical-align: top;  
  display: inline-block; /* Make the width of box same as image */
}

.close-btn {
  position: relative;
  display: block;
  box-sizing:border-box;
  width:20px;
  height:20px;
  top: 43px;
  left: 5px;  
  border-width:3px;
  border-style: solid;
  border-color:red;
  border-radius:100%;
  background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
  background-color:red;
  box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

#toptemps0, #toptemps1, #toptemps2,  #toptemps3, #toptemps4, #toptemps5, #toptemps6, #toptemps7, #toptemps8, #toptemps9, #toptemps10, #toptemps11, #toptemps12,
#toptemps13, #toptemps14, #toptemps15,  #toptemps16, #toptemps17, #toptemps18, #toptemps19, #toptemps20, #toptemps21, #toptemps22, #toptemps23, #toptemps24,
#toptemps25, #toptemps26,  #toptemps27, #toptemps28, #toptemps29, #toptemps30, #toptemps31{
	position: relative;
	top: -40px;
	width: 100%;
	height: 800px;	
	display: none;	
}

#toptemps_img0, #toptemps_img1, #toptemps_img2,  #toptemps_img3, #toptemps_img4, #toptemps_img5, #toptemps_img6, #toptemps_img7, #toptemps_img8, #toptemps_img9, 
#toptemps_img10, #toptemps_img11, #toptemps_img12, #toptemps_img13, #toptemps_img14, #toptemps_img15,  #toptemps_img16, #toptemps_img17, #toptemps_img18, 
#toptemps_img19, #toptemps_img20, #toptemps_img21, #toptemps_img22, #toptemps_img23, #toptemps_img24, #toptemps_img25, #toptemps_img26,  #toptemps_img27, 
#toptemps_img28, #toptemps_img29, #toptemps_img30, #toptemps_img31{
	width: 100%;
	height: 800px;	
}

#foo {
	width: 100%;
	height: 100%;
}

.msgBox{	
	display: none;	
	width: 270px;
	height: 40px;
	line-height: 40px;
	background-color: #fff;
	color: #0000ff;
	font-family: arial;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border: 7px 7px 7px 7px;
}

.foo-div {
	height: 1000px;
}

.wx-btns{
	background-color: #0000ff;
	color: #fff;
	border: 2px solid red;
	font-size: 18px;
	cursor: pointer;
	display: inline-block;
}

.blue-combo {
	font-family: Times New Roman;
	font-size: 17px;
	color: #FFF;
	background-color: #0000FF;  
	padding-left: 5px;
	padding-right: 5px;
	cursor: pointer;
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border: 7px 7px 7px 7px;
	display: inline-block;	
}

.tall-td{
	height: 10px;
}

.wind-container {
    width:100%;
    text-align:center;
	background-color: white;	
}
.wind-container > div {
    width: calc(100% / 17);  
    display: inline-block;
    vertical-align: top;       
	color: black;
	font-size: 16px;
    text-align:center;
    margin:0%;    
    padding-right:10px;	
}

.wind-container > span {
    color: blue;
}

.dtd {
  min-width: 50px;
}

.a-dotted{
	color: #fff;	
	text-decoration: underline dashed white;
}

.white-text {
  color: #fff;
  font-family: arial;
  font-size: 18px;
  padding-bottom: 10px;
  width: 50px;
  white-space: nowrap;  
}

.cmt{
  position: relative;
}

.CellComment{
  display: none;
  position: absolute; 
  z-index: 1;
  background-color: black;
  color: #fff;
  text-align: left;
  white-space: normal;
  overflow: auto;
  border-radius: 6px;
  padding: 15px 15px 15px 15px;
  left: 0px;
  width: 38vw;
  height: fit-content;    
}

.cmt:hover span.CellComment{
  display: block;
}

.switch {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 24px;
  top: 7px;  
  left: 10px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff0000;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0000ff;  
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(80px);
  -ms-transform: translateX(80px);
  transform: translateX(80px);
}

.on
{
  display: none;
}

.off 
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 65%;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial;
}

.on 
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 30%;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial;
}

input:checked + .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;}
  
.blank-box{
  position: relative;
  top: 0px;
  left: 0px;
  //width: 30px;    
  display: inline-block; /* Make the width of box same as image */  
}