/*
 * Main colors:
 * dark yellow - #373702: use var(--dark-border)
 * magenta - #F952F9 use var(--local-border)
 * light blue - #00FAFA: use var(--text-color)
 * green - #00FA00: use var(--inidcator-color)
 * background - #271D30
 */
:root {
    --indicator-color: #00FA00;
    --local-border: #F952F9;
    --text-color: #01FAFA;
    --remote-border: #F4DB53;
    --warning: #F4DB53;
    --error: #F54545;
    --background: #271D30;
    --text-background: #11051E;
    --text-offline: #004444;
    --pane-background: black;
    --dark-border: #373702;
    --help-bubble-bg-color: rgba(55, 55, 2, .7);
}
@font-face {
    font-family: "FiraSans";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/FiraSansCondensed-Regular-pxf0SsNF.ttf") format("truetype");
}
@font-face {
    font-family: "FiraCode";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/FiraCode-VF-DQ19jJtZ.ttf") format("truetype");
}
html,
body {
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'FiraSans';
  color: #00FAFA;
  background-color: var(--background);
  overflow: auto;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--local-border) var(--background);
}
* {
    box-sizing: border-box; 
}
*:focus { outline: none; } 

.modal h1, .modal h2, .modal h3 {
  text-align: center;
}
.modal h1 {
    font-size: 22pt;
    /* margin: 0; */
}
h2 { margin: 0.3em;}
h3 { margin: 0.2em; color: var(--local-border); }

