/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.14_typescript@6.0.3_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/components.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Reusable, object-oriented CSS base components for all Zulip pages
   (both web app and portico). */

label.checkbox {
    padding: 0;
    display: inline-block;
    position: relative;
    vertical-align: top;
    min-height: 20px;
}

label.checkbox input[type="checkbox"] {
        position: absolute;
        clip-path: rect(0 0 0 0);
    }

label.checkbox input[type="checkbox"]  ~ .rendered-checkbox {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            top: -2px;

            padding: 2px;
            margin: 0 5px 0 0;
            height: 10px;
            width: 10px;

            font-weight: 300;
            line-height: 0.8;
            font-size: 1.3rem;
            text-align: center;
            /* Color variables are not imported to the portico, so we duplicate
               the light-mode color value here as a fallback. */
            border: 1px solid
                var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%));
            border-radius: 4px;

            cursor: pointer;
        }

label.checkbox input[type="checkbox"]:checked ~ .rendered-checkbox {
            /* As with the border color above, we duplicate
               the light-mode SVG URL value here as a fallback. */
            background-image: var(
                --svg-url-rendered-checkbox,
                url(files/images/checkbox.svg)
            );
            background-size: 85%;
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }

label.checkbox input[type="checkbox"]:disabled ~ .rendered-checkbox {
            opacity: 0.5;
            cursor: not-allowed;
        }

label.checkbox:has(.enter_sends) {
        vertical-align: middle;
    }

a.no-style {
    color: inherit;
}

a.no-underline,
a.no-underline:hover,
a.no-underline:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
}

.italic {
    font-style: italic;
}

.simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0deg 0% 0%);
        box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 33%);
    }

.simplebar-track.simplebar-vertical {
        transition: width 0.2s ease 1s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
    }

.simplebar-track.simplebar-vertical.simplebar-hover {
            width: 15px;
            transition: width 0.2s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
        }

.simplebar-track.simplebar-horizontal {
        transition: height 0.2s ease 1s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
    }

.simplebar-track.simplebar-horizontal.simplebar-hover {
            height: 15px;
            transition: height 0.2s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
        }

i.zulip-icon.zulip-icon-bot {
    color: var(--color-icon-bot);
}

/* Hide the somewhat buggy browser show password feature in IE, Edge,
   since it duplicates our own "show password" widget. */
input::-ms-reveal {
    display: none;
}

.password-div {
    position: relative;
}

.password-div .password_visibility_toggle {
        position: absolute;
        right: 10px;
        top: 42px;
        opacity: 0.6;
    }

.password-div .password_visibility_toggle:hover {
            opacity: 1;
        }

select.bootstrap-focus-style:focus {
        outline: 1px dotted hsl(0deg 0% 20%);
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        transition: none;
    }

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.14_typescript@6.0.3_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/portico/legacy_portico.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
    /*
        It is fine if footer is longer than that
        since we are only trying to avoid overlap.
    */
    --height-footer: 495px;
}

[data-tippy-root] .tippy-box .tippy-content {
    font-size: 14px;
    font-weight: normal;
    color: hsl(0deg 0% 100%);
}

body {
    margin: 0;
    background-color: hsl(0deg 0% 98%);
    font-family: "Source Sans 3 VF", sans-serif;
    line-height: 150%;
    height: 100%;
    font-weight: 300;
    font-size: 17px;
}

html {
    height: 100%;
}

.noscroll {
    overflow: hidden;
    position: fixed;
}

.digest-address-link {
    margin-top: 10px;
    color: hsl(0deg 0% 60%);
    font-size: 12px;
    text-align: center;
}

.normal {
    font-weight: normal;
}

.navbar {
    margin-bottom: 0;
}

.header {
    position: relative;

    padding: 15px 0;
    height: 29px;

    background-color: hsl(0deg 0% 100%);
    box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);

    z-index: 100;
}

/* Hide the login and registration links on /api
   and /policies... */
.portico-container.help .top-links {
    visibility: hidden;
}

/* ...but continue to show the logged-in pill when
   a user is authenticated. */
.portico-container.help .top-links:has(.portico-header-dropdown) {
    visibility: visible;
}

.portico-container.help .header {
    position: sticky;
    top: 0;
    background-color: hsl(0deg 0% 98%);
}

