body {
  margin:0px;
  padding: 0;
  /*width:2052px;*/
  text-align:left;
  background-color: rgba(255, 255, 255, 0);
}
 
*:not(input):not(textarea) {
	 -webkit-touch-callout: none;
	 -webkit-user-select: none;
	 -khtml-user-select: none;
	 -moz-user-select: none;
	 -ms-user-select: none;
	 user-select: none;
}

#pump_aspect_control {
	width:100%;
	padding-bottom:75%;
	position:fixed;
    background-color:rgba(255, 255, 255, 0);
}

#pump_container {
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	max-width: 2048px;
	max-height: 1536px;
	position:absolute;
    background-color:rgba(255, 255, 255, 0);
}

#Map {
	width:2048rem;
	height:1536rem;
}

#Map area {
    outline: none;
}

#Led {
    position: absolute;
	top:769rem;
	left:252rem;
	width:396rem;
	height:466rem;	
	pointer-events: none;	
}

#Led img {
	width:396rem;
	height:466rem;
}

#display {
    margin: 0; padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
/* sizing */
#display {
    position: absolute;
    left: 720rem;
    top: 775rem;
    width: 604rem;
    height: 454rem;
}

#whiteScreen {
    position: absolute;
    left: 0rem;
    top: 0rem;
    right: 0rem;
    bottom: 0rem;
    background-color: white;
}

#onButtonMessage {
    position: absolute;
    left: 0rem;
    top: 0rem;
    right: 0rem;
    bottom: 0rem;
    background-color: #040221;
    color: white;
    font-size: 40rem;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
    padding: 20% 10% 20% 10%;
    text-align: center;
}


/*.on { background-image:  url("../screenshots/HomeScreen.PNG");}*/
.on { background-image:  url("../images/u19.png"); }
.off {  background-color: #333; }
/*.run { background-image: url("../screenshots/HomeScreen.PNG"); }*/
.run { background-image: url("../images/u16.png"); }
.selftest { background-image: url("../images/logo_back.png"); background-size:cover;}
/*.menu2 {  background-size:cover; background-image: url("../screenshots/HomeIntermittent.PNG"); }*/
.menu2 {  background-size:cover; background-image: url("../images/u13.png");}
.none {background-image: none;}

/*** Temporary -- week 31 -- History ***/
.history {background-image: url("../images/hx_3day.png");}

/************* Status Bar ************/
#statusbar {
    font-family: Arial, Helvetica, sans-serif;
    color: #ccc;
    vertical-align: middle;
    padding: 0rem;
    margin: 5rem 0rem 0rem 25rem; /* top right bottom left */
    height: 40rem;
    font-size: 30rem;
}
#statusbar_text {
    position:absolute;
    padding: 0; margin: 0;
    vertical-align: middle;
	top: 5rem;
    height: 30rem;
	left: 20rem;
	width: 360rem;
    line-height: 30rem;
} 
#statusbar .batt { 
    position:absolute;
    height: 100%;
	left: 400rem;
	width: 200rem;
    /* margin: 2rem 0rem 0rem 402rem; /* top right bottom left */
}
#statusbar .batt img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    width:auto;
    height: 25rem;
    padding: 0;
    max-height: 80%;
}
#batt_percentage {
    display: inline-block;
    vertical-align: middle;
    padding-left: 4rem;
    margin: 0;
    height: 24rem;
    line-height: 24rem;
    font-size: 24rem;
}

/***************** Footer  ************/
footer {
    color: #A0A0A0;
    position:absolute; top: 410rem;
    height: 32rem;
    font-family: "Arial Narrow", Arial;
    font-stretch: condensed;
    font-size: 32rem;  
}

footer > div {
    display: inline-block;
    text-align: center;
    width: 144rem;
    height: 32rem;
}

#orbit { width: 146rem; height:28rem; position:absolute; top:5rem; left:5rem; }

/*************** Run / Pause Screen *************/
#run_screen {
    height:385rem;
}

#run_screen div {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    display: block;
	position: absolute;
}

