@media screen{
 #app.page-balance>.period-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px}
 .period-title{font-size:14px;font-weight:600;color:#58434d}
 #period{display:flex;align-items:flex-end;gap:12px;margin:0;min-width:0}
 .page-balance .period-panel #period .form-grid{display:grid;grid-template-columns:repeat(2,minmax(145px,190px));gap:12px;margin:0}
 .page-balance .period-panel #period label{margin:0 0 4px;font-size:12px}
 #period input{padding:8px 10px;min-height:40px;margin:0;box-sizing:border-box;width:100%;font-size:14px}
 .page-balance .period-panel #period>.primary{width:auto;min-height:40px;margin:0;padding:9px 20px;white-space:nowrap}
}
@media screen and (max-width:850px){
 #app.page-balance>.period-panel{display:block;padding:14px 15px}
 .period-title{display:block;margin-bottom:10px}
 #period{width:100%}
 .page-balance .period-panel #period .form-grid{flex:1;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:480px){
 #period{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 #period input{font-size:16px;min-width:0}
 .page-balance .period-panel #period>.primary{justify-self:end;padding:8px 22px}
}