.content {
    flex: 1;
}

.no-scroll {
    overflow: hidden;
}

[data-bs-theme="light"] .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(0);
    z-index: 9999;
    opacity: 0;
    animation: fadeInBlur 1.5s ease forwards;
}

[data-bs-theme="dark"] .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 9999;
    opacity: 0;
    animation: fadeInBlur 1.5s ease forwards;
}

@keyframes fadeInBlur {
    0% {
        opacity: 0;
        backdrop-filter: blur(0);
    }

    100% {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
}

.calendar {
    border-spacing: 10px;
    border-collapse: separate;
}

.calendar tbody {
    height: 300px;
}

.shake {
    animation: shake 0.3s ease-in-out;
}

.pointer {
    cursor: pointer;
}

[data-bs-theme="dark"] .theme-roll {
    filter: invert(100%);
}

.logo {
    height: auto;
    border-radius: 50%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.logo:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
}

[data-bs-theme="light"] .logo:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.gallery {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.gallery:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
}

.gallery-deleted {
    filter: blur(10px);
    cursor: pointer;
}

[data-bs-theme="light"] .gallery:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.popup {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.popup:hover {
    transform: scale(1.08);
}

.popup-sm {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.popup-sm:hover {
    transform: scale(1.01);
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-1px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(1px);
    }
}

.award-sm {
    width: 84px;
    height: 26px;
    object-fit: contain;
}

.award {
    width: 100px;
    height: 38px;
    object-fit: contain;
}

.punish-sm {
    width: 84px;
    height: 26px;
    object-fit: contain;
}

.punish {
    width: 100px;
    height: 38px;
    object-fit: contain;
}

.role {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

:root {
    --transition-duration: 0.5s;
}

body.theme-transition {
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

[data-bs-theme="dark"] {
    color: #f8f9fa;
}

[data-bs-theme="light"] {
    color: #212529;
}

.topic-decoration p {
    margin: 0;
    padding: 0;
}

#imagePreview {
    max-height: 200px;
    object-fit: cover;
}

::-webkit-scrollbar {
    width: 12px;
}

[data-bs-theme="light"] ::-webkit-scrollbar-thumb {
    background: #555;
}

[data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #333;
    cursor: pointer;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #888;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #aaa;
    cursor: pointer;
}