body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1f0a0e;
    color: #d37343;
    font-family: monospace;
    margin: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
}
a, a:valid, a:focus, a:hover {
    color: #ed9c87;
}
.container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin: 4em;
}
.main-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.items, .image {
    max-width: 500px;
    width: 500px;
}
.preloader {
    overflow: visible;
    height: 0px;
    opacity: 0;
}
img.preload_img {
    height: 16px;
}
.text {
    text-align: center;
}
img, .unselectable {
    pointer-events: none
}
.selectable {
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-user-drag: auto;
    user-drag: auto;
    -webkit-touch-callout: default;
    pointer-events: visible;
}
.image {
    overflow: visible;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: 1024px;
    z-index: -1;
}
.image img {
    height: 1024px;
    position: absolute;
}
.items {
    /*background: linear-gradient(270deg, transparent, #1f0a0eff 20%, #1f0a0eb0 80%, transparent);*/
    margin: 2em 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.allnet-color-0 {
    color: #16a73c;
}
.allnet-color-1 {
    color: #e63013;
}
.allnet-color-c {
    color: #ffff;
}
.panel {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 325px;
    margin: 1em 0;
    border: solid 1px #5b3540;
    padding: 1em;
    background: #2b171e;
}
.ip-header {
    font-size: 13pt;
    margin: 0.5em;
}
.buttons {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: inherit;
    padding: 0.5rem;
    gap: 0.5rem;
}
.button {
    background: #730a0e;
    color: #fce0cc;
    border: solid #b80716 1px;
    /*margin: 0 0.5rem;*/
    font-size: 12pt;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    cursor: default;
    text-decoration: none;
    min-height: 27px;
    min-width: 27px;
}
.button > span, .button > div {
    padding: 0.25rem 0.75rem;
}
.button > div {
    gap: 0.75rem;
}
.button > div.imgbutton {
    padding: 0rem 0.75rem;
}
.button img {
    height: 1.25rem;
}
.button.connect {

}
.button.disconnect {
    color: white;
    background: #389d25;
    border-color: white;
}
/*.button.connect span, .button.disconnect span {
    padding: 0.25rem  1rem 0.25rem 0.5em;
}*/
.button-icon {
    height: 24px;
}
.res {
    font-size: 10pt;
    text-align: left;
    color: red;
}
.res.good {
    color: #73e873;
}
input#keychip {
    font-size: 16pt;
    width: 218px;
    font-family: monospace;
    background: #280d0d;
    border: none;
    border-bottom: solid #9c061b 2px;
    padding: 0.3em;
    color: #c67544;
}
.hidden {
    display: none;
}
.footer {
    border-top: #bf6a54 dashed 1px;
    padding-top: 1em;
    max-width: 900px;
    text-align: center;
    font-size: 8pt;
}
.footer, .footer_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0.5em 0;
}
.footer_logos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
    margin-top: 1em;
}
.footer_header {
    font-size: 10pt;
}
.footer_logo {
    height: 40px;
    padding: 0 0.5em;
}
.critical_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2em;
    color: #ffdb49;
    font-weight: bold;
    font-size: 7pt;
}
#responseText {
    display: none;
}
#responseText.show {
    display: block;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    border: 1px solid #b80716;
    background-color: #000000;
    color: #ffe1dd;
    font-size: 10pt;
    z-index: 1;
    left: 0;
    max-height: 250px;
    overflow: hidden;
    overflow-y: auto;
    padding: 1em;
}
.dropdown-content label {
    display: block;
    padding: 2px;
    cursor: pointer;
    font-weight: 500;
}
.dropdown.show .dropdown-content {
    display: block;
}
.dropdown-content.rules {
    width: 400px;
    max-height: 450px;
}
input:focus {
    outline: none;
}
.text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.server-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.text-header {
    font-size: 12pt;
    font-weight: bold;
    padding-bottom: 0.25rem;
    gap: 5px;
    display: flex;
}
.text-header.slim {
    padding-bottom: 0.125rem;;
}
.server-icon-group {
    background-color: #33141b;
    margin-right: 1em;
}
.server-icon {
    height: 64px;
}
.server-addresses {
    display: flex;
    justify-content: center;
}
.server-addresses span.badge,
h1 span.badge,
h2 span.badge,
h4 span.badge,
h3 span.badge {
    margin-left: 0.5em;
}
span.badge.badge-good {
    background: #00ff59;
    margin-left: 0.5em;
    color: black;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25em;
}
span.network-status {
    font-size: 16pt;
}
div.code-block {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
pre.code-block {
    margin: 1.5em 0 0;
    text-align: left;
    width: 90%;
    background: black;
    padding: 0.5em;
    border: solid 1px #d3734387;
    border-radius: 5px;
    color: #e8b094;
    white-space: pre-wrap;
}
.warning-text {
    color: #fff568;
    border: solid 1px yellow;
    background: #b87d0036;
}
.warning-text > div{
    margin-top: 10px;
}
.text-value {
    display: flex;
    flex-direction: column;
}
.text-value code {
    color: #ed9c87;;
    font-size: 14pt;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #750d22;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #750d22;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #750d22;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #750d22;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color:   #750d22;
}
::placeholder { /* Most modern browsers support this now. */
    color: #750d22;
}
pre#response-short {
    margin: 0;
    white-space: normal;
}
.res-short {
    margin-top: 1em;
    width: inherit;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}
