:root {
    --serif-fonts: Georgia,serif;
    --hero-fonts: "Helvetica Neue","Helvetica",sans-serif;
    --sans-serif-fonts: "Open Sans",Helvetica,Arial,sans-serif;
    --monospace-fonts: Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;
    --accent-fonts: "Roboto Slab",sans-serif;
    --text-color: #000;
    --accent-color: #348af0;
    --accent-text-color: #0069e4;
    --section-vertical-padding: 3em;
    --border-radius: 0.1875em;
    --brand-accent-red: #f16975;
    --brand-accent-orange: #f69259;
    --brand-accent-yellow: #ffdb6f;
    --brand-accent-green: #65cc9a;
    --brand-accent-light-blue: #76c4e2;
    --brand-accent-purple1: #8176b5;
    --brand-accent-purple2: #ba77b1;
    --brand-accent-blue: #408bc9;
    --brand-accent-dark-red: #711423;
    --brand-accent-mid-red: #f3bac3;
    --brand-accent-light-red: #fcf0f2;
    --brand-accent-dark-green: #1c422b;
    --brand-accent-mid-green: #b0ddc2;
    --brand-accent-light-green: #eff8f3
}

* {
    box-sizing: inherit
}

html {
    text-rendering: optimizeLegibility;
    font-family: var(--sans-serif-fonts);
    font-size: 10px;
    line-height: 1.4;
    word-wrap: break-word;
    box-sizing: border-box;
    color: var(--text-color)
}

body {
    font-size: 2em;
    margin: 0
}

strong.subtle {
    font-weight: 600
}

code,strong.code {
    font-family: var(--monospace-fonts)
}

code.inline,strong.code.inline {
    background: rgba(0,0,0,.05);
    display: inline-block;
    padding: 0 .25em
}

h1 {
    font-weight: 500
}

h2,h3,h4,h5,h6 {
    font-weight: 400
}

header {
    position: relative;
    width: 100%
}

@media (min-width: 769px) {
    header {
        margin-bottom:2em
    }
}

@media (max-width: 768px) {
    header {
        padding-bottom:.8em
    }
}

header:after {
    content: "";
    position: absolute;
    background-color: hsla(0,0%,100%,.1);
    height: .5rem;
    bottom: 0;
    left: 0;
    right: 0
}

header h1 {
    font-size: 1.8em;
    line-height: 1;
    margin: 0 0 .4em
}

header h2 {
    font-size: 1.3em;
    line-height: 1.2;
    margin: 0
}

.light-on-dark {
    color: #fff;
    text-shadow: 0 0 6px rgba(0,0,0,.66)
}

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
    fill: #fff
}

.svg-inline--fa.fa-w-10 {
    width: .625em
}

svg:not(:root).svg-inline--fa {
    overflow: visible
}

.svg-inline--fa.fa-w-16 {
    width: 1em
}

section[data-section] {
    position: relative
}

section[data-section] .collapsed-top-margin {
    margin-top: 0
}

section[data-section] .collapsed-bottom-margin {
    margin-bottom: 0
}

.button,[role=button] {
    cursor: pointer
}

.inline-button {
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit
}

.button,.inline-button {
    display: inline-block;
    appearance: none;
    background: none;
    cursor: pointer
}

.connection-info {
	max-width: 400px;
}

.button {
    border: none;
    padding: .6em 1.5em;
    font-weight: 600;
    font-family: var(--sans-serif-fonts);
    letter-spacing: .2em;
    text-transform: uppercase;
    position: relative;
    text-decoration: none;
    border: 3px solid transparent;
    user-select: none;
    color: #000;
    transition: transform .1s ease-in-out;
    -webkit-tap-highlight-color: transparent
}

.button .button-content {
    display: inline-block;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color .1s ease-in-out
}

.button:hover {
    transform: translate3d(0,-1px,0);
    outline: none
}

.button:hover .button-content {
    border-bottom-color: currentColor
}

.button:focus {
    outline: none
}

.button:not(:hover):focus .button-content {
    border-bottom-style: dashed
}

.button:active {
    transform: translate3d(0,1px,0)
}

