body {
    font-family: Arial, "Times New Roman", Times, serif;
    #background-color: #AAFFFF;
    padding-left: 10px;
    padding-right: 5px;
    margin-left: auto;
    margin-right: auto;
}

.site {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    grid-template-areas: "title title" "graph graph" "info info" "buttons buttons" "footer footer"
}

#settings-site {
    grid-template-rows: repeat(5, auto);
    grid-template-areas: "title title" "buttons buttons" "info info" "ctrl-btn ctrl-btn" "footer footer"
}


.row-1-col {
    display: grid;
    grid-template-columns: 1fr; 
}

.row-2-col {
    display: grid;
    grid-template-columns: 4fr 12fr;
}

.row-3-col {
    display: grid;
    grid-template-columns: 9fr 2fr 4fr;
}

.row-4-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.col-1 {
    grid-column: 1;
}

.col-2 {
    grid-column: 2;
    display: flex;
    align-items: right;
    justify-content: right;
}

.col-3 {
    grid-column: 3;
    display: flex;
    align-items: right;
    justify-content: right;
}

.title {
    grid-area: title;
    text-align: center;
}

.buttons {
    grid-area: buttons;
    text-align: center;    
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

.ctrl-btn {
    grid-area: ctrl-btn;
    text-align: center;
}

.info {
    grid-area: info;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "lcol rcol"
}

.info-simple {
    grid-area: info;
    display: grid;
    grid-template-columns: 1fr;

}

.status-info {
    grid-area: lcol;
    background-color: #2fb;
}

.settings-info {
    grid-area: rcol;
    background-color: #bbb;
}

.voltage {
    color: blue;
}

.amp {
    color: red;
}

.amphour {
    color:green;
}

.graph {
    grid-area: graph;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.footer {
    grid-area: footer;
}

.settings-grid {
    display: grid;
    grid-area: settings-grid;
    grid-template-columns: 1fr 1fr;
}

.setting-label {
    grid-column: 1;
}

.setting-value {
    grid-column: 2;
}

.battery-settings {
    display: grid;
    grid-area: battery-settings;
    grid-template-columns: 1fr 1fr;
}

.battery-label {
    grid-column: 1;
}

.battery-value {
    grid-column: 2;
}

.column {
    font-size: 1em;
    color: blue;
}

.button2 {
    font-size: 1em;
    background-color: #4CAF50;
    background-color: grey;
    border: none;
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.3em;
    margin-bottom: 0.2em;
    cursor: pointer;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
    width: 6em;
    height: auto;
}

.button3 {
    font-size: 1em;
    background-color: grey;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    cursor: pointer;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
    width: 5em;
    height: auto;
}
.buttonOn {
    font-size: 1em;
    background-color: blue;
    border: none;
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    cursor: pointer;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
    width: 12em;
    height: 3em;
}
.buttonOff {
    font-size: 1em;
    background-color: yellow;
    border: none;
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    cursor: pointer;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
    width: 12em;
    height: 3em;
}
.button4 {
    font-size: 1em;
    background-color: #4CAF50;
    background-color: grey;
    border: none;
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    cursor: pointer;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
    width: 12em;
    height: 3em;
}

img {
    width: 100%;
}

h1 {
    font-weight: 600;
    font-size: 2em;
    color: black;
}

h2 {
    font-weight: 500;
    font-size: 1.2em;
    #color: green;
    color: black;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    Text-align: center;
}

h3 {
    font-weight: 500;
    font-size: 1.2em;
    color: black;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    Text-align: center;
}

h4 {
    font-weight: 500;
    font-size: 1.2em;
    color: black;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
}

li {
    font-weight: 300;
    font-size: 1.2em;
    color: blue;
}

input[type=number] {
    padding: 0px;
    border: 2px solid #aaa;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 1em;
    color: red;
    margin-right: 1em;
    width: 4em;
    height: 44px;
}

input[type=submit] {
    padding: 5px 5px;
    background: #ccc;

    border: 0 none;
    color: green;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}