html, body {
    background-color: hsl(0, 0%, 96%);
}


.menu-list li a {
   color: #fff;
   padding-left: 25px;
}

aside .logo {
   background: rgba(0,0,0,.3);
}

.navbar-brand .navbar-item {
   padding-left: 24px;
}
.breadcrumb {
   background: rgba(0,0,0,0.05);
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 25px;
}
.menu .menu-label {
   margin-top: 35px;
   margin-left: 25px;
}

.menu-list li:hover a {
   background: rgba(0,0,0,.2);
   color: rgba(255,255,255,.5);
}

.map {
    background: #AAD3DF;
    height: 72vh;
    width: 100%;
}


.remote-display {
    position: relative;
    width: 870px;
    height: 480px;
    display: inline-block;
    border: 20px solid #232323;
    background: #232323;
    border-radius: 9px;
    box-sizing: content-box;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.5);
}

.remote-display-image {
    width: 800px;
    height: 480px;
    display: inline-block;
}

.scroll-buttons {
    display: inline-block;
    margin-top:0;
    padding-top:0;
    height:480px;
    vertical-align: top;
}
.scroll-button {
    display: block;
    height: 240px;
    padding-top: 0;
    margin-top: 0;
    border: none;

}

.scroll-button>span {
    display: block;
}

/* Loaders for empty React components */

#connection-list-table:empty, #connection-history-table:empty, #realtime-view:empty {
    border: 8px solid #fff; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-top: 100px;
    margin-left: 46%;
    float: left;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media screen and (min-width: 1024px) {
    .aside {
       min-height: 100vh;
       height: auto;
    }
    .menu-list {
       margin-top: 13px;
    }
    header .navbar, aside .logo {
       min-height: 72px;
    }
    .main {
       min-height: calc(100vh - 80px);
       height: auto;
    }
}

.navbar-brand.column {
   background: #2A2A2A;
}

.display {
   background: #333;
   color: #fff;
   width: 640px;
   height: 380px;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}


.m-none { margin: 0; }
.p-none { padding: 0; }
.m-t-none { margin-top: 0; }
.p-t-none { padding-top: 0; }
.m-r-none { margin-right: 0; }
.p-r-none { padding-right: 0; }
.m-b-none { margin-bottom: 0; }
.p-b-none { padding-bottom: 0; }
.m-l-none { margin-left: 0; }
.p-l-none { padding-left: 0; }
.m-xxs { margin: 0.125rem; }
.p-xxs { padding: 0.125rem; }
.m-t-xxs { margin-top: 0.125rem; }
.p-t-xxs { padding-top: 0.125rem; }
.m-r-xxs { margin-right: 0.125rem; }
.p-r-xxs { padding-right: 0.125rem; }
.m-b-xxs { margin-bottom: 0.125rem; }
.p-b-xxs { padding-bottom: 0.125rem; }
.m-l-xxs { margin-left: 0.125rem; }
.p-l-xxs { padding-left: 0.125rem; }
.m-xs { margin: 0.25rem; }
.p-xs { padding: 0.25rem; }
.m-t-xs { margin-top: 0.25rem; }
.p-t-xs { padding-top: 0.25rem; }
.m-r-xs { margin-right: 0.25rem; }
.p-r-xs { padding-right: 0.25rem; }
.m-b-xs { margin-bottom: 0.25rem; }
.p-b-xs { padding-bottom: 0.25rem; }
.m-l-xs { margin-left: 0.25rem; }
.p-l-xs { padding-left: 0.25rem; }
.m-sm { margin: 0.5rem; }
.p-sm { padding: 0.5rem; }
.m-t-sm { margin-top: 0.5rem; }
.p-t-sm { padding-top: 0.5rem; }
.m-r-sm { margin-right: 0.5rem; }
.p-r-sm { padding-right: 0.5rem; }
.m-b-sm { margin-bottom: 0.5rem; }
.p-b-sm { padding-bottom: 0.5rem; }
.m-l-sm { margin-left: 0.5rem; }
.p-l-sm { padding-left: 0.5rem; }
.m-md { margin: 1rem; }
.p-md { padding: 1rem; }
.m-t-md { margin-top: 1rem; }
.p-t-md { padding-top: 1rem; }
.m-r-md { margin-right: 1rem; }
.p-r-md { padding-right: 1rem; }
.m-b-md { margin-bottom: 1rem; }
.p-b-md { padding-bottom: 1rem; }
.m-l-md { margin-left: 1rem; }
.p-l-md { padding-left: 1rem; }
.m-lg { margin: 2rem; }
.p-lg { padding: 2rem; }
.m-t-lg { margin-top: 2rem; }
.p-t-lg { padding-top: 2rem; }
.m-r-lg { margin-right: 2rem; }
.p-r-lg { padding-right: 2rem; }
.m-b-lg { margin-bottom: 2rem; }
.p-b-lg { padding-bottom: 2rem; }
.m-l-lg { margin-left: 2rem; }
.p-l-lg { padding-left: 2rem; }
.m-xl { margin: 4rem; }
.p-xl { padding: 4rem; }
.m-t-xl { margin-top: 4rem; }
.p-t-xl { padding-top: 4rem; }
.m-r-xl { margin-right: 4rem; }
.p-r-xl { padding-right: 4rem; }
.m-b-xl { margin-bottom: 4rem; }
.p-b-xl { padding-bottom: 4rem; }
.m-l-xl { margin-left: 4rem; }
.p-l-xl { padding-left: 4rem; }
.m-xxl { margin: 8rem; }
.p-xxl { padding: 8rem; }
.m-t-xxl { margin-top: 8rem; }
.p-t-xxl { padding-top: 8rem; }
.m-r-xxl { margin-right: 8rem; }
.p-r-xxl { padding-right: 8rem; }
.m-b-xxl { margin-bottom: 8rem; }
.p-b-xxl { padding-bottom: 8rem; }
.m-l-xxl { margin-left: 8rem; }
.p-l-xxl { padding-left: 8rem; }