* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
}

/* default associations */
body {
    --link-color: var(--accent-color);

    --site-menu-text-color: var(--accent-color);
    --site-menu-border-color-hov: var(--accent-color);

    --left-menu-text-color: var(--accent-color-contrast);

    --h1-color: var(--accent-color);
    --h2-color: var(--main-color);
    --h3-color: var(--main-color);

    --home-title-color: var(--accent-color);
    --home-border-color: var(--accent-color);
    --splash-text-color: var(--main-color);

    --msg-color: var(--main-color);
    --msg-bg: var(--box-bg);

    --map-fill: transparent;
    --map-point-fill: var(--accent-color);

    --box-bg: var(--bg-color-contrast);
    --box-border-color: var(--accent-color);
    --content-box-bg: var(--bg-color-inner);
    --content-box-border: var(--border-color);
    --inner-border-color: var(--border-color-inner);
    --content-box-hr: #ccc;

    --tab-border: var(--border-color);
    --tab-label-bg: var(--bg-color-lesser);
    --tab-selected-label-bg: var(--content-box-bg);

    --acc-motd-bg: var(--bg-color-contrast);
    --acc-motd-border: var(--border-color);

    --flattable-border-color: var(--border-color);
    --flattable-head-bg: var(--bg-color-stronger);
    --flattable-head-fg: var(--main-color);
    --flattable-row-bg: transparent;
    --flattable-row-alt-bg: rgba(0, 0, 0, 0.05);

    --button-text-color: var(--button-fg);
    --button-text-color-hov: var(--button-fg);
    --button-bg-color: var(--accent-color);

    --userbutton-fg: var(--accent-color);
    --userbutton-fg-hov: var(--button-fg);
    --userbutton-bg: transparent;
    --userbutton-bg-hov: var(--accent-color);
    --userbutton-border-color: var(--accent-color);

    --inputhelp-text-color: var(--quiet-text-color);

    --guides-icon-border-color: var(--border-color);
    --guides-icon-color: var(--accent-color-contrast);
    --guides-icon-text-color: var(--accent-color-contrast);

    --ticket-msg-border: var(--border-color);
    --ticket-msg-bg: var(--bg-color-lesser);
    --ticket-user-msg-bg: var(--bg-color-stronger);
    --ticket-priv-msg-bg: rgba(127, 63, 63, 0.2);

    --wg-key-bg: var(--bg-color-lesser);
    --wg-key-color: var(--main-color);

    --pages-border: var(--border-color);
}


html, body {
    height: 100%;
}

body {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    color: var(--main-color);
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: 'Open Sans', Arial, sans-serif;
}

pre {
    font-family: monospace;
    margin-top: 1em;
    margin-bottom: 1em;
}
code.codeblock {
    font-family: monospace;
    display: block;
    line-height: 125%;
    padding: 0.25em 0.75em;
    margin: 0.25em;
    border-left: 3px solid var(--accent-color);
}

a {
    color: var(--link-color);
}
em {
    font-style: normal;
    font-weight: bold;
}

.host_name {
    font-family: monospace;
    font-size: 1.1em;
}


/* **********   base layout   ********** */

/* Firefox fix */
.formpage.pure-g {
    text-align: center;
}
.formpage.pure-g > div{
    text-align: left;
}

.flex-spacer { flex-grow: 1; }


.left-menu {
    float: left;
    display: block;
    width: 200px;
    line-height: 20px;
    position: absolute;
}
.left-menu p.menu-title {
    text-align: center;
    padding-top: 1.5em;
    margin: 0;
}
.left-menu ul {
    list-style-type: none;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0;
}
.left-menu ul:first-child {
    padding-top: 0;
}
.left-menu li {
    padding: 0.3em 0;
}
.left-menu a {
    text-decoration: none;
    color: var(--left-menu-text-color);
}
.left-menu + .content{
    margin-left: 200px;
}


.flex-page {
    display: flex;
    margin: 0 auto 0 auto;
    align-items: flex-start;
}
.flex-page .left-menu {
    display: block;
    float: none;
    width: 200px;
    position: relative;
    flex-shrink: 0;
}
.flex-page-content {
    overflow: auto;
    flex-grow: 2;
    margin: 0 1em 2em 1em;
}
.flex-page .content-box {
    margin: 0;
}
.flex-page-content .content-box:not(:first-child) {
    margin-top: 1em;
}


