#terminal-container {
    position: fixed;
    margin-left: 10%;
	height: 100%;
    width: 99%;
	overflow: auto;
	overflow-y: scroll;
}

#terminal {
    padding-top: 10px;
    padding-left: 10px;
    height: auto;
    width: 70%;
    font-size: 16px;
	overflow: auto;
	overflow-y: scroll;
    background-color: var(--my-background-color);
    table-layout:fixed;
}

#terminal-input {
    background-color: var(--my-background-color);
    color: var(--my-font-color);
    transition: height 1s;
}

.terminal-input {
	display: inline-block;
	padding: 0px !important;
	margin: 0px !important;
	border: 0px;
	background-color: var(--my-background-color);
	font-size: 16px;
	outline: none;
    color: var(--my-font-color);
}

.terminal-line {
    width: 70%;
    word-wrap: break-word;
    hyphens:auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

#terminal-input-td {
    display: flex;
}

#terminal-input-header {
    white-space: pre;
}

#terminal-input-text-box {
    flex: 1 1 auto;
}

:root{
    --my-font-color: #66ff33;
    --my-background-color: #000000;
    --my-highlight-color: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
}

body {
    background-color: var(--my-background-color);
}

p,
pre,
h2,
.text {
    color: var(--my-font-color);
}

h1 {
    font-size: 22px;
    color: var(--my-font-color);
}

ul {
    padding: 2px;
    list-style-type: none;
}

li {
    list-style-type: none;
}

span {
    margin: 4px;
    padding: 4px;
}

#entire-game-container {
    background-color:transparent;
}

/* Disable border highlight on elements */
input:focus,
textarea:focus,
button:focus,
td:focus,
tr:focus {
    outline:none;
}

/* Main navigation menu */
.mainmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    position: fixed;
    height: 100%;
    overflow: auto;

    border: 0;
	border-bottom: 1px solid #000000;
	border-radius: 0;
	background-color: #333;
}

/* Default buttons */
.mainmenu>li a {
    display: block;
    color: #e6e6e6;
    background-color: #555;
    padding: 16px;
    text-decoration: none;
}

/* Hovering makes them lighter */
.mainmenu>li a:hover,
.mainmenu>li a:hover:not(.active),
.mainmenu>li a:focus {
    background-color: #777;
    color: white;
}

/* Panel headers can become active, and they are "lighter" than the rest */
.mainmenu>li a.active {
    background-color: #777;
    color: white;
}

.mainmenu>li a.active:hover {
    background-color:#aaa;
}

/* Plus and minus signs */
.mainmenu-accordion-header:after {
    content: '\2795';
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.mainmenu-accordion-header.opened:after {
    content: "\2796";
}

.mainmenu-accordion-header.opened {
    background-color:#222;
}

/* Slide down transition */
.mainmenu-accordion-panel {
    max-height: 0;
    opacity: 1;
    transition: max-height 0.2s ease-out;
}

/* Borders */
.mainmenu-accordion-header {
    border:2px solid white;
}

/* Make html links ("a" elements) nice looking buttons with this class */
a:link, a:visited {
    color:white;
}

.a-link-button {
    text-decoration: none;
    background-color: #555;
    color: #FFFFFF;
    padding: 5px;
    margin: 5px;
    border: 1px solid #333333;

    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

.a-link-button:hover {
    background-color: #666;
}

.a-link-button:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Make anchor tags ("a" elements) inactive (not clickable) */
.a-link-button-inactive {
    text-decoration: none;
    background-color: #333;
    color: #FFFFFF;
    padding: 5px;
    margin: 5px;
    border: 1px solid #333333;
    cursor: default;
}

.a-link-button-inactive:hover .tooltiptext,
.a-link-button-inactive:hover .tooltiptexthigh,
.a-link-button-inactive:hover .tooltiptextleft {
    visibility: visible;
}

.a-link-button-inactive:active {
    pointer-events: none;
}

/* Make anchor tags ("a" elements) for activated actions */
.a-link-button-bought {
    text-decoration: none;
    background-color: #00AA00;
    color: #FFFFFF;
    padding: 5px;
    margin: 5px;
    border: 1px solid #00AA00;
    cursor: default;
}

.a-link-button-bought:hover .tooltiptext,
.a-link-button-bought:hover .tooltiptexthigh,
.a-link-button-bought:hover .tooltiptextleft {
    visibility: visible;
}

.a-link-button-bought:active {
    pointer-events: none;
}

.dropdown {
    color:white;
    background-color:black;
}

.text-input {
    color:white;
    background-color:black;
}

/* Notification icon (for create program right now only) */
#create-program-tab {
    position:relative;
}
#create-program-notification {
    font-size: 10px;

    position: absolute; /* Position the badge within the relatively positioned button */
    top: 0;
    right: 0;
}

