:root,
[data-bs-theme=light] {
    --bs-scroll-color: rgba(184, 186, 188, 0.5);
}
[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-scroll-color: rgba(98, 102, 106, 0.5);
}
:root {
    --bs-body-font-size: clamp(0.625rem, 0.8vw + 10px, 1rem);
}

/* Фон для Safari и PWA, чтобы верхняя панель был под цвет */
html, body {
    background-color: var(--bs-primary-bg-subtle);
}

/* Установка базового размера шрифта */
html {
    font-size: clamp(0.625rem, 0.8vw + 10px, 1rem);
}

/* Safari */
@supports (-webkit-touch-callout: none) {
    :root {
        --bs-body-font-size: 1rem;
    }
    html {
        font-size: 1rem;
    }
}

/* Размеры на разных устройствах и системах */
/* Windows */
/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    :root {
        font-size: 0.875rem; !* Базовый размер для стандартных мониторов Windows *!
    }

    @media (min-resolution: 192dpi) {
        :root {
            font-size: 1rem; !* Увеличенный размер для HD экранов *!
        }
    }
}*/

/* macOS */
/*@supports (-webkit-appearance: none) {
    :root {
        font-size: 0.875rem; !* Базовый размер для macOS *!
    }

    @media (min-resolution: 192dpi) {
        :root {
            font-size: 1rem; !* Увеличенный размер для Retina экранов *!
        }
    }
}*/

/* Android */
/*@media screen and (max-width: 768px) and (max-resolution: 300dpi) {
    :root {
        font-size: 0.875rem; !* Для Android с обычной плотностью пикселей *!
    }

    @media (min-resolution: 300dpi) {
        :root {
            font-size: 1rem; !* Для Android с высокой плотностью пикселей *!
        }
    }
}*/

/* iOS */
/*@media screen and (max-device-width: 768px) {
    :root {
        font-size: 1rem; !* Для iOS с обычной плотностью пикселей *!
    }

    @media (min-resolution: 300dpi) {
        :root {
            font-size: 1rem; !* Для iOS с высокой плотностью пикселей *!
        }
    }
}*/

.grab-cursor, .grab-cursor *:not(button):not(input):not(textarea) {
    cursor: grab !important;
}
.grabbing-cursor, .grabbing-cursor *:not(button):not(input):not(textarea) {
    cursor: grabbing !important;
}

.emoji {
    line-height: 1px;
}

.shadow-ring {
    transition: box-shadow .1s;
    box-shadow: 0 0 0.25rem 0.1rem var(--bs-primary);
}

.shadow-ring-hide {
    transition: box-shadow 1s;
    box-shadow: none !important;
}

.shadow-hover-ring {
    transition: box-shadow 1s;
}

.shadow-hover-ring:hover {
    transition: box-shadow .1s;
    box-shadow: 0 0 0.25rem 0.1rem var(--bs-primary-border-subtle) !important;
}

.mandatory-scroll-x {
    scroll-snap-type: x mandatory;
}

.mandatory-scroll-align {
    scroll-snap-align: center;
}

@keyframes red-glow-old {
    0% {
        box-shadow: 0 0 0.125rem rgba(var(--bs-danger-rgb), 0.8) !important;
    }
    50% {
        box-shadow: 0 0 0.625rem rgba(var(--bs-danger-rgb), 0.8) !important;
    }
    100% {
        box-shadow: 0 0 0.125rem rgba(var(--bs-danger-rgb), 0.8) !important;
    }
}
@keyframes red-glow {
    0% {
        box-shadow: 0 0 0.625rem rgba(var(--bs-danger-rgb), 0) !important;
    }
    50% {
        box-shadow: 0 0 0.625rem rgba(var(--bs-danger-rgb), 0.8) !important;
    }
    100% {
        box-shadow: 0 0 0.625rem rgba(var(--bs-danger-rgb), 0) !important;
    }
}

.red-glow-effect {
    box-shadow: 0 0 0.625rem rgba(var(--bs-danger-rgb), 0.8);
    animation: red-glow 3s infinite;
}

.border-transparent {
    border-color: rgba(255, 255, 255, 0) !important;
}

.border-orange {
    border-color: var(--bs-orange) !important;
}

.border-indigo {
    border-color: var(--bs-indigo) !important;
}

.border-purple {
    border-color: var(--bs-purple) !important;
}

.border-pink {
    border-color: var(--bs-pink) !important;
}

.border-teal {
    border-color: var(--bs-teal) !important;
}

.border-cyan {
    border-color: var(--bs-cyan) !important;
}

.bg-orange {
    background-color: rgb(from var(--bs-orange) r g b / 0.5) !important;
}

.bg-indigo {
    background-color: rgb(from var(--bs-indigo) r g b / 0.5) !important;
}

.bg-purple {
    background-color: rgb(from var(--bs-purple) r g b / 0.5) !important;
}

.bg-pink {
    background-color: rgb(from var(--bs-pink) r g b / 0.5) !important;
}

.bg-teal {
    background-color: rgb(from var(--bs-teal) r g b / 0.5) !important;
}

.bg-cyan {
    background-color: rgb(from var(--bs-cyan) r g b / 0.5) !important;
}

.fs-7 {
    font-size: 0.75em !important;
}

.hide-animated {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 5s, opacity 5s linear;
}

/* XXL */
@media (min-width: 1400px) {
    .modal-xxl {
        --bs-modal-width: 1800px;
    }
}
@media (max-width: 1399.98px) {
    .border-none-below-xxl {
        border-width: 0 !important;
    }
}
@media (min-width: 1400px) {
    .row-divider-5 {
        position: relative;
    }
    .row-divider-5::before {
        content: "";
        position: absolute;
        top: var(--bs-modal-header-padding-y);
        bottom: var(--bs-modal-header-padding-y);
        left: calc(100% * 5 / 12);
        width: 1px;
        background: var(--bs-border-color);
    }
}


pre.line_numbers code {
    display: block;
    counter-increment: line;
}

pre.line_numbers code:before {
    content: counter(line);
    display: inline-block;
    color: var(--bs-light-text-emphasis) !important;
    opacity: 0.5;
    padding: 0 0.6em;
    margin-right: 0.6em;
    text-align: end;
}

pre.line_numbers:has(> code:nth-child(9)) code:before {
    min-width: 30px;
}

pre.line_numbers:has(> code:nth-child(99)) code:before {
    min-width: 38px;
}

pre.line_numbers:has(> code:nth-child(999)) code:before {
    min-width: 46px;
}

*::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, 0);
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar-thumb {
    scrollbar-color: var(--bs-scroll-color);
    scrollbar-width: thin;

    background-color: var(--bs-scroll-color);
    border-radius: 16px;
    border: 2px solid rgba(0, 0, 0, 0);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    scrollbar-color: var(--bs-gray-600) rgba(0, 0, 0, 0);
    background-color: var(--bs-gray-600);
}

*::-webkit-scrollbar-button {
    display: none;
}


.CodeMirror {
    background: inherit !important;
    color: inherit !important;
}

.CodeMirror-cursor {
    border-color: inherit !important;
}

.EasyMDEContainer .editor-toolbar .active {
    color: #000000 !important;
}

.EasyMDEContainer .editor-toolbar {
    padding: 5px;
    border: 0;
}