@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --dark: #060609;
    --surface: #111111;
    --surface-2: #16161a;
    --border: #24242a;
    --border-soft: #191919;
    --text: #eeeeee;
    --muted: #b8b8c0;
    --muted-2: #7f7f8a;
    --accent: #2c79f8;
    --accent-dark: #1337b5;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 18px;
    --sidebar: 280px;

    --cms-white: #FFFFFF;
    --cms-black: #000000;
    --cms-main: #060609;
    --cms-light: #F2F3FB;
    --cms-medium: #717171;
    --cms-dark: #111111;
    --cms-blue-1: #1337B5;
    --cms-blue-2: #205AD7;
    --cms-blue-3: #2C79F8;
    --cms-grey: #D5D5D5;
    --cms-green: #0E907E;
    --cms-red: #F52E2E;
    --cms-red-opaque: #F52E2E1A;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(44,121,248,.13), transparent 34rem),
        radial-gradient(circle at 90% 12%, rgba(19,55,181,.18), transparent 28rem),
        var(--dark);
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    color: var(--muted);
    line-height: 1.8;
    margin: 0 0 1.25rem;
}

h1, h2, h3, h4 {
    margin: 0;
    letter-spacing: -.03em;
}

h1 {
    font-size: clamp(2.4rem, 6vw, 5.4rem);
    line-height: .96;
    max-width: 900px;
}

h2 {
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.15rem;
    margin-bottom: .65rem;
}

ul {
    color: var(--muted);
    line-height: 1.85;
    padding-left: 1.2rem;
}

.sidebar {
    position: fixed;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
    z-index: 50;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    height: 100vh;
    background: rgba(17,17,17,.82);
    border-right: 1px solid var(--border-soft);
    backdrop-filter: blur(18px);
}

.sidebar nav {
    overflow: auto;
}

.brand {
    display: flex;
    gap: .85rem;
    align-items: center;
    padding: 1.4rem;
    border-bottom: 1px solid var(--border-soft);
}

.brand-img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
}

.brand-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: white;
    background: linear-gradient(138deg, var(--accent), var(--accent-dark));
    box-shadow: 0 16px 32px rgba(44,121,248,.22);
}

.brand strong { display: block; }
.brand span {
    color: var(--muted);
    font-size: .78rem;
}

.nav-group {
    margin-bottom: .7rem;
}

.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .72rem .85rem;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text);
    text-transform: uppercase;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
}

.nav-group-toggle:hover {
    background: rgba(255,255,255,.045);
    border-color: var(--border-soft);
}

.nav-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    aspect-ratio: 1;
    color: var(--muted-2);
    font-size: .95rem;
    transition: transform .3s ease;
}

.nav-group-items {
    display: grid;
    gap: .1rem;
    margin-top: .15rem;
    padding-left: .45rem;
    border-left: 1px solid var(--border-soft);
}

.nav-group:not(.open) .nav-group-items {
    display: none;
}

.nav-group:not(.open) .nav-chevron {
    transform: rotate(-90deg);
}

.nav-link {
    display: block;
    padding: .68rem .85rem;
    margin-bottom: .25rem;
    border-radius: 12px;
    color: var(--muted);
    font-size: .9rem;
    transition: .2s ease;
}

.nav-link:hover {
    color: var(--text);
    background: rgba(255,255,255,.045);
}

.nav-link.active {
    color: white;
    background: linear-gradient(138deg, var(--accent), var(--accent-dark));
    box-shadow: 0 12px 30px rgba(44,121,248,.22);
}

.sidebar-footer {
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--border-soft);
    color: var(--muted);
}

.sidebar-footer span { display: block; font-size: .82rem; }
.sidebar-footer small { color: var(--muted-2); }

.layout {
    margin-left: var(--sidebar);
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    border-bottom: 1px solid var(--border-soft);
    background: rgba(6,6,9,.76);
    backdrop-filter: blur(18px);
}

.search-wrap {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: 1;
    max-width: 620px;
}

.search-wrap input {
    width: 100%;
    border: 1px solid var(--border);
    background: rgba(17,17,17,.88);
    color: var(--text);
    padding: .9rem 1rem;
    border-radius: 14px;
    outline: none;
    font: inherit;
}

.search-wrap input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(44,121,248,.12);
}

#searchCount {
    white-space: nowrap;
    color: var(--muted-2);
    font-size: .85rem;
}

.top-link {
    color: var(--muted);
    font-size: .9rem;
}

.top-link:hover { color: var(--accent); }

.doc {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem) 0;
}

.hero {
    padding: 4rem 0 2.5rem;
}

.eyebrow {
    display: inline-flex;
    color: var(--accent);
    background: rgba(44,121,248,.1);
    border: 1px solid rgba(44,121,248,.22);
    padding: .45rem .7rem;
    border-radius: 999px;
    font-size: .85rem;
    margin-bottom: 1.4rem;
}

.lead {
    font-size: clamp(1.08rem, 2vw, 1.35rem);
    max-width: 820px;
    margin-top: 1.4rem;
}

.hero-grid,
.two-col,
.steps,
.feature-list {
    display: grid;
    gap: 1rem;
}

.hero-grid {
    grid-template-columns: repeat(3, 1fr);
    margin: 2rem 0;
}

.stat-card,
.card,
.step {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.stat-card span {
    display: block;
    color: var(--muted-2);
    font-size: .82rem;
    margin-bottom: .45rem;
}

.stat-card strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.35;
}

.doc-section {
    padding: 4rem 0;
    border-top: 1px solid var(--border-soft);
}

.feature-list {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.5rem;
}

.feature-list div {
    padding: 1.1rem;
    border-radius: 16px;
    background: rgba(17,17,17,.68);
    border: 1px solid var(--border-soft);
}

.feature-list strong {
    display: block;
    margin-bottom: .45rem;
}

.feature-list span {
    color: var(--muted);
    line-height: 1.65;
    font-size: .92rem;
}

.feature-list + h3 {
    margin-top: 1.25rem;
}

.two-col {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.25rem;
}

.callout {
    margin: 1.5rem 0;
    border-radius: var(--radius);
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--border);
    background: rgba(17,17,17,.72);
    position: relative;
    overflow: hidden;
}

.callout::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent);
}

.callout strong { display: block; margin-bottom: .4rem; }
.callout p { margin: 0; }
.callout.tip::before { background: var(--success); }
.callout.warning::before { background: var(--warning); }
.callout.danger::before { background: var(--danger); }

.screenshot {
    margin: 1.7rem 0;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #0b0b0d;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.browser-bar {
    height: 44px;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255,255,255,.03);
}

.browser-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #34343a;
}

.browser-bar p {
    margin: 0 0 0 .7rem;
    font-size: .82rem;
    color: var(--muted-2);
}

.mock-table,
.mock-editor {
    padding: 1rem;
}

.mock-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mock-search,
.mock-title,
.mock-content,
.tool-group {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    color: var(--muted);
}

.mock-search { padding: .8rem 1rem; flex: 1; }

button,
.mock-toolbar button,
.mock-editor aside button {
    border: 0;
    color: white;
    border-radius: 13px;
    padding: .8rem 1rem;
    background: linear-gradient(138deg, var(--accent), var(--accent-dark));
    font-weight: 700;
}

.mock-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr .8fr 1fr;
    gap: 1rem;
    padding: .95rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--muted);
    font-size: .9rem;
}

.mock-row.head {
    color: var(--text);
    background: rgba(255,255,255,.035);
    border-radius: 12px;
    border-bottom: 0;
    margin-bottom: .3rem;
}

.pill {
    width: max-content;
    border-radius: 999px;
    padding: .22rem .55rem;
    font-size: .78rem;
}
.pill.on { color: #b7f7d7; background: rgba(16,185,129,.16); }
.pill.off { color: #ffd891; background: rgba(245,158,11,.16); }

.mock-editor {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 1rem;
}

.mock-editor label {
    display: block;
    color: var(--muted-2);
    font-size: .8rem;
    margin: .5rem 0;
}

.mock-title { padding: 1rem; font-weight: 800; color: var(--text); }
.mock-content { min-height: 230px; padding: 1.2rem; margin-top: .5rem; }
.mock-content h4 { margin-bottom: .7rem; }

.mock-editor aside {
    border-left: 1px solid var(--border-soft);
    padding-left: 1rem;
}

.tool-group {
    padding: .85rem;
    margin-top: .8rem;
    font-size: .9rem;
}

.steps {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1.4rem;
}

.steps + h3 {
    margin-top: 1.25rem;
}

.step span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: white;
    background: linear-gradient(138deg, var(--accent), var(--accent-dark));
    margin-bottom: 1rem;
    font-weight: 800;
    font-size: .82rem;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.doc-table th,
.doc-table td {
    text-align: left;
    padding: 1rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--muted);
    vertical-align: top;
}

.doc-table th {
    color: var(--text);
    background: rgba(255,255,255,.04);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.25rem;
}

.tag-cloud span {
    padding: .55rem .8rem;
    border-radius: 999px;
    background: rgba(44,121,248,.1);
    color: #9fc3ff;
    border: 1px solid rgba(44,121,248,.22);
}

.checklist {
    display: grid;
    gap: .8rem;
    margin-top: 1.4rem;
}

.checklist label {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--muted);
    background: rgba(17,17,17,.68);
    border: 1px solid var(--border-soft);
    padding: 1rem;
    border-radius: 15px;
}

