.history-month-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:18px auto 2px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  width:100%;
}

.history-month-nav[hidden]{display:none!important}

.history-nav-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex:0 1 160px;
  min-width:0;
  height:42px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  color:#f3f4f6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.22);
  font:inherit;
  font-size:11px;
  font-weight:800;
  letter-spacing:.015em;
  white-space:nowrap;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}

.history-nav-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:12px;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 38%,transparent 62%,rgba(255,255,255,.025));
}

.history-nav-btn:active{
  transform:translateY(1px) scale(.99);
  border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 4px 12px rgba(0,0,0,.20);
}

.history-nav-arrow{
  position:relative;
  z-index:1;
  font-size:21px;
  line-height:1;
  font-weight:400;
  opacity:.86;
  transform:translateY(-1px);
}

.history-nav-btn span:not(.history-nav-arrow){position:relative;z-index:1}

@media (max-width:390px){
  .history-month-nav{gap:8px}
  .history-nav-btn{flex-basis:148px;padding:0 10px;font-size:10.5px}
}