/*
		JackBord_Styles_ver1a_23_June_2019.css

			These are the css styles for the new node js JackBord client.
*/



/*  BIG> LARGE Screen CSS LLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
html, body {
	background-color: white;
	font-family: verdana;
	font-size: medium;
	z-index:1000;
  margin: 0;
  width:99%;
  height: 100%;
}


.page_wrapper 
{
    display: grid;
    grid-template-areas: "page_header_left page_header" "page_content page_content";
    grid-template-rows: 0.1fr 10fr;
    grid-template-columns: 5% 95%;
    grid-column-gap: 5px;
    margin: 0;
    
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.page_header
{
    grid-area: page_header;
}

.header_table
{
  width:100%;
}

.page_header_left
{
    grid-area: page_header_left;
    font-size:x-small;
    text-align: center;
    align-self: center;
}


.page_content
{
    grid-area: page_content;

}


/*
    SVG AREA 
    This is where the svg items are frawn.
*/
#jbs_svg_area 
{
  position: fixed;
  z-index: 900;
  left:8px;
  top:50px;
  height:90%;
  width:100%;
}


/*
    Button AREA 
    This is where the buttons are drawn.
    Make sure its on top of the rest.
*/
#button_area 
{
  position: absolute;
  width: 100%;
  /* height: 100%; */
  z-index: 1000;
  left:8px;
  top:50px;
}


.show_prompt_input_css
{
  width:65%;
  font-family:Verdana;
  font-size:medium;
}

/*
    For the show page buttons..
*/
.shp_button
{
  font-size:medium;

  font-weight:bold;
  height:30px;
}





/* ------ Gauge Default Style ---------- */
.gauge-container {
  width: 150px;
  height: 150px;
  display: block;
  float: left;
  padding: 10px;
  background-color: #222;
  margin: 7px;
  border-radius: 3px;
  position: relative;
}
.gauge-container > .label {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  background: rgba(0,0,0,0.5);
  font-family: monospace;
  font-size: 0.8em;
  padding: 5px 10px;
}
.gauge-container > .gauge .dial {
  stroke: #334455;
  stroke-width: 2;
  fill: rgba(0,0,0,0);
}
.gauge-container > .gauge .value {
  stroke: rgb(47, 227, 255);
  stroke-width: 2;
  fill: rgba(0,0,0,0);
}
.gauge-container > .gauge .value-text {
  fill: rgb(47, 227, 255);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.8em;
}



/* @SMALL> Display Size < 499px   SSSSSSSSSSSSSSSSSSSSSSSSSSSS */
@media only screen and (max-width: 499px)
{

body {
	background-color: whitesmoke;
	font-family: verdana;
	font-size: medium;
	width:auto;
}

.shp_button
{
  font-size:small;
}

.show_prompt_input_css
{
  width:60%;
  font-family:Verdana;
  font-size:small;
}

} /* End Small Screen CSS */