/*######################DAPR*/
/*# init*/
.MENU {display:none;}
.DEBUG {display:none;}

/*  input[type=text] {
    width: 600%;
    padding: 5px 5px;
    margin: 2px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    border: 2px solid #ccc;
    border-radius: 2px;
    background-color: #f8f8f8;
} */


input[type=text]:focus {
    background-color: #f8f8a8;
}

/* checkboxes / radio */
.custom-input {
     margin: 0px 2px 0px 10px;
}


input[type=range]:disabled {
	opacity: 0.25;
}


input[type=range] {
  /*-webkit-appearance: none;*/ /* Hides the slider so that custom slider can be made */
  background: transparent; /* Otherwise white in Chrome */
  margin: 8px 8px -4px 0px;
}

input[type=range]::-moz-range-track {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #ebd100;
  border-radius: 6.2px;
  border: 0.7px solid #000000;
}

/* form {
    Just to center the form on the page
    margin: 0 auto;
    width: auto;
    To see the outline of the form
    padding: 1em;
} */

hr {
	border-color:gray;
}

label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: inline-block;
    width: 170px;
    text-align: left;
}

.label-thin {
    display: inline-block;
    width: 90px;
    text-align: left;
}

.label-thick {
    display: inline-block;
    width: 80%;
    text-align: left;
}

p {
	margin:0; /* reduce space between paragraphs	*/
	padding-left: 12px;
	padding-top: 2px;
}

.subTitle{
	color: #5d5d5d;
}


form div + div {
    margin-top: 1em;
}

input{
    /* To give the same size to all text field */
    /*width: 300px;*/
    /*-moz-box-sizing: border-box;*/
    /*box-sizing: border-box;*/

}


.btnToggle
{
	background-color:#000000;
	color:#ABFF00;
	/*box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #ABFF00 0 -1px 6px, #ABFF00 0 2px 14px;*/
}

.btnDisableStyle
{
	color:#808080;
}

/* Bachmann "gray" class*/
.cms-gray{
	color:#000000!important;
	background-color:#efefef!important;
	/* background-color:#ffeb3b!important # w3 yellow */
	/* background-color:#f2d600!important # Bachmann document yellow*/
	/* background-color:#ebd100!important # Bachmann logo yellow*/
	/* background-color:#ffcf00!important # CMSSTD HTTP V 1.04 background yellow*/
	/* background-color:#ffcc00!important # Omega Guard background yellow*/
	
}

.cms-hover-yellow:hover{
	color:#000000!important;
	background-color:#ebd100!important;
}

.cms-hover-yellow-row:hover{
	color:#000000;
	background-color:#ebd10033;
}


.cms-yellow{
	color:#000000!important;
	background-color:#ebd100!important;
	/* background-color:#ffeb3b!important # w3 yellow */
	/* background-color:#f2d600!important # Bachmann document yellow*/
	/* background-color:#ebd100!important # Bachmann logo yellow*/
	/* background-color:#ffcf00!important # CMSSTD HTTP V 1.04 background yellow*/
	/* background-color:#ffcc00!important # Omega Guard background yellow*/
	
}


/* for invalid text */
.invalidField
{
	color:red;
	font-style:italic;
}
/* for additional info text */
.infoField
{
	color:gray;
	font-style:italic;
}

/*###################### original*/

.overlayBG {
	position: fixed;
	z-index: 900;
	height: 100%;
	width: 100%;
	overflow: show;
	margin: auto;
	text-align: center;
}

/* Transparent Overlay */
.overlayBG:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 180px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

.progressBar {
    position: fixed;
    top: 50%;
    left: 40%;
    width:60%;
    margin:-10px 0 0 -150px;
    z-index:998;
}

#progressBarSpanID {
    position: fixed;
    top: 50%;
    left: 40%;
    width:60%;
    margin:-10px 0 0 -150px;
    z-index:999;
    text-align:center;
}

/* LED States from: https://codepen.io/fskirschbaum/pen/MYJNaj*/
.led-red {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 6px, #ff9b9b 0 2px 14px;
  text-align:center;
  vertical-align:middle;
}

.led-orange {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #ffc140;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #8a5e00 0 -1px 6px, #fee685 0 2px 14px;
  text-align:center;
  vertical-align:middle;
}

.led-green {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #ABFF00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 6px, #89FF00 0 2px 14px;
  text-align:center;
  vertical-align:middle;
}

.led-blue {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #24E0FF;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 6px, #3F8CFF 0 2px 14px;
  text-align:center;
  vertical-align:middle;
}

.led-unknown {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #c0c0c0;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #c0c0c0 0 -1px 2px, #808080 0px 0px 0px 0px;
  text-align:center;
  vertical-align:middle;
}

textarea {
    max-width: 100%;
    width:100%;
    resize:vertical;/*will prevent resizing horizontally*/ 
}

/*
* this is the iFrame embedding style for CMS Help
*/
#iFrameEmbed
{
    margin-left:180px;
    width: 100%;
    height: 100%;
    position:absolute;
}

/*
 * a fixed top bar horizontally
*/
.fixed-top-bar
{
  z-index: 901;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  background-color: #ebd100;
  margin-left:180px;
}

/*
 * the span inside top bar horizontally
*/
.top-span
{
	padding-left: 5px;
	text-align: center;
	line-height:32px;
}

/*
 * a fixed bottom bar horizontally
*/
.fixed-bottom-bar
{
  /*z-index: 901;*/
  position: fixed;
  bottom: 2px;
  left: 0;
  width: 180px;
  height: 50px;
  background-color: black;
  margin-left:0px;
}

/*
 * change w3 button style
*/
.w3-btn
{
  padding: 2px 8px 2px;
  margin-bottom: 3px;
}

.btnTiny
{
  padding: 0px 6px 0px 6px;
  margin-bottom: 0px;
}


.selectedIOChannel {
    background-color:black;
    color:white;
    font-weight:bold;
}

.selected {
  background-color:#ebd10033;
}

/*
 * cell bar graph background
*/
.cell-bar-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: DodgerBlue;
    opacity: 0.25;
	border: 1px solid #0000001a;
}


.cell-fill-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0.25;
	width:100%;
	border: 1px solid #0000001a;
}





/*
 * tabs style for
*/


.tab-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tab-li {
	float: left;
	border: 1px solid #E3E3E3;
	padding: 4px 4px 4px 4px;
	border-bottom-width: 0;
	color: #898989;
}

.tabActiveCl {
 	background-color: #E0E0E0;
    color: #000;
    font-weight: bold;
}

#tabView {
	clear: both;
	padding: 0 1em;
}


.table-result td, .table-result th{
	border: 1px solid #ccc !important;
}

.table-result{
	table-layout:fixed;
}

 /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}