#terminal7 {
    height: 100%; 
	overflow-x: auto;
}
#terminal7 *, #navbar * {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}
button {
    border: 0;
    padding:0;
    background-color: var(--background);
    color: #00fafa;
    /*
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 3vh;
  font-weight: bold;
  font-family: Courier new;
  */
}
.text-button, #gates button {
    display: flex;
    cursor: pointer;
    margin: 0 0.3em 0.3em 0;
    border-color: var(--local-border);
    border-radius: 0.15em;
    font-weight: 300;
    font-size: 20px;
    justify-content: center;
    align-items: center;
} 
dd { display: visible; }
.border, .text-button {
    border-width: 3px;
    border-style: outset;
    border-radius: 6px;
}
footer { padding-top: 1em; }
p a, footer a {
    text-decoration: underline;
}
a {
    text-decoration: none;
    color: #00FAFA;
}
.modal {
    z-index: 5;
    background-color: var(--background);
    padding: 2%;
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40em;
    max-width: 80%;
    border-color: var(--local-border);
}
.modal p, .modal td {
    font-size: 16pt;
}
.modal h2 { 
    margin-top: 0; 
    margin-bottom: 1em;
}
.modal nav { 
    clear: both;
    width: 100%; 
    margin: 1.5em auto 0;
    padding-top: 2%;
}
.keys-help.modal {
    bottom: 180px;
}
.keys-help>div {
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: no-wrap;
    gap: 0.5em;
}
.keys-help table {
    flex: 1;
    border-collapse: collapse;
    margin-right: 1em;
}
.keys-help tr {
    border-bottom: 1px solid var(--dark-border);
}
.keys-help tr:last-child {
    border-bottom: none;
}
.gates-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.native .gate {
    bottom: 73px;
}
.gate {
    width: 100%;
    position: absolute;
    bottom: 51px;
    top: 0px;
    left: 0;
    z-index: 2;
}
.native .gates-container {
    top: 22px;
}
.window {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.pane {
    position: absolute;
    padding: 4px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
    box-sizing: border-box;
    background-color: var(--pane-background);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    text-align: left;
}
.layout {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
}

.full {
    top:0;
    left:0;
    height: 78%;
}
.fas {
    line-height: 5.5vh !important;
}
#navbar {
    bottom: 0;
    left: 0;
    padding: 9px 0 18px;
    position: fixed;
}
nav button {
    flex: 1;
    cursor: pointer;
    border-right: 2px solid var(--dark-border);
    font-size: 20px;
}
.has-help {
    position: relative;
}
.help-bubble-text {
    font-size: 1rem;
    font-family: 'FiraSans', serif;
    background-color: var(--help-bubble-bg-color);
    color: var(--text-color);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 5;
    width: 120px;
    bottom: 80px;
    left: 50%;
    margin-left: -60px;
}
.help-bubble-text::after {
    content: " ";
    position: absolute;
    bottom: -60px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    transform: scale(1,5);
    border-style: solid;
    border-color: var(--help-bubble-bg-color) transparent transparent transparent;
}
nav:not(.navtext) button:last-child {
    border: none;
}
nav {
    display: flex;
    align-content: stretch;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
    background-color: var(--background);
}
.tabbar button {
    flex: 1 0 10%;
    border: none;
    position: relative;
}
.tabbar nav {
    flex: 10 1 80%;
    display: flex;
    align-content: stretch;
    border: 1px solid var(--local-border);
    background-color: var(--pane-background);
    border-radius: 0 0 12px 12px;
    min-height: min-content;
    overflow-x: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    flex-wrap: nowrap;
    position: relative;
    align-items: flex-end;
}
.home-topbar {
    align-content: space-between;
}
nav::-webkit-scrollbar {
    display: none; /*Safari and Chrome*/
}
.tabbar a {
    flex: 1 0 auto; 
    border-right: 1px solid var(--dark-border);
    text-align: center;
    font-size: 18px;
    line-height: 34px;
    text-decoration: none; 
    color: inherit;
    width: max-content;
}
.tabbar-names .on { color: var(--indicator-color) !important; }
#navbar .on { text-shadow: var(--remote-border) 1px 0 10px; }
.failed { color: var(--local-border) !important; }
.warn { color: #FAFA00 !important; }
.off { color: var(--dark-border); }
/* vertical align the nav bar buttons */
.tabbar {
    left: 0; 
    bottom: 2px;
    color: var(--dark-border);
    position: absolute;
}
.windows-container {
    bottom: 42px;
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
    z-index: 3;
    touch-action: none;
}
.oneline-box {
    color: var(--text-color);
    padding: 8px;
    position: fixed;
    z-index: 9;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    display: inline-block;
    background-color: var(--pane-background);
    width: 30em;
    max-width: 96%;
}
.oneline-box nav {
    display: flex;
    align-content: stretch;
    margin: 0;
    padding: 0;
    background-color: var(--pane-background);
}
.oneline-box button {
    padding: 0 0.5em;
    flex: 1 1 0;
    border: 0;
    background-color: var(--pane-background);

}
button.rename-close {
    border-right: 0;
}
.oneline-box input {
    padding: 0 0.5em;
    border: 0;
    font-size: 15px;
    flex: 10 1 auto;
    line-height: 26px;
    border: 0;
    box-sizing: border-box;
    color: var(--text-color);
    background-color: var(--text-background);
    border-radius: 5px;
    font-family: 'FiraSans';
}
.active {
    font-weight: bold;
}
.native .pane-container.zoomed {
    top: 22px;
    /* make space for system resizer */
    left: 14px;
    right: 14px;
}

.pane-container.zoomed {
    padding: 0;
    position: fixed;
    z-index: 4;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    /* height: max-content; */
}
.zoomed .pane {
    border-radius: 12px;
}
#map:target {
    display: block;
}
#map {
    position: relative;
    padding-top: 1em;
    width: 1200px;
    display: none;
    text-align: center;
    margin: 0 auto;
    height: calc(100% - 56px);
    overflow-y: auto;
    color: var(--text-color);
}
#version {
    position: absolute;
    top: 128px;
    left: 20px;
    padding: 10px;
    border: 1px dotted;
    border-radius: 4px;
    text-align: center;
    line-height: 12px;
}
#version a {
    text-decoration-style: dashed;
    text-decoration-line: underline;
	cursor: pointer;
}
#version ul {
    list-style: none;
    text-align: left;
    padding-left: 0;
}
#version li .status {
    float: right;
    padding-left: 0;
}
#version footer {
    font-size: 10px;
}
#gates {
    width: 100%;
    background: top repeat-y url("/map/middle.png");
}

#gates p {
    overflow: hidden;
}
#gates a {
    text-decoration: none;
}
#gates h3 {
    font-size: 36px;
    padding-bottom: 0;
    margin-bottom: 0;
}
#gates button {
    box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
    width: 100%;
}
#gates button:active {
    transform: scale(0.98);
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}
.modal form {
    text-align: left;
    align: left;
}
label {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}
.modal form input[type=text], .modal form input[type=password],
.modal form textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid var(--local-border);
  box-sizing: border-box;
  color: var(--text-color);
  background-color: var(--text-background);
  border-radius: 5px;
  font-size: 18px;
}
.hidden { visibility: hidden; }
.host {
    width: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: inherit;
}
#log-minimized {
    width: 1200px;
    cursor: pointer;
    position: relative;
    margin: 0 auto;
}
#twr {
    position: absolute;
    background-color: var(--pane-background);
    z-index: 5;
    left: 966px;
    top: 93px;
    margin: 0;
    padding: 0;
    width: 42px;
    height:42px;
    line-height: 42px;
    border: 1px solid var(--local-border);
    border-radius: 3px;
}
#log {
    background-color: var(--pane-background);
    position: fixed;
    margin: 2vmax;
    top: 50%;
    left: 50%;
    transform: translate(-54%, -60%);
    overflow: hidden;
    z-index: 5;
    opacity: 0.8;
    width: 540px;
    border: 4px outset var(--local-border);
    border-radius: 7px;
}
#log>div {
    padding: 0.4em;
    height: 100%;
    width: 100%;
}
@media (min-width: 600px) {
    #title-short {
        display: none;
    }
    #title-long {
        display: block;
    }
    #version {
        max-width: 35vw;
    }
}

