/* ==========================================================================
   @retalia/sidebar-navigation 21.1.48 (what PortalUI and the *_V2 apps ship),
   ported verbatim from the compiled component styles in its shadow root:
   navigation-lib, sidebar, sub-item, topbar. Selectors are prefixed with the
   component host element (<sidebar>, <topbar>) instead of _ngcontent attributes.
   Both hosts carry .rt-shell so Tailwind's reset stays out (the real ones sit in
   a shadow root and only get browser defaults).
   ========================================================================== */

/* ---- PortalUI main-layout ---- */
.layout-shell { min-height: 100vh; background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.08), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); position: relative; }

/* ---- navigation-lib ---- */
#root { display: flex; flex-flow: column; }
#main { display: flex; height: 100%; min-width: 0; }
#main > .content { margin-top: 90px; flex-grow: 1; min-width: 0; }
@media (max-width: 37.5em) { #main > .content { margin-top: 60px; padding: 0; } }
/* The apps' <body>: black text. Line-height: PortalUI loads normalize.css (1.15); the *_V2 apps and POSUI
   don't, so they use the browser default. body[data-ns] is the active module (set by the router). */
.rt-shell, .pui { color: #000; line-height: normal; }
body[data-ns="portalui"] .rt-shell, .pui--portal { line-height: 1.15; }

/* ---- sidebar ---- */
sidebar { display: block; flex: 0 0 72px; width: 72px; flex-shrink: 0; }
@media (max-width: 37.5em) { sidebar { flex: 0 0 0; width: 0; } }
sidebar:has(.open-sidebar) { flex: 0 0 260px; width: 260px; }
@media (max-width: 37.5em) { sidebar:has(.open-sidebar) { flex: 0 0 min(82vw, 280px); width: min(82vw, 280px); } }
sidebar .sidebar-backdrop { display: none; }
@media (max-width: 37.5em) {
    sidebar .sidebar-backdrop { display: block; position: fixed; inset: 60px 0 0; z-index: 35; background: #0c183073; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; }
    sidebar .sidebar-backdrop--visible { opacity: 1; visibility: visible; pointer-events: auto; }
}
sidebar #sidebar-container { z-index: 40; position: fixed; top: 67px; left: 0; height: calc(100vh - 67px); overflow: hidden; font-size: 12px; width: 72px; transition: width .28s ease; will-change: width; }
@media (max-width: 37.5em) { sidebar #sidebar-container { top: 60px; width: 0; height: calc(100vh - 60px); transition: width .28s ease; } }
sidebar #sidebar-panel { display: flex; flex-direction: column; position: relative; height: 100%; width: 72px; overflow: hidden; box-sizing: border-box; background: #fff; border-right: 1px solid #d4d6e4; box-shadow: none; transition: width .28s ease, border-color .28s ease, box-shadow .28s ease; }
@media (max-width: 37.5em) { sidebar #sidebar-panel { width: 0; border-right: 0; box-shadow: none; } }
sidebar .open-sidebar { width: 260px !important; }
@media (max-width: 37.5em) { sidebar .open-sidebar { width: min(82vw, 280px) !important; } }
sidebar .preview-sidebar:not(.open-sidebar) { width: 260px !important; z-index: 50; }
@media (max-width: 37.5em) { sidebar .preview-sidebar:not(.open-sidebar) { width: min(82vw, 280px) !important; } }
sidebar .open-sidebar #sidebar-panel, sidebar .preview-sidebar #sidebar-panel { box-sizing: border-box; width: 260px !important; border-right-color: #d4d6e4 !important; box-shadow: 8px 0 24px #0c18300a; }
@media (max-width: 37.5em) { sidebar .open-sidebar #sidebar-panel, sidebar .preview-sidebar #sidebar-panel { width: min(82vw, 280px) !important; box-shadow: 16px 0 40px #0c18302e; } }
sidebar .preview-sidebar #sidebar-panel { box-shadow: 12px 0 32px #0c18301f; }
sidebar .collapsed-sidebar div#menu { padding-top: 10px; }
@media (max-width: 37.5em) {
    sidebar .collapsed-sidebar { pointer-events: none; }
    sidebar .collapsed-sidebar div#menu { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media print { sidebar #container { display: none; } }
sidebar div#menu { display: flex; flex-flow: column; background-color: transparent; z-index: 10; direction: ltr; width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; transition: opacity .2s ease; padding-top: 10px; }
@media (max-width: 37.5em) { sidebar div#menu { width: min(82vw, 280px) !important; } }
sidebar .moduleSearchbar { z-index: 20; position: inherit; cursor: pointer; box-sizing: border-box; width: 100%; height: 28px; border-radius: 4px; margin: 10px 0; background: #e2e2e2; }
@media (max-width: 37.5em) { sidebar .moduleSearchbar { height: 40px; } }
sidebar .moduleSearchbar .moduleSearchInput { direction: ltr; box-sizing: border-box; width: 100%; height: inherit; padding-left: 10px; color: #545454; background-color: transparent; border-style: none; outline: none; appearance: none; -webkit-appearance: none; }
sidebar .moduleSearchbar input:invalid { box-shadow: none; }
sidebar .moduleSearchbar ::placeholder { color: #a5a5a5; font-size: 11px; opacity: 1; }
sidebar .sidebar-divider { flex-shrink: 0; border: 0; border-top: 1px solid #d4d6e4; margin: 0 10px; width: auto; }
sidebar #sticky-header { flex-shrink: 0; margin-top: 10px; box-sizing: border-box; width: 100%; padding: 0 10px; transition: opacity .2s ease; }
sidebar .sidebar-header-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
sidebar ::-webkit-scrollbar { width: 5px; background: transparent; }
sidebar ::-webkit-scrollbar-thumb { background-color: #5454544d; border-radius: 10px; transition: .2s linear; }
sidebar ::-webkit-scrollbar-thumb:hover { background-color: #545454e6; }
sidebar input[type=search]::-webkit-search-decoration, sidebar input[type=search]::-webkit-search-cancel-button, sidebar input[type=search]::-webkit-search-results-button, sidebar input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; }

/* ---- sub-item ---- */
sidebar .sub-item, sidebar .item-group { position: relative; list-style: none; pointer-events: all; text-transform: capitalize; font-family: Chakra Petch, Arial, sans-serif; color: #a5a5a5; transition: color .15s ease-in-out; width: 258px; text-indent: 40px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 500; }
@media (max-width: 37.5em) { sidebar .sub-item, sidebar .item-group { width: 100%; line-height: 45px; } }
sidebar .item-group > * { text-indent: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
sidebar .sub-item { font-style: normal; font-weight: 600; font-size: 14px; line-height: 200%; letter-spacing: 0; }
sidebar .sub-item:hover { font-weight: 600; }
sidebar .item-label { display: flex; align-items: center; min-width: 0; position: relative; transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out; }
sidebar .item-text { overflow: hidden; text-overflow: ellipsis; }
sidebar .item-icon { flex: 0 0 auto; width: 26px; height: 26px; margin-right: 8px; vertical-align: middle; object-fit: contain; transition: filter .15s ease-in-out, opacity .15s ease-in-out; }
sidebar .sub-item--top-level-modules.sub-item--has-active-module .item:not(.item-module-row--selected) .item-icon { filter: grayscale(1) brightness(.68); opacity: .92; }
sidebar .sub-item--top-level-modules.sub-item--has-active-module .item.item-module-row--selected .item-icon { filter: none; opacity: 1; }
sidebar .sub-item--top-level-modules.sub-item--has-active-module .item:not(.item-module-row--selected):hover .item-icon { filter: grayscale(1) brightness(.78); opacity: 1; }
sidebar .sub-item--top-level-modules > .item > .item-label { box-sizing: border-box; padding-left: 27px; text-indent: 0; justify-content: flex-start; height: 35px; }
sidebar .sub-item--top-level-modules > .item { display: block; }
sidebar .sub-item > .item-label, sidebar .item-group > .item-label { box-sizing: border-box; padding-left: 27px; }
sidebar .item { display: inline-block; position: relative; list-style: none; text-indent: 12px; align-items: center; font-family: Chakra Petch, Arial, sans-serif; line-height: 35px; border: 0px; cursor: pointer; font-weight: 500; font-size: 18px; color: #545454; transition: color .15s ease-in-out; padding: 4px 0; padding-right: 15px !important; width: 245px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
@media (max-width: 37.5em) { sidebar .item { width: 100%; padding: 10px 0 !important; } }
sidebar .sub-item--collapsed .item { display: block; width: 72px; padding: 4px 0 !important; text-indent: 0; }
sidebar .sub-item--collapsed .item-label { justify-content: flex-start; height: 35px; border-radius: 12px; margin: 0; }
sidebar .sub-item--collapsed .item-icon { margin-right: 0; }
sidebar .sub-item--collapsed .item-text, sidebar .sub-item--collapsed .item > sub-item { display: none; }
sidebar .sub-item--collapsed .item:hover > .item-label, sidebar .sub-item--collapsed .sub-item:hover > .item-label, sidebar .sub-item--collapsed .item-group:hover > .item-label { transform: none; }
@media (max-width: 37.5em) {
    sidebar .sub-item--collapsed .item-text { display: inline; }
    sidebar .sub-item--collapsed .item { width: 100%; text-indent: 12px; }
    sidebar .sub-item--collapsed .item-label { justify-content: flex-start; height: auto; margin: 0; }
    sidebar .sub-item--collapsed .item-icon { margin-right: 8px; }
}
sidebar .item .sub-item:not(.selected-sub-item) { color: #aeaeae; font-weight: 500; }
sidebar .item .sub-item:not(.selected-sub-item):hover > .item-label { color: #a5a5a5; }
sidebar .item .sub-item:not(.selected-sub-item):hover { font-weight: 500; }
sidebar .item .sub-item:not(.selected-sub-item) .item-icon { filter: grayscale(1) brightness(.68); opacity: .92; }
sidebar .item .sub-item.selected-sub-item .item-icon { filter: none; opacity: 1; }
sidebar .item .sub-item:not(.selected-sub-item):hover .item-icon { filter: grayscale(1) brightness(.78); opacity: 1; }
sidebar .item:hover > .item-label, sidebar .sub-item:hover > .item-label, sidebar .item-group:hover > .item-label { background: #5b02c714; transform: translate(2px); }
sidebar .sub-item--top-level-modules > .item.item-module-row--selected { color: #b27bfb; }
sidebar .sub-item--top-level-modules > .item.item-module-row--selected > .item-label { background: #fbf9ff; color: #b27bfb; font-weight: 500; transform: none; }
sidebar .sub-item--top-level-modules > .item.item-module-row--selected > .item-label:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: #b27bfb; border-radius: 0 5px 5px 0; pointer-events: none; }
sidebar .sub-item--top-level-modules > .item.item-module-row--selected:hover > .item-label { background: #fbf9ff; transform: none; }
sidebar .sub-item--top-level-modules.sub-item--collapsed > .item.item-module-row--selected > .item-label { background: transparent; }
sidebar .active > .item-label { color: #b27bfb; background: #fbf9ffcc; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); transform: scale(1.02); }
sidebar .active > .item-label:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: #b27bfb; border-radius: 0 6px 6px 0; pointer-events: none; }
sidebar .selected-sub-item > .item-label { padding-left: 41px; color: #545454; font-weight: 600; }
sidebar .selected-sub-item > .item-label:before { content: "\2022"; position: absolute; left: 27px; top: 50%; transform: translateY(-50%); font-size: 14px; line-height: 1; color: inherit; }
sidebar .sub-item--top-level-modules > .selected-sub-item > .item-label { padding-left: 27px; }
sidebar .sub-item--top-level-modules > .selected-sub-item > .item-label:before { content: none; }
sidebar sub-item { display: block; }

/* ---- shop-modal ---- */
#shopModalInner { direction: ltr; }
.shopButtons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px 0; margin: auto; width: 100%; }
.shopButton { cursor: pointer; min-width: 0; width: 100%; border-radius: 5px; border: none; outline: none; padding: 5px 10px; }
.shopSearchInput { display: block; direction: ltr; width: 90%; height: inherit; margin: auto; }

/* ---- topbar ---- */
topbar { display: block; }
topbar #item-name { font-family: Poppins, sans-serif; font-size: 24px; font-weight: 700; padding-left: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: capitalize; }
@media (max-width: 37.5em) { topbar #item-name { padding-left: 70px; } }
topbar .top-menu { z-index: 60; margin: 0; top: 0; left: 0; right: 0; position: fixed; display: flex; align-items: center; box-sizing: border-box; gap: 8px; padding: 0 12px; height: 67px; width: 100%; overflow: visible; background-color: #fff; }
@media (max-width: 37.5em) { topbar .top-menu { gap: 4px; padding: 0 8px; min-height: 60px; height: 60px; } }
topbar .top-menu .topbar-logo { cursor: pointer; flex: 0 0 auto; height: 40px; margin-left: 8px; width: auto; max-height: 40px; object-fit: contain; object-position: left center; }
@media (max-width: 37.5em) { topbar .top-menu .topbar-logo { height: 32px; max-height: 32px; margin-left: 4px; } }
topbar .top-menu .sidebar-toggle-button { cursor: pointer; display: flex; flex-shrink: 0; align-items: center; justify-content: center; height: 40px; width: 40px; margin-left: 0; padding: 0; border: 0; border-radius: 50%; background-color: transparent; transition: .2s linear; }
topbar .top-menu .sidebar-toggle-button:hover { background-color: #a5a5a5; }
topbar .top-menu .sidebar-toggle-button:hover .sidebar-toggle-icon { fill: #fff; }
topbar .top-menu .sidebar-toggle-button:active, topbar .top-menu .sidebar-toggle-button:focus-visible { outline: none; background: #54545433; }
topbar .top-menu .sidebar-toggle-button:active .sidebar-toggle-icon, topbar .top-menu .sidebar-toggle-button:focus-visible .sidebar-toggle-icon { fill: #545454; }
topbar .top-menu .sidebar-toggle-button .sidebar-toggle-icon { margin: 0; }
topbar .top-menu .top-menu-right { position: relative; flex-shrink: 0; margin-left: auto; z-index: 21; display: flex; align-items: center; gap: 10px; height: 67px; }
@media (max-width: 37.5em) { topbar .top-menu .top-menu-right { gap: 4px; height: 60px; } }
topbar .top-menu .status-button { position: relative; flex: 0 0 auto; cursor: pointer; width: 40px; height: 40px; }
@media (max-width: 37.5em) { topbar .top-menu .status-button { width: 36px; height: 36px; } }
topbar .top-menu .status-button { border-radius: 50%; transition: .2s linear; display: flex; align-items: center; justify-content: center; }
topbar .top-menu .status-button .status-button-icon { display: block; fill: #575757; }
topbar .top-menu .status-button:hover { background-color: #545454; }
topbar .top-menu .status-button:hover .status-button-icon { fill: #fff; }
topbar .top-menu .status-button .status-embed { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; border: 0; transition: .2s linear; pointer-events: none; }
topbar .top-menu .status-button .status-embed.isOpen { opacity: 1; visibility: visible; }
topbar .top-menu .status-button .status-embed.isClosed { opacity: 0; visibility: hidden; }
topbar .top-menu .support-menu { position: relative; flex: 0 0 auto; }
topbar .top-menu .support-menu-trigger { cursor: pointer; width: 40px; height: 40px; }
@media (max-width: 37.5em) { topbar .top-menu .support-menu-trigger { width: 36px; height: 36px; } }
topbar .top-menu .support-menu-trigger { border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .2s linear; }
topbar .top-menu .support-menu-trigger .support-menu-icon { display: block; fill: #575757; }
topbar .top-menu .support-menu-trigger:hover { background-color: #a5a5a5; }
topbar .top-menu .support-menu-trigger:hover .support-menu-icon { fill: #fff; }
topbar .top-menu .support-menu-trigger:active, topbar .top-menu .support-menu-trigger:focus-visible { outline: none; background: #54545433; }
topbar .top-menu .support-menu-trigger:active .support-menu-icon, topbar .top-menu .support-menu-trigger:focus-visible .support-menu-icon { fill: #545454; }
topbar .top-menu .dropdown-items { position: fixed; list-style-type: none; white-space: nowrap; padding: 0; min-width: 120px; border-radius: 10px; border: 1px solid #d8dde6; background-color: #fff; box-shadow: 0 2px 3px; text-align-last: center; }
@media (max-width: 37.5em) { topbar .top-menu .dropdown-items { top: 60px; } }
topbar .top-menu .dropdown-items .option-text { cursor: pointer; font-family: Poppins, sans-serif; font-size: 12px; text-align: left; margin: 0; padding: 10px 0; color: #000; }
topbar .top-menu .dropdown-items .option-text:hover { background-color: #f5f5f5; border-radius: 10px; }
topbar .top-menu .dropdown-items.support-dropdown-items { position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 35; min-width: 200px; text-align-last: left; }
topbar .top-menu .dropdown-items.support-dropdown-items .option-text { padding-left: 14px; padding-right: 12px; }
@media (max-width: 37.5em) { topbar .top-menu .dropdown-items.support-dropdown-items { top: calc(100% + 8px); } }
topbar .top-menu .dropdown-items.profile-dropdown-items { position: absolute; top: calc(100% + 4px); right: 0; left: auto; z-index: 35; min-width: 160px; text-align-last: left; padding: 4px 0; }
topbar .top-menu .dropdown-items.profile-dropdown-items .option-text { padding: 10px 12px 10px 14px; }
topbar .top-menu .dropdown-items.profile-dropdown-items .dropdown-icon path { fill: #575757; }
@media (max-width: 37.5em) { topbar .top-menu .dropdown-items.profile-dropdown-items { top: calc(100% + 4px); right: 0; left: auto; min-width: 140px; } }
topbar .top-menu .dropdown-icon { pointer-events: none; float: left; margin-top: 4px; padding: 0 8px; height: 15px; width: auto; }
topbar .top-menu #profile { position: relative; display: flex; align-items: center; gap: 10px; }
@media (max-width: 37.5em) { topbar .top-menu #profile { height: 60px; gap: 6px; } }
topbar .top-menu #profile img { margin-left: 0; }
topbar .top-menu #profile .profile-avatar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 36px; width: 36px; border-radius: 50%; background-color: #c9b5f0; }
@media (max-width: 37.5em) { topbar .top-menu #profile .profile-avatar { height: 32px; width: 32px; } }
topbar .top-menu #profile .profile-avatar .profile-initial { color: #fff; font-family: Poppins, sans-serif; font-size: 18px; font-weight: 600; line-height: 1; -webkit-user-select: none; user-select: none; }
@media (max-width: 37.5em) { topbar .top-menu #profile .profile-avatar .profile-initial { font-size: 16px; } }
topbar .top-menu #profile .profile-details { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.2; }
@media (max-width: 37.5em) { topbar .top-menu #profile .profile-details { display: none; } }
topbar .top-menu #profile .profile-details .profile-name { color: #282727; font-family: Poppins, sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; }
topbar .top-menu #profile .profile-details .profile-role { color: #888; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 400; white-space: nowrap; }
topbar .top-menu #profile .profile-dropdown { position: relative; flex-shrink: 0; }
topbar .top-menu #profile .profile-dropdown-trigger { flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 22px; width: 22px; min-height: 22px; min-width: 22px; margin: 0; padding: 0; border: 1px solid #d4d6e4; border-radius: 50%; background-color: #fff; transition: .2s linear; }
topbar .top-menu #profile .profile-dropdown-trigger:hover { border-color: #a5a5a5; background-color: #fff; }
topbar .top-menu #profile .profile-dropdown-trigger:focus-visible { outline: none; border-color: #545454; }
topbar .top-menu #profile .profile-dropdown-trigger .profile-dropdown-chevron { display: block; flex-shrink: 0; width: 8px; height: 5px; pointer-events: none; color: #575757; }
topbar .top-menu #profile .profile-dropdown-trigger .profile-dropdown-chevron .profile-dropdown-chevron-path { stroke: currentColor; }
@media print { topbar .top-menu { display: none; } }

/* Demo only: status.retalia.cloud's embed (230x61 iframe) is mimicked so a live incident never shows in a client demo */
topbar .status-embed-demo { width: 230px; height: 61px; box-sizing: border-box; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); display: flex; align-items: center; gap: 10px; padding: 0 16px; font: 500 14px/1.2 Inter, -apple-system, BlinkMacSystemFont, sans-serif; color: #111; white-space: nowrap; }
topbar .status-embed-demo i { width: 10px; height: 10px; border-radius: 50%; background: #10b981; flex-shrink: 0; }
/* Demo only: shop pill for modules that run per shop (POS / POS Admin) */
topbar .shop-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 240px; padding: 0 12px; border-radius: 18px; border: 1px solid #d4d6e4; background: #fff; color: #545454; font-family: Poppins, sans-serif; font-size: 13px; cursor: pointer; transition: .2s linear; }
topbar .shop-pill:hover { border-color: #b27bfb; color: #282727; }
topbar .shop-pill svg { width: 16px; height: 16px; }
topbar .shop-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { topbar .shop-pill span { display: none; } }

/* ---- PortalUI notifications: ngx-toastr (toastClass 'toastercomponent') + @k3imagine im-toaster ---- */
.toast-top-right { top: 12px; right: 12px; }
.toast-container { pointer-events: none; position: fixed; z-index: 999999; }
.toast-container * { box-sizing: border-box; }
.toast-container customtoaster { display: block; }
.toast-container .toaster { margin-bottom: 5px; }
.toast-container .im-toaster .container { z-index: 999999; position: relative; pointer-events: auto; border-radius: 4px; padding: 15px 20px 15px 25px; margin-bottom: 5px; min-height: 20px; cursor: pointer; }
.toast-container .im-toaster .container #text { padding-left: 40px; padding-right: 80px; line-height: 1.31; font-family: "Effra"; }
.toast-container .im-toaster .container #text #label { font-size: 16px; }
.toast-container .im-toaster .container #text #description { font-size: 12px; }
.toast-container .im-toaster .container.success { background-color: #04844b; color: #ffffff; }
.toast-container .im-toaster .container.error { background-color: #c23934; color: #ffffff; }
.toast-container .im-toaster .container.informational { background-color: #54698d; color: #ffffff; }
.toast-container .im-toaster .container.warning { background-color: #ffb75d; color: #16325c; }
@keyframes rt-toast-in { 0% { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 33% { transform: skewX(20deg); opacity: 1; } 66% { transform: skewX(-5deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes rt-toast-out { 0% { opacity: 1; } 100% { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } }
.toast-container customtoaster.in { animation: rt-toast-in .4s ease-out; }
.toast-container customtoaster.out { animation: rt-toast-out .3s ease-in forwards; }