bitburner-src/main.css

/* COLORS */
/* Attributes */
/* COLORS */
/* Attributes */
* {
  font-size: 16px;
  font-family: "Lucida Console", "Lucida Sans Unicode", "Fira Mono", "Consolas", "Courier New", Courier, monospace,
    "Times New Roman";
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

:root {
  --my-font-color: #0c0;
  --my-background-color: #000;
  --my-highlight-color: #fff;
  --my-prompt-color: #f92672;
}

body {
  background-color: var(--my-background-color);
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

body::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

p,
pre,
h2,
h3,
h4,
.text,
td {
  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;
}

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

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

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

.dropdown {
  color: #fff;
  background-color: #000;
}

.text-input {
  color: #fff;
  background-color: #000;
  border-style: solid;
  border-width: 1px;
  border-color: white;
}

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

#factions-tab {
  position: relative;
}

#factions-notification {
  font-size: 10px;
  position: absolute;
  /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}

#augmentations-tab {
  position: relative;
}

#augmentations-notification {
  font-size: 10px;
  position: absolute;
  /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}

.notification-on {
  background-color: #fa3e3e;
  color: #fff;
  border-radius: 2px;
  padding: 1px 3px;
  font-size: 10px;
  top: 0;
  right: 0;
  position: absolute;
}

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

.notification {
  position: relative;
  display: inline-block;
}

.notification .badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px;
  background: red;
  color: white;
}

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

.help-tip-big {
  content: "?";
  padding: 3px;
  margin-left: 3px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  display: inline-block;
}

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

.help-tip:active,
.help-tip-big: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: #f00;
    -webkit-box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    -moz-box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    box-shadow: 0 0 40px #f00;
  }
  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;
  }
  to {
    opacity: 0;
  }
}

.status-text {
  z-index: 2;
  -webkit-animation: status-text 3s 1;
}

#status-text-container {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 50%;
}

#status-text {
  background-color: transparent;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 20px;
  margin-right: 14px;
  opacity: 0;
  padding: 4px;
  right: 0;
  top: 0;
  width: auto;
}

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

/* Accordion menus (Header with collapsible panel) */
.accordion-header {
  background-color: #444;
  color: #fff;
  font-size: 20px;
  margin: 6px 6px 0 6px;
  padding: 4px 6px;
  cursor: pointer;
  width: 80%;
  text-align: left;
  border: none;
  outline: none;
  position: relative;
}
.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: 14px;
  float: right;
  color: transparent;
  text-shadow: 0 0 0 #fff;
  position: absolute;
  bottom: 5px;
  right: 6px;
}
.accordion-header.active:after {
  content: "\2796";
  /* "minus" sign (-) */
}

.accordion-panel {
  margin: 0 6px 6px 6px;
  padding: 0 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;
}

/* override the global <span> styling */
#active-scripts-total-production-active,
#active-scripts-total-prod-aug-total,
#active-scripts-total-prod-aug-avg {
  margin: 0;
  padding: 0;
}

/* Helper Classes */
.hacker-green {
  color: #adff2f;
}

.money-gold {
  color: #ffd700;
}

.light-yellow {
  color: #faffdf;
}

.unbuyable {
  color: #66cfbc;
}

.failure {
  color: #ff2929;
  text-shadow: 0 0 0 #ff2929;
}

.success {
  color: #3adb76;
  text-shadow: 0 0 0 #3adb76;
}

.physical-yellow {
  color: #faffdf;
}

.charisma-purple {
  color: #a671d1;
}

.reputation {
  color: #faffdf;
}

.smallfont {
  font-size: 13px;
}

.samefont {
  font-size: inherit;
}

.noscrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  /* stylelint-disable-next-line property-no-unknown */
  scrollbar-width: none;
  /* Firefox https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
}

.noscrollbar::-webkit-scrollbar {
  display: none;
}

input[type="checkbox"] {
  filter: invert(1) sepia(1) hue-rotate(41deg) brightness(100%) saturate(10);
}

.optionCheckbox {
  margin: 5px;
  float: right;
}

.optionRange {
  -webkit-appearance: none;
  background: #777;
  outline: none;
  opacity: 0.7;
  height: 10px;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin: 3px;
}

.optionRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: var(--my-font-color);
  cursor: pointer;
}

.optionRange::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--my-font-color);
  cursor: pointer;
}

.noselect,
br {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* COLORS */
/* Attributes */
/* Styling for tooltip-style elements */
/* Tool tips (when hovering over an element */
.tooltip {
  display: inline-block;
  position: relative;
  /* Positioned to left of element rather than right */
  /* Tooltip goes below cursor instead of above */
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: var(--my-background-color);
  border: 2px solid var(--my-highlight-color);
  color: #fff;
  text-align: center;
  padding: 4px;
  left: 101%;
  pointer-events: none;
  position: absolute;
  z-index: 99;
}
.tooltip .tooltiptextleft {
  visibility: hidden;
  width: 300px;
  background-color: var(--my-background-color);
  border: 2px solid var(--my-highlight-color);
  color: #fff;
  text-align: center;
  padding: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -100%);
  /* Backwards compatibility */
  -webkit-transform: translate(-100%, -100%);
  -moz-transform: translate(-100%, -100%);
  -o-transform: translate(-100%, -100%);
  -ms-transform: translate(-100%, -100%);
  position: absolute;
  z-index: 99;
}
.tooltip .tooltiptextlow {
  visibility: hidden;
  width: 300px;
  background-color: var(--my-background-color);
  border: 2px solid var(--my-highlight-color);
  color: #fff;
  text-align: center;
  padding: 4px;
  left: 101%;
  pointer-events: none;
  position: absolute;
  z-index: 99;
  bottom: 25%;
}

