* {
    box-sizing: border-box;
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
}

/* Style the top navigation bar */
.topbar-title {
    text-align: center;
    color: #fff;
    font-size: 1em;
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
}


/* Style the content */
.content {
    background-color: #f6f8fa;
    padding: 1rem;
}

/* Style the footer */
.footer {
    background-color: #0074D9;
    padding: 10px;
}

/* section {
   position: relative;
   border: 1px solid #000;
   padding-top: 37px;
   background: #500;
}

section.anchortable {
   position: absolute;
   top:750px;
   left:50px;
   box-shadow: 0 0 15px #333;
}

section.logheader {
   position: absolute;
   top:275px;
   left:50px;
   box-shadow: 0 0 15px #333;
}

section.logtable {
   position: absolute;
   top:375px;
   left:50px;
   box-shadow: 0 0 15px #333;
}

section.configtable {
   position: relative;
   width: 95%;
   left:15px;
   margin-right:30px;
   box-shadow: 0 0 15px #333;
   color: black;
}
section.controls {
   position: absolute;
   top:185px;
   left:50px;
   box-shadow: 0 0 15px #333;
}
section.cpustatusinfo {
   position: absolute;
   top:185px;
   left:450px;
   box-shadow: 0 0 15px #333;
}

section.gpustatusinfo {
   position: absolute;
   top:375px;
   left:50px;
   box-shadow: 0 0 15px #333;
} */
.container {
   overflow-y: auto;
   height: auto;
   width: auto;
}
/* 
table {
   border-spacing: 3px;
   width:100%;
}

td + td {
   border-left:1px solid #eee;
}

td, th {
   border-bottom:1px solid #eee;
   background: #ddd;
   color: #000;
   padding: 5px 15px;
}

th {
   height: 0;
   line-height: 0;
   padding-top: 0;
   padding-bottom: 0;
   color: transparent;
   border: none;
   white-space: nowrap;
}

th div{
   position: absolute;
   background: transparent;
   color: #fff;
   padding: 10px 15px;
   top: 0;
   margin-left: -15px;
   line-height: normal;
   border-left: 1px solid #800;
}

th:first-child div{
   border: none;
} */

.row {
   display: -ms-flexbox; /* IE10 */
   display: flex;
   -ms-flex-wrap: wrap; /* IE10 */
   flex-wrap: wrap;
   margin: 0 -16px;
}

.col-25 {
   -ms-flex: 25%; /* IE10 */
   flex: 25%;
}

.col-50 {
   -ms-flex: 50%; /* IE10 */
   flex: 50%;
}

.col-75 {
   -ms-flex: 75%; /* IE10 */
   flex: 75%;
}

.col-25,
.col-50,
.col-75 {
   padding: 0 16px;
}

.container {
   background-color: #f2f2f2;
   padding: 5px 20px 15px 20px;
   border: 1px solid lightgrey;
   border-radius: 3px;
}

input[type=text] {
   width: 80%;
   margin-bottom: 5px;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 3px;
}

label {
   margin-bottom: 10px;
   display: block;
}

.icon-container {
   margin-bottom: 20px;
   padding: 7px 0;
   font-size: 24px;
}

.btngreen {
   background-color: #4CAF50;
   color: white;
   padding: 12px;
   margin: 10px 0;
   border: none;
   width: 20%;
   border-radius: 3px;
   cursor: pointer;
   font-size: 17px;
}

.btngreen:hover {
   background-color: #45a049;
}

.btnred {
   background-color: #FF0000;
   color: white;
   padding: 12px;
   margin: 10px 0;
   border: none;
   width: 20%;
   border-radius: 3px;
   cursor: pointer;
   font-size: 17px;
}

.btnred:hover {
   background-color: #800000;
}

.btnblue {
   background-color: #000080;
   color: white;
   padding: 12px;
   margin: 10px 0;
   border: none;
   width: 20%;
   border-radius: 3px;
   cursor: pointer;
   font-size: 17px;
}

.btnblue:hover {
   background-color: #191970;
}

/* img {
   width:176px;
   height:144px;
   background: no-repeat scroll 0 0;
} */

@media (max-width: 800px) {
   .row {
       flex-direction: column-reverse;
   }
   .col-25 {
       margin-bottom: 20px;
   }
}

