@charset "utf-8";
@font-face {font-family: 'Univers LT Pro'; src: url("/fonts/UniversLTPro_45Light.otf") format("opentype"); font-style: normal; }

* { margin: 0px; padding: 0px; font-family: "Univers LT Pro"; }
body { background-color: #FFFFFF; margin: 20px ; }
.header {display: flex; height: 90px; }
.header:after { content: ""; display: table; clear: both; }    
.logo { padding-top: 30px; padding-right: 20px; }
.title { padding-top: 30px; padding-right: 20px; white-space: nowrap; width: 100%; }
.subheader {display: flex; }
.subheader:after { content: ""; display: table; clear: both; }    
.login { width: 100%; }
.filter { width: 100%; }
.clearfix:after { content: ""; display: table; clear: both; }
.section-horizontal { }
.section-vertical { display: flex; }   
.mainmenu { float: left; width: auto; }
.inhalt { float: left; width: 100%;  background-color: #FFFFFF; clear: both; }
.footer {float: left; width: 100%; text-align: center; }
.varvaluetooltip { background-color: #CCCCCC; color: #000000; border-radius: 6px; padding:3px; top: -5px; right: 105%; visibility: hidden;  width: 100px; position:absolute; z-index:100; text-align: Left; opacity: 0.4; transition: opacity 2s; }

h2 { margin-left: 20px; padding: 15px; }
.HeadLineTitle { text-align: center; line-height: 53px; color: #000000; }
select#sec_protocols {text-align: left; padding:5px 15px 2px 12px; background: #BCBCC4; color: #000000; border: 1px solid #999; border-radius: 5px; white-space: normal; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none;}
select#sec_protocols:hover {text-align: left; padding:5px 15px 2px 12px; background: #DDDDDD; color: #000000; border: 1px solid #999; border-radius: 5px; white-space: normal; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; }
select {text-align: left; padding:5px 15px 2px 12px; background: #BCBCC4; color: #000000; border: 1px solid #999; border-radius: 15px; white-space: normal; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background-position: right; background-repeat: no-repeat;  background-size: 20px 15px; background-image: url("/icons/arrow"); }
select:hover {text-align: left; padding:5px 15px 2px 12px; background: #DDDDDD; color: #000000; border: 1px solid #999; border-radius: 15px; white-space: normal; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background-position: right; background-repeat: no-repeat; background-image: url("/icons/arrow"); }
input[type="submit"] {padding:5px 15px 2px 15px; background: #0F0F26; color: #FFFFFF; border: 1px solid #000; border-radius: 15px; white-space: normal; cursor: pointer;}
input[type="submit"]:hover {padding:5px 15px 2px 15px; background: #FFFFFF; color: #000000; border: 1px solid #000; border-radius: 15px; white-space: normal; cursor: pointer;}
input[type=password] {background: #FFFFFF; padding:5px 13px; border: 1px solid #999; border-radius: 15px;}
input[type=text] {background: #FFFFFF; padding:5px 13px; border: 1px solid #999; border-radius: 15px;}
form.edit_button {margin: 2px 2px 2px 2px; display: inline }

p.standard_paragraph { margin-left: 100px; padding: 10px;}
p.important_paragraph { padding: 10px; font-weight: bold; }
p.footer_paragraph { color: #00000; }
a.footer_paragraph { color: blue; }
p.login { color: #00000; }
p.filter_paragraph { color: #00000; }
a.catalog_page {text-decoration: none; color: #000000; }
a.backend_page {text-decoration: none; color: #000000; }
a.offline_page {text-decoration: none; color: #000000; }
/** a.offline_page:hover {text-decoration: none; color: #FFFFFF; background: #000000;  } */
img.lang_icon { width: auto; height: 16; }
img.small_icon { width: 16; height: 16; }
img.middle_icon { width: 24; height: 24; }
img.large_icon { width: 64; height: 64; }
hr {}
hr.hr_standard { width:100%; text-align:center; border:1px solid #000000; margin:0px; padding:0px; }
.hrclass { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;}

table.vars {margin:10px; margin-left:100px; }
td.varname {padding:7px; }
td.varvalue {padding:7px; position: relative;  display: inline-block;}
td.varvalue:hover span.varvaluetooltip {visibility: visible; opacity: 1; }

/** general tabs */
ul#liste { font-size: 11px; font-weight: bold; list-style-type:none; margin: 0; padding: 0 0 28px 30px; border-bottom: 1px solid #000000; }
ul#liste li { float: left; height: 25px; background-color: #CCCCCC; margin: 2px 2px 2px 2px; border: 1px solid #000000}
#liste a {font-size: 13px; float: left; display: block; color: #666; text-decoration: none; padding: 6px 12px 12px 12px; } 
#liste a:hover {background: #FFFFFF; }
#liste li#ChoosenTab { border-bottom: 1px solid #FFFFFF; background-color: #FFFFFF;} 
#liste li#ChoosenTab a { color: #000000; }

#dev_diag {}
table#dev_diag { padding:5px; margin:0px; border-collapse: collapse; width: 100%; }
table#dev_diag tr { border: 3px solid #FFFFFF; }
table#dev_diag tr th { padding:5px; margin:0px; background-color: #CCCCCC; }
table#dev_diag tr td { padding:5px; margin:0px; vertical-align: top; }
table#dev_diag tr td.odd {white-space: pre; background-color: #EEEEEE; }
table#dev_diag tr td.even { white-space: pre; }

#sys_diag {}
table#sys_diag { padding:5px; margin:0px; border-collapse: collapse; width: 100%; }
table#sys_diag tr { border: 3px solid #FFFFFF; }
table#sys_diag tr th {text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
table#sys_diag tr th.first_column { width:10px; text-align:center; }
table#sys_diag tr th.second_column { width:10px; text-align:left; }
table#sys_diag tr th.third_column_not_bold { font-weight: normal; font-style: italic; }
table#sys_diag tr td { padding: 5px; margin: 0px; }

#entry_page {}
table#entry_page { border:2px solid #FFFFFF; width:100%; padding:5px; margin:0px; border-collapse: collapse; }
table#entry_page tr { border: 3px solid #FFFFFF; }
table#entry_page tr th { text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
table#entry_page tr td { padding:5px; margin:0px; vertical-align: top; }
table#entry_page tr td.varname { width: 250px; }
table#entry_page tr td.error { width: 250px; color: #FF0000; }
table#entry_page tr td.varvalue {}
table#entry_page tr td.varvalue span {color: #FF0000; }
table#entry_page tr td.show_hidden_varname { padding-top:10px; color: #008000; }
table#entry_page tr td.show_hidden_varvalue { color: #008000; }

/** common */
.page_title h2 {margin-left: 20px; padding: 15px;}
.page_subtitle h4 {text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; border:1px solid #FFFFFF;}
.page_delimiter h4 {text-align: left; padding:5px; margin:0px;}

/** properties div */
.properies_table {display: table;}
.properies_row {display: table-row;}
.properies_error {display: table-cell; width: 250px; color: #FF0000; padding:5px; margin:0px; vertical-align: top;}
.properies_label {display: table-cell; width: 250px; padding:5px; margin:0px; vertical-align: top;}
.properies_value {display: table-cell; text-align: left; padding:5px; margin:0px; vertical-align: top;}
.properies_unit {display: table-cell; text-align: left; padding:5px; margin:0px; vertical-align: top;}
.properies_desc {display: table-cell; padding:5px; margin:0px; vertical-align: top;}

/** ip table div */
.iptable_table {display: table;}
.iptable_row {display: table-row;} 
.iptable_row:nth-child(odd) {display: table-row; background-color: #f2f2f2; border:1px solid #FFFFFF;}
.iptable_header {display: table-cell; background-color: #DDDDDD; padding:5px; margin:0px; vertical-align: top; white-space: nowrap; border:1px solid #FFFFFF;}
.iptable_info {display: table-cell; padding:5px; margin:0px; vertical-align: top; white-space: nowrap; border:1px solid #FFFFFF;}

#tls_page {}
table#tls_page { border:2px solid #FFFFFF; width:100%; padding:5px; margin:0px; border-collapse: collapse; }
table#tls_page tr { border: 3px solid #FFFFFF; }
table#tls_page tr th { text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
table#tls_page tr td { padding:5px; margin:0px; vertical-align: top; }
table#tls_page tr td.odd {}
table#tls_page tr td.even { background-color: #EEEEEE; }

#show_log {}
table#show_logs tr { word-break: break-all; text-align: left; width: 100%; }
table#show_logs tr th { padding:5px; margin:0px; background-color: #CCCCCC; }
table#show_logs tr td { padding:5px; margin:0px; vertical-align: top; }
table#show_logs tr td.odd {}
table#show_logs tr td.even { background-color: #EEEEEE; }

/** datails page : outlets */ 
.outlets_table { }
.outlets_table tr { }  
.outlets_table td.element span {color: #000000; }
.outlets_table td.element { padding:5px; margin:2px; text-align:center;  }

/** licenses page  */
.licenses_page {width:100%; padding:5px; margin:0px; border-collapse: collapse; }
.licenses_page tr {}
.licenses_page tr.odd {}
.licenses_page tr.even {background-color: #EEEEEE; }
.licenses_page th { text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
.licenses_page td.column1 { width:30px; text-align:center; }

/** installation page  */
.product_page {width:100%; padding:5px; margin:0px; }
.product_page tr {}
.product_page tr.odd {}
.product_page tr.even {background-color: #EEEEEE; }
.product_page th { text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
.product_page th.buttons {text-align:center;}
.product_page td { padding:5px; margin:0px; vertical-align: top;}
.product_page td.column1 {margin: 0px; padding-top: 10px; text-align: center; border: none;}
.product_page td.column2 {margin: 0px; padding-top: 10px; border: none;}
.product_page td.column3 {margin: 0px; padding-top: 10px; border: none;}
.product_page td.column4 {}
.product_page td.button {margin: 0px; padding-top: 10px; width: 32px; }
.product_page td.colspan {text-align: center; margin: auto;}

/** device->diagnostic page  */
.dev_diag_page {width:100%; padding:5px; margin:0px; }
.dev_diag_page tr {}
.dev_diag_page tr.odd {}
.dev_diag_page tr.even {background-color: #EEEEEE; }
.dev_diag_page th { text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
.dev_diag_page td { padding:5px; margin:0px; vertical-align: top;}
.dev_diag_page td.column2 {margin: 0px; padding-top: 10px; border: none; }

/** catalog page  */
.catalog_page {width:100%; padding:5px; margin:0px; }
.catalog_page tr {}
.catalog_page tr.odd {}
.catalog_page tr.even {background-color: #EEEEEE; }
.catalog_page tr:hover {background-color: #CCCCCC; }
.catalog_page th { text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
.catalog_page td { padding:5px; margin:0px; vertical-align: top;}
.catalog_page td.column2 {margin: 0px; padding-top: 10px; border: none; }
.catalog_page td.button {margin: 0px; padding-top: 10px; width: 32px; }

/** backend page  */
.backend_page {width:100%; padding:5px; margin:0px; }
.backend_page tr {}
.backend_page tr.odd {}
.backend_page tr.even {background-color: #EEEEEE; }
.backend_page tr:hover {background-color: #CCCCCC; }
.backend_page th { text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
.backend_page td { padding:5px; margin:0px; vertical-align: top;}
.backend_page td.column2 {margin: 0px; padding-top: 10px; border: none; }

/** roles page  */
.roles_page {width:100%; padding:5px; margin:0px; }
.roles_page tr {}
.roles_page th { text-align: left; padding:5px; margin:0px; background-color: #CCCCCC; }
.roles_page td { padding:5px; margin:0px; vertical-align: top;}
.roles_page td {}
.roles_page td.odd {margin: 0px; padding-top: 10px; border: none; }
.roles_page td.even {margin: 0px; padding-top: 10px; border: none; background-color: #EEEEEE; }
.roles_page td.button {margin: 0px; padding: 0px; width: 16px; }

/** offline managment page  */
.offline_page {width:100%; padding:5px; margin:0px; }
.offline_page tr {}
/**
.offline_page tr.odd {}
.offline_page tr.even {}
*/
.offline_page tr:hover {background-color: #BCBCC4; }
.offline_page th { text-align: left; padding:5px; margin:0px; background-color: #FFFFFF; border-bottom: 2px solid #6B6B70; border-right: 2px solid #6B6B70;}
.offline_page th.buttons { text-align: left; padding:5px; margin:0px; background-color: #FFFFFF; border-bottom: 2px solid #6B6B70; border-right: 2px solid #FFFFFF;}
.offline_page th.empty { text-align: left; padding:5px; margin:0px; background-color: #FFFFFF; border-bottom: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF;}
.offline_page td { padding:5px; margin:0px; vertical-align: top; border-bottom: 1px solid #BCBCC4; border-right: 1px solid #BCBCC4;}
.offline_page td.button {margin: 0px; padding: 0px; width: 130px; border: none; }

/** offline managment page -> upload/download div */
.offline_table {display: table;}
.offline_row {display: table-row;}
.offline_label {display: table-cell; width: 350px; padding:5px; margin:0px; vertical-align: top;}
.offline_value {display: table-cell; text-align: left; padding:5px; margin:0px; vertical-align: top;}

ul#findings { margin: 5px 5px 5px 30px; }
ul#findings li   { padding:5px; background-color: #FFFFFF; color: #FF0000; list-style-type:disc;} 

/** Logs Menu  */
.dropbtnlogs { background-color: #D8D8D8; color: #000000; padding: 12px; border: none; cursor: pointer; white-space: nowrap; }
.dropbtnlogs-active { background-color: #FFFFFF; color: #000000; padding: 12px; border: none; cursor: pointer;  white-space: nowrap; border-bottom: 3px solid #00B34D; }
.dropdownlogs { float: left; position: relative; }
.dropdownlogs-content { background-color: #EEEEEE; display: none; position: absolute; left: 0;  min-width: 60px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 10px; z-index: 1; }
/**
.dropdownlogs-content li { color: #FFFFFF; }
.dropdownlogs-content a { float: left;  display: block; background-color: #EEEEEE; color: #000000; text-align: center; text-decoration: none; padding: 12px 20px 12px 20px; border-bottom: 3px solid transparent; }
.dropdownlogs-content a:hover { background-color: #EEEEEE; border-bottom: 3px solid #00B34D; }
 */
.dropdownlogs:hover .dropdownlogs-content { display: block; background-color: #D8D8D8;}
.dropdownlogs:hover .dropbtnlogs { background-color: #FFFFFF; color: #000000; border-bottom: 3px solid #EEEEEE; }

/** Main Menu */
.dropdownmenu { float: left; }
.dropdownmenu .dropbtnmenu {width: 24; height:24; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_props_black");}
.dropdownmenu-content {display: none; position: absolute; background-color: #EEEEEE; width: 22%; z-index: 1; }
.dropdownmenu:hover .dropdownmenu-content {display: block; }
.dropdownmenu .row { width: 100%;  padding: 10px; background-color: #CCCCCC; }
.dropdownmenu .column { padding: 10px; background-color: #EEEEEE; }
.dropdownmenu .column a { color: black; padding: 16px; text-decoration: none; display: block; text-align: left;}
.dropdownmenu .column a:hover {background-color: #FFFFFF; }

/** Filter Menu */
.dropdownfilter { float: left; }
.dropdownfilter .dropbtnfilter {border: none; color: black; padding: 6px; background-color: #AAAAAA; background-image: url("/icons/arrow_down_black"); width: 32px; height:32px;}
.dropbtnfilter:hover  {border: none; color: black; padding: 6px; background-color: #888888; background-image: url("/icons/arrow_down_white"); width: 32px; height:32px;}
.dropdownfilter-content {display: none; position: absolute; background-color: #CCCCCC; z-index: 1; }
.dropdownfilter:hover .dropdownfilter-content {display: block; }
.dropdownfilter .row { width: 100%;  padding: 10px; background-color: #AAAAAA; }
.dropdownfilter .column { padding: 10px; background-color: #EEEEEE; }
.dropdownfilter .column a { color: black; padding: 16px; text-decoration: none; display: block; text-align: left;}
.dropdownfilter .column a:hover {background-color: #FFFFFF; }

/** Role Menu */
.dropdownrole { float: left; }
.dropdownrole .dropbtnrole { background-color: #AAAAAA; color: #000000; padding: 12px; border: none; cursor: pointer; white-space: nowrap; }
.dropdownrole .dropbtnrole:hover { background-color: #CCCCCC; color: #000000; padding: 12px; border: none; cursor: pointer; white-space: nowrap; }
.dropdownrole-content {display: none; position: absolute; background-color: #EEEEEE; width: 200px; z-index: 1; }
.dropdownrole:hover .dropdownrole-content {display: block; }
.dropdownrole .row { padding: 10px; background-color: #CCCCCC; }
.dropdownrole .column { padding: 10px; background-color: #EEEEEE; }
.dropdownrole .column a { color: black; padding: 16px; text-decoration: none; display: block; text-align: left;}
.dropdownrole .column a:hover {background-color: #FFFFFF; }

/** Buttons with icons 24x24 */
.btnup {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/arrow_up_black");}
.btnup:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/arrow_up_black");}
.btndown {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/arrow_down_black");}
.btndown:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/arrow_down_black");}
.btnedit {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_edit_black");}
.btnedit:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_edit_black");}
.btnremove {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_remove_black");}
.btnremove:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_remove_black");}
.btnsave {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_save_black");}
.btnsave:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_save_black");}
.btncancel {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_cancel_black");}
.btncancel:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_cancel_black");}
.btndetail {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_details_black");}
.btndetail:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_details_black");}
.btnreset {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_reset_black");}
.btnreset:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_reset_black");}
.btnfilter {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_filter_black");}
.btnfilter:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_filter_black");}
.btnfilterCleaning {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_filter_cleaning_black");}
.btnfilterCleaning:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_filter_cleaning_black");}
.btnunlocking {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_unlocking_black");}
.btnunlocking:hover {width: 32; height:32; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_unlocking_black");}
/** Buttons with icons 16x16 */
.btncleaning {height: 16px; padding:6px 8px; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_cleaning_black");}
.btncleaning:hover {height: 16px; padding:6px 8px; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_cleaning_black");}
.btnrecover {height: 16px; padding:6px 8px; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_recover_black");}
.btnrecover:hover {height: 16px; padding:6px 8px; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_recover_black");}
.btncollapse {height: 16px; padding:6px 8px; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_collapse_black");}
.btncollapse:hover {height: 16px; padding:6px 8px; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_collapse_black");}
.btnopen {height: 16px; padding:6px 8px; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_open_black");}
.btnopen:hover {height: 16px; padding:6px 8px; cursor: pointer; border: none; background-repeat: no-repeat; background-color: transparent; background-image: url("/icons/btn_open_black");}

/** CSS spevification for the ul/li/ul/li list for choosing the master product (model and hwRevision number) */
ul#model, ul.mod_level_1 {text-align: left; position:relative; left: 50px; padding:5px;}
ul#model li { padding:5px; }
ul#model .mod_level_1 li { padding:5px; }

/** Vertical Scroll Menu   */
.vertical-menu { float: left; }
.vertical-menu a { background-color: #EEEEEE; color: #000000; display: block; padding: 12px; text-decoration: none;  border-bottom: 3px solid transparent; }
.vertical-menu a:hover { background-color: #CCCCCC; border-bottom: 3px solid #00B34D; }
.vertical-menu a.active { background-color: #FFFFFF; color: #000000; border-bottom: 3px solid #00B34D; }
.vertical-menu a:hover.active { background-color: #AAAAAA; border-bottom: 3px solid #00B34D; }
/** Vertical Scroll SubMenu   */
.vertical-submenu { float: left;  }
.vertical-submenu a { background-color: #EEEEEE; color: #000000; display: block; padding: 12px 36px 12px 57px; text-decoration: none; font-size: 90%;  border-bottom: 3px solid transparent; }
.vertical-submenu a:hover { background-color: #CCCCCC;  border-bottom: 3px solid #00B34D; }
.vertical-submenu a.active { background-color: #FFFFFF; color: #000000;   border-bottom: 3px solid #00B34D; }
.vertical-submenu a:hover.active { background-color: #AAAAAA;  border-bottom: 3px solid #00B34D; }

/** Horizontal Scroll Menu   */
.horizontal-menu { }
.horizontal-menu a { float: left;  display: block; background-color: #E2E2E2; color: #000000; text-align: center; text-decoration: none; text-decoration: none; padding: 12px 20px 12px 20px; border-bottom: 3px solid transparent; }
.horizontal-menu a:hover { background-color: #CCCCCC; border-bottom: 3px solid #00B34D; }
.horizontal-menu a.active { background-color: #FFFFFF; color: #000000; font-weight:bold; border-bottom: 3px solid #00B34D; }
.horizontal-menu a:hover.active { background-color: #AAAAAA; border-bottom: 3px solid #00B34D; }
/** Horizontal Scroll SubMenu   */
.horizontal-submenu { }
.horizontal-submenu a {float: left;  display: block; background-color: #D8D8D8; color: #000000; text-align: center; text-decoration: none; text-decoration: none; padding: 12px ; border-bottom: 3px solid transparent; font-size: 90%; }
.horizontal-submenu a:hover { background-color: #CCCCCC; border-bottom: 3px solid #00B34D; }
.horizontal-submenu a.active { background-color: #FFFFFF; color: #000000; font-weight:bold; border-bottom: 3px solid #00B34D; }
.horizontal-submenu a:hover.active { background-color: #AAAAAA; border-bottom: 3px solid #00B34D; }

/** Loader */
.loader {border: 16px solid #EEEEEE; border-radius: 100%; border-top: 16px solid #AAAAAA; width: 24px; height: 24px; -webkit-animation: spin 2s linear infinite; /* Safari */animation: spin 3s linear infinite;}
/* Safari */
@-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

/** customize the browse button */
.input-file {z-index: 100; display: none; }
.file-upload-context { position: relative; } 
.button-browse {border: 1px solid #999; background: #AAAAAA; color: #000000; border-radius: 5px; white-space: normal; padding:5px 15px;  height: 20px; text-align: center; z-index: 1;  }
.button-browse:hover { border: 1px solid #999; background: #DDDDDD; color: #000000; border-radius: 5px; white-space: normal; padding:5px 15px; height: 20px;text-align: center; z-index: 1; }

/** upload table  */
.upload_table {width:100%; padding:0px; margin: 0px;  }
.upload_table tr {} 
.upload_table td {}
.upload_table td.column1 {margin: 0px; padding: 0px; border: none;}
.upload_table td.column2 {margin: 0px; padding: 0px; border: none;}
.upload_table td.gap {margin: 0px; padding: 0px; border: none; width:20px; }

/** download diagnosis file */
@keyframes slideInFromLeftDiagnostic { from{ width: 0%; } to{ width: 0%; }}
.progress { width:30%; height:20px; border:1px solid black; position:relative;}
.child {position:absolute; left:0; top:0; background: green; width: 0%; height: 100%; overflow:hidden; animation: slideInFromLeftDiagnostic 120s linear;}
.overall-diagnosis-time {margin-left:15% }

/** firmware update file */
@keyframes slideInFromLeftFirmware { from{ width: 0%; } to{ width: 0%; }}
.firmware-progress { width:30%; height:20px; border:1px solid black; position:relative;}
.firmware-progress-child {position:absolute; left:0; top:0; background: green; width: 0%; height: 100%; overflow:hidden; animation: slideInFromLeftFirmware 120s linear;}
.overall-firmware-time {margin-left:15% }

/** electricity sign table */
.electricity_table {width:99%; padding: 5px; margin: 5px; border: 3px solid #ffcf45;  }
.electricity_table tr {}
.electricity_table td {}
.electricity_table td.icon {border: none; }
.electricity_table td.message {border: none; vertical-align: middle; font-weight: bold; } 

/** warning table  */
.warn_table {width:99%; padding: 5px; margin: 5px; border: 3px solid #00FF00;  }
.warn_table tr {}
.warn_table td {}
.warn_table td.icon {border: none; }
.warn_table td.message {border: none; vertical-align: middle; font-weight: bold; } 

/** error table  */
.error_table {width:99%; padding: 5px; margin: 5px; border: 3px solid #FF0000;  }
.error_table tr {}
.error_table td {}
.error_table td.icon {border: none; }
.error_table td.message {border: none; vertical-align: middle; font-weight: bold; } 

/** Maintanence diagnosis page */
.product {margin-bottom: 8px;}
.outlet {margin-bottom: 6px; margin-top: 6px; margin-left: 15px;}
.device {margin-bottom: 6px; margin-top: 8px; margin-left: 15px;}
.product-name {	font-size: 22px;	padding: 5px; background-color: #D3D3D3;}
.outlet-name {font-size: 17px;padding: 5px; background-color: #D3D3D3}
.device-name { background-color: #D3D3D3; padding: 5px; font-weight: bold;}
.device-description-block {margin-left: 30px; margin-top: 10px; }
.device-description-row {margin-bottom: 10px; font-size: 15px; }
.device-description-table {margin-top: 15px;}
.diagnosis-meter-values th {background-color: #D3D3D3; text-align: left; padding: 4px;}
.diagnosis-meter-values td { text-align: left; padding-top: 3px; padding-bottom: 4px; padding-right: 4px;}
.defect {margin-bottom: 6px; margin-top: 8px; margin-left: 5px; }
.defect-name { background-color: #df382e; color: #FFFFFF; padding: 5px; font-weight: bold; }
.defect-content {margin-bottom: 6px; margin-top: 8px; margin-left: 15px;}

/** Eichrecht page */
.public-keys-values { margin-bottom: 1%; }
.public-keys, .public-keys-titles, .public-keys-values { width: 100%; }
.public-keys-header { background-color: #CCCCCC; padding: 5px; border: 1px solid #FFFFFF; }
.public-keys-outlet { width: 15%; float: left; padding: 5px; border: 2px solid #FFFFFF; }
.public-keys-meter { float: left; width: 15%; padding: 5px; border: 2px solid #FFFFFF; }
.public-keys-key { float: none; overflow: hidden; padding: 5px; border: 2px solid #FFFFFF; }
.public-key-title-backgroud { background-color: #DDDDDD; }
.public-key-value { word-break: break-all; }