@import url('https://fonts.cdnfonts.com/css/kontrapunkt-miki');

/*
====================================================================================
UCPlus Custom Design CSS
====================================================================================

Author: Kim Hjort, inLogic
Customer: UCPlus
Created: February 2026

Description:
This stylesheet provides a custom design for the UCPlus web application, following the design guidelines provided by the customer. It defines the color palette, typography, button styles, layout adjustments, and various UI enhancements to ensure a consistent and modern look across the platform.

How to Use:
- Link or import this CSS file into your HTML or web application to apply the UCPlus custom design.
- The file uses CSS variables (custom properties) for easy theme management and consistency.
- Most styles are applied via class, id, or element selectors that match the UCPlus web structure.

How to Extend:
- To adjust the theme, modify the CSS variables in the :root selector at the top of the file.
- Add new styles below the existing rules, following the established naming conventions and structure.
- For new UI components, use the same font family and color variables to maintain design consistency.
- If you need to override existing styles, use more specific selectors or add !important as needed.

Support:
For questions or further customization, please contact Kim Hjort at inLogic.
====================================================================================
*/

:root {
  --background-color: #2e7999;
  --border-radius-main-panel: 15px;
  --border-radius-popup: 10px;
  --font-family-main: 'Kontrapunkt Miki', 'Gill Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --border-radius-buttons: 5px;
  --button-background-color: #ffffff;
  --button-border-color: #2e7999;
  --button-text-color: #000000;

  --button-hover-background-color: #e0ebef;
  --button-hover-border-color: #2e7999;
  --button-hover-text-color: #000000;

  --content-background-color: #ffffff;
  --content-text-color: #000000;

  --text-color: #ffffff;
  --input-text-color: #000000;
  --input-background-color: #e0ebef;
  --input-background-focus-color: #ffffff;

  /* new variables */
  --transition-duration-fast: 180ms;
  --transition-duration-medium: 200ms;
  --transition-ease: ease-in-out;
  --icon-color: #ff8f33;
  --icon-opacity-default: 0.7;
  --icon-opacity-hover: 1;
  --button-hover-lift: -2px;
  --search-button-margin-left: 415px;
  --img-button-path: '../images/button_images';
  --border-width: 1px;
  --lbl-schoolname-size: 36px;
  --popup-header-size: 20px;
  --input-padding: 4px;
  --button-padding: 3px 5px;
  --icon-transition-duration: var(--transition-duration-fast);
  --icon-size: 24px;
}

body {
  background-color: var(--background-color) !important;
  font-family: var(--font-family-main) !important;
}

.width-fix {
  background-image: none !important;
}

.TopLeftTopBar {
  background-image: none !important;
  background-color: var(--background-color) !important;
}

.TopRightTopBar {
  background-image: none !important;
  background-color: var(--background-color) !important;
}

#contentCell {
  margin-top: 20px !important;
  background-color: var(--content-background-color) !important;
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-radius: var(--border-radius-main-panel);
  overflow: hidden;
}

.PageHeader,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color) !important;
  font-family: var(--font-family-main) !important;
}

/* top panel styling */
#LogOutLink {
  color: var(--text-color) !important;
}

#LogOutLink:hover {
  text-decoration: underline !important;
}

.CenterTopBar {
  border-top-left-radius: var(--border-radius-main-panel) !important;
  border-top-right-radius: var(--border-radius-main-panel) !important;
  background-image: none !important;
  background-color: var(--content-background-color) !important;
}

#FunctionMenu_module_header {
  font-family: var(--font-family-main) !important;
  font-size: var(--popup-header-size) !important;
  font-weight: bold !important;
  color: var(--button-border-color) !important;
}

#FunctionMenu_welcome_text p {
  color: var(--content-text-color) !important;
}

.topRow {
  background-color: var(--background-color) !important;
  background-image: none !important;
  color: var(--text-color) !important;
}

/* Menu button styling */
.hMenuKnap {
  background-image: none !important;
  background-color: var(--button-background-color) !important;
  border: 1px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-popup) !important;
}

.hMenuKnap:hover {
  background-color: var(--button-hover-background-color) !important;
  border: 1px solid var(--button-hover-border-color) !important;
  color: var(--button-hover-text-color) !important;
  cursor: pointer !important;
}

/* smoother transitions for menu buttons while keeping icon opacity separate */
.hMenuKnap {
  transition:
    background-color var(--transition-duration-medium) var(--transition-ease),
    border-color var(--transition-duration-medium) var(--transition-ease),
    color var(--transition-duration-medium) var(--transition-ease),
    transform var(--transition-duration-medium) var(--transition-ease);
  will-change: background-color, border-color, color, transform;
}

