.alibaba-period-picker{position:relative}
.alibaba-screen .period-picker-trigger{appearance:none;display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 16px;border:1px solid #dce6ed;border-radius:12px;background:#fff;box-shadow:0 2px 5px #132b4005;color:#18384a;cursor:pointer;font:inherit;transition:border-color .18s,box-shadow .18s;white-space:nowrap}
.alibaba-screen .period-picker-trigger:hover{border-color:#7ab5ad;box-shadow:0 3px 12px #123d3710}
.alibaba-screen .period-picker-trigger:focus-visible{outline:3px solid #c5e8e1;outline-offset:2px}
.alibaba-screen .period-picker-trigger>span{font-size:13px;font-weight:600;color:#287469;background:#eef7f4;padding:5px 9px;border-radius:6px}
.alibaba-screen .period-picker-trigger>b{font-size:13px;font-weight:500;letter-spacing:.15px;color:#254357}
.period-calendar-icon{color:#779491;flex-shrink:0}
.alibaba-screen .period-picker-trigger>svg:last-child{color:#8193a3;margin-left:2px;transition:transform .18s}
.period-picker-trigger[aria-expanded=true]>svg:last-child{transform:rotate(180deg)}
.alibaba-screen .period-picker-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:20;min-width:100%;padding:7px;border:1px solid #e0e9ee;border-radius:12px;background:#fff;box-shadow:0 12px 30px #173d4e18}
.alibaba-screen .period-picker-menu button{display:block;width:100%;border:0;border-radius:7px;padding:11px 13px;background:transparent;text-align:left;color:#5e7484;font:inherit;font-size:13px;cursor:pointer}
.alibaba-screen .period-picker-menu button:hover{background:#f4f8f7}
.alibaba-screen .period-picker-menu button.active{background:#edf7f3;color:#237368;font-weight:600}
@media(max-width:760px){.data-toolbar{flex-wrap:wrap}.alibaba-period-picker{max-width:100%}.alibaba-screen .period-picker-trigger{gap:8px;padding:10px 12px;max-width:100%;white-space:normal}.alibaba-screen .period-picker-trigger>b{font-size:12px}}