.search-container {
    margin: 0 auto;
    width: 80%;
}
#indicators {
    position: absolute;
    top: 22px;
    right: 0px;
    line-height: 18pt;
    font-size: 18pt;
    margin: 6px;
    z-index: 10;
    opacity: 0.6;
}
#indicators i, #indicators p {
    cursor: pointer;
    border: 1px solid var(--dark-border);
    float: right;
    text-align: center;
    padding: 0.2em;
    color: var(--indicator-color); 
}
#indicators p {
    margin: 0;
}
#indicators .off {
    color: #003F00;
}
#help-copymode, #keys-help {
    width: 50em;
}

td {
    text-align: left;
    padding:0.5em 0;
}
.divider {
    position: absolute;
    z-index: 3;
}    
.divider * {
    pointer-events: none;
}
.top-divider { 
    transform: rotate(90deg);
    cursor: row-resize;
    padding: 20px 40px;
}
.left-divider {  
    cursor: col-resize; 
    padding: 40px 20px;
}

.offline {
    color: var(--text-offline);
}
.tabbar-names .on::before { content: "❲ "; color: var(--indicator-color);}
.tabbar-names .on::after { content: " ❳"; color: var(--indicator-color);}
#offline {
    bottom: unset;
    top: 50%;
    transform: translate(-50%, -50%)
}
#offline p {
    margin-top: 2em;
}
#help-home, #help-gate {
    opacity: 0.7;
    height: calc(100% - 300px);
    width: 94%;
    position: fixed;
    left: 3%;
    bottom: 224px;
    z-index: 5;
    background-color: black;
    border: 1px solid var(--local-border);
    border-radius: 50px;
}
#help-gate img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.compact-fields {
    max-width: 20em;
    margin-right: auto;
    margin-left: auto;
}

.modal ul {
    width: fit-content;
    list-style: tibetan;
    margin: 0 auto;
}
.modal li {
    font-size:20px;
    text-align: left;
    line-height: 30px;
    padding-bottom: 0.5em;
}
#peerbook-modal p {
    text-align: left;
}
input[name="fingerprint"] {
    width: 25em; 
    margin: 8px auto;
}
pre {
    text-align: left;
    overflow: auto;
    white-space: pre-wrap;
    margin: 1em auto;
    font-family: "FiraCode";
    -webkit-user-select: all;
    user-select: all;
    font-size: 18px;
    background-color: black;
    padding: 0.5em;
    border: 1px solid var(--local-border);
    border-radius: 5px;
}
footer pre { font-size: 14px; }
.navtext button {
    flex: 1;
    margin: 1em;
}
.navtext>div {
    flex: 1;
    margin: 0 1em;
}
.warning {
    color: var(--warning);
}
.error {
    color: var(--error);
}
.webexec-install div {
    position: relative;
}
.webexec-install ::-webkit-scrollbar-thumb {
    background: var(--text-color);
    border-radius: 5px;
}

.webexec-install ::-webkit-scrollbar-track {
    background: var(--text-background);
    border-radius: 5px;
}
.webexec-install ::-webkit-scrollbar {
    height: 14px;
}
.webexec-install button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 6px;
    padding:8px;
}
audio { display: none; }
.edit-gate {
    position: fixed;
    top: 20%;
    left: 50%;
    margin-left: -25%;
}
.map-header-wide {
    display: block;
    margin: 0 auto;
    height: 370px;
    background: right no-repeat url("/map/top.png");
}
.gate-pad, .empty-pad {
    width: 25%;
    height: 110px;
    float: left;
    padding: 38px 26px;
    display: flex;
}
.gate-status {
    width: 80%;
    border-right: 2px solid var(--dark-border);
}
.gate-name {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-right: 0.5em;
}
.native #active-gate-stats.zoomed {
    right: 18px;
}
.gate-stats {
    font-family: "FiraCode";
    font-size: 40%;
    text-align: left;
    padding-left: 1.5em;
    text-shadow: none;
}