.portico-container.help .header a {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.portico-container.help .header .header-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.portico-container.help .header .logo .brand-logo path {
            fill: hsl(223deg 6% 35%);
        }

.portico-container.help .header .logo .light {
            font-size: 0;
            opacity: 1;
        }

.portico-container.help .header .logo .light a {
                font-size: 1.4rem;
                margin-left: 10px;
                color: hsl(223deg 6% 35%);
            }

.portico-container.help .header #skip-navigation {
        background-color: var(--color-link);
    }

.navbar.footer .nav  > li {
        line-height: 56px;
    }

.navbar.footer .nav > li  > a {
            padding-top: 0;
            padding-bottom: 0;
        }

.push {
    height: 56px;
}

/* The API tabbed content tends to have a lot of code blocks,
   which look nicer against a different background */
.api-center .tabbed-section .blocks {
        background-color: hsl(0deg 0% 98%);
    }
.api-center .tabbed-section ul.nav li.active {
            background-color: hsl(0deg 0% 98%);
            border-bottom: 1px solid hsl(0deg 0% 98%);
        }

.digest-container {
    padding-top: 100px;
}

.digest-email-container {
    display: block;
    margin: 0 auto !important;
    max-width: 700px;
    padding-bottom: 30px;
}

.digest-email-html {
    padding: 20px;
    background-color: hsl(0deg 0% 100%);
    border-radius: 5px;
}

.app.help {
    display: inline-flex;

    box-shadow: 0 -20px 50px hsl(0deg 0% 0% / 4%);

    color: hsl(223deg 6% 25%);
}

.app.help .hamburger {
        display: none;
    }

.help .app-main {
        padding: 0;
    }

/* Markdown processor generates lots of spurious <p></p> */

.help p:empty {
        margin: 0;
    }

.help .sidebar {
        width: 300px;
        z-index: 1;
        /* 100vh - navbar - paddingTop - paddingBottom - bottomNav */
        height: calc(100vh - 59px);
        top: 59px;

        border-right: 1px solid hsl(0deg 0% 88%);
        position: sticky;

        background-color: hsl(0deg 0% 96%);
        color: hsl(223deg 6% 35%);

        -webkit-overflow-scrolling: touch;

        --help-sidebar-padding: 20px;
    }

.help .sidebar .content {
            padding: 10px var(--help-sidebar-padding);
        }

.help .sidebar h1 {
            font-weight: 400;
            font-size: 1.25em;
            line-height: 1.5;
            margin-bottom: 0;
        }

.help .sidebar h1.home-link {
                font-size: 1em;
                margin-top: 20px;
                margin-bottom: 17px;
            }

.help .sidebar h1.home-link a::before {
                    display: inline-block;
                    font: normal normal normal 14px/1 FontAwesome;
                    font-size: inherit;

                    content: "\f0d9";
                    margin-right: 10px;
                }

.help .sidebar h1 a,.help .sidebar h2 a,.help .sidebar h3 a {
                color: inherit;
                -webkit-text-decoration: none;
                text-decoration: none;
                display: block;

                /* Extend to entire width of sidebar, not just link area */
                margin-left: calc(0px - var(--help-sidebar-padding));
                margin-right: calc(0px - var(--help-sidebar-padding));
                padding: 6px var(--help-sidebar-padding);
            }

.help .sidebar h2 {
            font-weight: 700;
            font-size: 1.15em;
            line-height: 1.05;
            margin-top: 20px;
            margin-bottom: 5px;
        }

.help .sidebar h2:first-child {
                margin-top: 0;
            }

.help .sidebar.slide h2 {
            cursor: pointer;
        }

.help .sidebar.slide h2::before {
                display: block;
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;

                content: "\f107";
                margin-right: 5px;
                float: right;

                opacity: 0.5;
            }

.help .sidebar ul {
            padding: 0;
            margin: 0 0 3px;
        }

.help .sidebar.slide ul {
            margin-left: 19px;
            display: none;
        }

.help .sidebar li {
            list-style-type: none;
            font-size: 0.95em;
            font-weight: 400;
            line-height: 1.3;

            cursor: pointer;
        }

.help .sidebar li a {
                color: inherit;
                -webkit-text-decoration: none;
                text-decoration: none;
                display: block;

                /* Extend to entire width of sidebar, not just link area */
                margin-left: calc(0px - var(--help-sidebar-padding));
                margin-right: calc(0px - var(--help-sidebar-padding));
                padding: 3px var(--help-sidebar-padding);
            }