.content {
    padding: 0em 2em 3em 2em;
    flex-grow: 1;
    min-height: min-content;
}
.content.pure-g {
    justify-content: center;
}

.content h1 {
    font-size: 2em;
    text-align: center;
    color: var(--h1-color);
}
.content h2 {
    font-weight: 400;
    text-align: center;
    font-family: 'Arvo', serif;
    font-size: 1.6em;
    margin: 1em;
    color: var(--h2-color);
}
.content h3 {
    font-weight: 400;
    text-align: left;
    font-size: 1.2em;
    margin: 1em;
    color: var(--h3-color);
}



/* **********   generic elements   ********** */



/* **********   header   ********** */

header {
    padding: 1em 8em;
}
header .inner {
    display: flex;
    flex-wrap: wrap;
}
header #logo h1 {
    margin: 0.5em 0;
}


header nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 6em;
    flex-grow: 1;
}
header ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
header li {
    display: inline-block;
}

header nav > div {
    display: flex;
    flex-direction: row;
    align-items: end;
}

header .user-menu {
    margin-left: 3em;
    margin-bottom: 0.3em;
    font-size: 1.1em;
}
header .user-menu li {
    margin-left: 0.75em;
}

header .site-menu{
    font-size: 1.2em;
    text-transform: uppercase;
    text-align: right;
}
header .site-menu a{
    color: var(--site-menu-text-color);
    text-decoration: none;
}
header .site-menu ul{
    margin: 0px;
}
header .site-menu li{
    margin: 0px 7px;
    position: relative;
    bottom: -5px;
    /* reserve a 2px border, avoid shifting things on :hover */
    border-bottom: 2px solid transparent;
}
header .site-menu li:hover{
    border-bottom: 2px solid var(--site-menu-border-color-hov);
}
header .site-menu li:first-child{
    margin-left: 0;
}
header .site-menu li:last-child{
    margin-right: 0;
}

@media screen and (max-width: 64em) {
    header {
        padding: 1em 2em;
    }
    header nav {
        margin-left: 3em;
    }
}

@media screen and (max-width: 40em) {
    header .inner {
        flex-direction: column;
        align-items: center;
    }
    header nav, header .user-menu {
        margin-left: 0;
        width: 100%;
    }
    header #logo {
        margin-bottom: 1em;
    }
    header .user-menu {
        text-align: center;
    }
    header .user-menu li:not(:last-child) {
        margin-bottom: 0.5em;
    }
    header .site-menu {
        font-size: 1em;
        text-align: center;
    }
}


/* **********   footer   ********** */

footer{
    clear: both;
    display: flex;
    justify-content: center;
    margin-top: 6em;
    padding-bottom: 2em;
    flex-wrap:wrap;
    line-height: 130%;
    background: var(--footer-bg-color);
}
footer, footer a {
    color: var(--footer-text-color);
}
footer .footer-column {
    text-align: left;
    list-style-type:none;
    padding-left: 0;
    margin: 2em;
}
footer li {
    margin: 0.1em 0;
}

footer li.item::before, footer li.bullet::before {
    display: inline-block;
    content: " ";
    width: 0.8em;
}
footer li.bullet::before {
    content: "‣";
}

.vpn-status-box {
    margin-top: -0.25em; /* trust */
    border: 1px dotted var(--footer-border-color);
    border-radius: 2px;
}
.vpn-status-box p {
    margin: 0.3em 0.50em;
}
.vpn-status-box a {
    margin-right: 0.5em;
}
.vpn-status-box .host_name {
    font-weight: bold;
}

footer .quiet {
    color: var(--quiet-text-color);
    font-size: 0.75em;
    line-height: 110%;
    margin: 1em;
    text-align: center;
}



/* **********   content-box   ********** */

.content-box {
    margin: 1em;
    padding: 1em 2em;
    overflow: auto;
    flex-grow: 2;
    border: 1px solid var(--content-box-border);
    background: var(--content-box-bg);
    -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.21);
    -moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.21);
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.21);
}
.flex-page-content h2, .content-box h2 {
    margin-top: 0;
    font-size: 1.5em;
    font-weight: bold;
}
.content-box h3 {
    font-weight: bold;
    font-size: 1.2em;
    margin: 0.75em 0;
}
.content-box h4 {
    font-weight: bold;
    font-size: 1.0em;
    margin: 1em 0 0.25em 2em;
}
.content-box ul {
    margin: 0.25em 0 0.5em 0;
}
.content-box ul {
    list-style-type: circle;
}
.content-box a {
    color: var(--link-color);
}
.content-box hr {
    height: 0;
    border: 0;
    padding: 0;
    margin: 1.5em 0;
    border-top: 1px solid var(--content-box-hr);
}



