:root {
    --bg: #071019;
    --bg2: #09141f;
    --panel: #0d1925;
    --panel2: #101f2d;
    --border: #1c2d3c;
    --text: #eef7fb;
    --muted: #7890a2;
    --cyan: #19c9ec;
    --cyan2: #0f91b5;
    --green: #27d790;
    --amber: #ffb84c;
    --red: #ff5b68;
    --shadow:
        0 20px 50px
        rgba(0,0,0,.24);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(
            circle at 70% 0%,
            rgba(20,139,176,.10),
            transparent 32%
        ),
        var(--bg);

    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.shell {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: 244px;
    position: fixed;
    inset: 0 auto 0 0;

    padding: 26px 18px;

    display: flex;
    flex-direction: column;

    border-right:
        1px solid var(--border);

    background:
        rgba(8,18,28,.96);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 26px;
}

.brand-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            var(--cyan),
            var(--cyan2)
        );

    color: #021319;
    font-size: 23px;
    font-weight: 900;

    box-shadow:
        0 8px 24px
        rgba(25,201,236,.18);
}

.brand-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.brand-name span {
    color: var(--cyan);
}

.brand-sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav a {
    min-height: 44px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 13px;
    border-radius: 11px;

    color: #91a7b7;
    font-size: 14px;
    font-weight: 600;

    transition: .16s ease;
}

.nav a span {
    width: 20px;
    text-align: center;
}

.nav a:hover {
    color: var(--text);
    background: #10202d;
}

.nav a.active {
    color: #e9fbff;
    background:
        linear-gradient(
            90deg,
            rgba(25,201,236,.18),
            rgba(25,201,236,.05)
        );

    border:
        1px solid
        rgba(25,201,236,.13);
}

.sidebar-bottom {
    margin-top: auto;
    padding: 20px 8px 0;
}

.version {
    color: #587184;
    font-size: 11px;
    margin-bottom: 11px;
}

.logout {
    width: 100%;
    padding: 9px 12px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    color: #8ba0af;
    background: transparent;

    cursor: pointer;
}

.logout:hover {
    color: var(--text);
    background: #10202d;
}

.main {
    width: calc(100% - 244px);
    margin-left: 244px;
}

.topbar {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 34px;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(7,16,25,.72);

    backdrop-filter:
        blur(16px);

    position: sticky;
    top: 0;
    z-index: 20;
}

.top-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.top-sub {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.owner-pill {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 13px;

    border-radius: 999px;
    border:
        1px solid var(--border);

    background: var(--panel);
    color: #a8bbc8;
    font-size: 13px;
}

.owner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);

    box-shadow:
        0 0 12px
        rgba(39,215,144,.65);
}

.content {
    padding: 28px 34px 44px;
    max-width: 1600px;
}

.metric-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.metric-card,
.card {
    border:
        1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(15,29,42,.96),
            rgba(11,24,35,.96)
        );

    border-radius: 15px;

    box-shadow: var(--shadow);
}

.metric-card {
    min-height: 132px;
    padding: 21px;
    position: relative;
    overflow: hidden;
}

.metric-card::after {
    content: "";
    width: 70px;
    height: 70px;

    position: absolute;
    right: -18px;
    top: -18px;

    border-radius: 50%;
    background:
        rgba(255,255,255,.025);
}

.metric-card.success {
    border-color:
        rgba(39,215,144,.18);
}

.metric-card.danger {
    border-color:
        rgba(255,91,104,.18);
}

.metric-card.cyan {
    border-color:
        rgba(25,201,236,.18);
}

.metric-label {
    color: #8da3b2;
    font-size: 13px;
}

.metric-value {
    margin-top: 12px;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
}

.metric-note {
    margin-top: 12px;
    color: #587185;
    font-size: 11px;
}

.two-col {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 18px;
    margin-bottom: 18px;
}

.card {
    padding: 20px;
}

.card h2,
.card h3,
.card p {
    margin: 0;
}

.card h2 {
    font-size: 16px;
}

.card h3 {
    font-size: 15px;
}

.card p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 17px;
}

.small-link {
    color: var(--cyan);
    font-size: 12px;
}

.status-list {
    display: flex;
    flex-direction: column;
}

.status-row {
    min-height: 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);

    color: #b8c8d2;
    font-size: 13px;
}

.status-row:last-child {
    border-bottom: 0;
}

.badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}

.badge.green {
    color: var(--green);
    background:
        rgba(39,215,144,.09);
}