.checklist input { accent-color: var(--accent); }

.footer {
    margin-top: 4rem;
    padding: 2rem 0;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    color: var(--muted);
}

.footer p {
    margin: .35rem 0 0;
    font-size: 0.9em;
}

.footer span {
    margin-top: auto;
    color: var(--muted-2);
    line-height: 1.4em;
    font-size: .9rem;
    text-align: end;
}

.search-hidden {
    display: none !important;
}

mark {
    background: rgba(44,121,248,.3);
    color: white;
    padding: .05rem .16rem;
    border-radius: 5px;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 120;
    width: 48px;
    height: 48px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    color: white;
    background: linear-gradient(138deg, var(--accent), var(--accent-dark));
    box-shadow: 0 16px 40px rgba(44,121,248,.26);
    font-size: 1.35rem;
    line-height: 1;
}

.mobile-menu.open {
    left: calc(280px + 1rem);
    background: rgba(17,17,17,.96);
    border-color: var(--border);
}

@media (max-width: 980px) {
    :root { --sidebar: 0px; }

    .sidebar {
        transform: translateX(-100%);
        transition: .25s ease;
        width: 280px;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 24px 0 80px rgba(0,0,0,.45);
    }

    .mobile-menu { display: flex; }

    .layout { margin-left: 0; }

    .topbar {
        padding-left: 4.5rem;
    }

    .hero-grid,
    .feature-list,
    .two-col,
    .steps,
    .mock-editor {
        grid-template-columns: 1fr;
    }

    .mock-editor aside {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--border-soft);
        padding-top: 1rem;
    }

    .mock-row {
        grid-template-columns: 1fr;
    }

    .footer {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .doc { padding: 1.4rem; }
    .topbar { height: auto; padding-top: .9rem; padding-bottom: .9rem; align-items: flex-start; flex-direction: column; }
    .search-wrap { width: 100%; }
    .mobile-menu.open {
        left: auto;
        right: 1rem;
    }
}

.article-diagram {
    margin: 2rem 0;
}

.diagram-card.article-preview {
    position: relative;
    overflow: visible;
    padding: 2rem;
    border: 1px solid rgba(44, 121, 248, .18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 70% 20%, rgba(44, 121, 248, .14), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.article-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.85rem;
}

.article-title h3 {
    margin: 0;
    max-width: 720px;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.15;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 1.25rem;
    color: var(--muted-2);
    font-size: .85rem;
}

.diagram-image-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 1.75rem 0;
}

.diagram-image {
    display: block;
    width: 132px;
    height: 132px;
    border: 2px solid rgba(44, 121, 248, .26);
    border-radius: 20px;
    overflow: hidden;
}

.diagram-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diagram-tags-wrapper {
    display: flex;
    align-items: center;
    gap: 0.85em;
    margin-top: 1.25rem;
}

.diagram-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.diagram-tags span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .7rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.035);
    font-size: .82rem;
}

.article-diagram a {
    color: var(--text);
    text-decoration: underline;
    font-weight: 500;
}