.topbar>.container-fluid {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.topbar .topbar-brand {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
}

header {
    grid-area: header;
}
.topbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: .4rem;
    padding-bottom: .4rem;
    background-image: linear-gradient(120deg, #4b7fe0, #1b55d0);
    font-size: .9rem;
}

.container-fluid {
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
    margin-right: auto;
    margin-left: auto;
}

.topbar .topbar-links {
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
}

.app {
    display: grid;
    grid-template-areas:
        "header header"
        "aside sticky"
        "aside main"
        "aside footer";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto min-content 1fr auto;
    height: 100vh;
    background-color: #f6f8fa;
    color: #334155;
}

.topbar .topbar-links>ul {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-right: auto;
    list-style: none;
}

.topbar .topbar-links>ul>li>a {
    display: block;
    padding-top: .4rem;
    padding-bottom: .1rem;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: .025em;
    transition: color .15s ease-in-out;
}

.topbar .topbar-links>ul>li.active>a {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(120deg, #f6d365, #faba74);
    border-image-slice: 1;
}

.topbar img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 1.6px solid #dee2e6;
    text-align: left;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .4rem;
    border: 1px solid #e4e4e4;
}


.table {
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse
}

.table td,.table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

.table tbody tr:hover {
    background-color: #00000013
}

.table.sortable thead th:not(.unsortable) {
    cursor: pointer
}

.table.sortable thead th:not(.unsortable):hover {
    background-color: #00000013
}

.table.sortable thead th:not(.unsortable)>div {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.table.sortable thead th:not(.unsortable)>div>.hidden {
    opacity: 0
}


.table td, .table th {
    padding: .55rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    font-size: 0.7rem;
}

.card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem;
    border-bottom: 1px solid #e4e4e4;
}

.card .card-header .card-title {
    font-size: 1rem;
    display: flex;
    align-items: center;
}

#status img {
    width: 320px;
    height: 180px;
    border-radius: 8px;
}

.inline-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-status{
    width: 70%;
}

.app-options{
    width: 30%;
}

.badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .375rem
}

.badge.gray {
    background-color: #6c757d;
    color: #fff
}

.badge.green {
    background-color: #198754;
    color: #fff
}

.badge.yellow {
    background-color: #ffc107;
    color: #000
}

.badge.orange {
    background-color: #f59e0b;
    color: #fff
}

.badge.red {
    background-color: #dc3545;
    color: #fff
}

.badge.black {
    background-color: #000;
    color: #fff
}

button,a[role=button] {
    align-items: center;
    border-width: 0px;
    border-radius: 6px;
    display: inline-flex;
    max-width: 100%;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out;
    white-space: nowrap;
    background: rgba(9,30,66,.04);
    height: 2.28571em;
    line-height: 2.28571em;
    padding: 0 10px;
    vertical-align: middle;
    width: auto;
    -webkit-box-pack: center;
    justify-content: center;
    color: inherit;
    font-size: 0.7rem;
    margin: 2px;
    min-width: 80px;
}

button:hover:not(:disabled),a[role=button]:hover:not(:disabled) {
    background: rgba(9,30,66,.08);
    color: #0f172a
}

button:active:not(:disabled),a[role=button]:active:not(:disabled) {
    background: rgba(9,30,66,.12)
}

button.primary,a[role=button].primary {
    background-color: #3b82f6;
    color: #fff
}

button.primary:hover:not(:disabled),a[role=button].primary:hover:not(:disabled) {
    background-color: #2563eb
}

button.primary:active:not(:disabled),a[role=button].primary:active:not(:disabled) {
    background-color: #1d4ed8
}

button.subtle,a[role=button].subtle {
    background: none
}

button.subtle:hover:not(:disabled),a[role=button].subtle:hover:not(:disabled) {
    background: rgba(9,30,66,.08);
    color: #0f172a
}

button.subtle:active:not(:disabled),a[role=button].subtle:active:not(:disabled) {
    background: rgba(9,30,66,.12)
}

button svg,a[role=button] svg {
    margin-right: .2rem
}

button:disabled,button.disabled,a[role=button].disabled {
    background-color: gray;
    cursor: not-allowed;
    opacity: .75
}


button.red,a[role=button].red {
    background-color: #f63b3b;
    color: #fff;
    font-weight: 600;
}

button.red:hover:not(:disabled),a[role=button].red:hover:not(:disabled) {
    background-color: #eb2525
}

button.red:active:not(:disabled),a[role=button].red:active:not(:disabled) {
    background-color: #d81d1d
}

button.green,a[role=button].green {
    background-color: #198754;
    color: #fff;
    font-weight: 600;

}

button.green:hover:not(:disabled),a[role=button].green:hover:not(:disabled) {
    background-color: #198754
}

button.green:active:not(:disabled),a[role=button].green:active:not(:disabled) {
    background-color: #198754
}

button.yellow,a[role=button].yellow {
    background-color: #ffc107;
    color: #000;
    font-weight: 600;
}

button.yellow:hover:not(:disabled),a[role=button].yellow:hover:not(:disabled) {
    background-color: #f59e0b
}

button.yellow:active:not(:disabled),a[role=button].yellow:active:not(:disabled) {
    background-color: #f59e0b
}


button.black,a[role=button].black {
    background-color: #2a2e39;
    color: #fff;
    font-weight: 600;
}

button.black:hover:not(:disabled),a[role=button].black:hover:not(:disabled) {
    background-color: #2a2e39
}

button.black:active:not(:disabled),a[role=button].black:active:not(:disabled) {
    background-color: #2a2e39
}

.sticky {
    box-shadow: 0 10px 5px -8px rgba(43, 43, 45, .14);
    z-index: 1;
}

.sticky .card {
    flex-direction: row;
    align-items: center;
    grid-gap: 2rem;
    gap: 2rem;
    padding: .5rem 1rem;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}