@use "dropdowns";

button {
  color: black;
}

th {
  text-align: right;
  padding: 0 10px;
}

.parent {
  position: relative;
}

.list {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  padding-top: 10px;
}
.list table:hover {
  background-color: #eee;
  cursor: pointer;
}

.parent.open {
  background-color: rgba(255, 255, 255, 0.5);
}
.parent.open .list {
  display: block;
  background-color: rgba(255, 255, 255, 0.5);
}

.year {
  border-right: 3px solid #000;
  font-size: 1.8em;
  font-weight: normal;
  width: 100px;
  text-align: right;
}
.budget,
.expenditure {
  font-size: 0.8em;
}
.budget th,
.expenditure th {
  width: 150px;
}
.budget td,
.expenditure td {
  width: 300px;
}

.bar {
  display: inline-block;
  margin-right: 10px;
  height: 6px;
  border-radius: 3px;
  padding: 0 3px;
}

.budget .bar {
  background-color: #adf;
}
.expenditure .bar {
  background-color: #2581c4;
}

.bl-budget {
  min-width: 300px;
  font-size: 12px;
  line-height: 12px;
}
.bl-budget.bl-budget-spacing {
  margin: 10px 0px;
}
.bl-labels {
  font-size: 14px;
  margin-bottom: 10px;
}

.bl-bar {
  display: inline-block;
  margin-right: 10px;
  height: 6px;
  border-radius: 3px;
  padding: 0px 2px;
}
.bl-bar-budget {
  background-color: #adf;
}
.bl-bar-expenditure {
  background-color: #2581c4;
}

.bl-bar-selected {
  font-size: 11px;
  line-height: 10px;
}

.bl-bar-selected .row > * {
  padding: 0px 10px 0px 0px;
}

.bl-btn-selected {
  min-width: 350px;
}

@media screen and (max-width: 767px) {
  .bl-budget {
    min-width: 100px;
  }
  .bl-btn-selected {
    min-width: 150px;
  }
}

.btn-group {
  box-shadow: 0px 0px 20px white;
  border-radius: 6px;
}

.btn-red {
  background-color: #e73431;
  border-color: #e73431;
  color: white;
}

.btn-blue {
  background-color: #2581c4;
  border-color: #2581c4;
  color: white;
}

.btn-label {
  background-color: #eee;
  border-color: #ddd;
}

.btn-label:hover {
  cursor: default;
}