/* **********   specific elements   ********** */

div#captcha > div {
    margin: 1em auto;
}
.h-captcha {
    text-align: center;
}

.signuppage .h-captcha {
    margin-top: 2em;
}

.stripe-button-el {
    display: block !important;
    margin: 4em auto 3em auto;
}


/*.kb-question-list {
    list-style-type: circle;
}
.kb-question-list a {
    font-size: 1.2em;
}*/
.kb-question-meta .kb-vote-buttons {
    padding-left: 0.5em;
}
.kb-vote-buttons button {
    padding: 0 0.4em 0.2em 0.4em;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.kb-question-meta p {
    margin: 0 0;
}


.message p {
    text-align: center;
    width: 100%;
    padding: 1.2em;
    margin: 0;
    color: var(--msg-color);
    background: var(--msg-bg);
}
.message p.info, .message p.success {
    background-color: var(--success-color);
}
.message p.error, .message p.critical, .message .warning {
    background-color: var(--danger-color);
}

ul.errorlist {
    list-style-type: none;
    text-align: center;
    width: 90%;
    margin: auto;
    padding: 1.2em;
    color: var(--msg-color);
    background-color: var(--danger-color);
}


/* **********   tables   ********** */

.table-header {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.table-header > *:first-child {
    flex-grow: 1;
}


table.flat-table {
    width: 100%;
    margin: 0.5em 0;
}
.flat-table td {
    padding: 10px;
}
.flat-table thead td {
    text-align: center;
    font-size: 1.1em;
    border: 1px solid var(--flattable-border-color);
    color: var(--flattable-head-fg);
    border-top: 0;
    background: var(--flattable-head-bg);
    font-weight: bold;
}
.flat-table tbody tr {
    background: var(--flattable-row-bg);
}
.flat-table thead tr td:first-child {
    border-left: 0;
}
.flat-table thead tr td:last-child {
    border-right: 0;
}
.flat-table tbody tr td:first-child {
    border-left: 0;
}
.flat-table tbody tr td {
    border: 1px solid var(--flattable-border-color);
}
.flat-table tbody tr td:first-child {
    border-left: 0;
}
.flat-table tbody tr td:last-child {
    border-right: 0;
}
.flat-table tbody tr:last-child td {
    border-bottom: 0;
}
.flat-table tbody tr:nth-child(even) {
    background: var(--flattable-row-alt-bg);
}
.flat-table td {
    white-space: nowrap;
}
.flat-table .right {
    text-align: right;
}



/* **********   forms / buttons   ********** */

.button, a.button { /* a.button to have priority over a */
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;

    border-radius: 3px;
    padding: 0.5em 1em;
    border: 0;

    color: var(--button-text-color);
    background: var(--button-bg-color);
}
.button:hover {
    color: var(--button-text-color-hov);
    filter: brightness(0.9);
}

.user-button {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;

    border-radius: 9px;
    padding: 0.15em 0.50em;
    border: 1px solid var(--userbutton-border-color);

    background: var(--userbutton-bg);
    font-size: 0.85em;
    color: var(--userbutton-fg) ;
}
.user-button:hover {
    color: var(--userbutton-fg-hov) ;
    background: var(--userbutton-bg-hov);
}



.pure-form select {
    height: 2.5em;
}

.content-box a.button,
.pure-button-primary, .pure-button-selected,
a.pure-button-primary, a.pure-button-selected {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
    padding: 0.5em 2em;
}

.button-danger {
    background-color: var(--danger-color);
}
.button-danger:hover {
    background-color: var(--danger-color);
    filter: brightness(0.9);
}

form p.inputinfo {
    font-size: 0.8em;
    display: block;
    margin: 0.5em 1em 1em 180px;
}

.formpage div.pure-g > div {
    margin: auto;
}

.formpage form.pure-form label {
    margin: 1.5em 0 0.25em 0;
}
.formpage form.pure-form input,
.formpage form.pure-form select,
.formpage form.pure-form textarea {
    margin-left: auto;
    margin-right: auto;
    margin: 0.10em auto;
    width: 90%;
}
.formpage form.pure-form {
    text-align: center;
}
.formpage form.pure-form input[type=submit] {
    margin-top: 1.25em;
}

.formpage form.pure-form .inputhelp {
    width: 80%;
    display: inline-block;
    margin: 0;
    color: var(--inputhelp-text-color);
    font-size: 0.8em;
}

.formpage > div {
    margin: auto;
}

.formpage div.links {
    margin: 20px auto 0 auto;
}
.formpage div.links ul{
    padding: 0px 20px 0 20px;
}
.formpage div.links ul li{
    list-style: none;
}
.formpage div.links ul li:before{
    content: "→ ";
}
.formpage div.links a{
    text-decoration: none;
}
.formpage div.links a:hover{
    text-decoration: underline;
}

.formpage form.pure-form input.button-1-2 {
    width: 45%;
}


/* **********   account   ********** */

.account-status {
    margin-bottom: 2em;
    padding: 0;
}
.account-status-paid, .account-status-disabled {
    font-weight: bold;
}

.account-status__status {
    font-weight: bold;
}

.account-status h3 {
    margin-left: 2em;
    margin: 1em;
}
.account-status table {
    width: 100%;
}

.account-status table tr:not(:first-child) {
    border-top: 1px solid var(--inner-border-color);
}
.account-status table td {
    padding: 0.5em 1em;
}
.account-status table td:first-child {
    border-right: 1px solid var(--inner-border-color);
    text-align: right;
    width: 33%;
}

.account-aff-box {
    background: var(--box-bg);
    border: 3px solid var(--box-border-color);
    margin: 1em 0 0 0;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
    -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
    box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
}
.account-aff-box {
    padding: 1.5em 1.5em;
}
.account-aff-box p {
    margin: 0 0 0.75em 0;
}
.account-aff-box fieldset {
    padding: 0;
}

.account-motd {
    background: var(--acc-motd-bg);
    border-radius: 4px;
    border: 1px solid var(--acc-motd-border);
    padding: 0.3em 2em;
    text-align: center;
    margin: 0 auto 0 auto;

    -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
    -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
    box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.13);
}
.account-motd p {
    margin: 0.25em 0;
}

.account-fund {
    padding: 0;
}

.account-payment-box form label, .account-giftcode-box form label {
    width: 8em;
}
.account-payment-box h3 {
    text-align: center;
}
.account-payment-box {
    margin-bottom: 2em;
}


.pure-form-aligned.centered-form .pure-controls {
    width: 100%;
    margin-left: 0;
}
.pure-form-aligned.centered-form .pure-controls input[type=submit] {
    display: block;
    margin: auto;
}

.account-giftcode-box .pure-control-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-giftcode-box .pure-form-aligned.centered-form .pure-control-group label {
    width: auto;
}

.account-payment-tab > label {
    width: 33.32%;
    text-align: center;
    display: block;
    float: left;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    height: 2em;
    border-right: 1px solid var(--tab-border);
    background: var(--tab-label-bg);
}
.account-payment-tab:last-child > label {
    border-right: 0;
}
.account-payment-tab > label span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.3em 0.5em 0 0.5em;
    position: relative;
    top: 1px;
}
.account-payment-tab [id^="tab"]:checked + label span {
    background: var(--tab-selected-label-bg);
    font-weight: bold;
}
.account-payment-tab [id^="tab"]:checked + label {
    background: var(--tab-selected-label-bg);
}
.account-payment-tab > input[type="radio"] {
    display: none;
}
.account-payment-tab .tab-content {
    display: none;
    float: right;
    width: 100%;
    margin: 2em 0 0 -100%;
    padding: 1em 1em 0 1em;
}
.account-payment-tab [id^="tab"]:checked ~ .tab-content {
    display: block;
}
.account-payment-tab .tab-content p {
    margin: 0.5em 0 0 0;
    text-align: center;
    font-size: 0.8em;
    color: var(--quiet-text-color);
}

