@font-face {
    font-family: "Futura PT Local";
    src: local("Futura PT"), local("FuturaPT-Book");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Futura PT Local";
    src: local("Futura PT Demi"), local("FuturaPT-Demi");
    font-style: normal;
    font-weight: 600 700;
}

@font-face {
    font-family: "Northead Local";
    src: local("Northead");
    font-style: normal;
    font-weight: 400 900;
}

:root {
    --ui-white: #ffffff;
    --ui-blue: #3d85c6;
    --ui-carbon: #0f1012;
    --ui-slate: #243341;
    --ui-navy: #0f202f;
    --ui-line: rgba(255, 255, 255, .18);
    --ui-blue-soft: rgba(61, 133, 198, .18);
    --body-font: "Saira", "Futura PT Local", Arial, sans-serif;
    --display-font: "Chakra Petch", "Northead Local", sans-serif;
    --database-header-height: 62.3px;
    --database-brand-width: 210px;
    --database-sidebar-width: 210px;
    --database-sidebar-collapsed-width: 14px;
    --database-heading-size: 17.5px;
    --database-navigation-size: 12.6px;
    --database-control-size: 7.7px;
    --database-control-height: 22.4px;
}

html,
body {
    margin: 0;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    padding: 0;
    background-color: var(--ui-carbon);
    background-image:
        linear-gradient(rgba(100, 116, 139, .06) 0.7px, transparent 0.7px),
        linear-gradient(90deg, rgba(100, 116, 139, .06) 0.7px, transparent 0.7px);
    background-size: 22.4px 22.4px;
    font-family: var(--body-font);
    font-size: 8.4px;
}

.database-header,
.profile-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 300;
    display: grid;
    grid-template-columns: var(--database-sidebar-width) 1fr 0;
    align-items: center;
    height: var(--database-header-height);
    border-bottom: 1.4px solid var(--ui-blue);
    color: var(--ui-white);
    background: var(--ui-carbon);
}

.database-brand,
.profile-brand {
    display: flex;
    align-items: center;
    width: var(--database-brand-width);
    height: 90%;
    padding: 3.5px 12.6px 7px;
    background: var(--ui-carbon);
    text-decoration: none;
}

.database-brand img,
.profile-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.database-header h1,
.profile-header h1 {
    margin: 0;
    color: var(--ui-blue);
    font-family: var(--display-font);
    font-size: var(--database-heading-size);
    font-weight: 600;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

.database-sidebar {
    position: fixed;
    inset: var(--database-header-height) auto 0 0;
    z-index: 200;
    width: var(--database-sidebar-width);
    padding: 0;
    border-right: 1.4px solid var(--ui-blue);
    color: var(--ui-white);
    background: var(--ui-slate);
    font-family: var(--body-font);
    transition: width 180ms ease;
}

.database-sidebar h2 {
    position: relative;
    height: 41.3px;
    margin: 0;
    padding: 8.4px 7px;
    border-bottom: 1.4px solid var(--ui-blue);
    color: var(--ui-blue);
    background: var(--ui-navy);
    font-family: var(--display-font);
    font-size: var(--database-heading-size);
    font-weight: 600;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
}

.database-navigation-toggle {
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: -1.4px;
    display: grid;
    place-items: center;
    width: 12.6px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--ui-blue);
    background: transparent;
    font: 900 10.5px/1 var(--body-font);
    cursor: pointer;
    transform: none;
    opacity: .62;
    transition: opacity 140ms ease, color 140ms ease;
}

.database-navigation-toggle:hover,
.database-navigation-toggle:focus-visible {
    outline: none;
    color: var(--ui-white);
    background: transparent;
    opacity: 1;
}

.database-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.database-sidebar a {
    display: block;
    margin: 0;
    padding: 3.5px 8.4px;
    border: 0;
    border-radius: 2.8px;
    color: var(--ui-white);
    font-size: var(--database-navigation-size);
    font-weight: 600;
    letter-spacing: .035em;
    text-align: center;
    text-decoration: none;
    text-transform: none;
}

.database-sidebar a:hover,
.database-sidebar a:focus-visible {
    background: var(--ui-blue-soft);
    outline: none;
}

.database-sidebar a[aria-current="page"] {
    color: var(--ui-white);
    background: transparent;
    font-weight: 700;
}

.shared-profile-control {
    position: absolute;
    top: 50%;
    right: 9.8px;
    display: block;
    width: 40.6px;
    height: 40.6px;
    border: 1.4px solid var(--ui-blue);
    border-radius: 50%;
    background: var(--ui-navy);
    transform: translateY(-50%);
    overflow: hidden;
}

.shared-profile-control img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5.6px;
    border-radius: 50%;
    object-fit: cover;
}

