client/public/static/style.css

:root {
  --white: #fcfcfc;
  --background: #eff0f1;
  --dark: #31363b;
  --dark90: #31363be0;
  --dark75: #31363bb0;
  --dark50: #31363b80;
  --dark25: #31363b40;
  --shadow: #23262940;
  --glow: #eff0f180;

  --light-gray: #d9dfe3;
  --dim-gray: #bdc3c7;
  --dark-gray: #7f8c8d;
  --neutral-gray: #606060;

  --primary: #3daee9;
  --secondary: #bdc3c7;

  --selected: #3daee9;
  --selected50: #3daee980;
  --selected25: #3daee940;

  --gray: #4d4d4d;
  --gray25: #4d4d4d40;

  --red: #da4453;
  --red25: #da445340;
  --red50: #da445380;

  --orange: #f47750;
  --orange25: #f4775040;

  --yellow: #fdbc4b;
  --yellow25: #fdbc4b40;
  --yellow50: #fdbc4b80;

  --green: #2ecc71;
  --green25: #2ecc7140;

  --blue: #1d99f3;
  --blue25: #1d99f340;

  --success: #1cdc9a;
  --success25: #1cdc9a40;

  --danger: #ed1515;
  --danger25: #ed151540;
  --danger50: #ed151580;

  --indigo: #8e44ad;
  --indigo25: #8e44ad40;

  --info: #3daee9;
  --info25: #3daee940;

  --nav: var(--background);
  --nav-button-hover: var(--light-gray);
  --nav-button-selected: var(--dark);
  --nav-secondary: var(--neutral-gray);
  --nav-secondary-button-hover: var(--gray);
  --dark-border: var(--dark-gray);
  --light-border: var(--light-gray);
  --focused-border: var(--gray);
  --button-hover: var(--background);
}

html,
body,
#app {
  height: 100%;
  font-size: 0.85rem;
}

body,
textarea,
input,
pre {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body,
button,
a,
label {
  color: var(--dark);
}

a {
  text-decoration: none;
  display: flex;
}

.cursor-default {
  cursor: default;
}

.primary-text {
  color: var(--primary);
}

.success-text {
  color: var(--success);
}

.blue-text {
  color: var(--blue);
}

.green-text {
  color: var(--green);
}

.gray-text {
  color: var(--light-gray);
}

.darkgray-text {
  color: var(--dark-gray);
}

.danger-text {
  color: var(--danger);
}

.white-text {
  color: var(--white);
}

.bold {
  font-weight: bold;
}

h6.slim {
  font-weight: normal;
}

input {
  border-width: 1px;
  border-style: solid;
  border-color: var(--light-border);
  padding: 2px;
}

input[type="text"].h1,
input[type="number"].h1,
input[type="search"].h1 {
  font-size: 32px;
}

input[type="text"].h2,
input[type="number"].h2,
input[type="search"].h2 {
  font-size: 26px;
}

input[type="text"].h3,
input[type="number"].h3,
input[type="search"].h3 {
  font-size: 22px;
}

input[type="text"].h4,
input[type="number"].h4,
input[type="search"].h4 {
  font-size: 18px;
}

input[type="text"].h5,
input[type="number"].h5,
input[type="search"].h5 {
  font-size: 16px;
}

input[type="text"].h6,
input[type="number"].h6,
input[type="search"].h6 {
  font-size: 14px;
}

input:invalid {
  border-color: var(--danger);
}

input:read-only:not([type="range"]) {
  background-color: transparent !important;
}

input.borderless {
  border: none;
}

div.blue-25 {
  background: var(--blue25);
}

div.green-25 {
  background: var(--green25);
}

div.red-25 {
  background: var(--red25);
}

div.selected {
  background-color: var(--selected);
  color: var(--white);
}

div.selectable svg.selectable {
  cursor: pointer;
}

button {
  background-color: var(--background);
  border: 1px solid var(--light-border);
  border-radius: 2px;
  display: flex;
  align-items: center;
}

button:disabled * {
  opacity: 0.5;
}

button:not(:disabled) {
  cursor: pointer;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

button:focus {
  border-color: var(--focused-border);
}

#app {
  display: flex;
  flex-direction: column;
}

#app-body {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex-grow: 1;
}

