#pui {
  position: relative;
}


DIV.RI {
		animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #F9D1FF;
  }
  50% {
    background-color: #FFFFCC;
  }
  100% {
    background-color: #F9D1FF;
  }
}

INPUT.RIold { background-color: powderblue; background-image: none; }
INPUT.RI { animation: pulse 5s infinite;  }

TEXTAREA.RED { color: red;}
TEXTAREA.BLU { color: blue;}
TEXTAREA.GRN { color: green;}
TEXTAREA.WHT { color: Black;}
TEXTAREA.BLU { color: blue;}
TEXTAREA.YLW { color: yellow; text-shadow: 0 1px 0 #222;}
TEXTAREA.PNK { color: magenta;}

TEXTAREA.HI { font-weight: bold; }
TEXTAREA.RI_old { background-color: powderblue; }
TEXTAREA.RI { animation: pulse 5s infinite; }


.hybrid DIV.RI { background-color: powderblue; }
.hybrid INPUT.RI { background-color: powderblue; background-image: none; }


@keyframes blink {
to { color: white; }
}
DIV.BL {
     animation: 1s steps(2, start) 0s normal none infinite running blink;
     color: red;
}

DIV.BL_BLUE {
     animation: 1s steps(2, start) 0s normal none infinite running blink;
     color: blue;
}



/*--------------------------------------------------------------*/
/* BARJ count down in CSS */
/* Play with speed and easing of the animation */
/* =========================================== */
/* Play with speed and easing of the animation */
/* =========================================== */
.digit {
  display: inline-block;
  font-size: 200px;
  color: black;
  height: 180px;
  line-height: 1;
}

.time-part-wrapper {
  display: inline-block;
  margin-right: 50px;
  position: relative;
}
.time-part-wrapper:not(:last-child):after {
  content: ":";
  display: block;
  width: 30px;
  height: 230px;
  position: absolute;
  top: 0px;
  right: -30px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 200px;
  line-height: 0.9;
}

.time-part {
  width: 140px;
  text-align: center;
  height: 180px;
  overflow: hidden;
  display: inline-block;
  margin-left: -5px;
  box-sizing: border-box;
}
.time-part .digit-wrapper {
  animation-timing-function: cubic-bezier(1, 0, 1, 0);
}
.time-part.minutes.tens .digit-wrapper {
  animation-name: minutes-tens;
  animation-duration: 3600s;
  animation-iteration-count: 1;
}
.time-part.minutes.ones .digit-wrapper {
  animation-name: minutes-ones;
  animation-duration: 600s;
  animation-iteration-count: 6;
}
.time-part.seconds.tens .digit-wrapper {
  animation-name: seconds-tens;
  animation-duration: 60s;
  animation-iteration-count: 60;
}
.time-part.seconds.ones .digit-wrapper {
  animation-name: seconds-ones;
  animation-duration: 10s;
  animation-iteration-count: 360;
}
.time-part.hundredths.tens .digit-wrapper {
  animation-name: hundredths-tens;
  animation-duration: 1s;
  animation-iteration-count: 3600;
}
.time-part.hundredths.ones .digit-wrapper {
  animation-name: hundredths-ones;
  animation-duration: 0.1s;
  animation-iteration-count: 36000;
}

@keyframes minutes-tens {
  0% {
    transform: translateY(-180px);
  }
  16.66667% {
    transform: translateY(-360px);
  }
  33.33333% {
    transform: translateY(-540px);
  }
  50% {
    transform: translateY(-720px);
  }
  66.66667% {
    transform: translateY(-900px);
  }
  83.33333% {
    transform: translateY(-1080px);
  }
}
@keyframes minutes-ones {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}
@keyframes seconds-tens {
  0% {
    transform: translateY(-180px);
  }
  16.66667% {
    transform: translateY(-360px);
  }
  33.33333% {
    transform: translateY(-540px);
  }
  50% {
    transform: translateY(-720px);
  }
  66.66667% {
    transform: translateY(-900px);
  }
  83.33333% {
    transform: translateY(-1080px);
  }
}
@keyframes seconds-ones {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}
@keyframes hundredths-tens {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}
@keyframes hundredths-ones {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}
body {
  background: #FFF;
  margin: 0;
  font-family: "Aldrich";
}

.wrapper {
  margin: 100px auto;
  width: 1000px;
  position: relative;
}
.wrapper:before, .wrapper:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  height: 20px;
  z-index: 10;
}

/*--------------------end if countdown in CSS */