.hMenuKnap:hover {
  transform: translateY(var(--button-hover-lift));
}

.hMenuKnapHl {
  font-family: var(--font-family-main) !important;
  font-weight: bold !important;
  color: var(--button-text-color) !important;
}

.hMenuKnapText {
  font-family: var(--font-family-main) !important;
  font-weight: normal !important;
  color: var(--button-text-color) !important;
}

.customMenuKnap {
  background-image: none !important;
  background-color: var(--button-background-color) !important;
  font-family: var(--font-family-main) !important;
  font-weight: normal !important;
  color: var(--button-text-color) !important;
  font-size: initial !important;
  font-weight: normal !important;
}

.customMenuKnapText {
  color: var(--button-hover-text-color) !important;
  cursor: pointer !important;
}

.customMenuKnap:hover .customMenuKnapText {
  text-decoration: underline !important;
}

/* Search button styling */
.SearchButton {
  margin-left: var(--search-button-margin-left) !important;
  padding: 0 !important;
}

.SearchKnap {
  background-image: none !important;
  background-color: #2e7999 !important;
  /* border: var(--border-width) solid var(--button-border-color) !important; */
  border-radius: var(--border-radius-buttons) !important;
  color: #fff !important;
  font-family: var(--font-family-main) !important;
  padding: var(--button-padding) !important;
  margin-left: 0px !important;
  width: 125px !important;
  height: 30px !important;
  font-size: initial !important;
  font-weight: normal !important;
}

/* Search button hover effect */
.SearchKnap:hover {
  background-color: var(--button-hover-background-color) !important;
  border: 1px solid var(--button-hover-border-color) !important;
  color: var(--button-hover-text-color) !important;
  cursor: pointer !important;
}

/* Footer styling */
#footer {
  background-image: none !important;
}

#FooterTextLbl {
  color: var(--text-color) !important;
}

#footer_line {
  background-image: none !important;
}

#logoRow {
  height: 80px !important;
}

/* Styling the school name label */
#lblDisplaySchoolName {
  font-family: var(--font-family-main) !important;
  font-size: var(--lbl-schoolname-size) !important;
  color: var(--button-background-color) !important;
  margin-bottom: 10px !important;
  color: var(--text-color) !important;
  margin: 10px 0 20px 0 !important;
  /* padding: 10px !important; */
}

.SearchArea {
  border: 0px solid var(--button-border-color) !important;
}

.StartSearchStyle,
.FinalSearchStyle,
#FunctionMenu_searchcontrol_SearchText {
  background-image: none !important;
  background-color: var(--input-background-color) !important;
  /* border: var(--border-width) solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important; */
  /* padding: var(--input-padding) !important;
  font-family: var(--font-family-main) !important;
  color: var(--input-text-color) !important; */
}

.StartSearchStyle:active,
.FinalSearchStyle:active,
#FunctionMenu_searchcontrol_SearchText:active,
.StartSearchStyle:focus,
.FinalSearchStyle:focus,
#FunctionMenu_searchcontrol_SearchText:focus,
#FunctionMenu_searchcontrol_SearchText:focus-visible {
  border: var(--border-width) solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  background-image: none !important;
  background-color: var(--input-background-focus-color) !important;
  /* padding: var(--input-padding) !important;
  font-family: var(--font-family-main) !important;
  color: var(--input-text-color) !important; */
}

#FunctionMenu_searchcontrol_SearchOption {
  display: none !important;
}

.completionListElement {
  border-left: 1px solid var(--button-border-color) !important;
  border-right: 1px solid var(--button-border-color) !important;
  font-family: var(--font-family-main) !important;
  border-bottom: 1px solid var(--button-border-color) !important;
  max-width: 454px !important;
  background-color: var(--content-background-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  padding: 0 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
}

/* Main search autocomplete - position correctly */
#FunctionMenu_searchcontrol_SearchAutoCompleteExtender_completionListElem {
  left: 10px !important;
}

/* Timetable search autocomplete - slight adjustment */
#SearchAutoCompleteExtender_completionListElem {
  margin-left: 2px !important;
  margin-top: 8px !important;
}

/* Hiding specific elements */
#logo {
  display: none !important;
}

#lblSchoolAddress {
  display: none !important;
}

#HelpContent_support_header {
  display: none !important;
}