iframe {
  border: 0;
  flex-grow: 1;
}

hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--light-border);
}

header {
  background-color: var(--dark);
  display: flex;
}

header>div,
nav>div {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

nav.right>div,
nav.left>div {
  flex-direction: column;
}

header>div:first-child,
nav>div:first-child {
  flex-grow: 0;
}

header>div:last-child,
nav>div:last-child {
  flex-grow: 0;
}

header .margin {
  margin: 4px;
}

header .margin>*:not(:last-child) {
  margin-right: 4px;
}

select {
  border: 1px solid var(--light-gray);
}

div.disabled,
span.disabled {
  opacity: 0.5;
}

/*
    NAVIGATION
*/
nav {
  background-color: var(--nav);
  display: flex;
  box-shadow: 0 0px 4px var(--shadow);
  border-bottom: 1px solid var(--dim-gray);
  z-index: 100;
  flex-shrink: 0;
  min-height: 46px;
  border-bottom: 1px solid var(--light-border);
  animation: slideToTop normal 0.25s;
}

nav.slideOverTop {
  margin-top: -47px;
  animation: slideOverTop ease 0.5s;
}

nav.right,
nav.left {
  flex-direction: column;
  background-color: var(--nav-secondary);
  box-shadow: none;
  border-bottom: 0;
}

nav label {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

nav>div>button,
nav .dropdown-activator button,
nav>div>a {
  padding: 11px 12px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  flex-grow: 1;
}

nav a.clear {
  padding: 0;
}

nav.right button,
nav.right a {
  background-color: var(--nav-secondary);
  color: var(--white);
}

nav.right button.danger {
  color: var(--danger);
}

nav.right button.primary {
  color: var(--primary);
}

nav button svg,
nav a svg,
nav button img,
nav a img {
  width: 24px !important;
  height: 24px !important;
}

nav button>span,
nav a>span {
  margin-left: 12px;
}

nav:not(.right) button:hover:not(.selected):not(.secondary):not(.primary):not(:disabled),
nav:not(.right) a:hover:not(.router-link-active):not(.primary):not(.secondary) {
  background-color: var(--nav-button-hover);
}

nav.right button:hover:not(.selected):not(.primary):not(.secondary):not(:disabled),
nav.right a:hover:not(.selected):not(.primary):not(.secondary) {
  background-color: var(--nav-secondary-button-hover);
}

nav select,
nav input {
  border-radius: 0;
  border: 0;
  background-color: var(--white);
}

nav input {
  padding: 0 12px;
  width: 204px;
  min-width: 0px;
}

nav>div>img,
nav>div>a.clear>img {
  height: 46px;
  width: auto;
}

nav:not(.right):not(.left)>button,
nav:not(.right):not(.left)>div:first-child>button,
nav:not(.right):not(.left)>div:first-child>a,
nav:not(.right):not(.left)>div:first-child>input,
nav:not(.right):not(.left)>div:first-child>img,
nav:not(.right):not(.left)>button:hover,
nav:not(.right):not(.left)>button:focus,
nav:not(.right):not(.left)>div:first-child>button:hover,
nav:not(.right):not(.left)>div:first-child>a:hover {
  border-right: 1px solid var(--light-border);
}

nav:not(.right):not(.left)>div:last-child>button,
nav:not(.right):not(.left)>div:last-child .dropdown-activator>button,
nav:not(.right):not(.left)>div:last-child>a,
nav:not(.right):not(.left)>div:last-child>select,
nav:not(.right):not(.left)>div:last-child>input,
nav:not(.right):not(.left)>div:last-child>button:hover,
nav:not(.right):not(.left)>div:last-child>a:hover {
  border-left: 1px solid var(--light-border);
}

nav .router-link-active:not(.clear),
nav .selected {
  background-color: var(--nav-button-selected);
  color: var(--white);
  fill: var(--white);
}

/* 
    LABELS
*/
.label-header {
  font-size: 1rem;
  font-weight: bold;
}

/*
    BUTTON
*/
button.flat {
  background-color: transparent !important;
  border: none;
}

button.red,
label.red {
  background-color: var(--red);
  color: var(--white);
}

button.red50,
label.red50 {
  background-color: var(--red50) !important;
  border-color: var(--red);
}

button.blue,
label.blue {
  background-color: var(--blue) !important;
  color: var(--white);
}

button.blue-border {
  background-color: transparent !important;
  border: 1px solid var(--blue);
  color: var(--blue);
}

button.green,
label.green {
  background-color: var(--green) !important;
  color: var(--white);
}

button.gray,
label.gray {
  background-color: var(--gray) !important;
  color: var(--white);
}

button.gray-border {
  background-color: transparent !important;
  border: 1px solid var(--gray);
  color: var(--gray);
}

button.yellow,
label.yellow {
  background-color: var(--yellow) !important;
}

button.yellow50,
label.yellow50 {
  background-color: var(--yellow50) !important;
  border-color: var(--yellow);
}

button.medium {
  padding: 8px;
}

button.large {
  padding: 12px;
}

/* BUTTON VARIANTEN */

/* 
    PRIMARY
*/
button.primary-border {
  background-color: transparent !important;
  border: 1px solid var(--primary);
  color: var(--primary);
}

button.primary-border:hover:not(:disabled) {
  background-color: var(--primary) !important;
  color: var(--white);
}

button.primary,
a.primary {
  background-color: var(--primary) !important;
  border-color: var(--primary);
  color: var(--white);
}

button.primary:hover:not(:disabled),
a.primary:hover:not(:disabled) {
  background-color: transparent !important;
  border-color: var(--primary);
  color: var(--primary);
}

button.primary:hover:not(:disabled) *,
a.primary:hover:not(:disabled) * {
  color: var(--primary);
}

/* 
    SECONDARY
*/
button.secondary-border {
  background-color: transparent !important;
  border: 1px solid var(--secondary);
  color: var(--secondary);
}

button.secondary-border:hover:not(:disabled) {
  background-color: var(--secondary) !important;
  color: var(--secondary);
}

button.secondary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary);
}

