@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', '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,
#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;
}

/* 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;
}

.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 {
  background-image: none !important;
  padding: 4px 4px 4px 4px !important;
  background-color: var(--input-background-focus-color) !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;
  left: 10px !important;
  width: calc(100%) !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;
  color: var(--text-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;
  color: var(--content-text-color) !important;
}

.rightSideHeaderDiv.HeaderText {
  font-family: var(--font-family-main) !important;
  color: var(--content-text-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;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hMenuKnap,
  .hMenuKnapIcon {
    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;
  }