html body #slp-reminders-page {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: var(--slp-reminders-left, 174px) !important;

    z-index: 2147480000 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #050505 !important;
    color: #ffffff !important;

    font-family: inherit !important;
}

html body #slp-reminders-page * {
    box-sizing: border-box;
}

html body #slp-reminders-page .rem-inner {
    width: 100%;

    margin: 0;

    padding:
        21px
        22px
        60px
        24px;
}

html body #slp-reminders-page .rem-header {
    margin-bottom: 18px;
    padding-bottom: 15px;

    border-bottom: 1px solid #252525;
}

html body #slp-reminders-page .rem-title {
    margin: 0;
    padding: 0;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;
    line-height: 28px;
}

html body #slp-reminders-page .rem-subtitle {
    margin-top: 3px;

    color: #7f8a9c;

    font-size: 13px;
}

html body #slp-reminders-page .rem-cards {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                160px,
                1fr
            )
        );

    gap: 12px;

    margin-bottom: 17px;
}

html body #slp-reminders-page .rem-card {
    min-height: 96px;

    padding: 16px;

    border: 1px solid #292929;
    border-radius: 10px;

    background: #0a0a0a;
}

html body #slp-reminders-page .rem-card-label {
    margin-bottom: 9px;

    color: #8994a4;

    font-size: 11px;
}

html body #slp-reminders-page .rem-card-value {
    color: #ffffff;

    font-size: 25px;
    font-weight: 800;
}

html body #slp-reminders-page .rem-card.red
.rem-card-value {
    color: #ff5f67;
}

html body #slp-reminders-page .rem-card.yellow
.rem-card-value {
    color: #ffd166;
}

html body #slp-reminders-page .rem-card.green
.rem-card-value {
    color: #42e889;
}

html body #slp-reminders-page .rem-box {
    width: 100%;

    margin-bottom: 17px;

    overflow: hidden;

    border: 1px solid #292929;
    border-radius: 10px;

    background: #080808;
}

html body #slp-reminders-page .rem-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 14px 15px;

    border-bottom: 1px solid #292929;
}

html body #slp-reminders-page .rem-box-title {
    font-size: 14px;
    font-weight: 800;
}

html body #slp-reminders-page .rem-box-count {
    color: #8a94a4;

    font-size: 10px;
}

html body #slp-reminders-page .rem-table-wrap {
    overflow-x: auto;
}

html body #slp-reminders-page table {
    width: 100%;

    border-collapse: collapse;

    font-size: 11px;
}

html body #slp-reminders-page th {
    padding: 11px 10px;

    border-bottom: 1px solid #292929;

    background: #111111;
    color: #ccd3dc;

    text-align: left;
    white-space: nowrap;
}

html body #slp-reminders-page td {
    padding: 11px 10px;

    border-bottom: 1px solid #262626;

    color: #dddddd;

    vertical-align: middle;
}

html body #slp-reminders-page tbody tr:last-child td {
    border-bottom: 0;
}

html body #slp-reminders-page tr.rem-overdue td {
    background: #210b0d;
    color: #ff666e;
}

html body #slp-reminders-page tr.rem-waiting td {
    background: #181407;
    color: #ffd166;
}

html body #slp-reminders-page tr.rem-history td {
    background: #0b0b0b;
}

html body #slp-reminders-page .rem-money {
    font-weight: 800;

    white-space: nowrap;
}

html body #slp-reminders-page .rem-btn {
    min-height: 32px;

    padding: 6px 10px;

    border: 1px solid #3a3a3a;
    border-radius: 7px;

    background: #171717;
    color: #ffffff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;
}

html body #slp-reminders-page .rem-btn:hover {
    background: #252525;
}

html body #slp-reminders-page .rem-btn.primary {
    border-color: #b62d35;

    background: #8f2027;
}

html body #slp-reminders-page .rem-btn.primary:hover {
    background: #aa2931;
}

html body #slp-reminders-page .rem-btn:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}

html body #slp-reminders-page .rem-badge {
    display: inline-flex;

    align-items: center;

    padding: 4px 7px;

    border-radius: 999px;

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

    white-space: nowrap;
}

html body #slp-reminders-page .rem-badge.red {
    border: 1px solid #8c2930;

    background: #351014;
    color: #ff646c;
}

html body #slp-reminders-page .rem-badge.yellow {
    border: 1px solid #665714;

    background: #292307;
    color: #ffd166;
}

html body #slp-reminders-page .rem-badge.green {
    border: 1px solid #15683a;

    background: #092a18;
    color: #40e989;
}

html body #slp-reminders-page .rem-empty {
    padding: 35px 20px;

    color: #42e889;

    text-align: center;

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

html body #slp-reminders-page .rem-loading {
    padding: 45px;

    color: #8994a4;

    text-align: center;
}

html body .slp-reminders-nav-active {
    background: #1e2939 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

@media (max-width: 1100px) {
    html body #slp-reminders-page .rem-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    150px,
                    1fr
                )
            );
    }
}

@media (max-width: 650px) {
    html body #slp-reminders-page .rem-cards {
        grid-template-columns:
            1fr;
    }
}