#run_screen div.arrow {
    padding-left: 5rem;
    text-align: right;
}
#run_screen div.arrow img {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
}
#run_screen div.firstrow {
    position:absolute; top: 0rem;
    width:100%;
    height: 160rem;
}
#run_screen div.secondrow {
    position:absolute; top: 160rem;
    height: 125rem;
    width:100%;
    line-height: 125rem;
}
#run_screen div.thirdrow {
    position: absolute; top: 302rem;
    height: 100rem;
    width:100%;
    line-height: 100rem;
}
#run_screen div.label {
    text-align: left;
    left: 4rem;
    width: 245rem;
    padding-left: 12rem;
    padding-top: 12rem;
    font-size: 56rem;
}
#run_screen div.value { 
    text-align: right;
    left: 364rem;
    width: 190rem;
    padding-top: 15rem;
    font-size: 90rem; 
}
#run_screen div.units { 
    font-size: 32rem;
    /*padding-left: 10rem*/
    font-family: "Arial Narrow", Arial;
    font-stretch: condensed;
    left: 286rem;
    width: 78rem;
    padding-top: 14rem;
    color: #BBBBBB;
}

/* run progress bar */
#runProgBar {
  position: absolute; left: 22rem; top: 57rem;
  width: 512rem;
  height: 52rem;
}

.runProgLayer {
	position: absolute;left:0rem;right:0rem;top:0rem;bottom:0rem;
}

#run_prog_img1 {
  position: absolute;
  width: 508rem;
  height: 38rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem;
}
#run_prog_img2 {
  height: 38rem;
  width: 0rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem 6rem 6rem 9rem;
  background-color: white;
}
#run_prog_img3 {
  width: 254rem;
  height: 38rem;
  border-style: solid none solid solid;
  border-width: 2rem;
  border-color: black;
  border-radius: 9rem 0rem 0rem 9rem;
}
#run_prog_text {
  position: absolute; left: 34rem; top: 61rem;
  font-size: 34rem;
  color:#2597d5!important;
  font-weight: 300;
}

.runProgIntP {
  position: absolute;
  width: 115rem;
  height: 38rem;
}

.runProgIntPCntnr {
  position: absolute; top: 0rem; bottom:0rem; left:0rem; right:0rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem;
}

#runProgIntP1 {
	left: 46rem;
}
#runProgIntP2 {
	left: 191rem;
}
#runProgIntP3 {
	left: 336rem;
}

.runProgIntText {
  position: absolute; left: 10rem; top: 0rem; right: 10rem; bottom:0rem;
  font-size: 34rem;
  color:#2597d5!important;
  font-weight: 300;
}

.runProgIntFiller {
  position: absolute; top: 0rem; height:52rem; width:30rem; background-size:contain;
}

.runProgIntPBar {
  left:0rem; top:0rem; bottom:0rem;
  width: 0rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem 6rem 6rem 9rem;
  background-color: white;
}

#runProgIntPrev {
	left:3rem; width:43rem;
	background-image:url("../images/runProgIntMore.png");
}
#runProgIntGap1 {
	left:161rem;
	background-image:url("../images/runProgIntGap.png");
}
#runProgIntGap2 {
	left:306rem;
	background-image:url("../images/runProgIntGap.png");
}
#runProgIntNext {
	left:451rem; width:43rem;
	background-image:url("../images/runProgIntMore.png");
}

#run_mag_img {
  position: absolute; left: 470rem; top: 55rem;
  width: 68rem;
  height: 68rem;
}
/* run screen top right arrow - push down */
#right_img_1 { margin-top: 6rem;}

/* 'Portion' above 'Volume' if intermittent */
.run-portion {
    position: absolute;
    top: -40rem;
    left: 5rem;  
    font-size: 32rem; color: #eee!important;
}
/* Intermittent screens - below "total volume" shows portion info */
.run-row2-subtext {
    position: absolute; top: 55rem;  left: 20rem;   
    font-size: 32rem; color: #bbb!important;
}

/* xx:xx h to go */
#runprog_time_rem_holder {
    position: absolute; top: 108rem; left: 234rem;
    font-size: 32rem;
    color: white;
}

/**** Details ****/
.det_prog_img {
  position: absolute; left: 5rem; top: 34rem;
  height: 24rem;
}
#det_prog_img1 {width: 490rem;}
#det_prog_img2 {/*width: 85rem;*/}