.button.primary,.button.selected {
    background: #000;
    color: #fff
}

.button.primary:hover .button-content,.button.selected:hover .button-content {
    border-bottom-color: #fff
}

.button.secondary {
    border-color: #000
}

.button.secondary:hover .button-content {
    border-bottom-color: #000
}

.button.secondary.inverted {
    color: #fff;
    border-color: #fff
}

.button.secondary.inverted:hover .button-content {
    border-bottom-color: #fff
}

.message.center {
    text-align: center
}

.message.center .message-content {
    display: inline-block
}

.message-content {
    border-radius: 3px;
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: 1rem 1.5rem;
    font-size: .8em;
    line-height: 1.6
}

p.collapsed-margins {
    margin: 0
}

@media (max-width: 768px) {
    ol,ul {
        margin-left:0;
        padding-left: 1em
    }
}

ol>li+li,ol li>ol,ol li>ul,ul>li+li,ul li>ol,ul li>ul {
    margin-top: .5em
}

.tc {
    text-align: center
}

section[data-section=hero] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    font-family: var(--sans-serif-fonts);
    font-weight: 300;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    min-height: calc(100vh - 5rem);
    padding: var(--section-vertical-padding) 1em;
    text-align: left;
    z-index: 1;
    translate: transform3d(0,0,0)
}

@media (min-width: 769px) {
    section[data-section=hero] {
        padding:var(--section-vertical-padding) 5em
    }
}

section[data-section=hero] .hero-copy>svg {
    height: 10rem;
    fill: #fff;
    max-width: 100%
}

section[data-section=hero] .hero-link {
    color: #fff;
    text-align: center
}

section[data-section=hero] h3 {
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: .1rem
}

section[data-section=hero] h2 {
    text-align: center;
    font-size: 1.25em
}

@media (max-width: 768px) {
    section[data-section=hero] h3 {
        margin-top:2em
    }
}

@media (min-width: 769px) {
    section[data-section=hero] h2 {
        font-weight:300
    }
}

section[data-section=hero] .actions {
    display: flex
}

@media (max-width: 768px) {
    section[data-section=hero] .actions {
        display:block;
        width: 100%;
        max-width: 100%;
        margin-top: 1em
    }

    section[data-section=hero] .actions .button:not(:last-child) {
        margin-bottom: 1em
    }
}

@media (min-width: 769px) {
    section[data-section=hero] .actions .button:not(:last-child) {
        margin-right:2em
    }
}

section[data-section=hero] .actions .button {
    font-size: 2rem
}

section[data-section=hero] .hero-background {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

section[data-section=hero] .app-store-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 1em;
    max-width: 100%;
    justify-content: center
}

section[data-section=hero] .app-store-badges a {
    display: inline-block;
    margin: 4px
}

section[data-section=hero] .app-store-badges svg {
    height: 64px;
    padding: 5px;
    max-width: 100%
}

.slideshow {
    height: 100%;
    width: 100%;
    position: relative
}

.slideshow .background-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease;
    opacity: 0;
    background-size: cover;
    background-position: 50%
}

.slideshow .background-slide:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5
}

.slideshow .background-slide[data-slide="1"] {
    background-image: url(/fc4f07e27b83408acb2de2c979b06322.jpg)
}

.slideshow .background-slide[data-slide="2"] {
    background-image: url(/f16f8a37f9b60812bbaf419eb7e58e1f.jpg)
}

.slideshow .background-slide[data-slide="3"] {
    background-image: url(/f7f1b4117f5b57fbd8cbd6c94cebd286.jpg)
}

.slideshow .background-slide[data-slide="4"] {
    background-image: url(/3bd93446f91d5a456be5627883723eb0.jpg)
}

.slideshow>.background-slide:first-child::after {
    background: var(--brand-accent-orange);
    filter: brightness(10%)
}

.slideshow>.background-slide:nth-child(2):after {
    background: var(--brand-accent-red);
    filter: brightness(20%)
}

.slideshow>.background-slide:nth-child(3):after {
    background: var(--brand-accent-blue);
    filter: brightness(20%)
}