button.secondary:hover:not(:disabled) {
  background-color: transparent !important;
  border-color: var(--secondary);
  color: var(--secondary);
}

/* 
    SUCCESS
*/
button.success-border,
button.accept-border {
  background-color: transparent;
  border: 1px solid var(--green);
  color: var(--green);
}

button.success-border:hover:not(:disabled),
button.accept-border:hover:not(:disabled) {
  background-color: var(--green);
  color: var(--white);
}

button.success,
button.accept {
  background-color: var(--green);
  border-color: var(--green);
  color: var(--white);
}

button.success:hover:not(:disabled),
button.accept:hover:not(:disabled) {
  background-color: transparent;
  border-color: var(--green);
  color: var(--green);
}

/* 
    DANGER
*/
button.danger-border {
  background-color: transparent !important;
  border: 1px solid var(--danger);
  color: var(--danger);
}

button.danger-border:hover:not(:disabled) {
  background-color: var(--danger) !important;
  color: var(--white);
}

button.danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

button.danger svg {
  color: var(--danger);
}

button.danger:hover:not(:disabled) {
  background-color: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

/* 
    WARNING
*/
button.warning-border {
  background-color: transparent !important;
  border: 1px solid var(--orange);
  color: var(--orange);
}

button.warning-border:hover:not(:disabled) {
  background-color: var(--orange) !important;
  color: var(--white);
}

button.warning {
  background-color: var(--orange) !important;
  border-color: var(--orange);
  color: var(--white);
}

button.warning:hover:not(:disabled) {
  background-color: transparent !important;
  border-color: var(--orange);
  color: var(--orange);
}

/* 
    INFO
*/
button.info-border {
  background-color: transparent !important;
  border: 1px solid var(--indigo);
  color: var(--indigo);
}

button.info-border:hover:not(:disabled) {
  background-color: var(--indigo) !important;
  color: var(--white);
}

button.info {
  background-color: var(--indigo) !important;
  border-color: var(--indigo);
  color: var(--white);
}

button.info:hover:not(:disabled) {
  background-color: transparent !important;
  border-color: var(--indigo);
  color: var(--indigo);
}

/* 
    LIGHT
*/
button.light-border {
  background-color: transparent !important;
  border: 1px solid var(--light-gray);
  color: var(--light-gray);
}

button.light-border:hover:not(:disabled) {
  background-color: var(--light-gray) !important;
  color: var(--white);
}

button.light {
  background-color: var(--light-gray) !important;
  border-color: var(--light-gray);
  color: var(--white);
}

button.light:hover:not(:disabled) {
  background-color: transparent !important;
  border-color: var(--light-gray);
  color: var(--light-gray);
}

/* 
    DARK
*/
button.dark-border {
  background-color: transparent !important;
  border: 1px solid var(--gray);
  color: var(--gray);
}

button.dark-border:hover:not(:disabled) {
  background-color: var(--gray) !important;
  color: var(--white);
}

button.dark {
  background-color: var(--gray) !important;
  border-color: var(--gray);
  color: var(--white);
}

button.dark:hover:not(:disabled) {
  background-color: transparent !important;
  border-color: var(--gray);
  color: var(--gray);
}

svg.danger,
svg.error {
  color: var(--danger);
}

svg.success {
  color: var(--success);
}

svg.warning {
  color: var(--yellow);
}

svg.blue {
  color: var(--blue);
}

svg.red {
  color: var(--red);
}

svg.green {
  color: var(--green);
}

svg.orange {
  color: var(--orange);
}

svg.gray {
  color: var(--gray);
}

svg.light-gray {
  color: var(--light-gray);
}

svg.yellow {
  color: var(--yellow);
}

ul {
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

ul.navigation {
  border-right: 1px solid var(--light-border);
  flex-shrink: 0;
}

ul.navigation li {
  padding: 8px;
  cursor: pointer;
}

ul.navigation li:hover:not(.selected) {
  background-color: var(--selected25);
}

li {
  list-style: none;
}

li:hover {
  background-color: var(--nav);
}

li.selected,
li.active {
  background-color: var(--selected);
  color: var(--white);
}

li.selected label {
  color: var(--white);
}

p.group {
  margin: 4px 0;
  font-size: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table.lined tr {
  border-bottom: 1px solid var(--light-border);
}

table.border {
  border: 1px solid var(--light-border);
}

table.lined td:not(:first-child),
table.lined th:not(:first-child) {
  border-left: 1px solid var(--light-border);
}

table.lined th,
table.lined td,
table.padding th,
table.padding td {
  padding: 2px;
}

tr.medium th,
tr.medium td {
  padding: 4px;
  font-size: 14px;
}

tr.thin th {
  font-weight: normal;
}

td {
  margin: 0;
  padding: 0;
}

tr.nav,
th.nav,
td.nav {
  background-color: var(--nav);
}

tr.red,
th.red,
td.red {
  background-color: var(--red25);
}

tr.green,
th.green,
td.green {
  background-color: var(--green25);
}

tr.blue,
th.blue,
td.blue {
  background-color: var(--blue25);
}

tr.gray {
  background-color: var(--dim-gray);
}

td.pointer {
  cursor: pointer;
}

th.right,
td.right,
a.right {
  text-align: right;
  justify-content: flex-end;
}

th.center,
td.center {
  text-align: center;
}

th.left,
td.left {
  text-align: left;
}

th.slim,
td.slim {
  width: 1px;
}

th.strech,
td.strech {
  width: 100%;
}

/*
    DROP DOWN
*/
.dropdown {
  position: relative;
  display: flex;
}

.dropdown-activator {
  display: flex;
  cursor: pointer;
  flex-grow: 1;
}

.dropdown-content {
  border-radius: 2px;
  position: fixed;
  background-color: var(--background);
  min-width: 160px;
  box-shadow: 0px 2px 8px 0px var(--shadow);
  z-index: 1000;
  animation: fadeIn ease 0.15s;
  border: 1px solid var(--dim-gray);
  max-height: 50%;
  overflow: auto;
}

.dropdown-content button {
  border: 0;
  width: 100%;
  white-space: nowrap;
  padding: 8px;
}

.dropdown-content button:hover {
  background-color: var(--white);
  border: 0;
}

.dropdown-content button>svg {
  margin-right: 8px;
  color: var(--dark);
  width: 16px !important;
  height: 16px;
}

.dropdown-background {
  position: fixed;
  background-color: #00000000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

/*
    POPOUP
  */
.popup-background {
  display: flex;
  position: absolute;
  z-index: 1500;
}

.popup-background.bottom {
  flex-direction: column;
  align-items: center;
  bottom: 0;
  width: 100%;
}

.popup-background.bottom .popup-window {
  border-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.popup-window {
  background-color: var(--dark);
  border: 1px solid var(--dark-border);
  color: var(--white);
  box-shadow: 0 0 2px var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
    MESSAGE SCREEN
*/
#message-screen {
  height: 100%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--neutral-gray);
  position: relative;
}

#message-screen>div {
  max-height: 90%;
  display: flex;
  flex-direction: column;
}

#message-screen-logo {
  width: 140px;
  position: absolute;
  top: 12px;
  right: 12px;
}

#message-screen-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#message-screen-header svg,
#message-screen-header img {
  margin-right: 24px;
  height: 64px;
  width: 64px;
}

#message-screen-header h1 {
  margin-top: 0;
}