.diagram-number {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(138deg, #2C79F8 0%, #1337B5 100%);
    font-size: .78rem;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(44,121,248,.25);
}

.diagram-number.inline {
    width: 22px;
    height: 22px;
    margin-right: .25rem;
    border-radius: 7px;
    font-size: .7rem;
    vertical-align: middle;
}

.diagram-number.n1 {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.diagram-image-wrap .diagram-number {
    position: absolute;
    top: -.8rem;
    right: calc(50% - 88px);
}

.feature-list.numbered div strong {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.feature-list.numbered div strong span {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(138deg, #2C79F8 0%, #1337B5 100%);
    font-size: .78rem;
}

.diagram-label {
    position: absolute;
    z-index: 2;
    padding: .65rem .9rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    color: var(--text);
    background: rgba(6,6,9,.86);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    font-weight: 800;
    font-size: .86rem;
    white-space: nowrap;
}

.diagram-label::after {
    content: "";
    position: absolute;
    background: var(--accent);
    opacity: .8;
}

.label-search {
    top: -3.25rem;
    right: 250px;
}

.label-search::after {
    width: 2px;
    height: 3.25rem;
    left: 50%;
    top: 100%;
}

.label-create {
    top: -3.25rem;
    right: 18px;
}

.label-create::after {
    width: 2px;
    height: 3.25rem;
    left: 50%;
    top: 100%;
}

.label-posts {
    left: -1.5rem;
    top: 46%;
    transform: translateX(-100%);
}

.label-posts::after {
    width: 1.5rem;
    height: 2px;
    left: 100%;
    top: 50%;
}

.label-toggle {
    right: 210px;
    top: 50%;
}

.label-toggle::after {
    width: 90px;
    height: 2px;
    left: 100%;
    top: 50%;
}

.label-actions {
    right: 30px;
    bottom: -3.25rem;
}

.label-actions::after {
    width: 2px;
    height: 3.25rem;
    left: 50%;
    bottom: 100%;
}

.label-pagination {
    left: 50%;
    bottom: -3.25rem;
    transform: translateX(-50%);
}

.label-pagination::after {
    width: 2px;
    height: 3.25rem;
    left: 50%;
    bottom: 100%;
}

.editor-diagram {
    margin: 2rem 0 2.5rem;
    overflow-x: auto;
    padding: 4rem 2rem 5rem;
}

.editor-window {
    position: relative;
    min-width: 980px;
    border: 1px solid rgba(44,121,248,.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 80% 10%, rgba(44,121,248,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    padding: 1rem;
}

.editor-topbar {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
}

.editor-back {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.04);
    font-size: 1.25rem;
}

.editor-page-title {
    font-size: 1.1rem;
    font-weight: 800;
}

.editor-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
}

.editor-main,
.editor-sidebar {
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    padding: 1rem;
}

.editor-field {
    margin-bottom: 1rem;
}

.editor-field label {
    display: block;
    margin-bottom: .55rem;
    color: var(--muted-2);
    font-size: .85rem;
    font-weight: 700;
}

.editor-input {
    height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(44,121,248,.2);
    background: rgba(255,255,255,.045);
}

.editor-content {
    min-height: 460px;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(44,121,248,.2);
    background: rgba(255,255,255,.045);
    color: var(--muted-2);
    font-style: italic;
}

.editor-sidebar {
    overflow: hidden;
}

.editor-tool-group {
    margin-bottom: 1.4rem;
}

.editor-tool-group span {
    display: block;
    margin-bottom: .6rem;
    color: var(--muted-2);
    font-size: .82rem;
    font-weight: 700;
}

.editor-tool-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.editor-tool-row button,
.editor-link-box button {
    height: 42px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: var(--text);
    font-weight: 700;
}

.editor-link-box {
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: .5rem;
}

.editor-mini-input {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.05);
    color: var(--muted-2);
    margin-bottom: .5rem;
}

.label-save {
    top: -3rem;
    right: 30px;
}

.label-save::after {
    width: 2px;
    height: 3rem;
    left: 50%;
    top: 100%;
}

.label-title {
    top: -3rem;
    left: 440px;
}

.label-title::after {
    width: 2px;
    height: 3rem;
    left: 50%;
    top: 100%;
}

.label-content {
    bottom: -3rem;
    left: 360px;
}

.label-content::after {
    width: 2px;
    height: 3rem;
    left: 50%;
    bottom: 100%;
}

.label-sidebar-tools {
    bottom: -3rem;
    right: 80px;
}

.label-sidebar-tools::after {
    width: 2px;
    height: 3rem;
    left: 50%;
    bottom: 100%;
}

.toolbar-example {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

.toolbar-demo {
    width: min(100%, 620px);
    padding: 1.8rem;
    border-radius: 24px;
    background: var(--cms-white);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.toolbar-title {
    display: block;
    margin-bottom: 1rem;
    color: var(--cms-medium);
    font-size: 1.5rem;
    font-weight: 800;
}

.toolbar-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    padding: .8rem;
    border-radius: 20px;
    background: var(--cms-light);
}

.toolbar-buttons button {
    height: 74px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--cms-main);
    font-size: 2rem;
    transition: .2s ease;
}

.toolbar-buttons button.active {
    color: var(--cms-blue-2);
    font-size: 2rem;
    font-weight: 700;
}

.toolbar-buttons sub {
    font-family: Arial, Helvetica, sans-serif;
}

.tool-section {
    margin-top: 4rem;
}

.toolbar-demo.small {
    width: min(100%, 680px);
}

.toolbar-buttons.four {
    grid-template-columns: repeat(4, 1fr);
}

.toolbar-buttons.four button {
    font-size: 2.2rem;
    font-family: Georgia, serif;
    font-weight: 700;
}

.indent-demo button {
    font-size: 1.7rem;
    font-weight: 700;
}

.indent-demo button.active {
    color: #4f7dff;
}

.indent-example {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.indent-content {
    display: block;
    padding: 1rem;
    width: 100%;
    max-width: 680px;
    background-color: var(--cms-white);
    border-radius: 15px;
}

.indent-editor {
    display: block;
    padding: 1.5rem;
    background: var(--cms-light);
    border-radius: 12px;
}

.indent-editor ul {
    color: var(--cms-main);
}

.style-demo {
    grid-template-columns: repeat(3, 1fr);
}

.style-demo button {
    font-size: 2rem;
}

.style-demo button.active {
    color: #4f7dff;
}
.subsection-title {
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-size: 1.35rem;
}

.toolbar-demo.medium {
    width: min(100%, 760px);
}

.link-steps {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.link-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.2rem;
    align-items: start;
}

.link-step-number {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: white;
    font-weight: 800;
    background: linear-gradient(138deg, var(--accent), var(--accent-dark));
    box-shadow: 0 16px 40px rgba(44,121,248,.22);
}

.link-step-content p {
    margin-bottom: 1rem;
}

.link-toolbar {
    display: grid;
    grid-template-columns: 1fr 88px;
    gap: 1rem;
    align-items: center;
}

.link-input {
    display: flex;
    align-items: center;
    padding: 0 1.4rem;
    min-height: 82px;
    border-radius: 24px;
    background: var(--cms-light);
    color: var(--cms-blue-2);
    font-size: 1.25rem;
}

.link-action-btn {
    width: 88px;
    height: 88px;
    border-radius: 26px;
    border: 0;
    color: white;
    font-size: 2rem;
    background: var(--cms-blue-2);
}

.selection-preview {
    margin: 0 auto;
    padding: 2rem;
    max-width: 760px;
    border-radius: 24px;
    background: var(--cms-light);
    color: var(--cms-main);
    font-size: 1.2em;
    line-height: 1.4;
}

.selection-preview span {
    padding: .05em .18em;
    background: rgba(79,125,255,.92);
    color: white;
}

.insert-link-demo {
    display: grid;
    grid-template-columns: 1fr 88px;
    gap: 1rem;
    align-items: center;
}

.insert-link-form {
    display: grid;
    grid-template-columns: 1fr 88px;
    gap: 1rem;
}

.insert-link-form > :first-child {
    grid-column: 1 / 3;
}

@media (max-width: 768px) {
    .link-step {
        grid-template-columns: 1fr;
    }

    .link-toolbar,
    .insert-link-demo {
        grid-template-columns: 1fr;
    }

    .link-action-btn {
        width: 100%;
    }
}

.media-workflow {
    margin: 2rem 0 3rem;
}

.media-card {
    position: relative;
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
    max-width: 680px;
    background: var(--cms-white);
    border-radius: 28px;
    color: var(--cms-medium);
}

.media-card p {
    color: var(--cms-medium);
    font-weight: 500;
}

.media-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.media-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    height: 80px;
    background: var(--cms-light);
    border: 2px solid var(--cms-blue-2);
    border-radius: 28px;
    color: var(--cms-blue-2);
    font-size: 1.6rem;
}

.media-methods button span {
    font-size: 1.6rem;
    font-weight: 800;
}

.media-url-row {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 1rem;
    margin-top: 1.5rem;
}

.media-url-input {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 1.5rem;
    border-radius: 28px;
    background: var(--cms-light);
    color: var(--muted-2);
    font-size: 1.6rem;
}

.media-url-btn {
    border-radius: 28px;
    font-size: 1.6rem;
    background: var(--cms-blue-2);
    color: var(--cms-white);
}

.gallery-preview {
    margin-top: 2rem;
}

.gallery-window {
    border: 1px solid rgba(44,121,248,.14);
    border-radius: 12px;
    overflow: hidden;
    background: var(--cms-white);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.gallery-header {
    padding: 1.25rem;
    text-align: center;
    font-weight: 800;
    border-bottom: 1px solid var(--cms-grey);
    color: var(--cms-main);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--cms-light);
    border: 1px solid var(--cms-grey);
    border-radius: 12px;
    overflow: hidden;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item-check {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 7px;
    right: 7px;
    width: 28px;
    aspect-ratio: 1;
    background-color: var(--cms-white);
    border-radius: 14px;
    color: var(--cms-blue-2);
    font-size: 17px;
}

.gallery-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem;
    padding: 10px 15px;
    border-top: 1px solid var(--cms-grey);
}

.gallery-actions button {
    display: block;
    width: 150px;
    height: 50px;
    background: var(--cms-blue-2);
    outline: none;
    border: none;
    color: var(--cms-white);
    font-size: 1em;
}

.gallery-actions .secondary {
    background: var(--cms-light);
    border: 2px solid var(--cms-blue-2);
    color: var(--cms-blue-2);
}

.image-properties-demo {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

.properties-modal {
    width: min(100%, 680px);
    background-color: var(--cms-white);
    border: 1px solid var(--cms-grey);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.properties-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--cms-grey);
    color: var(--cms-main);
    font-size: 1.3rem;
    font-weight: 800;
}

.properties-body {
    padding: 2rem;
}

.properties-body label {
    display: block;
    margin-bottom: .7rem;
    color: var(--cms-medium);
    font-weight: 700;
}

.properties-input {
    min-height: 82px;
    display: flex;
    align-items: center;
    padding: 0 1.4rem;
    margin-bottom: 1.5rem;
    border-radius: 22px;
    background: var(--cms-light);
    border: none;
    color: var(--cms-blue-2);
    font-size: 1.2rem;
}

.properties-btn {
    display: block;
    margin: 2rem auto 0;
    min-width: 160px;
    height: 70px;
    background: var(--cms-blue-2);
    border-radius: 22px;
    font-size: 1.1rem;
}

@media (max-width: 980px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .media-methods,
    .media-url-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-actions {
        flex-direction: column;
    }

    .gallery-actions button,
    .properties-btn {
        width: 100%;
    }
}

.thumbnail-demo {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

.thumbnail-card {
    width: min(100%, 620px);
    padding: 2rem;
    border-radius: 28px;
    background: var(--cms-white);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.thumbnail-title {
    display: block;
    margin-bottom: 1rem;
    color: var(--cms-medium);
    font-size: 1.25rem;
    font-weight: 800;
}

.thumbnail-preview {
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    background: var(--cms-light);
    margin-bottom: 1.5rem;
}

.thumbnail-btn {
    min-width: 260px;
    height: 78px;
    border-radius: 20px;
    border: 2px solid var(--cms-blue-2);
    background: var(--cms-light);
    color: var(--cms-blue-2);
    font-size: 1.4rem;
    font-weight: 700;
}

.keywords-demo {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

.keywords-card {
    width: min(100%, 620px);
    padding: 2rem;
    border-radius: 28px;
    background: var(--cms-white);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.keywords-title {
    display: block;
    margin-bottom: 1rem;
    color: var(--cms-medium);
    font-size: 1.25rem;
    font-weight: 800;
}

.keywords-description {
    color: var(--cms-main);
}

.keywords-input {
    margin-bottom: 1.5rem;
    padding: 15px;
    height: 110px;
    background: var(--cms-light);
    border-radius: 28px;
    color: var(--cms-medium);
}

.language-demo {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

.language-card {
    width: min(100%, 720px);
    padding: 2rem;
    border: 1px solid rgba(44,121,248,.16);
    border-radius: 28px;
    background: var(--cms-white);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.language-title {
    display: block;
    margin-bottom: 1rem;
    color: var(--cms-medium);
    font-size: 1.4rem;
    font-weight: 800;
}

.language-select {
    min-height: 120px;
    padding: 0 2rem;
    border-radius: 28px;
    background: var(--cms-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--cms-blue-2);
    font-size: clamp(1.6rem, 2vw, 2.2rem);
    font-weight: 500;
}

.media-manager-diagram {
    margin: 2rem 0 2.5rem;
    overflow-x: auto;
    padding: 4.5rem 2rem 5rem;
}

.media-manager-window {
    position: relative;
    min-width: 980px;
    border: 1px solid rgba(44,121,248,.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 80% 10%, rgba(44,121,248,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    padding: 1rem;
}

.media-manager-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
}

.media-manager-title {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 800;
}

.media-manager-body {
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: rgba(6,6,9,.45);
}

.media-manager-filters {
    display: grid;
    grid-template-columns: 90px repeat(3, 120px) 1fr;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.4rem;
    padding: .65rem;
    border: 1px solid rgba(44,121,248,.2);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: var(--muted);
}

.media-manager-filters button {
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.media-manager-filters button.active {
    color: white;
    background: rgba(44,121,248,.16);
    border-bottom: 2px solid var(--accent);
}

.media-manager-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.media-resource {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(135deg, rgba(44,121,248,.22), rgba(255,255,255,.04));
}

.media-resource::after {
    content: "▧";
    position: absolute;
    left: .55rem;
    bottom: .55rem;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(6,6,9,.72);
    color: white;
    font-size: .85rem;
}

.media-resource.video::after {
    content: "▣";
}

.manager-label-add {
    top: -3.25rem;
    right: 22px;
}

.manager-label-add::after {
    width: 2px;
    height: 3.25rem;
    left: 50%;
    top: 100%;
}

.manager-label-filter {
    top: 112px;
    left: 410px;
}

.manager-label-filter::after {
    width: 120px;
    height: 2px;
    right: 100%;
    top: 50%;
}

.manager-label-grid {
    left: 50%;
    bottom: -3.25rem;
    transform: translateX(-50%);
}

.manager-label-grid::after {
    width: 2px;
    height: 3.25rem;
    left: 50%;
    bottom: 100%;
}

@media (max-width: 980px) {
    .media-manager-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.upload-section-demo {
    margin: 2rem 0;
    padding: 20px;
    background-color: var(--cms-light);
    border-radius: 10px;
}

.upload-section-container {
    display: flex;
    padding: 15px;
    width: 100%;
    height: 200px;
    background-color: var(--cms-white);
    border: 1px solid #D5D5D5;
    border-radius: 20px;
}

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--cms-medium);
    border-radius: 12px;
    color: var(--cms-main);
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.upload-dropzone.active {
    background-color: #F4F4F5;
    border: 2px dashed var(--cms-blue-2);
    color: var(--cms-blue-2);
}

.upload-dropzone strong {
    max-width: 170px;
    color: inherit;
    text-align: center;
    font-size: 1.05em;
    line-height: 1.4em;
}

.upload-dropzone button {
    display: block;
    margin: 15px 0 10px 0;
    width: 260px;
    height: 40px;
    background: var(--cms-main);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-white);
    font-size: 15px;
    font-weight: 700;
    transition: opacity 0.2s;
    cursor: pointer;
}

.upload-dropzone.active span,
.upload-dropzone.active button {
    opacity: 0.6;
}

.upload-dropzone span {
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--cms-main);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    transition: opacity 0.2s;
    cursor: pointer;
}

.upload-dropzone.drag-active {
    border-color: rgba(79,125,255,.8);
    background:
        radial-gradient(circle at 20% 0%, rgba(44,121,248,.16), transparent 24rem),
        rgba(255,255,255,.045);
}

.upload-dropzone.drag-active strong {
    color: #6d83ff;
}

.upload-dropzone.drag-active button {
    background: rgba(255,255,255,.18);
    color: white;
}

.drag-file {
    position: absolute;
    right: 26%;
    top: 34%;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 10px;
    color: white;
    font-weight: 800;
    background: rgba(255,255,255,.04);
}

.drag-file::after {
    content: "+ Copiar";
    position: absolute;
    left: 72%;
    top: 72%;
    padding: .2rem .45rem;
    border-radius: 6px;
    color: #6d83ff;
    background: rgba(255,255,255,.08);
    font-size: .75rem;
    white-space: nowrap;
}

.upload-list-demo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 10px 20px 30px;
    width: 100%;
    background-color: var(--cms-white);
    border: 1px solid #D5D5D5;
    border-radius: 20px;
}

.upload-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--cms-main);
}

.upload-list-header button {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 15px;
    padding: 10px;
    background: var(--cms-blue-light);
    outline: none;
    border: none;
    border-radius: 10px;
    color: var(--cms-blue-2);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.upload-file-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.upload-file-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 15px;
    padding: 5px 10px;
    width: 100%;
    height: 65px;
    background-color: var(--cms-light);
    border-radius: 10px;
}

.upload-file-card i {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--cms-main);
    font-size: 25px;
}

.upload-file-card p {
    margin: 0;
    width: 100%;
    color: var(--cms-main);
    text-overflow: ellipsis;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
}

.upload-file-card span {
    color: var(--cms-blue-1);
    font-size: 12px;
}

.upload-file-card span.success {
    color: var(--cms-green);
}

.upload-file-card span.failure {
    color: var(--cms-red);
}

@media (max-width: 900px) {
    .upload-file-grid {
        grid-template-columns: 1fr;
    }

    .upload-dropzone button {
        min-width: 0;
        width: 100%;
    }

    .drag-file {
        position: static;
    }
}

.media-elements-demo {
    margin: 3rem 0;
}

.media-elements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 0 auto;
    max-width: 680px;
}

.media-element-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
}

.media-element-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-element-card.video-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.04) 0 28%, transparent 28%),
        radial-gradient(circle at 50% 55%, rgba(255,255,255,.18), transparent 35%),
        linear-gradient(135deg, rgba(44,121,248,.12), rgba(255,255,255,.035));
}

