body {
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.2;
}
a:link {
    color: #167eb9;
    text-decoration: none;
}
a:visited {
    color: #0f6b9f;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: none;
}
.container {
    width: 100%;
}
.header {
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
    display:block;
    padding: 9px 14px;
    font-size: 17px;
    line-height: normal;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.header-bg {
    background-color: #4a77d4;
    background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4);
    border: 1px solid #3762bc;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.header-br {
    background-color: #6a5a5a;
    border: 1px solid #6a5a5a;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.hr-l-u-d {
    color:#ffffff;
    font-size: 17px;
    font-family: open sans,sans-serif;
    cursor: pointer;
    background-color:#6a5a5a;
    border:1px solid #6a5a5a;
}
.power-by {
    font-size: 12px;
    text-align: left;
}
.power-by a:link {
    color: #ffffff;
    text-decoration: none;
}
.row {
    margin-top: 10px;
    margin-bottom: 10px;
}
.r_data {
    width: 100%;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.inverter_data, .inverter_chart {
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
@media screen and (min-width: 480px) {
    .inverter_data, .inverter_chart {
        width: 49.5%;
    }
    .inverter_data:nth-child(4n+1), .inverter_data:nth-child(4n+2) {
        background: #eee;
    }
    .inverter_data:nth-child(4n+3), .inverter_data:nth-child(4n+4) {
        background: #ffffff;
    }
    .inverter_chart:nth-child(4n+1), .inverter_chart:nth-child(4n+2) {
        background: #ffffff;
    }
    .inverter_chart:nth-child(4n+3), .inverter_chart:nth-child(4n+4) {
        background: #eee;
    }
}
@media screen and (max-width: 479px) {
    .inverter_data, .inverter_chart {
        width: 100%;
    }
    .inverter_data:nth-child(odd) {
        background: #eee;
    }
    .inverter_data:nth-child(even) {
        background: #ffffff;
    }
    .inverter_chart:nth-child(odd) {
        background: #ffffff;
    }
    .inverter_chart:nth-child(even) {
        background: #eee;
    }
}
.fault_data {
    text-align: center;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
}
.fault_data:nth-child(odd) {
    background: #eee;
}
.fault_data:nth-child(even) {
    background: #ffffff;
    color: #181818;
}
.usage_data {
    text-align: center;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    margin-top:5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.usage_data:nth-child(1) {
    background: #8BC24A;
}
.usage_data:nth-child(2) {
    background: #03A9F3;
    color: #ffffff;
}
.usage_data:nth-child(3) {
    background: #FEEA3B;
}
.usage_data:nth-child(4) {
    background: #F44336;
    color: #ffffff;
}
.usage_data:nth-child(5) {
    background: #FE9800;
}
.usage_data:nth-child(6) {
    background: #3F51B5;
    color: #ffffff;
}
.usage_data.s_p {
    background: #8BC24A;
}
.usage_data.s_b {
    background: #03A9F3;
    color: #ffffff;
}
.usage_data.g_b {
    background: #FEEA3B;
}
.usage_data.b_l {
    background: #F44336;
    color: #ffffff;
}
.usage_data.g_l {
    background: #FE9800;
}
.usage_data.g_i {
    background: #8E8181;
    color: #ffffff;
}
.usage_data.g_e {
    background: #8E8181;
    color: #ffffff;
}
.usage_data.i_l {
    background: #3F51B5;
    color: #ffffff;
}
.usage_data.i_e {
    background: #b53f3f;
    color: #ffffff;
}
.usage_data.p_l {
    background: #C08130;
    color: #ffffff;
}
.usage_data.t_p {
    background: #00BCD3;
    color: #000000;
}
.usage_data.s_s {
    background: #009688;
    color: #ffffff;
}
.data_field {
    margin-left: 3%;
    text-align: left;
    width: 47%;
    display: inline-block;
    float:left;
    line-height: 2.5;
}
.data_value {
    margin-right: 3%;
    text-align: right;
    width: 47%;
    display: inline-block;
    float:right;
    line-height: 2.5;
}
.back_btn {
    padding:7px 27px;
    margin:5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    display:inline-block;
    background: #795548;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color:#FFFFFF;
}
.back_btn:hover {
    color:#FFE300;
}
.disable {
    color: #999798;
}
.error {
    color: #FF0000;
}
.expire {
    color: #964B00;
}
.blink {
    animation: blinker 0.6s linear infinite;
}
@keyframes blinker {
    20% { opacity: 0; }
}
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 85px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.st_list table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}
.st_list tr:nth-child(even) {
    background-color: #f2f2f2;
}
.st_list tr:hover {
    background-color: #ddd;
}
.st_list th {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    background-color: #04AA99;
    color: white;
}
.st_list td {
    text-align: center;
    padding: 8px;
}