.csp-min-vh-80 { min-height: 80vh; }
.csp-access-denied-icon { width: 120px; height: 120px; border: 5px solid #ea4d4d; }
.csp-fs-70 { font-size: 70px; }
.csp-cursor-pointer { cursor: pointer; }
.csp-profile-preview { max-width: 150px; border-radius: 8px; }
.csp-mt-20 { margin-top: 20px; }
.csp-max-h-500 { max-height: 500px; }
.csp-w-150 { width: 150px; }
.csp-w-90 { width: 90px; }
.csp-w-25p { width: 25%; }
.csp-w-20p { width: 20%; }
.csp-w-15p { width: 15%; }
.csp-w-10p { width: 10%; }
.csp-min-w-320 { min-width: 320px; }
.csp-min-w-280 { min-width: 280px; }
.csp-max-w-220 { max-width: 220px; }
.csp-max-w-240 { max-width: 240px; }
.csp-img-96x72 { width: 96px; height: 72px; object-fit: cover; }
.csp-img-64 { width: 64px; height: 64px; object-fit: cover; }
.csp-img-64-rounded { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.csp-gallery-108x80 { width: 108px; height: 80px; object-fit: cover; }
.csp-max-h-220 { max-height: 220px; }
.csp-max-h-200 { max-height: 200px; }
.csp-modal-90vw { max-width: 90vw; }
.csp-h-80vh { height: 80vh; }
.csp-frame-full { width: 100%; height: 100%; border: 0; }
.csp-preview-media { max-width: 100%; max-height: 100%; }
.csp-home-hero-image { height: 650px; object-fit: cover; }
.csp-post-preview { height: 100px; margin-top: 10px; }
.csp-post-preview-image { height: 100px; }
.csp-z-1100 { z-index: 1100; }
.csp-z-9999 { z-index: 9999; }
.csp-max-h-100 { max-height: 100px; }
.csp-upload-remove-image { border-radius: 50%; width: 24px; height: 24px; font-weight: bold; line-height: 1; }
.csp-upload-file-row { background: #f8fbff; border-color: #d6e0ef !important; }
.csp-upload-file-link { max-width: calc(100% - 42px); color: #1f3a56; }
.csp-upload-file-icon { font-size: 16px; }
.csp-upload-remove-file { border-radius: 50%; width: 26px; height: 26px; line-height: 1; }
.csp-clear-both { clear: both; }

.color-picker {
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.color-picker:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}