.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.hidden {
    display: none;
}

.hidden-overflow {
    overflow: hidden;
}

.scroll-x {
    overflow-x: scroll;
}

.scroll-y {
    overflow-y: scroll;
}

.scrollbar-hidden {
    scrollbar-width: none;
}

.full-width {
    width: 100% !important;
}

.full-height {
    height: 100% !important;
}

.no-wrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-centered {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.align-top {
    vertical-align: top !important;
}

.align-bottom {
    vertical-align: bottom !important;
}

.text-line-through {
    text-decoration: line-through
}

.text-outlined {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgb(51, 51, 51);
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.clickable:hover {
    cursor: pointer;
}

.interactive canvas {
    cursor: grab;
}

.interactive canvas:active {
    cursor: grabbing;
}

.hover-darken:hover {
    background-color: var(--mud-palette-overlay-dark);
}

.hover-zoom img, .hover-zoom i {
    transition: transform .5s ease, filter .25s ease;
}

.hover-zoom:hover img, .hover-zoom:hover i {
    transform: scale(1.25);
    filter: drop-shadow(2px 4px 6px black);
}

.hover-zoom-extra:hover img,.hover-zoom-extra:hover i {
    transform: scale(1.5) !important;
}

.hover-zoom-extreme:hover img, .hover-zoom-extreme:hover i {
    transform: scale(3) !important;
}

.update-notification-icon {
    font-size: 2rem;
}

.notification-content ul {
    list-style: disc !important;
    margin-left: 2em;
}

.markdown-container p {
    margin-bottom: 0.75em;
}

.fade-out {
    animation: fade-out 0.5s 5s forwards 1;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.flash {
    animation: flash 1s 0.5s forwards 3;
}

@keyframes flash {

    25% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }

}

.glow {
    animation: glow 3s 0s linear infinite;
}

@keyframes glow {

    50% {
        filter: drop-shadow(0px 0px 16px #666);
    }

}

.glow-transparent {
    animation: glow-transparent 3s 0s linear infinite;
}

@keyframes glow-transparent {

    50% {
        filter: drop-shadow(0px 0px 16px transparent);
    }

}

.bell-ring {
    animation: bell-ring 3s 0s linear infinite;
}

@keyframes bell-ring {

    0% {
        transform: none;
    }

    5%, 15% {
        transform: rotate(25deg);
    }

    10%, 20% {
        transform: rotate(-25deg);
    }

    25% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }

}