.glonin-pwa-hidden {
    display: none !important;
}

#taskmenu > .special-buttons > a.glonin-pwa-control {
    position: relative;
}

#taskmenu > .special-buttons > a.glonin-pwa-control::before,
.glonin-pwa-login-install::before {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    content: "";
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

#taskmenu > .special-buttons > a.glonin-pwa-install::before,
.glonin-pwa-login-install::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V3a1 1 0 0 1 1-1ZM5 18a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V3a1 1 0 0 1 1-1ZM5 18a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}

#taskmenu > .special-buttons > a.glonin-pwa-notifications::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a6 6 0 0 0-6 6v3.76l-1.8 3.6A1.5 1.5 0 0 0 5.54 17.5h12.92a1.5 1.5 0 0 0 1.34-2.17L18 11.76V8a6 6 0 0 0-6-6Zm0 20a3 3 0 0 0 2.83-2H9.17A3 3 0 0 0 12 22Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a6 6 0 0 0-6 6v3.76l-1.8 3.6A1.5 1.5 0 0 0 5.54 17.5h12.92a1.5 1.5 0 0 0 1.34-2.17L18 11.76V8a6 6 0 0 0-6-6Zm0 20a3 3 0 0 0 2.83-2H9.17A3 3 0 0 0 12 22Z'/%3E%3C/svg%3E");
}

.glonin-pwa-control .glonin-pwa-state {
    position: static;
    grid-column: 3;
    align-self: center;
    justify-self: end;
    box-sizing: border-box;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-start: 0.25rem;
    background: #8a8886;
    border: 0.0625rem solid currentColor;
    border-radius: 50%;
}

.glonin-pwa-control.glonin-pwa-enabled .glonin-pwa-state {
    background: #168038;
}

.glonin-pwa-control.glonin-pwa-blocked .glonin-pwa-state {
    background: #c4314b;
}

body:is(.glonin-unified-sidebar, .glonin-mobile-sidebar)
    #taskmenu > .special-buttons > a.glonin-pwa-control {
    color: var(--glonin-text) !important;
    background: transparent !important;
}

@media (hover: hover) and (pointer: fine) {
    body:is(.glonin-unified-sidebar, .glonin-mobile-sidebar)
        #taskmenu > .special-buttons > a.glonin-pwa-control:hover {
        color: var(--glonin-text) !important;
        background: var(--glonin-hover) !important;
    }
}

body:is(.glonin-unified-sidebar, .glonin-mobile-sidebar)
    #taskmenu > .special-buttons > a.glonin-pwa-control:active {
    color: var(--glonin-text) !important;
    background: var(--glonin-selected) !important;
}

body:is(.glonin-unified-sidebar, .glonin-mobile-sidebar)
    #taskmenu > .special-buttons > a.glonin-pwa-control:focus-visible {
    color: var(--glonin-text) !important;
    background: var(--glonin-hover) !important;
    outline: none !important;
    box-shadow:
        inset 0 0 0 0.125rem var(--glonin-accent) !important;
}

html.dark-mode
    body:is(.glonin-unified-sidebar, .glonin-mobile-sidebar)
    #taskmenu > .special-buttons > a.glonin-pwa-control {
    color: var(--glonin-text, #f4f2ed) !important;
}