.media-element-card.image-card {
    background:
        radial-gradient(circle at 52% 45%, rgba(44,121,248,.26), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.media-element-type {
    position: absolute;
    display: flex;
    bottom: 15px;
    left: 15px;
    z-index: 50;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    color: var(--cms-white);
    font-size: 22px;
}

.media-element-type.highlighted {
    border: 6px solid #ff7a2f;
}

.resource-hover-demo {
    margin: 2.5rem 0;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    padding: 2rem 10rem 3rem;
}

.resource-hover-card {
    position: relative;
    display: block;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    background: var(--cms-light);
    border: 1px solid var(--cms-grey);
    border-radius: 20px;
    overflow: hidden;
}

.resource-hover-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.resource-hover-actions {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    background-color: #06060972;
}

.resource-hover-actions div {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    padding: 10px;
}

.resource-hover-actions button {
    display: block;
    padding: 0;
    width: 45px;
    height: 45px;
    background: #060609B0;
    outline: none;
    border: none;
    border-radius: 3px;
    color: var(--cms-white);
    font-size: 22px;
    cursor: pointer;
}

.resource-hover-actions span {
    display: block;
    padding: 14px 10px 18px 80px;
    width: 100%;
    color: var(--color-white);
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}

.resource-hover-type {
    position: absolute;
    display: flex;
    bottom: 15px;
    left: 15px;
    z-index: 50;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    color: var(--cms-white);
    font-size: 22px;
}

.resource-hover-name {
    position: absolute;
    left: 7rem;
    right: 1.5rem;
    bottom: 3rem;
    z-index: 3;
    color: white;
    font-size: 1.6rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hover-label-edit {
    top: -3rem;
    left: 48%;
    transform: translateX(-50%);
}

.hover-label-edit::after {
    width: 2px;
    height: 3rem;
    left: 50%;
    top: 100%;
}

.hover-label-delete {
    top: 5rem;
    right: -8.5rem;
}

.hover-label-delete::after {
    width: 8.5rem;
    height: 2px;
    right: 100%;
    top: 50%;
}

.hover-label-name {
    bottom: -3rem;
    right: -13rem;
}

.hover-label-name::after {
    width: 13rem;
    height: 2px;
    right: 100%;
    top: 50%;
}

.resource-modal-demo {
    margin: 2rem 0;
    overflow-x: auto;
}

.resource-modal-window {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 900px;
    background-color: var(--cms-white);
    border-radius: 12px;
    overflow: hidden;
}

.resource-modal-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--cms-grey);
    color: var(--cms-main);
    font-size: 1.25em;
    font-weight: 800;
}

.resource-modal-body {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 2rem;
    padding: 2rem 2rem 6rem 2rem;
}

.resource-modal-preview {
    display: block;
    width: 100%;
}

.resource-modal-preview img {
    display: block;
    width: 100%;
    object-fit: contain;
}

.resource-modal-fields label {
    display: block;
    margin-bottom: .65rem;
    color: var(--muted);
    font-weight: 700;
}

.resource-modal-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding: 0 1.25rem;
    min-height: 60px;
    background: var(--cms-light);
    border-radius: 20px;
    border: none;
    color: var(--cms-blue-2);
    font-size: 1.1rem;
}

.resouce-input-name {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.8rem;
}

.resouce-input-name small {
    color: var(--cms-main);
    font-size: 1.2rem;
    margin-bottom: 1.4rem;
}

.resource-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0 2rem 2rem;
}

.resource-modal-actions button {
    min-width: 150px;
    background: var(--cms-blue-2);
}

.resource-modal-actions button.secondary {
    background: var(--cms-light);
    border: 2px solid var(--cms-blue-2);
    color: var(--cms-blue-2);
}

.resource-modal-actions .secondary {
    color: var(--text);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(44,121,248,.28);
}


/* -------------------------CMS Imported Styles------------------------- */

.cms-section-diagram {
    margin: 2rem 0 5rem;
    padding: 3.5rem 1.5rem 2.5rem;
    overflow-x: auto;
}

.cms-area {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: 75px 1fr;
    gap: 20px;
    padding: 20px;
    min-width: 930px;
    background-color: var(--cms-light);
    border-radius: 10px;
    color: var(--cms-dark);
}

.cms-area.one-column {
    display: flex;
    flex-direction: column;
}

.cms-area.one-column .section {
    grid-column: 1 / 2;
}

.cms-area * {
    position: relative;
}

.cms-area .header,
.cms-area .section {
    width: 100%;
    height: 100%;
    background-color: var(--cms-white);
    border: 1px solid #D5D5D5;
    border-radius: 20px;
}

.cms-area .section {
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 15px 10px 15px 0;
    overflow: hidden;
}