.account-trial {
    padding: 0;
}
.account-trial p {
    margin: 1em 2em;
}



.account-settings > div {
    margin: 0 auto 2em auto;
}
.account-settings .content-box {
    padding: 0em 1em;
}

.payments-cancel-page hr {
    margin: 2em 1em;
    border-bottom: 0;
}
.payments-cancel-page .feedback {
    width: 100%;
}
.payments-cancel-page .pure-controls {
    text-align: center;
}



@media screen and (min-width: 64em) {
    .account-giftcode-box {
        padding-top: 4em;
    }
}

/* **********   help pages   ********** */

.install-guides {
    text-align: center;
    list-style-type: none;
}
.install-guides li {
    display: inline-block;
    width: 7em;
    padding-top: 0.5em;
    text-align: center;
    border: 1px solid var(--guides-icon-border-color);
    border-radius: 5px;
    margin: 0.5em 0.50em;
}
.install-guides li a {
    line-height: 2.2em;
    text-decoration: none;
    display: block;
    color:  var(--guides-icon-text-color);
}
.install-guides li i {
    display: block;
    color: var(--guides-icon-color);
}

.install-section h3 {
    margin: 0.25em 0;
}
.install-section > p {
    font-size: 0.9em;
    text-align: justify;
    margin: 0.25em 0;
}
.install-section hr {
    width: 75%;
    margin: 1.5em auto;
}
.install-instructions ol, .install-instructions ul {
    padding-left: 1.5em;
}
.install-instructions > ol > li {
    margin: 1em 0;
}
.install-section ol ul > li {
    margin: 0.25em 0;
}
.install-instructions img {
    display: block;
    margin: 0.5em;
}

