/*********************************************************************
 * Page
**********************************************************************/
:root {
  --COL_BG: #ffffff;
  --COL_LINKS: #009400;

  --COL_TAB_BG: #f8f8f8;
  --COL_TAB_FG: #333333;

  --COL_BOX_BG: #eeeeee;
  --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;

  --COL_BUT_LOC_BG: #a9ff6f;
  --COL_BUT_LOC_FG: #000000;
  --COL_BUT_LOC_BOR: #b8b8b8;

  --COL_LAB_FUEL_BG: #ffffff;
  --COL_LAB_FUEL_FG: #333333;

  --COL_IOS_ICONS:  #2274c0;

  --COL_COF_BUT_FG: #ffffff;
  --COL_COF_BUT_BG: #559955;
  --COL_COF_BUT_BOR: #198754;

  --COL_TS_OLD: #aa0000;
  --COL_TS_MED: #dd9000;

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

body {
  background-color: var(--COL_BG);
  margin: 0;
  padding: 0;
  height: 100%;
  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_LINKS) !important;
  font-weight: bold;
}

/*********************************************************************
 * Map tab
**********************************************************************/
#locationButton button {
  background: var(--COL_BUT_LOC_BG);
  font-size: 16px;
  font-weight: normal;
  color: var(--COL_BUT_LOC_FG);
  border-radius: 5px;
  border: 2px solid var(--COL_BUT_LOC_BOR);
  padding: 5px 10px;
}

.fuelLabel {
  position: relative;
  background: var(--COL_LAB_FUEL_BG);
  color: var(--COL_LAB_FUEL_FG);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  white-space: nowrap;
  /* Tweak position, 50% accross, 100% up and 6px for the down arrow, zoom works too */
  transform: translate(-50%, calc(-100% - 6px));
}

.fuelLabel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
}

/*********************************************************************
 * Boxes
**********************************************************************/
.box {
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
  border-color: var(--COL_BOX_FG);
  background-color: var(--COL_BOX_BG);
  color: var(--COL_BOX_FG);
  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;
}

.aboutScreenLinks {
  color: var(--COL_LINKS);
}

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

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

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

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

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

#mainFooterIcons {
  font-size: 30px;
}

#aboutFooter {
  padding-top: 0px;
  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 var(--COL_BOX_FG) !important;
  transform: scale(1.05);
}

.btn {
    border-color: var(--COL_BOX_FG);
}

/*********************************************************************
 * Savings and timestamp boxes
**********************************************************************/
#savingsBox {
  font-size: calc(1em - 2px);
}

#timestampBox {
  text-align: center;
  font-size: calc(1em - 2px);
}

/*********************************************************************
 * Price box
**********************************************************************/
.price {
  font-weight: bold;
  font-size: calc(1em + 3px);
}

.timestampOld, .timestampMed, .timestampNew {
  font-size: calc(1em - 4px);
  line-height: 1.2;
  color: var(--COL_TS_FG);
}

/*********************************************************************
 * About screen
**********************************************************************/
#aboutScreen {
  margin: 10px;
}

.iOSIcons {
  color: var(--COL_IOS_ICONS);
}

.coffeeBut,
.coffeeBut:hover,
.coffeeBut:focus,
.coffeeBut:active,
.coffeeBut:focus-visible {
  color: var(--COL_COF_BUT_FG) !important; 
  background-color: var(--COL_COF_BUT_BG) !important; 
  border-color: var(--COL_COF_BUT_BOR) !important; 
  box-shadow: none !important;
}