ccvpn/static/css/style.css

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

html, body {
    height: 100%;
}

body {
    margin: 0 auto;
    background: #eee;
    display: flex;
    flex-direction: column;
}

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

a{
    color: #0b2d4f;
}

em {
    font-style: normal;
    font-weight: bold;
}

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 #1c619a;
}

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

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

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


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

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

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

    color: #fff;
    background: #1c619a;
}
.button.thin {
    color: #005188;
    background: transparent;
    border: 1px solid #1c619a;
    padding: 0.15em 0.50em;
    border-radius: 9px;
    font-size: 0.85em;
}
.button:hover {
    color: #fff;
    background: #005188;
}
.button.thin:hover {
    color: #fff;
    background: #1c619a;
}


/***************************************************/
/********************* Header                      */

header{
    color: #1c619a;
    padding: 2em 8em;
}
header .inner {
    display: flex;
    flex-wrap: wrap;
}

header .statusbar {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5em;
}

header #logo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 75px;
    padding: 0 0 0 75px;
    background: url(../img/bg-logo.svg) no-repeat;
    background-size: 75px;
    background-position: left center;
}
/* ok but what about the second reset */
header #logo > * { margin: 0; padding: 0; } 
/* i dont think he knows about the second reset */
header #logo h1, header #logo h2 {
    font-size: 100%;
    line-height: 0.83;
}
header #logo h1 a{
    margin: 0px;
    font-size: 62px;
}
header #logo h2 a{
    display: block;
    font-size: 25px;
    letter-spacing: 0.230em;
    font-family: 'Poiret One';
    font-weight: 400;
}
header #logo h1 a, header #logo h2 a {
    color: #1c619a;
    text-decoration: none;
}

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 .lang-menu {

}
header .lang-menu,
header .lang-menu a {
    color: #1c619a;
}

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 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:first-child{
    margin-left: 0;
}
header .site-menu li:last-child{
    margin-right: 0;
}
header .site-menu li.selected{
    border-bottom: 2px solid #ddd;
}
header .site-menu li:hover{
    border-bottom: 2px solid #1c80d4;
}
header .site-menu a{
    color: #1c619a;
    text-decoration: none;
}

@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;
    }
}

/***************************************************/
/********************* Common layout               */

.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 .title a {
    color: white;
    font-weight: 600;
}
.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;
}

.left-menu + .content{
    margin-left: 200px;
}


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

.content h1 {
    font-size: 2em;
    color: #1c619a;
    text-align: center;
}

.content h2 {
    font-weight: 400;
    text-align: center;
    font-family: 'Arvo', serif;
    font-size: 1.6em;
    margin: 1em;
}

.content h3 {
    font-weight: 400;
    text-align: left;
    font-size: 1.2em;
    margin: 1em;
}

.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-box {
    margin: 1em;
    border: 1px solid #bbb;
    padding: 1em 2em;
    background: #fff;
    overflow: auto;
    flex-grow: 2;

-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;
    color: #1c619a;
}
.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 hr {
    height: 0;
    border: 0;
    border-top: 1px solid #ccc;
    padding: 0;
    margin: 1.5em 0;
}

.content-box a {
    color: #1c619a;
}


/*.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;
}


footer{
    clear: both;
    display: flex;
    justify-content: center;
    background: #002D5F;
    margin-top: 6em;
    padding-bottom: 2em;
    font-size: 0.9em;
    flex-wrap:wrap;
    line-height: 120%;
}
footer, footer a {
    color: #ccc;
}
footer .footer-column {
    text-align: left;
    list-style-type:none;
    padding-left: 0;
    margin: 2em;
}
footer > ul > li {
    margin: 0.1em 0;
}

footer .language-selector ul {
    list-style: none;
    padding-left: 1.5em;
}

.vpn-status-box {
    border: 1px dotted white;
    padding: 0.25em 0.25em;
    margin: 0.5em 0;
    border-radius: 2px;
}


.message p {
    text-align: center;
    width: 100%;
    padding: 1.2em;
    margin: 0;
    color: white;
}
.message.motd p {
    color: black;
}
.message p.info, .message p.success {
    background-color: #2EA658;
}
.message p.error, .message p.critical, .message .warning {
    background-color: #A7332F;
}


table.admin-list {
    width: 100%;
}
table.admin-list thead td {
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    border: 1px solid #bbb;
    border-top: 0;
}
table.admin-list thead tr td:first-child { border-left: 0; }
table.admin-list thead tr td:last-child { border-right: 0; }
table.admin-list tbody tr td:first-child { font-size: 1.1em; border-left: 0; }
table.admin-list tbody tr td { padding: 6px; border: 1px solid #bbb; }
table.admin-list tbody tr td:first-child { border-left: 0; }
table.admin-list tbody tr td:last-child { border-right: 0; }
table.admin-list tbody tr:last-child td { border-bottom: 0; }
table.admin-list tbody tr:nth-child(even) { background: #eee; }

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


/***************************************************/
/********************* Account Pages               */

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