.help .sidebar a:hover {
                color: hsl(223deg 6% 15%);
            }

.help .sidebar a.highlighted {
                background-color: hsl(0deg 0% 100%);
                color: hsl(223deg 6% 25%);

                /* Don't show the focus outline for the highlighted page. */
                outline: 0;
            }

.help .markdown {
    background-color: hsl(0deg 0% 100%);
    width: calc(100vw - 300px);
    height: calc(100% - 59px);
}

.help .markdown .content {
        padding-top: 10px;
    }

/* Element-level styles for paragraphs, headings, lists, code
       blocks, and horizontal rules live in portico/markdown.css
       under `.help .markdown, .integration-instructions` so that
       both the help bundle and the integrations bundle share a
       single source of truth. */

/* Match the link styling from marketing/case-study pages. */

.help .markdown a {
        color: var(--color-link);
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-decoration-color: var(--color-link-underline);
        text-underline-offset: 0.1176em;
        font-weight: inherit;
    }

.help .markdown a:hover {
            color: var(--color-link-hover);
            text-decoration-color: var(--color-link-underline-hover);
        }

.help .markdown .copy-to-clipboard-button:focus {
        outline-color: var(--color-link);
    }

.help .markdown .api-field-type {
        color: hsl(210deg 50% 45%);
    }

.help .markdown :target {
        scroll-margin-top: 59px;
    }

/* Highlight the headings as well as the first child
      of any targeted div, as in the API documentation. */

.help .markdown h1:target {
        /* Increase the highlighted space around the text... */
        padding: 6px 8px;
        border-radius: 7px 7px 0 0;
        /* ...but maintain apparent top and bottom margin;
        pull left and right into the gutter. */
        margin: 20px -8px 10px;
        /* Derive highlight color from brand link hue, here with 30% alpha */
        background-color: hsl(210deg 70% 50% / 25%);
    }

.help .markdown h2:target {
        /* Increase the highlighted space around the text... */
        padding: 6px 8px;
        border-radius: 7px 7px 0 0;
        /* ...but maintain apparent top and bottom margin;
        pull left and right into the gutter. */
        margin: 20px -8px 10px;
        /* Derive highlight color from brand link hue, here with 30% alpha */
        background-color: hsl(210deg 70% 50% / 25%);
    }

.help .markdown h3:target {
        /* Increase the highlighted space around the text... */
        padding: 6px 8px;
        border-radius: 7px 7px 0 0;
        /* ...but maintain apparent top and bottom margin;
        pull left and right into the gutter. */
        margin: 20px -8px 10px;
        /* Derive highlight color from brand link hue, here with 30% alpha */
        background-color: hsl(210deg 70% 50% / 25%);
    }

.help .markdown h4:target {
        /* Increase the highlighted space around the text... */
        padding: 6px 8px;
        border-radius: 7px 7px 0 0;
        /* ...but maintain apparent top and bottom margin;
        pull left and right into the gutter. */
        margin: 20px -8px 10px;
        /* Derive highlight color from brand link hue, here with 30% alpha */
        background-color: hsl(210deg 70% 50% / 25%);
    }

.help .markdown h5:target {
        /* Increase the highlighted space around the text... */
        padding: 6px 8px;
        border-radius: 7px 7px 0 0;
        /* ...but maintain apparent top and bottom margin;
        pull left and right into the gutter. */
        margin: 20px -8px 10px;
        /* Derive highlight color from brand link hue, here with 30% alpha */
        background-color: hsl(210deg 70% 50% / 25%);
    }

.help .markdown h6:target {
        /* Increase the highlighted space around the text... */
        padding: 6px 8px;
        border-radius: 7px 7px 0 0;
        /* ...but maintain apparent top and bottom margin;
        pull left and right into the gutter. */
        margin: 20px -8px 10px;
        /* Derive highlight color from brand link hue, here with 30% alpha */
        background-color: hsl(210deg 70% 50% / 25%);
    }

.help .markdown div:target > :first-child {
        /* Increase the highlighted space around the text... */
        padding: 6px 8px;
        border-radius: 7px 7px 0 0;
        /* ...but maintain apparent top and bottom margin;
        pull left and right into the gutter. */
        margin: 20px -8px 10px;
        /* Derive highlight color from brand link hue, here with 30% alpha */
        background-color: hsl(210deg 70% 50% / 25%);
    }

.help-center ol,
.portico-landing.integrations ol {
    margin-left: 0;
}