#HelpContent_support_body {
  display: none !important;
}

#HelpContent_user_info {
  display: none !important;
}

/* No id or class selectors available, using attribute selector as a workaround */
[style*="background-image: url('../Images/Topframe_buttomshade.png');"] {
  display: none !important;
}

/* Popups */
.MainContent,
.MainContent_Big {
  background-image: none !important;
  background-color: var(--content-background-color) !important;
  border: 1px solid var(--button-border-color) !important;
}

.popup_contentTable {
  border-radius: var(--border-radius-popup) !important;
  background-image: none !important;
}

.popup_HeaderLogoCell {
  display: none !important;
}

.popup_HeaderTextCell {
  font-family: var(--font-family-main) !important;
  font-size: var(--popup-header-size) !important;
  font-weight: bold !important;
  color: var(--button-border-color) !important;
}

.orange_buttonNew {
  font-family: var(--font-family-main) !important;
  box-shadow: none !important;
}

input[type='text'],
input[type='password'],
textarea,
select {
  background-color: var(--input-background-color) !important;
  border: var(--border-width) solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  padding: var(--input-padding) !important;
  font-family: var(--font-family-main) !important;
  color: var(--input-text-color) !important;
}

input[type='text']:focus,
input[type='password']:focus,
textarea:focus,
select:focus,
input[type='text']:active,
input[type='password']:active,
textarea:active,
select:active {
  background-color: var(--input-background-focus-color) !important;
  border: 1px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  padding: var(--input-padding) !important;
  font-family: var(--font-family-main) !important;
  color: var(--input-text-color) !important;
}

.hMenuKnapIcon,
.hMenuKnapNewIcon {
  opacity: var(--icon-opacity-default) !important;
  transition:
    opacity var(--transition-duration-fast) var(--transition-ease),
    filter var(--transition-duration-fast) var(--transition-ease) !important;
  will-change: opacity, filter;
}

.hMenuKnapIcon i,
.hMenuKnapNewIcon i {
  color: var(--icon-color) !important;
}

/* only change icon opacity when the parent button is hovered */
.hMenuKnap:hover .hMenuKnapIcon,
.hMenuKnap:hover .hMenuKnapNewIcon {
  opacity: var(--icon-opacity-hover) !important;
  color: var(--icon-color) !important;
}

a.hMenuKnap:hover i {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2)) !important;
  color: var(--icon-color) !important;
}

.HeaderText {
  font-family: var(--font-family-main) !important;
  font-size: var(--popup-header-size) !important;
  font-weight: bold !important;
  color: var(--button-border-color) !important;
}

#DisplayResult_customHeadline .HeaderText,
#frontpage_headline .HeaderText {
  color: var(--content-text-color) !important;
}

#DisplayResult_SearchResultCtl_DayHeader.HeaderText {
  color: var(--content-text-color) !important;
}

#FunctionMenu_module_text p {
  color: var(--content-text-color) !important;
}

#HeaderLeftDiv.HeaderText {
  font-family: var(--font-family-main) !important;
  font-size: var(--popup-header-size) !important;
  font-weight: bold !important;
  color: var(--button-border-color) !important;
}

.rightSideHeaderDiv.HeaderText {
  font-family: var(--font-family-main) !important;
  font-size: var(--popup-header-size) !important;
  font-weight: bold !important;
  color: var(--button-border-color) !important;
}

h2 > span {
  color: var(--content-text-color) !important;
}

.PopupDialogStyle {
  background-image: none !important;
  background-color: var(--content-background-color) !important;
  border: 1px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-popup) !important;
  padding: calc(var(--input-padding) * 4) !important; /* 16px total padding for better spacing in popups */
  font-family: var(--font-family-main) !important;
  color: var(--content-text-color) !important;
}

/* PlateBackgroundOnMenuFunctions on list pages */
/* .RightSidePlateMenu {
  border:none !important;
  background-image: none !important;
  background-color: var(--content-background-color) !important;
} */

/* ============================================================================
   Web Timetable Styling
   ============================================================================
   Comprehensive styling for the web timetable calendar view with navigation,
   appointments, and interactive controls following UCPlus design language.
   ============================================================================ */

/* Logo and Language Bar */
#logolanguagebar {
  background-color: var(--background-color) !important;
  padding: 10px 0 !important;
  border-bottom: 2px solid var(--button-border-color) !important;
}

#logolanguagebar table {
  width: 100% !important;
}

#LogoDiv {
  padding: 5px !important;
  display: none !important;
}

