.resource-hole {
  width: 24px;
  height: 24px;
  background-color: #E1E1E1;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
  margin-right: 4px;
}

.resource-gag {
  width: 24px;
  height: 24px;
  padding: 2px;
  color: white;
  flex: 0 0 auto;
  font-weight: normal;
  margin-right: 4px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
}

.resource-gag-title {
  width: 100%;
  font-size: 5px;
}

.resource-gag-quality {
  position: relative;
  width: 100%;
  text-align: right;
  top: 8px;
  font-size: 5px;
}

.quality-hole {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.2);
  margin: 2px;
  flex: 0 0 auto;
}

.quality-gag {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 24px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
  background-color: #EAEAEA;
  margin: 2px;
}

.resource-bg-color-wood {
  background-color: #887265;
}

.resource-color-wood {
  color: #887265;
}

.resource-bg-color-water {
  background-color: #ADCCD0;
}

.resource-color-water {
  color: #ADCCD0;
}

.resource-bg-color-sand {
  background-color: #E3DAB9;
}

.resource-color-sand {
  color: #E3DAB9;
}

.resource-bg-color-steel {
  background-color: #AEACAA;
}

.resource-color-steel {
  color: #AEACAA;
}

.resource-bg-color-gold {
  background-color: #F9D761;
}

.resource-color-gold {
  color: #F9D761;
}

.resource-bg-color-oil {
  background-color: #454758;
}

.resource-color-oil {
  color: #454758;
}

.resource-bg-color-petrol {
  background-color: #AC3E32;
}

.resource-color-petrol {
  color: #AC3E32;
}