@charset "UTF-8";
/* CSS Document */
:root {
	--ham533-hover: #add8e6;
	--ham533-border: #B5BC7C;
	--ham533-emphatic-background: #666;
	--ham533-slider-handle: #787878;
	--ham533-emphatic-color: #ccc;
	--ham533-gradient-high: rgba(100,0,0,1);
	--ham533-gradient-low: rgba(0,100,0,1);
	--ham533-gradient-medium: rgba(100,100,0,1);
	--ham533-gradient-background: linear-gradient(90deg, var(--ham533-gradient-high) 0%, var(--ham533-gradient-medium) 51%, var(--ham533-gradient-low) 100%);
}
.ham533 {
	border: .1em solid var(--ham533-border);
  	border-collapse: collapse;
  	width: 50%;
  	min-width: 40em;
  	max-width: 60em;
}
.ham533 .emphatic-number {
	text-align: right;
	font-weight:bold;
	margin:0;
	color: var(--ham533-emphatic-color);
	background-color: var(--ham533-emphatic-background);
	padding:.25em;
}
.ham533 input {
	width: 75%;
	min-width: 10em;
	font-size:1.1em;
	padding-top:0.2em;
	padding-bottom:0.2em;
}
.ham533 .ui-widget {
	font-size:1em;
	width: 75%;
	min-width: 10em;
}
.ham533 .ui-selectmenu-text {
	font-size:1em;
}
.ham533 .emphatic-label {
	font-weight:bold;
	/*font-size:120%;*/
	color: var(--ham533-emphatic-color);
	background-color: var(--ham533-emphatic-background);
	margin:0;
	padding:.25em;
}
.ham533 .flexible {
	display: table;
}
.ham533 .flexible .row {
	display: table-row;
}
.ham533 .flexible .cell {
	display: table-cell;
}
.ham533 .flexible .cell .bold {
	font-size: 110%;
	font-weight: bold;
}
.ham533 #historySlider {
  width: 7.5em;
}
.ham533 #accessSlider, .ham533 #meansSlider {
	width: 4.5em;
}
.ham533 td {
  vertical-align: top;
  margin: .333em;
  padding: .333em;
}
.ham533 .sliderValue {
  font-weight: 400;
}
.ham533 .sliderLabel {
  font-weight: 600;
}
.ham533 th {
	background: var(--ham533-gradient-background);
	color: white;
}
.ham533 .ui-slider-handle {
	outline: var(--ham533-emphatic-color) 2px;
    background: var(--ham533-slider-handle);
    border-radius: 25%;
}
.ham533 tr.button_row button {
	width: 10em;
	height: 2em;
	background-color: var(--ham533-emphatic-color);
	box-shadow: 4px 4px 2px 2px gray;
}
.ham533 tr.button_row button:hover {
	background-color: var(--ham533-hover);
}
.ham533 tr.heading_row {
	text-align:center;
}

.stormLow {
  color: #444;
  background-color: #3f3;
  width: 5em;
}

.stormMedium {
  color: #000;
  background-color: yellow;
  width: 5em;
}

.stormHigh {
  font-weight: bold;
  color: #000;
  background-color: red;
  width: 5em;
}

.stormCell {
  color: #fff;
  background-color: #000;
  font-weight: bold;
  font-size: 85%;
}