.slideshow>.background-slide:nth-child(4):after {
    background: var(--brand-accent-purple1);
    filter: brightness(30%)
}

.slideshow.static-slide>.background-slide,.slideshow[data-active-slide="1"]>.background-slide:first-child,.slideshow[data-active-slide="2"]>.background-slide:nth-child(2),.slideshow[data-active-slide="3"]>.background-slide:nth-child(3),.slideshow[data-active-slide="4"]>.background-slide:nth-child(4) {
    opacity: 1
}

.slideshow[data-active-slide="1"]>.background-slide:not(:nth-child(5)):not(:first-child):not(:nth-child(2)),.slideshow[data-active-slide="2"]>.background-slide:not(:first-child):not(:nth-child(2)):not(:nth-child(3)),.slideshow[data-active-slide="3"]>.background-slide:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)),.slideshow[data-active-slide="4"]>.background-slide:not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) {
    background-image: none!important
}

section[data-section=explanation-privacy],section[data-section=explanation-stats],section[data-section=explanation] {
    display: flex;
    justify-content: center;
    flex-flow: column;
    padding: var(--section-vertical-padding) 12px
}

section[data-section=explanation-privacy] .content,section[data-section=explanation-stats] .content,section[data-section=explanation] .content {
    width: 100rem;
    max-width: 100%;
    margin: 0 auto;
    display: flex
}

section[data-section=explanation] {
    color: #000;
    background-color: #fff
}

section[data-section=explanation] .content[data-subsection=dns] {
    align-items: center
}

@media (min-width: 769px) {
    section[data-section=explanation] .content[data-subsection=dns] {
        margin-bottom:2em
    }

    section[data-section=explanation] .content[data-subsection=dns] .secondary {
        margin-right: 10rem
    }

    section[data-section=explanation] .content[data-subsection=dns] .secondary>svg {
        height: 33rem
    }
}

@media (max-width: 768px) {
    section[data-section=explanation] .content[data-subsection=dns] {
        flex-flow:column
    }

    section[data-section=explanation] .content[data-subsection=dns] .secondary>svg {
        height: 22rem;
        transform: rotate(8deg)
    }
}

@media (min-width: 769px) {
    section[data-section=explanation] .content[data-subsection=security] .secondary {
        margin-left:5rem
    }

    section[data-section=explanation] .content[data-subsection=security] .secondary>svg {
        height: 33rem
    }
}

@media (max-width: 768px) {
    section[data-section=explanation] .content[data-subsection=security] {
        flex-flow:column
    }

    section[data-section=explanation] .content[data-subsection=security] .secondary {
        display: flex;
        justify-content: center;
        margin: 1rem 0
    }

    section[data-section=explanation] .content[data-subsection=security] .secondary>svg {
        height: 21rem
    }
}