.notification-on {
    background-color: #fa3e3e;
    color: white;
    border-radius: 2px;
    padding: 1px 3px;
}

.notification-off {
    background-color: #333;
    color: #333;
    border-radius: 0px;
    padding: 0px;
}

/* Tool tips (when hovering over an element */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: var(--my-background-color);
    border: 2px solid var(--my-highlight-color);;
    color: white;
    text-align: center;
    padding: 4px;
    left: 101%;

    position: absolute;
    z-index: 99;
}

/* Same thing as a normal tooltip except its a bit higher */
.tooltip .tooltiptexthigh {
    visibility: hidden;
    width: 300px;
    background-color: var(--my-background-color);
    border: 2px solid var(--my-highlight-color);;
    color: white;
    text-align: center;
    padding: 4px;
    left: 101%;
    bottom:-25%;

    position: absolute;
    z-index: 99;
}

/* Similar to a normal tooltip except its positioned on the left of the elemnt
   rather than the right to avoid exceeding the elements normal width */
.tooltip .tooltiptextleft {
    visibility: hidden;
    width: 300px;
    background-color: var(--my-background-color);
    border: 2px solid var(--my-highlight-color);;
    color: white;
    text-align: center;
    padding: 4px;
    left: 40%;
    bottom:-10%;

    position: absolute;
    z-index: 99;
}

.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptexthigh,
.tooltip:hover .tooltiptextleft {
    visibility: visible;
}

/* help tip. Question mark that opens popup with info/details */
.help-tip {
    content:'?';
    padding:1px;
    margin-left:3px;
    color:#fff;
    border:1px solid white;
    border-radius:5px;
    display:inline-block;
}

.help-tip:hover {
    background-color: #888;
}

.help-tip:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Flashing button (Red) */
@-webkit-keyframes glowing {
    0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
    50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
    0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
    50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
    0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
    50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
    0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
    50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

.flashing-button {
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
}

/* Blinking Cursor */
/* ----- blinking cursor animation ----- */
.typed-cursor{
  opacity: 1;
  -webkit-animation: blink 0.95s infinite;
  -moz-animation: blink 0.95s infinite;
  -ms-animation: blink 0.95s infinite;
  -o-animation: blink 0.95s infinite;
  animation: blink 0.95s infinite;
}

@-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-ms-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

/* Status text */
@-webkit-keyframes status-text{
    from{
        opacity:1;
        top:0px;
    }
    to{
        opacity:0;
        top:0px;
    }
}

.status-text{
    display:inline;
    position:fixed;
    top:0px;
    -webkit-animation:status-text 3s 1;
    background-color: transparent;
    height: 15%;
}

#status-text-container {
    background-color: transparent;
}

#status-text {
    font-size: 20px;
    color: #FFFFFF;
    right: 0;
    bottom: 0;
    padding: 4px;
    margin-right: 14px;
    background-color: transparent;
    z-index: 2;
    width: auto;
}

/* Character Overview */
#character-overview-wrapper {
    position: relative;
}
#character-overview-container {
    display: none;
    position: absolute; /* Stay in place */
    right: 0;
    top: 0;
    height: 205px; /* Full height */
    /*margin: 50% auto;*/
    padding: 5px;
    border: 2px solid var(--my-highlight-color);
    width: 19%;
    overflow: auto; /* Enable scroll if needed */
    background-color: #444; /* Fallback color */
    z-index: 1;
}

#character-overview-text {
    padding: 4px;
    margin: 8px;
    color: white;
    background-color: #444;
}

#character-overview-save-button,
#character-overview-options-button {
    color: #aaa;
    font-size: 14px;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
    height: 22px;
    background-color:black;
}

#character-overview-save-button:hover,
#character-overview-save-button:focus,
#character-overview-options-button:hover,
#character-overview-options-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

#character-overview-options-button {
    display: inline;
}

/* Scan analyze links from AutoLink */
.scan-analyze-link {
    cursor:pointer;
    color:#FFFFFF;
    text-decoration:underline;
}
.scan-analyze-link:hover {
    text-decoration:none;
}

/* Accordion menus (Header with collapsible panel) */
.accordion-header {
    background-color: #444;
    font-size: 20px;
    color: white;
    margin: 6px 6px 0px 6px;
    padding: 6px;
    cursor: pointer;
    width: 80%;
    text-align: left;
    border: none;
    outline: none;
}

.accordion-header.active,
.accordion-header:hover {
    background-color: #555;
}