/*
* TMW  R2014.3
* BARJ I have copy mobile-device-layout from profoudnui.css and added tmw- as prefix
*   changes from original/
*     1- top bar background color - soft-gray
*     2. botttom bar,, color - soft-gray
*/


div.tmw-mobile-device-layout {
  z-index: 8;
}
div.tmw-mobile-device-layout table {
  empty-cells: show;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
div.tmw-mobile-device-layout td.top-bar, div.tmw-mobile-device-layout div.top-bar {
 
  /*  background-color: #2175af;  */
  background-color: #CCFFFF;
  
  /*background-image: url(/profoundui/proddata/images/layouts/mobilebar3.png);*/
  /*background-image: url(/profoundui/proddata/images/layouts/mobilebar1.png);*/
  background-image: none; /* necessary to help avoid conflicts with user style sheets when background-color is used */
  
  /*background: -moz-linear-gradient(top, #4a9aea 42%, #2179e5 100%) repeat scroll 0 0 transparent);*/
  /*background: -webkit-linear-gradient(top, #4a9aea 42%,#2179e5 100%) repeat scroll 0 0 transparent;*/

  background: -moz-linear-gradient(top, #CCFFFF 42%, #CCFFFF 100%) repeat scroll 0 0 transparent;  /* for FireFox */
  /*background: -webkit-linear-gradient(top, #CCFFFF 42%, #CCFFFF 100%) repeat scroll 0 0 transparent;*/
  /*background: -webkit-linear-gradient(left, transparent 42%,#ccffff 50%,transparent 100%);*/
  background: -webkit-linear-gradient(top, #ffffff,#c0c0c0); /* gradient from top to bottom, white to dark gray - for Google Chrome */


  background-repeat: repeat-x;
}
div.tmw-mobile-device-layout td.top-bar, div.tmw-mobile-device-layout div.top-bar {
  height: 55px;
}
div.tmw-mobile-device-layout td.content-section, div.tmw-mobile-device-layout div.content-section {
  background-color: #eeeeee;
  
   /* background-color: #eeeeee;*/
}
div.tmw-mobile-device-layout div.content-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}
div.tmw-mobile-device-layout td.bottom-bar, div.tmw-mobile-device-layout div.bottom-bar {
  /*background-color: #000000;*/
  background-color: #CCFFFF;
 /* background-image: url(/profoundui/proddata/images/layouts/mobilebar4.png); */
   background-image: url(/profoundui/proddata/images/layouts/mobilebar1.png);

 /* background: -moz-linear-gradient(center top , #45484D, #000000) repeat scroll 0 0 transparent;*/
 /* background: -webkit-linear-gradient(#45484D, #000000) repeat scroll 0 0 transparent;*/
  
  background: -moz-linear-gradient(center top , #CCFFFF, #CCFFFF) repeat scroll 0 0 transparent;
  background: -webkit-linear-gradient(#CCFFFF, #CCFFFF) repeat scroll 0 0 transparent;
  
  background-repeat: repeat-x;
}
div.tmw-mobile-device-layout td.bottom-bar, div.tmw-mobile-device-layout div.bottom-bar {
  height: 20px;
  /* barj original = height: 55px;   */
}
.transparent-textbox {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 16px;
  border: medium none;
  margin: 0;
  background: transparent; 
  line-height: 1.4em;
  min-height: 1.4em;
  outline: 0 none;
  color: #333333;
  text-shadow: 0 1px 0 #0000FF;	
}
.tmw-mobile-textbox {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 16px;
  border: 1px solid #cccccc;
   /*border: 1px solid #cccccc;*/
  margin: 0;
  background-color: #0000FF; 
  line-height: 1.4em;
  min-height: 1.4em;
  outline: 0 none;
  color: #333333;
  text-shadow: 0 1px 0 #0000FF;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
div.tmw-mobile-device-layout div.content-section div.label {
  color: #222222;
  font-weight: bold;
  text-shadow: 0 1px 0 #0000FF;
  font-size: 16px;
  font-family: Helvetica,Arial,sans-serif;
  text-align: left;
  text-overflow: ellipsis;
}
div.tmw-mobile-device-layout div.top-bar div.label {
  /*color: #0000FF;*/
  color: #45484D;
  font-weight: bold;
  text-shadow: 0 1px 0 #222222;
  font-size: 16px;
  font-family: Helvetica,Arial,sans-serif;
  text-align: center;
  text-overflow: ellipsis;
}


/*
* TMW  R2014.3
* RUSD tmw-mobile-device-layout-2 is a copy of tmw-mobile-device-layout with background color changes
*   changes from original/
*     1- top bar background color - soft-gray
*     2. botttom bar,, color - soft-gray
*/


div.tmw-mobile-device-layout-2 {
  z-index: 8;
}
div.tmw-mobile-device-layout-2 table {
  empty-cells: show;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
div.tmw-mobile-device-layout-2 td.top-bar, div.tmw-mobile-device-layout-2 div.top-bar {
 
  /*  background-color: #2175af;  */
  /*  background-color: #CCFFFF;  */
  background-color: #f5faf6;
  
  /*background-image: url(/profoundui/proddata/images/layouts/mobilebar3.png);*/
  /*background-image: url(/profoundui/proddata/images/layouts/mobilebar1.png);*/
  background-image: none; /* necessary to help avoid conflicts with user style sheets when background-color is used */
  
  
  /*background: -moz-linear-gradient(top, #4a9aea 42%, #2179e5 100%) repeat scroll 0 0 transparent);*/
  /*background: -webkit-linear-gradient(top, #4a9aea 42%,#2179e5 100%) repeat scroll 0 0 transparent;*/

  /*background: -ms-linear-gradient(#ffffff, #c0c0c0);*/ /*For IE10*/
  /*background: -moz-linear-gradient(top, #CCFFFF 42%, #CCFFFF 100%) repeat scroll 0 0 transparent;*/  /* for FireFox */
  /*background: -webkit-linear-gradient(top, #CCFFFF 42%, #CCFFFF 100%) repeat scroll 0 0 transparent;*/
  /*background: -webkit-linear-gradient(left, transparent 42%,#ccffff 50%,transparent 100%);*/
  background: -webkit-linear-gradient(top, #ffffff,#c0c0c0); /* gradient from top to bottom, white to dark gray - for Google Chrome */


  background-repeat: repeat-x;
}
div.tmw-mobile-device-layout-2 td.top-bar, div.tmw-mobile-device-layout-2 div.top-bar {
  height: 55px;
}
div.tmw-mobile-device-layout-2 td.content-section, div.tmw-mobile-device-layout-2 div.content-section {
  background-color: #f5faf6;
  
   /* background-color: #eeeeee;*/
}
div.tmw-mobile-device-layout-2 div.content-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}
div.tmw-mobile-device-layout-2 td.bottom-bar, div.tmw-mobile-device-layout-2 div.bottom-bar {
  /*background-color: #000000;*/
  /*background-color: #CCFFFF;*/
    background-color: #f5faf6;
    
 /* background-image: url(/profoundui/proddata/images/layouts/mobilebar4.png); */
 /*  background-image: url(/profoundui/proddata/images/layouts/mobilebar1.png); */
    background-image: none;

 /* background: -moz-linear-gradient(center top , #45484D, #000000) repeat scroll 0 0 transparent;*/
 /* background: -webkit-linear-gradient(#45484D, #000000) repeat scroll 0 0 transparent;*/
  
  background: -moz-linear-gradient(center top , #CCFFFF, #CCFFFF) repeat scroll 0 0 transparent;
  /* background: -webkit-linear-gradient(#CCFFFF, #CCFFFF) repeat scroll 0 0 transparent; */
  background: -webkit-linear-gradient(top, #c0c0c0,#ffffff); /* gradient from top to bottom, white to dark gray - for Google Chrome */

  background-repeat: repeat-x;
}
div.tmw-mobile-device-layout-2 td.bottom-bar, div.tmw-mobile-device-layout-2 div.bottom-bar {
  height: 20px;
  /* barj original = height: 55px;   */
}
.transparent-textbox {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 16px;
  border: medium none;
  margin: 0;
  background: transparent; 
  line-height: 1.4em;
  min-height: 1.4em;
  outline: 0 none;
  color: #333333;
  text-shadow: 0 1px 0 #0000FF;	
}
.tmw-mobile-textbox {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 16px;
  border: 1px solid #cccccc;
   /*border: 1px solid #cccccc;*/
  margin: 0;
  background-color: #0000FF; 
  line-height: 1.4em;
  min-height: 1.4em;
  outline: 0 none;
  color: #333333;
  text-shadow: 0 1px 0 #0000FF;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
div.tmw-mobile-device-layout-2 div.content-section div.label {
  color: #222222;
  font-weight: bold;
  text-shadow: 0 1px 0 #0000FF;
  font-size: 16px;
  font-family: Helvetica,Arial,sans-serif;
  text-align: left;
  text-overflow: ellipsis;
}
div.tmw-mobile-device-layout-2 div.top-bar div.label {
  /*color: #0000FF;*/
  color: #45484D;
  font-weight: bold;
  text-shadow: 0 1px 0 #222222;
  font-size: 16px;
  font-family: Helvetica,Arial,sans-serif;
  text-align: center;
  text-overflow: ellipsis;
}

DIV.top-line {
  color: #0000ff;
}

DIV.YLW { 
	color: #EBA334; 
	font-weight: bold; 
	text-shadow: 0 1px 0 #222;
}

INPUT.YLW { 
	color: #ff9900;
	text-shadow: 0 1px 0 #222;
}

INPUT.on-textbox-focus {
  font-family: Consolas, Monospace;
  font-size: 14px;
  z-index: 20;
  margin: 0;
  padding-left: 0;
  padding-right: 1;
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid #0000ff;
  background: #ffff99;
}
INPUT.textbox-focus-blue {
  font-family: Consolas, Monospace;
  font-size: 14px;
  z-index: 20;
  margin: 0;
  padding-left: 0;
  padding-right: 1;
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid #0000ff;
  background: #ffff99;
}

.tmw-mobile-constant {                
  font-family: Sans-Serif; 
  font-size: 16px;
  color: #287fe6;
}

.tmw-mobile-output {                
  font-family: Sans-Serif; 
  font-size: 16px;                 
}

/*
* TMW  R2016.2
* RUSD driver-mobile-device-layout is a copy of mobile-device-layout with background color changes
*   changes from original/
*     1- bottom bar changed from black to blue  09/08/2016
*/

div.driver-mobile-device-layout {
  z-index: 8;
}
div.driver-mobile-device-layout table {
  empty-cells: show;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
div.driver-mobile-device-layout td.top-bar, div.driver-mobile-device-layout div.top-bar {
  background-color: #2175af;
  background-image: url(/profoundui/proddata/images/layouts/mobilebar3.png);
  background: -moz-linear-gradient(top, #4a9aea 42%, #2179e5 100%) repeat scroll 0 0 transparent);
  background: -webkit-linear-gradient(top, #4a9aea 42%,#2179e5 100%) repeat scroll 0 0 transparent;
  background-repeat: repeat-x;
}
div.driver-mobile-device-layout td.top-bar, div.driver-mobile-device-layout div.top-bar {
  height: 55px;
}
div.driver-mobile-device-layout td.content-section, div.driver-mobile-device-layout div.content-section {
  background-color: #eeeeee;
}
div.driver-mobile-device-layout div.content-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}
div.driver-mobile-device-layout td.bottom-bar, div.driver-mobile-device-layout div.bottom-bar {
  background-color: #000000;
  background-image: url(/profoundui/proddata/images/layouts/mobilebar4.png);
  background: -moz-linear-gradient(center top , #000000, #45484D) repeat scroll 0 0 transparent;
  background: -webkit-linear-gradient(bottom, #4a9aea 42%,#2179e5 100%) repeat scroll 0 0 transparent;
  background-repeat: repeat-x;
}
div.driver-mobile-device-layout td.bottom-bar, div.driver-mobile-device-layout div.bottom-bar {
  height: 55px;
}
.transparent-textbox {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 16px;
  border: medium none;
  margin: 0;
  background: transparent; 
  line-height: 1.4em;
  min-height: 1.4em;
  outline: 0 none;
  color: #333333;
  text-shadow: 0 1px 0 #FFFFFF;	
}
.mobile-textbox {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 16px;
  border: 1px solid #cccccc;
  margin: 0;
  background-color: #ffffff; 
  line-height: 1.4em;
  min-height: 1.4em;
  outline: 0 none;
  color: #333333;
  text-shadow: 0 1px 0 #FFFFFF;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
div.driver-mobile-device-layout div.content-section div.label {
  color: #222222;
  font-weight: bold;
  text-shadow: 0 1px 0 #FFFFFF;
  font-size: 16px;
  font-family: Helvetica,Arial,sans-serif;
  text-align: left;
  text-overflow: ellipsis;
}
div.driver-mobile-device-layout div.top-bar div.label {
  color: #FFFFFF;
  font-weight: bold;
  text-shadow: 0 1px 0 #222222;
  font-size: 16px;
  font-family: Helvetica,Arial,sans-serif;
  text-align: center;
  text-overflow: ellipsis;
}