/* 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: #fff;
  text-align: center;
  padding: 4px;
  left: 101%;
  bottom: -25%;
  position: absolute;
  z-index: 99;
}

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

.copy_tooltip {
  position: relative;
  display: inline-block;
}

.copy_tooltip_copied {
  color: #fff;
  transition: color 0.3s;
}

.copy_tooltip .copy_tooltip_text {
  visibility: hidden;
  font-size: 15px;
  padding: 5px;
  background-color: var(--my-background-color);
  color: #fff;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 5%;
  opacity: 0;
  border: 2px solid var(--my-highlight-color);
}

.copy_tooltip .copy_tooltip_text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}

.copy_tooltip .copy_tooltip_text_visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}

/* COLORS */
/* Attributes */
/* COLORS */
/* Attributes */
/* COLORS */
/* Attributes */
* {
  font-size: 16px;
  font-family: "Lucida Console", "Lucida Sans Unicode", "Fira Mono", "Consolas", "Courier New", Courier, monospace,
    "Times New Roman";
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

:root {
  --my-font-color: #0c0;
  --my-background-color: #000;
  --my-highlight-color: #fff;
  --my-prompt-color: #f92672;
}

body {
  background-color: var(--my-background-color);
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

body::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

p,
pre,
h2,
h3,
h4,
.text,
td {
  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;
}

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

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

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

.dropdown {
  color: #fff;
  background-color: #000;
}

.text-input {
  color: #fff;
  background-color: #000;
  border-style: solid;
  border-width: 1px;
  border-color: white;
}

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

#factions-tab {
  position: relative;
}

#factions-notification {
  font-size: 10px;
  position: absolute;
  /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}

#augmentations-tab {
  position: relative;
}

#augmentations-notification {
  font-size: 10px;
  position: absolute;
  /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}

.notification-on {
  background-color: #fa3e3e;
  color: #fff;
  border-radius: 2px;
  padding: 1px 3px;
  font-size: 10px;
  top: 0;
  right: 0;
  position: absolute;
}

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

.notification {
  position: relative;
  display: inline-block;
}

.notification .badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px;
  background: red;
  color: white;
}

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

.help-tip-big {
  content: "?";
  padding: 3px;
  margin-left: 3px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  display: inline-block;
}

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

.help-tip:active,
.help-tip-big: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: #f00;
    -webkit-box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    -moz-box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    box-shadow: 0 0 40px #f00;
  }
  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;
  }
  to {
    opacity: 0;
  }
}

.status-text {
  z-index: 2;
  -webkit-animation: status-text 3s 1;
}

#status-text-container {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 50%;
}

#status-text {
  background-color: transparent;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 20px;
  margin-right: 14px;
  opacity: 0;
  padding: 4px;
  right: 0;
  top: 0;
  width: auto;
}

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

/* Accordion menus (Header with collapsible panel) */
.accordion-header {
  background-color: #444;
  color: #fff;
  font-size: 20px;
  margin: 6px 6px 0 6px;
  padding: 4px 6px;
  cursor: pointer;
  width: 80%;
  text-align: left;
  border: none;
  outline: none;
  position: relative;
}
.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: 14px;
  float: right;
  color: transparent;
  text-shadow: 0 0 0 #fff;
  position: absolute;
  bottom: 5px;
  right: 6px;
}
.accordion-header.active:after {
  content: "\2796";
  /* "minus" sign (-) */
}

.accordion-panel {
  margin: 0 6px 6px 6px;
  padding: 0 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;
}

/* override the global <span> styling */
#active-scripts-total-production-active,
#active-scripts-total-prod-aug-total,
#active-scripts-total-prod-aug-avg {
  margin: 0;
  padding: 0;
}

/* Helper Classes */
.hacker-green {
  color: #adff2f;
}

.money-gold {
  color: #ffd700;
}

.light-yellow {
  color: #faffdf;
}

.unbuyable {
  color: #66cfbc;
}

.failure {
  color: #ff2929;
  text-shadow: 0 0 0 #ff2929;
}

.success {
  color: #3adb76;
  text-shadow: 0 0 0 #3adb76;
}

.physical-yellow {
  color: #faffdf;
}

.charisma-purple {
  color: #a671d1;
}

.reputation {
  color: #faffdf;
}

.smallfont {
  font-size: 13px;
}

.samefont {
  font-size: inherit;
}

.noscrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  /* stylelint-disable-next-line property-no-unknown */
  scrollbar-width: none;
  /* Firefox https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
}

.noscrollbar::-webkit-scrollbar {
  display: none;
}

input[type="checkbox"] {
  filter: invert(1) sepia(1) hue-rotate(41deg) brightness(100%) saturate(10);
}

.optionCheckbox {
  margin: 5px;
  float: right;
}

.optionRange {
  -webkit-appearance: none;
  background: #777;
  outline: none;
  opacity: 0.7;
  height: 10px;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin: 3px;
}

.optionRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: var(--my-font-color);
  cursor: pointer;
}

.optionRange::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--my-font-color);
  cursor: pointer;
}

.noselect,
br,
.a-link-button,
.std-button,
.a-link-button-bought,
.std-button-bought {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/**
 * Styling for all buttons
 *
 * Includes <button> elements as well as classes that are used
 * for formatting buttons
 */
/* Remove default <button> styling */
button {
  border: none;
  background-color: transparent;
}

.a-link-button,
.std-button {
  text-decoration: none;
  background-color: #555;
  color: #fff;
  padding: 3px 5px;
  margin: 5px;
  border: 1px solid #333;
}
.a-link-button:hover,
.std-button:hover {
  background-color: #666;
}
.a-link-button:active,
.std-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);
}

.a-link-button-inactive,
.std-button-disabled,
.std-button:disabled {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 3px 5px;
  margin: 5px;
  border: 1px solid #333;
  cursor: default;
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}
.a-link-button-inactive:hover .tooltiptext,
.a-link-button-inactive:hover .tooltiptexthigh,
.a-link-button-inactive:hover .tooltiptextleft,
.std-button-disabled:hover .tooltiptext,
.std-button-disabled:hover .tooltiptexthigh,
.std-button-disabled:hover .tooltiptextleft,
.std-button:disabled:hover .tooltiptext,
.std-button:disabled:hover .tooltiptexthigh,
.std-button:disabled:hover .tooltiptextleft {
  visibility: visible;
}
.a-link-button-inactive:active,
.std-button-disabled:active,
.std-button:disabled:active {
  pointer-events: none;
}

.a-link-button-bought,
.std-button-bought {
  text-decoration: none;
  background-color: #0a0;
  color: #fff;
  padding: 3px 5px;
  margin: 5px;
  border: 1px solid #0a0;
  cursor: default;
}
.a-link-button-bought:hover .tooltiptext,
.a-link-button-bought:hover .tooltiptexthigh,
.a-link-button-bought:hover .tooltiptextleft,
.std-button-bought:hover .tooltiptext,
.std-button-bought:hover .tooltiptexthigh,
.std-button-bought:hover .tooltiptextleft {
  visibility: visible;
}
.a-link-button-bought:active,
.std-button-bought:active {
  pointer-events: none;
}

/**
 * This is a button that is meant to be used on accordions (accordion-header and accordion-panel classes)
 * It has a black background so it does not clash with the default accordion coloring
 */
.accordion-button {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 1px 1px 3px #000;
  -moz-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
  color: #aaa;
  font-size: 16px;
  font-weight: bold;
  margin: 4px;
  padding: 4px;
  background-color: #000;
  /* TODO focus selector? */
}
.accordion-button:hover,
.accordion-button:active {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* COLORS */
/* Attributes */
/**
 * Styling for the main navigation menu on the left-hand-side
 */
.mainmenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 10%;
  position: fixed;
  height: 100%;
  overflow: auto;
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  background-color: #333;
}

/* Default buttons */
.mainmenu > li a,
.mainmenu > li button {
  display: block;
  color: #e6e6e6;
  background-color: #555;
  padding: 12px 8px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.mainmenu.classic > li a,
.mainmenu.classic > li button {
  padding: 16px;
}

.mainmenu.compact > li a,
.mainmenu.compact > li button {
  display: block;
  color: #e6e6e6;
  background-color: #555;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 4px;
}

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

.mainmenu > li button:hover,
.mainmenu > li button:hover:not(.active) {
  background-color: #777;
  color: #fff;
}

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

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

.menu-header {
  position: relative;
}

#hacking-menu-header-li,
#character-menu-header-li,
#world-menu-header-li,
#help-menu-header-li {
  position: relative;
}

/* Accordion Outline */
.mainmenu-accordion-header,
.mainmenu-accordion-header-compact {
  outline: 2px solid #fff !important;
}

.mainmenu-accordion-header-classic {
  border: 2px solid #fff;
  padding: 16px !important;
}

/* Plus and minus signs */
.mainmenu-accordion-header:after,
.mainmenu-accordion-header-compact:after {
  content: "\2795";
  float: right;
  font-size: 13px;
  position: absolute;
  bottom: 25%;
  right: 3px;
  color: transparent;
  text-shadow: 0 0 0 #fff;
}

.mainmenu-accordion-header-classic:after {
  content: "\2795";
  float: right;
  font-size: 13px;
  color: #fff;
  margin-left: 5px;
}

.mainmenu-accordion-header.opened,
.mainmenu-accordion-header-classic.opened,
.mainmenu-accordion-header-compact.opened {
  background-color: #222 !important;
}
.mainmenu-accordion-header.opened:after,
.mainmenu-accordion-header-classic.opened:after,
.mainmenu-accordion-header-compact.opened:after {
  content: "\2796";
}

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