section[data-section=explanation-privacy] {
    border-top: 1px solid #c4d7ee;
    background-color: #f4f8fb;
    background: linear-gradient(#e2ebf7,#f4f8fb);
    color: #000;
    flex-flow: column
}

section[data-section=explanation-privacy] header:after {
    background-color: rgba(196,215,238,.33)
}

section[data-section=explanation-privacy] .content[data-subsection=privacy] .secondary {
    margin-left: 2rem;
    margin-right: 5rem
}

section[data-section=explanation-privacy] .content[data-subsection=privacy] .secondary>svg {
    height: 26rem
}

@media (max-width: 768px) {
    section[data-section=explanation-privacy] .content[data-subsection=privacy] {
        flex-flow:column
    }

    section[data-section=explanation-privacy] .content[data-subsection=privacy] .mobile-emphasis {
        font-weight: 600
    }

    section[data-section=explanation-privacy] .content[data-subsection=privacy] .secondary {
        display: flex;
        justify-content: center
    }

    section[data-section=explanation-privacy] .content[data-subsection=privacy] .secondary>svg {
        height: 14rem
    }
}

section[data-section=explanation-stats] {
    background-color: #1d1916;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    --bar-color-orange: #db824e;
    --bar-color-purple: #8176b5;
    --bar-color-gray: #b3b3b3;
    --bar-gradient-orange-yellow: linear-gradient(-45deg,var(--bar-color-orange),#ffdb6f);
    --bar-gradient-purple-blue: linear-gradient(-45deg,var(--bar-color-purple),#76c4e2);
    --bar-gradient-purple-indigo: linear-gradient(-46deg,var(--bar-color-purple),#ba77b1);
    --bar-chart-cap-width: 1rem;
    --animation-time: 1s
}

section[data-section=explanation-stats] a {
    color: #fff
}

section[data-section=explanation-stats] header:after {
    background-image: var(--bar-gradient-purple-indigo);
    opacity: .3
}

@media (min-width: 769px) {
    section[data-section=explanation-stats] .content {
        align-items:center
    }

    section[data-section=explanation-stats] .content .primary {
        flex: 1 0 44%
    }

    section[data-section=explanation-stats] .content .chart {
        margin-left: 2rem
    }
}

@media (max-width: 768px) {
    section[data-section=explanation-stats] .content {
        flex-flow:column
    }
}

section[data-section=explanation-stats] .chart {
    position: relative;
    width: 100%;
    transition: opacity var(--animation-time) ease-out
}

section[data-section=explanation-stats] .chart .bar-chart+.bar-chart {
    margin-top: 2.5rem
}

section[data-section=explanation-stats] .bar-chart {
    background: var(--bar-chart-background);
    height: var(--bar-chart-height);
    border-radius: 4rem
}

section[data-section=explanation-stats] .bar-chart .bar-chart-primary {
    display: flex;
    align-items: center
}

section[data-section=explanation-stats] .bar-chart .bar-chart-fill {
    display: inline-block;
    background: #333;
    height: 2rem;
    margin-bottom: .3rem;
    position: relative;
    will-change: width
}

section[data-section=explanation-stats] .bar-chart .bar-chart-label {
    margin-left: 1rem
}

section[data-section=explanation-stats] .bar-chart[animated] .bar-chart-fill {
    transition: width var(--animation-time) ease-out
}

section[data-section=explanation-stats] .bar-chart.first .bar-chart-label {
    color: var(--bar-color-orange)
}

section[data-section=explanation-stats] .bar-chart.first .bar-chart-fill {
    background: var(--bar-gradient-orange-yellow)
}

section[data-section=explanation-stats] .bar-chart.second .bar-chart-label {
    color: var(--bar-color-purple)
}

section[data-section=explanation-stats] .bar-chart.second .bar-chart-fill {
    background: var(--bar-gradient-purple-blue)
}

section[data-section=explanation-stats] .bar-chart.third .bar-chart-label {
    color: var(--bar-color-purple)
}

section[data-section=explanation-stats] .bar-chart.third .bar-chart-fill {
    background: var(--bar-gradient-purple-indigo)
}

section[data-section=explanation-stats] .bar-chart.fourth .bar-chart-label {
    color: var(--bar-color-gray)
}

section[data-section=explanation-stats] .bar-chart.fourth .bar-chart-fill {
    background: var(--bar-color-gray)
}

html[class=dir-rtl] section .content .primary,html[class=dir-rtl] section[data-section=explanation-privacy] header,html[class=dir-rtl] section[data-section=explanation-stats] header,html[class=dir-rtl] section[data-section=faq],html[class=dir-rtl] section[data-section=setup],html[class=dir-rtl] section[data-section=share] h2 {
    direction: rtl
}

html[class=dir-rtl] section[data-section=setup] .questions-link {
    text-align: unset
}

section[data-section=setup] {
    background: #fff;
    color: #000;
    padding: calc(var(--section-vertical-padding) / 2) 12px;
    width: 64rem;
    max-width: 100%;
    margin: 0 auto
}

section[data-section=setup] a {
    color: inherit
}

section[data-section=setup] .additional-content {
    font-size: .8em;
    text-align: center;
    padding-top: 1em
}

section[data-section=setup] .instructions {
    display: none
}

section[data-section=setup][data-platform=android] .instructions[data-platform=android],section[data-section=setup][data-platform=iphone] .instructions[data-platform=iphone],section[data-section=setup][data-platform=linux] .instructions[data-platform=linux],section[data-section=setup][data-platform=mac-os] .instructions[data-platform=mac-os],section[data-section=setup][data-platform=router] .instructions[data-platform=router],section[data-section=setup][data-platform=windows] .instructions[data-platform=windows] {
    display: block
}

section[data-section=setup] .instruction-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em
}

section[data-section=setup] .instruction-picker>:not(:last-child) {
    margin-right: 1.7rem
}

section[data-section=setup] .instruction-picker .choice {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: .3em .6em;
    text-transform: none;
    letter-spacing: normal;
    font-size: 1.7rem
}

section[data-section=setup] .instruction-picker .choice.selected svg.fa-linux {
    background: #fff;
    border-radius: 4px;
    padding: 1px
}

section[data-section=setup] .instruction-picker .choice.selected svg.fa-linux path {
    fill: #000
}

section[data-section=setup] .instruction-video {
    display: block;
    width: 1100px;
    margin: 0 auto;
    max-width: 100%
}

section[data-section=setup] .app-download-options {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    justify-content: center
}

section[data-section=setup] .app-download-options a {
    display: inline-block;
    margin: 27px 8px 12px
}

section[data-section=setup] .app-download-options svg {
    height: 64px;
    max-width: 100%
}

section[data-section=share] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    overflow: hidden;
    max-width: 100%;
    color: #fff;
    padding: var(--section-vertical-padding) 1em;
    translate: transform3d(0,0,0)
}

@media (max-width: 768px) {
    section[data-section=share] {
        font-size:1.1em;
        line-height: 1.6;
        padding: calc(var(--section-vertical-padding) / 2) 1em 2em;
        min-height: calc(55vh - 5rem)
    }

    section[data-section=share] h1 {
        line-height: 1.2
    }

    section[data-section=share] h2 {
        text-align: center;
        margin: 3rem 0;
        line-height: 1.4
    }
}

section[data-section=share] .accent-background {
    background-image: url(/c957f8462c718d3c8adf35586a72c6dd.jpg);
    background-size: cover;
    background-position: 50%;
    z-index: -1;
    filter: blur(3px) brightness(77%);
    transform: translateZ(0);
    position: absolute;
    top: -.5em;
    left: -.5em;
    right: -.5em;
    bottom: -.5em
}

section[data-section=share] .accent-background:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--brand-accent-purple1);
    pointer-events: none;
    opacity: .5
}

