/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/portico_variables.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
    --color-background-gradient-start: hsl(209deg 40% 50%);
    --color-background-gradient-end: hsl(210deg 48% 69%);
    /* This is the same color as set on `--color-table-background` in
       comparison_table.css. */
    --color-background-marketing-page: hsl(0deg 0% 100% / 80%);
    /* This is a legacy color previously set on .why-page divs. */
    --color-text-marketing-page: hsl(223deg 6% 25%);
    --color-background-solid-hero: var(--color-background-gradient-start);
    --color-text-hero: hsl(0deg 0% 100%);
    --font-ss3: "Source Sans 3 VF", sans-serif;
    --font-ops: "Open Sans Variable", sans-serif;
    --color-background-box: hsl(210deg 44% 92%);
    --color-background-box-muted: hsl(0deg 0% 100% / 50%);
    --color-background-box-muted-hover: hsl(0deg 0% 100% / 60%);
    --color-plan-tab-header: hsl(223deg 40% 30%);
    --color-plan-tab-copy: hsl(223deg 40% 25% / 70%);
    --color-box-header: hsl(223deg 43% 25%);
    --color-box-copy: hsl(223deg 43% 25%);
    --color-box-copy-fine-print: hsl(223deg 43% 55%);
    --color-link: hsl(210deg 94% 42%);
    --color-link-hover: hsl(210deg 100% 50%);
    --color-link-portico-auth: hsl(200deg 100% 40%);
    --color-link-portico-auth-hover: hsl(200deg 100% 25%);
    --color-link-underline: hsl(210deg 94% 42% / 30%);
    --color-link-underline-hover: hsl(210deg 100% 50%);
    --color-link-underline-alternate: hsl(210deg 94% 100% / 40%);
    --color-link-underline-alternate-hover: hsl(210deg 94% 100% / 80%);
    --color-prominent-border: var(--color-link);
    --color-action-button: hsl(240deg 66% 60%);
    --color-action-button-hover: hsl(240deg 66% 55%);
    --color-action-button-active: hsl(240deg 66% 50%);
    --color-action-button-subtle-hover: hsl(240deg 66% 97%);
    --color-action-button-subtle-active: hsl(240deg 66% 94%);
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-background-gradient-start: hsl(209deg 63% 40%);
        --color-background-gradient-end: hsl(238deg 28% 50%);
}
    }

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/markdown.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
.markdown {
    /* Copied from app_variables.css to be used in portico pages. */
    --color-copy-button: color-mix(
        in oklch,
        hsl(229deg 9% 36%) 70%,
        transparent
    );
    --color-copy-button-hover: hsl(229deg 9% 36%);
    --color-copy-button-active: color-mix(
        in oklch,
        hsl(229deg 9% 36%) 70%,
        transparent
    );
    --color-copy-button-success: hsl(146deg 90% 27%);
    /* User circles */
    /* stylelint-disable color-no-hex */
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) #4cdc75;
    --color-user-circle-active: var(--csstools-light-dark-toggle--0, #43a35e);
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) #ae640a;
    --color-user-circle-idle: var(--csstools-light-dark-toggle--1, #f5b266);
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) #454854;
    --color-user-circle-offline: var(--csstools-light-dark-toggle--2, #c1c6d7);
    --color-user-circle-deactivated: hsl(0deg 0% 50%);
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--3, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ))
            25%,
        transparent 100%
    );
    /* stylelint-enable color-no-hex */

    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
}

