/* mode: rainbow; */

@font-face {
    font-family: 'Mona Sans';
    src:
        url('/util/css/fonts/Mona-Sans.woff2') format('woff2 supports variations'),
        url('/util/css/fonts/Mona-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

body {
    font-family: 'Mona Sans', system-ui;
    max-width: 1400px;
}

i {
    font-family: system-ui;
}

.Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    /* background-color: #013; */
    /* background-color: #026; */
    background-color: #fff;
    color: #eee;
}
.Site.dark-mode {
    background-color: #000;
    color: #eee;
}
.Site-content {
    flex: 1;
    font-size: 14px;
}

.Header {
    /* border-bottom: 1px solid #dee2e6; */
    /* padding-top: 16px; */
}

.Flash {
    /* font-family: monospace; */
    margin-left: auto;
    margin-right: auto;
    font-size: 0.8em;
    height: 2em;
}

.Header .nav-link.disabled {
    /* color: #fff; */
}

.Footer {
    /* border-bottom: 1px solid #dee2e6; */
    /* padding-top: 16px; */
}
.Footer .credits {
    text-align: center;
    font-family: monospace;
    font-size: 10px;
}
.Footer .footer-front {
    font-size: 14px;
}
.Footer .footer-env {
    font-family: monospace;
    font-size: 12px;
}
.Footer .credits a {
    text-decoration: none;
    /* color: #fff; */
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* @media (min-width: 576px) { */
/*     .container, .container-sm { */
/*         max-width: 540px; */
/*     }} */
/* @media (min-width: 768px) { */
/*     .container, .container-md, .container-sm { */
/*         max-width: 720px; */
/*     }} */
/* @media (min-width: 992px) { */
/*     .container, .container-lg, .container-md, .container-sm { */
/*         max-width: 960px; */
/*     }} */
/* @media (min-width: 1200px) { */
/*     .container, .container-lg, .container-md, .container-sm, .container-xl { */
/*         max-width: 1140px; */
/*     }} */
/* @media (min-width: 1600px) { */
/*     .container, .container-lg, .container-md, .container-sm, .container-xl { */
/*         max-width: 1400px; */
/*     }} */

.button_to,
.button_to div {
    display: inline;
}

.navbar-brand {
    font-weight: 400;
    font-stretch: 75%;
    font-variation-settings: "ital" 0, "wdth" 80;
    font-size: 2.4em!important;
}
a.navbar-brand, a.navbar-brand:visited, a.navbar-brand:active, a.navbar-brand:hover {
  /* color: #fff; */
}
.nav-link {
    font-weight: 400;
    font-stretch: 75%;
    font-variation-settings: "ital" 0, "wdth" 75;
    font-size: 1.5em!important;
}
#navbarCollapse button, #navbarCollapse a.btn {
    /* font-weight: 400; */
    /* font-stretch: 75%; */
    font-variation-settings: "ital" 0, "wdth" 75;
    font-size: 1.5em!important;
    display: block;
    padding: 0 0.5rem;
    margin-bottom: 1px;
    white-space:nowrap;
    max-width: max-content;
}

h2, h3, h5, .section-title, .nav-title, .service-label {
    font-weight: 400;
    font-stretch: 75%;
    /* font-variation-settings: "ital" 10, "wdth" 75; */
    /* font-size: 1.5em!important; */
    margin-top: auto;
    margin-bottom: auto;
}
h2 {
    font-size: 2.5em;
}
h3, .service-label {
    font-size: 2em;
}

.section-title {
    font-size: 1.8em;
}
a.navbar-brand, a.navbar-brand:visited {
    /* color: #fff; */
}

a.nav-link, a.nav-link:visited {
    /* color: #fff; */
}

a.nav-link:hover {

    /* color: #fff; */
}

#connection-status {
    font-size: 14px;
}

#connection-status a, #connection-status a:hover {
    /* color: #fff; */
    text-decoration: none;
}

/* #connection-status { */
/*     font-size: 14px; */
/* } */
#connection-status i {
    margin-right: 4px;
    margin-left: 4px;
}

#admin-index, #admin-nodes, #admin-regions, #admin-facilities, #admin-tunnels, #admin-vouchers {
    font-family: monospace;
    font-size: 12px;
}

