@-webkit-keyframes fadeInUp {
    from {
        transform: translateY(40px)
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}
@keyframes fadeInUp {
    from {
        transform: translateY(40px)
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}
@-webkit-keyframes fadeInDown {
    from {
        transform: translateY(-100%)
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}
@keyframes fadeInDown {
    from {
        transform: translateY(-100%)
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp,
.animatedFadeInDown {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}
.fadeInDown {
    opacity: 0;
    animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
}

.pwa-install-banner,
.pwa-update-banner,
.pwa-install-banner-ios,
.pwa-enable-notifications {
    position: fixed;
    right: 4px;
    bottom: var(--padding-lg);
    left: 4px;
    z-index: 999999;
    width: 768px;
    max-width: calc(100% - 8px);
    color: var(--primarytextcolor);
    background-color: var(--primarycolor);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0.1rem;
    padding: var(--padding);
    margin: auto;
}
.pwa-install-banner::after,
.pwa-install-banner-ios::after,
.pwa-enable-notifications::after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: var(--primarycolor);
	border-width: 8px;
	margin-left: -8px;
}

.pwa-install-banner {

}

.pwa-update-banner {
    top: 4px;
    right: 4px;
    bottom: auto;
    left: 4px;
    width: auto;
}

.pwa-install-banner-ios {

}

.pwa-enable-notifications {

}
.pwa-install-banner-ios.inner-content,
.pwa-enable-notifications.inner-content {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    max-width: 100%;
    box-shadow: none;
    padding: 0;
    margin: var(--margin) 0;
}
.pwa-install-banner-ios.inner-content::after,
.pwa-enable-notifications.inner-content::after {
    display: none;
}

[class*="pwa-"] .btn {
    min-height: auto;
    font-size: 0.889em;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: none;
    box-shadow: none;
    padding: 5px;
    padding: calc(var(--padding) / 3);
    margin: 0;
}
[class*="pwa-"] .btn::after {
    display: none;
}
[class*="pwa-"] .btn:hover,
[class*="pwa-"] .btn:focus,
[class*="pwa-"] .btn.tab-focus {
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: none;
    transform: none;
}

.hide-x {
    position: absolute;
    top: 0;
    right: 5px;
    color: var(--primarytextcolor);
    background-color: transparent;
    cursor: pointer;
}
.hide-x > [class*="fa-"] {
    margin-right: 0;
}

/* Checkbox Toggle-Switch */
.cats.inputs input:where([type="checkbox"][role="switch"]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    color: inherit;
    background-color: transparent;
    font-size: inherit;
    width: 2em;
    height: 1em;
    box-sizing: content-box;
    border: 1px solid;
    border-radius: 1em;
    vertical-align: text-bottom;
    padding: 0;
    margin: auto;
    cursor: pointer;
    user-select: none;
}
.cats.inputs input:where([type="checkbox"][role="switch"])::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    box-sizing: border-box;
    width: 0.7em;
    height: 0.7em;
    margin: 0 0.15em;
    border-radius: 50%;
    background: var(--bodycolor);
    opacity: 0.75;
    transition: background-color 100ms ease-in, left 100ms ease-in;
}
.cats.inputs input:where([type="checkbox"][role="switch"]):checked::before {
    left: 1em;
    background: var(--primarycolor);
    opacity: 1;
}
.toggle-switch-text {
    margin-left: 0.5em;
    user-select: none;
}