.badge.red {
    color: var(--red);
    background:
        rgba(255,91,104,.09);
}

.badge.amber {
    color: var(--amber);
    background:
        rgba(255,184,76,.09);
}

.badge.cyan {
    color: var(--cyan);
    background:
        rgba(25,201,236,.09);
}

.badge.muted {
    color: #8097a7;
    background:
        rgba(128,151,167,.08);
}

.issuer-list,
.activity-list {
    display: flex;
    flex-direction: column;
}

.issuer-row,
.activity-row {
    min-height: 57px;

    display: flex;
    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);
}

.issuer-row:last-child,
.activity-row:last-child {
    border-bottom: 0;
}

.issuer-row {
    justify-content: space-between;
}

.issuer-name {
    font-size: 13px;
    font-weight: 700;
}

.issuer-sub {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.issuer-total {
    min-width: 32px;
    text-align: right;
    font-size: 18px;
    font-weight: 800;
}

.activity-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 9px;
    font-weight: 900;
}

.green-bg {
    color: var(--green);
    background:
        rgba(39,215,144,.10);
}

.red-bg {
    color: var(--red);
    background:
        rgba(255,91,104,.10);
}

.amber-bg {
    color: var(--amber);
    background:
        rgba(255,184,76,.10);
}

.muted-bg {
    color: #8aa0b0;
    background:
        rgba(138,160,176,.08);
}

.activity-main {
    flex: 1;
    min-width: 0;
    margin-left: 11px;
    font-size: 13px;
    font-weight: 700;
}

.activity-main span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.activity-time {
    color: #587185;
    font-size: 10px;
    white-space: nowrap;
}

.control-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.btn {
    border: 0;
    border-radius: 9px;
    padding: 10px 14px;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.btn-primary {
    color: #021319;
    background: var(--cyan);
}

.btn-success {
    color: #042219;
    background: var(--green);
}

.btn-warning {
    color: #2a1b03;
    background: var(--amber);
}

.btn-wide {
    width: 100%;
    min-height: 43px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

th {
    padding: 11px 12px;

    border-bottom:
        1px solid var(--border);

    color: #60798b;

    text-align: left;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

td {
    padding: 13px 12px;

    border-bottom:
        1px solid
        rgba(255,255,255,.04);

    color: #aabdc9;
    font-size: 12px;
}

tr:last-child td {
    border-bottom: 0;
}

td strong {
    color: #ddecf3;
}

.right {
    text-align: right;
}

.empty {
    text-align: center;
    color: var(--muted);
    padding: 35px;
}

.icon-btn {
    width: 30px;
    height: 30px;

    border:
        1px solid var(--border);

    border-radius: 8px;
    background: transparent;

    font-size: 18px;
    cursor: pointer;
}

.danger-btn {
    color: var(--red);
}

.danger-btn:hover {
    background:
        rgba(255,91,104,.10);
}

.issuer-grid {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap: 16px;
}

.issuer-card {
    min-height: 220px;
}

.issuer-card-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bank-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: var(--cyan);
    background:
        rgba(25,201,236,.10);

    font-size: 17px;
    font-weight: 900;
}

.issuer-count {
    margin-top: 26px;
    font-size: 38px;
    font-weight: 800;
}

.issuer-caption {
    color: var(--muted);
    font-size: 11px;
}

.mini-stats {
    display: flex;
    gap: 14px;
    margin-top: 17px;
    font-size: 12px;
    font-weight: 700;
}

.green-text {
    color: var(--green);
}

.red-text {
    color: var(--red);
}

.issuer-date {
    margin-top: 20px;
    color: #567083;
    font-size: 10px;
}

.system-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.system-card {
    display: grid;
    grid-template-columns:
        46px 1fr auto;
    gap: 13px;
    align-items: center;
}

.system-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
}

.notice-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.notice-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: var(--cyan);
    background:
        rgba(25,201,236,.10);

    font-weight: 900;
}

.alert {
    padding: 13px 15px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13px;
}

.alert-red {
    color: #ff9ca5;
    background:
        rgba(255,91,104,.09);
    border:
        1px solid
        rgba(255,91,104,.15);
}


/* LOGIN */

.login-body {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(25,201,236,.13),
            transparent 34%
        ),
        #071019;
}

.login-card {
    width: min(390px,100%);
    padding: 34px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background:
        rgba(13,25,37,.96);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.36);

    text-align: center;
}

