@charset "UTF-8";
@media screen and (max-width: 1200px) {
  .grid > .grid-col-span-7 {
    grid-column-end: span 6;
  }

  .grid > .grid-col-span-8 {
    grid-column-end: span 6;
  }

  .grid > .grid-col-span-9 {
    grid-column-end: span 6;
  }

  .grid > .grid-col-span-10 {
    grid-column-end: span 6;
  }

  .grid > .grid-col-span-11 {
    grid-column-end: span 6;
  }

  .grid > .grid-col-span-12 {
    grid-column-end: span 6;
  }
}
@media screen and (max-width: 992px) {
  .grid > .grid-col-span-3 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-4 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-5 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-6 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-7 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-8 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-9 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-10 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-11 {
    grid-column-end: span 2;
  }

  .grid > .grid-col-span-12 {
    grid-column-end: span 2;
  }
}
h1, h2, h3, h4 {
  font-family: "Raleway", sans-serif;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}

h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote {
  margin: 0;
}
h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h1 + p, h1 + ul, h1 + ol, h1 + div:not(.close), h1 + blockquote, h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, h2 + p, h2 + ul, h2 + ol, h2 + div:not(.close), h2 + blockquote, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h3 + p, h3 + ul, h3 + ol, h3 + div:not(.close), h3 + blockquote, h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, h4 + p, h4 + ul, h4 + ol, h4 + div:not(.close), h4 + blockquote, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h5 + p, h5 + ul, h5 + ol, h5 + div:not(.close), h5 + blockquote, h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6, h6 + p, h6 + ul, h6 + ol, h6 + div:not(.close), h6 + blockquote, p + h1, p + h2, p + h3, p + h4, p + h5, p + h6, p + p, p + ul, p + ol, p + div:not(.close), p + blockquote, ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6, ul + p, ul + ul, ul + ol, ul + div:not(.close), ul + blockquote, ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6, ol + p, ol + ul, ol + ol, ol + div:not(.close), ol + blockquote, blockquote + h1, blockquote + h2, blockquote + h3, blockquote + h4, blockquote + h5, blockquote + h6, blockquote + p, blockquote + ul, blockquote + ol, blockquote + div:not(.close), blockquote + blockquote {
  margin-top: 1rem;
}

p {
  font-size: 1rem;
}

h1 {
  font-size: 3.2rem;
}

h2 {
  font-size: 2.4rem;
}

h3 {
  font-size: 1.8rem;
}

h4, h5 {
  font-size: 1.2rem;
}

h3, h4, h5 {
  font-weight: 500;
}

h6 {
  font-weight: 300;
  font-size: 0.9rem;
}

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

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

.text-centre {
  text-align: center;
}

.small-text {
  font-size: 0.75rem;
}

a {
  text-decoration: none;
}

a:not([class]) {
  color: var(--blue);
}
a:not([class]):hover {
  color: var(--dark-blue);
}
a:not([class]):visited {
  color: var(--dark-blue);
}
a:not([class]):visited:hover {
  color: var(--blue);
}

blockquote {
  position: relative;
  margin: 0;
  padding: 1rem;
  padding-left: 2rem;
  margin-left: 1rem;
  background: var(--offwhite);
}
blockquote:before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: -1rem;
  font-size: 4.5rem;
  color: var(--blue);
  font-family: serif;
  font-weight: 900;
}

.quote-author {
  margin-bottom: 1rem;
  display: block;
  width: 100%;
}

.text-blue {
  /* Use "" to stop warning in compiler */
  color: var(--blue);
}
.text-dark-blue {
  /* Use "" to stop warning in compiler */
  color: var(--dark-blue);
}
.text-offwhite {
  /* Use "" to stop warning in compiler */
  color: var(--offwhite);
}
.text-white {
  /* Use "" to stop warning in compiler */
  color: var(--white);
}
.text-text {
  /* Use "" to stop warning in compiler */
  color: var(--text);
}
.text-dark-grey {
  /* Use "" to stop warning in compiler */
  color: var(--dark-grey);
}
.text-red {
  /* Use "" to stop warning in compiler */
  color: var(--red);
}
.text-green {
  /* Use "" to stop warning in compiler */
  color: var(--green);
}
.text-pageBackground {
  /* Use "" to stop warning in compiler */
  color: var(--pageBackground);
}

.underline {
  text-decoration: underline;
}

/*!
 * jquery-confirm v3.3.4 (http://craftpip.github.io/jquery-confirm/)
 * Author: boniface pereira
 * Website: www.craftpip.com
 * Contact: hey@craftpip.com
 *
 * Copyright 2013-2019 jquery-confirm
 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
 */
@-webkit-keyframes jconfirm-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes jconfirm-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
body[class*=jconfirm-no-scroll-] {
  overflow: hidden !important;
}

.jconfirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  font-family: inherit;
  overflow: hidden;
}

.jconfirm .jconfirm-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.4s;
}

.jconfirm .jconfirm-bg.jconfirm-bg-h {
  opacity: 0 !important;
}

.jconfirm .jconfirm-scrollpane {
  perspective: 500px;
  perspective-origin: center;
  display: table;
  width: 100%;
  height: 100%;
  max-width: 50vw;
  margin: 0 auto;
}

.jconfirm .jconfirm-row {
  display: table-row;
  width: 100%;
}

.jconfirm .jconfirm-cell {
  display: table-cell;
  vertical-align: middle;
}

.jconfirm .jconfirm-holder {
  max-height: 100%;
  padding: 50px 0;
}

.jconfirm .jconfirm-box-container {
  transition: transform;
}

