@property --opacity-icons-state-upcoming{syntax: '<number>';
    inherits: true;
    initial-value: 1;
}:root{animation:icons-upcoming 2.5s running infinite ease}.hourglass-0,.hourglass-1,.hourglass-2,.hourglass-3{display:none}time>svg{margin-right:.5em}.submenu svg{top:1px}.state-pending>svg{color:var(--color-state-pending)}.state-canceled>svg{color:var(--color-state-canceled)}.state-upcoming>svg{color:var(--color-state-upcoming)}.state-running>svg{color:var(--color-state-running)}.state-ended>svg{color:var(--color-state-ended)}.state-canceled .hourglass-0,.state-pending .hourglass-1,.state-upcoming .hourglass-0,.state-upcoming .hourglass-1,.state-running .hourglass-0,.state-running .hourglass-1,.state-running .hourglass-2,.state-running .hourglass-3,.state-ended .hourglass-3{display:inline-block}.state-upcoming .hourglass-1{opacity:var(--opacity-icons-state-upcoming)}.state-running .hourglass-1,.state-running .hourglass-2,.state-running .hourglass-3{animation:icon-running-1 2.5s running infinite linear}.state-running .hourglass-2{animation-name:icon-running-2}.state-running .hourglass-3{animation-name:icon-running-3}@keyframes icons-upcoming{0%{--opacity-icons-state-upcoming:1}50%{--opacity-icons-state-upcoming:0}50%{--opacity-icons-state-upcoming:0}100%{--opacity-icons-state-upcoming:1}}@keyframes icon-running-1{0%{opacity:1}50%{opacity:0}100%{opacity:0}}@keyframes icon-running-2{0%{opacity:0}55%{opacity:.5}90%{opacity:0}100%{opacity:0}}@keyframes icon-running-3{0%{opacity:0}100%{opacity:1}}