.title {
    font-family: Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 60px;
}

.digest-page-title {
    text-align: center;
    font-weight: 400;
}

.lead {
    font-weight: bold;
}

.pitch {
    width: 600px;
    max-width: 100%;
}

.help-inline {
    font-weight: 400;
    font-size: 0.9rem;
}

.help-inline.text-error {
        color: hsl(1.1deg 44.7% 50.4%);
    }

a.title {
    color: hsl(0deg 0% 0%);
}

a.title:hover {
        color: hsl(0deg 0% 50%);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.fakecontrol {
    padding-top: 5px;
    font-weight: bold;
}

img.screenshot {
    /* This makes it so screenshots are still shown
    even if they are larger than their span. */
    max-width: 100%;
}

#pw_strength {
    /* Same width as a Bootstrap default text <input> with padding */
    width: 220px;
    height: 8px;
}

#registration #pw_strength {
    width: 325px;
    margin: 7px auto 0;
}

.def::before {
    content: " - ";
}

.platform-icon {
    width: 33%;
}

.portico-container:not(.help) h1 {
    font-weight: 300;
}

label.text-error {
    display: inline;

    padding-left: 5px;
}

input.text-error {
    border-color: hsl(0deg 100% 50%);
    outline-color: hsl(0deg 100% 50%);
}

.portico-container {
    position: relative;
    /* To adjust for flexible footer height we do 2 things:
      - Make the `portico-container` expand to full page height.
      - Fill the empty space with `portico-wrap`. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.portico-container .portico-wrap {
        flex: 1 0 auto;
    }

.portico-container .if-zulip-electron {
        display: none;
    }

/* detect if the platform is `ZulipDesktop` and if so, hide this tag! */
.portico-container[data-platform="ZulipElectron"] .if-zulip-electron {
    display: block;
}

.header-main .logo {
        display: block;
        -webkit-text-decoration: none;
        text-decoration: none;
        position: relative;
        line-height: 0.8;
    }

.header-main .logo svg {
            vertical-align: -5px;
        }

.header-main .logo a,.header-main .logo a:focus,.header-main .logo a:hover {
            -webkit-text-decoration: none;
            text-decoration: none;
            color: hsl(0deg 0% 20%);
        }

.header-main .logo .light {
            font-size: 1.2rem;
            font-weight: 400;
            color: hsl(0deg 0% 20%);
            opacity: 0.7;
        }

.header-main .portico-logo {
        height: 28px;
        width: auto;
        padding: 6px 0;
    }

.portico-header .portico-header-dropdown {
        position: relative;
        display: inline-block;
    }

.portico-header .portico-header-dropdown ul {
            display: none;
            position: absolute;
            right: 0;
            margin: 10px 0 0;
            list-style-type: none;
            width: fit-content;
            background-color: hsl(0deg 0% 100%);
            padding: 5px 0;
            border-radius: 4px;
            border: 1px solid hsl(0deg 0% 87%);
            box-shadow: 0 2px 5px hsl(0deg 0% 0% / 10%);
        }

.portico-header .portico-header-dropdown ul::before {
                content: "\25B2";
                position: absolute;
                top: -4px;
                right: 9px;
                font-size: 0.5em;
                color: hsl(0deg 0% 87%);
                line-height: 0;
                transform: scale(1.8, 1);
            }

.portico-header .portico-header-dropdown ul li {
                display: list-item;
                margin: 0;
                padding: 3px 10px;
                text-align: left;
                opacity: 1;
                cursor: pointer;
            }

.portico-header .portico-header-dropdown ul li:hover {
                    background-color: hsl(190deg 10% 90%);
                    transition: none;
                }

.portico-header .portico-header-dropdown ul li a {
                    display: block;
                    margin: 2px 0;
                    padding: 0;
                    transition: none;
                    font-size: 0.9em;
                    font-weight: 400;
                    color: hsl(0deg 0% 27%);
                }

.portico-header .portico-header-dropdown ul li:hover a {
                    background-color: transparent;
                }

.portico-header .portico-header-dropdown ul li a i {
                    margin-right: 5px;
                }

.portico-header .portico-header-dropdown ul.dropdown-list {
                margin-top: 3px;
                margin-right: 3px;
            }

.portico-header .portico-header-dropdown.show ul {
            display: block;
        }

.portico-header .portico-header-dropdown-pill {
        border: 1px solid hsl(0deg 0% 0% / 20%);
        border-radius: 4px;
        margin-left: 10px;
        font-weight: 400;
        cursor: pointer;
    }

.portico-header .portico-header-dropdown-pill .realm-name {
            display: inline-block;
            vertical-align: top;
            margin: 0 5px 0 -4px;
            padding: 1px 0 1px 5px;
            font-size: 0.9em;
            font-weight: 600;
            line-height: 1.6;
        }

.portico-header .portico-header-dropdown-pill .realm-name i.fa {
            position: relative;
            top: -2px;
            font-size: 0.6em;
            margin-left: 5px;
            opacity: 0.5;
            transition: opacity 0.2s ease;
        }

.portico-header .portico-header-dropdown-pill:hover .realm-name i.fa {
            opacity: 1;
        }

.portico-header .portico-header-dropdown-pill .header-realm-icon {
            width: 26px;
            height: 26px;
            vertical-align: top;
            border-radius: 4px;
        }

.portico-page-container .portico-header .dropdown-pill .realm-name {
    margin-left: -3px;
}

.app {
    width: 100%;
    z-index: 99;
}

.devlogin_subheader {
    margin-top: 10px;
    margin-bottom: 20px;
    padding-top: 0;
    text-align: center;
    font-size: 16px;
}

.table.table-striped {
    background-color: hsl(0deg 0% 100%);
    box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);

    border-collapse: collapse;
    margin-bottom: 20px;
}

