:root {
    --dark: #121729;
}

body {
    font-family: Roboto, "sans-serif";
}

.grid {
    display: grid;
    place-items: center;
}

.container {
    max-width: 95% !important;
}

.datatable-row, .dataTables_wrapper {
    overflow-x: auto;
    padding: 1rem;
}

table.datatable {
    border-bottom: none !important;
    border-collapse: collapse !important;
    border-top: none !important;
    border-color: grey !important;
    width: 100% !important;
}

.table.datatable th {
    border-bottom: 3px !important;
    border-color: grey !important;
}

.fixed-table-container {
    border: 0px !important;
}

#remote-accordion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(55rem, 1fr));
    grid-gap: .2rem;
}

.remote-header {
    display: grid;
    grid-template-columns: 1fr min-content min-content;
    font-weight: bold;
}

.remote-machine-expanded {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 1rem;
}

.remote-machine-item {
    transition: background .2s ease-in-out;
    cursor: pointer;
    align-items: center;
}

.serviceIcon, .serviceLoading {
    width: 5rem;
    height: 5rem;
    background: hsl(41, 58%, 98%);
    border-radius: 50%;
    padding: 1rem;
    margin: .5rem;
}

.remote-machine-item:hover {
    background: hsl(0, 0%, 90%);
}

.collapse-header {
    border: 0;
    background: transparent;
    transition: background .2s ease-in-out;
}

.collapse-header:hover {
    background: hsl(0, 0%, 90%);
}

/* Adding some custom DataTable style */
.dataTables_wrapper {
    width: 100%;
}

#analytics_jiko_events, #analytics_filler_events {
    width: 100%;
}

.main-content-container {
    margin-top: 6rem;
}

.subheader-fixed {
    z-index: 1;
    position: fixed;
    width: 100%;
}

.status-table {
    height: 300pt;
    overflow-y: auto;
}

/* Adding some custom navbar styles */
/************************************/
.btn-navbar {
    background-color: #2E3048;
    color: #ffffff;
    border-color: #2E3048;
}

.btn-navbar:hover, .btn-navbar:focus, .btn-navbar:active, .open>.dropdown-toggle.btn-navbar {
    color: #0BB783;
}

.close>.dropdown-toggle.btn-navbar {
    color: #ffffff;
}

.btn-navbar .dropdown-item .menu-text {
    color: #0BB783;
}

.header-menu-wrapper-on .menu-nav .btn-navbar {
    background-color: transparent;
    padding-left: 0;
    border: none;
    color: #0BB783;
}

#timestamp-table, .video-player {
    max-height: 60vh;
    overflow-y: auto;
}

/************************************/