/* root */

:root {

  --font-sans-serif: 'Gravity', sans-serif;

  --color-blue: #3A8DDE;
  --color-blue-dark: #003DA6;
  --color-blue-medium: #A8C4EE;
  --color-blue-light: #EDF2FB;

  --color-green: #00CE7C;
  --color-green-dark: #006937;
  --color-green-light: #DAF5E3;

  --color-black: #1D1D1B;
  --color-gray-medium: #9C9B9B;
  --color-gray-light: #EAEDF0;

}

/* main */

body {
  font-family: var(--font-sans-serif);
  color: var(--color-black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans-serif);
  font-weight: 700;
  color: var(--color-blue);
}

.uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge {
  font-family: var(--font-sans-serif);
  font-weight: 700;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
  font-family: var(--font-sans-serif);
  font-weight: 700;
}

/* colors */

.uk-text-primary {
  color: var(--color-blue) !important;
}

.uk-section-primary {
  background-color: var(--color-blue);
}

.uk-background-primary {
  background-color: var(--color-blue);
}

.uk-section-secondary {
  background-color: var(--color-green);
}

.uk-text-secondary {
  color: var(--color-green) !important;
}

.uk-background-secondary {
  background-color: var(--color-green);
}

.uk-background-muted {
  background-color: var(--color-blue-light);
}

.uk-button-secondary {
  background-color: var(--color-green);
}

.uk-button-secondary:hover,
.uk-button-secondary.uk-active, .uk-button-secondary:active {
  background-color: var(--color-green-dark);
}

.uk-light .uk-button-primary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary {
  color: var(--color-blue);
}

.uk-light .uk-button-secondary {
  color: var(--color-green);
}

.uk-light,
.uk-section-primary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color) {
  color: white;
}

.uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text, a.uk-link-text:hover {
  color: var(--color-blue);
  font-weight: 700;
}

.uk-light .uk-input, .uk-light .uk-select, .uk-light .uk-textarea {
  color: var(--color-blue-dark);
  background-color: white;
}

.uk-light .uk-input:focus, .uk-light .uk-select:focus, .uk-light .uk-textarea:focus {
  color: var(--color-blue-dark);
  background-color: var(--color-blue-light);
  border-color: white
}

em {
  color: var(--color-blue);
}

/* fixes */

.uk-button, .uk-input, .uk-textarea {
  border-radius: 4px;
}

/* header */

.ah-header {
  border-right: 1px solid var(--color-blue);
  border-bottom: 1px solid var(--color-blue);
}

.ah-header > .uk-grid > div {
  border-left: 1px solid var(--color-blue);
}

/* nav */

.uk-navbar {
  height: 0;
  padding: 20px 0 40px 0;
}

.uk-navbar-nav {
  height: 22px;
  gap: unset;
}

.uk-navbar-nav > li {
  height: 21px;
  margin-left: -1px;
}

.uk-navbar-nav > li > a {
  background: white;
  display: block;
  min-height: inherit;
  border-left: 1px solid var(--color-blue);
  border-right: 1px solid var(--color-blue);
  border-bottom: 1px solid white;
  padding-left: 0;
  padding-right: 0;
  transition: ease-in-out .3s;
}

.uk-navbar-nav > li > a > span {
  display: block;
  color: var(--color-blue);
  background-color: white;
  margin: 0 2px;
  padding-left: 15px;
  padding-right: 15px;
  transition: ease-in-out .2s;
}

.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li > a:hover {
  padding-top: 30px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-blue);
}

.uk-navbar-nav > li.uk-active > a > span,
.uk-navbar-nav > li > a:hover > span {
  margin: 0 2px;
  color: white;
  background-color: var(--color-blue);
  padding-top: 5px;
  padding-bottom: 5px;
}

/* breadcrumb */

.uk-breadcrumb > * > * {
  color: var(--color-gray-medium);
}

.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
  color: var(--color-gray-medium);
  margin: 0 6px;
}

.uk-breadcrumb > :last-child > a:not([href]),
.uk-breadcrumb > :last-child > span {
  color: var(--color-blue);
}

/* grid border */

.ah-grid-border {
  border-top: 1px solid var(--color-blue);
}

.ah-grid-border > .uk-grid > div > div {
  border-right: 1px solid var(--color-blue);
  border-bottom: 1px solid var(--color-blue);
}

.ah-grid-border > .uk-grid > div.uk-first-column > div {
  border-left: 1px solid var(--color-blue);
}

/* index about */

.ah-about {
}

.ah-about > .uk-grid > div:not(.uk-first-column) {
  border-left: 1px solid var(--color-blue-dark);
}