/***************************************************/
/********************* Forms / Buttons             */

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

.pure-button-primary, .pure-button-selected,
a.pure-button-primary, a.pure-button-selected {
    color: #fff;
    background-color: #1c619a;
    padding: 0.5em 2em;
}

.button-danger {
    background-color: #A7332F;
}
.button-danger:hover {
    background-color: #972925;

}

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: #606060;
    font-size: 0.8em;
}

.formpage > div {
    margin: auto;
}

ul.errorlist {
    list-style-type: none;
    color: #b00000;
}

.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%;
}


/***************************************************/
/********************* 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 #ccc;
    border-radius: 5px;
    margin: 0.5em 0.50em;
}
.install-guides li a {
    line-height: 2.2em;
    text-decoration: none;
    display: block;
}
.install-guides li i {
    display: block;
    color: #0b2d4f;
}

.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;
}


/***************************************************/
/********************* 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: #000;
    letter-spacing: 0.045em;
    text-shadow: 0px 0px 4px #4D2F0050;
}


.homepage .title {
    color: #1c619a
}
.homepage .title h3 {
    width: 50%;
    margin: auto;
    border-bottom: 3px solid #1c619a;
    border-radius: 5px;
}

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

.homepage .features {
    margin: 2.25em 0;
}

.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 {
    margin: 0.75em;
}

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

#map {
    display: block;
    width: 100%;
    margin: auto;
}

@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;
}

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





/***************************************************/
/********************* 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 #ddd;
}
.account-status table td {
    padding: 0.5em 1em;
}
.account-status table td:first-child {
    border-right: 1px solid #ddd;
    text-align: right;
}

.account-aff-box {
    background: #f8F8FF;
    border: 3px solid #1c619a;
    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: #E6F5FF;
    border-radius: 4px;
    border: 1px solid #A8B3BA;
    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 #ccc;
    background: #eee;
}
.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: #fff;
    font-weight: bold;
}
.account-payment-tab [id^="tab"]:checked + label {
    background: #fff;
}
.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: #666;
}

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



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


/***************************************************/
/********************* Gateways                    */

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 #bbb;
    border-top: 0;
    background: #ddd;
    font-weight: bold;
}
.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 #bbb;
}
.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: #eee;
}
.flat-table .host_name {
    font-family: monospace;
}
.flat-table td {
    white-space: nowrap;
}
.flat-table .right {
    text-align: right;
}

.bandwidth {
    display: block;
    position: relative;
    width: 100%;
    border: 1px solid #666;
    background: #eee;
    text-align: center;
}
.bandwidth .inner {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: #BCC8D1;
    z-index: 100;
}
.bandwidth .inner.high {
    background-color: #D1B2B2;
}
.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: #88171a;
}
.no-ipv6 {
    color: #555;
}



/***************************************************/
/********************* 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: #ddd;
    padding: 5px 3px 0 3px;
}

.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;
}




/***************************************************/
/********************* Tickets                     */

div.ticket-messages {
    margin: 2em 2em;
    border: 1px solid #c7c7c7;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div.ticket-message {
    background: #f4f4f4;
    border-bottom: 1px solid #c7c7c7;
    padding: 0.25em 1em 1em 1em;
}
div.ticket-message:last-child {
    border-bottom: 0;
}

div.ticket-message-user {
    background: #e8e8e8;
}
div.ticket-message-private {
    background: #f8e7e7;
}

.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 #c7c7c7;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-decoration: none;
}


/***************************************************/
/********************* Payments                    */

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


