/* Box model fix */

html {
    box-sizing: border-box;
  }

*, *:before, *:after {
    box-sizing: inherit;
}

/* Custom CSS */

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

header, section {
    background-color: #222328;
    color: white;
}

header {
    display: flex;
    height: 3em;
    align-items: center;
}

a {
    text-decoration: none;
    color: white;
}

.headerLeft {
    width: 50%;
    padding-left: 0.5em;
    font-size: 1.75em;
}

.headerRight {
    width: 50%;
    padding-right: 1em;
    text-align: right;
}


/* INDEX PAGE */

section {
    padding: 0 1em 1em 1em;
}

.content {
    height: 50vh;
}

.logs {
    height: calc(50vh - 3em);
}

.title {
    padding: 0.5em 0;
}

.dataArea {
    height: calc(100% - 2em);
    overflow-y: scroll;
    background-color: #f4f4f4;
    border: 1px gray solid;
    border-radius: 0.25em;
}

.readOut {
    padding: 0.5em;
    color: black;
}

.log {
    padding: 0.25em 0 0.25em 0.5em;
    color: black;
}

/* PING TEST PAGE */

.pingTest {
    padding: 0.5em 1em;
    height: calc(100vh - 3em);
    background-color: #222328;
    color: white;
}

.pingTest h1 {
    margin: 0 0 0.5em 0;
    font-size: 1.5em;
}

.pingTest .success {
    color:  #1C9430;
}

.pingTest .error {
    color:  red;
}

.pingTest fieldset {
    padding: 0;
    border: none;
}

.formInput {
    margin: 0.5em 0;
}

.formInput label {
    display: block;
    padding: 0.5em 0;
}

.formInput select, input, button {
    height: 3em;
    width: 50%;
    border: none;
    border-radius: 0.25em;
}

.formInput input {
    padding-left: 0.5em;
}

.formInput button[type=submit] {
    margin-top: 1.5em;
    background-color: #1C9430;
    color: white;
}

.formInput button[type=submit]:hover {
    background-color: #20A637;
}

.formInput button[type=submit]:active {
    background-color: #1A822C;
}

.formInput button[type=reset] {
    margin-top: 1.5em;
    background-color: darkgray;
    color: black;
}

.formInput button[type=reset]:hover {
    background-color: lightgray;
}

.formInput button[type=reset]:active {
    background-color: gray;
}