#message-screen-header h1,
#message-screen-header h2 {
  font-weight: 200;
}

#message-screen-body {
  overflow-y: auto;
}

#message-screen-body .margin-image {
  margin-left: 88px;
}

.message-screen-command {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  padding: 4px;
  margin-top: 12px;
}

.message-screen-command:hover {
  background-color: var(--nav);
  border: 1px solid var(--nav-button-hover);
  cursor: pointer;
}

.message-screen-command h3 {
  margin: 0 0 4px 0;
}

.message-screen-command svg,
.message-screen-command img {
  margin-right: 12px;
  height: 32px;
  width: 32px;
}

.message-screen-list li {
  cursor: pointer;
  padding: 8px 4px;
}

.message-screen-list li:hover {
  background-color: var(--nav);
}

/*
    EXPANDER
*/
.expander-header {
  display: flex;
  align-content: center;
  cursor: pointer;
  border-bottom: 1px solid var(--light-border);
}

.expander-header h3 {
  flex-grow: 1;
  margin: 0;
  margin-left: 8px;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}

.expander-header svg {
  width: 24px;
}

/*
    TABLE FILTER
*/
.table-filter {
  display: flex;
  align-items: center;
}

.table-filter-title {
  flex-grow: 1;
  display: flex;
  align-items: center;
  margin-right: 4px;
}