.page > .content > p {
    margin: 1.5em 0;
}

.download-button {
    text-align: center;
    margin-top: 0.5em;
}

/* **********   tickets   ********** */

div.ticket-messages {
    margin: 2em 2em;
    border: 1px solid var(--ticket-msg-border);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div.ticket-message {
    background: var(--ticket-msg-bg);
    border-bottom: 1px solid var(--ticket-msg-border);
    padding: 0.25em 1em 1em 1em;
}
div.ticket-message:last-child {
    border-bottom: 0;
}

div.ticket-message-user {
    background: var(--ticket-user-msg-bg);
}
div.ticket-message-private {
    background: var(--ticket-priv-msg-bg);
}

.ticket-message-author,
.ticket-message-date {
    font-weight: bold;
    font-size: 0.9em;
    margin: 0;
    margin-bottom: 0.5em;
}
.ticket-message-author {
    text-align: left;
    float: left;
}
.ticket-message-date {
    text-align: right;

}
.ticket-message-content {
    margin: 0;
}
.ticket-message-reply textarea {
    width: 80%;
    margin: auto;
}
.ticket-message-reply input[type=submit] {
    margin: auto;
}

.pages {
    text-align: center;
}
.pages a {
    margin: 1em 0.5em;
    padding: 0.20em 0.6em;
    border: 1px solid var(--pages-border);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-decoration: none;
}



/* **********   home page   ********** */

.homepage h2 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    margin: 2.75em 0.5em;
    color: var(--splash-text-color);
    letter-spacing: 0.045em;
}

.homepage .title {
    color: var(--home-title-color);
}
.homepage .title h3 {
    width: 50%;
    margin: auto;
}

.homepage .inner {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.homepage .features {
    margin: 2.25em 0;
}
.homepage .features ul{
    list-style-type: circle;
    padding-left: 1em;
}
.homepage .features li{
    margin-top: 0.75em;
}

.homepage .right h3 {
    text-align: right;
}

.homepage h3 {
    font-family: 'Arvo', serif;
    font-weight: normal;
    font-size: 1.3em;
}
.homepage ul {
    list-style-type: circle;
    margin: 1em;
    padding-left: 1em;
}
.homepage p, .homepage ul {
    margin: 0.75em;
}

.homepage .locations {
    width: 70%;
    margin: 4em auto;
}
.homepage .more {
    text-align: right;
    font-size: 1.2em;
}
.homepage .map {
    display: block;
}

#map {
    display: block;
    width: 100%;
    margin: auto;
}
#map svg {
    fill: var(--map-fill);
}
#map .signalcircle {
    fill: var(--map-point-fill);
}

p.home-whyus {
    width: 47%;
    margin: auto;
    border: 2px solid var(--box-border-color);
    padding: 0.5em 1em;
    background: var(--box-bg);
    line-height: 140%;
}