.login-logo {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 0 auto 18px;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            var(--cyan),
            var(--cyan2)
        );

    color: #021319;
    font-size: 30px;
    font-weight: 900;
}

.login-card h1 {
    margin: 0;
    font-size: 24px;
}

.login-card h1 span {
    color: var(--cyan);
}

.login-card > p {
    margin: 6px 0 25px;
    color: var(--muted);
    font-size: 12px;
}

.login-form {
    text-align: left;
}

.login-form label {
    display: block;
    margin: 14px 0 6px;

    color: #8399a9;
    font-size: 11px;
    font-weight: 700;
}

.login-form input {
    width: 100%;
    min-height: 43px;

    padding: 0 12px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    outline: none;

    color: var(--text);
    background: #09151f;
}

.login-form input:focus {
    border-color:
        rgba(25,201,236,.55);
}

.login-form .btn {
    margin-top: 20px;
}

.login-secure {
    margin-top: 19px;
    color: #587185;
    font-size: 10px;
}


/* MOBILE */

@media (
    max-width: 1050px
) {

    .metric-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .issuer-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media (
    max-width: 760px
) {

    .shell {
        display: block;
    }

    .sidebar {
        width: 100%;
        height: auto;

        position: static;

        padding: 14px;

        border-right: 0;
        border-bottom:
            1px solid var(--border);
    }

    .brand {
        padding: 0 2px 14px;
    }

    .nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .nav a {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 10px;
    }

    .nav a span {
        display: none;
    }

    .sidebar-bottom {
        display: none;
    }

    .main {
        width: 100%;
        margin-left: 0;
    }

    .topbar {
        min-height: 74px;
        padding: 16px 18px;
    }

    .top-title {
        font-size: 20px;
    }

    .owner-pill {
        font-size: 0;
        padding: 9px;
    }

    .content {
        padding: 18px;
    }

    .metric-grid,
    .two-col,
    .system-grid {
        grid-template-columns: 1fr;
    }

    .issuer-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .metric-card {
        min-height: 115px;
    }

    .control-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .system-card {
        grid-template-columns:
            44px 1fr;
    }

    .system-card > .badge {
        grid-column:
            1 / -1;
        justify-self:
            flex-start;
    }
}


@media (
    max-width: 470px
) {

    .issuer-grid {
        grid-template-columns: 1fr;
    }

    .metric-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap: 10px;
    }

    .metric-card {
        padding: 16px;
    }

    .metric-value {
        font-size: 29px;
    }
}

/* === BankPDF v0.2.1 System Monitor === */

.monitor-alert-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.monitor-alert-card.healthy {
    border-color:
        rgba(39,215,144,.20);
}

.monitor-alert-card.warning {
    border-color:
        rgba(255,184,76,.30);
}

.monitor-alert-card.critical {
    border-color:
        rgba(255,91,104,.35);
}

.monitor-alert-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: var(--green);
    background:
        rgba(39,215,144,.10);

    font-weight: 900;
}

.resource-card {
    margin-bottom: 18px;
}

.resource-grid {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap: 14px;
}

.resource-item {
    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius: 12px;

    background:
        rgba(4,15,23,.26);
}

.resource-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 13px;

    color: #93a8b6;
    font-size: 12px;
}

.resource-top strong {
    color: #e8f4f8;
    font-size: 17px;
}

.meter {
    height: 7px;
    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,.055);
}

.meter-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    transition:
        width .35s ease,
        background .35s ease;
}

.meter-bar.normal {
    background: var(--green);
}

.meter-bar.warning {
    background: var(--amber);
}

.meter-bar.danger {
    background: var(--red);
}

.resource-note {
    margin-top: 10px;

    color: #60788a;
    font-size: 10px;
}

.uptime-big {
    min-height: 30px;

    display: flex;
    align-items: center;

    color: var(--cyan);
    font-size: 16px;
    font-weight: 800;
}

@media (max-width: 1050px) {
    .resource-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 600px) {
    .resource-grid {
        grid-template-columns: 1fr;
    }
}

/* === BankPDF v0.2.2 History === */

.history-card {
    margin-bottom: 18px;
}

.history-head {
    gap: 20px;
}

.history-ranges {
    display: flex;
    gap: 7px;
}

.history-range {
    border:
        1px solid
        rgba(255,255,255,.07);

    background:
        rgba(255,255,255,.025);

    color: #7990a0;

    padding: 7px 11px;

    border-radius: 8px;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease;
}

.history-range:hover {
    color: #cfe7ef;

    border-color:
        rgba(40,215,255,.20);
}