.accordion-header.active:hover {
    background-color: #666;
}

.accordion-header:after {
    content: '\2795'; /* "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.accordion-header.active:after {
    content: "\2796"; /* "minus" sign (-) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.accordion-panel {
    margin: 0px 6px 6px 6px;
    padding: 0px 6px 6px 6px;
    width: 75%;
    margin-left: 5%;
    display: none;
    background-color: #555;
    overflow-y:auto;
    overflow-x:none;
}

.accordion-panel div,
.accordion-panel ul,
.accordion-panel p,
.accordion-panel ul > li {
    background-color: #555;
}

/* CSS for different main menu pages, such as character info, script editor, etc (but excluding
	terminal which has its own page) */

.generic-menupage-container {
    height: 100%;
    padding-left: 10px;
    margin-left: 10%;
    width: 99%;
	overflow-y: scroll;
}

/* Character Info */
#character-container {
    padding-top: 10px;
    position: fixed;
}

/* Script Editor */
#script-editor-container {
    background-color:transparent;
}
#javascript-editor {
    margin: 10px;

    height: 80%;
    width: 100%;
    margin-left: 6px;

    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;

    border: 2px solid var(--my-highlight-color);
    z-index: 1;
    font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
}

.ace_line,
.ace_line * {
    background-color:transparent;
    margin:0px;
    padding:0px;
}

.ace_text-input {
    font-size:16px;
    background-color:transparent;
}

/* This temp element is used for auto adjusting filename field */
.tmp-element {
        visibility: hidden;
        white-space: pre;
}

#script-editor-container {
	position: fixed;
	padding-top: 10px;
}

#script-editor-buttons-wrapper {
    width: 100%;
    padding-right: 0xp;
    margin-right: 0px;
}

#script-editor-wrapper {
    height:100%;
    width: 70%;
    background:transparent;
}

#script-editor-filename-wrapper {
    background-color: #555;
    margin-left: 6px;
    margin-right: 0px;
    padding-left: 6px;
    width: 100%;
    border: 2px solid var(--my-highlight-color);
}

#script-editor-filename-tag {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 0px;
    float:center;
    background-color: #555;
    color: white;
}

#script-editor-filename {
    background-color: #555;
    display: inline-block;
	float: center;
	resize: none;
	color: white;
    margin: 4px;

    padding:  2px;

    border: 2px solid var(--my-highlight-color);
    -webkit-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
}

#script-editor-status {
	float: left;
	color: #ffffff;
}

#script-editor-options-panel {
    position:absolute;
    right: 9%;
    bottom:15%;
    border:2px solid white;
    width:19%;
    background-color:#444;
    padding:2px;
    overflow:auto;
    z-index: 1;
    color: white;
}

#script-editor-options-panel fieldset {
    margin-top:8px;
    margin-bottom:8px;
    padding: 2px;
    font-size:12px;
}

/* Active scripts */
.active-scripts-list {
    list-style-type: none;
}

#active-scripts-container {
	position: fixed;
	padding-top: 10px;
}

#active-scripts-text,
#active-scripts-total-prod {
    width: 70%;
    margin: 6px;
    padding: 4px;
}

.active-scripts-server-header {
    background-color: #444;
    font-size: 20px;
    color: white;
    margin: 6px 6px 0px 6px;
    padding: 6px;
    cursor: pointer;
    width: 60%;
    text-align: left;
    border: none;
    outline: none;
}

.active-scripts-server-header.active,
.active-scripts-server-header:hover {
    background-color: #555;
}

.active-scripts-server-header.active:hover {
    background-color: #666;
}

.active-scripts-server-header:after {
    content: '\2795'; /* "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.active-scripts-server-header.active:after {
    content: "\2796"; /* "minus" sign (-) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.active-scripts-server-panel {
    margin: 0px 6px 6px 6px;
    padding: 0px 6px 6px 6px;
    width: 55%;
    margin-left: 5%;
    display: none;
}

.active-scripts-server-panel div,
.active-scripts-server-panel ul,
.active-scripts-server-panel ul > li {
    background-color: #555;
}

.active-scripts-script-header {
    background-color: #555;
    color: var(--my-font-color);
    padding: 4px;
    padding-left: 10px;
    cursor: pointer;
    width: auto;
    text-align: left;
    border: none;
    outline: none;
}

.active-scripts-script-header:hover,
.active-scripts-script-header.active:hover {
    background-color: #666;
}

.active-scripts-script-header.active {
    background-color: #555;
}

.active-scripts-script-header:after {
    content: '\2795'; /* "plus" sign (+) */
    font-size: 13px;
    color: var(--my-font-color);
    float: right;
    margin-left: 5px;
}