#LogoImage {
  max-height: 50px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

/* School name and address styling */
#lblDisplaySchoolName {
  font-family: var(--font-family-main) !important;
  font-size: var(--lbl-schoolname-size) !important;
  color: var(--text-color) !important;
  font-weight: 600 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}

#lblSchoolAddress {
  font-family: var(--font-family-main) !important;
  color: var(--text-color) !important;
  opacity: 0.9 !important;
}

/* Period label in top bar */
.PeriodLabel_Top,
#TopPeriodText {
  font-family: var(--font-family-main) !important;
  color: var(--text-color) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Navigation and Search Bar */
#navsearchbar {
  background-color: var(--content-background-color) !important;
  padding: 15px 10px !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* Period Panel - remove base background image */
.PeriodPanel,
#PeriodPanel {
  background-image: none !important;
  background-color: var(--content-background-color) !important;
  padding: 15px 10px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: var(--border-radius-buttons) !important;
  margin: 10px !important;
  margin-top: 0 !important;
}

#PeriodPanel table {
  width: 100% !important;
  background-color: transparent !important;
}

/* Period navigation label */
.PeriodLabel,
#PeriodText {
  font-family: var(--font-family-main) !important;
  color: var(--button-border-color) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 15px !important;
}

/* Navigation buttons */
#PeriodBackButton,
#TodayButton,
#PeriodNextButton,
#DayViewButton,
#SchemaViewButton,
#WeekViewButton,
#MonthViewButton,
#PrintViewButton {
  border: 2px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  background-color: var(--button-background-color) !important;
  padding: 8px !important;
  cursor: pointer !important;
  transition: all var(--transition-duration-fast) var(--transition-ease) !important;
  opacity: var(--icon-opacity-default) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#PeriodBackButton:hover,
#TodayButton:hover,
#PeriodNextButton:hover,
#DayViewButton:hover,
#SchemaViewButton:hover,
#WeekViewButton:hover,
#MonthViewButton:hover,
#PrintViewButton:hover {
  background-color: var(--button-hover-background-color) !important;
  opacity: var(--icon-opacity-hover) !important;
  transform: translateY(var(--button-hover-lift)) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Search input in timetable */
#SearchText {
  font-family: var(--font-family-main) !important;
  font-size: 1.3em !important;
  padding: 8px !important;
  border: 0 !important;
  background-color: var(--input-background-color) !important;
  background-image: none !important;
  transition: background-color var(--transition-duration-fast) var(--transition-ease) !important;
}

#SearchText:focus {
  background-color: var(--input-background-focus-color) !important;
  outline: none !important;
}

/* Search dropdown (option select) */
#SearchOption {
  font-family: var(--font-family-main) !important;
  font-size: 1.3em !important;
  padding: 8px !important;
  border: 0 !important;
  border-left: 1px solid #ccc !important;
  background-color: #f0f5df !important;
  color: #666666 !important;
}

/* Search area wrapper divs - override inline styles */
#navsearchbar div[style*='display: flex'],
#PeriodPanel div[style*='display: flex'] {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Search input wrapper - left border */
#navsearchbar div[style*='border: 5px solid'][style*='border-right: 0px'],
#PeriodPanel div[style*='border: 5px solid'][style*='border-right: 0px'] {
  border: 2px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  margin-right: 10px !important;
  max-width: 450px !important;
  overflow: hidden !important;
}

/* Search dropdown wrapper - right border */
#navsearchbar div[style*='border: 5px solid'][style*='border-left: 0px'],
#PeriodPanel div[style*='border: 5px solid'][style*='border-left: 0px'] {
  border: 2px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  margin-right: 10px !important;
  overflow: hidden !important;
}

/* Calendar Placeholder */
#SchemaPlaceHolder {
  background-color: var(--content-background-color) !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: calc(100vh - 200px) !important;
}

#CalendarPlaceHolder {
  background-color: var(--content-background-color) !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: var(--border-radius-popup) !important;
  margin: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  min-height: calc(100vh - 220px) !important;
}

/* Header Table - Week View Header */
#HeaderTable {
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: var(--content-background-color) !important;
  border-bottom: 2px solid var(--button-border-color) !important;
}

#HeaderTable tr {
  background-color: var(--content-background-color) !important;
}

