.period-picker-panel{
  position:fixed;
  z-index:120;
  width:min(300px,calc(100vw - 16px));
  padding:12px;
  border-radius:10px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-7px);
  transition:.2s;
  color-scheme:dark;
}
.period-picker-panel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.period-picker-head{
  display:grid;
  grid-template-columns:28px 1fr 28px;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.period-picker-head strong{
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:#f0e6d2;
}
.period-picker-head button{
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:rgba(255,255,255,.04);
  color:#e8eaeb;
  cursor:pointer;
}
.period-picker-head button:disabled{
  opacity:.28;
  cursor:default;
}
.period-picker-hint{
  margin:0 0 10px;
  color:#8b939c;
  font-size:10px;
  line-height:1.55;
}
.period-picker-hint:empty{display:none}
.period-picker-weekdays,
.period-picker-grid.is-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:3px;
}
.period-picker-weekdays{
  margin-bottom:4px;
}
.period-picker-weekdays span{
  height:22px;
  display:grid;
  place-items:center;
  color:#7f8790;
  font-size:10px;
}
.period-picker-grid.is-months,
.period-picker-grid.is-years{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.period-picker-body button{
  border:0;
  border-radius:6px;
  background:transparent;
  color:#d7dadd;
  cursor:pointer;
}
.period-picker-grid.is-days button{
  height:32px;
  font-size:12px;
}
.period-picker-grid.is-months button,
.period-picker-grid.is-years button{
  min-height:40px;
  padding:0 4px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  font-size:12px;
}
.period-picker-grid.is-years button{
  font-size:11px;
  white-space:nowrap;
}
.period-picker-weeks{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.period-picker-weeks button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  text-align:left;
}
.period-picker-weeks b{
  font-size:12px;
  font-weight:600;
}
.period-picker-weeks span{
  color:#8d959e;
  font-size:11px;
}
.period-picker-body button:hover:not(:disabled),
.period-picker-head button:hover:not(:disabled){
  border-color:rgba(200,166,106,.34);
  background:rgba(200,166,106,.1);
  color:#f0e6d2;
}
.period-picker-body button.is-selected,
.period-picker-body button[aria-pressed="true"]{
  background:rgba(200,166,106,.18);
  color:#e4c892;
  box-shadow:inset 0 0 0 1px rgba(200,166,106,.28);
}
.period-picker-body button.is-today:not(.is-selected){
  box-shadow:inset 0 0 0 1px rgba(72,198,169,.42);
}
.period-picker-body button.is-muted{
  color:#6a727b;
}
.period-picker-body button:disabled{
  opacity:.28;
  cursor:not-allowed;
  box-shadow:none;
}

.period-picker-panel.is-light{
  color-scheme:light;
  border:1px solid rgba(31,45,53,.12);
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 48px rgba(31,45,53,.16);
}
.period-picker-panel.is-light .period-picker-head strong{color:#1f2d35}
.period-picker-panel.is-light .period-picker-head button{
  border-color:rgba(31,45,53,.12);
  background:rgba(31,45,53,.04);
  color:#1f2d35;
}
.period-picker-panel.is-light .period-picker-hint,
.period-picker-panel.is-light .period-picker-weekdays span,
.period-picker-panel.is-light .period-picker-weeks span{color:#6b757c}
.period-picker-panel.is-light .period-picker-body button{color:#243038}
.period-picker-panel.is-light .period-picker-grid.is-months button,
.period-picker-panel.is-light .period-picker-grid.is-years button,
.period-picker-panel.is-light .period-picker-weeks button{
  border-color:rgba(31,45,53,.08);
  background:rgba(31,45,53,.03);
}
.period-picker-panel.is-light .period-picker-body button:hover:not(:disabled),
.period-picker-panel.is-light .period-picker-head button:hover:not(:disabled){
  border-color:rgba(200,166,106,.55);
  background:rgba(200,166,106,.16);
  color:#1f2d35;
}
.period-picker-panel.is-light .period-picker-body button.is-selected,
.period-picker-panel.is-light .period-picker-body button[aria-pressed="true"]{
  background:rgba(200,166,106,.28);
  color:#5c4a24;
  box-shadow:inset 0 0 0 1px rgba(173,138,70,.45);
}
.period-picker-panel.is-light .period-picker-body button.is-muted{color:#98a1a7}