body .header-place
{
  position: fixed;

  top: 0px;

  width: 100%;

  color: var(--base-text-color);

  z-index: 3;
}

body .header-place .header
{
  position: relative;
  width: 100cqw;
  height: 36cqw;
  display: flex;
  flex-direction: column;
    /* padding: 0cqw 5cqw 0cqw 5cqw; */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 100%;
  font-weight: normal;
  box-sizing: border-box;
  background-image: url('../src/header_bg.png?v=1.2');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  color: white;
}

body .header-place .header .user
{
  width: 40cqw;
  display: flex;
  gap: 2cqw;
  align-items: center;
  justify-content: start;
}

body .header-place .header .user .avatar
{
  width: 6.5cqw;
  height: 6.5cqw;

  border-radius: var(--border-radius-small);

  overflow: hidden;
}

body .header-place .header .user .avatar img
{
  width: -webkit-fill-available;
    height: auto;
  max-width: 100%;
}

body .header-place .header .user .name
{
  width: 25cqw;
  overflow: hidden;
  font-size: 95%;
  text-align: left;

  word-wrap: nowrap;
  white-space: nowrap;
}

body .header-place .header .user .name.holder
{
  min-width: 100px;
  min-height: 20px;

  border-radius: var(--border-radius-small);
}

body .header-place .header .holder
{
  background: var(--light-background);
}

body .header-place .header .logo
{
  position: relative;
  top: -7cqw;
  left: -3cqw;
  width: 0cqw;
  height: 0cqw;
}

body .header-place .header .logo a
{
  display: block;
  width: 15cqw;
  height: 30cqw;
}

body .scroll-container .header-place .header .controls
{
  width: 49cqw;
  display: flex;
  flex-wrap: wrap;
  gap: 0cqw 1cqw;
  align-items: center;
  justify-content: right;
}

body .scroll-container .header-place .header .controls.tips-now a
{
  color: #FFF;
}

body .header-place .header .controls .item
{
  display: flex;
  align-items: center;

  padding: 0px;
}

body .header-place .header .item a
{
  display: block;

  line-height: 0;

  padding: 1cqw 0.5cqw;
}

body .header-place .header .item a.wallet, body .header-place .header .item a.tokens
{
  display: flex;
  color: white;
  font-size: 95%;

  gap: 1cqw;

  align-items: center;
}


body .header-place .header .item svg,
body .header-place .header .item img
{
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

body .header-place .header .item img
{

}

body .header-place .header .float-menu
{
  margin-top: 40px;

  text-align: center;
}

body .header-place .header .float-menu .icon
{
  background: rgba(0, 0, 0, 0.8);

  padding: 5px;
  margin-bottom: 5px;

  border-radius: 3px;
}

body .header-place .header .float-menu .icon img
{
  max-width: 25px;
  max-height: 25px;
}

.user_info_header{
  padding-top: 5cqw;
  height: 8cqw;
}

.header_wrapper{
  display: flex;
    flex-direction: column;
    height: 100%;
    width: -webkit-fill-available;
}
.resourses_header {
  display: flex;
  flex-wrap: nowrap;
  /* width: 100%; */
  justify-content: space-between;
  align-items: center;
  height: fit-content;
  gap: 1cqw;
  /* padding-top: 3cqw; */
      padding: 3cqw 2cqw 0cqw 2cqw;

  position: relative;
}

.resourses_header .item.left {
  flex-shrink: 0;
  flex: 0 0 auto;
  justify-content: flex-start;
}

.resourses_header .item.right {
  flex-shrink: 0;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
}

.resourses_header .item.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}

.resourses_header .resourse_block {
  background: rgba(38, 38, 36, 0.9);
  border-radius: 1.5cqw;
  display: flex;
  gap: 1.5cqw;
  padding: 1cqw 1.5cqw;
  backdrop-filter: blur(5px);
}
.resourses_header .resourse_block div{
  display: flex;
  flex-direction: column;
}

.resourses_header .item.left .resourse_block,
.resourses_header .item.right .resourse_block {
  gap: 1cqw;
}

.resourses_header .resourse_block_center {
  margin-top: 0;
  padding: 1.5cqw 2.5cqw;
  font-size: 3cqw;
  flex-direction: column;
  gap: 1.5cqw;
  background: rgba(38, 38, 36, 0.95);
  min-width: 35cqw;
  margin-top: 17cqw
}

.resourses_header .item .resourse_block div .img img {
  width: 5cqw;
  height: 5cqw;
  max-width: 30px;
  max-height: 30px;
  min-width: 20px;
  min-height: 20px;
  object-fit: contain;
}

.resourses_header .item .resourse_block_center .citizen .img img {
  width: 4.5cqw;
  height: 4.5cqw;
  max-width: 28px;
  max-height: 28px;
  min-width: 18px;
  min-height: 18px;
  object-fit: contain;
}

.resourses_header .item .resourse_block_center .citizen div {
flex-direction: row!important;
}

.resourses_header .item .resourse_block_center .citizen .value {
    font-size: 95%!important;
}

.resourses_header .value {
  font-size: 2.5cqw;
  /* font-weight: bold; */
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
}

.resourses_header .value span {
  font-size: inherit;
}

.resourses_header .citizen.d-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0cqw;
}

.resourses_header .citizen .ms-5 {
  margin-left: 1cqw;
}

.citizen_counter_text,
.food_counter_text {
  font-size: 2.8cqw;
  white-space: nowrap;
}

.resourses_header .item.left .resourse_block > div,
.resourses_header .item.right .resourse_block > div {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
}

@media (max-width: 480px) {
  .resourses_header .resourse_block {
    padding: 1.5cqw 2cqw;
  }

  .resourses_header .value {
    font-size: 75%;
  }

  .citizen_counter_text,
  .food_counter_text {
    font-size: 75%;
  }

  .resourses_header .resourse_block_center {
    min-width: 27cqw;
    padding: 1.5cqw 1cqw;
  }
}

@media (max-width: 380px) {
  .resourses_header .item.left .resourse_block,
  .resourses_header .item.right .resourse_block {
    gap: 1cqw;
    padding: 1cqw 1.2cqw;
  }

  .resourses_header .value {
    font-size: 65%;
  }

  .resourses_header .item .resourse_block div .img img {
    width: 4.5cqw;
    height: 4.5cqw;
  }
}

.flex-row{
  flex-direction: row!important;
}