.active-scripts-script-header.active:after {
    content: "\2796"; /* "minus" sign (-) */
    font-size: 13px;
    color: var(--my-font-color);
    float: right;
    margin-left: 5px;
}

.active-scripts-script-panel {
    padding: 0 18px;
    background-color: #555;
    width: auto;
    display: none;
    margin-bottom: 6px;
}

.active-scripts-script-panel p,
.active-scripts-script-panel h2,
.active-scripts-script-panel ul,
.active-scripts-script-panel li {
    background-color: #555;
    width: auto;
    color: white;
    margin-left: 5%;
}

.active-scripts-button {
    color: #aaa;
    font-size: 16px;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
    margin: 4px;
    padding: 4px;
    background-color:black;
}

.active-scripts-button:hover,
.active-scripts-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* Hacknet Nodes */
#hacknet-nodes-container {
    position: fixed;
    padding: 10px;
}

#hacknet-nodes-text,
#hacknet-nodes-container li {
    margin: 10px;
    padding: 10px;
}

#hacknet-nodes-container li {
    float: left;
    overflow: hidden;
    white-space: nowrap;
}

#hacknet-nodes-list {
    list-style: none;
    width: 82vw;
}

#hacknet-nodes-money {
    margin: 10px;
    float: left;
}

#hacknet-nodes-money-multipliers-div {
    display: inline-block;
    width: 70vw;
}

#hacknet-nodes-multipliers {
    float: right;
}

#hacknet-nodes-purchase-button {
    display: inline-block;
}

.hacknet-node {
    margin: 6px;
    padding: 6px;
    width: 34vw;
    border: 2px solid var(--my-highlight-color);
    -webkit-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
}

.hacknet-node-container {
    display: inline-table;
}

.hacknet-node-container .row {
    display: table-row;
    height: 30px;
}

.hacknet-node-container .row p {
    display: table-cell;
}

.hacknet-node-container .upgradable-info {
    display: inline-block;
    margin: 0 4px; /* Don't want the vertical margin/padding, just left & right */
    padding: 0 4px;
    width: 48px; /* Four times font-size */
}

.menu-page-text {
    width: 70vw;
}

/* World */
#world-container {
    position: fixed;
    padding-top: 10px;
}


#world-city-name,
#world-city-desc {
    padding: 4px;
    margin: 4px;
}

/* Create program */
#create-program-container {
    position: fixed;
    padding-top: 10px;
}

#create-program-page-text,
#create-program-list {
    width: 70%;
}

/* Factions and Faction (Single Faction page) */
#factions-container {
    position: fixed;
    padding-top: 10px;
}

#faction-container {
    position: fixed;
    padding-top: 10px;
}

.faction-work-div {
    width: 70%;
    height: 100%;
}

.faction-work-div-wrapper {
    overflow:hidden;
    border: 2px solid #333;
    padding: 6px;
    margin: 6px;
    width:70%;
}

#faction-donate-amount-txt,
#faction-donate-input {
    padding: 6px;
    margin: 6px;
    display: inline-block;
    color: var(--my-font-color);
    background-color:black;
}

#faction-donate-amount-txt {
    width:50%;
}

#faction-container p,
#faction-container pre {
    padding: 6px;
    margin: 6px;
}

#faction-container pre {
    width: 70%;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Faction Augmentations */
#faction-augmentations-container{
    position: fixed;
    padding-top: 10px;
}

#faction-augmentations-container p,
#faction-augmentations-container a,
#faction-augmentations-container ul,
#faction-augmentations-container h1{
    margin: 8px;
    padding: 4px;
}

/* World */
#world-container li {
    margin: 0 0 15px 0;
    list-style-type: none;
}

/* Augmentations */
#augmentations-container {
    position: fixed;
    padding-top: 10px;
}

.augmentations-list button,
.augmentations-list div {
    color: var(--my-font-color);
	padding: 8px;
    text-decoration: none;
}

/* Tutorial */
#tutorial-container {
    position: fixed;
    padding-top: 10px;
}

#tutorial-text {
    width: 70%;
    margin: 10px;
}

#tutorial-container a {
    width: 50%;
}

/* Dev menu */
#dev-menu-container {
    position: fixed;
    padding-top: 10px;
}

#dev-menu-text {
    width: 70%;
    margin: 10px;
}

#dev-menu-container a {
    width: 50%;
}

/* Location */
#location-container {
	position: fixed;
	padding: 6px;
    overflow-x: hidden;
}

#location-container a {
    display:inline-block;
    width: 30%;
}

