@import url("../reset.css");
@import url("../common.css");
@import url("../layout.css");
@import url("/css/responsive.css");

/* =========================
   Sub header
========================= */

#sub_header .more a {
    display: none;
}


/* =========================
Alarm page
========================= */

.alarm_page {
    min-height: calc(100dvh - var(--sub-header-height));
    padding: 0 2rem;
}

/* Toolbar */

.alarm_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    border-bottom: 1px solid var(--color-border-100);
}

.alarm_toolbar p {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
}

.alarm_toolbar strong {
    color: var(--color-primary);
    font-weight: var(--bold);
}

.alarm_read_all {
    flex: 0 0 auto;
    padding: 1rem 0;

    color: var(--color-text-muted);
    font-size: var(--font-xs);
    text-decoration: underline;

    background: transparent;
    border: 0;
}

/* Alarm groups */

.alarm_groups,
.alarm_group,
.alarm_list {
    display: flex;
    flex-direction: column;
}

.alarm_groups {
    gap: 3rem;
    padding-top: 2rem;
}

.alarm_group {
    gap: 1rem;
}

.alarm_group h2 {
    font-size: var(--font-md);
    font-weight: var(--bold);
}

.alarm_list {
    gap: 1rem;
}

.alarm_time {
    font-size:var(--font-xs);
    color:var(--color-text-disabled);
}

/* Alarm item */

.alarm_link {
    align-items: flex-start;
    width: 100%;
}