﻿h1, .h1 {
  font-size: 1.8rem;
}

h2, .h2 {
  font-size: 1.57rem;
}

h3, .h3 {
  font-size: 1.45rem;
}

h4, .h4 {
  font-size: 1.37rem;
}

th, td {
  padding: 15px;
  text-align: left;
  font-size: 100%
}

table {
  table-layout: auto;
  width: 50%;
}

table, th, td {
  border: 1px;
  border-style: solid;
  border-color: #DCDCDC;
}


.small-table-text {
  font-size: 80%;
  
}

.table .thead-light th{
background-color:#279fea;
color:#ffffff;
}

.table .tr_head th{
background-color:#279fea;
color:#ffffff;
}

.table-centred {

    width: 100%;
    margin: 0px auto;
}

.centered-cell {
text-align: center;
}

.right_aligned-cell {
text-align: right;
}

.left_aligned-cell {
text-align: left;
}

.centered-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*hidden contact form field so real users cant fill it in*/
form #website{ display:none; }


.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{
	display: block;
}
.dropdown-menu{
	margin-top: 0;
}
.dropdown-toggle{
	margin-bottom: 2px;
}
.navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{
	margin-bottom: 0;
}

.hline-bottom {

    border-bottom: 1px solid #000; /* horizontal rule */
}


#myBtn {
  display: none;
  position: fixed;
  bottom: 4px;
  right: 10px;
  z-index: 99;
  font-size: 15px;
  border: none;
  outline: none;
  background: rgba(0,0,0,1);
  color: white;
  cursor: pointer;
  border-radius: 3px;
}

#myBtn:hover {
     background:black;
     color:white; 
}


.box-with-border {
  padding: 5px;
  background-color: #F7F7F7;
  border: 1px solid #DDD;
  text-align: centre;
  margin-bottom: 10px; /* new */
}


/*	=================================
		Style for Comfort Chart Legend
	=================================
*/
.comfortTable {
	width: 100%;
	
}
.comfortTableFreezing {
	width: 100%;
	text-align: center;
	background-color: #004d99;
	color: white;
}
.comfortTableCold {
	width: 100%;
	text-align: center;
	background-color: #3399ff;
	color: white;
}
.comfortTableCool {
	width: 100%;
	text-align: center;
	background-color: #b3d9ff;
	color: black;
}
.comfortTableComfortable {
	width: 100%;
	text-align: center;
	background-color: #EDEDD7;
	color: black;
}
.comfortTableWarm {
	width: 100%;
	text-align: center;
	background-color: #ffcccc;
	color: black;
}
.comfortTableVeryWarm {
	text-align: center;
	background-color: #ff8080;
	color: white;
}
.comfortTableHot {
	width: 100%;
	text-align: center;
	background-color: #DD4D4D;
	color: white;
}
.comfortTableSweltering {
	width: 100%;
	text-align: center;
	background-color: #990000;
	color: white;
}

.drilldown {
    text-decoration: none !important;
}

/*	=================================
		Button (picker)
	=================================
*/
#button_menu {
	text-align: center;
	margin-bottom: 10px; /* new */
}
#button_menu button {
	display: inline-block;
	margin-right: 1em;
	margin-bottom: 0.2em;
	/*border: 1px solid #d9d9d9;
        color: #000;*/
	cursor: pointer;
}
#button_menu button:hover {
	/*background-color: #ffffff;*/
	box-shadow: 1px 1px 2px #919192;
	/*color: #34c0ff;*/
}
#button_menu .picked {
	box-shadow: -2px -2px 2px #272727 inset !important;
	/*background-color: #666666  !important;
	border-color: #666666;
        color: #000000*/
}
#button_menu a {
	text-decoration: none;
	/*color: #333333;*/
}
/*#button_menu a:hover {
	color: #0000FF;
}*/

 /*  ===================================
         Highcharts sun plot banding
     ===================================
 */
        .highcharts-plot-band-sun {
            fill: #ffd54d;
            fill-opacity: 0.5;
        }
        .highcharts-plot-band-night {
            fill: #000080;
            fill-opacity: 0.7;
        }
	.highcharts-light-plot-band-night {
            fill: #000080;
            fill-opacity: 0.4;
        }

.hidden_div {
	display: none;
}

.loading-spinner {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-100%, -100%);
	width: 100px;
	height: 100px;
	border: 3px solid #ccc;
	border-radius: 50%;
	border-top: 3px solid #3498db;
	animation: spin 1s linear infinite
}

@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

 
.theme-transition {
	  display: none;
}

.custom-text-color {
    color: #000; /* Set your desired text color */
}