#location-slums-description {
    width: 70%;
    margin: 10px;
}

#location-return-to-world-button {
    margin: 10px;
    padding: 6px;
}

#location-container * {
	margin: 10px 5px 10px 5px;
}

#location-job-reputation, #location-company-favor {
    display: inline;
}

/* Infiltration */
#infiltration-container {
    position: fixed;
    padding: 6px;
}
#infiltration-left-panel,
#infiltration-right-panel {
    display:inline-block;
    border: 1px solid white;
    width: 35%;
    height: 75%;
    top: 10px;
    overflow-y: auto;
    overflow-x: auto;
}

#infiltration-faction-select {
    color:white;
}

#infiltration-left-panel p,
#infiltration-right-panel p {
    margin: 4px;
}

#infiltration-buttons .a-link-button {
    display:inline;
    width: 25%;
}

/* Stock market */
#stock-market-container {
    position: fixed;
    padding: 6px;
}

#stock-market-container p {
    padding: 10px;
    margin: 10px;
    width: 70%;
}

#stock-market-container a {
    margin: 10px;
}

.stock-market-input {
    display: inline-block;
    padding: 4px;
    margin: 2px;
    background-color: black;
    border: 1px solid white;
    color: var(--my-font-color);
}

.stock-market-position-text {
    color:white;
    display:inline-block;
}

.stock-market-order-list {
    overflow-y:auto;
    max-height: 100px;
}

.stock-market-order-cancel-btn {
    background-color: black;
    border: 1px solid white;
    color: var(--my-font-color);
    margin: 2px;
    padding: 0px;
}

/* Gang */
#gang-container {
    position: fixed;
    padding: 6px;
}

#gang-management-subpage > p {
    padding: 4px;
}

.gang-member-info-div {
    float:left;
    background-color: #555;
}

/* Both Work in progress and BitNode stuff */
.generic-fullscreen-container {
    color: var(--my-font-color);
    width: 99%;
    height: 100%;
}

#work-in-progress-container {
    position: fixed;
}

#work-in-progress-text {
    color: var(--my-font-color);
    width: 70%;
    margin: 10px;
}

#work-in-progress-cancel-button {
    color: #aaa;
    float: left;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    margin: 10px;
    padding: 5px;
    border-radius: 12px;
    border: 3px solid white;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

#work-in-progress-cancel-button:hover,
#work-in-progress-cancel-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

#red-pill-container,
#cinematic-text-container {
    position: fixed;
}

.bitnode {
    color:blue;
}
.bitnode-destroyed {
    color:red;
}
.bitnode:hover,
.bitnode-destroyed:hover {
    color:white;
}

/* Pop-up boxes */
.popup-box-container {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow:auto;
    background-color: rbga(var(--my-background-color), 0.4);
}

.popup-box-content {
    background-color: var(--my-background-color);
    margin: 15% auto;
    padding: 12px;
    border: 5px solid var(--my-highlight-color);
    width: 70%;
    color: var(--my-font-color);
}

.popup-box-button,
.popup-box-button-inactive {
    color: #aaa;
    float: right;
    font-size: 16px;
    font-weight: bold;
    padding: 2px;
    margin: 6px;
    border: 1px solid white;
    background-color:black;
}

.popup-box-button:hover,
.popup-box-button:focus {
    color: var(--my-font-color);
    text-decoration: none;
    cursor: pointer;
}

.popupbox-button-inactive {
    pointer-events: none;
    cursor: default;
}

#yes-no-text-input-box-input {
    color: var(--my-font-color);
    border: 1px solid white;
    background-color:black;
}

.dialog-box-container,
#log-box-container {
    display: block;
    position: absolute;
    z-index: 10;
    width: 50%;
    height: auto;
    max-height: 40%;
    top: 40%;
    left: 50%;
    margin: -10% 0 0 -25%;
    overflow: auto;
    background-color: var(--my-background-color);
    border: 5px solid var(--my-highlight-color);
}

.dialog-box-content,
#log-box-content {
    z-index: 2;
    background-color: var(--my-background-color);
    padding: 10px;
}

.dialog-box-close-button {
    float: right;
    color: #aaa;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

#log-box-close {
    position: fixed;
    right: 27%;
}

#log-box-kill-script {
    right: 11%;
    position: relative;
}

#log-box-close, #log-box-kill-script {
    float:right;
    display:inline-block;
}

.dialog-box-close-button:hover,
.dialog-box-close-button:focus,{
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* Faction invitation box */
#faction-invitation-box-container {
    transition: opacity 400ms ease-in;
}
#faction-invitation-box-warning {
    margin: 4px;
    padding: 4px;
}

