.icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    color:var(--text-primary);
    stroke-width:2;
    stroke:currentColor;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round
    }
    
    .icon svg {
    stroke:currentColor
    }
    
    .icon-sm {
    width:16px;
    height:16px
    }
    
    .icon-lg {
    width:24px;
    height:24px
    }
    
    .sidebar-nav .icon {
    width:20px;
    text-align:center;
    margin-right:1rem
    }
    
    .sidebar-nav a.active .icon {
    stroke:#fff;
    filter:drop-shadow(0 0 2px #ffffff4d)
    }
    
    .icon-spin {
    animation:spin 2s linear infinite
    }
    
    @keyframes spin {
    0% {
    transform:rotate(0deg)
    }
    
    100% {
    transform:rotate(360deg)
    }
    }
    
    .icon-home {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E")
    }
    
    .icon-play-circle {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolygon points='10 8 16 12 10 16 10 8' stroke='%2300cc00'%3E%3C/polygon%3E%3C/svg%3E")
    }
    
    .icon-dumbbell {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v14M18 5v14M4 7h2M18 7h2M4 17h2M18 17h2M12 3v18'%3E%3C/path%3E%3Cpath d='M8 11h8'%3E%3C/path%3E%3C/svg%3E")
    }
    
    .icon-list {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E")
    }
    
    .icon-chart-line {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cpolyline points='16 6 21 12 16 18'%3E%3C/polyline%3E%3C/svg%3E")
    }
    
    .icon-chart-bar {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'%3E%3C/line%3E%3Cline x1='12' y1='20' x2='12' y2='4'%3E%3C/line%3E%3Cline x1='6' y1='20' x2='6' y2='14'%3E%3C/line%3E%3Cline x1='3' y1='20' x2='21' y2='20'%3E%3C/line%3E%3C/svg%3E")
    }
    
    .icon-user-cog {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'%3E%3C/circle%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='18' r='2'%3E%3C/circle%3E%3C/svg%3E")
    }
    
    .icon-cog {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E")
    }
    
    .icon-sign-out {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E")
    }
    
    .icon-bars {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E")
    }
    
    .icon-times {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
    }
    
    .icon-user {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E")
    }
    
    .icon-download {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E")
    }
    
    .mobile-nav-item.active .icon-home {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E")
    }
    
    .mobile-nav-item.active .icon-play-circle {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolygon points='10 8 16 12 10 16 10 8'%3E%3C/polygon%3E%3C/svg%3E")
    }
    
    .mobile-nav-item.active .icon-dumbbell {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v14M18 5v14M4 7h2M18 7h2M4 17h2M18 17h2M12 3v18'%3E%3C/path%3E%3Cpath d='M8 11h8'%3E%3C/path%3E%3C/svg%3E")
    }
    
    .mobile-nav-item.active .icon-list {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E")
    }
    
    .mobile-nav-item.active .icon-user {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E")
    }
    
    .icon-trophy {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5C3.12 9 2 7.88 2 6.5v-1C2 4.12 3.12 3 4.5 3H6'/%3E%3Cpath d='M18 9h1.5c1.38 0 2.5-1.12 2.5-2.5v-1C22 4.12 20.88 3 19.5 3H18'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M8 17A6 6 0 0 1 8 3h8a6 6 0 0 1 0 12H8z'/%3E%3C/svg%3E")
    }
    
    .icon-medal {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M12 9V3'/%3E%3Cpath d='M9 6l3-3 3 3'/%3E%3Cpath d='M9 12l3 3 3-3'/%3E%3C/svg%3E")
    }
    
    .mobile-nav-item.active .icon-trophy {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5C3.12 9 2 7.88 2 6.5v-1C2 4.12 3.12 3 4.5 3H6'/%3E%3Cpath d='M18 9h1.5c1.38 0 2.5-1.12 2.5-2.5v-1C22 4.12 20.88 3 19.5 3H18'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M8 17A6 6 0 0 1 8 3h8a6 6 0 0 1 0 12H8z'/%3E%3C/svg%3E")
    }
    
    .icon-medal-1 {
    content:url("../icons/svg/medal-1.svg")
    }
    
    .icon-medal-2 {
    content:url("../icons/svg/medal-2.svg")
    }
    
    .icon-medal-3 {
    content:url("../icons/svg/medal-3.svg")
    }
    
    .icon-medal-4 {
    content:url("../icons/svg/medal-4.svg")
    }
    
    .icon-medal-5 {
    content:url("../icons/svg/medal-5.svg")
    }
    
    .icon-medal-1:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #CD7F32)
    }
    
    .icon-medal-2:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px silver)
    }
    
    .icon-medal-3:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #FFD700)
    }
    
    .icon-medal-4:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #E5E4E2)
    }
    
    .icon-medal-5:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #B9F2FF)
    }
    
    .icon-medal-6 {
    content:url("../icons/svg/medal-6.svg")
    }
    
    .icon-medal-7 {
    content:url("../icons/svg/medal-7.svg")
    }
    
    .icon-medal-8 {
    content:url("../icons/svg/medal-8.svg")
    }
    
    .icon-medal-9 {
    content:url("../icons/svg/medal-9.svg")
    }
    
    .icon-medal-10 {
    content:url("../icons/svg/medal-10.svg")
    }
    
    .icon-medal-6:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #E0115F)
    }
    
    .icon-medal-7:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #50C878)
    }
    
    .icon-medal-8:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #0F52BA)
    }
    
    .icon-medal-9:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #96C)
    }
    
    .icon-medal-10:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #FFD700)
    }
    
    .icon-medal-11 {
    content:url("../icons/svg/medal-11.svg")
    }
    
    .icon-medal-12 {
    content:url("../icons/svg/medal-12.svg")
    }
    
    .icon-medal-13 {
    content:url("../icons/svg/medal-13.svg")
    }
    
    .icon-medal-14 {
    content:url("../icons/svg/medal-14.svg")
    }
    
    .icon-medal-15 {
    content:url("../icons/svg/medal-15.svg")
    }
    
    .icon-medal-11:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #8B0000)
    }
    
    .icon-medal-12:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #FF4500)
    }
    
    .icon-medal-13:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #E6E6FA)
    }
    
    .icon-medal-14:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #87CEEB)
    }
    
    .icon-medal-15:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #8B4513)
    }

.icon-fire {
    content:url("../icons/svg/fire.svg")
}

.icon-star {
    content:url("../icons/svg/star.svg")
}

.icon-calendar {
    content:url("../icons/svg/calendar.svg")
}

.icon-sun {
    content:url("../icons/svg/sun.svg")
}

.icon-leaf {
    content:url("../icons/svg/leaf.svg")
}

.icon-clock {
    content:url("../icons/svg/clock.svg")
}

.icon-crown {
    content:url("../icons/svg/crown.svg")
}

.icon-fire:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #FF4500)
}

.icon-star:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #FFD700)
}

.icon-calendar:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #4169E1)
}

.icon-sun:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #FFA500)
}

.icon-leaf:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #228B22)
}

.icon-clock:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #4682B4)
}

.icon-crown:hover {
    filter:brightness(1.2) drop-shadow(0 0 2px #FFD700)
}

.icon-users {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E")
}

.icon-envelope {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E")
}

.mobile-nav-item.active .icon-users {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E")
}

.mobile-nav-item.active .icon-envelope {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E")
}