/*********************************************************************
 * Page
**********************************************************************/
:root {
  --COL_BG: #ffffff;
  --COL_LINKS: #00ac00;
  --COL_TAB_BG: #f8f8f8;
  --COL_TAB_FG: #333333;
  --COL_BOX_BG: #ffffff;
  --COL_BOX_FG: #333333;

  --COL_DIALOG_BG: rgba(0, 0, 0, 1.0);
  --COL_DIALOG_FG: #dddddd;

  --COL_BUT_DIS: #838383;
  --COL_BUT_E10: #2f8d2f;
  --COL_BUT_B7S: #1d1d1d;
  --COL_BUT_E5: #bebb00;
  --COL_BUT_B7P: #426ec0;

  --FONT_FAMILY: "Nunito", "Quicksand", "Arial", "Helvetica", sans-serif;
}

body {
  background-color: var(--COL_BG);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--FONT_FAMILY);
}

/*********************************************************************
 * Modal dialog
**********************************************************************/
#appModalContent {
  color: var(--COL_DIALOG_FG);
  background: var(--COL_DIALOG_BG);
}

/*********************************************************************
 * Navigation Tabs
**********************************************************************/
.nav-tabs .nav-item {
  background-color: var(--COL_TAB_BG);
}

.nav-tabs .nav-item .nav-link.active {
  color: var(--COL_TAB_FG) !important;
  font-weight: bold;
}

/*********************************************************************
 * Map tab
**********************************************************************/
#underConstruction {
  text-align: center;
  font-size: 24px;
  padding-top: 40px;
}

/*********************************************************************
 * Boxes
**********************************************************************/
.box {
  border-width: 2px;
  border-style: solid;
  border-color: var(--COL_BOX_FG);
  border-radius: 10px;
  color: var(--COL_BOX_FG);
  /* background-color: var(--COL_BOX_BG); */
  font-size: 16px;
  padding: 10px;
  margin: 10px;
}

.card {
  border: 0px;
  padding: 0px;
  background-color: var(--COL_TRANS);
  color: var(--COL_BOX_FG);
}

.box a,
.box a:visited,
.box a:hover,
.box a:active {
  color: var(--COL_LINKS);
  text-decoration: none;
}

.moreInfoLink {
  padding-bottom: 0px;
  display: block;
  text-align: center;
}

/*********************************************************************
 * Header
**********************************************************************/
#headerTitle {
  text-align: center;
  font-size: 24px;
}

#sortButtons {
  padding-top: 10px;
  padding-bottom: 0px;
}

#headerText {
  text-align: center;
  font-size: 16px;
}

/*********************************************************************
 * Footer box
**********************************************************************/
#footer a,
#footer a:visited,
#footer a:hover,
#footer a:active {
  color: var(--COL_LINKS);
  text-decoration: underline;
}

#footer {
  font-size: 14px;
  text-align: center;
}

/*********************************************************************
 * Sort buttons
**********************************************************************/
#buttonDistance {
  background-color: var(--COL_BUT_DIS);
}

#buttonE10 {
  background-color: var(--COL_BUT_E10);
}

#buttonB7S {
  background-color: var(--COL_BUT_B7S);
}

#buttonE5 {
  background-color: var(--COL_BUT_E5);
}

#buttonB7P {
  background-color: var(--COL_BUT_B7P);
}

.sortButtonSelected {
  border: 3px solid black !important;
  transform: scale(1.05);
}