/* Infiltration-box */
#infiltration-box-sell,
#infiltration-box-faction {
    display: block;
    padding: 8px;
    margin: 8px;
}

#infiltration-faction-select {
    background-color:black;
}

/* Generic Yes No Box */
#yes-no-text-input-box-input {
    color: white;
}

/* Game Options */
#game-options-container {
    transition: opacity 400ms ease-in;
}

#game-options-content {
    background-color: var(--my-background-color);
    margin: 15% auto;
    padding: 10px;
    border: 5px solid var(--my-highlight-color);
    width: 60%;
    color: var(--my-font-color);
}

#game-options-left-panel,
#game-options-right-panel {
    display: inline-block;
    width: 49%;
}

#game-options-close-button {
    color: #aaa;
    float: right;
    margin: 4px;
    padding: 4px;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px white;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

#game-options-close-button:hover,
#game-options-close-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

#game-options-left-panel fieldset {
    padding:2px;
    margin:2px;
}

#import-game-file-selector {
    display:none;
}

/* interactivetutorial.css */
#interactive-tutorial-wrapper {
    position:relative;
}

#interactive-tutorial-container {
    display: none;
    position: absolute; /* Stay in place */
    right: 0;
    top: 0;
    height: 400px; /* Full height */
    padding: 10px;
    border: 5px solid #FFFFFF;
    width: 20%;
    overflow: auto; /* Enable scroll if needed */
    background-color: #444; /* Fallback color */
    color: white;
}

#interactive-tutorial-container > strong {
    background-color: #444;
}

#interactive-tutorial-text {
    padding: 4px;
    margin: 4px;
    color: white;
    background-color: #444;
}

#interactive-tutorial-exit,
#interactive-tutorial-next,
#interactive-tutorial-back {
    color: #aaa;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
    background-color:black;
}

#interactive-tutorial-exit {
    float: left;
}

#interactive-tutorial-back {
    margin-right: 20%;
    float: right;
}

#interactive-tutorial-next {
    float: right;
}

#interactive-tutorial-exit:hover,
#interactive-tutorial-exit:focus,
#interactive-tutorial-next:hover,
#interactive-tutorial-next:focus,
#interactive-tutorial-back:hover,
#interactive-tutorial-back:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

