.communityVoteLiquidityUnlock{
  width:min(420px,100%);

  margin:
    clamp(44px,5vw,62px)
    auto
    0;

  padding:
    16px
    0
    18px;

  border-top:
    1px solid rgba(34,242,255,.08);

  border-bottom:
    1px solid rgba(34,242,255,.08);

  text-align:center;
}


.communityVoteLiquidityUnlockTitle{
  margin-bottom:18px;

  color:#99CCCC;

  font-size:11px;
  line-height:1;

  font-weight:400;

  letter-spacing:1.4px;

  text-transform:uppercase;
}


.communityVoteLiquidityCountdownGrid{
  width:min(340px,100%);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:10px;

  align-items:end;
  justify-items:center;
}


.communityVoteLiquidityCountdownUnit{
  min-width:0;
}


.communityVoteLiquidityCountdownValue{
  display:block;

  color:var(--cyan);

  font-size:
    clamp(18px,2.2vw,25px);

  line-height:1;

  font-weight:400;

  font-variant-numeric:
    tabular-nums;

  letter-spacing:.4px;

  white-space:nowrap;
}


.communityVoteLiquidityCountdownUnitLabel{
  display:block;

  margin-top:7px;

  color:#99CCCC;

  font-size:11px;
  line-height:1;

  font-weight:300;

  letter-spacing:1px;

  text-transform:uppercase;
}


.communityVoteLiquidityUnlock[
  data-community-vote-liquidity-state="unlocked"
]
.communityVoteLiquidityCountdownValue{
  color:#fff;
}


.communityVoteLiquidityUnlock[
  data-community-vote-liquidity-state="error"
]
.communityVoteLiquidityCountdownValue{
  color:#99CCCC;
}


@media (max-width:640px){

  .communityVoteLiquidityUnlock{
    width:100%;

    margin-top:38px;

    padding:
      15px
      0
      17px;
  }


  .communityVoteLiquidityUnlockTitle{
    margin-bottom:16px;

    font-size:10px;
  }


  .communityVoteLiquidityCountdownGrid{
    gap:6px;
  }


  .communityVoteLiquidityCountdownValue{
    font-size:18px;
  }


  .communityVoteLiquidityCountdownUnitLabel{
    font-size:9px;
  }

}