.table.table-striped thead tr:first-child th {
        border-top: 0;
    }

.table.table-striped th,.table.table-striped td {
        padding: 8px;
        line-height: 20px;
        text-align: left;
        vertical-align: top;
        border-top: 1px solid hsl(0deg 0% 87%);
    }

.table.table-striped tbody > tr:nth-child(odd) > td {
        background-color: hsl(0deg 0% 98%);
    }

.team-profiles {
    /* Compensate for gutter width */
    margin: -10px;
    margin-bottom: 3px;
}

.team .profile .profile-name {
            font-weight: 600;
        }

.team .profile .profile-role {
            opacity: 0.5;
            text-transform: uppercase;
            font-size: 0.8em;
            font-weight: 400;
        }

.team .bdfl {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

.team .bdfl .profile-picture {
            flex: 0 auto;
            width: 200px;
            margin: 10px;
        }

.team .bdfl .profile-picture  > img {
                height: auto;
                border-radius: 5px;
            }

.team .bdfl .profile-information {
            flex: 1;
            /* Wrap when screen is small to prevent very short line */
            min-width: 300px;
            font-size: 1.4em;
            margin: 10px 10px 0;
        }

.team .bdfl .profile-description {
            margin-top: 5px;
            font-weight: 400;
            font-size: 0.8em;
            opacity: 0.8;
        }

.team .bdfl .profile-description p {
                /* Avoid double-applying the 1.2em font-size here */
                font-size: 1em;
            }

.team input {
        display: none;
    }

.team input:checked + label {
            border: 1px solid hsl(0deg 0% 93%);
            border-top: 2px solid hsl(80deg 61% 50%);
            border-bottom-color: hsl(0deg 0% 100%);
        }

.team label {
        font-size: initial;
        display: inline-block;
        padding: 10px;
        border: 1px solid transparent;
        margin: 0 0 -1px;
    }

.team label:hover {
            cursor: pointer;
        }

.contributors-list {
    margin-left: -40px;
    width: calc(100% + 80px);
}

.contributors {
    display: none;
}

.contributors .person {
        box-sizing: border-box;
        padding: 10px;
        border: 1px solid hsl(0deg 0% 93%);
        border-radius: 4px;
        transition: border-color 0.3s ease;
    }

.contributors .person a {
            color: inherit;
        }

.contributors .person:hover {
            border-color: hsl(0deg 0% 73%);
        }

.contributors .person .avatar {
            width: 60px;
            text-align: center;
            display: inline-block;
            vertical-align: top;
        }

.contributors .person .info {
            width: 50%;
            text-align: left;
            display: inline-block;
            vertical-align: top;
            margin-left: 10px;
        }

/* Activated .contributors */
input#total:checked ~ #tab-total,
input#server:checked ~ #tab-server,
input#desktop:checked ~ #tab-desktop,
input#mobile:checked ~ #tab-mobile,
input#api-clients:checked ~ #tab-api-clients,
input#devtools:checked ~ #tab-devtools,
input#terminal:checked ~ #tab-terminal {
    display: block;
}
input#total:checked ~ #tab-total .contributors-grid {
        padding-top: 5px;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