.table-filter-title.sortable {
  cursor: pointer;
}

.table-filter-body {
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.table-filter-body>button {
  justify-content: center;
  margin: 4px 0;
  background-color: var(--selected50);
}

.table-filter button.filtered {
  background-color: var(--selected);
}

.table-filter svg.filtered {
  color: var(--selected);
}

.table-filter>svg {
  margin-right: 4px;
}

/*
    STICKER
*/
.sticker {
  display: flex;
  border-radius: 4px;
  margin: 12px;
  align-items: stretch;
  min-width: 180px;
}

.sticker-icon {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 12px;
  display: flex;
  align-items: center;
}

.sticker-text {
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  flex-grow: 1;
}

.sticker h3 {
  font-size: 2rem;
  font-weight: 200;
  margin: 0;
}

.sticker p {
  margin: 0;
  font-weight: bold;
  font-size: 1rem;
  text-align: right;
}

.sticker svg {
  width: 32px;
  height: 32px;
}

:not(svg).blue,
.sticker.blue,
.sticker.blue .sticker-icon {
  background-color: var(--blue25);
}

:not(svg).yellow,
.sticker.yellow,
.sticker.yellow .sticker-icon {
  background-color: var(--yellow25);
}

:not(svg).green,
.sticker.green,
.sticker.green .sticker-icon {
  background-color: var(--green25);
}

:not(svg).success,
.sticker.success,
.sticker.success .sticker-icon {
  background-color: var(--success25);
}

:not(svg).primary,
.sticker.primary,
.sticker.primary .sticker-icon {
  background-color: var(--primary);
}

:not(svg).orange,
.sticker.orange,
.sticker.orange .sticker-icon {
  background-color: var(--orange25);
}

:not(svg).gray,
.sticker.gray,
.sticker.gray .sticker-icon {
  background-color: var(--gray25);
}

:not(svg).danger,
.sticker.danger,
.sticker.danger .sticker-icon {
  background-color: var(--danger25);
}

.list-item {
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
}

.list-item:hover:not(.selected) {
  background-color: var(--selected25);
}

.showOnMobile,
.showOnMobilePortrait {
  display: none !important;
}

/*
    Snackbar
  */

.snackbar.primary {
  background-color: var(--primary) !important;
}

.snackbar.secondary {
  background-color: var(--secondary) !important;
}

.snackbar.success {
  background-color: var(--success) !important;
}

.snackbar.info {
  background-color: var(--info) !important;
}

.snackbar.danger {
  background-color: var(--danger) !important;
}

.snackbar.blue {
  background-color: var(--blue) !important;
}

.snackbar.gray {
  background-color: var(--gray) !important;
}

.snackbar.green {
  background-color: var(--green) !important;
}

.snackbar.indigo {
  background-color: var(--indigo) !important;
}

.snackbar.orange {
  background-color: var(--orange) !important;
}

.snackbar.yellow {
  background-color: var(--yellow) !important;
}

.snackbar.white {
  background-color: var(--white) !important;
}

/* 
    CARD
  */
.card.selected {
  background-color: var(--selected);
  color: var(--white);
}

.card-header {
  border-bottom: 1px solid var(--light-border);
  font-size: larger;
}

.card-header>div,
.card-footer>div {
  display: flex;
  align-items: center;
  padding: 4px;
}

.card-header>.card-header-center,
.card-footer>.card-footer-center {
  flex-grow: 1;
  justify-content: center;
  margin: 0 12px;
  text-align: center;
}

.card-body {
  flex-grow: 1;
}

.card-body-center {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-grow: 1;
}

.card-footer {
  border-top: 1px solid var(--light-border);
}

.card-footer button svg {
  width: 16px;
  height: 16px;
}

/* MARGINs */
.ma-off {
  margin: 0px;
}

.ma-top {
  margin-top: 12px;
}

.ma-bottom {
  margin-bottom: 12px;
}

.ma-right {
  margin-right: 12px;
}

.ma-left {
  margin-left: 12px;
}

.ma-horizontal {
  margin: 0 12px;
}

.ma-vertical {
  margin: 12px 0;
}

.ma {
  margin: 12px;
}

.ma4-top {
  margin-top: 4px;
}

.ma4-bottom {
  margin-bottom: 4px;
}

.ma4-right {
  margin-right: 4px;
}

.ma4-left {
  margin-left: 4px;
}

.ma4-vertical {
  margin: 4px 0;
}

.ma4-horizontal {
  margin: 0 4px;
}

.ma4 {
  margin: 4px;
}

.ma8-top {
  margin-top: 8px;
}

.ma8-bottom {
  margin-bottom: 8px;
}

.ma8-right {
  margin-right: 8px;
}

.ma8-left {
  margin-left: 8px;
}

.ma8-vertical {
  margin: 8px 0;
}

.ma8-horizontal {
  margin: 0 8px;
}

.ma8 {
  margin: 8px;
}

.ma24-top {
  margin-top: 24px;
}

.ma24-bottom {
  margin-bottom: 24px;
}

.ma24-right {
  margin-right: 24px;
}

.ma24-left {
  margin-left: 24px;
}

.ma24-vertical {
  margin: 24px 0;
}

.ma24-horizontal {
  margin: 0 24px;
}

.ma24 {
  margin: 24px;
}

/*
    OPACITY
*/
.opacity75 {
  opacity: 0.75;
}

.opacity50 {
  opacity: 0.5;
}

.opacity25 {
  opacity: 0.25;
}

/* 
    PADDINGs 
*/

.pa {
  padding: 12px;
}

.pa-vertical {
  padding: 12px 0;
}

.pa-horizontal {
  padding: 0 12px;
}

.pa-left {
  padding-left: 12px;
}

.pa-right {
  padding-right: 12px;
}

.pa-top {
  padding-top: 12px;
}

.pa-bottom {
  padding-bottom: 12px;
}

.pa4 {
  padding: 4px;
}

.pa4-vertical {
  padding: 4px 0;
}

.pa4-horizontal {
  padding: 0 4px;
}

.pa4-left {
  padding-left: 4px;
}

.pa4-right {
  padding-right: 4px;
}

.pa4-top {
  padding-top: 4px;
}

.pa4-bottom {
  padding-bottom: 4px;
}

.pa8 {
  padding: 8px;
}

.pa8-vertical {
  padding: 8px 0;
}

.pa8-horizontal {
  padding: 0 8px;
}

.pa8-left {
  padding-left: 8px;
}

.pa8-right {
  padding-right: 8px;
}

.pa8-top {
  padding-top: 8px;
}

.pa8-bottom {
  padding-bottom: 8px;
}

.pa12 {
  padding: 12px;
}

.pa12-vertical {
  padding: 12px 0;
}

.pa12-horizontal {
  padding: 0 12px;
}

.pa12-left {
  padding-left: 12px;
}

.pa12-rigth {
  padding-right: 12px;
}

.pa12-top {
  padding-top: 12px;
}

.pa12-bottom {
  padding-bottom: 12px;
}

.pa24 {
  padding: 24px;
}

.pa24-vertical {
  padding: 24px 0;
}

.pa24-horizontal {
  padding: 0 24px;
}

.pa24-left {
  padding-left: 24px;
}

.pa24-rigth {
  padding-right: 24px;
}

.pa24-top {
  padding-top: 24px;
}

.pa24-bottom {
  padding-bottom: 24px;
}

.border {
  border: 1px solid var(--dark-border);
}

.border-top {
  border-top: 1px solid var(--light-border);
}

.border-left {
  border-left: 1px solid var(--light-border);
}

.border-bottom {
  border-bottom: 1px solid var(--light-border);
}

.border-right {
  border-right: 1px solid var(--light-border);
}

/*
    FLEXBOX
*/
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row.center-items,
.flex-center {
  align-items: center;
}

.flex-row.flex-start-items {
  align-items: flex-start;
}

.flex-start {
  align-items: flex-start;
}

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

.flex-column {
  display: flex;
  flex-direction: column;
}

.overflow-y {
  overflow-y: auto;
}

.grow,
.grow-1 {
  flex: 1;
}

.shadow {
  box-shadow: 0 1px 4px var(--shadow);
}

.shadow-text {
  text-shadow: 0 1px 4px var(--shadow);
}

.glow {
  box-shadow: 0 1px 4px var(--glow);
}

.nowrap {
  white-space: nowrap;
}

.pointer {
  cursor: pointer;
}

.center {
  text-align: center;
  justify-content: center;
}

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

.blur4 {
  filter: blur(4px);
}

.blur8 {
  filter: blur(8px);
}

.transparent {
  opacity: 0 !important;
}

@media (min-width: 481px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #80808020;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--nav);
    border-radius: 4px;
    border: 1px solid var(--dark-border);
  }
}

@media (max-width: 840px) {

  nav button span,
  nav a span {
    display: none;
  }
}

@media (max-width: 480px) {
  .hideOnMobilePortrait {
    display: none !important;
  }

  .showOnMobilePortrait {
    display: flex !important;
  }

  nav input {
    width: 100%;
  }
}

@media (max-width: 480px),
(max-height: 480px) {

  nav button,
  nav a {
    padding: 7px 8px;
  }

  .hideOnMobile {
    display: none !important;
  }

  .showOnMobile {
    display: flex !important;
  }
}

@media (max-height: 480px) {
  .hideOnMobileLandscape {
    display: none !important;
  }
}