.details_text {position: absolute; font-size: 24rem; /*margin-top: -4rem;*/}
#det_deliv_txt {left: 5rem; top: 4rem; font-size: 24rem;}
#det_vol_txt {left: 310rem;top: 4rem;}
#det_rem_txt {left: 250rem;top: 64rem;text-align: right;}

/*************** Self Test Screen *************/
.selftest-content-1 {
      position: absolute; left: 283rem; top: 150rem;
      height: 160rem; width: 300rem;  
      text-align: left;
      color: rgb(204, 204, 204);
      font-family: Arial;
      font-size: 28rem;
	  line-height: 48rem;
    }   
    .selftest-service { padding: 15rem; }
    .selftest-content-2 {
      position: absolute; left: 110rem; top: 324rem;
      height: 77rem; width: 390rem;         
      text-align: center;
      color: rgb(204, 153, 102);
      font-family: Arial; font-size: 24rem;
    }
    .selftest-101-img-1 {
      position: absolute; top: 368rem; left: 210rem;
      width: 193rem; height: 4rem;     
    }
    .selftest-101-img-2 {
      position: absolute; top: 368rem; left: 211rem;      
      height: 4rem;  /*width: 80rem;*/
    }

/*************** Fill Set Screen *************/
.fillset-content-1 {
      position: absolute; top: 150rem; left: 150rem;
      height: 100rem; width: 280rem;     
      text-align: center;
      color: white;
      font-family: Arial; font-size: 28rem;
      text-align: left;
}
/* 'stop' */
.fillset-content-2 {
    position: absolute;  top: 370rem; left: 50rem;
    height: 30rem; width: 335rem;
    text-align: center;
    color: white;
    font-family: Arial; font-size: 24rem;
}
#fs_img1 { position:absolute; left: 180rem; top: 24rem; width:237rem;height:342rem;}
#fs_anim { position:absolute; left: 332rem; top: 138rem; width:86rem;height:228rem;display:none;}

/*************** Error/Warning/Info Screens *************/
.error-header {
    position: absolute; top:20rem;
    height: 120rem; width: 599rem;
    text-align: center;
    color: yellow;
    font-family: Arial; font-size: 28rem;
}
.error-header img {
	height: 80rem;
}
#info_screen {
	position: absolute;
	height: 100%;width:100%;
}
.info-header {
    position: absolute; left: 20rem; top: 5rem;
    height: 50rem; width: 400rem;
    text-align: left;
    color: yellow;
    font-family: Arial; font-size: 32rem;
    display:inline block;
}
.info-header-img { position: absolute; left: 0rem; top: 5rem; height:42rem;}
/*#error_img { position: absolute; left: 210rem; top: 120rem;}*/
.err-text {
    position:absolute; top: 170rem;
    width: 599rem;
    text-align: center;
    color: yellow;
    font-family: Arial; font-size: 96rem;
}

.info-header-text { position: absolute; left: 60rem; top: 10rem;}
.info-cntnr {
		position: absolute; 
		top: 30rem; bottom: 0rem;
		left: 0rem; right: 0rem;
		overflow-y: scroll;
        margin: 20rem;
}
.info-text {
        font-family:Arial; font-size: 32rem;
        color: white;
        padding: 10rem;
        position: absolute;
}
hr {
    width: 90%;
    height: 1rem;
    border:0;
    background:#909090;
    margin-top: 15rem; margin-bottom: 15rem;
}
/*************** History screen *************/
#hx_img {
	width:604rem;
	height:454rem;
	background-image:url('../images/history/HistoryDm0.png');
	background-size:contain;
	background-repeat:no-repeat;
}
.hx-day {
	position:absolute;
	width:50rem;
	height:40rem;
	top:328rem;
	font-family:Arial;
	font-size: 30rem;
	color: white;
	text-align:center;
}
.hx-day-sel {
	color: #fcfc00;
}
#hx_day_m6 {left:41rem;}
#hx_day_m5 {left:105rem;}
#hx_day_m4 {left:169rem;}
#hx_day_m3 {left:233rem;}
#hx_day_m2 {left:297rem;}
#hx_day_m1 {left:361rem;}
#hx_day_m0 {left:425rem;}