#active-gate-stats {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 75%;
    z-index: 10;
    color: #fff;
    border: 1px solid var(--dark-border);
    border-radius: 2px;
    background-color: rgba(var(--background-rgb), 0.7);
    margin: 4px;

}
.gate-stats > i {
    font-size: 160%;
    vertical-align: middle;
    margin-right: 0.2em;
}
.gate > .gate-stats > i {
    font-size: 130%;
}
.peerbook-icon {
    position: relative;
    text-shadow: 0;
    left: 10%;
}
.gate-edit {
    width: 20%;
    height: 100%;
    position: relative;
    padding-right: 20%;
}
#map .text-button, .empty-pad div  {
    width: 100%;
    height: 70px;
    margin: 0 auto;
}
#map .text-button {
    background-color: var(--text-background);
}
.empty-pad div {
    border: 1px dotted var(--local-border);
    opacity: 25%;
}
#map-footer {
    clear: both;
    background: top no-repeat url("/map/bottom.png")
}
.line-break {
    margin: 0;
    padding: 0;
    clear: both;
}
div.online  {
    text-shadow: var(--remote-border) 1px 0 10px;
}
#changelog {
	opacity: 0;
	position: relative;
	max-width: 10vw;
	max-height: 0;
	padding: 0.2em 1em;
	line-height: 1.5em;
	overflow-x: hidden;
	overflow-y: scroll;
	transition: all 0.75s ease;
	background-color: var(--text-background);
	border-radius: 5px;
    text-align: left;
}
#changelog ul {
    list-style: tibetan;
    text-align: left;
    padding-left: 1em;
}
#changelog h2 {
    margin: 0;
}
#changelog.show {
	opacity: 0.9;
	max-width: 96vw;
	max-height: 60vh;
    border: 1px solid var(--local-border);
}
#changelog::-webkit-scrollbar-thumb {
    background: var(--text-color);
    border-radius: 5px;
}
#changelog::-webkit-scrollbar-track {
    background: var(--text-background);
    border-radius: 5px;
}
#changelog::-webkit-scrollbar {
    height: 14px;
}
#changelog>a {
	position: absolute;
	top: 3%;
	right: 2%;
	text-decoration: none;
}
#title-short {
  letter-spacing: 0.1em;
}
.expand-gate {
    display: block;
    position: absolute;
    float:right;
    text-shadow: none;
    transform: translate(50%, -50%);
    top: 50%;
    pointer-events: none;
}
#string-not-found {
    position: relative;
    left: -76px;
    width: 0;
    overflow: visible;
    white-space: nowrap;
}
video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#capslock-indicator {
    position: absolute;
    top: 2%;
    right: 15%;
    color: var(--warning);
    z-index: 4;
}
#capslock-indicator > i {
    font-size: 1em;
}
#edit-conf {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--text-background);
    opacity: 0.8;
    z-index: 3;
}
@media (max-width: 600px) {
    #log {
        width: 90vw;
    }
    #title-short {
        display: block;
    }
    #title-long {
        display: none;
    }
    #version {
        max-width: 35vw;
    }
}
/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    font-feature-settings: "liga" 0;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    /*
     * HACK: to fix IE's blinking cursor
     * Move textarea out of the screen to the far left, so that the cursor is not visible.
     */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque 
    overflow-y: scroll; */
    overflow-y: hidden;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm {
    cursor: text;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    opacity: 0.5;
}

.xterm-underline {
    text-decoration: underline;
}
@font-face {
  font-family: 'Framework7 Icons';
  font-style: normal;
  font-weight: 400;
  src: url("/assets/Framework7Icons-Regular-CQxGmQu6.woff2");
}

.f7-icons, .framework7-icons {
  font-family: 'Framework7 Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18pt;
  line-height: 18pt;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  /* TODO: reserach whether we need the next 5 lines */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  font-feature-settings: "liga";
  text-align: center;
}
/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  height: 33vh;
  font-family: monospace;
  background-color: black;
  direction: ltr;
  text-align: left;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: black;
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #130718;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #D9F505;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: #D9F505; }
.CodeMirror-guttermarker-subtle { color: #373702; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}
.cm-fat-cursor-mark {
  background-color: rgba(20, 255, 20, 0.5);
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
}
.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7;
}
@-moz-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0; right: 0; top: -50px; bottom: 0;
  overflow: hidden;
}
.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0; bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #F952F9;}
.cm-s-default .cm-number {color: #00FA00;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #00FA00;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: absolute;
  overflow: hidden;
  width: 97%;
  height: 97%;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  min-height: 100%;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
.CodeMirror-dialog {
  position: absolute;
  left: 0; right: 0;
  background: inherit;
  z-index: 15;
  padding: .1em .8em;
  overflow: hidden;
  color: inherit;
}

.CodeMirror-dialog-top {
  border-bottom: 1px solid #eee;
  top: 0;
}

.CodeMirror-dialog-bottom {
  border-top: 1px solid #eee;
  bottom: 0;
}

.CodeMirror-dialog input {
  border: none;
  outline: none;
  background: transparent;
  width: 20em;
  color: inherit;
  font-family: monospace;
}

.CodeMirror-dialog button {
  font-size: 70%;
}