.text-red-500.text-xs{
    font-size: 1.0rem;
    line-height: 1rem;
    font-weight: bold;
}
.max-w-md {
    max-width: 34rem !important;
}

@keyframes bounce-in {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.animate-bounce-in {
  animation: bounce-in 0.5s ease forwards;
}
.tree-structure.w-28.h-28{
  width: 9rem !important;
  height: 9rem !important;
}



#calendar {
    width: 100%;
    min-height: 700px;
    border-radius: 12px;
}

.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.fc-theme-standard td, .fc-theme-standard th {
    border-color: #e2e8f0;
}

.video-wrapper {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 Ratio */
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px;
    object-fit: cover;
}
.hashtag-box { max-height: 200px; overflow-y: auto; }

.edit-mode .comment-box{
    max-width:100%!important;
    margin:0!important;
}
.edit-mode .send-comment-btn{
    right:0.5rem!important;
}
.edit-mode .toolbar{
    right:3rem!important;
}

/* DARK MODE FIX FOR CKEDITOR 5 */
.dark .ck.ck-editor__main > .ck-editor__editable {
    background-color: #020617 !important;
    color: #e5e7eb !important;
}

.dark .ck.ck-toolbar {
    background-color: #020617 !important;
    border-color: #334155 !important;
}

.dark .ck.ck-toolbar .ck-button,
.dark .ck.ck-toolbar .ck-dropdown__button {
    color: #e5e7eb !important;
}

.dark .ck.ck-button.ck-on,
.dark .ck.ck-button:hover {
    background-color: #1e293b !important;
}

.dark .ck.ck-editor__editable.ck-focused {
    box-shadow: 0 0 0 1px #38bdf8 !important;
}

.dark .ck.ck-editor__editable ::selection {
    background: #1e40af !important;
}

@keyframes bellRing {
    0%{transform:rotate(0)}
    10%{transform:rotate(15deg)}
    20%{transform:rotate(-15deg)}
    30%{transform:rotate(10deg)}
    40%{transform:rotate(-10deg)}
    50%{transform:rotate(6deg)}
    60%{transform:rotate(-6deg)}
    70%{transform:rotate(3deg)}
    80%{transform:rotate(-3deg)}
    100%{transform:rotate(0)}
}

.bell-animate{
    animation: bellRing .6s ease-in-out;
    transform-origin: top center;
}