/* COLORS */
/* Attributes */
/**
 * Styling for the Character Overview Panel (top-right panel)
 */
#character-overview {
  position: fixed;
  top: 0;
  right: 0;
}

/* COLORS */
/* Attributes */
/**
 * Styling for Script Editor (both Ace and CodeMirror)
 */
#script-editor-buttons-wrapper {
  width: 100%;
  padding-right: 0;
  margin-right: 0;
}

.script-editor-wrapper {
  height: 110vh;
  width: 70%;
  background: transparent;
}

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

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

#script-editor-filename {
  -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);
  background-color: #555;
  border: 2px solid var(--my-highlight-color);
  color: #fff;
  display: inline-block;
  float: center;
  margin: 4px;
  padding: 2px;
  resize: none;
  width: 60%;
}

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

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

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

.editor-options-container {
  display: flex;
  flex-flow: column;
}

.editor-options-line {
  display: flex;
  flex: row nowrap;
  align-items: center;
  justify-content: start;
}

/* COLORS */
/* Attributes */
/**
 * Styling for the Hacknet Nodes UI Page
 */
.hacknet-general-info {
  margin: 10px;
}

#hacknet-nodes-container li {
  float: left;
  overflow: hidden;
  white-space: nowrap;
}
#hacknet-nodes-container li.hacknet-node {
  -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);
  margin: 6px;
  padding: 7px;
  width: 35vw;
  border: 2px solid var(--my-highlight-color);
}

#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-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: 64px;
}

/* COLORS */
/* Attributes */
/* CSS for different main menu pages, such as character info, script editor, etc (but excluding
    terminal which has its own page) */
#generic-react-container {
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
  flex-grow: 1;
}

#generic-react-container::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

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

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

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

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

.faction-container p,
.faction-container pre {
  padding: 4px 6px;
  margin: 4px 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+ */
}

/* World */
#world-container li {
  margin: 0 0 15px 0;
  list-style-type: 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;
  margin: 5px;
  width: 70%;
}

/**
 * Styling for the Augmentations UI. This is the page that displays all of the
 * player's owned and purchased Augmentations and Source-Files. It also allows
 * the player to install Augmentations
 */
/* COLORS */
/* Attributes */
.augmentations-content > p {
  font-size: 14px;
}

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

.augmentations-list button {
  padding: 4px;
}

/* COLORS */
/* Attributes */
/**
 * Styling for the Red Pill screen (the BitNode selection UI)
 */
#red-pill-container {
  position: fixed;
}

.bitnode.level-0 {
  color: red;
}

.bitnode.level-1 {
  color: yellow;
}

.bitnode.level-2 {
  color: #48d1cc;
}

.bitnode.level-3 {
  color: blue;
}

.bitnode.unimplemented {
  color: gray;
}

.bitnode:hover {
  color: #fff;
}

/* COLORS */
/* Attributes */
.stock-market-container p {
  font-size: 13px;
}

.stock-market-container a {
  font-size: 14px;
}

.stock-market-info-and-purchases > h2 {
  display: block;
  margin-top: 10px;
  margin-left: 10px;
}

.stock-market-info-and-purchases > p {
  display: block;
  margin-left: 10px;
  width: 70%;
}

.stock-market-info-and-purchases > a,
.stock-market-info-and-purchases > button {
  margin: 10px;
}

#stock-market-list {
  list-style: none;
}
#stock-market-list li button {
  font-size: 16px;
}

#stock-market-watchlist-filter {
  display: block;
  margin: 5px 5px 5px 10px;
  padding: 4px;
  width: 50%;
}

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

.stock-market-price-movement-warning {
  border: 1px solid white;
  color: red;
  margin: 2px;
  padding: 2px;
}

.stock-market-position-text {
  color: #fff;
  display: block;
}
.stock-market-position-text p {
  color: #fff;
  display: inline-block;
  margin: 4px;
}
.stock-market-position-text h3 {
  margin: 4px;
}

.stock-market-order-list {
  overflow-y: auto;
  max-height: 100px;
}
.stock-market-order-list li {
  color: #fff;
  padding: 4px;
}

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

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

.generic-fullscreen-container-scroll {
  height: 100%;
  width: 100%;
  overflow: auto;
  padding-right: 20px;
}

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

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

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

.work-button:hover,
.work-button:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

#cinematic-text-container {
  position: fixed;
}

/* COLORS */
/* Attributes */
/* COLORS */
/* Attributes */
/* COLORS */
/* Attributes */
* {
  font-size: 16px;
  font-family: "Lucida Console", "Lucida Sans Unicode", "Fira Mono", "Consolas", "Courier New", Courier, monospace,
    "Times New Roman";
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

:root {
  --my-font-color: #0c0;
  --my-background-color: #000;
  --my-highlight-color: #fff;
  --my-prompt-color: #f92672;
}

body {
  background-color: var(--my-background-color);
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

body::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

p,
pre,
h2,
h3,
h4,
.text,
td {
  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;
}

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

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

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

.dropdown {
  color: #fff;
  background-color: #000;
}

.text-input {
  color: #fff;
  background-color: #000;
  border-style: solid;
  border-width: 1px;
  border-color: white;
}

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

#factions-tab {
  position: relative;
}

#factions-notification {
  font-size: 10px;
  position: absolute;
  /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}