/* Time column header cell */
.weekViewHeader_TimeCell {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: 1px solid #e0e0e0 !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Regular day header cells */
.weekViewHeader_Cell {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: 1px solid #e0e0e0 !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  transition: background-color var(--transition-duration-fast) var(--transition-ease) !important;
}

.weekViewHeader_Cell:hover {
  background-color: #d0dfe3 !important;
}

.weekViewHeader_Cell a {
  color: var(--button-border-color) !important;
  text-decoration: none !important;
  display: block !important;
  transition: color var(--transition-duration-fast) var(--transition-ease) !important;
}

.weekViewHeader_Cell a:hover {
  color: var(--icon-color) !important;
}

/* Current day header - highlighted */
.weekViewHeader_Cell_Current {
  background: linear-gradient(to bottom, var(--background-color) 0%, #267185 100%) !important;
  background-image: linear-gradient(to bottom, var(--background-color) 0%, #267185 100%) !important;
  border-right: 1px solid var(--background-color) !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: var(--text-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
}

.weekViewHeader_Cell_Current a {
  color: var(--text-color) !important;
  text-decoration: none !important;
  display: block !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.weekViewHeader_Cell_last {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: none !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Day View Header Cells */
.dayViewHeader_TimeCell {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: 1px solid #e0e0e0 !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.dayViewHeader_Cell {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: 1px solid #e0e0e0 !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  transition: background-color var(--transition-duration-fast) var(--transition-ease) !important;
}

.dayViewHeader_Cell:hover {
  background-color: #d0dfe3 !important;
}

.dayViewHeader_Cell_Current {
  background: linear-gradient(to bottom, var(--background-color) 0%, #267185 100%) !important;
  background-image: linear-gradient(to bottom, var(--background-color) 0%, #267185 100%) !important;
  border-right: 1px solid var(--background-color) !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: var(--text-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Schema View Header Cells */
.schemaViewHeader_TimeCell {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: 1px solid #e0e0e0 !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.schemaViewHeader_Cell {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: 1px solid #e0e0e0 !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  transition: background-color var(--transition-duration-fast) var(--transition-ease) !important;
}

.schemaViewHeader_Cell:hover {
  background-color: #d0dfe3 !important;
}

.schemaViewHeader_Cell_Current {
  background: linear-gradient(to bottom, var(--background-color) 0%, #267185 100%) !important;
  background-image: linear-gradient(to bottom, var(--background-color) 0%, #267185 100%) !important;
  border-right: 1px solid var(--background-color) !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: var(--text-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Month View Header Cells */
.monthViewHeader_TimeCell {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: 1px solid #e0e0e0 !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.monthViewHeader_Cell {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: 1px solid #e0e0e0 !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  transition: background-color var(--transition-duration-fast) var(--transition-ease) !important;
}

.monthViewHeader_Cell:hover {
  background-color: #d0dfe3 !important;
}

.monthViewHeader_Cell_Current {
  background: linear-gradient(to bottom, var(--background-color) 0%, #267185 100%) !important;
  background-image: linear-gradient(to bottom, var(--background-color) 0%, #267185 100%) !important;
  border-right: 1px solid var(--background-color) !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: var(--text-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
}

.monthViewHeader_Cell_last {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  border-right: none !important;
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--button-border-color) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* All-Day Appointments Section */
#AllDayAppointments {
  max-height: 100px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

.DayViewAllDayTable,
.SchemaViewAllDayTable,
.WeekViewAllDayTable {
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: transparent !important;
}

.weekViewAlldayEvents {
  border-right: 1px solid #e0e0e0 !important;
  padding: 4px !important;
  vertical-align: top !important;
  background-color: #f8f9fa !important;
}

/* Inner Calendar - Main Scrollable Area */
#innerCalendar {
  min-height: calc(100vh - 350px) !important;
  max-height: calc(100vh - 350px) !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  position: relative !important;
  background-color: var(--content-background-color) !important;
}

/* Week Table */
#WeekViewTable,
.WeekTable {
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: var(--content-background-color) !important;
}

/* Time column holder */
.weekTimeHolderCell {
  background-color: var(--button-hover-background-color) !important;
  border-right: 2px solid #e0e0e0 !important;
  vertical-align: top !important;
  width: 75px !important;
  min-width: 75px !important;
  position: relative !important;
}

/* Day column holders */
.weekDayHolderCell {
  border-right: 1px solid #e0e0e0 !important;
  vertical-align: top !important;
  position: relative !important;
  background-color: var(--content-background-color) !important;
}

/* Current day column - highlighted */
.weekDayHolderCell_Current {
  border-right: 2px solid var(--background-color) !important;
  vertical-align: top !important;
  position: relative !important;
  background-color: #fafbfb !important;
}

.weekDayHolderCell_last {
  border-right: none !important;
  vertical-align: top !important;
  position: relative !important;
  background-color: var(--content-background-color) !important;
}

/* Hour background stripes - Off hours (outside work hours) */
.dayBackGround_OffHour_Even {
  height: 30px !important;
  background-color: #f5f5f5 !important;
  border-top: 1px solid #ececec !important;
}

.dayBackGround_OffHour_Odd {
  height: 30px !important;
  background-color: #fafafa !important;
}

/* Hour background stripes - On hours (work hours) */
.dayBackGround_OnHour_Even {
  height: 30px !important;
  background-color: #ffffff !important;
  border-top: 1px solid #e8e8e8 !important;
}

.dayBackGround_OnHour_Odd {
  height: 30px !important;
  background-color: #fcfcfc !important;
}

/* Current time indicator line */
#current_time {
  height: 2px !important;
  background-color: var(--icon-color) !important;
  position: relative !important;
  z-index: 10 !important;
  box-shadow: 0 1px 3px rgba(255, 143, 51, 0.5) !important;
}

/* Appointment Boxes */
#innerCalendar div[onmouseover*='ddrivetip'] {
  cursor: pointer !important;
  border-radius: var(--border-radius-buttons) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: all var(--transition-duration-fast) var(--transition-ease) !important;
}

#innerCalendar div[onmouseover*='ddrivetip']:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transform: scale(1.02) !important;
  z-index: 100 !important;
}

/* Appointment content table */
.AppointmentBoxContent {
  width: 100% !important;
  height: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-family-main) !important;
  background-color: transparent !important;
}

.AppointmentBoxContent td {
  padding: 3px !important;
  font-size: 11px !important;
  color: var(--content-text-color) !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Appointment color bar (left side) */
.AppointmentBoxContent td[rowspan='6'] {
  width: 7px !important;
  min-width: 7px !important;
  max-width: 7px !important;
  padding: 0 !important;
}

/* Appointment icons */
.AppointmentIcon {
  width: 12px !important;
  height: 12px !important;
  margin-right: 4px !important;
  vertical-align: middle !important;
  opacity: 0.8 !important;
}

/* Action Popup Menu */
#ActionDiv {
  background-color: var(--content-background-color) !important;
  border: 2px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-popup) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  font-family: var(--font-family-main) !important;
  z-index: 99999999 !important;
}

#ActionHeaderTabel {
  width: 100% !important;
  background-color: var(--button-hover-background-color) !important;
  border-bottom: 2px solid var(--button-border-color) !important;
  padding: 8px !important;
}

#ActionHeaderActivity {
  font-family: var(--font-family-main) !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: var(--button-border-color) !important;
}

#ActionHeaderTime {
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  color: var(--button-border-color) !important;
}

#ActionDivCloseButton {
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: opacity var(--transition-duration-fast) var(--transition-ease) !important;
}

#ActionDivCloseButton:hover {
  opacity: 1 !important;
}

#ActionTabel td {
  font-family: var(--font-family-main) !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  color: var(--content-text-color) !important;
  transition: background-color var(--transition-duration-fast) var(--transition-ease) !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

#ActionTabel td:hover {
  background-color: var(--button-hover-background-color) !important;
  color: var(--button-border-color) !important;
}

/* Homework Links Table */
#HomeworkLinksTable {
  border-top: 2px solid var(--button-border-color) !important;
  padding-top: 8px !important;
  margin-top: 8px !important;
}

#HomeworkLinksTable td {
  padding: 8px !important;
  font-family: var(--font-family-main) !important;
}

#lblHeadline {
  font-family: var(--font-family-main) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: var(--button-border-color) !important;
}

#lblLinks {
  font-family: var(--font-family-main) !important;
  font-size: 12px !important;
  color: var(--content-text-color) !important;
}

#lblLinks a {
  color: var(--button-border-color) !important;
  text-decoration: none !important;
  transition: color var(--transition-duration-fast) var(--transition-ease) !important;
  border-bottom: 1px solid transparent !important;
}