.cms-area .section.full-width {
    grid-column: 1 / 3;
}

.cms-area .scroll-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

/* Header */
.cms-area .header {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    height: 75px;
}

.cms-area.one-column .header {
    grid-column: 1 / 2;
}

.cms-area .header.inner-page {
    grid-template-columns: 60px 1fr;
}

.cms-area .header > *:not(:first-child) {
    border-left: 1px solid var(--cms-grey);
}

.cms-area .header__title {
    display: flex;
    align-items: center;
    padding: 0 10px 0 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cms-area .header__title span {
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    font-size: 1.5em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}

.cms-area .header__search-cont {
    display: flex;
    align-items: center;
    padding: 0 20px;
    width: 100%;
}

.cms-area .header__search-bar {
    display: grid;
    grid-template-columns: 1fr 45px;
    align-items: center;
    margin: auto 0;
    width: 250px;
    height: 50px;
    background-color: var(--cms-light);
    border-radius: 12px;
}

.cms-area .header__search-cont > button {
    padding: 0;
    width: 50px;
    min-width: 0;
    font-size: 17px;
}

.cms-area .header__search-bar input {
    display: block;
    padding: 0 20px;
    width: 100%;
    height: 45px;
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--cms-medium);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
}

.cms-area .header__search-bar button {
    display: block;
    margin: 0;
    width: 45px;
    height: 45px;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-medium);
    font-size: 18px;
    transition: color 0.25s;
    cursor: pointer;
}

.cms-area .header__search-bar button:hover {
    color: var(--cms-blue-2);
}

.cms-area .header__btn {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
}

.cms-area .header .back {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font-size: 1.6em;
    cursor: pointer;
}

/* Buttons */
.btn-filled,
.btn-border {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 0 20px;
    height: 50px;
    min-width: 100px;
    outline: none;
    border: none;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn-filled {
    background: var(--cms-blue-2);
    color: var(--cms-white);
}

.btn-border {
    background: var(--cms-light);
    border: 2px solid var(--cms-blue-2);
    color: var(--cms-blue-2);
}

.btn-empty {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin: auto;
    padding: 0 0.5rem;
    height: 35px;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-blue-2);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

/* Table */
.cms-area table {
    border-collapse: collapse;
    width: calc(100% - 60px);
    margin: 0 30px;
    text-align: center;
}

.cms-area table .mob {
    display: none;
}

.cms-area tr {
    height: 55px;
    border-bottom: 1px solid var(--cms-light);
}

.cms-area td, th {
    display: table-cell;
    vertical-align: inherit;
}

.cms-area th {
    color: var(--cms-main);
    font-weight: 700;
}

.cms-area th.align-left,
.cms-area td.align-left {
    text-align: left;
}

.cms-area td {
    color: var(--cms-dark);
    font-size: 13px;
    font-weight: 500;
}

.cms-area td.main {
    color: var(--cms-main);
}

.mod-wrapper {
    display: grid;
    grid-template-rows: 55px;
    grid-auto-columns: 50px;
    grid-auto-flow: column;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    width: max-content;
    height: 55px;
}

.mod {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    background: var(--cms-light);
    outline: none;
    border: none;
    border-radius: 5px;
    color: var(--cms-blue-2);
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
}

.mod.red {
    color: var(--cms-red);
}

.mod.green {
    color: var(--cms-green);
}

.mod i {
    font-size: 17px;
}

/* Pagination */
.cms-area .pagination {
    display: block;
    width: 100%;
    padding: 0.5rem;
}

.cms-area .pagination ul {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 35px;
}

.cms-area .pagination li {
    list-style-type: none;
}

.cms-area .pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    color: var(--color-medium);
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
}

.cms-area .pagination a.active {
    background-color: var(--cms-blue-2);
    color: var(--cms-white);
}

/* ------------Multisection Form----------- */

.cms-area .multisection-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.cms-area .multisection-form section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto;
    width: 100%;
    background-color: var(--cms-white);
    border: 1px solid var(--cms-grey);
    border-radius: 20px;
}

.cms-area .multisection-form > button {
    flex-shrink: 0;
    display: none;
    margin: 0 auto;
    width: 100%;
}

/* Header */
.cms-area .ms-form__header {
    display: grid;
    grid-template-columns: 90px 1fr 90px;
    align-items: center;
    padding: 0 35px;
    border-bottom: 1px solid var(--cms-grey);
}

.cms-area .ms-form__header h2 {
    grid-column: 2 / 3;
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}

.cms-area .ms-form__header a,
.cms-area .ms-form__header button {
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--cms-blue-2);
    text-decoration: none;
    font-family: "Satoshi", sans-serif;
    font-weight: 700;
    cursor: pointer;
}

.cms-area .ms-form__header a.second,
.cms-area .ms-form__header button.second {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

/* Input containers */
.cms-area .ms-form__inputs {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 25px;
    row-gap: 10px;
    margin: 0 auto;
    padding: 15px 15px 25px 30px;
    max-width: 1000px;
    width: 100%;
}

.cms-area .ms-form__dynamic-rows {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin: 0 auto;
    padding: 15px 15px 25px 30px;
    max-width: 1000px;
    width: 100%;
}

.cms-area .ms-form__media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(auto, 235px));
    gap: 25px;
    padding: 10px 30px 25px 30px;
}

.cms-area .ms-form__table {
    padding: 10px 5px 30px 5px;
}

.cms-area .ms-form__table input[type=file] {
    display: none;
}

/* Inputs */
.cms-area .multisection-form label:not(.vault__permission-check) {
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 50px;
    color: var(--cms-main);
    font-size: 15px;
    font-weight: 500;
}

.cms-area .multisection-form label:not(.vault__permission-check) span {
    font-size: 12px;
    color: var(--cms-medium);
}

.cms-area .multisection-form input,
.cms-area .multisection-form select,
.cms-area .multisection-form textarea {
    display: block;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    background-color: var(--cms-light);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-blue-1);
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.cms-area .multisection-form textarea {
    padding: 20px;
    height: 110px;
    resize: none;
}

.cms-area .multisection-form select:has(option:disabled:checked) {
    color: #1337B580;
}

.cms-area .multisection-form option:not(:disabled) {
    color: var(--cms-blue-1);
}

.cms-area span#warning {
    padding: 10px 0;
    max-width: 500px;
    color: var(--cms-medium);
    font-size: 14px;
    font-weight: 500;
}

/* User Permissions */
.cms-area .vault__permissions {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 30px 15px 30px;
}

.cms-area .vault__permission-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cms-area .vault__permission-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    width: max-content;
    height: 45px;
    background-color: var(--cms-red-opaque);
    border-radius: 7px;
    color: var(--cms-red);
    font-size: 1.06em;
    font-weight: 700;
    transition: background-color 0.25s, color 0.25s;
    cursor: pointer;
    user-select: none;
}

.cms-area .vault__permission-check:has(input:checked) {
    background-color: var(--cms-light);
    color: var(--cms-blue-2);
}

.cms-area .vault__permission-check input {
    position: absolute;
    z-index: -1;
}

.cms-area .vault__permission-check i {
    display: block;
    width: 14px;
    color: inherit;
    text-align: center;
    font-size: 1.1em;
}

.cms-area .vault__permission-check .fa-check {
    display: none;
}

.cms-area .vault__permission-check:has(input:checked) .fa-check {
    display: block;
}

.cms-area .vault__permission-check:has(input:checked) .fa-xmark {
    display: none;
}

.cms-area .vault__permission-check span {
    color: inherit;
}

/* Folder collapsibles */
.cms-area .vault__permissions-warning {
    display: none;
    padding: 20px 0 30px;
}

.cms-area .vault__permissions-warning h3 {
    margin-bottom: 12px;
    font-size: 15px;
}

.cms-area .vault__collapsible {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 55px min-content;
}

.cms-area .vault__collap-header,
.cms-area .vault__permissions-columns {
    display: grid;
    align-items: center;
    grid-template-columns: 30px 1fr 100px 250px;
    gap: 10px;
    height: 55px;
    border-bottom: 1px solid var(--cms-light);
}

.cms-area .vault__permissions-columns span {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}

.cms-area .vault__permissions-columns span:nth-child(2) {
    text-align: start;
}

.cms-area .vault__collap-header {
    font-size: 13px;
}

.cms-area .vault__collap-header p {
    margin: 0;
    color: var(--cms-main);
    font-weight: 500;
}

.cms-area .vault__collap-header p.center {
    text-align: center;
}

.cms-area .vault__collap-header button {
    display: block;
    padding: 0;
    width: 30px;
    aspect-ratio: 1;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-medium);
    font-size: 1.1em;
}

.cms-area .vault__collap-body {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    height: 0;
    overflow: hidden;
}

.cms-area span.vault__drive-size {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: var(--cms-blue-2);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4em;
}

.cms-area .vault__breadcrumb {
    margin: 0 0 10px 0;
    padding: 0 30px;
    width: 100%;
    color: var(--cms-blue-1);
    font-size: 14px;
    font-weight: 600;
}

