a.delete-circle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fdf1f1;
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
    color: #ea5455;
    background-color: #fdf1f1;
}

.sortable-placeholder {
    border: 2px dashed #ccc;
    background: #f8f9fa;
    height: 60px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.course-image-preview {
    position: relative;
    display: inline-block;
}

.course-image-preview img {
    display: block;
    border-radius: 8px;
}

.course-image-preview .close-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #ff4d4d;
    font-size: 18px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.course-image-preview:hover .close-icon {
    opacity: 1;
}

.description-box {
    background: linear-gradient(90deg, #CC00DA, #670009);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    color: #fff;
}

.mark-complete {
    background: linear-gradient(90deg, #04134C, #5F4EFF);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 0;
    font-size: 18px;
    font-weight: 500;
    margin-top: 20px;
    width: 100%;
    transition: 0.3s;
}

.mark-complete:hover {
    opacity: 0.9;
}

.bg-menu-theme-admin {
    background-color: #7367f0;
    color: #FFFFFF;
}

.bg-menu-theme-admin .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
    color: #FFFFFF;
}

.bg-menu-theme-admin.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: #F59E0B;
    color: #FFFFFF !important;
}

.activity-card {
    background-color: #E3E3E3;
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    border-color: #6B46C1;
    padding: 0.7rem;
    margin-bottom: 1rem;
    border-radius: 9px;
}

.activity-card p {
    color: #000;
}

#map {
    height: 600px !important;
    width: 100%;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.student-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #6f42c1;
    color: white;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.badge-custom {
    background: #e3fcef;
    color: #1d7a36;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 13px;
}

.section-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.card-subtitle {
    font-size: 13px;
    color: #888;
}

.activity-item {
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    border-color: #7367f0;
    background: #EFEFEF;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 6px;
}

.activity-item small {
    color: #555;
}

.card-primary {
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    border-color: #7367f0;
    border-radius: 9px;
}

.enrollment-card-green {
    background-color: #E9FFF2;
    padding: 13px;
    border-left: 5px solid #48BB78;
}

.enrollment-card-green span.badge {
    background-color: #48BB78;
    color: #fff;
    border-radius: 13px;
}

.enrollment-card-green .progress-bar {
    background: #48BB78 !important;
}

.enrollment-card-purple {
    background-color: #E6DBFF;
    padding: 13px;
    border-left: 5px solid #8B5CF6;
}

.enrollment-card-purple span.badge {
    background-color: #8B5CF6;
    color: #fff;
    border-radius: 13px;
}

.enrollment-card-purple .progress-bar {
    background: #8B5CF6 !important;
}

.enrollment-card-gray {
    background-color: #EFEFEF;
    padding: 13px;
    border-left: 5px solid #888888;
}

.enrollment-card-gray span.badge {
    background-color: #888888;
    color: #fff;
    border-radius: 13px;
}

.enrollment-card-red {
    background-color: #F5656533;
    padding: 13px;
    border-left: 5px solid #F56565;
}

.enrollment-card-red span.badge {
    background-color: #F56565;
    color: #fff;
    border-radius: 13px;
}

.enrollment-card-red .progress-bar {
    background: #F56565 !important;
}

.bg-yellow {
    background-color: #FFFFA8;
}


.chart-labels li {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.chart-labels li:nth-child(1) {
    color: #6B46C1;
}

.chart-labels li:nth-child(2) {
    color: #805AD5;
}

.chart-labels li:nth-child(3) {
    color: #9F7AEA;
}

.chart-labels li:nth-child(4) {
    color: #B794F4;
}

.chart-box {
    width: 300px;
    margin: auto;
}

.nps-label {
    margin-top: -20px;
    font-size: 18px;
    color: #555;
}

.nps-footer {
    margin-top: 10px;
    font-size: 14px;
    color: #444;
}