@import 'neumorphic-elements.css';
@import 'header-elements.css';
@import 'custom-select.css';
@import 'custom-number-input.css';
@import 'datepicker.css';
@import 'graph.css';
@import 'tables.css';

.container {
  padding: 0 2rem;
  display: flex;
  font-family: 'Poppins', sans-serif;
  color: var(--greyDark);
}

.header {
  margin-top: 3rem;
}

.info-block {
  display: block;
  width: 100%;
  margin: 1rem 2rem;
}

.info-block span {
  font-weight: bold;
}

.prediction-form {
  display: inline-flex;
  width: 100%;
  margin: 0 2rem 1rem 2rem;
  align-items: center;
}

.highlighted-text {
  color: var(--primary);
  font-weight: bold;
}

.date-input {
  border: none;
  box-shadow: inset 0.1rem 0.1rem 0.3rem var(--greyLight-2),
              inset -0.1rem -0.1rem 0.3rem var(--white);
  border-radius: 1rem;
  outline: none;
  background: none;
  font-family: 'Poppins', sans-serif;
  color: var(--greyDark);
  font-weight: bold;
  text-align: center;
}

.prediction-btn {
  text-align: center;
  padding-top: 1.5rem;
}

#prediction_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primary);
  color: var(--white);
  outline: none;
  border: none;
  height: 3rem;
  width: 30rem;
  box-shadow: 0.2rem 0.2rem 0.4rem var(--greyLight-2), -0.1rem -0.1rem 0.2rem var(--white);
  border-radius: 1rem;
  cursor: pointer;
  margin: 0 auto;
}

#prediction_btn:hover {
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
    inset -4px -4px 6px -1px rgba(255, 255, 255, 0.5),
    -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
    0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.01);
}

.prediction-info {
  margin-top: 0.5rem;
}

.prediction-info span {
  font-weight: bold;
}

.data-view {
  width: 100%;
  display: flex;
  margin: 0 2rem 1rem 2rem;
}

.tab-btns {
  display: inline-flex;
  position: relative;
  box-shadow: 0.2rem 0.2rem 0.4rem var(--greyLight-2), -0.1rem -0.1rem 0.2rem var(--white);
  background: none;
  border: none;
  padding: 5px;
  border-radius: 1rem;
  margin: 0 0 0 auto;
  justify-content: flex-end;
}

.tab-btns div:nth-child(1) {
  margin-right: 5px;
}

.tab-btns div img {
  vertical-align: middle;
  padding: 0.8rem 1rem;
  filter: invert(80%) sepia(3%) saturate(3372%) hue-rotate(190deg) brightness(86%) contrast(85%);
}

.active-tab, .tab-btns div:hover {
  display: block;
  border: none;
  border-radius: 1rem;
  box-shadow: inset 0.1rem 0.1rem 0.3rem var(--greyLight-2),
              inset -0.1rem -0.1rem 0.3rem var(--white);
  background: none;
  cursor: pointer;
}

.active-tab img, .tab-btns div:hover img {
  filter: invert(34%) sepia(88%) saturate(3376%) hue-rotate(234deg) brightness(105%) contrast(103%)!important;
}