html,
body {
    font-family:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        system-ui,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

.h-content {
    height: max-content !important;
}

.px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.loader {
    animation: spin linear infinite 2s forwards running;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes spin {
    from {
        transform: rotateZ(0deg) scale(1);
        filter: saturate(0);
    }

    50% {
        filter: saturate(1);
        transform: rotateZ(180deg) scale(2);
    }

    to {
        transform: rotateZ(360deg) scale(1);
        filter: saturate(0);
    }
}

#loading,
#main_window {
    animation: fade-in 250ms 1 running;
}

.dock {
    color: white;
    background: rgba(0, 0, 0, 0.5);
    right: 0.5rem;
    bottom: 0.5rem;
    border-radius: 2rem;

    &.tr {
        top: 0.5rem;
        bottom: unset;
    }
}

.selector {
    position: absolute;
    pointer-events: none;
}

#_selector {
    border: solid 2px rgb(87, 87, 255);
}

#_selector_1 {
    border: solid 2px rgb(255, 87, 87);
}

.m-w-content {
    min-width: max-content;
}

@media screen and (min-width: 901px) {
    .dialog.open-lg,
    .dialog.open-lg .inner {
        width: 35rem;
    }
}

align {
    width: 100%;
    display: block;
}

align.center {
    text-align: center;
}

align.right {
    text-align: right;
}

.dialog:not(.offcanvas) {
    z-index: 6;
}

#snackbars {
    z-index: 6;
}

textarea {
    line-height: 2.5ch;
}