:root {
  /*  Colors */

  --highlight-color: rgba(178, 30, 53, 1);
  --highlight-color-light: #c33141;
  --highlight-color-bright: #ce3c49;
  --highlight-color-alpha: #b21e3526;

  --base-color: #c2c2c2;
  --base-color-dark: rgba(90, 90, 90, 1);
  --base-color-medium: rgba(219, 219, 219, 1);
  --base-color-light: #f5f5f5;

  --success-color: rgba(111, 246, 167, 0.8);
  --success-color-light: rgba(111, 246, 167, 0.5);

  --error-color: rgba(255, 136, 89, 0.8);
  --error-color-light: rgba(255, 136, 89, 0.5);

  --header-color: rgba(255, 255, 255, 1);

  /* Font styles */
  --font-xs: 11px;
  --font-sm: 16px;
  --font-md: 18px;
  --font-lg: 20px;
  --font-family-normal: sans-serif, Arial, Verdana, "Trebuchet MS";
  --font-family-code: courier, monospace;

  /* Layout */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-4xl: 88px;
  --spacing-5xl: 96px;

  --shadow-sm: 0 6px 12px -2px rgba(50, 50, 93, 0.1),
    0 3px 7px -3px rgba(0, 0, 0, 0.1);

  --border-radius: 4px;
  --border-radius-sm: 2px;
}

/*
 * Header
 *
 */

#header {
  background-color: var(--header-color);
  border-color: var(--highlight-color);
  height: var(--spacing-4xl);
}

#header #header-logo {
  /* background-image: url("../../img/logo.svg"); Removed in Order to add Cutom Logo as Image and not background*/
  display: flex;
  align-items: center;
  height: var(--spacing-xl);
}

#header #header-logo #custom-logo {
  margin-top: auto;
  margin-bottom: auto;
  height: 80%;
}

#header #header-actions a.page {
  border-color: var(--highlight-color);
}
#header #header-actions a.page.active {
  background-color: var(--highlight-color);
}

#header #header-actions a.page.active span {
  color: var(--base-color-light);
}

/*
 * Main
 *
 */

#main {
  margin: var(--spacing-4xl) 0;
  padding-bottom: var(--spacing-5xl);
  min-height: 100%;
}

@media (min-width: 768px) {
  #main {
    padding: 0 var(--spacing-md) var(--spacing-5xl) var(--spacing-md);
  }
}

#main .text-body {
  background-color: var(--base-color-light);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
}

.btn-secondary {
  background-color: var(--highlight-color);
  border: none;
}
.btn-secondary:hover {
  background-color: var(--highlight-color-bright);
}

/*
 * Footer
 *
 */

#footer {
  border-color: var(--highlight-color);
  background: var(--base-color-light);
}

a {
  color: var(--base-color-dark);
}
a:hover {
  color: var(--highlight-color);
}

button {
  border-radius: var(--border-radius-sm);
  border: none;
  padding: var(--spacing-2xs) var(--spacing-xs);
  background-color: var(--highlight-color-bright);
  color: var(--base-color-light);
}

button:hover {
  background-color: var(--highlight-color-light);
}

.modal-header > button.close {
  background-color: rgb(240, 240, 240);
  color: var(--base-color-dark);
}

.modal-header > button.close:hover {
  background-color: rgb(200, 200, 200);
  color: var(--base-color-light);
}

.form-control::placeholder {
  color: rgb(180, 180, 180);
}

.alert {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.navbar-brand {
  cursor: pointer;
}

.nav-link {
  color: var(--highlight-color);
}

.nav-link:hover {
  color: var(--highlight-color-bright);
}

.nav-item.active > .nav-link {
  text-decoration: underline;
  text-decoration-color: var(--highlight-color);
  text-underline-offset: 4px;
}

.dropdown-menu.show {
  right: 0;
}

.user-initials {
  border: 1px solid var(--highlight-color);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.user-initials > span {
  font-size: 10px;
  line-height: normal;
}

@media (min-width: 768px) {
  .nav-flex-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}