:root {
  --sign-font-color: #fafdff;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
  display: flex;
}

li {
  list-style: none;
}

.uiContainerMain {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 600px;
  width: 600px;
  z-index: 999999999;
}

.citySignContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 145px;
  border: 1px solid #16171a;
  background: #fafdff;
  border-radius: 10px;
}

.citySign {
  user-select: none;
  border: 1px solid #10d275;
  width: 364px;
  height: 129px;
  border-radius: 10px;
  background-color: #10d275;
}

.cityNameText {
  color: var(--sign-font-color);
  text-align: center;
  font-family: 'Lucida Sans';
  font-size: 1.95em;
  letter-spacing: .25em;
  margin-top: 5px;
}

.cityLimitText {
  color: var(--sign-font-color);
  font-size: 1.45em;
  font-family: 'Lucida Sans';
  letter-spacing: .15em;
  text-align: center;
  padding: 15px 0px 5px 0px;
}

.populationContainer {
  display: flex;
  justify-content: center;

}

.populationText {
  color: var(--sign-font-color);
  font-size: 1.25em;
  font-family: 'Lucida Sans';
  letter-spacing: .2em;
}

.populationCountContainer {
  display: flex;
  color: var(--sign-font-color);
  width: 55px;
  border-radius: 2px;
  background-color: #234975;
  justify-content: center;
  align-items: center;
}

.populationCountText {
  color: var(--sign-font-color);
  font-family: 'Lucida Sans';
  font-size: 1.25em;
}

.woodPostsContainer {
  display: flex;
  width: 380px;
  height: 15px;
  justify-content: space-between;
  padding: 0px 45px 0px 45px;
}

.woodPosts {
  width: 25px;
  height: 15px;
  background-color: #7f0622;
}

.statsContainerMain {
  display: flex;
  flex-direction: column;
  width: 380px;
  height: 290px;
  background-color: #fafdff;
  padding: 0px 5px 2.5px 5px;  
  border: 1px solid #fafdff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  align-items: center;
}

.tabsContainer {
 display: flex;
 flex-direction: row;
 justify-content: center;
 padding: 5px 5px 0px 5px;
 width: 380px;
 height: 50px;
}

.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 76px;
  border: 1px solid #fafdff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #007899;
  cursor:pointer;
  user-select: none;
}

.residentsTab img {
  width: 45px;
  height: 30px;
}

.propertiesTab img {
  width: 40px;
  height: 40px;
}

.buildTab img {
  width: 38px;
  height: 38px;
}

.incomeTab img {
  width: 35px;
  height: 35px;
}

.settingsTab img {
  width: 38px;
  height: 38px;
}

.tabs:hover {
    background-color: rgb(104, 174, 212); /* old #ff80a4 */
    color: #16171a;
}

.statsContainerInner {
  width: 370px;
  height: 305px;
  align-self: center;
  border: 1px solid #fafdff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: rgb(0, 0, 0);
}

.highlight {
  border: 1px solid #000000;
  background-color: rgb(104, 174, 212); /* old: rgb(201, 199, 199) */
}


.statsContainerInner {
  justify-items: center;
  align-items: center;
  width: 370px;
  height: 235px;
  align-self: center;
  /* border: 1px solid #000000;   old: #fafdff */
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: #dadbdb;
}

.tabDisplay {
  width: 370px;
  height: 235px;
}

.btn {
  text-align: center;
  text-justify: auto;
  border: 2px solid #000000;
  width: 50%;
  height: 75%;
  padding: 10px;
}

.hidden {
  display: none;
}

.windowContainer {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(auto, 1fr);
  justify-items: center;
  align-items: center;
  width: 370px;
  height: 235px;
  align-self: center;
  /* border: 1px solid #000000;   old: #fafdff */
  /* border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px; */
  /* background-color: #dadbdb; */
  background-color: #dbdada;
  }