.hx-date {
	position:absolute;
	left:41rem;
	width:430rem;
	height:40rem;
	font-family:Arial;
	font-size: 32rem;
	color: #fcfc00;
}
#hx_date {
	top:376rem;
	text-align:center;
}
#hx_mdate {
	top:80rem;
	text-align:left;
}


/*************** Intermittent Review/Confirm screen *************/
/** TODO: Remove, no longer using **/
.intreview-header {
    position:absolute; top:5rem; left:20rem;
    font-size:30rem;  color: #ccc;
}
.intreview-content {
    font-family:Arial; font-size: 36rem; color: white;
    margin-top: 25rem; margin-left: 35rem;
}
.intreview-row {  margin:0; padding:0; width:515rem; }

.intreview-param { 
    display:inline-block;
    margin-bottom: 6rem; 
    width: 220rem;     
    padding-left: 10rem;
}
.intreview-value {
    display:inline-block;
    text-align:right;           
    width: 170rem;
    font-size: 38rem;
}
.intreview-units {
    display:inline-block;
    font-size: 28rem; color: #eee;          
    width: 75rem;       
    margin-left: 20rem;
}
.intreview-rtbutton {
    position:absolute; top: 370rem; left: 450rem;
    font-family:Arial; font-size: 38rem; color: #ddd;
}
.intreview-selectarrow {
    position: absolute; top: 370rem; left: 570rem;     
    height: 47rem; width: 21rem;
}

/*************** Therapy Information Screen *************/
#therapy_information_screen {
/*	background-image:url('../images/TherapyInformationTemplate.png');
	background-size:contain; */
	height:100%;	
}
#th_inf_row1 {
	top:10rem;
}
#th_inf_row2 {
	top:144rem;
}
#th_inf_row3 {
	top:278rem;
}
	
.th-inf-row {
	position:absolute;
	left:0rem;
	width:604rem;
	height:134rem;
	background-image:url('../images/TherapyInformationRowBg.png');
	background-size:contain;
	/* opacity:0.5; */
}
.th-inf-row div {
	position:absolute;
	width:137rem;
	text-align:center;
}
.th-inf-row span {
	line-height:30rem;
    display: inline-block;
    vertical-align: middle;
}
.th-inf-label {
	font-size:22rem;
	top:30rem;
	height:62rem;
    line-height: 62rem;
	/* background-color:#00FF007F; */
}
.th-inf-text {
	font-size:30rem;
	top:67rem;
	height:62rem;
    line-height: 62rem;
	/* background-color:#0000FF7F; */
}
.th-inf-bk { color:black; }
.th-inf-bl { color:blue; }
.th-inf-wt { color:white; }
.th-inf-c1 { left:21rem; }
.th-inf-c2 { left:226rem; }
.th-inf-c3 { left:431rem; }

/*************** Portion Details Screen *************/
#portion_details_screen {
	height:409rem;	
}
#pds_highlight {
	width:100%;
	height:409rem;	
	background-image:url('../images/PanelL.png');
	background-size:contain;
	background-repeat:no-repeat;
}
#pds_intBar {
  position: absolute; left: 0rem; top: 57rem;
  width: 604rem;
  height: 52rem;
}
.pds_intPLayer {
	position: absolute;left:0rem;right:0rem;top:0rem;bottom:0rem;
}
.pds_intP {
  position: absolute;
  width: 135rem;
  height: 38rem;
}
.pds_intPCntnr {
  position: absolute; top: 0rem; bottom:0rem; left:0rem; right:0rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem;
}
.pds_intPText {
  position: absolute; left: 10rem; top: 0rem; right: 10rem; bottom:0rem;
  font-size: 30rem;
  color:#2597d5!important;
  font-weight: 300;
}
.pds_intPFiller {
  position: absolute; top: 0rem; height:52rem; width:55rem;	background-size:100% 52rem;
}
.pds_intPBar {
  position:absolute;
  left:0rem; top:0rem; bottom: 0rem;
  width: 2rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem 6rem 6rem 9rem;
  background-color: white;
}