.ah-about .uk-grid .uk-grid-collapse .uk-padding-small {
  border-bottom: 1px solid var(--color-blue-medium);
}

.ah-about .uk-grid .uk-grid-collapse > div:last-child .uk-padding-small{
  border-bottom: none;
}

/* catalog zebra */

.ah-zebra {
}

.ah-zebra .uk-padding-small {
  padding: 5px 10px;
}

.ah-zebra .uk-width-small {
  width: 175px;
}

.ah-zebra .uk-light + .uk-light {
  border-top: 1px solid white;
}

.ah-zebra table {
  width: 100%;
  border-collapse: collapse;
}

.ah-zebra table tr td {
  padding: 7px 2px;
}

.ah-zebra table tr:nth-child(1) {
  color: var(--color-blue);
}

.ah-zebra table tr:nth-child(even) {
  background-color: var(--color-blue-light);
}

.ah-table table tr th {
  background-color: var(--color-blue-light);
  padding: 5px 0;
}


/* catalog entry slider */

[uk-slider] .uk-dotnav >  *> * {
  border-radius: 0;
  border: 1px solid var(--color-blue-medium);
}

[uk-slider] .uk-dotnav > .uk-active > * {
  background-color: var(--color-blue-medium);
}

/* catalog entry cross */

.ah-cross {
}

.ah-cross .uk-grid .uk-first-column {
  border-right: 1px solid var(--color-blue-medium);
}

.ah-cross .uk-grid .uk-grid-margin {
  border-top: 1px solid var(--color-blue-medium);
}

.ah-cross .uk-grid .uk-first-column + div {
  padding-left: 30px;
}

/* catalog entry table */

.ah-table {
}

.ah-table table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

.ah-table table tr th {
  background-color: var(--color-blue-light);
  padding: 5px 0;
}

.ah-table table tr td {
  padding: 5px 0;
}

/* catalog entry specifications */

.ah-specifications {
  font-size: 0.875rem;
}

.ah-specifications table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.ah-specifications table tr th {
  border-bottom: 1px solid var(--color-blue-medium);
  padding: 5px 0;
}

.ah-specifications table tr td {
  border-bottom: 1px solid var(--color-blue-medium);
  padding: 5px 0;
}

/* catalog entry seo */

.ah-seo {
  font-size: 0.875rem;
}

.ah-seo h1 {
  font-size: 1.5rem;
  color: var(--color-blue);
  margin-top: 20px;
}

.ah-seo h2 {
  font-size: 1.25rem;
  color: var(--color-blue);
  margin-top: 20px;
}

.ah-seo h3 {
  font-size: 1rem;
  color: var(--color-blue);
  margin-top: 20px;
}

/* catalog entry form */

.ah-form .uk-input {
  background-color: white;
  color: var(--color-blue);
  font-size: 1rem;
}

.ah-form .uk-input::placeholder {
  color: var(--color-blue-medium);
}

.ah-form .uk-input:focus {
  background-color: var(--color-blue-light);
  color: var(--color-blue);
  border-color: transparent;
}

.ah-form .uk-button-secondary {
  background-color: var(--color-green);
  color: white;
}

.ah-form .uk-button-secondary:hover {
  background-color: var(--color-blue-light);
  color: var(--color-green);
}

/* sidebar alphabet */

.ah-alphabet a > div {
  outline: 1px solid var(--color-gray-light);
  border: 3px solid white;
  border-radius: 6px;
}

.ah-alphabet a:hover {
  font-weight: 700;
}

.ah-alphabet a.uk-active > div {
  outline: 1px solid var(--color-blue);
  border: 3px solid white;
  background-color: var(--color-blue);
  color: white !important;
}

/* icon */

.ah-icon .uk-svg {
  fill: none;
}

/* list */

.ah-list ol {
  counter-reset: ah-counter;
  list-style: none;
  padding-left: 40px;
}
.ah-list ol li {
  margin: 0 0 0.75rem 0;
  counter-increment: ah-counter;
  position: relative;
}
.ah-list ol li::before {
  content: counter(ah-counter);
  background: var(--color-blue);
  color: #fff;
  font-size: 1.125rem;
  font-weight: bold;
  position: absolute;
  --size: 30px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: -2px;
  border-radius: 50%;
  text-align: center;
}

/* footer */

footer .uk-light .uk-grid-divider>:not(.uk-first-column)::before {
  border-left-color: var(--color-green-dark);
}

/* edit */

#editpage {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3000;
  padding: 5px 15px;
  background: red;
  color: white;
}