/***************************************************/
/********************* Dark mode overrides         */
@media (prefers-color-scheme: dark) {
    body {
        background: #333;
        color: #eee;
    }
    header #logo {
        filter: brightness(1.9);
        /* #35b8ff */
    }
    .icon-wireguard {
        filter: brightness(7) saturate(0);
    }
    a,
    .content-box a,
    .homepage .title,
    header .site-menu a {
        color: #35b8ff;
    }
    a.pure-button { /* the previous rule makes buttons ugly */
        color: #fff;
    }
    .install-guides li a, 
    .install-guides li a i {
        color: #E1F1FA;
    }
    .left-menu a { color: #E1F1FA; }
    .homepage h2, .content h2 {
        color: #eee;
    }

    .homepage h2 {
        text-shadow: 0px 0px 5px #ffd99f50;
    }

    .content-box {
        background: #272727;
        border-color: #777;
    }

    .flat-table thead td {
        border-color: #777;
        background: #222;
        color: #ccc;
    }
    .flat-table tbody tr:nth-child(2n) {
        background: #2d2d2d;
    }
    .flat-table tbody tr td {
        border-color: #777;
    }

    .bandwidth {
        background: #222;
    }
    .bandwidth .inner {
        background: #1c619a;
    }

    .no-p2p { color: #ca8c8d; }
    .no-ipv6 { color: #959595; }

    .account-status table td:first-child,
    .account-status table tr:not(:first-child) {
        border-color: #777;
    }

    .account-payment-tab [id^="tab"]:checked + label,
    .account-payment-tab [id^="tab"]:checked + label span {
        background: #222;
    }
    .account-payment-tab > label {
        background: #393939;
        border-color: #777;
    }
    .account-payment-tab .tab-content p {
        color: #bbb;
    }
    .account-aff-box {
        background: #22222b;
    }
    .wireguard-key {
        background: #334;
        padding: 0.25em 0.75em 0.20em;
        color: #fff;
    }

    div.ticket-message-user {
        background: #222;
    }
    div.ticket-message-staff {
        background: #222238;
    }
    div.ticket-message-private {
        background: #302222;
    }

    #map svg {
        fill: #999;
    }
    #map .signalcircle {
        fill: #1c619a;
    }

    .button.thin {
        border: 1px solid #35b8ff;
        color: #35b8ff;
    }
    .button.thin:hover {
        background: #35b8ff;
        color: #000;
    }

    a.button {
        color: #fff;
    }
    .button.inverted  {
    }
    .button, .button.inverted:hover {
    }

    .pure-form input[type="text"], .pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form select, .pure-form textarea,
    input[type="text"], input[type="submit"]:not(.pure-form *) {
        background: #222;
        border-color: #888;
        box-shadow: inset 0 1px 3px #000;
    }

    footer {
        background-color: #00234A;
    }
}


/***************************************************/
/********************* Live chat                   */

#livechat-info {
    border-bottom: 1px solid black;
    text-align: center;
}

.livechat-thing {
    position: fixed;
    bottom: 0;
    right: 0;
}
.livechat-thing .icon{
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background: url(../img/chat.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.4em;
    margin-bottom: -0.4em;
}
.livechat-thing a {
    display: block;
    padding: 0.6em 0.9em;
    background-color: #1c619a;
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    border-left: 1px solid #1c619a;

    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
}
#livechat-iframe {
    border: 0;
    width: 100%;
    height: 80%;
}


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


/***************************************************/
/********************* Fonts                       */

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open_sans-0.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open_sans-1.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open_sans-2.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open_sans-3.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open_sans-4.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open_sans-5.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open_sans-6.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open_sans-7.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open_sans-8.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open_sans-9.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open_sans-10.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open_sans-11.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open_sans-12.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open_sans-13.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/arvo-0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/arvo-1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poiret_one-0.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poiret_one-1.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poiret_one-2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/***************************************************/
/********************* Icons                       */

.icon {
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.icon-wireguard { background-image: url(../img/icon-wireguard.png); }

.icon-wireguard {
    /* fix for wireguard at least */
    height: 0.9em;
    position: relative;
    bottom: -1px;
}
.icon-wireguard.large {
    height: 3em;
    color: #88171a;
}

.fa.external-link {
    font-size: 0.7em;
    position: relative;
    top: -1px;
}

@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;
    }
}