:root {
  /* --primary: #00796B; */
  /* Teal */
  /* --secondary: #80CBC4; */
  /* Light Teal */
  /* --accent: #FFC107; */
  /* --accent-light: #FFEB3B; */
  /* Gold */
  /* --background: #FAFAFA; */
  /* Off-White */
  /* --white: #FAFAFA; */
  /* --black: #2a2a2a; */
}

:root {
  --primary: #5A7A92;
  /* Light Teal */
  --secondary: #4A6D7C;
  /* Teal */
  --accent: #FFEB3B;
  --accent-light: #FFC107;
  /* Gold */
  --background: #2a2a2a;
  /* Dark background */
  --white: #2a2a2a;
  --black: #FAFAFA;
  /* off white for navbar background */
  --off-white: #d3d3d3;
  /* Light text */
}

@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

body {
  font-size: 0.8rem;
  background-color: var(--background);
  color: var(--black);
  font-family: 'Roboto', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 1rem;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

nav {
  padding-left: .75rem;
  padding-right: .75rem;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--white);
}

.container-fluid {
  padding: 0 !important;
}

.header-welcome {
  background: repeating-linear-gradient(45deg,
      var(--primary),
      var(--primary) 0px,
      var(--secondary) 10px,
      var(--secondary) 20px);
  color: var(--white);
  padding: 2rem;
  text-align: center;
}

.header-welcome h1 {
  /* font-size: 2.5rem; */
  /* color: var(--secondary);
  text-shadow: 0 0 3px var(--black); */
  /* text-shadow: 3px 3px 5px rgba(255, 255, 255, .75); */
}

.form-control:focus {
  border-color: rgba(128, 203, 196, 0.25);
  /* Light Teal */
  box-shadow: 0 0 0 0.2rem rgba(128, 203, 196, 0.25);
  /* Light Teal */
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
hr {
  color: var(--black);
}

a,
a:hover,
a:focus,
a:active,
a:visited {
  color: var(--primary);
  /* Teal */
}

.bg-dark {
  background-color: var(--black) !important;
  border: 1px solid rgba(0, 0, 0, .125);
}

.text-off-white {
  color: #adadad !important;
}

.input-tl {
  width: 75px;
}

.result-box {
  background-color: #343a40;
  /* Dark background */
  border: 1px solid #495057;
  /* Darker border */
  border-radius: 0.25rem;
  padding: 1rem;
  margin-bottom: 1rem;
  color: #f8f9fa;
  /* Light text color */
  display: inline-block;
  min-width: 200px;
}

.result-box h6 {
  font-size: 1.25rem;
}

.form-group input {
  border-radius: 0.25rem;
}

.form-group button {
  border-radius: 0.25rem;
  background-color: var(--accent);
  /* Gold */
  border-color: var(--accent);
  /* Gold */
  color: var(--black);
  /* Black text */
}

.lead {
  font-size: 1.25rem;
  color: var(--accent-light);
  text-shadow: 1px 1px 1px var(--white);
  /* Gold */
}

.small-lead {
  font-size: 1.2rem;
  color: var(--accent-light);
  text-shadow: 1px 1px 1px var(--white);
}

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

.list-group-item {
  background-color: var(--secondary);
  color: var(--black);
  margin-bottom: 0.25rem;
  border-bottom: 2px solid var(--accent-light) !important;
  /* border-radius: 0.25rem; */
}

/* Override Bootstrap classes with primary color */
.btn-primary {
  background: var(--secondary) !important;
  /* Teal */
  border-color: var(--primary) !important;
  /* Teal */
  color: var(--off-white) !important;
  /* White text */
  font-weight: bold;
}

.btn-primary:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-secondary {
  background: var(--secondary) !important;
  /* Light Teal */
  border-color: var(--secondary) !important;
  /* Light Teal */
  color: var(--black) !important;
  /* Black text */
}

.btn-light {
  background-color: var(--white);
  color: var(--black);
}

.btn-light:hover {
  background-color: var(--secondary);
  color: var(--white);
}

.alert-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--black) !important;
}

.badge-primary {
  background-color: var(--primary);
  color: var(--black) !important;
}

.border-primary {
  border-color: var(--accent) !important;
  /* Gold */
}

.text-success {
  color: #388E3C !important;
  /* Darker green */
}

.text-warning {
  color: #FFA000 !important;
  /* Darker yellow */
}

.text-danger {
  color: #D32F2F !important;
  /* Darker red */
}

.text-accent {
  color: var(--accent-light) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

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

.bg-light {
  background-color: var(--off-white) !important;
}

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

.scroll-list {
  max-height: 300px;
  overflow-y: auto;
  padding-left: 1rem;
  border-left: 2px solid var(--secondary);
}

.date-label {
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.3rem;
  margin-right: 1rem;
}

.date-label.success {
  border: 1px solid var(--secondary);
}

.date-label.success:hover {
  background-color: var(--secondary);
  color: var(--black);
}

.date-label.error {
  border: 1px solid #FFA000;
}

.date-label.error:hover {
  background-color: #FFA000;
  color: var(--white);
}

#how-it-works {
  background-color: var(--secondary);
}

.badge {
  background-color: var(--white);
  color: var(--black);
}

.home-update {
  background-color: var(--secondary);
  color: var(--black);
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.eurflow-box {
  box-shadow: -0.15rem -0.2rem 0rem var(--primary);
  border: 1px solid var(--primary);
  border-radius: 1rem;
  padding: 1rem;
  margin-top: 0.5rem;
  overflow-y: auto;
}

.eurflow-box-month {
  max-height: 8rem;
  overflow-y: auto;
}

.canvasjs-chart-canvas {
  border-radius: 1rem;
  border: 0.15rem solid var(--primary);
}