@supports (color: light-dark(red, red)) {
.markdown {
    --color-user-circle-active: light-dark(#43a35e, #4cdc75);
    --color-user-circle-idle: light-dark(#f5b266, #ae640a);
    --color-user-circle-offline: light-dark(#c1c6d7, #454854);
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: light-dark(red, red)) {
.markdown {
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ),
                var(--color-user-circle-idle)
            )
            25%,
        transparent 100%
    );
}
}

@supports not (color: light-dark(tan, tan)) {

.markdown * {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) #4cdc75;
    --color-user-circle-active: var(--csstools-light-dark-toggle--0, #43a35e);
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) #ae640a;
    --color-user-circle-idle: var(--csstools-light-dark-toggle--1, #f5b266);
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) #454854;
    --color-user-circle-offline: var(--csstools-light-dark-toggle--2, #c1c6d7);
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--3, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ))
            25%,
        transparent 100%
    );
    }
}

.markdown h1[id]::before {
            display: block;
            content: " ";
            visibility: hidden;
        }

.markdown h2[id]::before {
            display: block;
            content: " ";
            visibility: hidden;
        }

.markdown h3[id]::before {
            display: block;
            content: " ";
            visibility: hidden;
        }

.markdown h4[id]::before {
            display: block;
            content: " ";
            visibility: hidden;
        }

.markdown h2[id]::before {
            margin-top: -10px;
            height: 10px;
        }

.markdown h3[id]::before {
            margin-top: -10px;
            height: 10px;
        }

.markdown h4[id]::before {
            margin-top: -10px;
            height: 10px;
        }

.markdown h1 {
        border-bottom: 1px solid hsl(0deg 0% 93%);
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

.markdown h1[id]::before {
                margin-top: -30px;
                height: 30px;
            }

.markdown h1#zulip-administration {
            font-size: 1.75em;
            padding: 10px 0;
            margin-bottom: 0;
            line-height: 100%;
        }

.markdown h2 {
        font-size: 1.5em;
        line-height: 1.25;
        margin: 20px 0 5px;
    }

.markdown h3 {
        font-size: 1.25em;
        line-height: 1.25;
        opacity: 1;
        margin: 20px 0 5px;
    }

.markdown h1,.markdown h2,.markdown h3 {
        font-weight: 700;
        -webkit-user-select: none;
                user-select: none;
    }

.markdown h1:hover,.markdown h2:hover,.markdown h3:hover {
            cursor: pointer;
        }

.markdown h1:hover::after {
                display: inline-block;
                font: normal normal normal 16px/1 FontAwesome;

                cursor: pointer;
                content: "\f0c1";
                margin-left: 5px;
                vertical-align: middle;
            }

.markdown h2:hover::after {
                display: inline-block;
                font: normal normal normal 16px/1 FontAwesome;

                cursor: pointer;
                content: "\f0c1";
                margin-left: 5px;
                vertical-align: middle;
            }

.markdown h3:hover::after {
                display: inline-block;
                font: normal normal normal 16px/1 FontAwesome;

                cursor: pointer;
                content: "\f0c1";
                margin-left: 5px;
                vertical-align: middle;
            }

.markdown h5,.markdown h6 {
        margin: 10px 0;
        line-height: 20px;
    }

/* Since markdown doesn't make it easy to put an HTML element around a
       markdown table, we instead have a model of putting an empty div
       before it to configure a specific table's styling. */

.markdown div.centered_table + table td:not(:first-child),.markdown div.centered_table + table th {
        text-align: center;
    }

.markdown .legend_symbol {
        position: absolute;
        left: calc(340px);
        transform: translateX(-50%);

        /* Adjust for 50px closed left sidebar state */
    }

@media (width <= 800px) {

.markdown .legend_symbol {
            left: calc(5% + 50px);
    }
        }

.markdown .legend_label {
        position: relative;
        left: calc(30px);
    }

.markdown li {
        line-height: 150%;
    }

.markdown ol {
        counter-reset: item;
        list-style: none;
    }

.markdown ol > li {
            position: relative;
            vertical-align: top;
            /* This needs to be wide enough for 2-digit numbers. */
            padding-left: 33px;
            top: -2px;
            counter-increment: item;
        }