.admin__login_form_container,
.account__login_form_container,
.account__voucher_form_container {
    max-width: 400px;
}

.admin__login_form input[type=password]:not(:placeholder-shown) {
    font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 2em;
}
.account__login_form input[type=password]:not(:placeholder-shown) {
    font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 2em;
}
.account__voucher_form input[type=password]:not(:placeholder-shown) {
    font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 2em;
}
#account__voucher button,
#account__login button {
    font-variation-settings: "ital" 0, "wdth" 75;
    font-size: 1.5em;
    display: block;
    padding: 0 0.5rem;
    margin-bottom: 1px;
    white-space:nowrap;
}

#account__voucher button.btn-primary,
#account__login button.btn-primary {
    font-size: 2em !important;
}


.account__port,
.account__cname {
    max-width: fit-content;
    min-width: 360px;
}

.debug pre {
    font-family: monospace;
    /* color: #fff; */
}

#account-info {
}

#account-info .list-group-item {
    background-color: transparent;

}

#account-info div {
    /* margin-bottom: 1em; */
    /* font-weight: bold; */
}

#account-menu {
    margin-top: 2em;
}

#account-menu ul {
    list-style: none;
    padding-left: 1em;
}

#account-menu li {
    line-height: 2em;
}

#account-menu a, #account-menu a:hover {
    /* color: #fff; */
    text-decoration: none;
}

#account-sidebar {
}

#account-sidebar a:hover {
    text-decoration: underline;
}

#account-sidebar p {
    text-transform: uppercase;
}

.account-menu  {
    margin-bottom: -1px;
}

#account-add-time .account-redeem-voucher a i {
    /* font-size: 2em; */
}

.button-title {
    font-weight: 400;
    font-stretch: 75%;
    /* margin-top: -0.5rem; */
}

#account-devices, #account-ports, #account-cnames {
    font-family: monospace;
}

#account-devices form {
    display: inline;
}


#forward-form select,
#cname-form select {
    margin-bottom: 1em;
}

#account-devices .device-detail .device-allocated-address {
    font-size: 12px;
}

#account-devices .device-detail .device-port {
    font-size: 12px;
}

.account-proxy-service,
.account-port-service,
.account-cname-service {
    font-family: monospace;
    font-size: 12px;
    max-width: fit-content;
    white-space: nowrap;
}

.account-proxy-hint {
    font-family: monospace;
    font-size: 10px;
    white-space: nowrap;
}

#account-ports .port-name {
    font-size: 12px;
}
#account-ports button.forward-delete {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .3rem;
    margin-right: -.3rem;
    /* --bs-btn-font-size: .45rem; */
}

#account-ports .forward-delete i {
    font-size: 16px;
    /* color: #dc3545; */
    /* font-weight: 400; */
}

.count-info {
    margin-left: 5px;
    /* font-size: 14px; */
    color: #ccc;
    font-size: 0.9em;
    /* font-family: monospace; */
}

/* #account-devices .device-public-key { */
/*   width: 100%; */
/*   text-overflow: ellipsis; */
/*   white-space: nowrap; */
/*   overflow: hidden; */
/* } */

.navbar-brand .site-name-rand {
    /* font-family: 'Space Mono', monospace; */
    font-family: menlo, monospace;
    font-size: 1rem;
    color: green;
}

.title-row a.back-link {
    margin-right: 1em;
    vertical-align: 4px;
}

.account-info-card {
    max-width: 400px;
}

#identity {
    color: #fff;
    font-family: monospace;
    font-weight: bold;
}

.account .identity .card {
    font-family: monospace;
    min-height: 200px;
    background-image: url('/util/img/goat.svg');
    background-repeat: no-repeat;
    background-position: center -15px;
}

.account .identity .card .card-body {
    padding-top: 8em;
}

.account .identity .card .card-identity {
    font-size: 1.2em;

}
.account .identity .card .card-text {
}

#connect-steps h3 {
    font-size: 24px;
    min-width: 30px;
}
#connect-steps .install-imgs img {
    max-width: 300px;
}

#connect-steps .wireguard a, #connect-steps .wireguard a:hover {
    color: #fff;
    /* text-decoration: none; */
}

#connect-steps .connect-step {
    font-size: 1.5rem;
    font-weight: 400;
    font-stretch: 75%;
}

