/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */
.width-100 {
  width: 100px;
}
.width-200 {
  width: 200px;
}
.width-300 {
  width: 300px;
}
.width-400 {
  width: 400px;
}
.width-500 {
  width: 500px;
}

.height-100 {
  height: 100px;
}
.height-200 {
  height: 200px;
}
.height-300 {
  height: 300px;
}
.height-400 {
  height: 400px;
}
.height-500 {
  height: 500px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.block-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.table-invisible td {
  vertical-align: revert;
  border-bottom: none;
  background-color: revert;
}

@font-face {
  font-family: Gotham;
  src: url("../fonts/gotham/GOTHHTFB.TTF");
}

:root, :root[data-theme="light"] {
  --jro-color-primary: #06566c;
  --jro-color-accent: #95c11f;
  --jro-color-light: #f6e4d1;
  --pico-font-family-display: "Gotham", serif;
  --pico-font-family-sans-serif: "Gotham", system-ui, sans-serif;
  --q2-nav-bg: var(--jro-color-primary);
  --q2-text-strong: var(--jro-color-primary);
  --q2-text-inverse: var(--jro-color-light);
}

a, a:hover {
  color: var(--jro-color-accent);
}

.navbar-brand img {
  height: 100px;
}

.navbar-section.actions {
  display: none;
}

.dropmenu > ul > li > a,
body.header-dark:not(.scrolled) #header .dropmenu > ul > li > a {
  color: var(--jro-color-light);
}

body.header-dark:not(.scrolled) #header .dropmenu > ul > li > a:hover:not(.active) {
  color: var(--jro-color-primary);
}