@-webkit-keyframes LOADERSPINNER {
  0%   { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
  100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); }
}
@-moz-keyframes LOADERSPINNER {
  0%   { -moz-transform: translate(-50%,-50%) rotate(0deg); }
  100% { -moz-transform: translate(-50%,-50%) rotate(360deg); }
}
@-ms-keyframes LOADERSPINNER {
  0%   { -ms-transform: translate(-50%,-50%) rotate(0deg); }
  100% { -ms-transform: translate(-50%,-50%) rotate(360deg); }
}
@-o-keyframes LOADERSPINNER {
  0%   { -o-transform: translate(-50%,-50%) rotate(0deg); }
  100% { -o-transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes LOADERSPINNER {
  0%   { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}

@-webkit-keyframes LOADERLABEL {
  0%   { opacity: 1.0; -webkit-transform: translate(-50%,-50%) scale(1.0); }
  5%   { opacity: 0.5; -webkit-transform: translate(-50%,-50%) scale(0.5); }
  95%  { opacity: 0.5; -webkit-transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 1.0; -webkit-transform: translate(-50%,-50%) scale(1.0); }
}
@-moz-keyframes LOADERLABEL {
  0%   { opacity: 1.0; -moz-transform: translate(-50%,-50%) scale(1.0); }
  5%   { opacity: 0.5; -moz-transform: translate(-50%,-50%) scale(0.5); }
  95%  { opacity: 0.5; -moz-transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 1.0; -moz-transform: translate(-50%,-50%) scale(1.0); }
}
@-ms-keyframes LOADERLABEL {
  0%   { opacity: 1.0; -ms-transform: translate(-50%,-50%) scale(1.0); }
  5%   { opacity: 0.5; -ms-transform: translate(-50%,-50%) scale(0.5); }
  95%  { opacity: 0.5; -ms-transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 1.0; -ms-transform: translate(-50%,-50%) scale(1.0); }
}
@-o-keyframes LOADERLABEL {
  0%   { opacity: 1.0; -o-transform: translate(-50%,-50%) scale(1.0); }
  5%   { opacity: 0.5; -o-transform: translate(-50%,-50%) scale(0.5); }
  95%  { opacity: 0.5; -o-transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 1.0; -o-transform: translate(-50%,-50%) scale(1.0); }
}
@keyframes LOADERLABEL {
  0%   { opacity: 1.0; transform: translate(-50%,-50%) scale(1.0); }
  5%   { opacity: 0.5; transform: translate(-50%,-50%) scale(0.5); }
  95%  { opacity: 0.5; transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 1.0; transform: translate(-50%,-50%) scale(1.0); }
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: top;
}
.loaderoverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1.0);
}
.loaderoverlay .loaderspinner,
.loaderoverlay .loaderspinner:before,
.loaderoverlay .loaderspinner:after {
  border: 20px solid rgba(0,0,0,0);
  border-top: 20px solid #ccc;
  border-bottom: 20px solid #ccc;
  border-radius: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
}
.loaderoverlay .loaderspinner:before,
.loaderoverlay .loaderspinner:after {
  content: "";
}
.loaderoverlay .loaderspinner {
  width: 200px;
  height: 200px;
  -webkit-animation: LOADERSPINNER 5s linear infinite;
  -moz-animation: LOADERSPINNER 5s linear infinite;
  -ms-animation: LOADERSPINNER 5s linear infinite;
  -o-animation: LOADERSPINNER 5s linear infinite;
  animation: LOADERSPINNER 5s linear infinite;
}
.loaderoverlay .loaderspinner:before {
  width: 160px;
  height: 160px;
  -webkit-animation: LOADERSPINNER 10s linear infinite;
  -moz-animation: LOADERSPINNER 10s linear infinite;
  -ms-animation: LOADERSPINNER 10s linear infinite;
  -o-animation: LOADERSPINNER 10s linear infinite;
  animation: LOADERSPINNER 10s linear infinite;
}
.loaderoverlay .loaderspinner:after {
  width: 120px;
  height: 120px;
  -webkit-animation: LOADERSPINNER 5s linear infinite;
  -moz-animation: LOADERSPINNER 5s linear infinite;
  -ms-animation: LOADERSPINNER 5s linear infinite;
  -o-animation: LOADERSPINNER 5s linear infinite;
  animation: LOADERSPINNER 5s linear infinite;
}
.loaderoverlay .loaderlabel {
  color: #66ff33;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: LOADERLABEL 5s linear infinite;
  -moz-animation: LOADERLABEL 5s linear infinite;
  -ms-animation: LOADERLABEL 5s linear infinite;
  -o-animation: LOADERLABEL 5s linear infinite;
  animation: LOADERLABEL 5s linear infinite;
}
button[type="button"] {
  padding: 0.5rem 1rem;
  position: absolute;
  z-index: 1;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* Customize */
.loaderoverlay {
  background: #000;
}
.loaderoverlay .loaderspinner,
.loaderoverlay .loaderspinner:before,
.loaderoverlay .loaderspinner:after {
  border-top-color: #66ff33!important;
  border-bottom-color:#66ff33 !important;
}
.loaderoverlay .loaderlabel {
  color: #66ff33;
}
/* css for Missions */

/* Hacking missions */
#mission-container {
    overflow:hidden;
}

.hack-mission-grid {
    display: grid;
    /*grid-template-columns: 11% 11% 11% 11% 11% 11% 11% 11%;*/
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    /*grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10%;*/
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2.5%;
    height: 90%;
    position:absolute;
    width: 100%;
    overflow-y:auto;
    padding-right: 10px;
}

.hack-mission-grid::-webkit-scrollbar {
    display:none;
}

.hack-mission-node {
    z-index:5;
    background-color:gray;
    align-self: center;
    justify-self: center;
    display:inline-block;
}

.hack-mission-node p {
    margin-top:8px;
    color:white;
    font-size:12px;
    text-align:center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hack-mission-player-node {
    color:white;
    background-color:blue;
}

.hack-mission-player-node-active {
    border: 2px solid white;
    background-color: #6666ff;
}

.hack-mission-enemy-node {
    color:white;
    background-color:red;
}

.hack-mission-cpu-node {
    width:100%;
    height:100%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.hack-mission-firewall-node {
    width:90%;
    height:100%;
}

.hack-mission-database-node {
    width: 100%;
	height: 90%;
	-webkit-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);
}

.hack-mission-database-node p {
    -webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
    color:white;
    font-size:12px;
    margin-top: 8px;
    text-align:center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hack-mission-transfer-node {
    width: 100%;
	height: 90%;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
}

.hack-mission-transfer-node p {
    -webkit-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);
    color:white;
    font-size:12px;
    margin-top: 8px;
    text-align:center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hack-mission-spam-node,
.hack-mission-shield-node {
    height:100%;
    width: 100%;
}

/* Non-map related DOM elements */

/* Element at the top of the Hacking Mission page (intro page, start button, guide buttons, etc.) */
.hack-mission-header-element {
    margin: 6px;
}

.hack-mission-action-buttons-container {
    border: 2px solid white;
}

#cmpy-mgmt-container p,
#cmpy-mgmt-container a,
#cmpy-mgmt-container div {
    font-size: 13px;
}


/* Header tabs */
.cmpy-mgmt-header-tab {
    display: inline-block;
    color: white;
    background-color:#555;
    border:1px solid white;
    padding: 4px;
}

.cmpy-mgmt-header-tab:hover {
    background-color: #666;
}

.cmpy-mgmt-header-tab.current {
    background-color: #777;
}

/* Switch between Cities */
.cmpy-mgmt-city-tab {
    display:inline-block;
    color: white;
    background-color: #555;
    border: 1px solid white;
    padding: 4px;
}

.cmpy-mgmt-city-tab:hover {
    background-color: #666;
}

.cmpy-mgmt-city-tab.current {
    background-color: #777;
}

/* Panels */
#cmpy-mgmt-panel {
    height: 90%;
}

.cmpy-mgmt-industry-left-panel,
.cmpy-mgmt-industry-right-panel {
    display:inline-block;
    width: 45%;
    height: 100%;
    top: 10px;
    overflow-y: auto;
    overflow-x: auto;
}

.cmpy-mgmt-industry-overview-panel {
    border: 1px solid white;
    color: var(--my-font-color);
    display:inline-block;
    width: 100%;
}

.cmpy-mgmt-employee-panel {
    border: 1px solid white;
    display:block;
    width:100%;
}

.cmpy-mgmt-warehouse-panel {
    border: 1px solid white;
    display:inline-block;
    width:100%;
}

/* Hiring new employees*/
.cmpy-mgmt-find-employee-option {
    border:1px solid white;
    margin: 6px;
}

.cmpy-mgmt-find-employee-option:hover {
    background-color:#3d4044;
}

/* Warehouse */
.cmpy-mgmt-warehouse-material-div {
    padding:2px;
    border:1px solid white;
}

.cmpy-mgmt-warehouse-product-div {
    padding:2px;
    border:1px solid white;
}

/* Exporting materials/products */
.cmpy-mgmt-existing-export {
    border:1px solid white;
    border-radius:25px;
    margin:4px;
    padding:4px;
}

.cmpy-mgmt-existing-export:hover {
    background-color:#333333;
}


/* Upgrades */
.cmpy-mgmt-upgrade-container {
    border:1px solid white;
    width: 60%;
    margin:4px;
}

.cmpy-mgmt-upgrade-div {
    display:inline-block;
    border:1px solid white;
    margin:2px;
    padding:6px;
    border-radius:25px;
    font-size:"12px";
    color:var(--my-font-color);
}

.cmpy-mgmt-upgrade-div:hover {
    background-color:#333333;
}

#bladeburner-container p,
#bladeburner-container pre,
#bladeburner-container a,
#bladeburner-container div,
#bladeburner-container td {
    font-size: 13px;
}