/* Drag 'n Drop */
.cms-area .vault__drag-drop-cont {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: block;
    width: 100%;
    height: 250px;
    overflow: hidden;
    transition: height 0.3s;
}

.cms-area .vault__drag-drop-cont.collapsed {
    height: 0;
}

.cms-area .vault__drag-drop-cont.expanded {
    height: 320px;
}

.cms-area .vault__drag-drop-cont > div {
    display: block;
    padding-top: 20px;
    width: 100%;
    height: 100%;
}

.cms-area .vault__drag-drop {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    position: relative;
    display: flex;
    width: 100%;
    height: 230px;
    background-color: var(--cms-white);
    border: 1px solid #D5D5D5;
    border-radius: 20px;
    overflow: hidden;
}

.cms-area .vault__drag-drop input[type=file] {
    display: none;
}

.cms-area .vault__drop-cont {
    display: block;
    padding: 15px;
    width: 100%;
    height: 100%;
}

.cms-area .vault__drop-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--cms-medium);
    border-radius: 12px;
    color: var(--cms-main);
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.cms-area .vault__drop-area h3 {
    margin: 0;
    text-align: center;
    line-height: 1.4em;
    color: inherit;
}

.cms-area .vault__upload-limits {
    margin: 8px 0 0 0;
    max-width: 560px;
    color: var(--cms-medium);
    font-size: 13px;
    line-height: 1.35em;
    text-align: center;
}

.cms-area .vault__upload-progress {
    display: none;
    margin-top: 16px;
    width: min(420px, 80%);
    height: 8px;
    background-color: #E6ECF3;
    border-radius: 8px;
    overflow: hidden;
}

.cms-area .vault__upload-progress span {
    display: block;
    width: 58%;
    height: 100%;
    background-color: var(--cms-main);
    transition: width 0.2s;
}

.cms-area .vault__upload-progress-text {
    display: none;
    margin-top: 8px;
    color: var(--cms-main);
    font-size: 13px;
    font-weight: 700;
}

.cms-area .vault__drop-area #btn-files {
    display: block;
    margin: 15px 0 10px 0;
    width: 260px;
    height: 40px;
    background: var(--cms-main);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-white);
    font-size: 15px;
    font-weight: 700;
    transition: opacity 0.2s;
    cursor: pointer;
}

.cms-area .vault__drop-area #drop-cancel {
    padding: 0;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-main);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    transition: opacity 0.2s;
    cursor: pointer;
}

.cms-area .vault__drop-area.active {
    background-color: var(--cms-light);
    border: 2px dashed var(--cms-blue-2);
    color: var(--cms-blue-2);
}

.cms-area .vault__drop-area.active button {
    opacity: 0.6;
}

.cms-area .vault__drop-area.active * {
    pointer-events: none;
}

.cms-area .vault__drop-area.uploading #btn-files,
.cms-area .vault__drop-area.uploading #drop-cancel {
    display: none;
}

.cms-area .vault__drop-area.uploading .vault__upload-progress,
.cms-area .vault__drop-area.uploading .vault__upload-progress-text {
    display: block;
}

.cms-area .upload-summary {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    text-align: left;
}

.cms-area .upload-summary p {
    margin: 0;
    color: var(--cms-dark);
    font-size: 14px;
    line-height: 1.35em;
}

.cms-area .vaut__upload {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 10px 20px 30px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cms-area .vault__upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cms-area .vault__upload-header button {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 15px;
    padding: 10px;
    background-color: var(--cms-blue-light);
    outline: none;
    border: none;
    border-radius: 10px;
    color: var(--cms-contrast);
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
}

.cms-area .vault__upload-header button.appear {
    opacity: 1;
    pointer-events: all;
}

.cms-area .vault__upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 65px;
    gap: 15px;
    padding-right: 10px;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.cms-area .vault__upload-grid div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto min-content;
    flex-direction: column;
    justify-content: space-between;
    column-gap: 15px;
    padding: 10px;
    width: 100%;
    height: 100%;
    background-color: var(--cms-light);
    border: 1px solid var(--cms-medium);
    border-radius: 10px;
}

.cms-area .vault__upload-grid i {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--cms-main);
    font-size: 25px;
}

.cms-area .vault__upload-grid p {
    width: 100%;
    text-overflow: ellipsis;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
}

.cms-area .vault__upload-grid span {
    color: var(--cms-contrast);
    font-size: 12px;
}

.cms-area .vault__upload-grid span.success {
    color: var(--pass);
}

.cms-area .vault__upload-grid span.failure {
    color: var(--alert);
}

/* Versions */
.cms-area .vault__versions {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content 1px auto;
    margin: 0 auto;
    width: 100%;
    max-width: 700px;
    background-color: var(--cms-white);
    box-shadow: 0 0 8px #00000040;
    border-radius: 12px;
    overflow: hidden;
}

.cms-area .vault__versions hr {
    color: var(--cms-dark);
}

.cms-area .vault__versions-section {
    display: flex;
    flex-direction: column;
    padding: 15px 20px 30px 20px;
    overflow: hidden;
}

.cms-area .vault__versions-title {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.cms-area .vault__versions-title h3 {
    color: var(--cms-blue-2);
    font-size: 1.55em;
}

.cms-area .vault__versions-title button {
    display: block;
    width: 25px;
    height: 25px;
    background: transparent;
    outline: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

.cms-area .vault__versions-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 30px 0 25px 0;
    font-size: 1.1em;
}

.cms-area .vault__versions-info p {
    margin: 0;
    color: var(--cms-main);
}

.cms-area .vault__versions-input {
    display: grid;
    grid-template-columns: 1fr 120px;
    column-gap: 15px;
    row-gap: 7px;
}

.cms-area .vault__versions-input span:not(.cms-number) {
    grid-column: 1 / 3;
    padding-left: 10px;
    color: var(--cms-dark);
}

.cms-area .vault__versions-input input {
    display: none;
}

.cms-area .vault__versions-input label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    height: 40px;
    background-color: var(--cms-light);
    border-radius: 12px;
    font-size: 1.07em;
}

.cms-area .vault__versions-input label p {
    margin: 0;
    color: var(--cms-main);
}

.cms-area .vault__versions-input button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    height: 40px;
    background: var(--cms-blue-2);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-white);
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
}

.cms-area .vault__versions-input button:disabled {
    opacity: 0.6;
}

.cms-area .vault__versions-scroll {
    display: block;
    padding-right: 20px;
    width: 100%;
}

.cms-area .vault__versions-file {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 5px;
    padding: 8px 0;
    border-bottom: 1px solid #B2B2B2;
}

.cms-area .vault__versions-file h4 {
    font-size: 1em;
}

.cms-area .vault__versions-file span {
    color: var(--cms-medium);
    font-weight: 500;
}

.cms-area .vault__versions-btns {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cms-area .vault__versions-btns a,
.cms-area .vault__versions-btns button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
}

.cms-area .vault__versions-btns a {
    background-color: #205AD71A;
    border: 1.5px solid var(--cms-blue-2);
    color: var(--cms-blue-2);
}

.cms-area .vault__versions-btns button {
    background: #F52E2E1A;
    border: 1.5px solid var(--cms-red);
    color: var(--cms-red);
}

/* Action menu */
.cms-area .vault__action-menu {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
}

.cms-area .vault__action-dropdown {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 0;
    bottom: -8px;
    z-index: 1;
    width: 160px;
    background-color: var(--cms-white);
    border: 1px solid #D5D5D5;
    border-radius: 10px;
    box-shadow: 0 0 12px #00000040;
    opacity: 0;
    translate: 0 100%;
    transition: opacity 0.2s;
    pointer-events: none;
}

.cms-area .vault__action-dropdown.visible {
    opacity: 1;
    pointer-events: all;
}

.cms-area .vault__action-dropdown.up {
    top: -8px;
    bottom: unset;
    translate: 0 -100%;
}

.cms-area .vault__action-dropdown a,
.cms-area .vault__action-dropdown button {
    display: grid;
    grid-template-columns: 25px 1fr;
    align-items: center;
    padding: 10px 20px;
    column-gap: 8px;
    background: transparent;
    outline: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #D5D5D5;
    color: var(--cms-main);
    text-align: start;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
}

.cms-area .vault__action-dropdown a:hover,
.cms-area .vault__action-dropdown button:hover {
    background: var(--cms-light);
}

.cms-area .vault__action-dropdown a:last-child,
.cms-area .vault__action-dropdown button:last-child {
    border-bottom: none;
}

.cms-area .vault__action-dropdown button.highlighted {
    outline: 3px solid orange;
    border-radius: 3px;
    border: none;
}



/* ------------------Blog------------------ */

/* Editor */
.blog__editor-cont.section {
    padding: 10px 20px 30px 20px;
    align-items: center;
}

.blog__editor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 45px min-content auto;
    width: 100%;
    height: 100%;
    max-width: 900px;
    overflow: hidden;
}

.blog__editor label {
    margin: 30px 0 7px 0;
    padding-left: 10px;
    color: var(--cms-medium);
    font-weight: 700;
    font-size: 13.5px;
}

