heliux-sidebarflyout{display:flex}
heliux-sidebarflyout .sidebarflyout__sidebar{--sidebarflyout-transform-left:calc(-100% + var(--sidebarflyout-visible-part-width) + var(--sidebarflyout-hidden-width));--sidebarflyout-transform-right:calc(100% - var(--sidebarflyout-visible-part-width) - var(--sidebarflyout-hidden-width));position:fixed;display:block;inset-block-start:calc(var(--sidebarflyout-vertical-position) - var(--global-layout-header-height-mobile,60px)/2);justify-items:center;z-index:14;transition:var(--sidebarflyout-open-closed-transition-speed)}
@media(min-width:1024px){heliux-sidebarflyout .sidebarflyout__sidebar{inset-block-start:calc(var(--sidebarflyout-vertical-position) - var(--global-layout-header-height-desktop,100px)/2)}
}
heliux-sidebarflyout .sidebarflyout__delayed{opacity:0;animation:sidebarFlyoutfadeIn 3s;animation-delay:var(--sidebarflyout-fade-in-delay,5s);animation-fill-mode:forwards}
@keyframes sidebarFlyoutfadeIn{from{opacity:0}
to{opacity:1}
}
heliux-sidebarflyout .sidebarflyout__content{display:grid;align-items:center;justify-items:center}
heliux-sidebarflyout .sidebarflyout__visiblePart{position:relative;overflow:hidden;min-inline-size:var(--sidebarflyout-visible-part-width)}
heliux-sidebarflyout .sidebarflyout__offScreenPart{block-size:100%}
heliux-sidebarflyout.sidebarflyout-left .sidebarflyout__sidebar{inset-inline-start:0;transform:translateX(var(--sidebarflyout-transform-left))}
heliux-sidebarflyout.sidebarflyout-left .sidebarflyout__content{grid-auto-flow:dense;grid-template-columns:2fr min-content}
heliux-sidebarflyout.sidebarflyout-left .sidebarflyout__visiblePart{grid-column:2}
heliux-sidebarflyout.sidebarflyout-left .sidebarflyout__offScreenPart{grid-column:1}
heliux-sidebarflyout.sidebarflyout-right .sidebarflyout__sidebar{inset-inline-end:0;transform:translateX(var(--sidebarflyout-transform-right))}
heliux-sidebarflyout.sidebarflyout-right .sidebarflyout__content{grid-template-columns:min-content 2fr}
@media(min-width:0)and (max-width:767px){heliux-sidebarflyout.sidebarflyout-mobile-hidden{display:none}
heliux-sidebarflyout:not(.sidebarflyout-mobile-noexpand) .sidebarflyout__sidebar:hover{transform:translateX(0)}
}
@media(min-width:768px){heliux-sidebarflyout .sidebarflyout__sidebar:hover{transform:translateX(0)}
}