:root {
    --main-font: -apple-system, BlinkMacSystemFont, sans-serif;
    --border-color: #dadada;
    --notifications-center-width: 344px;
}

html {
    width: 100vw;
    height: 100vh;
}

body {
    display: grid;
    grid-template-columns: 1fr var(--notifications-center-width);
    grid-template-rows: 22px 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--main-font);
    background-image: url(../img/Distorted_Circles.png);
    background-size: cover;
    margin: 0;
}

h1 {
    font-size: 30px;
    font-weight: 100;
    margin-left: 50px;
}

h1 sup {
    font-size: 60%;
    font-weight: 100;
}

.menubar {
    grid-column: span 2;
    grid-row: 1;
    height: 22px;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    border-bottom: 0;
}

.menubar ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.menubar ul li {
    color: #fff;
    height: 22px;
    margin-left: 8px;
}

.menubar ul li a,
.menubar ul li span {
    color: #fff;
    font-size: 12px;
    line-height: 1.85;
    text-decoration: none;
}

.menubar ul li span {
    opacity: 0.5;
}

#directions {
    grid-column: 1;
    grid-row: 2;
    color: #fff;
    margin: 2em;
}

#directions li {
    margin-bottom: 2em;
    transition: .4s opacity ease-out;
}

#directions li.open {
    opacity: 0.4;
    transition: .4s opacity ease-in;
}

#btn-notification-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 22px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

#btn-notification-center:active,
#btn-notification-center:focus {
    background-color: gray;
    outline: 0;
}

#btn-notification-center svg {
    width: 18px;
    height: 10px;
}

#btn-notification-center svg use {
    fill: #fff;
}

#notifications-center {
    transform: translateX(var(--notifications-center-width));
    transition: .4s transform ease-out;
    grid-column: 2;
    grid-row: 2;
    color: #585858;
    background-color: rgba(250, 250, 250, 0.8);
    -webkit-backdrop-filter: blur(4px);
}

#notifications-center.open {
    transform: translateX(0);
    transition: .4s transform ease-in;
}

.notifications-center-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid var(--border-color);
}

.notifications-center-buttons button {
    width: 145px;
    height: 22px;
    border: 0;
    font-size: 12px;
}

#btn-today {
    color: #000;
    background-color: #f6f6f6;
    border: 1px solid #d1d1d1;
    border-right: 0;
    border-radius: 4px 0 0 4px;
}

#btn-notifications {
    color: #fff;
    background-color: #b9b9b9;
    border-radius: 0 4px 4px 0;
}

.widget-body {
    padding: 8px 16px;
}

#subway-line-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

#subway-line-list li {
    cursor: default;
    display: flex;
    min-height: 36px;
}


#subway-line-list li:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.widget {
    font-size: 12px;
    background-color: #f1f1f1;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin: 12px;
}

.widget-titlebar {
    display: flex;
    align-items: center;
    height: 25px;
    padding: 0 10px 0 16px;
    background: #e9e9e9;
    border-radius: 11px 11px 0 0;
}

.widget-icon {
    width: 14px;
    height: 14px;
}

.widget-titlebar h2 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #6a6a6a;
    margin-left: 8px;
}

.widget-info-icon {
    width: 16px;
    margin-left: auto;
}

details {
    transition: 2s all ease-in;
    width: 100%;
}

summary {
    cursor: pointer;
    display: block;
    min-height: 36px;
}


summary:focus {
    outline: 0;
}

summary::-webkit-details-marker {
  display: none;
}

.line-summary {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.line-badges {
    display: flex;
    align-items: center;
}

.line-status {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.line-status span {
    margin-left: 4px;
}

.label-good-service {
    color: #878787;
}

.label-service-change {
    color: #458C35;
}

.label-planned-work {
    color: #D17852;
}

.label-delays {
    color: #D15252;
    letter-spacing: .2em;
}

.status-details {
    display: flex;
}

.single-line-icon {
    margin-top: -2px;
    margin-right: 8px;
}

.status-details .status-message p {
    line-height: 16px;
}

.status-details .status-message p:first-of-type {
    margin-top: 0;
}

/* Subway line badges */
.line-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* Status icons */
.service-change {
    width: 9px;
    height: 14px;
}

.planned-work {
    width: 14px;
    height: 16px;
}

.delays {
    width: 9px;
    height: 13px;
}