#lblLinks a:hover {
  color: var(--icon-color) !important;
  border-bottom-color: var(--icon-color) !important;
}

/* Tooltip styling */
#dhtmltooltip {
  background-color: var(--content-background-color) !important;
  border: 2px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  padding: 12px !important;
  font-family: var(--font-family-main) !important;
  color: var(--content-text-color) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  z-index: 999999999 !important;
  position: absolute !important;
}

#dhtmlpointer {
  display: none !important;
}

/* Popup dialogs */
.PopupDialogStyle {
  background-color: var(--content-background-color) !important;
  border: 2px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-popup) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  padding: 20px !important;
  font-family: var(--font-family-main) !important;
}

.noneSelectedHeaderText,
.ConfirmHeaderText {
  font-family: var(--font-family-main) !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: var(--button-border-color) !important;
  margin-bottom: 15px !important;
}

/* iFrame popup style */
.iFramePopupStyle {
  border: none !important;
  border-radius: var(--border-radius-popup) !important;
}

/* Modal background */
.modalBackground {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hMenuKnap,
  .hMenuKnapIcon,
  #PeriodBackButton,
  #TodayButton,
  #PeriodNextButton,
  #DayViewButton,
  #SchemaViewButton,
  #WeekViewButton,
  #MonthViewButton,
  #PrintViewButton,
  .weekViewHeader_Cell,
  #innerCalendar div[onmouseover*='ddrivetip'],
  #ActionTabel td,
  #lblLinks a {
    transition: none !important;
    transform: none !important;
  }
}

