:root {
--primary-theme-color: #2B596C; --secondary-theme-color: #067F7F; --primary-theme-icon-color: #3f6673; --secondary-theme-icon-color: #1e8c8c; --theme-bg-color: #F4F5F7; --theme-content-bg-color: #FFFFFF; --default-button-color: #E8E8E8; --danger-button-color: #FB4E4E; --danger-button-hover-color: #fc7171; --tag-primary-color: #0053B1; --tag-blue-color: #dee6f0; --tag-yellow-color: #fffbe5; --tag-yellow-text-color: #574B00; --tag-green-color: #e5f9ed; --tag-green-text-color: #006B2D; --tag-red-color: #FBE5E5; --tag-darkblue-color: #3375c1; --alert-default-color: #D1ECF1; --alert-default-text-color: #004B6B; --alert-error-color: #FBE5E5; --table-header-color: #F8F8FA; --table-alternate-row-color: #FAFAFA; --primary-text-color: #091E42; --secondary-text-color: #42526e; --primary-theme-text-color: #FFFFFF; --input-primary-text-color: #1B1B1B; --input-control-bg-color: #FFFFFF; --input-border-color: #E3E3E3; --control-box-shadow-color: #4D97FF; --form-active-color: #2B596C; --focus-shadow-color: #B3D2FF; --accent-color: #D50000; --error-color: #BF2600; --warning-color: #FFAB00; --success-color: #008702; --border-color: #B3BAC5; --neutral-grey-color: #DFE1E5; --neutral-dark-grey-color: #B3BAC5; --neutral-hover-bg-color: #5E6C84; --attendance-progress-color: #006B2D; --font-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --focus: var(--control-box-shadow-color); --focus-styling: 2px solid; --focus-offset: 2px; --pageHeaderBackground: var(--theme-bg-color); --cardBackground: var(--theme-content-bg-color); --external-provider-button-bg-color: var(--theme-content-bg-color); --external-provider-button-color: var(--primary-text-color); --headerGradient: var(--primary-theme-color); --headerFontColor: var(--primary-theme-text-color); --navbarFontColor: var(--primary-theme-text-color); --navbarHoverColor: var(--warning-color); --navbarActiveColor: var(--primary-theme-text-color); --navbarBorder: thin solid; --navbarBorderColor: var(--neutral-dark-grey-color); --navbarFontWeight: 500; --footerTextColor: var(--primary-theme-text-color); --footerLinkHover: var(--primary-theme-text-color); --footerHeadingColor: var(--primary-theme-text-color); --footerHeadingFontSize: 14px; --footerLinkFontSize: 12px; --footerBackground: var(--primary-theme-color); }