#augmentations-tab {
  position: relative;
}

#augmentations-notification {
  font-size: 10px;
  position: absolute;
  /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}

.notification-on {
  background-color: #fa3e3e;
  color: #fff;
  border-radius: 2px;
  padding: 1px 3px;
  font-size: 10px;
  top: 0;
  right: 0;
  position: absolute;
}

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

.notification {
  position: relative;
  display: inline-block;
}

.notification .badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px;
  background: red;
  color: white;
}

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

.help-tip-big {
  content: "?";
  padding: 3px;
  margin-left: 3px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  display: inline-block;
}

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

.help-tip:active,
.help-tip-big: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: #f00;
    -webkit-box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    -moz-box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    box-shadow: 0 0 40px #f00;
  }
  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: #f00;
    box-shadow: 0 0 40px #f00;
  }
  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;
  }
  to {
    opacity: 0;
  }
}

.status-text {
  z-index: 2;
  -webkit-animation: status-text 3s 1;
}

#status-text-container {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 50%;
}

#status-text {
  background-color: transparent;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 20px;
  margin-right: 14px;
  opacity: 0;
  padding: 4px;
  right: 0;
  top: 0;
  width: auto;
}

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

/* Accordion menus (Header with collapsible panel) */
.accordion-header {
  background-color: #444;
  color: #fff;
  font-size: 20px;
  margin: 6px 6px 0 6px;
  padding: 4px 6px;
  cursor: pointer;
  width: 80%;
  text-align: left;
  border: none;
  outline: none;
  position: relative;
}
.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: 14px;
  float: right;
  color: transparent;
  text-shadow: 0 0 0 #fff;
  position: absolute;
  bottom: 5px;
  right: 6px;
}
.accordion-header.active:after {
  content: "\2796";
  /* "minus" sign (-) */
}

.accordion-panel {
  margin: 0 6px 6px 6px;
  padding: 0 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;
}

/* override the global <span> styling */
#active-scripts-total-production-active,
#active-scripts-total-prod-aug-total,
#active-scripts-total-prod-aug-avg {
  margin: 0;
  padding: 0;
}

/* Helper Classes */
.hacker-green {
  color: #adff2f;
}

.money-gold {
  color: #ffd700;
}

.light-yellow {
  color: #faffdf;
}

.unbuyable {
  color: #66cfbc;
}

.failure {
  color: #ff2929;
  text-shadow: 0 0 0 #ff2929;
}

.success {
  color: #3adb76;
  text-shadow: 0 0 0 #3adb76;
}

.physical-yellow {
  color: #faffdf;
}

.charisma-purple {
  color: #a671d1;
}

.reputation {
  color: #faffdf;
}

.smallfont {
  font-size: 13px;
}

.samefont {
  font-size: inherit;
}

.noscrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  /* stylelint-disable-next-line property-no-unknown */
  scrollbar-width: none;
  /* Firefox https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
}

.noscrollbar::-webkit-scrollbar {
  display: none;
}

input[type="checkbox"] {
  filter: invert(1) sepia(1) hue-rotate(41deg) brightness(100%) saturate(10);
}

.optionCheckbox {
  margin: 5px;
  float: right;
}

.optionRange {
  -webkit-appearance: none;
  background: #777;
  outline: none;
  opacity: 0.7;
  height: 10px;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin: 3px;
}

.optionRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: var(--my-font-color);
  cursor: pointer;
}

.optionRange::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--my-font-color);
  cursor: pointer;
}

.noselect,
br,
.dialog-box-close-button {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Pop-up boxes */
.popup-box-container {
  display: none;
  /* Initially hidden */
  position: fixed;
  /* Stay in place */
  z-index: 1300;
  /* Sit on top */
  left: 0;
  top: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rbga(var(--my-background-color), 0.4);
}

.popup-box-content {
  background-color: var(--my-background-color);
  padding: 12px;
  border: 2px solid #adff2f;
  width: 70%;
  max-height: 80%;
  overflow-y: auto;
  z-index: 11;
  /* Sit on top of the container */
  color: var(--my-font-color);
  box-shadow: 0 3px 5px -1px #090, 0 5px 8px 0 #090, 0 1px 14px 0 #090;
}

.popup-box-input-div {
  margin: 2px;
}

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

.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 #fff;
  background-color: #000;
}

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

.log-box-container {
  display: flex;
  flex-flow: column;
  background-color: gray;
  width: 50%;
  position: fixed;
  left: 50%;
  top: 40%;
  margin: -10% 0 0 -25%;
  height: auto;
  max-height: 50%;
  z-index: 10;
  background-color: var(--my-background-color);
  border: 2px solid #adff2f;
}

.log-box-header {
  z-index: 1300;
  background-color: #333;
  border: 2px solid #adff2f;
  display: flex;
  flex: row nowrap;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
}