input#server:checked ~ #tab-server .contributors-grid {
        padding-top: 5px;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
input#desktop:checked ~ #tab-desktop .contributors-grid {
        padding-top: 5px;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
input#mobile:checked ~ #tab-mobile .contributors-grid {
        padding-top: 5px;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
input#api-clients:checked ~ #tab-api-clients .contributors-grid {
        padding-top: 5px;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
input#devtools:checked ~ #tab-devtools .contributors-grid {
        padding-top: 5px;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
input#terminal:checked ~ #tab-terminal .contributors-grid {
        padding-top: 5px;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

.avatar_img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
    border-radius: 20%;
}

.tab-loading,
.last-updated {
    color: hsl(0deg 0% 67%);
    font-size: 0.9em !important;
    padding-top: 30px;
    text-align: center;
}

.history .sponsors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.history .sponsors .sponsor-picture img {
        height: 170px;
        margin: 0 20px;
        pointer-events: none;
    }

.login-page-header {
    width: 100%;
}

.login-page {
    text-align: center;
}

.login-page .alert {
        width: 320px;
        margin: auto;
        margin-top: -30px;
        margin-bottom: 15px;
        text-align: center;
    }

.register-form {
    display: inline-block;
    text-align: center;
}

.register-button {
    margin-left: 10px;
}

.login-form {
    margin: auto;
    /* plus input padding. */
    width: calc(300px - -28px);
    margin-bottom: 10px;
}

.login-form .controls,.register-form .controls {
        margin-right: 10px;
    }

.login-social {
    max-width: 100%;
    min-width: 300px;
    margin: auto;
    text-align: center;
    margin-top: 10px;
}

.app-main,
.header-main {
    min-width: 350px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.hello-main {
    max-width: none;
    min-width: 0;
    padding: 0 !important;
}

.top-links {
    text-align: right;
}

.top-links a {
        display: inline-block;
        color: hsl(0deg 0% 100%);
        padding: 2px 7px 1px 8px;
        font-weight: 600;
        font-size: 16px;
        transition: 0.2s ease-in;
        transition-property: background-color, color;
        border-radius: 4px;
    }

.top-links a:hover {
            -webkit-text-decoration: none;
            text-decoration: none;
            background-color: hsl(0deg 0% 100%);
            color: hsl(170deg 50% 40%);
        }

.centered-button {
    text-align: center;
}

.input-group .progress {
        margin: 0;
        margin-top: 5px;
        display: inline-block;
    }

/* --- new settings styling --- */

.input-group input[type="radio"],.input-group input[type="checkbox"] {
        margin: 0 10px 0 0;
    }

.input-group input[type="radio"] {
        position: relative;
        top: 8px;
    }

.input-group label {
        margin: 0;
        padding: 5px 0;
    }

.input-group label.inline-block {
            /* eyeballing off-centered aesth. */
            margin-top: 1px;
        }

.input-group.radio {
        margin-left: 25px;
    }

.input-group.grid {
        padding: 10px 0;
        border-bottom: 1px solid hsl(0deg 0% 87%);
    }

.input-group.grid label.inline-block {
            width: 200px;
        }

.center-container {
    min-height: calc(100vh - 94px);
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#registration-email {
    margin-bottom: 18px;
}

#registration-email label {
        float: left;
        width: 100%;
        display: block;
        margin-left: 2px;
        margin-bottom: 0;
        text-align: left;
        font-weight: 600;
        font-size: 1rem;
    }

#registration-email .controls {
        padding-top: 25px;
        margin: 2px;
    }

.center-block {
    text-align: left;
    display: inline-block;
}

.center-block .pitch {
        width: 100%;
        margin-bottom: 20px;
    }

.center-block .controls {
        margin: 0;
        text-align: left;
    }

.center-block #send_confirm input[type="text"] {
        margin-top: 20px;
    }

.center-block .button {
        margin-top: 20px;
        padding: 5px 10px;
        border-radius: 2px;
        font-size: 16px;
        font-weight: 300;
    }

#config_error_page .pitch {
        text-align: center;
        width: 100%;
    }

#config_error_page .white-box {
        max-width: 600px;
    }