section[data-section=share] .share-buttons {
    display: flex;
    align-items: center;
    font-size: 2.2rem
}

section[data-section=share] .share-buttons .share-button {
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    height: 2.5em;
    width: 2.5em;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0
}

section[data-section=share] .share-buttons .share-button path {
    fill: var(--input-border-color-focused)
}

section[data-section=share] .share-buttons .share-button:not(:last-child) {
    margin-right: 1em
}

section[data-section=faq] {
    color: #000;
    display: flex;
    justify-content: center;
    flex-flow: column;
    padding: var(--section-vertical-padding) 12px
}

section[data-section=faq] .content {
    width: 64rem;
    max-width: 100%;
    margin: 0 auto
}

section[data-section=faq] .content a {
    color: inherit
}

section[data-section=faq] .logos {
    text-align: center
}

section[data-section=faq] .logos>svg {
    max-width: 100%;
    margin: 2rem 0;
    height: 4rem
}

.faq-page {
    color: #000;
    display: flex;
    justify-content: center;
    flex-flow: column
}

.faq-page .content {
    width: 64rem;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin: 3em auto 0
}

.faq-page .content a {
    color: inherit
}

.faq-page .content h1 {
    font-size: 1.75em
}

.faq-page .content h3 {
    font-size: 1.25em;
    margin-top: 1.5em;
    margin-bottom: .25em;
    font-weight: 700
}

.faq-page .content .h3-link {
    text-decoration: none
}

.faq-page .content ol li,.faq-page .content p,.faq-page .content ul li {
    margin-top: 0
}