#connect-steps .connect-step::before {
  content: "#";
  color: #ccc;
  font-size: 0.9em;
}
.account h3, .account h4, .account h5 {
    display: inline;
}

.vpn-emblem {
    padding-left:0;
}
.vpn-emblem .btn {
    padding: 0px 6px;
    color: #fff !important;
    border-color: #fff !important;
}

img.wireguard-emblem {
    min-width: 16px;
    /* filter: invert(100%); */
}
body.dark-mode img.wireguard-emblem {
    filter: invert(0%);
}

.download-buttons .btn {
    text-align: left;
    min-width: 150px;
}
.download-buttons .btn img {
    max-width: 1.2em;;
    margin-right: 4px;
    color: #fff;
}
.download-buttons .btn span {
    /* vertical-align: bottom; */
    /* margin-top: auto; */
    /* margin-bottom: auto; */
    /* font-weight: 400; */
    /* font-stretch: 75%; */
    font-variation-settings: 'wght' 400, "wdth" 75;
    margin-left: 0.3em;
}

.download-buttons i {
    font-size: 1.5em;
}

.pull-right {
    text-align: right;
}

.pull-left {
    text-align: left;
}

.node-select select,
.node-select option {
    font-size: 12px;
}
.form-wide {
    width: 100%;
    padding: 15px;
    margin: auto;
}

.form-login {
    max-width: 330px;
}

.form-wide .checkbox {
    font-weight: 400;
}

.form-wide label {
    color: #000;
}

.form-wide .form-floating:focus-within {
    z-index: 2;
}

.form-wide input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}


.form-wide input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-wide input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-client input {
    font-family: monospace;
}

.client-list {
    font-family: monospace;
}

.client-list .card-detail i {
    vertical-align: -6px;
}

.client-list .card-detail span {
    vertical-align: -12px;
}

.client-list .card-detail pre {
    font-size: 0.6em;
}


.profile-denylist svg, .profile-allowlist svg, .profile-logs svg {
    max-width: 16px;
    margin-right: 1em;
}

.infoBadge {
display: inline-block;
position: relative;
top: -0.3em;
border-style: solid;
border-width: 1px;
background-color: transparent;
font-size: 0.8em;
font-family: monospace;
/* font-size: 10px; */
font-weight: 800;
padding: 0.3em 0.6em 0.3em;
text-transform: uppercase;
letter-spacing: .0714285714em;
border-radius: .2142857143rem;
line-height: 1;
white-space: nowrap;
border-color: rgba(0,0,0,0.5);
color: #000;
}

.infoBadge--info {
border-color: rgba(255,255,255,0.5);
color: #ccc;
}
.infoBadge--notice {
border-color: rgba(255,255,255,0.5);
color: #ccc;
}
.infoBadge--success {
border-color: rgba(0,255,128,0.5);
color: #0f8;
}

.infoBadge--safedns {
border-color: rgba(0,255,128,0.5);
color: #0f8;
}

.infoBadge--safedns--disabled {
border-color: #dc3545 !important;
color: #dc3545 !important;
}


.infoBadge--device,
.infoBadge--tunnel {
border-color: rgba(0,255,128,0.5);
color: #0f8;
}
.infoBadge--device--config,
.infoBadge--device--unconfigured {
    border-color: #fd7e14;
    color: #fd7e14;
}

.infoBadge--device--offline,
.infoBadge--tunnel--offline {
    border-color: #dc3545;
    color: #dc3545;
}

.infoBadge--device--handshake {
    text-transform: lowercase;
    margin-right: -4px;
}

.infoBadge--proxy {
border-color: rgba(255,255,255,0.5);
color: #fff;
}

.infoBadge--port {
    border-color: #0dcaf0;
    color: #0dcaf0;
}
.infoBadge--port--invalid {
border-color: #dc3545 !important;
color: #dc3545 !important;
}

.infoBadge--cname {
    border-color: #20c997;
    color: #20c997;
}

.infoBadge--noMove {
top: 0;
}

.infoBadge__suffix {
margin-top: -2px;
margin-bottom: -2px;
margin-left: 5px;
padding: 2px 0 2px 6px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: inherit;
}

.inlineBlock {
    display: inline-block !important;
}