@font-face {
    font-family: 'Roboto';
    src: url('/static/core/fonts/Roboto/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/core/fonts/Roboto/Roboto-Bold.ttf');
    font-weight: bold;
}

/* Kollektif — RedMonitoring marka fontu */
@font-face {
    font-family: 'Kollektif';
    src: url('/static/redmonitor/fonts/Kollektif.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kollektif';
    src: url('/static/redmonitor/fonts/Kollektif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Kollektif';
    src: url('/static/redmonitor/fonts/Kollektif-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kollektif';
    src: url('/static/redmonitor/fonts/Kollektif-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Logo SVG'si 'Kollektif-Bold' family-name'iyle çağırıyor — alias register et
   ki logo metni bold letterform'uyla render olsun (regular'a düşmesin). */
@font-face {
    font-family: 'Kollektif-Bold';
    src: url('/static/redmonitor/fonts/Kollektif-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Tüm site Public Sans (Google Fonts) — fallback'lar: Kollektif → Roboto → system */
body, html {
    font-family: 'Public Sans', 'Kollektif', 'Roboto', system-ui, -apple-system, sans-serif;
    font-weight: 400;
}

/* Form elemanları (button/input/select/textarea) tarayıcı varsayılanıyla
   kendi sistem fontunu kullanıyor; body fontunu devralmaları için explicit inherit. */
button, input, optgroup, select, textarea, .btn {
    font-family: inherit;
}

/* Etkileşimli eleman ağırlığı — Projects sayfasındaki proje adı linklerinin
   (Public Sans 500) hissine yakın dursun ki buton/nav ile gövde metni tutarlı görünsün. */
.btn, .nav-link, .navbar-brand, .nav-link.active {
    font-weight: 500;
}

/* ===== Marka kırmızısı: Bootstrap "danger" tonunu logo kırmızısıyla eşitle =====
   Dashboard genelinde .btn-danger, .text-danger, .bg-danger, .alert-danger, .border-danger
   ve Bootstrap 5 CSS değişkeni --bs-danger hepsi #be1e2d üzerine oturur. */
:root {
    --bs-danger: #be1e2d;
    --bs-danger-rgb: 190, 30, 45;
}
.text-danger { color: #be1e2d !important; }
.bg-danger   { background-color: #be1e2d !important; }
.border-danger { border-color: #be1e2d !important; }
.btn-danger {
    --bs-btn-bg: #be1e2d;
    --bs-btn-border-color: #be1e2d;
    --bs-btn-hover-bg: #a8192a;
    --bs-btn-hover-border-color: #a8192a;
    --bs-btn-active-bg: #8b1321;
    --bs-btn-active-border-color: #8b1321;
    --bs-btn-disabled-bg: #be1e2d;
    --bs-btn-disabled-border-color: #be1e2d;
    --bs-btn-focus-shadow-rgb: 190, 30, 45;
}
.btn-outline-danger {
    --bs-btn-color: #be1e2d;
    --bs-btn-border-color: #be1e2d;
    --bs-btn-hover-bg: #be1e2d;
    --bs-btn-hover-border-color: #be1e2d;
    --bs-btn-active-bg: #8b1321;
    --bs-btn-active-border-color: #8b1321;
    --bs-btn-focus-shadow-rgb: 190, 30, 45;
}
.alert-danger {
    --bs-alert-color: #8b1321;
    --bs-alert-bg: #fdeaec;
    --bs-alert-border-color: #f3c5ca;
}
.spinner-border.text-danger { color: #be1e2d !important; }
.progress-bar.bg-danger { background-color: #be1e2d !important; }
.badge.bg-danger, .badge.text-bg-danger {
    background-color: #be1e2d !important;
}

/* ===== Dil seçici (bayrak butonları) ===== */
.lang-switch__btn {
    padding: 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    opacity: 0.55;
    transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    line-height: 0;
    cursor: pointer;
}
.lang-switch__btn:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.lang-switch__btn--active {
    opacity: 1;
    border-color: #be1e2d;
    box-shadow: 0 0 0 1px rgba(190, 30, 45, 0.15);
}
.lang-switch__btn svg {
    display: block;
    border-radius: 2px;
}



#navbar ul li a:hover {
    color: coral;
}

main {
    /* Navbar is fixed at top:0, height ~56px. Push main below it via
       margin-top instead of stacking margin-top + padding-top + a child
       margin-top — that triple stack used to leave ~28px of dead white
       space above the page header. Plus: whitespace text nodes between
       <main>'s out-of-flow children (sidebar / offcanvas) and the
       in-flow .content emit a phantom 24px line box that font-size:0
       collapses to zero. main > * restores normal text sizing for the
       real children. */
    margin-top: 56px;
    font-size: 0;
    line-height: 0;
}
main > * {
    font-size: 1rem;
    line-height: 1.5;
}


body,
html {
    margin: 0;
}

.sidebar {
    width: 200px;
    background-color: #be1e2d;
    color: #fff;
    position: fixed;
    top: 56px;
    bottom: 0;
    padding: 0.75rem 0.65rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: width 0.18s ease, padding 0.18s ease;
}

.sidebar a {
    color: #fff;
    text-decoration: none;
}

/* Toggle button — sits above the section title, icon flush right so the
   hamburger reads as the "edge" of the sidebar (clicking the right side
   collapses it inward). When collapsed the icon centers in the narrow
   track via the rule below. */
.sidebar__toggle {
    background: transparent; color: #fff; border: 0;
    width: 100%; height: 32px;
    padding: 0 0.45rem;
    display: flex; align-items: center; justify-content: flex-end;
    cursor: pointer;
    border-radius: 6px;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease, transform 0.18s ease;
}
.sidebar__toggle:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}
.sidebar__toggle-icon { font-size: 1.25rem; line-height: 1; }
.sidebar__toggle:focus-visible {
    outline: 0; opacity: 1;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}

.sidebar__title {
    margin: 0.55rem 0 0.45rem;
    padding: 0 0.45rem;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    opacity: 0.7;
    white-space: nowrap;
}

.sidebar__list { gap: 0.1rem; }

/* Each link is icon + label flexbox row. The label collapses to width 0
   when the sidebar is collapsed (icons-only state). */
.sidebar__link {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.92rem;
    transition: background 0.12s ease, padding 0.18s ease;
}
.sidebar__link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.sidebar__icon {
    font-size: 1.05rem;
    flex: 0 0 auto;
    width: 1.25rem;
    line-height: 1;
    text-align: center;
}
.sidebar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.12s ease;
}

/* Açık proje ekranında sidebar'da diğer projeler — indent + soluk ton. */
.sidebar .sidebar-sub {
    margin-left: 0.55rem;
    border-left: 2px solid rgba(255,255,255,0.25);
}
.sidebar__link--sub {
    padding-left: 1.1rem;
    font-size: 0.85rem;
    opacity: 0.85;
}
.sidebar__link--sub:hover { opacity: 1; }
.sidebar .sidebar-sub-active {
    background-color: rgba(255,255,255,0.18);
    font-weight: 500;
}

/* Aktif üst-seviye sayfa (ör. Bildirimler) — sidebar-sub-active ile aynı ton. */
.sidebar .sidebar__link--active {
    background-color: rgba(255,255,255,0.18);
    font-weight: 500;
}

/* Bildirimler rozeti — görünür projelerdeki aktif (firing) cihaz-kanal sayısı.
   Kırmızı sidebar üstünde okunsun diye açık-kırmızı zemin + koyu kırmızı sayı
   (bildirim sayfasındaki .state-firing tonlarıyla aynı). */
.sidebar__badge {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 1.2rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.content {
    margin-left: 200px;
    margin-top: 0;
    transition: margin-left 0.18s ease;
}

/* ----- Collapsed sidebar (icons-only) ----------------------------------
   Triggered by adding `.rm-sidebar-collapsed` to the <html> element via
   the toggle button + persisted in localStorage. Only the icons stay
   visible; labels and sub-list collapse out via display:none so they
   don't bleed past the narrowed track. */
html.rm-sidebar-collapsed .sidebar {
    width: 56px;
    padding: 0.75rem 0.35rem 1rem;
}
html.rm-sidebar-collapsed .content { margin-left: 56px; }
html.rm-sidebar-collapsed .sidebar__title,
html.rm-sidebar-collapsed .sidebar__label,
html.rm-sidebar-collapsed .sidebar-sub { display: none; }
html.rm-sidebar-collapsed .sidebar__link {
    justify-content: center;
    padding: 0.55rem 0;
    position: relative;
}
/* Daralmış (icons-only) durumda rozet ikonun sağ üst köşesine biner —
   56px'lik dar şeritten taşmaz. */
html.rm-sidebar-collapsed .sidebar__badge {
    position: absolute;
    top: 1px;
    right: 3px;
    margin-left: 0;
    min-width: 0.95rem;
    padding: 0 0.2rem;
    font-size: 0.6rem;
    line-height: 0.95rem;
}
html.rm-sidebar-collapsed .sidebar__toggle {
    justify-content: center; padding: 0;
}
html.rm-sidebar-collapsed .sidebar__toggle-icon {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .offcanvas {
        width: 200px;
    }

    .content {
        margin-left: 0;
    }
    html.rm-sidebar-collapsed .content { margin-left: 0; }
}


.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    font-family: 'Roboto', sans-serif;
    color: rgb(41, 41, 41);
}


footer {
    z-index: 9;
    /* border-top: 1px solid #e7e7e7; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}


.CodeMirror {
    height: 600px;
    width: 100%;
    font-family: monospace;
}



#myVideo {
    position: absolute;
    width: 100%;
    height: 380px;
    object-fit: fill;

    @media screen and (max-width: 600px) {
        height: 560px;

    }

    @media screen and (min-width: 601px) {
        height: 560px;

    }

    @media screen and (min-width: 1024px) {
        height: 380px;

    }

    @media screen and (min-width: 1280px) {
        height: 380px;

    }

    @media screen and (min-width: 1920px) {
        height: 380px;

    }

    @media screen and (min-width: 2560px) {
        height: 380px;

    }

    @media screen and (min-width: 3840px) {
        height: 380px;

    }

    @media screen and (min-width: 5120px) {
        height: 380px;

    }

}





/*
 * CKEditor 5 (v41.2.0) content styles.
 * Generated on Wed, 06 Mar 2024 11:21:36 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
 */

:root {
    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);
    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
    --ck-color-mention-text: hsl(341, 100%, 30%);
    --ck-color-selector-caption-background: hsl(0, 0%, 97%);
    --ck-color-selector-caption-text: hsl(0, 0%, 20%);
    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
    --ck-highlight-marker-green: hsl(120, 93%, 68%);
    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
    --ck-highlight-pen-green: hsl(112, 100%, 27%);
    --ck-highlight-pen-red: hsl(0, 85%, 49%);
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
    --ck-todo-list-checkmark-size: 16px;
}

/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table .ck-table-resized {
    table-layout: fixed;
}

/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table table {
    overflow: hidden;
}

/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table td,
.ck-content .table th {
    overflow-wrap: break-word;
    position: relative;
}

/* @ckeditor/ckeditor5-table/theme/tablecaption.css */
.ck-content .table>figcaption {
    display: table-caption;
    caption-side: top;
    word-break: break-word;
    text-align: center;
    color: var(--ck-color-selector-caption-text);
    background-color: var(--ck-color-selector-caption-background);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}

/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table {
    margin: 0.9em auto;
    display: table;
}

/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    border: 1px double hsl(0, 0%, 70%);
}

/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
    min-width: 2em;
    padding: .4em;
    border: 1px solid hsl(0, 0%, 75%);
}

/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table table th {
    font-weight: bold;
    background: hsla(0, 0%, 0%, 5%);
}

/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
    text-align: right;
}

/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
    text-align: left;
}

/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
    position: relative;
    clear: both;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
    content: '';
    position: absolute;
    border-bottom: 2px dashed hsl(0, 0%, 77%);
    width: 100%;
}

/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break__label {
    position: relative;
    z-index: 1;
    padding: .3em .6em;
    display: block;
    text-transform: uppercase;
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 2px;
    font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
    font-size: 0.75em;
    font-weight: bold;
    color: hsl(0, 0%, 20%);
    background: hsl(0, 0%, 100%);
    box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* @ckeditor/ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
    clear: both;
    margin: 0.9em 0;
    display: block;
    min-width: 15em;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
    list-style: none;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li {
    position: relative;
    margin-bottom: 5px;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li .todo-list {
    margin-top: 5px;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label>input {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    width: var(--ck-todo-list-checkmark-size);
    height: var(--ck-todo-list-checkmark-size);
    vertical-align: middle;
    border: 0;
    left: -25px;
    margin-right: -15px;
    right: 0;
    margin-left: 0;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content[dir=rtl] .todo-list .todo-list__label>input {
    left: 0;
    margin-right: 0;
    right: -25px;
    margin-left: -15px;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label>input::before {
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid hsl(0, 0%, 20%);
    border-radius: 2px;
    transition: 250ms ease-in-out box-shadow;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label>input::after {
    display: block;
    position: absolute;
    box-sizing: content-box;
    pointer-events: none;
    content: '';
    left: calc(var(--ck-todo-list-checkmark-size) / 3);
    top: calc(var(--ck-todo-list-checkmark-size) / 5.3);
    width: calc(var(--ck-todo-list-checkmark-size) / 5.3);
    height: calc(var(--ck-todo-list-checkmark-size) / 2.6);
    border-style: solid;
    border-color: transparent;
    border-width: 0 calc(var(--ck-todo-list-checkmark-size) / 8) calc(var(--ck-todo-list-checkmark-size) / 8) 0;
    transform: rotate(45deg);
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label>input[checked]::before {
    background: hsl(126, 64%, 41%);
    border-color: hsl(126, 64%, 41%);
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label>input[checked]::after {
    border-color: hsl(0, 0%, 100%);
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
    vertical-align: middle;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
    position: absolute;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label>input,
.ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input {
    cursor: pointer;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label>input:hover::before,
.ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input:hover::before {
    box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1);
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    width: var(--ck-todo-list-checkmark-size);
    height: var(--ck-todo-list-checkmark-size);
    vertical-align: middle;
    border: 0;
    left: -25px;
    margin-right: -15px;
    right: 0;
    margin-left: 0;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label>span[contenteditable=false]>input {
    left: 0;
    margin-right: 0;
    right: -25px;
    margin-left: -15px;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input::before {
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid hsl(0, 0%, 20%);
    border-radius: 2px;
    transition: 250ms ease-in-out box-shadow;
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input::after {
    display: block;
    position: absolute;
    box-sizing: content-box;
    pointer-events: none;
    content: '';
    left: calc(var(--ck-todo-list-checkmark-size) / 3);
    top: calc(var(--ck-todo-list-checkmark-size) / 5.3);
    width: calc(var(--ck-todo-list-checkmark-size) / 5.3);
    height: calc(var(--ck-todo-list-checkmark-size) / 2.6);
    border-style: solid;
    border-color: transparent;
    border-width: 0 calc(var(--ck-todo-list-checkmark-size) / 8) calc(var(--ck-todo-list-checkmark-size) / 8) 0;
    transform: rotate(45deg);
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input[checked]::before {
    background: hsl(126, 64%, 41%);
    border-color: hsl(126, 64%, 41%);
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input[checked]::after {
    border-color: hsl(0, 0%, 100%);
}

/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
    position: absolute;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol {
    list-style-type: decimal;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol ol {
    list-style-type: lower-latin;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol ol ol {
    list-style-type: lower-roman;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol ol ol ol {
    list-style-type: upper-latin;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol ol ol ol ol {
    list-style-type: upper-roman;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul {
    list-style-type: disc;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul ul {
    list-style-type: circle;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul ul ul {
    list-style-type: square;
}

/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul ul ul ul {
    list-style-type: square;
}

/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content img.image_resized {
    height: auto;
}

/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
    width: 100%;
}

/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized>figcaption {
    display: block;
}

/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.5em auto;
    min-width: 50px;
}

/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 100%;
    height: auto;
}

/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image-inline {
    /*
     * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
     * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
     * This strange behavior does not happen with inline-flex.
     */
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}

/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image-inline picture {
    display: flex;
}

/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image-inline picture,
.ck-content .image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}

/* @ckeditor/ckeditor5-image/theme/imagecaption.css */
.ck-content .image>figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: var(--ck-color-image-caption-text);
    background-color: var(--ck-color-image-caption-background);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}

/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
    background-color: var(--ck-highlight-marker-yellow);
}

/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
    background-color: var(--ck-highlight-marker-green);
}

/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
    background-color: var(--ck-highlight-marker-pink);
}

/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
    background-color: var(--ck-highlight-marker-blue);
}

/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
    color: var(--ck-highlight-pen-red);
    background-color: transparent;
}

/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
    color: var(--ck-highlight-pen-green);
    background-color: transparent;
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right {
    max-width: calc(100% - var(--ck-image-style-spacing));
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right {
    clear: none;
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%;
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-right {
    margin-right: 0;
    margin-left: auto;
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content p+.image-style-align-left,
.ck-content p+.image-style-align-right,
.ck-content p+.image-style-side {
    margin-top: 0;
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
    margin-top: var(--ck-inline-image-style-spacing);
    margin-bottom: var(--ck-inline-image-style-spacing);
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left {
    margin-right: var(--ck-inline-image-style-spacing);
}

/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-right {
    margin-left: var(--ck-inline-image-style-spacing);
}

/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: solid 5px hsl(0, 0%, 80%);
}

/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
    border-left: 0;
    border-right: solid 5px hsl(0, 0%, 80%);
}

/* @ckeditor/ckeditor5-basic-styles/theme/code.css */
.ck-content code {
    background-color: hsla(0, 0%, 78%, 0.3);
    padding: .15em;
    border-radius: 2px;
}

/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
    font-size: .7em;
}

/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
    font-size: .85em;
}

/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
    font-size: 1.4em;
}

/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
    font-size: 1.8em;
}

/* @ckeditor/ckeditor5-mention/theme/mention.css */
.ck-content .mention {
    background: var(--ck-color-mention-background);
    color: var(--ck-color-mention-text);
}

/* @ckeditor/ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
    margin: 15px 0;
    height: 4px;
    background: hsl(0, 0%, 87%);
    border: 0;
}

/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
    padding: 1em;
    color: hsl(0, 0%, 20.8%);
    background: hsla(0, 0%, 78%, 0.3);
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 2px;
    text-align: left;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px;
}

/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
    background: unset;
    padding: 0;
    border-radius: 0;
}

@media print {

    /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
    .ck-content .page-break {
        padding: 0;
    }

    /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
    .ck-content .page-break::after {
        display: none;
    }
}


/* swiper */
/* Confine Leaflet's map controls into their own stacking context so
   they don't float over the navbar (z-index:1000) or the global
   3DGS training banner (z-index:999). Leaflet's own controls run at
   z-index:1000 inside the map; without a parent stacking context
   they bleed up to the page-root z-axis and clobber sticky/fixed
   chrome on scroll. position:relative + z-index:0 is the canonical
   "create new stacking context" recipe (matches what Leaflet sets
   internally — we just lock z-index in place so it can't be
   overridden by some downstream rule). */
.leaflet-container {
    position: relative;
    z-index: 0;
    isolation: isolate;
}