.log-box-log-container {
  overflow-y: auto;
}

.log-box-button {
  color: #aaa;
  font-size: 16px;
  font-weight: bold;
  padding: 2px;
  margin: 6px;
  border: 1px solid #fff;
  background-color: #000;
}

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

.dialog-box-content {
  z-index: 2;
  background-color: var(--my-background-color);
  padding: 10px;
}
.dialog-box-content p span {
  padding: 0;
  margin: 0;
}

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

#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: #fff;
  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-box-content span {
  padding: 0;
  margin: 0;
}

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

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

#game-options-content {
  background-color: var(--my-background-color);
  padding: 10px;
  border: 5px solid var(--my-highlight-color);
  color: var(--my-font-color);
  width: 80%;
  max-height: 80%;
  overflow-y: auto;
}

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

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

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

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

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

/* Styling for the game options/settings
 *
 *  Styling for the actual Game Options popup box can be found in popupboxes.scss
 *  This stylesheet is for everything inside the Game Options pop-up box
 */
/* COLORS */
/* Attributes */
#game-options-right-panel a {
  display: block;
  width: 46%;
}

#game-options-right-panel button {
  display: inline-block;
  width: 46%;
}

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

#interactive-tutorial-container {
  display: none;
  position: fixed;
  /* Stay in place */
  right: 0;
  top: 0;
  height: 450px;
  padding: 10px;
  border: 5px solid #fff;
  width: 23%;
  overflow: hidden;
  background-color: #444;
  /* Fallback color */
  color: #fff;
}
#interactive-tutorial-container > strong {
  background-color: #444;
}

#interactive-tutorial-text {
  padding: 4px;
  margin: 4px;
  color: #fff;
  background-color: #444;
  font-size: 14px;
  max-height: 350px;
  overflow-y: auto;
}

#interactive-tutorial-exit,
#interactive-tutorial-next,
#interactive-tutorial-back {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 1px 1px 3px #000;
  -moz-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
  color: #aaa;
  font-size: 18px;
  font-weight: bold;
  background-color: #000;
}
#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: #fff;
  text-decoration: none;
  cursor: pointer;
}

#interactive-tutorial-exit {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 4px;
}

#interactive-tutorial-back {
  float: left;
  padding: 4px;
}

#interactive-tutorial-next {
  float: right;
  padding: 4px;
}

.interactive-tutorial-command {
  background-color: #000;
  color: #adff2f;
  white-space: nowrap;
}

.interactive-tutorial-code {
  background-color: #272822;
  color: white;
  padding: 3px;
}

.interactive-tutorial-tab {
  background-color: #555;
  color: #e6e6e6;
  padding: 3px;
  box-shadow: 0 0 3px #000;
}

/* COLORS */
/* Attributes */
* {
  font-size: 16px;
  font-family: "Lucida Console", "Lucida Sans Unicode", "Fira Mono", "Consolas", "Courier New", Courier, monospace,
    "Times New Roman";
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

/* COLORS */
/* Attributes */
@-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;
    -webkit-transform: translate(-50%, -50%) scale(1);
  }
  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;
    -webkit-transform: translate(-50%, -50%) scale(1);
  }
}

@-moz-keyframes LOADERLABEL {
  0% {
    opacity: 1;
    -moz-transform: translate(-50%, -50%) scale(1);
  }
  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;
    -moz-transform: translate(-50%, -50%) scale(1);
  }
}

@-ms-keyframes LOADERLABEL {
  0% {
    opacity: 1;
    -ms-transform: translate(-50%, -50%) scale(1);
  }
  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;
    -ms-transform: translate(-50%, -50%) scale(1);
  }
}

@-o-keyframes LOADERLABEL {
  0% {
    opacity: 1;
    -o-transform: translate(-50%, -50%) scale(1);
  }
  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;
    -o-transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes LOADERLABEL {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  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;
    transform: translate(-50%, -50%) scale(1);
  }
}

.loaderoverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  color: #0c0;
}
.loaderoverlay .loaderspinner,
.loaderoverlay .loaderspinner:before,
.loaderoverlay .loaderspinner:after {
  border: 20px solid rgba(0, 0, 0, 0);
  border-top-color: #0c0;
  border-bottom-color: #0c0;
  border-radius: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
}
.loaderoverlay .loaderspinner:before,
.loaderoverlay .loaderspinner:after {
  content: "";
}
.loaderoverlay .loaderspinner {
  -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;
  width: 200px;
  height: 200px;
}
.loaderoverlay .loaderspinner:before {
  -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;
  width: 160px;
  height: 160px;
}
.loaderoverlay .loaderspinner:after {
  -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;
  width: 120px;
  height: 120px;
}
.loaderoverlay .loaderlabel {
  -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;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.killAllMessage {
  position: absolute;
  top: 95%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

.killAllMessageWrapperHidden {
  display: none;
}

.killAllMessageWrapperShow {
  display: block;
}

/* COLORS */
/* Attributes */
/* css for Missions */
/* Hacking missions */
#mission-container {
  overflow: hidden;
}

.hack-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  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: #808080;
  align-self: center;
  justify-self: center;
  display: inline-block;
}
.hack-mission-node p {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 8px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.hack-mission-player-node {
  color: #fff;
  background-color: #00f;
}

.hack-mission-player-node-active {
  border: 2px solid #fff;
  background-color: #66f;
}

.hack-mission-enemy-node {
  color: #fff;
  background-color: #f00;
}

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

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

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

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

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

/* COLORS */
/* Attributes */
/**
 * Styling for Corporations
 * The names/labels refer to "Company Management", which was the old name
 * for the mechanic before it got changed to avoid confusion with normal
 * companies
 */
.cmpy-mgmt-container p,
.cmpy-mgmt-container a,
.cmpy-mgmt-container div,
.cmpy-mgmt-container br {
  font-size: 13px;
}

/* Header tabs */
.cmpy-mgmt-header-tab {
  display: inline-block;
  color: #fff;
  background-color: #555;
  border: 1px solid #fff;
  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: #fff;
  background-color: #555;
  border: 1px solid #fff;
  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;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  overflow: visible;
  top: 10px;
  width: 45%;
  vertical-align: top;
  margin-top: 10px;
}

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

.cmpy-mgmt-employee-panel {
  border: 1px solid #fff;
  display: block;
  padding: 3px;
  width: 100%;
}

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

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

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

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

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

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

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

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

.cmpy-mgmt-upgrade-header {
  margin: 6px;
  padding: 6px;
}

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

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

/* Industry Upgrades */
.industry-purchases-and-upgrades-header {
  font-size: 14px;
  margin: 2px;
  padding: 2px;
}

/* Advertising */
.cmpy-mgmt-advertising-info {
  font-size: 12px;
}

/* Research */
#corporation-research-popup-box-content {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* COLORS */
/* Attributes */
.bladeburner-container a,
.bladeburner-container div,
.bladeburner-container p,
.bladeburner-container pre,
.bladeburner-container td {
  font-size: 13px;
}

.bladeburner-action {
  border: 1px solid #fff;
  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 #fff;
}

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

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

.bladeburner-nav-button-inactive {
  text-decoration: none;
  background-color: #555;
  cursor: default;
  pointer-events: none;
}

/* Checkbox for (de)selecting autoleveling */
.bbcheckbox {
  position: relative;
  display: inline;
}
.bbcheckbox label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  border-width: 1px;
  border-color: white;
  border-style: solid;
}
.bbcheckbox label:after {
  content: "";
  width: 9px;
  height: 5px;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 3px solid white;
  border-top: none;
  border-right: none;
  opacity: 0;
  transform: rotate(-45deg);
}
.bbcheckbox input[type="checkbox"] {
  margin: 3px;
  visibility: hidden;
}
.bbcheckbox input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

/* Bladeburner Console */
.bladeburner-console-div {
  display: inline-block;
  width: 40%;
  border: 1px solid #fff;
  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: 0 !important;
  margin: 0 !important;
  border: 0;
  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;
}

/* COLORS */
/* Attributes */
/**
 * Styling for the Gang mechanic UI (BitNode-2)
 */
.gang-container p,
.gang-container pre {
  font-size: 15px;
}

.gang-container select {
  background-color: black;
  color: white;
}

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

.gang-member-info-div {
  background-color: #555;
  display: inline;
  float: left;
  width: 30%;
}

/**
 * Showing owned upgrades in the Equipment Box
 */
.gang-owned-upgrades-div {
  display: inline-block;
  margin-left: 6px;
  width: 75%;
}

.gang-owned-upgrade {
  border: 1px solid white;
  font-size: 12px;
  margin: 1px;
  padding: 1px;
}

/**
 * Styling for the Sleeves Management page
 */
/* COLORS */
/* Attributes */
.sleeve-elem {
  border: 1px solid white;
  margin: 4px;
  display: block;
}

.sleeves-page-info {
  display: "block";
  width: 75%;
}

.sleeve-panel {
  display: inline-block;
  margin: 0;
  padding: 2px;
}
.sleeve-panel select {
  display: block;
}

/**
 * Styling for the Re-Sleeving Page
 */
/* COLORS */
/* Attributes */
.resleeve-elem {
  border: 1px solid white;
  margin: 4px;
  width: 75%;
}
.resleeve-elem p {
  font-size: 13px;
}

.resleeve-panel {
  display: inline-block;
  margin: 0;
  padding: 2px;
}

.resleeve-aug-selector {
  font-size: 13px;
}
.resleeve-aug-selector option {
  font-size: 13px;
}

/* required LIB STYLES */
/* .Treant se automatski dodaje na svaki chart conatiner */
.Treant {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}

.Treant > .node,
.Treant > .pseudo {
  position: absolute;
  display: block;
  visibility: hidden;
}

.Treant.Treant-loaded .node,
.Treant.Treant-loaded .pseudo {
  visibility: visible;
}

.Treant > .pseudo {
  width: 0;
  height: 0;
  border: none;
  padding: 0;
}