#pds_intP1 {
	left: 20rem;
}
#pds_intP2 {
	left: 210rem;
}
#pds_intP3 {
	left: 400rem;
}
#pds_intGap1 {
	left:155rem;
	background-image:url("../images/runProgIntGap.png");
}
#pds_intGap2 {
	left:345rem;
	background-image:url("../images/runProgIntGap.png");
}
#pds_intNext {
	left:535rem; width:43rem;
	background-image:url("../images/runProgIntMore.png");
}

.pdetails-content1 {
    position:absolute; top: 106rem; left: 16rem;
    font-family:Arial; font-size:30rem; color: white;
    padding: 10rem 20rem 5rem 20rem; /* top right bottom left */
}
.pdetails-content2 {
    position:absolute; top: 315rem; left: 30rem;
    font-size:30rem;
    color:  white;
}
.pdetails-param {
    display:inline-block;
    width: 300rem; 
    padding-bottom: 5rem; 
}
.pdetails-unit {
    display:inline-block;
    width: 80rem; 
}
.pdetails-value {
    display:inline-block;
    width: 120rem; 
    text-align:right; 
}
/* arrows */
.pdetails-leftarrow { position: absolute;  top: 195rem; left: 550rem;  height:55rem}
.pdetails-rightarrow { position: absolute;  top: 345rem; left: 550rem;  height:55rem}


/*************** 'External' buttons *************/
#startstop_div {
    position: absolute; top:1280rem; left: 120rem;
}
#elapsed_time {
    position: absolute; top: 1380rem; left: 120rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:48rem;
    color:#333;
}
#elapsed {
    font-family:Consolas;
    font-size:56rem;
}
#alarm_buttons {
    position: absolute; top: 1100rem; left: 1765rem;
}

.mybtn { 
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 22rem;
    width: 195rem; height: 70rem;
    margin: 10rem;
    padding: 2rem;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 6rem;
    background-image: none;
    border: 1px solid transparent;
    -webkit-appearance: button;
    cursor:pointer;
}
.mybtn:focus { outline:0;}
.mybtn:hover{color:#333;text-decoration:none}
.mybtn[disabled]{cursor:default;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}

/* blue buttons */
.mybtn-ltblue {color: #fff;background-color: #5bc0de;border-color: #46b8da;}
.mybtn-ltblue:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.mybtn-ltblue:active {color:#fff;background-color:#269abc;border-color:#1b6d85}
.mybtn-ltblue[disabled],.mybtn-ltblue[disabled]:active,
.mybtn-ltblue[disabled]:focus,.mybtn-ltblue[disabled]:hover{background-color:#5bc0de;border-color:#46b8da}
.mybtn-blue {color:#fff;background-color:#337ab7;border-color:#2e6da4}
.mybtn-blue:hover{color:#fff;background-color:#286090;border-color:#204d74}
.mybtn-blue:active {color:#fff;background-color:#204d74;border-color:#122b40}
.mybtn-blue[disabled],.mybtn-blue[disabled]:active,
.mybtn-blue[disabled]:focus,.mybtn-blue[disabled]:hover{background-color:#337ab7;border-color:#2e6da4}

/* grey/white buttons */
.mybtn-white {color:#333;background-color:#fff;border-color:#ccc;}
.mybtn-white:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}
.mybtn-white:active {color:#333;background-color:#d4d4d4;border-color:#8c8c8c}
.mybtn-white[disabled],.mybtn-white[disabled]:active,.mybtn-white[disabled]:focus,
.mybtn-white[disabled]:hover{background-color:#fff;border-color:#ccc}

/***************  Temporary *************/
#under-construction{
    display:none;
    position:absolute;
    top:600rem; left: 840rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style:italic;
    color:orange;
    font-size:28rem;
    text-align:center;
}

#btnDbg {
    position:absolute; top:200rem; left:100rem; height:45rem; width:160rem;
    font-size:30rem;
    margin: 5rem;
    padding: 2rem;
    background-color:white; border: 1px solid #ddd; color: #ddd;
}
#btnDbg2 {
    position:absolute; top:250rem; left:100rem; height:45rem; width:160rem; 
    font-size:30rem;
    margin: 5rem;
    padding: 2rem;
    background-color:white; border: 1px solid #ddd; color: #ddd;
}