@media screen and (min-width: 1024px) {
    html body:not(.task-login)
        #layout-menu #taskmenu > .special-buttons
        > a.glonin-pwa-control {
        align-self: stretch !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        max-inline-size: none !important;
        margin: 0 !important;
    }

    body.glonin-unified-sidebar
        #layout-menu #taskmenu > .special-buttons
        > :is(a.settings, a.glonin-pwa-control, a.theme, a.logout) {
        display: grid !important;
        grid-template-columns:
            var(--glonin-row-icon, 1.35rem)
            minmax(0, 1fr)
            auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        column-gap: var(--glonin-row-gap, 0.65rem) !important;
        box-sizing: border-box !important;
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        block-size: var(--glonin-row-size, 2.7rem) !important;
        margin: 0 !important;
        padding-block: 0 !important;
        padding-inline: var(--glonin-row-inline, 0.75rem) !important;
        border: 0 !important;
        border-radius: var(--glonin-nav-radius, 0.65rem) !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-align: start !important;
    }

    body.glonin-unified-sidebar
        #layout-menu #taskmenu > .special-buttons
        > a.glonin-pwa-control::before {
        position: static !important;
        display: block !important;
        grid-column: 1 !important;
        justify-self: center !important;
        inline-size: var(--glonin-row-icon, 1.35rem) !important;
        block-size: var(--glonin-row-icon, 1.35rem) !important;
        margin: 0 !important;
    }

    body.glonin-unified-sidebar
        #layout-menu #taskmenu > .special-buttons
        > a.glonin-pwa-control > .inner {
        grid-column: 2 !important;
        min-inline-size: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.glonin-unified-sidebar.glonin-sidebar-compact
        #layout-menu #taskmenu > .special-buttons
        > :is(a.settings, a.glonin-pwa-control, a.theme, a.logout) {
        grid-template-columns: var(--glonin-row-icon, 1.35rem) !important;
        justify-content: center !important;
        justify-items: center !important;
        column-gap: 0 !important;
        padding-inline: 0 !important;
    }

    body.glonin-unified-sidebar.glonin-sidebar-compact
        #layout-menu #taskmenu > .special-buttons
        > a.glonin-pwa-control::before {
        grid-column: 1 !important;
        justify-self: center !important;
    }

    body.glonin-unified-sidebar.glonin-sidebar-compact
        #layout-menu #taskmenu > .special-buttons
        > a.glonin-pwa-control > .inner {
        display: none !important;
    }
}

body.glonin-mobile-sidebar
    #taskmenu > .special-buttons > a.glonin-pwa-control::before {
    position: static !important;
    display: block !important;
    grid-column: 1 !important;
    justify-self: center !important;
    inline-size: var(--glonin-mobile-icon-inline, 1.55rem) !important;
    block-size: var(--glonin-mobile-icon-inline, 1.55rem) !important;
    margin: 0 !important;
}

body.glonin-unified-sidebar.glonin-sidebar-compact
    .glonin-pwa-control .glonin-pwa-state {
    display: none !important;
}

html body.task-login #login-form .formbuttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

html body.task-login
    #login-form .formbuttons .glonin-pwa-login-install {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: max(3rem, 48px);
    margin: 0;
    padding-block: 0.65rem;
    padding-inline: 1rem;
    color: #201f1e;
    background: #ffffff;
    border: 0.0625rem solid rgb(32 31 30 / 22%);
    border-radius: max(0.5rem, 8px);
    box-shadow: 0 0.125rem 0.5rem rgb(32 31 30 / 8%);
    font-family: inherit;
    font-size: max(0.9375rem, 15px);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    touch-action: manipulation;
    cursor: pointer;
    transition:
        color 120ms ease,
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 80ms ease;
}

html body.task-login
    #login-form .formbuttons .glonin-pwa-login-install::before {
    position: static;
    flex: 0 0 auto;
    inline-size: max(1.25rem, 20px);
    block-size: max(1.25rem, 20px);
    margin: 0;
}

html body.task-login
    #login-form .formbuttons .glonin-pwa-login-install > span {
    min-inline-size: 0;
    line-height: inherit;
}

@media (hover: hover) and (pointer: fine) {
    html body.task-login
        #login-form .formbuttons .glonin-pwa-login-install:hover {
        color: #201f1e;
        background: #fff8d6;
        border-color: #d2ad00;
        box-shadow: 0 0.2rem 0.75rem rgb(32 31 30 / 12%);
    }
}

html body.task-login
    #login-form .formbuttons .glonin-pwa-login-install:active {
    color: #201f1e;
    background: #f9e98d;
    border-color: #c7a400;
    box-shadow: 0 0.0625rem 0.25rem rgb(32 31 30 / 10%);
    transform: translateY(0.0625rem);
}