.error_page {
    min-height: calc(100vh - var(--height-footer));
    padding: 20px 10px 50px;
    height: 100%;
    background-color: hsl(163deg 42% 85%);
    font-family: "Source Sans 3 VF", sans-serif;
}

.error_page img {
    display: block;
    clear: right;
    margin: 0 auto;
    max-width: 500px;
    width: 100%;
}

.error_page .errorbox {
    margin: auto;
    border: 2px solid hsl(163deg 43% 46%);
    max-width: 500px;
    background-color: hsl(0deg 0% 100%);
    box-shadow: 0 0 4px hsl(163deg 43% 46%);
    font-size: 18px;
}

.error_page .errorbox.config-error {
        max-width: 750px;
    }

.error_page p {
    color: hsl(0deg 0% 20%);
}

.error_page .errorcontent {
    text-align: left;
    padding: 40px 40px 30px;
}

.error_page .lead {
    color: hsl(163deg 49% 44%);
    font-size: 35px;
    margin-bottom: 20px;
    line-height: normal;
}

.hourglass-img {
    width: initial !important;
    margin-bottom: 25px !important;
}

#skip-navigation {
    background-color: hsl(170deg 47% 33%);
    color: hsl(0deg 0% 100%);
    border-radius: 4px;
    display: inline-block;
    font-weight: 600;
    left: 330px;
    outline: none;
    padding: 5px 12px;
    position: absolute;
    top: -1000px;
    z-index: 100;
}

#skip-navigation:focus-visible {
    text-underline-offset: 2px;
    top: 25px;
}

@media (width <= 800px) {
        .app.help .markdown {
            width: 100vw;
            margin-left: 0;
        }

            .app.help .markdown .content {
                max-width: none;
                margin-left: 50px;
            }

        .app.help .hamburger {
            display: block;
            position: fixed;
            top: 70px;
            right: calc(100% - 40px);
            fill: hsl(223deg 6% 35%);
            z-index: 2;
            transition: 0.3s ease;
            transition-property:
                right, top; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
            cursor: pointer;
        }

        .app.help .sidebar {
            position: fixed;
            top: 59px;
            right: calc(100% - 50px);
            width: 100%;
            min-width: unset;
            height: calc(100vh - 59px);
            pointer-events: none;
            overflow: hidden;
            transform: translateX(0);
            transition: transform 0.3s ease;
        }

        .app.help .sidebar.show {
            pointer-events: initial;
            transform: translateX(calc(100% - 50px));
            overflow: auto;
        }

            .app.help .sidebar.show .content {
                visibility: visible;
            }

            .app.help .sidebar.show  + .hamburger {
                right: 12px;
            }

            .app.help .sidebar.show  ~ .markdown {
                filter: brightness(0.7);
            }

    .app-main,
    .header-main {
        min-width: auto;
    }

    .app-main {
        padding: 0;
    }
        .help .sidebar .content:not(.show) {
            visibility: hidden;
        }

        .help .sidebar:not(.show) a.highlighted {
            background-color: transparent;
        }

    #skip-navigation {
        left: 80px;
    }

    #skip-navigation:focus-visible {
        top: 30px;
    }
}

@media (width <= 767px) {
    body {
        padding: 0 !important;
    }

    .input-large {
        display: block !important;
        width: 100% !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 4px 6px !important;
        line-height: 20px !important;
        box-sizing: border-box !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .line-break-desktop {
        display: none;
    }

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

@media (width <= 558px) {
            .team .bdfl .profile-name,.team .bdfl .profile-role {
                text-align: center;
            }

    .top-links .find-accounts-link {
        display: none;
    }
}

@media (width <= 500px) {
        .app.help .sidebar {
            top: 39px;
            height: calc(100vh - 39px);
        }

        .app.help .hamburger {
            top: 50px;
        }

    .help .markdown {
        height: calc(100vh - 39px);
    }

    .error_page .lead {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .brand.logo .light {
        display: none;
    }

    .center-container {
        display: block;
    }

    .header {
        padding: 4px 0 6px;
    }

    .header-main {
        max-width: 100vw;
        padding: 0 10px;
    }

    #skip-navigation {
        left: 60px;
    }

    #skip-navigation:focus-visible {
        top: 10px;
    }
}

.emoji {
    height: 25px;
    width: 25px;
    vertical-align: text-bottom;
}

label.label-title {
    font-weight: 600;
}

.inline-block {
    display: inline-block;
    vertical-align: top;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.documentation-footer {
    font-size: 0.85rem;
    opacity: 0.8;
}

#devtools-wrapper {
    display: flex;
    justify-content: center;
}

#devtools-registration {
    float: left;
}