span.badge {
    background: #eb9b87;
    margin-left: 0.5em;
    color: black;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25em;
}
.comment-bubble {
    text-align: right;
    z-index: 3;
    position: absolute;
    top: 124px;
    left: -17px;
    width: 230px;
    border-right: dashed 1px #d07778;
    padding: 5px;
    font-size: 8pt;
    background: #36212a;
}
.header_bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    background: #730a0e;
}
.header_contenets {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    padding: 1em 0;
    gap: 1em;
    align-items: center;
}
.header_bar img.logo {
    height: 34px;
    padding-left: 0.75em;
}
.header_bar .logo_text {
    font-size: 18pt;
    font-weight: 200;
    color: #ffffff;
    flex-grow: 1;
}
.header_bar .contents {
    padding-right: 0.75em;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.header_bar .button {
    background: #a4001f;
    border-color: #ec002d;
}
.header_bar .dropdown.show .dropdown-content {
    left: unset;
    right: 0;
    background-color: #4c0003;
}
.dropdown-content.menu {
    width: 400px;
    max-height: unset;
}
.server-url {
    color: #ed9c87;
    font-size: 14pt;
    text-decoration: none;
}
.server-url:hover,
.server-url:active {
    color: #ffe8e3;
    font-size: 14pt;
    text-decoration: none;
}
.infoblock {
    border: 1px dotted;
    padding: 0.5rem 1rem;
    text-align: left;
    background: #00000091;
}
.infoblock ul {
    padding-inline-start: 1.5rem;
}
.status_holder {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px
}
.status_box, .status_holder .text {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 12pt;
    width: 230px;
}
.status_holder .text, .status_box.group {
    justify-content: center;
}
.status-element {
    margin-bottom: 10px;
}
.status-lamp {
    height: 16px;
    min-width: 32px;
    padding: 0.25em 0.5em;
    background: yellow;
    margin-right: 6px;
    border-radius: 5px;
    color: black;
    font-size: 10pt;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-lamp.green {
    background: #34ff68;
}
.status-lamp.red {
    background: #cc1900;
}
.fairy-light {
    display: block;
    position: fixed;
    z-index: 1000;
    width: 100vw;
    height: 128px;
    top: 0;
    background: url(/img/lights_black.png) repeat-x fixed top;
    background-size: 275px;
}
.rules.frame {
    padding: 0;
}
.rules.frame iframe {
    border: none;
    width: 400px;
    height: 450px;
}