.jconfirm .jconfirm-box {
  border-radius: calc(1 * var(--space));
  position: relative;
  outline: none;
  padding: calc(2 * var(--space));
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@-webkit-keyframes type-dark {
  1%, 100% {
    border-color: #34495e;
  }
  50% {
    border-color: #46627f;
  }
}
@keyframes type-dark {
  1%, 100% {
    border-color: #34495e;
  }
  50% {
    border-color: #46627f;
  }
}
.jconfirm .jconfirm-box.jconfirm-type-animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.jconfirm .jconfirm-box div.jconfirm-title-c.jconfirm-hand {
  cursor: move;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
  font-size: inherit;
  display: inline-block;
  vertical-align: middle;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c i {
  vertical-align: middle;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c:empty {
  display: none;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: inherit;
  font-family: inherit;
  display: inline-block;
  vertical-align: middle;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title:empty {
  display: none;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane {
  margin-bottom: 15px;
  height: auto;
  transition: height 0.4s ease-in;
  display: inline-block;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll {
  overflow-y: hidden;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar {
  width: 3px;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
  overflow: auto;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content:empty {
  display: none;
}

.jconfirm.jconfirm-black .jconfirm-bg,
.jconfirm.jconfirm-dark .jconfirm-bg {
  background-color: darkslategray;
  opacity: 0.4;
}

.jconfirm.jconfirm-black .jconfirm-box,
.jconfirm.jconfirm-dark .jconfirm-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background: #444;
  color: white;
}

.jconfirm .jconfirm-box.hilight.jconfirm-hilight-shake {
  -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
}

@-webkit-keyframes shake {
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(4px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(4px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}
.jconfirm .jconfirm-box.jconfirm-animation-scale {
  transform: scale(0.5);
}

.jconfirm-buttons button + button {
  margin-left: 1rem;
}

@font-face {
  font-family: "Emoji";
  src: url("/fonts/NotoColorEmoji.ttf");
}
.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  background: var(--white) !important;
  opacity: 0.2;
}

.gfx-image-sprite {
  -o-object-fit: none;
     object-fit: none;
  width: 95px;
  height: 95px;
}

.pagination-nav {
  text-align: center;
}

.pagination-links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  font-size: 0;
}
.pagination-links > * {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid;
  margin: 0.25rem;
  font-size: 1rem;
}
.pagination-links .arrow {
  height: 1.5rem;
  width: 1.5rem;
}
.pagination-links a, .pagination-links a:visited {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
  transition: 0.2s ease;
}
.pagination-links span, .pagination-links a:focus, .pagination-links a:hover {
  background: var(--white);
  color: var(--blue);
}

.builderSearch {
  max-height: 35vh;
  overflow-y: auto;
  padding-top: 0.5rem;
  outline: none;
}

.builder-output {
  cursor: pointer;
}
.builder-output + .builder-output {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--blue);
}

.addToBuilder {
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
}

.choose-country, .choose-state {
  color: var(--blue);
  cursor: pointer;
}

img {
  max-width: 100%;
}

.emoji {
  font-family: "Emoji";
}

.loader-overlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
}
.loader-overlay .icon-loader {
  transition: 0.2s ease;
  -webkit-animation: spin infinite 2s ease;
          animation: spin infinite 2s ease;
}

.emoji-select select.default-input {
  font-family: "Emoji", "Poppins", sans-serif;
}
.emoji-select select.default-input option:not([disabled]) {
  font-family: "Emoji", "Poppins", sans-serif;
}
.emoji-select select.default-input:invalid {
  font-family: "Poppins", sans-serif;
}

.page-content {
  padding: calc(1 * var(--space)) calc(2 * var(--space));
}

.circle-image {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.align-centre {
  align-items: center;
}

:root {
  --blue: #637FC1;
  --dark-blue: #4464AD;
  --offwhite: #FAFAFA;
  --white: #FFFFFF;
  --text: #232E21;
  --dark-grey: #1B2F33;
  --red: #d50000;
  --green: #73c236;
  --pageBackground: #ECF0F1;
  --space: 1rem;
  --fontSize: 1rem;
}

.swatch {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #000000;
}
.swatch-blue {
  background: #637FC1;
}
.swatch-dark-blue {
  background: #4464AD;
}
.swatch-offwhite {
  background: #FAFAFA;
}
.swatch-white {
  background: #FFFFFF;
}
.swatch-text {
  background: #232E21;
}
.swatch-dark-grey {
  background: #1B2F33;
}
.swatch-red {
  background: #d50000;
}
.swatch-green {
  background: #73c236;
}
.swatch-pageBackground {
  background: #ECF0F1;
}

.colour-preview {
  display: grid;
  grid-template-columns: 2rem 1fr;
  margin-bottom: 1rem;
}

.colour-preview-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (min-width: 1200px) {
  .colour-preview-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.heightChecker {
  height: 1em;
  border: 1px solid #000000;
}

html, body {
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.0416666667vw;
  background: var(--pageBackground);
  color: var(--text);
  overflow: hidden;
  max-height: 100vh;
}

.feather-icon {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  width: 1em;
  height: 1em;
}
.feather-icon.icon-discord, .feather-icon.icon-steam {
  stroke-width: 0;
  fill: currentColor;
}
.feather-icon.icon-discord {
  height: 1.5em;
  width: 1.5em;
  margin: 0 -0.25em;
}

#app {
  display: flex;
  flex-wrap: wrap;
}

.main-content {
  width: 100%;
  height: calc(100vh - 2.5rem);
  overflow: auto;
}

.main-menu {
  width: 100%;
  background: var(--blue);
  padding: 0 calc(1 * var(--space));
  height: 2.5rem;
  color: var(--white);
  display: flex;
  position: relative;
  z-index: 100;
}
.main-menu .menu {
  display: flex;
  align-items: center;
  width: 100%;
}
.main-menu .menu .menu-item, .main-menu .menu a {
  color: var(--white);
  display: flex;
  align-items: center;
  transition: 0.2s ease;
}
.main-menu .menu .menu-item, .main-menu .menu .menu-item > a {
  font-size: 1rem;
}
.main-menu .menu .menu-item.has-children, .main-menu .menu .menu-item > a.has-children {
  position: relative;
  cursor: pointer;
}
.main-menu .menu .menu-item.has-children .children, .main-menu .menu .menu-item > a.has-children .children {
  position: absolute;
  bottom: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: 430%;
  max-width: 100vw;
  background: var(--blue);
  transition: 0.2s ease;
  border-radius: 1rem;
  padding: calc(0.5 * var(--space)) calc(1.5 * var(--space));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
}
.main-menu .menu .menu-item.has-children .children > *, .main-menu .menu .menu-item > a.has-children .children > * {
  width: calc(33% - 0.75rem);
  display: block;
  margin: calc(0.5 * var(--space)) 0;
}
.main-menu .menu .menu-item.has-children .children > a:hover, .main-menu .menu .menu-item > a.has-children .children > a:hover {
  color: var(--text);
}
.main-menu .menu .menu-item.has-children .children .title, .main-menu .menu .menu-item.has-children .children .description, .main-menu .menu .menu-item > a.has-children .children .title, .main-menu .menu .menu-item > a.has-children .children .description {
  display: inline-block;
  width: 100%;
}
.main-menu .menu .menu-item.has-children .children .title, .main-menu .menu .menu-item > a.has-children .children .title {
  font-family: "Raleway", sans-serif;
}
.main-menu .menu .menu-item.has-children .children .description, .main-menu .menu .menu-item > a.has-children .children .description {
  font-size: 75%;
  font-weight: 100;
}
.main-menu .menu .menu-item.has-children .children:before, .main-menu .menu .menu-item.has-children .children:after, .main-menu .menu .menu-item > a.has-children .children:before, .main-menu .menu .menu-item > a.has-children .children:after {
  content: "";
  position: absolute;
}
.main-menu .menu .menu-item.has-children .children:before, .main-menu .menu .menu-item > a.has-children .children:before {
  width: 1rem;
  height: 1rem;
  top: 100%;
  left: 50%;
  background: var(--blue);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.main-menu .menu .menu-item.has-children .children:after, .main-menu .menu .menu-item > a.has-children .children:after {
  width: 60%;
  height: 1rem;
  top: 100%;
  left: 20%;
}
.main-menu .menu .menu-item.has-children:hover .children, .main-menu .menu .menu-item.has-children:focus .children, .main-menu .menu .menu-item.has-children:focus-within .children, .main-menu .menu .menu-item > a.has-children:hover .children, .main-menu .menu .menu-item > a.has-children:focus .children, .main-menu .menu .menu-item > a.has-children:focus-within .children {
  pointer-events: initial;
  opacity: 1;
}
.main-menu .menu .menu-item:hover, .main-menu .menu .menu-item:focus, .main-menu .menu .menu-item > a:hover, .main-menu .menu .menu-item > a:focus {
  color: var(--text);
}
.main-menu .menu .menu-item svg, .main-menu .menu .menu-item > a svg {
  margin-right: calc(0.5 * var(--space));
}
.main-menu .menu .menu-item + .menu-item, .main-menu .menu .menu-item > a + .menu-item {
  margin-left: calc(1 * var(--space));
  padding-left: calc(1 * var(--space));
  border-left: 1px solid rgba(var(--white), 0.2);
}
.main-menu .menu .menu-item + .menu-item.support, .main-menu .menu .menu-item > a + .menu-item.support {
  margin-left: auto;
  border-left: 0;
}

.menu-item-notification {
  position: absolute;
  top: 0.25rem;
  right: -0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--red);
  border-radius: 50%;
}

.main-menu-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: calc(3 * var(--space));
}
.main-menu-toggle svg {
  margin-right: calc(0.5 * var(--space));
}

.sidebar-menu {
  background: var(--dark-grey);
}
.sidebar-menu a:hover {
  color: var(--blue);
}

.has-sidebar .sidebar-menu {
  width: 3rem;
}
.has-sidebar .main-content {
  width: calc(100% - 3rem);
}
.has-sidebar.open .sidebar-menu {
  width: 11.4583333333vw;
}
.has-sidebar.open .main-content {
  width: calc(100% - 11.4583333333vw);
}

.sidebar-toggle {
  background: var(--blue);
  color: var(--white);
  text-align: center;
  line-height: 1;
  padding: calc(0.5 * var(--space));
}

.sidebar-menu-items {
  padding: calc(1 * var(--space));
}

.sidebar-menu-item {
  color: var(--white);
  display: flex;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--white), 0.2);
  margin-bottom: 0.5rem;
  cursor: pointer;
}
.sidebar-menu-item:hover {
  color: var(--blue);
}
.sidebar-menu-item svg, .sidebar-menu-item .icon {
  margin-right: calc(0.5 * var(--space));
}
.help-text-file {
  display: none;
}

.showHelpData [data-help]:not(.close) {
  -webkit-animation: helpHighlight 5s ease infinite;
          animation: helpHighlight 5s ease infinite;
}
.showHelpData #toggleHelp {
  background: var(--blue);
  color: var(--white);
}

.enterDeleteMode.active {
  color: var(--red);
}

.loader {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
  top: 0;
  left: 0;
  transition: 0.4s ease;
  transition-delay: 0.1s;
  font-size: 5rem;
  color: var(--blue);
}
.loader .feather-icon {
  position: relative;
  z-index: 2;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  -webkit-animation: spin infinite 2s ease;
          animation: spin infinite 2s ease;
  transition: 0.1s ease;
}
.loader:before, .loader:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100%;
  transition: 0.4s ease;
}
.loader:before {
  z-index: 2;
  background: var(--white);
  top: 0;
}
.loader:after {
  z-index: 1;
  background: var(--white);
  bottom: 0;
}
.loader.loaded {
  pointer-events: none;
}
.loader.loaded .feather-icon {
  opacity: 0;
}
.loader.loaded:before {
  opacity: 0;
}
.loader.loaded:after {
  opacity: 0;
}
.loader.loading {
  transition-delay: 0s;
}
.loader.loading:before, .loader.loading:after {
  opacity: 1;
}

@-webkit-keyframes helpHighlight {
  0% {
    background-color: initial;
  }
  50% {
    background-color: rgba(204, 255, 0, 0.1);
  }
  100% {
    background-color: initial;
  }
}

@keyframes helpHighlight {
  0% {
    background-color: initial;
  }
  50% {
    background-color: rgba(204, 255, 0, 0.1);
  }
  100% {
    background-color: initial;
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes nicelyIn {
  0% {
    opacity: 0;
    transform: translateX(-20vw) translateY(50vw) scale(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(50vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes nicelyIn {
  0% {
    opacity: 0;
    transform: translateX(-20vw) translateY(50vw) scale(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(50vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: calc(2 * var(--space));
}

.grid-tight {
  grid-gap: 0.5rem;
}

.gfx-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  grid-gap: 1rem 5px;
}
.gfx-list > img {
  cursor: pointer;
  max-width: 90%;
  margin: 0 auto;
}
.gfx-list > img:hover {
  opacity: 0.75;
}

.tabble-content {
  margin-top: 2rem;
}

.tab-headers {
  display: flex;
}

.tab-header {
  display: inline-block;
  padding: calc(1 * var(--space));
  text-align: center;
  max-width: 17.1875vw;
  width: 100%;
  border: 1px solid var(--blue);
  border-bottom: none;
  color: var(--blue);
  border-top-left-radius: calc(1 * var(--space));
  border-top-right-radius: calc(1 * var(--space));
}
.tab-header:focus, .tab-header:hover {
  background: rgba(var(--blue), 0.5);
  color: var(--white);
}
.tab-header.active {
  background: var(--blue);
  color: var(--white);
}
.tab-header + .tab-header {
  border-left: 0;
}

.tab-content {
  border: 1px solid var(--blue);
}

.tab-details {
  padding: 2rem;
  display: none;
  max-height: 42vh;
  overflow: auto;
}
.tab-details.active {
  display: block;
}
.tab-details.no-pad {
  padding: 0;
}

.grid-col-start-1 {
  grid-column: 1;
}

.grid-row-start-1 {
  grid-row: 1;
}

.grid-col-start-2 {
  grid-column: 2;
}

.grid-row-start-2 {
  grid-row: 2;
}

.grid-col-start-3 {
  grid-column: 3;
}

.grid-row-start-3 {
  grid-row: 3;
}

.grid-col-start-4 {
  grid-column: 4;
}

.grid-row-start-4 {
  grid-row: 4;
}

.grid-col-start-5 {
  grid-column: 5;
}

.grid-row-start-5 {
  grid-row: 5;
}

.grid-col-start-6 {
  grid-column: 6;
}

.grid-row-start-6 {
  grid-row: 6;
}

.grid-col-start-7 {
  grid-column: 7;
}

.grid-row-start-7 {
  grid-row: 7;
}

.grid-col-start-8 {
  grid-column: 8;
}

.grid-row-start-8 {
  grid-row: 8;
}

.grid-col-start-9 {
  grid-column: 9;
}

.grid-row-start-9 {
  grid-row: 9;
}

.grid-col-start-10 {
  grid-column: 10;
}

.grid-row-start-10 {
  grid-row: 10;
}

.grid-col-start-11 {
  grid-column: 11;
}

.grid-row-start-11 {
  grid-row: 11;
}

.grid-col-start-12 {
  grid-column: 12;
}

.grid-row-start-12 {
  grid-row: 12;
}

@media screen and (min-width: 576px) {
  .grid-col-start-phone-1 {
    grid-column: 1;
  }

  .grid-row-start-phone-1 {
    grid-row: 1;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-1 {
    grid-column: 1;
  }

  .grid-row-start-tablet-1 {
    grid-row: 1;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-1 {
    grid-column: 1;
  }

  .grid-row-start-laptop-1 {
    grid-row: 1;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-1 {
    grid-column: 1;
  }

  .grid-row-start-desktop-1 {
    grid-row: 1;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-2 {
    grid-column: 2;
  }

  .grid-row-start-phone-2 {
    grid-row: 2;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-2 {
    grid-column: 2;
  }

  .grid-row-start-tablet-2 {
    grid-row: 2;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-2 {
    grid-column: 2;
  }

  .grid-row-start-laptop-2 {
    grid-row: 2;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-2 {
    grid-column: 2;
  }

  .grid-row-start-desktop-2 {
    grid-row: 2;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-3 {
    grid-column: 3;
  }

  .grid-row-start-phone-3 {
    grid-row: 3;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-3 {
    grid-column: 3;
  }

  .grid-row-start-tablet-3 {
    grid-row: 3;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-3 {
    grid-column: 3;
  }

  .grid-row-start-laptop-3 {
    grid-row: 3;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-3 {
    grid-column: 3;
  }

  .grid-row-start-desktop-3 {
    grid-row: 3;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-4 {
    grid-column: 4;
  }

  .grid-row-start-phone-4 {
    grid-row: 4;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-4 {
    grid-column: 4;
  }

  .grid-row-start-tablet-4 {
    grid-row: 4;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-4 {
    grid-column: 4;
  }

  .grid-row-start-laptop-4 {
    grid-row: 4;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-4 {
    grid-column: 4;
  }

  .grid-row-start-desktop-4 {
    grid-row: 4;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-5 {
    grid-column: 5;
  }

  .grid-row-start-phone-5 {
    grid-row: 5;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-5 {
    grid-column: 5;
  }

  .grid-row-start-tablet-5 {
    grid-row: 5;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-5 {
    grid-column: 5;
  }

  .grid-row-start-laptop-5 {
    grid-row: 5;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-5 {
    grid-column: 5;
  }

  .grid-row-start-desktop-5 {
    grid-row: 5;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-6 {
    grid-column: 6;
  }

  .grid-row-start-phone-6 {
    grid-row: 6;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-6 {
    grid-column: 6;
  }

  .grid-row-start-tablet-6 {
    grid-row: 6;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-6 {
    grid-column: 6;
  }

  .grid-row-start-laptop-6 {
    grid-row: 6;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-6 {
    grid-column: 6;
  }

  .grid-row-start-desktop-6 {
    grid-row: 6;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-7 {
    grid-column: 7;
  }

  .grid-row-start-phone-7 {
    grid-row: 7;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-7 {
    grid-column: 7;
  }

  .grid-row-start-tablet-7 {
    grid-row: 7;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-7 {
    grid-column: 7;
  }

  .grid-row-start-laptop-7 {
    grid-row: 7;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-7 {
    grid-column: 7;
  }

  .grid-row-start-desktop-7 {
    grid-row: 7;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-8 {
    grid-column: 8;
  }

  .grid-row-start-phone-8 {
    grid-row: 8;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-8 {
    grid-column: 8;
  }

  .grid-row-start-tablet-8 {
    grid-row: 8;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-8 {
    grid-column: 8;
  }

  .grid-row-start-laptop-8 {
    grid-row: 8;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-8 {
    grid-column: 8;
  }

  .grid-row-start-desktop-8 {
    grid-row: 8;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-9 {
    grid-column: 9;
  }

  .grid-row-start-phone-9 {
    grid-row: 9;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-9 {
    grid-column: 9;
  }

  .grid-row-start-tablet-9 {
    grid-row: 9;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-9 {
    grid-column: 9;
  }

  .grid-row-start-laptop-9 {
    grid-row: 9;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-9 {
    grid-column: 9;
  }

  .grid-row-start-desktop-9 {
    grid-row: 9;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-10 {
    grid-column: 10;
  }

  .grid-row-start-phone-10 {
    grid-row: 10;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-10 {
    grid-column: 10;
  }

  .grid-row-start-tablet-10 {
    grid-row: 10;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-10 {
    grid-column: 10;
  }

  .grid-row-start-laptop-10 {
    grid-row: 10;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-10 {
    grid-column: 10;
  }

  .grid-row-start-desktop-10 {
    grid-row: 10;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-11 {
    grid-column: 11;
  }

  .grid-row-start-phone-11 {
    grid-row: 11;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-11 {
    grid-column: 11;
  }

  .grid-row-start-tablet-11 {
    grid-row: 11;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-11 {
    grid-column: 11;
  }

  .grid-row-start-laptop-11 {
    grid-row: 11;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-11 {
    grid-column: 11;
  }

  .grid-row-start-desktop-11 {
    grid-row: 11;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-start-phone-12 {
    grid-column: 12;
  }

  .grid-row-start-phone-12 {
    grid-row: 12;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-start-tablet-12 {
    grid-column: 12;
  }

  .grid-row-start-tablet-12 {
    grid-row: 12;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-start-laptop-12 {
    grid-column: 12;
  }

  .grid-row-start-laptop-12 {
    grid-row: 12;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-start-desktop-12 {
    grid-column: 12;
  }

  .grid-row-start-desktop-12 {
    grid-row: 12;
  }
}
.grid-col-span-12 {
  grid-column-end: span 12;
}

.grid-col-span-11 {
  grid-column-end: span 11;
}

.grid-col-span-10 {
  grid-column-end: span 10;
}

.grid-col-span-9 {
  grid-column-end: span 9;
}

.grid-col-span-8 {
  grid-column-end: span 8;
}

.grid-col-span-7 {
  grid-column-end: span 7;
}

.grid-col-span-6 {
  grid-column-end: span 6;
}

.grid-col-span-5 {
  grid-column-end: span 5;
}

.grid-col-span-4 {
  grid-column-end: span 4;
}

.grid-col-span-3 {
  grid-column-end: span 3;
}

.grid-col-span-2 {
  grid-column-end: span 2;
}

.grid-col-span-1 {
  grid-column-end: span 1;
}

@media screen and (min-width: 576px) {
  .grid-col-span-phone-12 {
    grid-column-end: span 12;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-12 {
    grid-column-end: span 12;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-12 {
    grid-column-end: span 12;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-12 {
    grid-column-end: span 12;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-11 {
    grid-column-end: span 11;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-11 {
    grid-column-end: span 11;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-11 {
    grid-column-end: span 11;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-11 {
    grid-column-end: span 11;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-10 {
    grid-column-end: span 10;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-10 {
    grid-column-end: span 10;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-10 {
    grid-column-end: span 10;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-10 {
    grid-column-end: span 10;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-9 {
    grid-column-end: span 9;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-9 {
    grid-column-end: span 9;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-9 {
    grid-column-end: span 9;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-9 {
    grid-column-end: span 9;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-8 {
    grid-column-end: span 8;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-8 {
    grid-column-end: span 8;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-8 {
    grid-column-end: span 8;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-8 {
    grid-column-end: span 8;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-7 {
    grid-column-end: span 7;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-7 {
    grid-column-end: span 7;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-7 {
    grid-column-end: span 7;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-7 {
    grid-column-end: span 7;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-6 {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-6 {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-6 {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-6 {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-5 {
    grid-column-end: span 5;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-5 {
    grid-column-end: span 5;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-5 {
    grid-column-end: span 5;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-5 {
    grid-column-end: span 5;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-4 {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-4 {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-4 {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-4 {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-3 {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-3 {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-3 {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-3 {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-2 {
    grid-column-end: span 2;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-2 {
    grid-column-end: span 2;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-2 {
    grid-column-end: span 2;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-2 {
    grid-column-end: span 2;
  }
}
@media screen and (min-width: 576px) {
  .grid-col-span-phone-1 {
    grid-column-end: span 1;
  }
}
@media screen and (min-width: 992px) {
  .grid-col-span-tablet-1 {
    grid-column-end: span 1;
  }
}
@media screen and (min-width: 1200px) {
  .grid-col-span-laptop-1 {
    grid-column-end: span 1;
  }
}
@media screen and (min-width: 1400px) {
  .grid-col-span-desktop-1 {
    grid-column-end: span 1;
  }
}
.grid-row-span-1 {
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

.grid-row-span-2 {
  -ms-grid-row-span: 2;
  grid-row-end: span 2;
}

.grid-row-span-3 {
  -ms-grid-row-span: 3;
  grid-row-end: span 3;
}

.grid-row-span-4 {
  -ms-grid-row-span: 4;
  grid-row-end: span 4;
}

.grid-row-span-5 {
  -ms-grid-row-span: 5;
  grid-row-end: span 5;
}

.grid-row-span-6 {
  -ms-grid-row-span: 6;
  grid-row-end: span 6;
}

@media screen and (min-width: 576px) {
  .grid-row-span-phone-1 {
    grid-row-end: span 1;
  }
}
@media screen and (min-width: 992px) {
  .grid-row-span-tablet-1 {
    grid-row-end: span 1;
  }
}
@media screen and (min-width: 1200px) {
  .grid-row-span-laptop-1 {
    grid-row-end: span 1;
  }
}
@media screen and (min-width: 1400px) {
  .grid-row-span-desktop-1 {
    grid-row-end: span 1;
  }
}
@media screen and (min-width: 576px) {
  .grid-row-span-phone-2 {
    grid-row-end: span 2;
  }
}
@media screen and (min-width: 992px) {
  .grid-row-span-tablet-2 {
    grid-row-end: span 2;
  }
}
@media screen and (min-width: 1200px) {
  .grid-row-span-laptop-2 {
    grid-row-end: span 2;
  }
}
@media screen and (min-width: 1400px) {
  .grid-row-span-desktop-2 {
    grid-row-end: span 2;
  }
}
@media screen and (min-width: 576px) {
  .grid-row-span-phone-3 {
    grid-row-end: span 3;
  }
}
@media screen and (min-width: 992px) {
  .grid-row-span-tablet-3 {
    grid-row-end: span 3;
  }
}
@media screen and (min-width: 1200px) {
  .grid-row-span-laptop-3 {
    grid-row-end: span 3;
  }
}
@media screen and (min-width: 1400px) {
  .grid-row-span-desktop-3 {
    grid-row-end: span 3;
  }
}
@media screen and (min-width: 576px) {
  .grid-row-span-phone-4 {
    grid-row-end: span 4;
  }
}
@media screen and (min-width: 992px) {
  .grid-row-span-tablet-4 {
    grid-row-end: span 4;
  }
}
@media screen and (min-width: 1200px) {
  .grid-row-span-laptop-4 {
    grid-row-end: span 4;
  }
}
@media screen and (min-width: 1400px) {
  .grid-row-span-desktop-4 {
    grid-row-end: span 4;
  }
}
@media screen and (min-width: 576px) {
  .grid-row-span-phone-5 {
    grid-row-end: span 5;
  }
}
@media screen and (min-width: 992px) {
  .grid-row-span-tablet-5 {
    grid-row-end: span 5;
  }
}
@media screen and (min-width: 1200px) {
  .grid-row-span-laptop-5 {
    grid-row-end: span 5;
  }
}
@media screen and (min-width: 1400px) {
  .grid-row-span-desktop-5 {
    grid-row-end: span 5;
  }
}
@media screen and (min-width: 576px) {
  .grid-row-span-phone-6 {
    grid-row-end: span 6;
  }
}
@media screen and (min-width: 992px) {
  .grid-row-span-tablet-6 {
    grid-row-end: span 6;
  }
}
@media screen and (min-width: 1200px) {
  .grid-row-span-laptop-6 {
    grid-row-end: span 6;
  }
}
@media screen and (min-width: 1400px) {
  .grid-row-span-desktop-6 {
    grid-row-end: span 6;
  }
}
.alert-message {
  position: fixed;
  top: 0;
  left: 50%;
  width: 75vw;
  transform: translateX(-50%);
  padding: calc(0.5 * var(--space)) calc(1 * var(--space));
  color: var(--white);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  z-index: 100;
}
.alert-message.success {
  background: var(--green);
}
.alert-message.error {
  background: var(--red);
}

small {
  font-size: 75%;
}

.flex-at-end {
  display: flex;
  align-items: flex-end;
}

@media screen and (max-width: 1400px) {
  html, body {
    font-size: 1.2307692308vw;
  }
}
@media screen and (max-width: 1200px) {
  html, body {
    font-size: 1.9512195122vw;
  }

  .main-menu-toggle {
    font-size: 0;
  }
  .main-menu-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .main-menu .menu > .menu-item {
    font-size: 0;
  }
  .main-menu .menu > .menu-item svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .main-menu .menu > .menu-item.has-children .children {
    font-size: 1rem;
    display: block;
    width: 60vw;
  }
  .main-menu .menu > .menu-item.has-children .children > * {
    width: 100%;
    margin: 0.5rem;
  }
}
@media screen and (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .gfx-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .sidebar-menu-item {
    font-size: 0;
    justify-content: center;
  }
  .sidebar-menu-item * {
    font-size: 1rem;
  }
}
@media screen and (max-width: 992px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  html, body {
    font-size: 4.3333333333vw;
  }
}
/*Theme classes*/
.theme-menu-top .main-menu {
  order: 1;
}
.theme-menu-top .sidebar-menu {
  order: 2;
}
.theme-menu-top .sidebar-menu .sidebar-toggle {
  display: none;
}
.theme-menu-top .main-content {
  order: 3;
}
.theme-menu-top .modal {
  top: 7vh;
}
.theme-menu-top .main-menu .menu .menu-item.has-children .children, .theme-menu-top .main-menu .menu .menu-item > a.has-children .children {
  bottom: auto;
  top: calc(100% + 1rem);
}
.theme-menu-top .main-menu .menu .menu-item.has-children .children:before, .theme-menu-top .main-menu .menu .menu-item > a.has-children .children:before {
  top: 0;
}
.theme-menu-top .main-menu .menu .menu-item.has-children .children:after, .theme-menu-top .main-menu .menu .menu-item > a.has-children .children:after {
  top: auto;
  bottom: 100%;
}

.dark-theme .sidebar-menu .sidebar-menu-item {
  color: var(--text);
}

.mt {
  margin-top: calc(1 * var(--space));
}

.homepage {
  padding: 3rem;
}

.home-forum-updates {
  border: 1px solid var(--blue);
  border-top-right-radius: calc(1 * var(--space));
  overflow: hidden;
}

.home-update {
  padding: 1rem;
  background: var(--white);
}
.home-update p {
  font-size: 0.8rem;
}
.home-update:nth-child(even) {
  background: var(--offwhite);
}

.patron-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.patron-list li {
  margin-bottom: 1rem;
  width: 50%;
}
.patron-list .image-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-right: 1rem;
}
.patron-list .image-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.user-social-links, .user-header > .grid {
  align-items: center;
}

.user-social-links svg {
  stroke: var(--blue);
}
.user-social-links svg.icon-discord, .user-social-links svg.icon-steam {
  fill: var(--blue);
}
.user-social-links a, .user-social-links a:visited {
  color: var(--text);
  word-break: break-all;
}

.user-avatar {
  border-radius: 50%;
  width: 14rem;
  height: 14rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.user-forum-post + .user-forum-post {
  margin-top: 2rem;
}

.theme-tab span {
  display: block;
  border: 1px solid var(--blue);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  transition: 0.2s ease;
  color: var(--blue);
  padding: 0.5rem;
  cursor: pointer;
}
.theme-tab span:hover {
  background: rgba(0, 0, 0, 0.2);
}
.theme-tab input {
  display: none;
}
.theme-tab input:checked ~ span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--white);
  background: var(--blue);
}
.theme-tab + .theme-tab span {
  border-top: none;
}

.theme-content {
  display: none;
}
.theme-content[data-active=true] {
  display: block;
}

.user-name-select {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.user-name-select span {
  background: var(--blue);
  display: inline-block;
  color: var(--white);
  padding: calc(0.2 * var(--space)) calc(0.4 * var(--space));
  border-radius: 0.2rem;
  border: 1px solid var(--blue);
  margin: 0.2rem;
  cursor: pointer;
  transition: 0.2s ease;
  min-width: 1.5rem;
  text-align: center;
  text-transform: uppercase;
}
.user-name-select span:hover {
  border-radius: 0.8rem;
}
.user-name-select input {
  display: none;
}
.user-name-select input:checked ~ span {
  background: rgba(0, 0, 0, 0);
  color: var(--blue);
  border-radius: 0.8rem;
}

.user-name-select + .user-search-box {
  margin-top: calc(2 * var(--space));
}

.user-search-box {
  background: var(--white);
  padding: calc(1 * var(--space)) calc(3 * var(--space));
  border-radius: calc(1 * var(--space));
}
.user-search-box > * {
  margin-top: calc(1 * var(--space));
  margin-bottom: calc(1 * var(--space));
}

.user-search-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  margin-top: calc(2 * var(--space));
}

.user-search-item {
  display: grid;
  grid-template-columns: 5rem 1fr;
}
.user-search-item .image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.user-search-item .details {
  color: var(--text);
  background: var(--white);
  padding: calc(1 * var(--space)) calc(2 * var(--space));
  border-bottom-right-radius: calc(1 * var(--space));
  border-top-right-radius: calc(1 * var(--space));
  transition: 0.2s ease;
  word-break: break-all;
}
.user-search-item .details .username {
  font-family: "Raleway", sans-serif;
  font-size: 1.25rem;
  display: inline-block;
  width: 100%;
}
.user-search-item:hover .details {
  background: var(--blue);
  color: var(--white);
}

@media screen and (min-width: 992px) {
  .user-search-box {
    max-width: calc(40 * var(--space));
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 1rem;
  }

  .user-search-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.error-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--dark-grey);
  align-items: center;
  justify-content: center;
}
.error-wrapper .error-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 33vw;
  opacity: 0.25;
  font-weight: 900;
}
.error-wrapper .error-wrapper-inner {
  padding: 2rem;
  max-width: 800px;
  text-align: center;
  z-index: 2;
  color: var(--white);
}

.mod-preview {
  display: flex;
  position: relative;
}
.mod-preview .mod-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.mod-preview .mod-link:hover ~ .mod-image {
  opacity: 0.9;
}
.mod-preview .mod-link:hover ~ .mod-details h3 {
  color: var(--blue);
}
.mod-preview .mod-image {
  width: 25%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.2s ease;
}
.mod-preview .mod-details {
  width: 75%;
  padding: calc(2 * var(--space));
  background: var(--offwhite);
  border-bottom-right-radius: calc(1 * var(--space));
  border-top-right-radius: calc(1 * var(--space));
}
.mod-preview .mod-details * {
  transition: 0.2s ease;
}

.mod-focus-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(1 * var(--space)) calc(3 * var(--space));
  font-size: 1.5rem;
}
.mod-focus-list-item .controls {
  margin-bottom: -0.5rem;
}
.mod-focus-list-item .controls span {
  display: inline-block;
  margin-left: 0.5rem;
  cursor: pointer;
  font-size: 2rem;
}
.mod-focus-list-item .edit {
  color: var(--blue);
}
.mod-focus-list-item .delete {
  color: var(--red);
}
.mod-focus-list-item:nth-child(even) {
  background: var(--offwhite);
}

.mod-icon-marker {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.mod-icon-marker .icon {
  margin-left: 0.5rem;
  line-height: 1;
}
.mod-icon-marker .icon .icon-x {
  color: var(--red);
}
.mod-icon-marker .icon .icon-check {
  color: var(--green);
}

.bug-modal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.bug-modal-inner {
  max-width: 900px;
  margin: 10px;
}

.forum-category {
  border: 5px solid var(--blue);
  margin-top: 1.5rem;
}

.forum-title {
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  padding: 0 calc(1 * var(--space));
}
.forum-title h3 {
  font-size: 1.2rem;
  margin-right: 1rem;
  padding-top: 10px;
  padding-bottom: 10px;
}
.forum-title h3 + p {
  margin-top: 0;
}

.grid.forum-item {
  text-align: center;
}
.grid.forum-item > * {
  padding: calc(2 * var(--space)) 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid.forum-item > * div {
  width: 100%;
}
.grid.forum-item > * + * {
  border-left: 1px solid var(--blue);
}
.grid.forum-item + .grid.forum-item {
  margin-top: 0;
  border-top: 1px solid rgba(var(--blue), 0.1);
}

@media screen and (max-width: 1200px) {
  .forum-title {
    display: block;
  }
  .forum-title p {
    font-size: 0.75rem;
    padding-bottom: 10px;
  }

  .grid.forum-item {
    display: block;
  }
  .grid.forum-item > * + * {
    border-left: none;
  }
}
.create-forum-post {
  position: fixed;
  top: 8vh;
  left: 10%;
  z-index: 99;
  opacity: 0;
  transform: translateX(-60vw) translateY(50vw) scale(0);
  transform-origin: left;
  width: 80vw;
}
.create-forum-post.open {
  -webkit-animation: nicelyIn 1s forwards;
          animation: nicelyIn 1s forwards;
}

.create-forum-post-inner {
  background: var(--white);
  padding: calc(2 * var(--space)) calc(3 * var(--space));
  border-bottom-left-radius: calc(1 * var(--space));
  border-bottom-right-radius: calc(1 * var(--space));
  box-shadow: 1px 5px 10px 0 rgba(0, 0, 0, 0.16);
  height: 60vh;
  overflow: auto;
}

.custom-image-upload {
  display: flex;
  height: 100%;
  width: 100%;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: calc(1 * var(--space));
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.2s ease;
}
.custom-image-upload .icon {
  height: 1.3rem;
  margin-right: 0.5rem;
}
.custom-image-upload input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}
.custom-image-upload:hover, .custom-image-upload:focus-within {
  border-radius: 0;
}

.forum-post {
  border: 1px solid var(--blue);
}
.forum-post header {
  background: var(--blue);
  color: var(--white);
  padding: calc(0.5 * var(--space));
  display: grid;
  grid-template-columns: 10fr 2fr;
  align-items: center;
}

.add-reply {
  margin-top: 2rem;
}

.forum-comment {
  display: grid;
  grid-template-columns: 1fr 4fr;
  background: var(--white);
}
.forum-comment .profile {
  padding: calc(2 * var(--space)) calc(1 * var(--space));
  text-align: center;
}
.forum-comment .profile img {
  max-width: 10rem;
  margin-bottom: 1rem;
}
.forum-comment .comment {
  padding: calc(2 * var(--space)) calc(1 * var(--space));
}
.forum-comment .forum-post-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 0.75rem;
  padding: 0 calc(1 * var(--space));
  padding-bottom: calc(1 * var(--space));
}
.forum-comment:nth-child(odd) {
  background: var(--offwhite);
}

.trumbowyg-box {
  background: var(--white);
}

.forum-control {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: var(--blue);
  border: 1px solid var(--blue);
  transition: 0.2s ease;
}
.forum-control:hover, .forum-control:focus {
  background: var(--blue);
  color: var(--white);
  border-radius: 0.5rem;
}

.forum-bug-image {
  margin-right: 2rem;
}

.forum-post .comment img, .forum-bug-image img {
  max-height: 10rem;
  width: auto;
}

.trumbowyg-modal-box .trumbowyg-modal-button {
  padding: 0;
}

.trumbowyg-editor img {
  max-height: 10rem;
  width: auto;
}

.forum-post-preview {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  margin-top: 2rem;
  border: 1px solid var(--blue);
}
.forum-post-preview blockquote {
  background: none;
}
.forum-post-preview .poster-title {
  display: block;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 992px) {
  .forum-post-preview .poster-title {
    display: none;
  }
  .forum-post-preview:first-child {
    margin-top: 3rem;
  }
  .forum-post-preview:first-child .poster-title {
    display: block;
    transform: translateY(-3.5rem);
    margin: 0 -1rem;
    margin-bottom: -1rem;
  }
}
.forum-post-preview .poster {
  padding: 2rem;
}
.forum-post-preview .poster.created-by {
  border-right: 1px solid var(--blue);
}
.forum-post-preview .poster.updated-by {
  border-left: 1px solid var(--blue);
}
.forum-post-preview .poster .user-avatar {
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}
.forum-post-preview .post-details {
  padding: 2rem;
}

.forum-header-link {
  padding-bottom: 0.5rem;
}
.forum-header-link a {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1200px) {
  .forum-post header {
    display: block;
  }

  .forum-comment {
    display: block;
  }
}
@media screen and (max-width: 992px) {
  .forum-post-preview {
    grid-template-columns: 1fr 1fr;
  }
  .forum-post-preview .post-details {
    border-bottom: 1px solid var(--blue);
  }
  .forum-post-preview .poster.updated-by {
    border-left: 0;
  }
}
.national-focus {
  background: #22211d;
  height: 100%;
  overflow: auto;
  position: relative;
}

.focus-delete {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 2rem;
  opacity: 0;
  pointer-events: none;
  background: var(--white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: 0.2s ease;
}
.focus-delete:hover {
  background: rgba(0, 0, 0, 0);
  color: var(--white);
}

.delete-mode .focus-delete {
  opacity: 1;
  pointer-events: initial;
}

.focus-item {
  text-align: center;
  width: 220px;
  cursor: pointer;
  position: absolute;
  z-index: 2;
}
.focus-item.small {
  width: 175px;
}
.focus-item.active {
  z-index: 5;
}
.focus-item.ui-selected .focus-title, .focus-item.ui-selecting .focus-title {
  background: var(--blue);
}

.focus-title {
  border-radius: 30px;
  border: solid 3px #818088;
  background-image: linear-gradient(to bottom, #6d7971, #1b1b1b);
  color: var(--white);
  padding: calc(0.75 * var(--space));
}

.focus-image {
  width: 100px;
  margin-bottom: -1.5rem;
}

.small .focus-image {
  width: 75px;
}
.small .focus-title {
  padding: 0.25rem;
  font-size: 0.75rem;
}

.focus-json {
  display: none;
}

.deleting-focus .focus-delete {
  opacity: 1;
  pointer-events: initial;
}
.deleting-focus .focus-image, .deleting-focus .focus-title {
  filter: blur(2px);
}

.focus-connector {
  position: absolute;
  background: #99a4b6;
}
.focus-connector.left:before, .focus-connector.right:before {
  content: "";
  position: absolute;
  top: 0;
  transform: translateY(-8px);
}
.focus-connector.left:before {
  left: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 15px 8.5px 0;
  border-color: transparent #164713 transparent transparent;
}
.focus-connector.right:before {
  right: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 0 8.5px 15px;
  border-color: transparent transparent transparent #164713;
}
.focus-connector.centre {
  background: #22211d;
  color: var(--red);
  font-size: 20px;
  z-index: 2;
  text-align: center;
}
.focus-connector.centre:before, .focus-connector.centre:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-4px);
}
.focus-connector.centre:before {
  left: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 15px 8.5px 0;
  border-color: transparent #164713 transparent transparent;
}
.focus-connector.centre:after {
  right: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 0 8.5px 15px;
  border-color: transparent transparent transparent #164713;
}
.focus-connector[data-direction=vertical] {
  width: 2px;
}
.focus-connector[data-direction=horizontal] {
  height: 2px;
}
.focus-connector.mutual[data-direction=vertical] {
  width: 12px;
}

.focus-relation-list {
  border: 1px solid var(--blue);
  padding: 1rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.focus-relation-list .focus-item {
  position: relative;
}
.focus-relation-list .focus-item:before {
  content: "+";
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  color: var(--red);
  background: var(--white);
  transform: translate(-50%, -50%) rotate(30deg);
  opacity: 0;
  transition: 0.2s ease;
  border-radius: 50%;
}
.focus-relation-list .focus-item:hover:before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}
.focus-relation-list + .focus-relation-list {
  margin-top: 1rem;
}
.focus-relation-list:after {
  content: "+";
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--white);
  background: var(--blue);
  border-radius: 50%;
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.singleOnly .focus-relation-list + .addNewFocusRelationGroup {
  display: none;
}

.focus-search-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: 50%;
  overflow: auto;
}
.focus-search-list .focus-item {
  position: relative;
  margin-top: 1rem;
  border: 1px solid rgba(0, 0, 0, 0);
  transition: 0.2s ease;
}
.focus-search-list .selected {
  border-color: var(--blue);
  border-radius: calc(1 * var(--space));
}

#focusRelationModal .modal-content {
  min-height: 60vh;
}

#all-focuses {
  transform-origin: top left;
  transition: 0.2s ease;
  min-width: 800vw;
  min-height: 600vw;
}
#all-focuses[style*=transform] .focus-json + .modal[tool=focus] {
  left: calc(1 * var(--space));
}
#all-focuses[style*=transform] .modal + .modal {
  left: calc(35vw + calc(2 * var(--space)));
}
@media screen and (max-width: 800px) {
  #all-focuses[style*=transform] .modal + .modal {
    left: 3vw;
  }
}

.focus-zoom-controls {
  position: fixed;
  bottom: 4rem;
  right: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.2);
  border-radius: calc(0.5 * var(--space));
  display: flex;
  z-index: 999;
  color: white;
}
.focus-zoom-controls .increase, .focus-zoom-controls .decrease {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0);
  transition: 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.focus-zoom-controls .increase:hover, .focus-zoom-controls .decrease:hover {
  background: rgba(255, 255, 255, 0.2);
}
.focus-zoom-controls .increase {
  cursor: zoom-in;
}
.focus-zoom-controls .decrease {
  cursor: zoom-out;
}
.focus-zoom-controls .current-zoom {
  padding: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  text-align: center;
  width: 4rem;
}
.focus-zoom-controls .current-zoom:after {
  content: "%";
}

.continuous-focuses {
  position: absolute;
  width: calc(220px * 4.5);
  height: calc(190px * 3);
  background: #2d2220;
  border-radius: calc(1 * var(--space));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: white;
  z-index: 2;
}
.continuous-focuses[data-x=""][data-y=""] {
  display: none;
}

.country-title-box {
  border: 1px solid var(--blue);
  border-radius: calc(1 * var(--space));
  position: relative;
  padding: calc(2 * var(--space));
}
.country-title-box .box-title {
  position: absolute;
  top: 0;
  left: calc(2 * var(--space));
  background: var(--pageBackground);
  padding: 0.1rem 0.2rem;
  transform: translateY(-50%) translateY(-0.1rem);
  text-transform: capitalize;
}
.country-title-box .input-wrapper label {
  background: var(--pageBackground);
}

.country-ideologies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: calc(4 * var(--space));
  padding-top: calc(2 * var(--space));
}

#state-map [id*=state-] {
  transition: 0.2s ease;
  cursor: pointer;
  /*
  *{
  	fill: colour(dark-blue) !important;
  	stroke: colour(dark-blue) !important;
  }

  &:nth-child(odd){
  	*{
  		fill: colour(dark-blue) !important;
  		stroke: colour(dark-blue) !important;
  	}
  }
  */
}
#state-map [id*=state-][data-core] * {
  fill: var(--countryColour) !important;
  stroke: var(--countryColour) !important;
  opacity: 0.3;
}
#state-map [id*=state-][data-control] * {
  fill: var(--countryColour) !important;
  stroke: var(--countryColour) !important;
}
#state-map [id*=state-][data-core][data-control] * {
  stroke: var(--green) !important;
  stroke-width: 0.1em;
}
#state-map [id*=state-]:hover {
  opacity: 0.75;
}
#state-map svg > *:not([id*=state-]) {
  fill: var(--blue) !important;
  stroke: var(--blue) !important;
  opacity: 0.5;
}

.state-map-details {
  position: absolute;
  bottom: calc(1 * var(--space));
  left: calc(1 * var(--space));
  padding: calc(1.5 * var(--space));
  z-index: 2;
  background: var(--white);
  border: 0.1em solid var(--blue);
  border-radius: calc(1 * var(--space));
}
.state-map-details .close {
  position: absolute;
  top: calc(0.5 * var(--space));
  right: calc(0.5 * var(--space));
  cursor: pointer;
}
.state-map-details .close svg {
  height: 1em !important;
}

.state-map-wrapper {
  position: relative;
}

.country-flag-preview {
  max-height: 7rem;
}

.country-data-save {
  position: fixed;
  right: calc(1 * var(--space));
  bottom: calc(3 * var(--space));
  display: none;
}
.country-data-save .saving {
  display: none;
}
.country-data-save .saving svg {
  margin-right: 0;
  -webkit-animation: spin infinite 2s ease;
          animation: spin infinite 2s ease;
}
.country-data-save.saving {
  pointer-events: none;
}
.country-data-save.saving .text {
  display: none;
}
.country-data-save.saving .saving {
  display: inline-block;
}

.division-designer {
  background: #22211d;
  padding: calc(1.5 * var(--space)) calc(2 * var(--space));
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-gap: calc(2.5 * var(--space));
}
.division-designer .division-data {
  grid-column-end: span 2;
}
.division-designer .main-units {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: calc(1 * var(--space));
}
.division-designer .unit {
  border: 1px solid #818088;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.division-designer .unit select {
  width: 100%;
  background: rgba(0, 0, 0, 0);
  color: #CDCDCD;
}
.division-designer .unit select option {
  background: #22211d;
}
.division-designer .unit input {
  background: #22211d;
  color: #CDCDCD;
  border: none;
  width: 100%;
}
.division-designer .unit + .unit {
  margin-top: calc(1.5 * var(--space));
}
.division-designer #divisionName, .division-designer #divisionStartDate {
  padding: calc(0.5 * var(--space)) calc(1 * var(--space));
  border: 1px solid #818088;
  background: rgba(255, 255, 255, 0.75);
  border-radius: calc(0.25 * var(--space));
}

#division-province-map svg [id*=state-] * {
  transition: 0.2s ease;
  cursor: pointer;
}
#division-province-map svg [id*=state-] *:hover {
  opacity: 0.75;
}
#division-province-map svg [id*=state-] *[data-has-troops] {
  fill: var(--dark-grey) !important;
  stroke-color: var(--dark-grey) !important;
}
#division-province-map svg > *:not([id*=state-]) {
  fill: var(--pageBackground) !important;
  stroke: var(--pageBackground) !important;
}

.division-province-edit {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - ((2 * calc(1 * var(--space))) + 1.2rem));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}
.division-province-edit .grid {
  position: relative;
}
.division-province-edit .grid .close {
  position: absolute;
  bottom: 100%;
  right: 0;
  font-size: 1.1rem;
  cursor: pointer;
}

.division-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.division-name .edit-icon {
  color: var(--blue);
  cursor: pointer;
  margin-right: 0.25rem;
}
.division-name .delete-icon {
  color: var(--red);
  cursor: pointer;
}

.division-information-date {
  margin-top: calc(2 * var(--space));
}

.division-information.bring-up .division-information-date:first-child {
  margin-top: 0;
}

.divisionProvinceSelector {
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1rem;
  grid-gap: 1rem;
}
.divisionProvinceSelector span {
  color: var(--blue);
}

.government-options {
  display: grid;
  grid-gap: calc(1 * var(--space));
  grid-template-columns: repeat(6, 1fr);
}
@media screen and (max-width: 992px) {
  .government-options {
    grid-template-columns: repeat(2, 1fr);
  }
}
.government-options .image-wrapper {
  padding: calc(0.1 * var(--space));
  position: relative;
  border-radius: calc(0.5 * var(--space));
  display: inline-block;
  font-size: 0;
}
.government-options .image-wrapper:after {
  content: "";
  background: var(--blue);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(0.5 * var(--space));
}
.government-options .option {
  position: relative;
}
.government-options .option input[type=radio] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}
.government-options .option input[type=radio]:checked ~ .image-wrapper {
  border: 2px solid var(--blue);
}
.government-options .option input[type=radio]:checked ~ .image-wrapper:after {
  opacity: 0.3;
}
.government-options .option img {
  max-height: 5rem;
}
.government-options .option .edit, .government-options .option .delete {
  opacity: 0;
  transition: 0.1s ease;
  pointer-events: none;
  position: absolute;
  font-size: 1.1rem;
  top: -10%;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pageBackground);
  z-index: 2;
}
.government-options .option .edit {
  right: 60%;
  color: var(--blue);
}
.government-options .option .delete {
  left: 60%;
  color: var(--red);
}
.government-options .option:hover .edit, .government-options .option:hover .delete {
  opacity: 1;
  pointer-events: initial;
}

.military-generals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: calc(1 * var(--space));
}
.military-generals .option {
  border: 1px solid var(--blue);
  border-radius: calc(1 * var(--space));
  position: relative;
  cursor: pointer;
}
.military-generals h4 {
  font-size: 20px;
}
.military-generals ul {
  font-size: 16px;
  padding-left: 1em;
}
.military-generals .staff-image {
  height: 12rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top-left-radius: calc(1 * var(--space));
  border-top-right-radius: calc(1 * var(--space));
  transition: 0.3s ease;
}
.military-generals .staff-info {
  padding: calc(1 * var(--space));
  padding-bottom: calc(2 * var(--space));
  transition: 0.2s ease;
}
.military-generals .staff-info .staff-type {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateY(50%) translateX(-50%);
  border: 1px solid var(--blue);
  background: var(--pageBackground);
  padding: calc(0.25 * var(--space)) calc(0.5 * var(--space));
  border-radius: 2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.military-generals.shrink .staff-image {
  height: 0;
}
.military-generals.shrink .staff-type, .military-generals.shrink ul {
  display: none;
}
.military-generals.shrink .staff-info {
  padding-bottom: calc(1 * var(--space));
}

.map-wrapper {
  overflow: scroll;
  height: 70vh;
}
.map-wrapper .map {
  min-height: calc(100% + 1px);
  transition: 0.2s ease;
  position: relative;
}
.map-wrapper .map svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.staff-delete {
  display: none;
  cursor: pointer;
  position: absolute;
  top: calc(1 * var(--space));
  right: calc(1 * var(--space));
  color: var(--red);
  font-size: 1.5rem;
  transition: 0.2s ease;
}
.staff-delete:hover {
  color: var(--blue);
}

.option:hover .staff-delete {
  display: block;
}

.general-shrink {
  display: inline-block;
  vertical-align: middle;
}
.general-shrink-title {
  cursor: pointer;
}

.show-capital-map {
  cursor: pointer;
}

.capital-map {
  position: fixed;
  bottom: calc(1 * var(--space));
  right: calc(1 * var(--space));
  width: 70vw;
  display: none;
  z-index: 99;
}
.capital-map #capital-map svg [id*=state-] * {
  cursor: pointer;
  fill: var(--white) !important;
  stroke: var(--white) !important;
}
.capital-map #capital-map svg [id*=state-]:hover * {
  fill: var(--dark-blue) !important;
  stroke: var(--dark-blue) !important;
}
.capital-map #capital-map svg [id*=state-][data-isCapital] * {
  fill: var(--green) !important;
  stroke: var(--green) !important;
}
.capital-map #capital-map svg > *:not([id*=state-]) {
  fill: var(--blue) !important;
  stroke: var(--blue) !important;
}

.country-popup-edit {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  margin-bottom: 0.5rem;
}
.country-popup-edit.title {
  border-bottom: 1px solid var(--blue);
  padding-bottom: 0.25rem;
}
.country-popup-edit .name {
  text-transform: capitalize;
}
.country-popup-edit .add, .country-popup-edit .remove {
  text-align: center;
}
.country-popup-edit .add .fakebox, .country-popup-edit .remove .fakebox {
  grid-template-columns: 1rem;
  width: 1rem;
  margin: 0 auto;
}
.country-popup-edit .add input[disabled] + .checkbox > *, .country-popup-edit .remove input[disabled] + .checkbox > * {
  opacity: 1;
}

.research-items {
  padding: calc(1.5 * var(--space)) 0;
  max-height: 55vh;
  overflow: auto;
  margin-bottom: calc(1 * var(--space));
  border-radius: calc(1 * var(--space));
}

.research-item {
  display: grid;
  grid-template-columns: 1fr 2rem;
  grid-gap: 1rem;
  align-items: center;
}
.research-item .remove {
  color: var(--red);
  font-size: 2rem;
  cursor: pointer;
}
.research-item .remove svg {
  transform: translateY(0.1em);
}
.research-item + .research-item {
  margin-top: calc(1 * var(--space));
}

@media screen and (min-width: 1200px) {
  .division-designer .division-data {
    display: flex;
  }
  .division-designer .division-data input {
    width: 75%;
  }
  .division-designer .division-data select {
    width: 25%;
  }
  .division-designer .division-data > * + * {
    margin-left: calc(1 * var(--space));
  }

  .military-generals {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 1200px) {
  .country-ideologies, .military-generals {
    grid-template-columns: 1fr;
  }
}
.country-edit-tabs {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--pageBackground);
  z-index: 1;
}

.country-dates {
  display: flex;
  border: 2px solid var(--blue);
}

.country-date-button {
  padding: calc(0.75 * var(--space));
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
}
.country-date-button + .country-date-button {
  border-left: 2px solid var(--blue);
}
.country-date-button:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--blue);
}
.country-date-button.active {
  background: var(--blue);
  color: var(--white);
}

.country-sections {
  margin-top: calc(1 * var(--space));
}

.country-section {
  height: 0;
  overflow: hidden;
}
.country-section.active {
  height: auto;
  padding-top: calc(1 * var(--space));
}

.country-save {
  position: fixed;
  bottom: calc(3.5 * var(--space));
  right: calc(1.5 * var(--space));
}

.setCharacterButton {
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  padding: calc(0.5 * var(--space));
}
.setCharacterButton img {
  max-height: calc(2 * var(--space));
  max-width: calc(2 * var(--space));
  margin-right: calc(1 * var(--space));
}

.military-preview {
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr 4fr;
  align-items: center;
  border-radius: calc(0.5 * var(--space));
  grid-gap: calc(1 * var(--space));
  font-size: 1.1rem;
  position: relative;
  padding: calc(0.75 * var(--space)) calc(1 * var(--space));
  margin-top: calc(0.5 * var(--space));
  margin-bottom: calc(0.5 * var(--space));
}
.military-preview img {
  max-height: 7rem;
}
.military-preview .delete {
  display: none;
  cursor: pointer;
  color: var(--red);
  position: absolute;
  top: calc(0.2 * var(--space));
  right: calc(0.2 * var(--space));
}
.military-preview:hover .delete {
  display: block;
}

#division-modal .map-wrapper {
  margin: calc(-2 * var(--space)) calc(-3 * var(--space));
}

.idea-list {
  display: flex;
  flex-wrap: wrap;
}
.idea-list > h4 {
  width: 100%;
}
.idea-list [data-group=economy] {
  order: 1;
}
.idea-list [data-group=mobilization_laws] {
  order: 2;
}
.idea-list [data-group=political_advisor] {
  order: 3;
}
.idea-list [data-group=theorist] {
  order: 4;
}
.idea-list [data-group=army_chief] {
  order: 5;
}
.idea-list [data-group=air_chief] {
  order: 6;
}
.idea-list [data-group=navy_chief] {
  order: 7;
}
.idea-list [data-group=high_command] {
  order: 8;
}
.idea-list [data-group=country] {
  order: 9;
}
.idea-list .idea {
  background: var(--white);
  padding: calc(1 * var(--space));
  border-radius: calc(1 * var(--space));
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  position: relative;
  cursor: pointer;
  max-width: 27%;
  margin-right: calc(1 * var(--space));
}
.idea-list .idea + .idea {
  margin-top: 1rem;
}
.idea-list .idea .idea-title {
  margin-left: 1rem;
}
.idea-list .idea .idea-title .name {
  font-size: 1.2rem;
  font-weight: 500;
}
.idea-list .idea .idea-title .name + p {
  margin-top: 0.5rem;
}
.idea-list .idea .idea-delete {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  top: calc(1 * var(--space));
  right: calc(1 * var(--space));
  width: 2rem;
  height: 2rem;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  transition: 0.2s ease;
}
.idea-list .idea:hover .idea-delete {
  opacity: 1;
  pointer-events: initial;
}

.idea-list .grid .idea {
  max-width: 100%;
}

.selected-traits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: calc(1 * var(--space));
}
.selected-traits.full {
  grid-template-columns: 1fr;
}

.trait-item {
  padding: calc(0.5 * var(--space)) calc(1 * var(--space));
  position: relative;
  background: var(--blue);
  color: var(--white);
  border-radius: 0.25rem;
}
.trait-item:after {
  content: attr(data-id);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: calc(0.5 * var(--space)) calc(1 * var(--space));
  background: var(--blue);
  color: var(--white);
  border-radius: 0.25rem;
  opacity: 0;
}
.trait-item:hover:after {
  opacity: 1;
}
@supports (-webkit-line-clamp: 1) {
  .trait-item {
    -webkit-line-clamp: 1;
    border-radius: 0.25rem;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    line-height: 2.5;
  }
}
.trait-item .remove, .trait-item .add {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: calc(1.2 * var(--space));
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.trait-item .remove:hover, .trait-item .add:hover {
  color: var(--red);
}

@media screen and (max-width: 1200px) {
  .idea-list .idea {
    max-width: 42%;
  }

  .selected-traits {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 576px) {
  .idea-list .idea {
    max-width: 100%;
    margin-right: 0;
  }
}
.event-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: calc(2 * var(--space));
}

.event {
  position: relative;
  z-index: 2;
  padding: calc(2 * var(--space));
}
.event .event-game-id {
  position: absolute;
  opacity: 0;
  top: calc(100% - 2em);
  left: calc(1 * var(--space));
}
.event-title, .event-image {
  cursor: pointer;
}
.event .event-delete {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(1 * var(--space));
  right: calc(1 * var(--space));
  color: var(--red);
  background: var(--white);
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s ease;
  cursor: pointer;
  z-index: 3;
  border-radius: 50%;
}
.event:hover .event-delete {
  opacity: 1;
  pointer-events: initial;
}
.event:hover .event-game-id {
  opacity: 1;
}
.event:hover .event-option-wrapper .event-delete {
  opacity: 0;
  pointer-events: none;
}
.event:hover .event-option-wrapper:hover .event-delete {
  opacity: 1;
  pointer-events: initial;
}
.event .news-title {
  text-align: justify;
  position: relative;
  padding-left: 2rem;
  padding-right: 2rem;
}
.event .news-title:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.event .news-title:before {
  content: "";
  position: absolute;
  left: 5%;
  width: 90%;
  height: 1px;
  top: calc(100% - 1rem);
  background: var(--text);
}
.event .underlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top, #BCACA2, transparent), radial-gradient(ellipse at bottom, #C1B8B3, transparent);
  z-index: -1;
  border-radius: 0.1rem;
}
.event .underlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #C1B8B3;
  border-radius: 0.1rem;
}
.event .underlay .stain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.event .underlay .stain svg {
  height: 100%;
  width: auto;
  transform: rotate(217deg) translateX(calc(-3 * var(--space))) translateY(calc(2 * var(--space)));
  opacity: 0.02;
}
.event .underlay .stain svg * {
  fill: #BCACA2;
  stroke: #BCACA2;
}
.event .event-options {
  margin-top: 1rem;
}
.event .event-option-wrapper {
  position: relative;
}
.event .event-option {
  margin-left: 10%;
  width: 80%;
  padding: 1rem;
  text-align: center;
  color: #FFFFFF;
  position: relative;
  background: none;
  border: none;
  margin-top: 1rem;
  cursor: pointer;
}
.event .event-option:after {
  content: "";
  background: linear-gradient(to bottom, #44443C 0%, #44443C 33.2%, #635D3F 33.3%, #635D3F 66.5%, #44443C 66.6%, #44443C 100%);
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.9;
  transition: 0.8s ease;
}
.event .event-option:hover:after {
  background: linear-gradient(to bottom, #44443C 0%, #635D3F 50%, #44443C 100%);
}
.event[data-type=news] .event-image {
  margin: calc(1 * var(--space)) auto;
  display: block;
}
.event[data-type=news] .event-title {
  text-align: center;
  font-size: 1.5rem;
  font-family: "Raleway", sans-serif;
}
.event[data-type=news] .event-description {
  margin-top: calc(1 * var(--space));
}
.event[data-type=news] .underlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #b6aba5;
  z-index: -1;
  transform: translateY(0.2rem) translateX(0.3rem) rotate(2deg);
  border-radius: 0.1rem;
}
.event[data-is-open=true] {
  z-index: 5;
}
.event[data-type=country] {
  align-self: flex-start;
}
.event[data-type=country] .event-title {
  text-align: center;
  font-size: 1.5rem;
  font-family: "Raleway", sans-serif;
}
.event[data-type=country] .event-description {
  margin-bottom: calc(1 * var(--space));
}
.event[data-type=country] .event-image {
  transform: rotate(-3deg);
}
@media screen and (min-width: 992px) {
  .event[data-type=country] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: calc(1 * var(--space));
  }
  .event[data-type=country] .event-image {
    order: 3;
  }
  .event[data-type=country] .event-options {
    order: 4;
    align-self: flex-start;
  }
  .event[data-type=country] [gfxlist=gfx-list], .event[data-type=country] .modal {
    order: 6;
  }
  .event[data-type=country] .event-title {
    grid-column-end: span 2;
  }
  .event[data-type=country] .event-description {
    grid-column: 1/span 2;
  }
}

@media screen and (max-width: 1200px) {
  .event-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 992px) {
  .event-list {
    grid-template-columns: 1fr;
  }
}
.start-date-wrapper {
  border-radius: calc(1 * var(--space));
  background: var(--white);
  padding: calc(2 * var(--space));
}

.selected-country {
  padding: calc(1 * var(--space));
  background: var(--offwhite);
  border-radius: calc(1 * var(--space));
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.selected-country svg {
  cursor: pointer;
}
.selected-country .num {
  margin-right: 0.5rem;
}
.selected-country h5, .selected-country h6 {
  margin: 0 0.5rem;
  cursor: pointer;
}
.selected-country .icon-edit {
  margin-left: auto;
  color: var(--blue);
}
.selected-country .icon-trash-2 {
  margin-left: 1rem;
  color: var(--red);
}

.ideology-delete-icon {
  color: var(--red);
  cursor: pointer;
  font-size: 1.2em;
}

.ideology-restricted-checkbox, .ideology-delete-icon {
  align-self: center;
}

.ideology-label-grid {
  font-family: "Raleway", sans-serif;
  font-size: 1.25rem;
}

@media screen and (max-width: 1200px) {
  .ideology-label-grid {
    display: none;
  }

  .ideology-grid-labelled {
    display: grid;
    grid-template-columns: 4fr 1fr;
  }
  .ideology-grid-labelled > * {
    grid-column-end: span 2;
  }
  .ideology-grid-labelled > *:nth-last-child(2) {
    grid-column: 1/span 1;
  }
  .ideology-grid-labelled > *:nth-last-child(1) {
    grid-column: 2/span 1;
  }
  .ideology-grid-labelled [data-label]:before {
    content: attr(data-label);
    font-family: "Raleway", sans-serif;
    font-size: 1.25rem;
  }
  .ideology-grid-labelled .ideology-delete-icon {
    align-self: flex-end;
  }
}
.decision-header {
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  grid-gap: 2rem;
  align-items: center;
  background: #3d2e21;
  padding: 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.decision-header .decision-image {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.decision-header .decision-title {
  background: #1c1b17;
  color: #ffffff;
  height: calc(100% - 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.5);
}

.decision-list {
  background: #1a1a1a;
}

.decision-description {
  display: flex;
  align-items: center;
  padding: 0.5rem;
}
.decision-description-text {
  width: 100%;
  color: #ffffff;
}
.decision-description-image {
  width: 8rem;
  margin-right: 2rem;
}
.decision-description-image + .decision-description-text {
  width: calc(100% - 10rem);
}

.decision-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: center;
  position: relative;
  background: linear-gradient(to bottom, #3d2e21 5%, #1b1b1b);
  padding: calc(0.5 * var(--space)) calc(1 * var(--space));
  margin-top: calc(0.1 * var(--space));
  border-radius: calc(0.25 * var(--space));
}
.decision-item .decision-title {
  padding-left: calc(2 * var(--space));
  color: #FFFFFF;
}
.decision-item .decision-delete {
  position: absolute;
  top: 50%;
  right: calc(1 * var(--space));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  color: var(--red);
  background: var(--white);
  padding: calc(0.5 * var(--space));
  cursor: pointer;
}
.decision-item .decision-delete svg {
  pointer-events: none;
}
.decision-item:hover .decision-delete {
  opacity: 1;
  pointer-events: initial;
}

.research-upper {
  margin: 20px calc(1 * var(--space));
  background: var(--white);
  padding: calc(1 * var(--space)) calc(2 * var(--space));
  border-radius: calc(1 * var(--space));
  display: grid;
  grid-template-columns: 1fr 6fr;
  grid-gap: calc(1 * var(--space));
}

.research-area {
  margin-top: calc(1 * var(--space));
  height: 100vh;
  background-color: #22211d;
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

.character-info {
  padding-top: calc(0.75 * var(--space));
  padding-bottom: calc(0.75 * var(--space));
  display: none;
  padding-left: calc(0.5 * var(--space));
  border-left: 5px solid var(--blue);
}

.character-type-checkbox:checked + .fakebox + .character-info {
  display: block;
}

.character-preview {
  display: grid;
  grid-template-columns: 1fr 3fr;
  background: var(--white);
  grid-gap: calc(1 * var(--space));
  border-radius: calc(1 * var(--space));
}
.character-preview .image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.character-preview .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0 calc(1 * var(--space));
  padding: calc(1 * var(--space));
}
.character-preview .content h4 {
  grid-column-end: span 2;
}
.character-preview .content .character-type {
  display: flex;
  align-items: center;
}
.character-preview .content .character-type svg {
  margin-left: calc(0.75 * var(--space));
}
.character-preview .content .buttons {
  grid-column-end: span 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.character-preview .content .buttons .button + .button {
  margin-top: 0;
}

.character-list {
  padding-bottom: calc(5 * var(--space));
}
.character-list .character-buttons {
  position: fixed;
  bottom: 4rem;
  right: calc(1 * var(--space));
}

@media screen and (min-width: 992px) {
  .character-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: calc(1 * var(--space));
  }
}
.trait-sprite-select-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: calc(0.25 * var(--space));
}
@media screen and (max-width: 420px) {
  .trait-sprite-select-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.trait-sprite-select-wrapper .option .image {
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  border: 1px solid var(--blue);
  border-radius: calc(0.5 * var(--space));
  cursor: pointer;
}
.trait-sprite-select-wrapper .option:nth-child(1) .image {
  background-image: url("/media/trait-sprite/1");
}
.trait-sprite-select-wrapper .option:nth-child(2) .image {
  background-image: url("/media/trait-sprite/2");
}
.trait-sprite-select-wrapper .option:nth-child(3) .image {
  background-image: url("/media/trait-sprite/3");
}
.trait-sprite-select-wrapper .option:nth-child(4) .image {
  background-image: url("/media/trait-sprite/4");
}
.trait-sprite-select-wrapper .option:nth-child(5) .image {
  background-image: url("/media/trait-sprite/5");
}
.trait-sprite-select-wrapper .option:nth-child(6) .image {
  background-image: url("/media/trait-sprite/6");
}
.trait-sprite-select-wrapper .option:nth-child(7) .image {
  background-image: url("/media/trait-sprite/7");
}
.trait-sprite-select-wrapper .option:nth-child(8) .image {
  background-image: url("/media/trait-sprite/8");
}
.trait-sprite-select-wrapper .option:nth-child(9) .image {
  background-image: url("/media/trait-sprite/9");
}
.trait-sprite-select-wrapper .option:nth-child(10) .image {
  background-image: url("/media/trait-sprite/10");
}
.trait-sprite-select-wrapper .option:nth-child(11) .image {
  background-image: url("/media/trait-sprite/11");
}
.trait-sprite-select-wrapper .option:nth-child(12) .image {
  background-image: url("/media/trait-sprite/12");
}
.trait-sprite-select-wrapper .option:nth-child(13) .image {
  background-image: url("/media/trait-sprite/13");
}
.trait-sprite-select-wrapper .option:nth-child(14) .image {
  background-image: url("/media/trait-sprite/14");
}
.trait-sprite-select-wrapper .option:nth-child(15) .image {
  background-image: url("/media/trait-sprite/15");
}
.trait-sprite-select-wrapper .option:nth-child(16) .image {
  background-image: url("/media/trait-sprite/16");
}
.trait-sprite-select-wrapper .option:nth-child(17) .image {
  background-image: url("/media/trait-sprite/17");
}
.trait-sprite-select-wrapper .option:nth-child(18) .image {
  background-image: url("/media/trait-sprite/18");
}
.trait-sprite-select-wrapper .option:nth-child(19) .image {
  background-image: url("/media/trait-sprite/19");
}
.trait-sprite-select-wrapper .option:nth-child(20) .image {
  background-image: url("/media/trait-sprite/20");
}
.trait-sprite-select-wrapper .option input {
  display: none;
}
.trait-sprite-select-wrapper .option input:checked ~ .image {
  background-color: var(--blue);
}

.help-box {
  position: fixed;
  z-index: 99;
  top: 5.2083333333vw;
  left: 13.5416666667vw;
  width: 29.1666666667vw;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20vw) translateY(50vw) scale(0);
  transform-origin: left;
  transition: 0.5s ease;
  max-height: 80vh;
  overflow: auto;
}
@media screen and (max-width: 1600px) {
  .help-box {
    width: 50vw;
  }
}
@media screen and (max-width: 800px) {
  .help-box {
    width: 90vw;
  }
}
.help-box.open {
  pointer-events: initial;
  opacity: 1;
  transform: translateX(0);
}
.help-box.browser-alert {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: initial;
}
.help-box.browser-alert .close {
  display: none;
}
.help-box.static {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: initial;
}
.help-box.full-width {
  width: 100%;
}

.help-box-header {
  position: relative;
  padding: calc(1 * var(--space)) calc(3 * var(--space));
  color: var(--white);
  background: var(--blue);
  border-top-left-radius: calc(1 * var(--space));
  border-top-right-radius: calc(1 * var(--space));
  text-align: center;
}
.help-box-header .close {
  position: absolute;
  top: 50%;
  right: calc(1.5 * var(--space));
  transform: translateY(-50%) translateY(0.25rem);
  font-size: 1.5rem;
  cursor: pointer;
}

.help-box-content {
  background: var(--white);
  padding: calc(2 * var(--space)) calc(3 * var(--space));
  border-bottom-left-radius: calc(1 * var(--space));
  border-bottom-right-radius: calc(1 * var(--space));
}

.modal {
  position: fixed;
  z-index: 99;
  top: 2vh;
  width: 35vw;
  left: 13vw;
  opacity: 0;
  transform: translateX(-20vw) translateY(50vw) scale(0);
  transform-origin: left;
  -webkit-animation: nicelyIn 1s forwards;
          animation: nicelyIn 1s forwards;
  cursor: initial;
  box-shadow: 1px 5px 1rem 0 rgba(0, 0, 0, 0.4);
  border-radius: calc(1 * var(--space));
  max-height: 90vh;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modal::-webkit-scrollbar {
  display: none;
}
.modal + .modal, .modal.force-second {
  left: 49vw;
}
@media screen and (max-width: 800px) {
  .modal {
    width: 80vw;
  }
  .modal + .modal, .modal.force-second {
    left: 0vw;
    z-index: 100;
  }
}
.modal.centred {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: none;
          animation: none;
}
.modal.wide {
  width: 80vw;
}
.modal.show {
  opacity: 1;
  pointer-events: initial;
}

.modal-header {
  position: relative;
  padding: calc(1 * var(--space)) calc(3 * var(--space));
  color: var(--white);
  background: var(--blue);
  border-top-left-radius: calc(1 * var(--space));
  border-top-right-radius: calc(1 * var(--space));
  text-align: center;
}
.modal-header .close {
  position: absolute;
  top: 50%;
  right: calc(1.5 * var(--space));
  transform: translateY(-50%) translateY(0.25rem);
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--white);
}

.modal-content {
  background: var(--white);
  padding: calc(2 * var(--space)) calc(3 * var(--space));
  border-bottom-left-radius: calc(1 * var(--space));
  border-bottom-right-radius: calc(1 * var(--space));
}

.import-modal {
  transform: translateX(-20vw) translateY(50vw) scale(0);
  -webkit-animation: none;
          animation: none;
}
.import-modal.open {
  -webkit-animation: nicelyIn 1s forwards;
          animation: nicelyIn 1s forwards;
}

.modal-cover {
  position: absolute;
  width: calc(100% - calc(6 * var(--space)));
  height: calc(100% - calc(4 * var(--space)));
  bottom: 0;
  left: 0;
  padding: calc(2 * var(--space)) calc(3 * var(--space));
  border-bottom-left-radius: calc(1 * var(--space));
  border-bottom-right-radius: calc(1 * var(--space));
  background: var(--white);
  z-index: 10;
}

.warning-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  overflow: hidden;
}

.warning-centre {
  max-width: 800px;
  width: 100%;
  margin: calc(1 * var(--space));
  padding: calc(1.5 * var(--space)) calc(2 * var(--space));
  background: var(--pageBackground);
  transform: translateY(100vh);
  transition: 0.3s ease;
  transition-delay: 0.4s;
  border-radius: calc(1 * var(--space));
}

.warning-overlay.active {
  opacity: 1;
  pointer-events: initial;
}
.warning-overlay.active .warning-centre {
  transform: translateY(0);
}

#general-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#general-modal-wrapper dialog, .dialog-modal {
  pointer-events: initial;
  max-width: clamp(600px, 100%, 90vw);
  max-height: 80vh;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
#general-modal-wrapper dialog .close, .dialog-modal .close {
  background: none;
}
#general-modal-wrapper dialog .modal-header, .dialog-modal .modal-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
}

#general-modal-wrapper dialog {
  top: 50%;
  transform: translateY(-50%);
}

.builder-modal .builder {
  white-space: pre;
}
.builder-modal .modal-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.input-with-help {
  position: relative;
}
.input-with-help .help-text {
  position: absolute;
  color: var(--blue);
  cursor: pointer;
  top: 50%;
  right: -1.5rem;
  transform: translateY(-50%);
  font-size: 1.25rem;
  display: none;
  z-index: 2;
}
.input-with-help .help-text-info {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 100%;
  border: 1px solid var(--blue);
  background: var(--white);
  box-shadow: 1px 5px 1rem 0 rgba(0, 0, 0, 0.4);
  border-radius: calc(0.25 * var(--space));
  padding: calc(0.5 * var(--space));
  font-size: 0.9rem;
  width: calc(35vw - calc(6.5 * var(--space)));
  text-align: left;
}
.input-with-help .help-text:hover .help-text-info {
  opacity: 1;
  pointer-events: initial;
}
.input-with-help.always-show-help .help-text {
  display: block;
}

.fakebox .help-text {
  display: block;
}

.input-with-help + .input-with-help, .input-with-help + .button, .input-with-help + .gfx-select, .input-with-help + .data-field, .input-with-help + .grid, .button + .input-with-help, .button + .button, .button + .gfx-select, .button + .data-field, .button + .grid, .gfx-select + .input-with-help, .gfx-select + .button, .gfx-select + .gfx-select, .gfx-select + .data-field, .gfx-select + .grid, .data-field + .input-with-help, .data-field + .button, .data-field + .gfx-select, .data-field + .data-field, .data-field + .grid, .grid + .input-with-help, .grid + .button, .grid + .gfx-select, .grid + .data-field, .grid + .grid {
  margin-top: calc(1.5 * var(--space));
}

.removeCurrentGFX {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  color: var(--red);
  background: var(--white);
  border-radius: 50%;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  z-index: 2;
  cursor: pointer;
}

.gfx-select:hover .removeCurrentGFX {
  opacity: 1;
  pointer-events: initial;
}

.icon-input {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}
.icon-input svg {
  padding-right: 0.5rem;
}
.icon-input .input-with-help .help-text .help-text-info {
  width: 20rem;
}

[list]::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
  background: transparent;
}

.grow-descendants *:not(label):not(.help-text-info) {
  height: 100%;
}

.input-wrapper {
  position: relative;
}
.input-wrapper .select-dropdown {
  position: absolute;
  top: calc(50% + 0.25em);
  right: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.input-wrapper input, .input-wrapper textarea, .input-wrapper select, .input-wrapper .default-input {
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.input-wrapper textarea {
  display: block;
}
.input-wrapper .default-input {
  padding: 1rem 1.5rem;
  border: 1px solid var(--dark-grey);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  border-radius: calc(0.5 * var(--space));
  width: 100%;
  transition: 0.1s ease;
  outline: none;
  color: var(--text);
}
.input-wrapper .default-input[list]::-webkit-calendar-picker-indicator {
  display: none;
}
.input-wrapper .default-input:focus, .input-wrapper .default-input:active {
  border-radius: 0;
  border-color: var(--blue);
}
.input-wrapper .default-input:focus ~ .help-text, .input-wrapper .default-input:active ~ .help-text {
  display: block;
}
.input-wrapper label {
  position: absolute;
  top: -0.8rem;
  left: 1.25rem;
  padding: 0.25rem;
  font-size: 0.75rem;
  background: var(--white);
  transition: 0.2s ease;
  pointer-events: none;
}
.input-wrapper .default-input:-moz-placeholder-shown:not(:active):not(:focus) ~ label {
  top: 0;
  left: 0;
  padding: calc(1rem + 1px) calc(1.5rem + 1px);
  font-size: 1rem;
  background: inherit;
}
.input-wrapper .default-input:placeholder-shown:not(:active):not(:focus) ~ label, .input-wrapper select.default-input:invalid:not(:active):not(:focus) ~ label {
  top: 0;
  left: 0;
  padding: calc(1rem + 1px) calc(1.5rem + 1px);
  font-size: 1rem;
  background: inherit;
}
.input-wrapper .default-input:-moz-placeholder-shown:not(:active):not(:focus) ~ label {
  opacity: 0;
}
.input-wrapper .default-input:placeholder-shown:not(:active):not(:focus) ~ label {
  opacity: 0;
}
.input-wrapper select.default-input:invalid:not(:active):not(:focus) ~ label {
  opacity: 0.75;
}
.input-wrapper select.default-input:invalid:not(:active):not(:focus) {
  color: var(--white);
}
.input-wrapper select.default-input:invalid:not(:active):not(:focus):focus, .input-wrapper select.default-input:invalid:not(:active):not(:focus):active {
  color: var(--text);
}
.input-wrapper select.default-input:invalid:not(:active):not(:focus) ~ label {
  top: -0.1rem;
}

.input-wrapper .trumbowyg-box + label {
  margin-top: -0.85rem;
}

button {
  border: none;
  cursor: pointer;
}

button:not([class]), .button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  padding: 1rem 2.5rem;
  text-align: center;
  background: var(--blue);
  color: var(--white);
  border-radius: calc(1 * var(--space));
  border: 1px solid var(--blue);
  transition: 0.2s ease;
  cursor: pointer;
  font-size: 1rem;
  display: inline-block;
}
button:not([class]).white, .button.white {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue);
}
button:not([class]).white:hover, button:not([class]).white:focus, button:not([class]).white:active, .button.white:hover, .button.white:focus, .button.white:active {
  background: rgba(0, 0, 0, 0);
  color: var(--white);
}
button:not([class]).delete, .button.delete {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
button:not([class]).delete:hover, button:not([class]).delete:focus, button:not([class]).delete:active, .button.delete:hover, .button.delete:focus, .button.delete:active {
  background: rgba(0, 0, 0, 0);
  color: var(--red);
}
button:not([class]) svg, .button svg {
  vertical-align: text-top;
  margin-right: 0.5rem;
}
button:not([class]).full-width, .button.full-width {
  width: 100%;
}
button:not([class]).invert, button:not([class]):focus, button:not([class]):active, button:not([class]):hover, .button.invert, .button:focus, .button:active, .button:hover {
  color: var(--blue);
  background: rgba(0, 0, 0, 0);
}
button:not([class]).disabled, .button.disabled {
  pointer-events: none;
}
button:not([class]).invert:focus, button:not([class]).invert:active, button:not([class]).invert:hover, .button.invert:focus, .button.invert:active, .button.invert:hover {
  background: var(--blue);
  color: var(--white);
}
button:not([class]).invert.white, .button.invert.white {
  background: rgba(0, 0, 0, 0);
  border-color: var(--white);
  color: var(--white);
}
button:not([class]).invert.white:focus, button:not([class]).invert.white:active, button:not([class]).invert.white:hover, .button.invert.white:focus, .button.invert.white:active, .button.invert.white:hover {
  background: var(--white);
  color: var(--blue);
}
button:not([class]).invert.delete, .button.invert.delete {
  background: rgba(0, 0, 0, 0);
  border-color: var(--red);
  color: var(--red);
}
button:not([class]).invert.delete:focus, button:not([class]).invert.delete:active, button:not([class]).invert.delete:hover, .button.invert.delete:focus, .button.invert.delete:active, .button.invert.delete:hover {
  background: var(--red);
  color: var(--white);
}
button:not([class]).circular, .button.circular {
  padding: 0;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  align-self: center;
}

.user-image {
  border-radius: 50%;
  width: 13.0208333333vw;
  height: 13.0208333333vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.user-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1200px) {
  .user-image {
    width: 26.9230769231vw;
    height: 26.9230769231vw;
  }
}

.image-upload {
  position: relative;
  width: 13.0208333333vw;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .image-upload {
    width: 26.9230769231vw;
  }
}
.image-upload .user-image:before {
  content: "+";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  color: var(--white);
  transition: 0.2s ease;
}
.image-upload:hover .user-image:before {
  opacity: 1;
}
.image-upload input[type=file] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.form-error-message {
  margin-bottom: 1rem;
  color: var(--red);
  margin-top: 0.25rem;
  padding-left: 1.5rem;
  font-size: 0.8rem;
}

.fakebox {
  display: grid;
  grid-template-columns: 1rem 1fr;
  grid-gap: 0.5rem;
  align-items: center;
  cursor: pointer;
}
.fakebox .checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.fakebox .checkbox > * {
  opacity: 0;
  transition: 0.2s ease;
}
.fakebox input {
  display: none;
}
.fakebox input:disabled ~ .checkbox {
  opacity: 0.2;
  cursor: not-allowed;
}
.fakebox input:checked ~ .checkbox > * {
  opacity: 1;
}

.outside-fakebox {
  display: none;
}
.outside-fakebox:checked + .fakebox .checkbox > * {
  opacity: 1;
}
.outside-fakebox:disabled + .fakebox .checkbox {
  opacity: 0.2;
  cursor: not-allowed;
}

.builder-modal-button {
  position: absolute;
  bottom: calc(0.1 * var(--space));
  right: calc(0.1 * var(--space));
  font-size: 16px;
  padding: 10px 20px;
}

.input-labels-use-page-background .input-wrapper label {
  background: var(--pageBackground);
}
.input-labels-use-page-background .set-label-white-background .input-wrapper label {
  background: var(--white);
}

form .trumbowyg-dropdown-emoji {
  display: flex;
  flex-wrap: wrap;
}
form .trumbowyg-dropdown-emoji button {
  width: 4rem;
  text-align: center;
}