.history-range.active {
    color: var(--cyan);

    border-color:
        rgba(40,215,255,.28);

    background:
        rgba(40,215,255,.08);
}

.history-grid {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 14px;
}

.history-chart {
    min-width: 0;

    padding: 15px;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius: 12px;

    background:
        rgba(4,15,23,.26);
}

.history-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;
}

.history-chart-head h3 {
    margin: 0 0 4px;

    font-size: 13px;
}

.history-chart-head p {
    margin: 0;

    color: #60788a;
    font-size: 10px;
}

.history-chart canvas {
    display: block;

    width: 100%;
    height: 220px;
}

.history-legend {
    display: flex;
    gap: 12px;

    color: #8095a4;
    font-size: 10px;
}

.history-legend span::before {
    content: "";

    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 5px;

    border-radius: 50%;
}

.legend-cpu::before {
    background: #28d7ff;
}

.legend-ram::before {
    background: #7ee7a8;
}

.legend-tg::before {
    background: #8e9cff;
}


@media (max-width: 900px) {

    .history-grid {
        grid-template-columns: 1fr;
    }

    .history-head {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 520px) {

    .history-ranges {
        width: 100%;
    }

    .history-range {
        flex: 1;
    }
}

/* === BankPDF v0.2.4 Monitor Settings === */

.monitor-settings-card {
    margin-bottom: 18px;
}

.monitor-settings-state {
    padding: 6px 10px;

    border:
        1px solid
        rgba(84,226,154,.20);

    border-radius: 8px;

    background:
        rgba(84,226,154,.06);

    color: #65dca0;

    font-size: 11px;
    font-weight: 700;
}

.monitor-settings-state.error {
    border-color:
        rgba(255,91,91,.22);

    background:
        rgba(255,91,91,.06);

    color: #ff8585;
}

.monitor-settings-master {
    margin-bottom: 14px;

    padding: 14px;

    border:
        1px solid
        rgba(40,215,255,.10);

    border-radius: 12px;

    background:
        rgba(40,215,255,.025);
}

.monitor-switch-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    cursor: pointer;
}

.monitor-switch-row span {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.monitor-switch-row strong {
    font-size: 13px;
}

.monitor-switch-row small,
.monitor-check small {
    color: #657d8d;
    font-size: 10px;
}

.monitor-switch-row input,
.monitor-check input {
    width: 18px;
    height: 18px;

    accent-color: #28d7ff;
}

.monitor-settings-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 12px;
}

.monitor-setting-section {
    padding: 14px;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius: 12px;

    background:
        rgba(4,15,23,.24);
}

.monitor-setting-section h3 {
    margin: 0 0 12px;

    font-size: 12px;
}

.monitor-check {
    display: flex;

    align-items: center;

    gap: 9px;

    margin: 10px 0;

    cursor: pointer;
}

.monitor-check span {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.monitor-check strong {
    font-size: 11px;
}

.monitor-threshold-row {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 10px;
}

.monitor-threshold-row label > span {
    display: block;

    margin-bottom: 5px;

    color: #708796;

    font-size: 10px;
}

.monitor-threshold-row label > div {
    display: flex;

    align-items: center;

    gap: 6px;
}

.monitor-threshold-row input {
    width: 100%;

    box-sizing: border-box;

    padding: 9px 10px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 8px;

    outline: none;

    background:
        rgba(255,255,255,.025);

    color: #d9ebf0;

    font: inherit;
}

.monitor-threshold-row input:focus {
    border-color:
        rgba(40,215,255,.35);
}

.monitor-threshold-row b {
    color: #6f8796;

    font-size: 11px;
}

.monitor-settings-hint {
    margin: 10px 0 0;

    color: #60788a;

    font-size: 10px;
    line-height: 1.5;
}

.monitor-settings-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 14px;
}

.monitor-settings-save {
    border:
        1px solid
        rgba(40,215,255,.28);

    border-radius: 9px;

    padding: 9px 14px;

    background:
        rgba(40,215,255,.09);

    color: #41dfff;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.monitor-settings-save:hover {
    background:
        rgba(40,215,255,.14);
}

.monitor-settings-save:disabled {
    opacity: .5;

    cursor: wait;
}

#monitor-settings-message {
    color: #7f96a5;

    font-size: 10px;
}


@media (max-width: 850px) {

    .monitor-settings-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 520px) {

    .monitor-settings-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .monitor-settings-save {
        width: 100%;
    }
}