@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

:root{
    --background-color: #22252A;
    --foreground-color: #8A8D93;

    --panel-background-color: #2D3035;
    --panel-border-color: #424344;

    --neon-green: #39FF14;
    --neon-green-2: #1DB700;
    --neon-green-3: #168900;
    --neon-green-light: #ADFF9E;
    --blue-green: #21B6A8;

    --danger: #FF2768;
    --danger-light: #FF8DA7;

    --cut-corner: 0.3rem;
    --panel-border-width: 0.1rem;
}


body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--foreground-color);
}

/** PANEL **/
.panel {
    background-color: var(--panel-background-color);
    border-radius: var(--cut-corner);
    border-color: var(--panel-border-color);
    border-style: solid;
    border-width: var(--panel-border-width);
    margin-bottom: 1rem;
}

.panel-title {
    font-weight: bold;
    background-color: var(--panel-background-color3);
    padding: 0.4rem;
}

.panel-content {
    padding: 0.4rem;
}

/** led **/
.led {
    margin: 0rem 0.5rem;
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-color: var(--neon-green-light);
    border-style: solid;
    border-width: 0.1rem;
    border-radius: 50%;
}

.led.on {
    background-color: var(--neon-green);
}

.led.danger {
    background-color: var(--danger);
    border-color: var(--danger-light);
}

.led-col {
    width: 0.6rem;
}

/** table **/
.table {
    border: none;
    width: 100%;
    background-color: transparent;
    border-spacing: 0;
}

.table th {
    font-weight: bold;
    text-align: left;
}

.table td {
    text-align: left;
}

.table tr {
    background-color: transparent;
}

.table td, .table th {
    border-bottom-style: solid;
    border-bottom-width: 0.1rem;
    border-bottom-color: var(--panel-border-color);
    padding: 0.2rem;
}

.table tr:last-child td, .table tr:last-child th {
    border-bottom: none;
}

table.stripe tr:nth-child(even) {
    background-color: var(--panel-border-color) !important;
}

/** Text Tools **/
.t-right {
    text-align: right;
}