.blog__editor input,
.blog__editor select {
    display: block;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    background-color: var(--cms-light);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-main);
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.blog__editor > button {
    display: none;
    margin-top: 20px;
    width: 100%;
}

.blog__editor #mob-keywords,
.blog__editor #language-mob {
    display: none;
}

.blog__editor-content { 
    display: block;
    overflow: hidden;
    padding: 15px 10px 15px 20px;
    width: 100%;
    height: 320px;
    background-color: var(--cms-light);
    border-radius: 12px;
}

.blog__editor-quill {
    display: block;
    padding-right: 10px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.blog__editor-quill :focus-visible {
    outline: none;
}

.blog__editor-quill h2 {
    margin-bottom: 1rem;
}

.blog__editor-quill * + h2 {
    margin-top: 0.75rem;
}

.blog__editor-quill h3 {
    margin-bottom: 0.55rem;
}

.blog__editor-quill * + h3 {
    margin-top: 0.33rem;
}

.blog__editor-quill h4,
.blog__editor-quill h5,
.blog__editor-quill ol,
.blog__editor-quill p {
    margin-bottom: 7px;
}

.blog__editor-quill ol {
    padding-left: 40px;
}

.blog__editor-quill a {
    color: var(--cms-blue-1);
    text-decoration: underline;
}

.blog__editor-quill img {
    display: block;
    margin: 40px auto;
    width: max-content;
    max-width: 100%;
    max-height: 350px;
    border-radius: 10px;
    object-fit: contain;
    cursor: pointer;
}

/* Quill Placeholder */
.ql-editor {
    position: relative;
}

.ql-editor.ql-blank::before {
    position: absolute;
    content: "Empieza a escribir...";
    top: 0;
    left: 0;
    color: rgba(0, 0, 0, 0.6);
    font-style: italic;
    pointer-events: none;
}

/* Styling Tools */
.blog__tools {
    display: flex;
    flex-direction: column;
    padding: 30px 15px 10px 15px;
    width: 100%;
    height: 510px;
    color: var(--cms-medium);
    font-size: 13.5px;
    font-weight: 500;
    overflow-y: auto;
}

.blog__tools * {
    cursor: default;
    pointer-events: none;
}

.blog__tools > span {
    margin-bottom: 5px;
    padding-left: 10px;
    font-weight: 700;
}

.blog__tools p {
    margin-bottom: 20px;
    padding-left: 10px;
}

.blog__tools textarea {
    flex-shrink: 0;
    display: block;
    margin-bottom: 30px;
    padding: 10px 15px;
    width: 100%;
    height: 110px;
    background-color: var(--cms-light);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-blue-1);
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    resize: none;
}

.blog__tools select {
    flex-shrink: 0;
    display: block;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    background-color: var(--cms-light);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-blue-1);
    font-family: inherit;
    font-size: 14px;
}

.blog__tools-row {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 30px;
    width: 100%;
    height: 45px;
    background-color: var(--cms-light);
    border-radius: 12px;
}

.blog__tools-btns {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}

.blog__tools-btns button {
    display: block;
    padding: 4px 0 0 0;
    width: 40px;
    height: 40px;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-main);
    cursor: pointer;
}

.blog__tools-btns button.selected {
    color: var(--cms-blue-1);
    font-size: 1.1em;
    font-weight: 700;
}

.blog__tools-link {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 45px;
    grid-auto-rows: 45px;
    column-gap: 10px;
    row-gap: 7px;
    margin-bottom: 40px;
}

.blog__tools-link input {
    display: block;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    background-color: var(--cms-light);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-blue-1);
    font-family: inherit;
    font-size: 14px;
}

.blog__tools-link input.full {
    grid-column: 1 / 3;
}

.blog__tools-link button {
    display: block;
    padding: 0;
    width: 100%;
    height: 100%;
    background: var(--cms-blue-2);
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-white);
    font-size: 1.2em;
    cursor: pointer;
}

.blog__tools-link span {
    position: absolute;
    display: none;
    left: 5px;
    bottom: -5px;
    width: 100%;
    font-size: 12px;
    translate: 0 100%;
}

.blog__tools-link.no-selection span {
    display: block;
}

.blog__tools-media {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.blog__tools-media input[type=file] {
    display: none;
}

.blog__media-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    width: 100%;
    height: 45px;
}

.blog__media-btns button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    background: var(--cms-light);
    border: 1px solid var(--cms-blue-2);
    outline: none;
    border-radius: 12px;
    color: var(--cms-blue-2);
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
}

.blog__tools-media .blog__tools-link {
    margin-bottom: 5px;
}

/* --------------Multimedia-------------- */

.media__filter {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 15px 30px 15px;
    width: calc(100% - 30px);
    height: 45px;
    background: var(--cms-light);
    border-radius: 12px;
}

.media__filter span {
    margin-right: 10px;
    padding: 0 20px;
    color: var(--cms-dark);
}

.media__filter-btn {
    display: block;
    padding: 12px 0;
    width: 120px;
    height: 45px;
    background: none;
    border: none;
    outline: none;
    border-radius: 0;
    color: var(--cms-dark);
    font-weight: 500;
    transition: color 0.25s;
}

.media__filter-btn i {
    display: none;
}

.media__filter-btn:hover {
    color: var(--cms-blue-2);
    cursor: pointer;
}

.media__filter-btn.selected {
    border-bottom: 2px solid var(--cms-blue-2);
    color: #000;
}

/* Gallery */
.media__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    row-gap: 15px;
    column-gap: 15px;
    margin-bottom: 10px;
    padding: 0 15px;
    width: 100%;
}

.media__gallery-item {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--cms-light);
    border: 1px solid var(--cms-grey);
    border-radius: 12px;
    overflow: hidden;
}

.media__gallery-item img,
.media__gallery-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media__item-hover {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 0;
    left: 0;
    z-index: 40;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    background-color: #06060972;
    opacity: 0;
    transition: opacity 0.3s;
}

.media__gallery-item:hover .media__item-hover {
    opacity: 1;
}

.media__item-hover p {
    display: block;
    margin-bottom: 0;
    padding: 14px 10px 10px 45px;
    width: 100%;
    height: 40px;
    color: var(--cms-white);
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}

.media__item-btns {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-left: auto;
    padding: 10px;
}

.media__item-btns button {
    display: block;
    padding: 0;
    width: 30px;
    height: 30px;
    background: #060609B0;
    outline: none;
    border: none;
    border-radius: 3px;
    color: var(--cms-white);
    font-size: 16px;
    cursor: pointer;
}

.media__icon {
    position: absolute;
    display: flex;
    bottom: 7px;
    left: 7px;
    z-index: 40;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    color: var(--cms-white);
    font-size: 18px;
}

/* Diagram numbers */
.cms-number {
    position: absolute;
    display: inline-grid;
    place-items: center;
    z-index: 30;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    background: linear-gradient(138deg, #24242a 0%, #060609 100%);
    box-shadow: 0 0 4px rgba(0,0,0,.35);
    border-radius: 8px;
    color: var(--cms-white);
    font-size: 0.85rem;
    font-weight: 700;
}

.cms-number#blog-1 {
    top: 5px;
    right: 5px;
}

.cms-number#blog-2 {
    top: 5px;
    right: 5px;
}

.cms-number#blog-3 {
    top: 10px;
    left: 40px;
}

.cms-number#blog-4 {
    top: 0;
    right: -5px;
}

.cms-number#blog-5 {
    top: 0;
    right: -15px;
}

.cms-number#blog-6 {
    top: 15px;
    left: 10%;
}

.cms-number#editor-1 {
    top: 5px;
    right: 5px;
}

.cms-number#editor-2 {
    top: -10px;
    right: 5px;
}

.cms-number#editor-3 {
    top: 10px;
    right: 10px;
}

.cms-number#media-1 {
    top: 0;
    right: 0;
}

.cms-number#media-2 {
    top: 5px;
    right: 5px;
}

.cms-number#media-3 {
    top: 10px;
    left: 5px;
}

.cms-number#input {
    top: -4px;
    left: -16px;
}

.cms-number#explorer-1 {
    right: -10px;
    top: -6px;
}

.cms-number#explorer-2 {
    right: 10px;
    top: 10px;
}

.cms-number#explorer-3 {
    right: 24px;
    top: 24px;
}

.cms-number#folder-file-1 {
    top: 0px;
    right: 32%;
}

.cms-number#folder-file-2 {
    top: 0px;
    right: 5%;
}

.cms-number#folder-file-3 {
    top: 0px;
    right: -10px;
}

.cms-number#folder-file-4 {
    top: 0px;
    right: -6px;
}

.cms-number#folder-file-5 {
    top: 0px;
    right: 22%;
}

.cms-number#versions-1 {
    top: 10px;
    left: 33%;
}

.cms-number#versions-2 {
    top: 4px;
    right: 120px;
}

.cms-number#versions-3 {
    top: 0;
    right: -8px;
}

.search-highlight {
  display: inline;
  padding: .05em .22em;
  border-radius: .35em;
  color: #ffffff;
  background: linear-gradient(138deg, var(--accent), var(--accent-dark));
  box-shadow: 0 0 0 2px rgba(44,121,248,.18);
}