/* Telerik controls */
.rlvEmpty h2 {
  color: var(--input-text-color) !important;
}

/* Misc adjustments for specific pages or components can be added below, following the same structure and using the defined variables for consistency. */

.popup_inputColumn {
  padding-top: 8px !important;
}

/* Option 1: Using the same style for both selected and unselected pane headers, as they are visually similar in the provided design. */

/* .PaneHeader {
    margin-top: 7px;
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    padding: var(--input-padding) !important;
    border: 1px solid var(--button-border-color) !important;
    background-image: none !important;
    background-repeat: no-repeat;
    background-position: right;
}

.PaneHeader_UnSelected {
    margin-top: 7px;
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    padding: var(--input-padding) !important;
    border: 1px solid var(--button-border-color) !important;
    background-image: none !important;
    background-repeat: no-repeat;
    background-position: right;
} */

/* Option 2: If you want to differentiate between selected and unselected pane headers, you can use the following styles instead. */

.PaneHeader {
  margin-top: 7px;
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
  padding: var(--input-padding) !important;
  border: 1px solid var(--button-border-color) !important;
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: right;
}

.PaneHeader_UnSelected {
  margin-top: 7px;
  background-color: var(--content-background-color) !important;
  color: var(--content-text-color) !important;
  padding: var(--input-padding) !important;
  border: 1px solid var(--button-border-color) !important;
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: right;
}

/* Option 3: If White background for pane headers is desired */

/* .PaneHeader {
  margin-top: 7px;
  background-color: var(--content-background-color) !important;
  color: var(--content-text-color) !important;
  padding: var(--input-padding) !important;
  border: 1px solid var(--button-border-color) !important;
  background-image: url('../images/selected-pane-header-bg.png') !important;
  background-repeat: no-repeat;
  background-position: right;
}

.PaneHeader_UnSelected {
  margin-top: 7px;
  background-color: var(--content-background-color) !important;
  color: var(--content-text-color) !important;
  padding: var(--input-padding) !important;
  border: 1px solid var(--button-border-color) !important;
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: right;
} */

/* Scrollbar styling */
/* Firefox (uncomment to work in Firefox) */
/* * {
  scrollbar-width: thin;
  scrollbar-color: #397524 #DFE9EB;
} */

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

*::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #dfe9eb;
  margin-top: 10px;
  margin-bottom: 15px;
}

*::-webkit-scrollbar-track:hover {
  background-color: #b8c0c2;
}

*::-webkit-scrollbar-track:active {
  background-color: #b8c0c2;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #2e7999;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #3c8bad;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #367b99;
}

/* Avatar Frame Styling */
#pict {
  text-align: center !important;
  border-radius: var(--border-radius-popup) !important;
  border: 2px solid var(--button-border-color) !important;
  padding: 0px !important;
  background-color: transparent !important;
  display: inline-block !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
}

#pict img,
#ctl09_pictureHolder {
  border-radius: 0 !important;
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  display: block !important;
  background-color: var(--content-background-color) !important;
}

/* ============================================================================
   Search Results Dropdown Styling
   ============================================================================
   Styles for the dynamic search autocomplete dropdown that displays search
   results with user types, login names, display names, and result counts.
   ============================================================================ */