.Treant .collapse-switch {
  width: 3px;
  height: 3px;
  display: block;
  border: 1px solid black;
  position: absolute;
  top: 1px;
  right: 1px;
  cursor: pointer;
}

.Treant .collapsed .collapse-switch {
  background-color: #868dee;
}

.Treant > .node img {
  border: none;
  float: left;
}

.Treant > .node {
  cursor: pointer;
  padding: 4px;
  min-width: 60px;
  text-align: center;
  border: 2px solid #e8e8e3;
  border-radius: 2px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 12px;
}

.Treant > .researched {
  background-color: #666;
  font-size: 16px;
}

.Treant > .locked > div {
  color: red;
  pointer-events: none;
}

.Treant > .node > div {
  font-size: 12px;
}

.Treant > .unlocked:hover {
  background-color: #666;
}

/* stylelint-disable */
/*!
 * Bootstrap Grid v4.1.2 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@-ms-viewport {
  width: device-width;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.3333333333%;
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.6666666667%;
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.3333333333%;
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.6666666667%;
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 58.3333333333%;
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.6666666667%;
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 83.3333333333%;
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 91.6666666667%;
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -webkit-box-ordinal-group: 7;
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -webkit-box-ordinal-group: 8;
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -webkit-box-ordinal-group: 9;
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -webkit-box-ordinal-group: 10;
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -webkit-box-ordinal-group: 12;
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -webkit-box-ordinal-group: 13;
  -ms-flex-order: 12;
  order: 12;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-sm-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-sm-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-sm-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-sm-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-sm-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-sm-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-sm-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-sm-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-sm-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }
  .order-sm-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .order-sm-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-md-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }
  .order-md-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .order-md-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-lg-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }
  .order-lg-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .order-lg-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-xl-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-xl-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-xl-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-xl-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-xl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-xl-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-xl-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-xl-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-xl-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xl-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xl-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

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

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-print-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

.flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  -webkit-box-flex: 0 !important;
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -webkit-box-flex: 1 !important;
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

.justify-content-start {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.align-items-start {
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -webkit-box-align: end !important;
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -webkit-box-align: baseline !important;
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -webkit-box-align: stretch !important;
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-sm-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-sm-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-sm-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-sm-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-sm-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-sm-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-sm-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-md-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-md-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-md-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-md-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-md-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-md-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-md-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-md-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-md-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-md-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-md-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-md-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-md-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-md-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-md-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-lg-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-lg-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-lg-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-lg-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-lg-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-lg-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-lg-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-xl-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-xl-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-xl-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-xl-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-xl-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-xl-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-xl-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }
  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }
  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }
  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }
  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }
  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }
  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }
  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }
  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }
  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }
  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }
  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }
  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }
  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }
  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }
  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }
  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }
  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }
  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }
  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }
  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }
  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }
  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }
  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }
  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }
  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }
  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }
  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }
  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }
  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }
  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }
  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }
  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }
  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }
  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }
  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }
  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }
  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }
  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }
  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }
  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }
  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }
  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }
  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }
  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }
  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }
  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }
  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }
  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }
  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }
  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }
  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }
  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }
  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }
  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }
  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }
  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }
  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }
  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }
  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }
  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }
  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }
  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }
  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }
  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }
  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }
  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }
  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }
  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }
  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }
  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }
  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }
  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }
  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }
  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }
  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }
  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }
  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }
  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }
  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }
  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }
  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }
  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }
  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }
  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }
  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }
  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }
  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }
  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }
  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }
  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }
  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }
  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }
  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }
  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }
  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.add-exp-button {
  margin-right: 0;
}

.remove-exp-button {
  margin-left: 0;
}

.exp-input {
  margin: 5px 0 5px 0;
  padding: 2px 5px;
}

.text-center {
  margin: auto;
  text-align: center;
  vertical-align: middle;
}

.touch-right {
  margin-right: 0;
}

.touch-left {
  margin-left: 0;
}

.touch-sides {
  margin-left: 0;
  margin-right: 0;
}

.casino-card {
  padding: 10px;
  border: solid 1px #808080;
  background-color: white;
  display: inline-block;
  border-radius: 10px;
  font-size: 18.5px;
  text-align: center;
  margin: 3px;
  font-weight: bold;
}

.casino-card .value {
  font-size: 20px;
  font-family: sans-serif;
}

.casino-card.red {
  color: red;
}

.casino-card.black {
  color: black;
}

.milestones-container {
  width: 60%;
}

/* COLORS */
/* Attributes */
.blinking-cursor {
  font-weight: 100;
  color: #2e3d48;
  -webkit-animation: 1s cursorblink step-end infinite;
  -moz-animation: 1s cursorblink step-end infinite;
  -ms-animation: 1s cursorblink step-end infinite;
  -o-animation: 1s cursorblink step-end infinite;
  animation: 1s cursorblink step-end infinite;
}

@keyframes cursorblink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #adff2f;
  }
}

@-moz-keyframes cursorblink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #adff2f;
  }
}

@-webkit-keyframes cursorblink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #adff2f;
  }
}

@-ms-keyframes cursorblink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #adff2f;
  }
}

@-o-keyframes cursorblink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: #adff2f;
  }
}

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