div.inline {
    display:inline-block;
    width:100%;
}

.ipv4 {
    text-align: center;
    float:right;
}

.ipv4_box {
    width: 300px;
    height: 30px;
    float: left;
}
.ipv4_box>label {
    float: left;
}
.ipv4_field {
    text-align: center;
    font-size: 16px;
    float:left;
    width: 40px;
    height: 22px;
    border: 1px solid grey;
}

.ipv4_field>label {
    vertical-align: sub;
}

.inline {
    text-align: center;
    float:right;
}

#wrapper {
    height: 100%;
}

h3{
    font-weight: bold;
    float: left;
}

p.page_name {
    margin-left: auto;
    height: 30px;
    font-weight: bold;
    padding:5px;
}

.nested_flex_container_column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 5px;
}
.nested_flex_container_row {
    display: flex;
    flex-wrap: wrap;
}
.button_flex_container_row {
    display: flex;
    justify-content: flex-end;
    column-gap: 10px;
    margin-top: 5px;
}

.save_refresh:last-child {
    margin-right: 10px;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#toast {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1000;
}

#toast div {
    width: 200px;
    margin: 150px auto;
    background-color: lightskyblue;
    border: 1px solid #000;
    border-radius: 3px;
    padding: 15px;
    text-align: center;
}
input.btn{
    font-weight: bold;
}
.linkbutton{
    float:left;
    display:block;
    width: 150px;
    text-align: center;
}

div.login {
    width: 300px;
    padding: 15%;
}
div.username {
    width: 85%;
    padding:20px;
    border: 2px solid black;
}
label.login_label {
    width: 90px;
    text-align: left;
    padding: 5px;
    float: left;
    font-weight: bold;
}
div.login_data {
    width: 100%;
    line-height: 75%;
    display:inline;
    float:left;
    padding: 8px;
}

input:required:invalid, input:focus:invalid {
    border: 3px solid red

}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    display: none;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -75px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
    display: inline-block;
    visibility: visible;
}

input[type="button"]:disabled {
    background-color: darkgrey;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: visible; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /*Black w/opacity */
}

.modal-content{
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
    text-align: center;
}

.tooltip:hover .tooltiptextBottom {
    display: inline-block;
    visibility: visible;
}

.tooltip .tooltiptextBottom {
    visibility: hidden;
    display: none;
    width: max-content;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    top: 130%; /* top arrow */
    left: 60%;
    margin-left: -45px;
}

.tooltip .tooltiptextBottom::after {
    content: "";
    position: absolute;
    bottom: 100%; /* bottom bubble */
    left: 18%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.text_header {
    text-align: center;
    font-weight: normal;
    padding-top: 5px;
    width: auto;
}

/* TODO need to update the balancing and time pages so we are using the same class for both */
label.balancing {
    width: max-content;
    height: 30px;
    padding-top: 5px;
    font-weight: normal;
    margin-bottom: 0;
}

label.ts_label {
    width: max-content;
    height: 30px;
    padding-top: 5px;
    font-weight: normal;
    margin-bottom: 0;
}

fieldset {
    padding: 0 1em 1em 1em;
    margin-left: 1em;
}

fieldset:disabled {
    border-style: dashed;
    border-color: darkgray;
}

fieldset legend {
    margin-left: -8px;
    padding: 4px;
    font-size: 15px;
    color: #000;
}

fieldset legend:disabled {
    color: darkgray;
}

.readonly_wide {
    height: 30px;
    width: 150px;
    margin: 0 0.5em 0 1em;
    border: thin solid #999;
    background-color: #ddd;
    font-weight: bold;
    text-align: left;
}

.writable_wide {
    height: 30px;
    width: 150px;
    margin: 0 0.5em 0 1em;
    font-weight: bold;
    text-align: left;
}

.readonly_narrow {
    height: 30px;
    width: 66px;
    margin: 0 0.5em 0 0.5em;
    border: thin solid #999;
    background-color: #ddd;
    font-weight: bold;
    text-align: left;
}

.writable_narrow {
    height: 30px;
    width: 66px;
    margin: 0 0.5em 0 0.5em;
    font-weight: bold;
    text-align: left;
}

.writable_narrow:disabled {
    height: 30px;
    width: 66px;
    margin: 0 0.5em 0 0.5em;
    font-weight: bold;
    text-align: left;
    border-color: darkgray;
    color: darkgray;
}