.markdown ol > li::before {
                position: absolute;
                top: 0;
                left: 0;
                content: counter(item);
                display: inline-block;
                vertical-align: top;
                padding: 3px 6.5px 3px 7.5px;
                margin-right: 5px;
                background-color: var(--color-link);
                color: hsl(0deg 0% 100%);
                border-radius: 100%;
                font-size: 0.9em;
                line-height: 1.1;
                text-align: center;
            }

.markdown ol > li .codehilite {
                background-color: hsl(0deg 0% 100%);
            }

.markdown ol > li .codehilite pre {
                    white-space: pre;
                    overflow-x: auto;
                }

.markdown ol > li > ul {
                margin-bottom: 5px;
            }

@media (width <= 500px) {

.markdown ol {
            margin-left: 0;
    }
        }

.markdown ul {
        margin: 0 10px 15px 25px;

        /* Avoid extra whitespace after nested bulleted lists. */
    }

.markdown ul ul {
            margin: 0 20px;
        }

.markdown ul > li {
            margin: 5px 0 10px;
        }

.markdown ul > li > p {
                margin: 0 0 5px;
            }

.markdown ul > li > p:first-child {
                margin: 0;
            }

.markdown .content {
        padding: 30px;
        max-width: 700px;
        background-color: hsl(0deg 0% 100%);
    }

.markdown .content ol li p:not(:first-child) {
            display: block;
        }

.markdown .content > ol {
            margin: 15px 10px;
        }

.markdown .content > ol > li {
                margin: 2.5px 0;
            }

.markdown .content i.icon-collapsed-state {
            transform: rotate(270deg);
        }

@media (width <= 500px) {

.markdown .content {
            padding: 10px;
    }
        }

.markdown i.zulip-icon {
        margin: 0 2px 2px;
        vertical-align: middle;
    }

.markdown i.zulip-icon.mobile-help {
        color: hsl(244deg 69% 62%);
    }

.markdown a {
        color: hsl(176deg 46% 41%);
        font-weight: 600;
    }

.markdown a code {
            color: hsl(176deg 46% 41%);
        }

.markdown strong {
        font-weight: 600;
    }

.markdown img {
        vertical-align: top;
        box-shadow: 0 0 4px hsl(0deg 0% 0% / 5%);
        border: 1px solid hsl(0deg 0% 87%);
        border-radius: 4px;
    }

.markdown img.inline {
            height: 1.4em;
            box-shadow: none;
        }

.markdown .warn,.markdown .tip,.markdown .keyboard_tip {
        position: relative;
        display: block;
        background-color: hsl(210deg 22% 96%);
        border: 1px solid hsl(210deg 22% 90%);
        border-radius: 4px;
        padding: 10px;
        margin: 5px 0;
    }

.markdown .warn p,.markdown .tip p,.markdown .keyboard_tip p {
            margin-bottom: 0;
        }

.markdown .warn p:first-of-type {
            display: inline;
        }

.markdown .tip p:first-of-type {
            display: inline;
        }

.markdown .keyboard_tip p:first-of-type {
            display: inline;
        }

.markdown .tip,.markdown .keyboard_tip {
        background-color: hsl(46deg 63% 95%);
        border: 1px solid hsl(46deg 63% 84%);
    }

.markdown .tip::before {
        display: inline;
        content: "\f0eb   Tip:  ";
        font-family: FontAwesome, "Source Sans 3 VF", sans-serif;
        font-weight: 600;
    }

.markdown .keyboard_tip::before {
        display: inline;
        content: "\f11c   Keyboard shortcut:  ";
        font-family: FontAwesome, "Source Sans 3 VF", sans-serif;
        font-weight: 600;
    }

.markdown .user-circle {
        /* We make the circles slightly larger than in the
           sidebar UI, so they look good next to the copy. */
        font-size: 0.7em;
        display: inline-block;
        /* 1.5px at 11.2px/1em */
        vertical-align: 0.1339em;
    }

.markdown .user-circle-active {
        color: var(--color-user-circle-active);
    }