/* AJAX AutoCompleteExtender list item styling */
.listItem,
.completionListElement .listItem,
.completionListElement li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: var(--content-background-color) !important;
  background-image: none !important;
  background: var(--content-background-color) !important;
  transition: background-color 80ms var(--transition-ease) !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* Direct hover - fallback for AJAX */
.listItem:hover,
.completionListElement .listItem:hover,
.completionListElement li:hover {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  background: var(--button-hover-background-color) !important;
}

/* Override AJAX AutoCompleteExtender highlighted item - THIS CREATES THE HOVER EFFECT */
.highlightedListItem,
.completionListElement .highlightedListItem,
.completionListElement li.highlightedListItem {
  background-color: var(--button-hover-background-color) !important;
  background-image: none !important;
  background: var(--button-hover-background-color) !important;
  transition: background-color 80ms var(--transition-ease) !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* Ensure hover background shows through ALL nested elements */
.listItem *,
.listItem table,
.listItem table tr,
.listItem table td,
.listItem table tbody,
.highlightedListItem *,
.highlightedListItem table,
.highlightedListItem table tr,
.highlightedListItem table td,
.highlightedListItem table tbody,
.completionListElement .listItem *,
.completionListElement .listItem table,
.completionListElement .listItem table tr,
.completionListElement .listItem table td,
.completionListElement .highlightedListItem *,
.completionListElement .highlightedListItem table,
.completionListElement .highlightedListItem table tr,
.completionListElement .highlightedListElement table td {
  background-color: transparent !important;
  background-image: none !important;
}

/* Individual search result items - table container */
.completionListElement table,
.resultTable {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

.completionListElement table tr,
.completionListElement table td,
.completionListElement table tbody,
.resultTable tr,
.resultTable td,
.resultTable tbody {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
}

/* Type column - displays user type (student, teacher, etc.) */
/* When type changes - add visual separation with border and spacing */
.typeColumn {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  padding: 8px 12px 4px 8px !important;
  font-family: var(--font-family-main) !important;
  font-size: 10px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  color: var(--button-border-color) !important;
  text-align: right !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: 2px solid var(--button-border-color) !important;
}

/* Type column rest - same type continues, no separation */
.typeColumnRest {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  padding: 4px 12px 4px 8px !important;
  font-family: var(--font-family-main) !important;
  font-size: 10px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  color: var(--button-border-color) !important;
  text-align: right !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
}

/* Result column - when type changes, add matching top border */
.resultColumn {
  padding: 8px 8px 4px 8px !important;
  font-family: var(--font-family-main) !important;
  vertical-align: middle !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: 2px solid var(--button-border-color) !important;
}

/* Result column rest - same type continues */
.resultColumnRest {
  padding: 4px 8px !important;
  font-family: var(--font-family-main) !important;
  vertical-align: middle !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
}

/* Login/username styling */
.loginStyle {
  font-family: var(--font-family-main) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #666666 !important;
  margin: 0 !important;
  padding: 0 0 1px 0 !important;
  line-height: 1.2 !important;
}

/* Hidden context key span inside login */
.loginStyle span[style*='visibility:hidden'] {
  display: none !important;
}

/* Display name styling */
.displaynameStyle {
  font-family: var(--font-family-main) !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: var(--content-text-color) !important;
  margin: 0 !important;
  padding: 1px 0 0 0 !important;
  line-height: 1.3 !important;
}

/* Search footer - result count and instructions */
.SearchFooter {
  background-color: var(--input-background-color) !important;
  color: var(--button-border-color) !important;
  font-family: var(--font-family-main) !important;
  font-size: 12px !important;
  font-weight: normal !important;
  text-align: center !important;
  padding: 8px !important;
  margin: 0 !important;
  border-top: var(--border-width) solid var(--button-border-color) !important;
  line-height: 1.5 !important;
  cursor: default !important;
}

/* Footer should not highlight on hover */
.completionListElement li:has(.SearchFooter),
.completionListElement .listItem:has(.SearchFooter) {
  background-color: var(--input-background-color) !important;
  cursor: default !important;
  border-bottom: none !important;
}

/* Prevent footer from being highlighted */
.completionListElement li.highlightedListItem:has(.SearchFooter) {
  background-color: var(--input-background-color) !important;
  cursor: default !important;
}

/* Keyboard navigation accessibility - focus state */
.completionListElement table tr:focus-visible {
  background-color: var(--button-hover-background-color) !important;
  outline: 2px solid var(--button-border-color) !important;
  outline-offset: -2px !important;
}

/* Ensure smooth transitions respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .completionListElement table tr {
    transition: none !important;
  }
}