html body.task-login
    #login-form .formbuttons .glonin-pwa-login-install:focus:not(:focus-visible) {
    outline: none;
}

html body.task-login
    #login-form .formbuttons .glonin-pwa-login-install:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 0.1875rem rgb(255 213 26 / 34%),
        0 0.125rem 0.5rem rgb(32 31 30 / 8%);
}

html.dark-mode body.task-login
    #login-form .formbuttons .glonin-pwa-login-install {
    color: #f5f5f3;
    background: #242321;
    border-color: rgb(255 255 255 / 22%);
    box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 22%);
}

@media (hover: hover) and (pointer: fine) {
    html.dark-mode body.task-login
        #login-form .formbuttons .glonin-pwa-login-install:hover {
        color: #ffffff;
        background: #32302d;
        border-color: #ffd51a;
        box-shadow: 0 0.2rem 0.75rem rgb(0 0 0 / 30%);
    }
}

html.dark-mode body.task-login
    #login-form .formbuttons .glonin-pwa-login-install:active {
    color: #ffffff;
    background: #3b382f;
    border-color: #e2bb00;
}

html.dark-mode body.task-login
    #login-form .formbuttons .glonin-pwa-login-install:focus-visible {
    box-shadow:
        0 0 0 0.1875rem rgb(255 213 26 / 40%),
        0 0.125rem 0.5rem rgb(0 0 0 / 22%);
}

html body.task-login
    #login-form .formbuttons .glonin-pwa-login-install.glonin-pwa-hidden {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.task-login
        #login-form .formbuttons .glonin-pwa-login-install {
        transition: none;
    }
}

.glonin-pwa-dialog {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: grid;
    align-items: end;
    justify-items: center;
    box-sizing: border-box;
    padding-block-start: max(1rem, env(safe-area-inset-top));
    padding-inline-start: max(1rem, env(safe-area-inset-left));
    padding-inline-end: max(1rem, env(safe-area-inset-right));
    padding-block-end: max(1rem, env(safe-area-inset-bottom));
    background: rgb(0 0 0 / 48%);
}

.glonin-pwa-dialog__panel {
    box-sizing: border-box;
    width: min(100%, 28rem);
    max-height: min(80vh, 36rem);
    padding: 1.25rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    color: #201f1e;
    background: #fff;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 1rem;
    box-shadow: 0 1.25rem 4rem rgb(0 0 0 / 30%);
    animation: glonin-pwa-sheet-in 160ms ease-out;
}

@supports (height: 100dvh) {
    .glonin-pwa-dialog__panel {
        max-height: min(80dvh, 36rem);
    }
}

.glonin-pwa-dialog__title {
    margin: 0 0 0.65rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.glonin-pwa-dialog__body {
    margin: 0;
    color: #605e5c;
    font-size: 0.95rem;
    line-height: 1.5;
}

.glonin-pwa-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.glonin-pwa-dialog__actions button {
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
    border: 1px solid #d2d0ce;
    border-radius: 0.6rem;
    font: inherit;
    font-weight: 650;
}

.glonin-pwa-dialog__primary {
    color: #201f1e;
    background: #f7d117;
    border-color: #f7d117 !important;
}

.glonin-pwa-dialog__secondary {
    color: #201f1e;
    background: #fff;
}

html.dark-mode .glonin-pwa-dialog__panel {
    color: #f4f2ed;
    background: #201f1e;
    border-color: rgb(255 255 255 / 14%);
}

html.dark-mode .glonin-pwa-dialog__body {
    color: #c8c6c4;
}

html.dark-mode .glonin-pwa-dialog__secondary {
    color: #f4f2ed;
    background: #323130;
    border-color: #484644;
}

@media (min-width: 40rem) {
    .glonin-pwa-dialog {
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glonin-pwa-dialog__panel {
        animation: none;
    }
}

@keyframes glonin-pwa-sheet-in {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}