.faq-page .hero {
    background: linear-gradient(to bottom left,#ba77b1,#8176b5);
    background-size: cover;
    background-position: 50%;
    padding-bottom: 24px
}

.faq-page .hero h1 {
    color: #fff;
    text-align: center
}

.faq-page .hero .main-logo {
    max-width: 275px;
    display: block;
    margin: 20px auto 0;
    fill: #fff
}

.faq-page .hero .Header {
    position: static
}

.faq-page .hero .Header .Nav--link {
    color: #fff
}

.faq-page .hero .Header .Nav--link .CloudflareLogo {
    color: inherit
}

.faq-page .hero .language-selector {
    color: #fff
}

html[class=dir-rtl] .faq-page .content {
    direction: rtl
}

section[data-section=footer] {
    opacity: .5;
    display: flex;
    justify-content: center;
    flex-flow: column;
    padding: 0 12px var(--section-vertical-padding)
}

section[data-section=footer] .content {
    font-size: .95em;
    text-align: center
}

section[data-section=footer] .content .footer-logo {
    font-family: Helvetica;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -.03em
}

section[data-section=footer] .content a {
    color: inherit
}

body.help-page {
    background-color: var(--bg-background-color)
}

body.help-page .help-initial-hidden {
    display: none
}

body.help-page section[data-section=setup] {
    border-top: 3px solid rgba(51,51,51,.05);
    background-color: transparent;
    padding-top: 1.4em
}

body.help-page section[data-section=setup] .additional-content.debug-link {
    display: none
}

section[data-section=help] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    font-family: var(--sans-serif-fonts);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    min-height: 90vh;
    padding: var(--section-vertical-padding) 0 1em;
    text-align: left;
    z-index: 1;
    translate: transform3d(0,0,0);
}

section[data-section=help] header {
    margin: 0 auto;
    text-align: center
}

section[data-section=help] header .title {
    margin-top: 10px;
    border-top: 10px solid var(--header-color);
    display: inline-block;
    color: var(--header-color)
}

@media (min-width: 769px) {
    section[data-section=help] header .title {
        padding:16px 2em 0
    }
}

@media (max-width: 768px) {
    section[data-section=help] header .title {
        padding:11px .7em 0
    }
}

section[data-section=help] .hero-copy>svg {
    height: 7rem;
    fill: #333
}

section[data-section=help] h2 {
    font-weight: 700
}

section[data-section=help] h3 {
    margin-bottom: 0;
    font-weight: 600
}

section[data-section=help] h3>a {
    text-decoration: none;
    color: currentColor;
    box-shadow: inset 0 -3px var(--bg-background-color),inset 0 -5px rgba(0,0,0,.1)
}

section[data-section=help] h3>a:hover {
    box-shadow: inset 0 -3px var(--bg-background-color),inset 0 -5px rgba(0,0,0,.25)
}

section[data-section=help] table.debug-table {
    width: 100%;
    margin-top: .6em;
    border: 1px solid var(--border-color);
    padding: .5em;
    background-color: var(--bg-content-color);
    border-radius: var(--border-radius)
}

section[data-section=help] table.debug-table tr {
    height: 1.8em
}

section[data-section=help] table.debug-table tr td:first-child {
    font-weight: 600
}

section[data-section=help] table.debug-table tr td:last-child {
    text-align: center
}

section[data-section=help] .ip-address {
    font-size: .8em;
    font-family: var(--monospace-fonts)
}

section[data-section=help] .hidden {
    display: none
}

section[data-section=help] .debug-url-section .header {
    margin: 0
}

section[data-section=help] .debug-url-section .footer {
    font-size: .6em;
    color: #888
}

section[data-section=help] .debug-url-section .copy-url-area {
    cursor: pointer;
    outline: none;
    resize: none;
    overflow: hidden;
    width: 100%;
    height: 94px;
    margin-top: .6em;
    padding: .5em;
    background-color: var(--bg-content-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: .6em;
    color: #444;
    font-family: var(--monospace-fonts)
}

:root {
    --bg-background-color: #fff;
    --bg-content-color: #fcfcfc;
    --header-color: #333;
    --border-color: #a9a9a9;
    --button-color: #2c7cb0;
    --button-hover-color: #276d9b
}