.markdown .user-circle-idle {
        background: var(--gradient-user-circle-idle);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.markdown .with_avatar .user-circle-idle {
        background: var(--gradient-user-circle-idle-avatar);
    }

.markdown .user-circle-offline {
        color: var(--color-user-circle-offline);
    }

.markdown .user-circle-deactivated {
        color: var(--color-user-circle-deactivated);
    }

.markdown kbd {
        /* Same as kbd in app_components.css */
        display: inline-block;
        border: 1px solid hsl(0deg 0% 80%);
        border-radius: 4px;
        font-weight: 600;
        white-space: nowrap;
        background-color: hsl(0deg 0% 98%);
        color: hsl(0deg 0% 20%);
        text-shadow: 0 1px 0 hsl(0deg 0% 100%);
        /* Different from app_components.css */
        /* Removed margin setting */
        font-size: 0.85em;
        padding: 0 0.4em;
    }

.markdown kbd.arrow-key {
            /* Same as in informational_overlays.css */
            line-height: 1;
            padding: 0 0.2em 0.2em;
            /* Different from informational_overlays.css */
            font-size: 1.2em;
        }

.markdown code {
        /* Same font-family as zulip.css */
        font-family: "Source Code Pro", monospace;
        /* Same as base rules for code elements in rendered_markdown.css */
        font-size: 0.825em;
        unicode-bidi: embed;
        direction: ltr;
        color: hsl(0deg 0% 0%);
        border-radius: 3px;
        /* Different from base rules for code elements in rendered_markdown.css */
        white-space: initial;
        padding: 0 4px;
        background-color: hsl(0deg 0% 93%);
        overflow-wrap: break-word;
    }

.markdown .codehilite {
        /* Relative positioning is used to place the copy-to-clipboard button
           in the top-right corner. */
        position: relative;
    }

.markdown pre code {
            font-size: 14px;
            white-space: pre-wrap;
            padding: 0;
            color: inherit;
            background-color: transparent;
            border: 0;
        }

.markdown .copy-codeblock {
        cursor: pointer;
        /* Invisible default button */
        background: none;
        border: none;
        padding: 0;
        position: absolute;
        /* Position the button in the top-right corner */
        top: 10px;
        right: 10px;
        line-height: 3px;
    }

.markdown .copy-codeblock:focus {
            outline-offset: -1px;
            outline-color: hsl(176deg 46% 41%);
        }

.markdown .copy-button {
        display: flex;
        border-radius: 4px;
        color: var(--color-copy-button);
        /* 2px at 16px/1em */
        padding: 0.125em;
        cursor: pointer;
    }

.markdown .copy-button:focus-visible {
            color: var(--color-copy-button-hover);
        }

.markdown .copy-button:hover {
            color: var(--color-copy-button-hover);
        }

.markdown .copy-button:active {
            color: var(--color-copy-button-active);
        }

.markdown .copy-button.copy-button-success {
            color: var(--color-copy-button-success);
        }

.markdown .tabbed-section ol {
            margin-left: 15px;
            margin-top: 10px;
        }

.markdown .tabbed-section ul.nav {
            margin: 0;
        }

.markdown .tabbed-section ul.nav li {
                display: inline-block;
                padding: 5px 14px;
                margin: 0;

                cursor: pointer;
            }

.markdown .tabbed-section ul.nav li.active {
                    color: var(--color-link);
                    margin-bottom: -1px;

                    border: 1px solid hsl(0deg 0% 87%);
                    border-bottom: 1px solid hsl(0deg 0% 100%);
                    border-radius: 4px 4px 0 0;
                }

.markdown .tabbed-section.no-tabs ul.nav {
            display: none;
        }

.markdown .tabbed-section .blocks {
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid hsl(0deg 0% 87%);
        }

.markdown .tabbed-section .blocks .tab-content {
                display: none;
            }

.markdown .tabbed-section.has-tabs .blocks {
            border-radius: 0 6px 6px;
        }

/* A "no-tabs" section is a degenerate zero-tabs wrapper that
           just holds flowing markdown content. The border and radius
           on `.blocks` exist to visually group a tab bar with the
           content below it, which is meaningless when there's no tab
           bar — it just draws a random frame around a subset of the
           content. Drop the frame in that case.

           Reset padding to 0 and use `margin-block` instead so that
           the top/bottom margins collapse with adjacent paragraphs,
           the first list item's margin, etc. — that gives a natural,
           single breathing-room gap of ~20 px instead of stacking
           the preceding paragraph's 10 px margin on top of the
           block's own space. */

.markdown .tabbed-section.no-tabs .blocks {
            padding: 0;
            margin-block: 20px;
            border: 0;
            border-radius: 0;
        }

.markdown .tabbed-section.no-tabs .blocks > .tab-content,.markdown .tabbed-section.has-tabs .blocks > .active {
            display: block;
        }

.markdown blockquote {
        padding: 0 0 0 15px;
        margin: 0 0 20px;
        border-left: 5px solid hsl(0deg 0% 93%);
    }

.markdown blockquote p {
            font-size: 17.5px;
            font-weight: 300;
            line-height: 1.25;
            margin-bottom: 0;
        }

/* Shared element-level styling for pages that render markdown as
   content documentation: /help and /api pages (under `.help .markdown`)
   and integration doc pages (under `.integration-instructions`).
   Keeping these rules in one place lets both the help bundle and the
   integrations bundle depend on a single source of truth — markdown.css
   is already loaded by both. Marketing pages (which also load this
   file but don't match either selector) are intentionally unaffected,
   because their layouts rely on different defaults for lists,
   paragraph margins, and so on. */
.help .markdown p,.integration-instructions:not(.does-not-exist) p {
        margin: 0 0 10px;
    }
.help .markdown p:empty {
        margin: 0;
    }
.integration-instructions:not(.does-not-exist) p:empty {
        margin: 0;
    }
.help .markdown h1,.integration-instructions:not(.does-not-exist) h1 {
        margin-top: 15px;
    }
.help .markdown h4,.integration-instructions:not(.does-not-exist) h4 {
        margin: 15px 0 5px;
    }
.help .markdown hr,.integration-instructions:not(.does-not-exist) hr {
        margin: 20px 0;
        border: 0;
        border-top: 1px solid hsl(0deg 0% 93%);
    }
/* Reset the browser-default left padding on lists so numbered
       items and bullets align with surrounding paragraphs. */
.help .markdown ul,.integration-instructions:not(.does-not-exist) ul,.help .markdown ol,.integration-instructions:not(.does-not-exist) ol {
        padding: 0;
    }
/* Fenced code blocks: light gray card with a subtle border and
       rounded corners. The 15px vertical margins give surrounding
       paragraphs visible breathing room around the code card, which
       a tighter 10px bottom margin (and 0 top) was not providing.
       The explicit font-size matches the `pre code` rule in .markdown
       above and ensures code blocks render at the same size whether
       the codehilite wraps content in <code> or not (some integration
       pages generate bare <pre> without a <code> child). */
.help .markdown pre,.integration-instructions:not(.does-not-exist) pre {
        padding: 9.5px;
        margin: 15px 0;
        font-family: "Source Code Pro", monospace;
        font-size: 14px;
        color: hsl(0deg 0% 0%);
        word-break: break-all;
        line-height: 20px;
        background-color: hsl(0deg 0% 96%);
        border: 1px solid hsl(0deg 0% 0% / 15%);
        border-radius: 4px;
    }
/* Inline `<code>` inside a link inherits the link color. */
.help .markdown a code,.integration-instructions:not(.does-not-exist) a code {
        color: var(--color-link);
    }


/*# sourceMappingURL=styles_portico_markdown_css-styles_portico_portico_variables_css.css.map*/