.shared-database-profile{position:absolute;top:50%;right:9.8px;z-index:20;transform:translateY(-50%)}
.shared-database-profile summary{display:grid;place-items:center;width:40.6px;height:40.6px;border:1.4px solid var(--ui-blue);border-radius:50%;background:var(--ui-navy);cursor:pointer;list-style:none;overflow:visible}
.shared-database-profile summary::-webkit-details-marker{display:none}
.shared-database-profile summary:focus-visible{outline:1.4px solid var(--ui-white);outline-offset:2.1px}
.shared-database-profile-avatar{display:block;width:100%;height:100%;padding:0;border-radius:50%;object-fit:cover}
.shared-database-profile-tooltip{position:absolute;top:calc(100% + 5.6px);right:0;display:grid;min-width:126px;padding:5.6px 7px;border:.7px solid var(--ui-line);border-radius:3.5px;color:var(--ui-white);background:var(--ui-navy);box-shadow:0 5.6px 16.8px rgba(0,0,0,.45);font-size:7.7px;line-height:1.35;pointer-events:none;opacity:0;transform:translateY(-2.8px);transition:opacity .15s,transform .15s}
.shared-database-profile summary:hover .shared-database-profile-tooltip,.shared-database-profile summary:focus-visible .shared-database-profile-tooltip{opacity:1;transform:none}.shared-database-profile[open] .shared-database-profile-tooltip{display:none;visibility:hidden;pointer-events:none}
.shared-database-profile-menu{position:absolute;top:calc(100% + 9.8px);right:0;width:max-content;min-width:175px;max-width:calc(100vw - 19.6px);padding:9.8px;border:.7px solid var(--ui-blue);border-radius:5.6px;color:var(--ui-white);background:var(--ui-carbon);box-shadow:0 8.4px 28px rgba(0,0,0,.62)}
.shared-database-profile:not([open]) .shared-database-profile-menu{display:none}
.shared-account-login,.shared-account-user{display:grid;gap:7px}.shared-account-user{padding-top:4.2px}.shared-account-login label{display:grid;gap:2.8px;color:var(--ui-white);font-size:7.7px;font-weight:700;text-transform:uppercase}.shared-account-login input{width:100%;padding:5.6px;border:.7px solid var(--ui-line);border-radius:2.8px;color:var(--ui-white);background:var(--ui-navy);font:8.4px var(--body-font)}
.shared-account-password{position:relative}.shared-account-password input{padding-right:38px}.shared-account-password-toggle{position:absolute;right:2.8px;bottom:2.8px;padding:2.8px 4.2px!important;border:0!important;background:transparent!important;font-size:7px!important}
.shared-account-separator{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:5.6px;color:var(--ui-line);font-size:7px;text-transform:uppercase}.shared-account-separator::before,.shared-account-separator::after{content:"";height:.7px;background:var(--ui-line)}
.shared-database-profile-menu button,.shared-database-profile-menu .shared-profile-link{display:block;width:100%;padding:5.6px 7px;border:.7px solid var(--ui-blue);border-radius:2.8px;color:var(--ui-white);background:var(--ui-slate);font:700 7.7px var(--body-font);text-align:center;text-decoration:none;text-transform:uppercase;cursor:pointer}
.shared-database-profile-menu button:hover,.shared-database-profile-menu button:focus-visible,.shared-profile-link:hover,.shared-profile-link:focus-visible{background:var(--ui-blue);outline:0}.shared-account-status{min-height:10px;margin:0;color:#ff9a9a;font-size:7px;text-align:center}.shared-account-status:empty{display:none}.shared-account-user p{margin:0;text-align:center}.shared-account-display-name{color:#cfe7ff;font-size:9.1px;line-height:1.2}.shared-account-display-name:empty{display:none}.shared-account-user-avatar{display:block;width:84px;height:84px;margin:0 auto;padding:0;border:1.4px solid var(--ui-blue);border-radius:50%;background:var(--ui-slate);object-fit:cover}.shared-account-user[hidden],.shared-account-login[hidden]{display:none}

body.database-navigation-collapsed .database-sidebar {
    width: var(--database-sidebar-collapsed-width);
}

.database-header::after,
.profile-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: var(--database-brand-width);
    height: 1px;
    background: var(--ui-blue);
    pointer-events: none;
}

body.database-navigation-collapsed .database-sidebar h2 {
    height: 41.3px;
    padding: 0;
    color: transparent;
    font-size: 0;
    letter-spacing: 0;
}

body.database-navigation-collapsed .database-navigation-toggle {
    right: -1.4px;
    transform: none;
}

body.database-navigation-collapsed .database-sidebar nav {
    display: none;
}

body.database-navigation-collapsed .database-workspace {
    padding-left: calc(var(--database-sidebar-collapsed-width) + 16.8px);
}

body.database-navigation-collapsed .profile-main {
    margin-left: var(--database-sidebar-collapsed-width);
}

.database-workspace,
.profile-main {
    transition: padding-left 180ms ease, margin-left 180ms ease;
}

@media print {
    .database-navigation-toggle {
        display: none;
    }
}

nav a { text-transform: uppercase; }

/* Anchor the brand to the viewport edge independently of drawer width. */
.database-header > .database-brand,
.profile-header > .profile-brand {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    width: var(--database-brand-width, 210px);
}
.database-header > h1,
.profile-header > h1 { grid-column: 2; }
.database-brand img,
.profile-brand img { object-position: left center; }

/* Slightly larger header details at laptop-sized browser widths. */
@media screen and (min-width: 901px) and (max-width: 2000px) {
 .database-header h1,.profile-header h1 { font-size: 21px; }
 .database-header .database-profile > summary,
 .database-header .shared-database-profile > summary,
 .profile-header .shared-database-profile > summary,
 .database-header .home-profile-menu > summary { width: 48px; height: 48px; }
 .database-header #developer-options-button,
 .profile-header #developer-options-button { right: 70px; }
}