.bladeburner-action {
    border:1px solid white;
    margin:7px;
    padding:7px;
    white-space: pre-wrap;
}

.bladeburner-action pre {
    white-space: pre-wrap;
}

/* Whatever action is currently active */
.bladeburner-active-action {
    border:4px solid white;
}

/* Action & Skills panel navigation button */
.bladeburner-nav-button {
    border:1px solid white;
    color:white;
    padding:2px;
    margin:2px;
}

.bladeburner-nav-button:hover {
    background-color:#3d4044;
}

.bladeburner-nav-button-inactive {
    border:1px solid white;
    padding:2px;
    margin:2px;
    text-decoration: none;
    background-color: #555;
    cursor: default;
    pointer-events: none;
}

/* Bladeburner Console */
.bladeburner-console-div {
    display:inline-block;
    width:40%;
    border:1px solid white;
    overflow:auto;
    height:100%;
    position:absolute;
}

.bladeburner-console-table {
    height:auto;
    overflow:auto;
    table-layout:fixed;
    width:100%;
}

.bladeburner-console-input-row {
    transition: height 1s;
    width:100%;
}

.bladeburner-console-input-cell {
    display: flex;
}

.bladeburner-console-input {
    display: inline-block;
	padding: 0px !important;
	margin: 0px !important;
	border: 0px;
	background-color: var(--my-background-color);
	font-size: 13px;
	outline: none;
    color: var(--my-font-color);
    flex: 1 1 auto;
}

.bladeburner-console-line {
    word-wrap: break-word;
    hyphens:auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}


/*# sourceMappingURL=engine.css.map*/