/******** Compact-style ********/

.compactstyle {
position: relative;
overflow: hidden; /*To get your parent to respect the floated divs*/
border-radius: .2em .2em;
height: 45px;
}

.comone, .comtwo, .comthree {

position: relative;  
height: 38px;
float: left; /*To get them next to each other if all else fails*/
background: #585754;
border-radius: .2em .2em;
box-shadow: 2px 3px 4px grey;
}

.comfix{

position: absolute;
top: 0px;
left: 3px;
background: #585754;
border-radius: .2em;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
height: 38px;
box-shadow: 2px 3px 4px grey;
}

.comcolor{
border: 3px solid #adaba8;
margin-top: 4px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 4px;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 4px;
padding-right: 4px;
border-radius: .2em;
background-color: #efefef;
-webkit-padding-start: 5px;
-webkit-padding-end: 5px;
-moz-padding-start: 5px;
-moz-padding-end: 5px;
height: 14px;
}


/******** Decimal ********/

.cybro_decimal {
    color: #000000;
        text-align: center;
        text-decoration: none;
        font-size: 9pt;
        color: black;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
}


/******** Bargraph ********/

.cybro_bargraph {
    margin: 1px;
    border: 1px solid silver;
    padding: 1px;
    background-color: #FAFAFA;
}

.cybro_bargraph.horizontal {
    display: inline-block;
}

.cybro_bargraph.vertical {
    float: left;
}

.cybro_bargraph.horizontal .value, .cybro_bargraph.horizontal .bg {
    float: left;
}

.cybro_bargraph.vertical .value {
}


/******** Toggle ********/

.cybro_toggle .button {
	float: right;
	margin-left: 3px;
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        font-size: 9pt;
        color: white;
        border: 3px solid #adaba8;
        background-color: #295623;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	border-radius: .2em;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	height: 30px;
	width:30px;
}

.cybro_toggle .value {
    text-align: right;
    font-size: 10pt;
    height: 12px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border-radius: .2em;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);

}
.cybro_toggle .value.active {
    border-color: red;
}


/******** IncDec ********/

.cybro_incdec  {

}

.cybro_incdec .value {
    text-align: right;
    font-size: 10pt;
    height: 12px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border-radius: .2em;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.cybro_incdec .value.active {
    border-color: red;
}


/******** Submit ********/

.cybro_submit {
}

.cybro_submit .value, .cybro_submit .read_value {
    text-align: right;
    font-size: 10pt;
    height: 12px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border-radius: .2em;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.cybro_submit .read_value.active {
    border-color: red;
}








/******** Timeplot ********/

.cybro_timeplot .cmd {
    margin-bottom: 3px;
    font-size: 10pt;
    height: 36px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border-radius: .2em;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    border: 3px solid #595855;
    background-color: #595855;
    border-width: 1px 4px 6px 4px;

}

.cybro_timeplot .cmd .period_selection {
    float: left;
}

.cybro_timeplot .loading {
    padding: 15px 10px 0px 45px;
    position: absolute;
    z-index: 1000;
}

.cybro_timeplot .cmd .download {
    text-align: right;
    float: right;
    width: 75px;
    padding-top: 4px;
    padding-right: 0px;
}

.cybro_timeplot .cmd .timeplot_fullscreen {
    margin-bottom: 3px;
    font-size: 10pt;
    height: 34px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border-radius: .2em;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    border: 3px solid #adaba8;
    background-color: #EFEFEF;
    cursor: pointer;

}

.cybro_timeplot .fullscreen_close_container {
    text-align: right;
    margin-top: 10px;
}









/******** Alarmlist ********/

.cybro_alarm_list .list {
    width: 100%;
    background-color: #FAFAFA;
}

.cybro_alarm_list .list .button {
    font-size: 8pt;
    padding: 1px 5px 1px 5px;
}

.cybro_alarm_list .list th {
    background: #974a69;
	background: -moz-linear-gradient(top, #c37e9a 0%, #974a69 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c37e9a), color-stop(100%, #974a69));
	background: -webkit-linear-gradient(top, #c37e9a 0%, #974a69 100%);
	background: -o-linear-gradient(top, #c37e9a 0%, #974a69 100%);
	background: -ms-linear-gradient(top, #c37e9a 0%, #974a69 100%);
	background: linear-gradient(to bottom, #c37e9a 0%, #974a69 100%);
    color: white;
    padding: 3px 0px 3px 0px;
}

.cybro_alarm_list .list td {
    text-align: center;
    border-bottom: 1px solid #EAEAEA;
    line-height: 26px;
    color: black;
    font-size: 8pt;
    font-family: Arial;
}

.cybro_alarm_list .list .col_type {
    width: 20px;
}

.cybro_alarm_list .list .col_raised,
.cybro_alarm_list .list .col_gone,
.cybro_alarm_list .list .col_ack {
    width: 110px;
}

.cybro_alarm_list .list .col_message {
    text-align: left;
}

.cybro_alarm_list .list .col_tag {
    padding-left: 10px;
    text-align: left;
    width: 140px;
}

.cybro_alarm_list .list .col_status {
    width: 40px;
}

.cybro_alarm_list .list .alarm {
/*     background-color: #FFE6E6; */
}

.cybro_alarm_list .list .alarm.active td {
}

.cybro_alarm_list .list .alarm.not_ack td {
    background-color: #FFCCCC;
}

.cybro_alarm_list .list .alarm.active .col_status,
.cybro_alarm_list .list .event.active .col_status {
}

.cybro_alarm_list .list .alarm.active .col_status.active,
.cybro_alarm_list .list .event.active .col_status.active {
    font-weight: bold;
    color: red;
}

.cybro_alarm_list .list tr.hover_active
/*.cybro_alarm_list .list .hover_active.alarm.not_ack td */{
    background-color: #FDFDE4;
}

.cybro_alarm_list .list .event {
}

.cybro_alarm_list .list .event.active {
}

.cybro_alarm_list .navig {
    margin-bottom: 10px;
    text-align: right;
}

.cybro_alarm_list .navig .page_count,
.cybro_alarm_list .navig .filter_select {
    float: left;
    text-align: left;
    margin-right: 10px;
}

#timeplot_fullscreen {
    padding: 20px;
}

/******** Bitlist ********/

.cybro_bitlist > img {
	border: 2px solid transparent;
	border-radius: 5px;
}

.cybro_bitlist.write_enabled > img {
	cursor: pointer;
}

.cybro_bitlist .active {
    border: 2px solid red;
    /*border-color: red;*/
}

/******** Textlist ********/

.cybro_textlist {
}

.cybro_textlist .active {
    border: 2px solid red;
    /*border-color: red;*/
}