:root {
  --primary: #5c389a;
  --secondary: color-mix(in srgb, var(--primary) 60%, #ffffff 40%);
  --accent: #FFEB3B;
  --accent-light: #FFC107;
  --background: #020410;
  --white: #2a2a2a;
  --black: #FAFAFA;
  --off-white: #d3d3d3;
}

@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 {
  background-color: var(--primary);
  border-bottom: 2px solid var(--secondary);
}

.navbar-brand, a.nav-link {
  color: var(--black) !important;
}

.navbar-brand:hover, a.nav-link:hover {
  color: var(--secondary) !important;
}


.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;
}

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

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

a,
a:hover,
a:focus,
a:active,
a:visited {
  color: var(--black);
}

.table {
  color: var(--black);
}

.table-width-auto {
  width: auto !important;
  min-width: unset !important;
}

.table-width-auto td, .table-width-auto th {
  padding-left: 5rem;
}

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

.input-tl {
  width: 75px;
}

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

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


.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 {
  font-weight: bold;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--secondary) !important;
  border-width: .15rem;
  color: var(--black);
}

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

.btn-secondary {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--black) !important;
}

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

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

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

.btn-warning:hover {
  color: var(--secondary) !important;
}

.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;
}

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

.bg-danger {
  background-color: #D32F2F !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);
}