/*
 * KU MOOC site — utility classes that replace inline style="" attributes.
 * Injected on every page by includes/site_guard.php (end of <head>).
 * !important keeps the same strength the inline styles had. Elements whose style
 * is changed by JavaScript get a normal (non-!important) rule in their page CSS instead.
 */

/* font sizes */
.u-fs-060 { font-size: 0.6rem !important; }
.u-fs-065 { font-size: 0.65rem !important; }
.u-fs-120 { font-size: 1.2rem !important; }
.u-fs-300 { font-size: 3rem !important; }

/* sizes */
.u-h-4 { height: 4px !important; }
.u-h-6 { height: 6px !important; }
.u-h-8 { height: 8px !important; }
.u-w-30 { width: 30px !important; }
.u-w-40 { width: 40px !important; }
.u-minw-60 { min-width: 60px !important; }
.u-icon-48 { width: 48px !important; height: 48px !important; font-size: 1.4rem !important; }

/* layout */
.u-d-inline { display: inline !important; }
.u-top-90 { top: 90px !important; }
.u-p-24-16 { padding: 24px 16px !important; }
.u-dot-4 { font-size: 4px !important; vertical-align: middle !important; }
.u-locked { cursor: not-allowed !important; opacity: 0.7 !important; }

/* colours */
.u-color-ku-green { color: #067647 !important; }
.u-color-var-lime { color: var(--lime) !important; }
.u-color-var-primary { color: var(--primary) !important; }
.u-color-var-secondary { color: var(--secondary) !important; }
.u-tone-sky { background: #e0f2fe !important; color: #0284c7 !important; }
.u-tone-amber { background: #fef3c7 !important; color: #d97706 !important; }
.u-tone-amber-dark { background: #fef3c7 !important; color: #92400e !important; }
.u-tone-green { background: #d1fae5 !important; color: #059669 !important; }
.u-tone-purple { background: #f3e8ff !important; color: #7c3aed !important; }
.u-tone-pink { background: #fce7f3 !important; color: #be185d !important; }
.u-highlight { background: #fef3c7 !important; padding: 1px 4px !important; border-radius: 3px !important; font-weight: 600 !important; }

/* group 2 pages */
.u-fs-050 { font-size: 0.5rem !important; }
.u-fs-08em { font-size: 0.8em !important; }
.u-fs-200 { font-size: 2rem !important; }
.u-fs-250 { font-size: 2.5rem !important; }
.u-fw-bold { font-weight: bold !important; }
.u-size-80 { width: 80px !important; height: 80px !important; }
.u-fit-cover { object-fit: cover !important; }
.u-h-5 { height: 5px !important; }
.u-z-1 { z-index: 1 !important; }
.u-border-0 { border: none !important; }
.u-radius-10 { border-radius: 10px !important; }
.u-radius-12 { border-radius: 12px !important; }
.u-radius-1r { border-radius: 1rem !important; }
.u-skip-pos { top: 10px !important; left: 10px !important; z-index: 9999 !important; }
.u-color-var-teal-deep { color: var(--teal-deep) !important; }
.u-color-var-mint-medium { color: var(--mint-medium) !important; }
.u-bg-mint-cream { background: linear-gradient(135deg, var(--mint-light), var(--cream-yellow)) !important; }
.u-result-box { background: linear-gradient(135deg, #f8fff9, #e8f5e8) !important; border-radius: 15px !important; border: 2px solid #28a745 !important; }
.u-radius-25 { border-radius: 25px !important; }

/* group 3 (instructor pages) */
.u-fs-400 { font-size: 4rem !important; }
.u-fs-48px { font-size: 48px !important; }
.u-fs-24px { font-size: 24px !important; }
.u-color-764ba2 { color: #764ba2 !important; }
.u-empty-icon { font-size: 3rem !important; color: #ccc !important; }
.u-mx-auto { margin: 0 auto !important; }
.u-w-300 { width: 300px !important; }
.u-avatar-32 { width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover !important; }
.u-scroll-200 { max-height: 200px !important; overflow-y: auto !important; }
.u-fade-icon { font-size: 2.5rem !important; opacity: 0.4 !important; }
.u-fade-icon-green { font-size: 2.5rem !important; opacity: 0.4 !important; color: #5a9e6b !important; }
.u-fade-icon-lg { font-size: 3rem !important; opacity: 0.4 !important; }
.u-size-50 { width: 50px !important; height: 50px !important; }
.u-size-100x60 { width: 100px !important; height: 60px !important; }
.u-h-400 { height: 400px !important; }

/* group 4 (information pages) */
.u-fs-070 { font-size: 0.7rem !important; }
.u-fs-078 { font-size: 0.78rem !important; }
.u-fs-080 { font-size: 0.8rem !important; }
.u-fs-083 { font-size: 0.83rem !important; }
.u-fs-100 { font-size: 1rem !important; }
.u-fs-110 { font-size: 1.1rem !important; }
.u-fs-130 { font-size: 1.3rem !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mr-10 { margin-right: 10px !important; }
.u-mb-12r { margin-bottom: 1.2rem !important; }
.u-size-12 { width: 12px !important; height: 12px !important; }
.u-z-1000 { z-index: 1000 !important; }
.u-h-300 { height: 300px !important; }
.u-scroll-y { overflow-y: auto !important; }
.u-radius-14 { border-radius: 14px !important; }
.u-color-var-green { color: var(--green) !important; }
.u-color-var-gold { color: var(--gold) !important; }
.u-color-0c4a6e { color: #0c4a6e !important; }
.u-bg-var-mint { background: var(--mint) !important; }
.u-border-color-var-line { border-color: var(--line) !important; }
.u-empty-icon-line { font-size: 4rem !important; color: var(--line) !important; }
.u-form-label-sm { display: block !important; font-size: .82rem !important; font-weight: 600 !important; color: #495057 !important; margin-bottom: 7px !important; }

/* group 5 */
.u-btn-success-solid { background: #28a745 !important; color: white !important; }