#devtools-registration form {
        display: inline;
    }

#devtools-page {
    max-width: 800px;
    margin: 0 auto;
}

#devtools-page .table-bordered {
        border: 1px solid hsl(0deg 0% 87%);
        border-collapse: separate;
        border-spacing: 0;
        border-left: 0;
        border-radius: 4px;
    }

#devtools-page .table-bordered th,#devtools-page .table-bordered td {
            border-left: 1px solid hsl(0deg 0% 87%);
        }

#devtools-page .table-bordered thead tr:first-child > th:first-child {
            border-top-left-radius: 4px;
        }

#devtools-page .table-bordered thead tr:first-child > th:last-child {
            border-top-right-radius: 4px;
        }

#devtools-page .table-bordered tbody tr:last-child > td:first-child {
            border-bottom-left-radius: 4px;
        }

#devtools-page .table-bordered tbody tr:last-child > td:last-child {
            border-bottom-right-radius: 4px;
        }

.portico-page.error {
    padding-bottom: 0;
}

.portico-page.error .portico-page-container {
    padding: 0;
}

#third-party-apps {
    margin-top: 20px;
    padding-right: 10px;
}

.api-argument .api-argument-name {
        font-family: "Source Code Pro", monospace;
    }

.api-argument .api-argument-name .api-argument-hover-link i.fa {
            opacity: 0;
            font-size: 0.9em;
        }

.api-argument .api-argument-name:hover .api-argument-hover-link i.fa {
            opacity: 1;
            color: hsl(0deg 0% 0%);
            cursor: pointer;
        }

.api-argument .api-field-type {
        text-transform: lowercase;
        font-weight: 600;
        font-size: 14px;
    }

.api-argument .api-argument-example-label {
        font-style: italic;
    }

.api-argument .api-argument-required {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
        color: hsl(14deg 75% 60%);
    }

.api-argument .api-argument-optional {
        text-transform: uppercase;
        font-weight: 400;
        font-size: 12px;
        color: hsl(0deg 0% 47%);
    }

.api-argument .api-argument-deprecated {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
        color: hsl(0deg 50% 60%);
    }

.api-field-type {
    color: hsl(176deg 46.4% 41%);
}

.api-event-header .api-event-name {
        color: hsl(14deg 75% 60%);
        font-size: 1.1rem;
    }

.api-event-header .api-event-name .api-event-op {
            color: hsl(14deg 60% 60%);
            font-size: 1rem;
        }

.api-events-table {
    column-count: 3;
    column-gap: 10px;
    margin: 15px 0 0 10px;
}

.api-events-table .api-event-type,.api-events-table .api-event-link {
        line-height: 100%;
        font-weight: 600;
        margin-bottom: 7px;
    }

.api-events-table .api-event-ops {
        margin-left: 12px;
    }

@media (width <= 1000px) {
    .api-events-table {
        column-count: 2;
    }
}

@media (width <= 500px) {
    .api-events-table {
        column-count: 1;
    }
}

.desktop-redirect-box {
    text-align: center;
}

.desktop-redirect-box .copy-token-info {
        font-weight: normal;
    }

.desktop-redirect-box #desktop-data {
        padding: 13px 12px 12px;
        font-family: "Source Code Pro", monospace;
    }

.desktop-redirect-image {
    margin-bottom: 20px;
}

.text-image-in-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-image-in-row .text-image-in-row-image {
        width: 300px;
        height: auto;
    }

.text-image-in-row .text-image-in-row-text {
        align-content: center;
        max-width: 300px;
    }

.text-image-in-row .windborne-alaska-image {
        width: 255px;
    }

@media (width <= 700px) {

.text-image-in-row {
        flex-wrap: wrap;
}

        .text-image-in-row .text-image-in-row-image {
            width: 100%;
            height: auto;
        }

        .text-image-in-row .text-image-in-row-text {
            max-width: 100%;
        }
    }

.markdown-image-caption {
    opacity: 0.8;
    margin-top: 5px;
    text-align: center;
    font-style: italic;
}

.markdown-image-with-caption {
    margin: 0;
}


/*# sourceMappingURL=styles_components_css-styles_portico_legacy_portico_css.css.map*/