@media screen and (max-width: 80em) {
    .homepage .features {
        margin-left: 0;
        margin-right: 0;
    }
    .homepage .title h3, .homepage .inner {
        width: 70%;
    }
}

@media screen and (max-width: 48em) {
    .homepage h2 {
        font-size: 2.3em;
    }
    .homepage .title h3, .homepage .inner {
        width: 90%;
    }
    .homepage .locations {
        width: 100%;
    }
}


.homepage .home-signup {
    text-align: center;
    margin: 4em 1em;
}
a.home-signup-button {
    padding: 1em 2em;
    text-transform: none;
    font-size: 1.1em;
    font-weight: 600;
}
a.home-signup-button .subtext {
    font-size: 0.7em;
    font-weight: normal;
    display: block;
    opacity: 0.85;
}

@media screen and (max-width: 48em) {
    .home-signup-button {
        min-width: 50%;
    }
    p.home-whyus {
        width: 90%;
    }
}


/* **********   gateway list   ********** */

.bandwidth {
    display: block;
    position: relative;
    width: 100%;
    border: 1px solid var(--bw-widget-border);
    background: var(--bw-widget-bg);
    text-align: center;
}
.bandwidth .inner {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: var(--bw-widget-use-bg);
    z-index: 100;
}
.bandwidth .inner.high {
    background-color: var(--bw-widget-high-bg);
}
.bandwidth .label {
    position: relative;
    z-index: 200;
}

.no-p2p, .no-ipv6 {
    display: inline-block;
    font-weight: bold;
    font-size: 0.7em;
    text-align: center;
    line-height: 0.9;
    margin: 0 0.2em;
}
.no-p2p {
    color: var(--danger-color);
}
.no-ipv6 {
    color: var(--quiet-text-color);
}

/* **********   wireguard   ********** */


.wireguard-peer-actions a {
    margin: 0 0.25em;
}

.wireguard-qr {
    text-align: center;
}
.wireguard-qr img {
    width: 305px;
}

.wireguard-peer-info td {
    padding: 0.25em 0.5em;
}

.wireguard-key {
    font-family: monospace;
    font-size: 1.1em;
    background: var(--wg-key-bg);
    padding: 5px 3px 0 3px;
    color: var(--wg-key-color);
}

.wireguard-list-header h3 {
    display: inline-block;
}
.wireguard-list-header a {
    float: right;
}

.page-wg-title {
    display: flex;
    flex-direction: row;
}
.page-wg-title h3 {
    flex-grow: 1;
}
.page-wg-title p {
    margin: 0;
}
.page-wg-table {
    width: 100%;
    margin-top: 0.5em;
}
.page-wg-table thead td {
    text-align: left;
}
.page-wg-table__action {
    text-align: center;
}

.page-wg-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-wg-shadow__loading {
    width: 100%;
    height: 100%;
    background: url("../img/spinner.gif") center no-repeat;
}
.page-wg-shadow canvas, .page-wg-shadow img {
    border: 3px solid white;
}

td.page-wg-table__action {
    padding: 0.5em 0.27em;
}
td.page-wg-table__action--more {
    border-left: 0;
}


.error-box {
    width: 33%;
    margin: auto;
    border: 1px solid var(--footer-bg-color);
    padding: 0em 2em;
    background: var(--bg-color-inner);
    line-height: 140%;
}
.error-box p {
    margin: 2em 0;
}
.error-box h2 {
    font-weight: 400;
    font-weight: regular;
    text-align: center;
    font-size: 2em;
    margin: 2em 0 2em 0;
    color: var(--accent-color-dark);
    font-family: "steps-mono-mono";
}
@media screen and (max-width: 110em) {
    .error-box {
        width: 66%;
    }
}
@media screen and (max-width: 64em) {
    .error-box {
        width: 96%;
    }
}


@media screen and (max-width: 64em) {
    .content {
        padding: 0em 1em 3em 1em;
    }

    .flex-page {
        width: 100%;
        flex-direction: column;
    }
    .flex-page .left-menu {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .flex-page .left-menu ul {
        padding: 1em 0.5em;
    }

    .install-guides {
        padding-left: 0;
    }
    .install-guides li {
        display: block;
        padding: 0.25em 1.5em;
        width: auto;
        text-align: left;
    }
    .install-guides li a {
        line-height: 1em;
    }
    .install-guides li i {
        display: inline-block;
        font-size: 1.4em;
        width: 1.5em;
    }
}