/* Demos */
.vault-search-demo,
.global-search-demo,
.vault-new-demo,
.vault-modal-demo,
.vault-actions-demo {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.vault-search-demo .header__search {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px;
    background-color: var(--cms-white);
    border-radius: 12px;
    box-shadow: 0 0 12px #00000040;
    pointer-events: none;
}

.vault-search-demo .header__search-bar {
    display: grid;
    grid-template-columns: 1fr 45px;
    align-items: center;
    margin: auto 0;
    width: 100%;
    max-width: 350px;
    height: 60px;
    background-color: var(--cms-light);
    border-radius: 12px;
}

.vault-search-demo .header__search-bar input {
    display: block;
    padding: 0 20px;
    width: 100%;
    height: 55px;
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--cms-medium);
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
}

.vault-search-demo .header__search-bar button {
    display: block;
    margin: 0;
    width: 45px;
    height: 45px;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-medium);
    font-size: 18px;
    transition: color 0.25s;
    cursor: pointer;
}

.vault-search-demo .header__search-bar button:hover {
    color: var(--cms-blue-2);
}

.vault-search-demo .vault__global-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    color: var(--cms-medium);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.vault-search-demo .vault__global-toggle input {
    width: 20px;
    height: 20px;
    accent-color: var(--cms-main);
}

.vault-search-demo .vault__global-toggle.mob {
    margin: 8px 0 0 0;
}

.global-search-demo .vault__global-results {
    display: block;
    padding-bottom: 12px;
    width: 100%;
    max-width: 600px;
    background-color: var(--cms-white);
    border: 1px solid #D5D5D5;
    border-radius: 12px;
    overflow: hidden;
}

.global-search-demo .vault__global-results.hidden {
    display: none;
}

.global-search-demo .vault__global-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px 18px;
    border-bottom: 1px solid #E6ECF3;
}

.global-search-demo .vault__global-header h3 {
    margin: 0;
    color: var(--cms-dark);
    font-size: 17px;
}

.global-search-demo .vault__global-header button {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    padding: 0;
    width: 30px;
    aspect-ratio: 1;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-main);
    font-size: 20px;
    cursor: pointer;
}

.global-search-demo .vault__global-header span {
    color: var(--cms-medium);
    font-size: 14px;
}

.global-search-demo .vault__global-empty {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    padding: 24px 18px 10px 18px;
}

.global-search-demo .vault__global-empty span {
    color: var(--cms-medium);
    font-size: 16px;
}

.global-search-demo .vault__global-empty button {
    padding: 0;
    width: 30px;
    aspect-ratio: 1;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-main);
    font-size: 20px;
    cursor: pointer;
}

.global-search-demo .vault__global-list {
    display: flex;
    flex-direction: column;
    max-height: 50vh;
    overflow: auto;
}

.global-search-demo .vault__global-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 6px 18px;
    border-bottom: 1px solid #EEF2F6;
}

.global-search-demo .vault__global-item:last-child {
    border-bottom: none;
}

.global-search-demo .vault__global-item h4 {
    color: var(--cms-dark);
    font-size: 15px;
    word-break: break-all;
}

.global-search-demo .vault__global-item p {
    margin-top: 4px;
    color: var(--cms-medium);
    font-size: 13px;
    word-break: break-all;
}

.global-search-demo .mod-wrapper {
    display: grid;
    grid-template-rows: 55px;
    grid-auto-columns: 50px;
    grid-auto-flow: column;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    width: max-content;
    height: 55px;
}

.global-search-demo .mod {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    background: var(--cms-light);
    outline: none;
    border: none;
    border-radius: 5px;
    color: var(--cms-blue-2);
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
}

.global-search-demo .mod i {
    font-size: 17px;
}

.vault-new-demo .vault__new-menu {
    display: flex;
    flex-direction: column;
    width: 260px;
    background-color: var(--cms-white);
    border-radius: 12px;
    box-shadow: 0 0 12px #00000040;
    overflow: hidden;
}

.vault-new-demo .vault__new-menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    height: 80px;
    background: transparent;
    outline: none;
    border: none;
    cursor: pointer;
}

.vault-new-demo .vault__new-menu i {
    color: var(--cms-main);
    font-size: 1.5em;
}

.vault-new-demo .vault__new-menu span {
    padding: 0;
    color: var(--cms-main);
    font-size: 1.4em;
    font-weight: 400;
}

.vault-new-demo .vault__new-menu div {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #D5D5D5;
}

.vault-modal-demo .vault__modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    background-color: var(--cms-white);
    border-radius: 12px;
}

.vault-modal-demo .vault__modal h3 {
    display: block;
    padding: 20px 15px;
    width: 100%;
    border-bottom: 1px solid #D5D5D5;
    color: var(--cms-main);
    text-align: center;
    text-overflow: ellipsis;
    font-size: 1.25em;
    white-space: nowrap;
    overflow: hidden;
}

.vault-modal-demo .vault__modal input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto;
    width: calc(100% - 60px);
    height: 50px;
    background-color: #F2F3FB;
    outline: none;
    border: none;
    border-radius: 12px;
    color: var(--cms-main);
    text-align: center;
    font-size: 16px;
}

.vault-modal-demo .vault__modal input::placeholder {
    color: #0D0D1380;
}

.vault-modal-demo .vault__modal p {
    display: block;
    width: 100%;
    margin: 30px 0;
    padding: 0 20px;
    color: var(--cms-main);
    text-align: center;
    line-height: 1.3em;
    overflow-wrap: break-word;
}

.vault-modal-demo .vault__modal .exit {
    position: absolute;
    display: block;
    top: 10px;
    right: 15px;
    padding: 0;
    background: transparent;
    outline: none;
    border: none;
    color: var(--cms-medium);
    font-size: 1.5em;
    cursor: pointer;
}

.vault-modal-demo .vault__modal-btns {
    display: flex;
    gap: 15px;
    margin: 0 30px 30px 30px;
}

.vault-modal-demo .vault__modal-btns button {
    width: 180px;
}

.folder-permission-demo {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: 2rem;
    row-gap: 1.5rem;
    margin: 2.5rem 0;
}

.folder-permission-demo .folder {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 1.2em;
}

.folder-permission-demo .status {
    padding: 4px 12px;
    border: 1px solid var(--cms-blue-2);
    border-radius: 5px;
    color: var(--cms-blue-2);
    font-size: 14px;
    font-weight: 600;
}

.folder-permission-demo .status.red {
    border-color: var(--cms-red);
    color: var(--cms-red);
}

.folder-permission-demo .fa-arrow-turn-down-right {
    color: var(--muted-2);
}

.vault-actions-demo > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1.2rem;
    background-color: var(--cms-white);
    border-radius: 20px;
}

.mod-wrapper.upscaled {
    grid-template-rows: 100px;
    grid-auto-columns: 80px;
    gap: 8px;
    height: 100px;
}

.mod-wrapper.upscaled .mod {
    width: 80px;
    height: 80px;
    font-size: 15px;
}

.mod-wrapper.upscaled i {
    font-size: 28px;
}

.vault-actions-demo .action-dropdown {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 220px;
    background-color: var(--cms-white);
    border: 1px solid #D5D5D5;
    border-radius: 10px;
    box-shadow: 0 0 12px #00000040;
}

.vault-actions-demo .action-dropdown div {
    display: grid;
    grid-template-columns: 25px 1fr;
    align-items: center;
    padding: 14px 25px;
    column-gap: 8px;
    background-color: transparent;
    outline: none;
    border: none;
    border-bottom: 1px solid #D5D5D5;
    color: var(--cms-main);
    text-align: start;
    font-size: 1.17em;
    cursor: pointer;
}

.download-demo-cont {
    margin: 2rem 0;
}

.download-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem;
    background-color: var(--cms-main);
    box-shadow: 0 0 8px #FFFFFF40;
    border-radius: 10px;
}

.public__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    width: 100%;
    max-width: 480px;
    background-color: var(--cms-white);
    border-radius: 12px;
}

.public__form img {
    display: block;
    margin-bottom: 2rem;
    width: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 50px;
    object-fit: cover;
}

.public__form h2 {
    color: var(--cms-main);
    font-size: 1.5em;
    font-weight: 500;
    text-align: center;
}

.public__form input {
    display: block;
    margin: 10px auto 20px auto;
    height: 45px;
    width: 100%;
    background-color: var(--cms-light);
    outline: none;
    border: none;
    border-radius: 5px;
    color: var(--cms-blue-2);
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}

.public__form label {
    margin-top: 10px;
    color: var(--cms-medium);
}

.highlighted {
    border: none;
    outline: 4px solid orange;
}

.demo-file-input {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 1rem;
    row-gap: 1.5rem;
    margin: 0 auto 3rem auto;
    width: 100%;
}

.demo-file-input img {
    width: 100%;
    object-fit: contain;
}

@media (max-width: 1180px) {
   .demo-file-input {
        grid-template-columns: 100%;
        max-width: 600px;
   }
}