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

: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-background-color: #e0ebef;
  --input-background-focus-color: #ffffff;

  /* new variables */
  --transition-duration-fast: 180ms;
  --transition-duration-medium: 200ms;
  --transition-ease: ease-in-out;
  --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: var(--button-background-color) !important;
  border: var(--border-width) solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important;
  color: var(--button-border-color) !important;
  font-family: var(--font-family-main) !important;
  padding: var(--button-padding) !important;
  margin-left: 0px !important;
  height: initial !important;
  width: initial !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;
  font-weight: bold !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-color: var(--input-background-color) !important;
  background-image: none !important;
  /* border: 1px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important; */
  padding: 4px 4px 4px 4px !important;
  font-family: var(--font-family-main) !important;
}

.StartSearchStyle:active,
.FinalSearchStyle:active,
#FunctionMenu_searchcontrol_SearchText:active,
.StartSearchStyle:focus,
.FinalSearchStyle:focus,
#FunctionMenu_searchcontrol_SearchText:focus {
  background-image: none !important;
  background-color: var(--content-background-color) !important;
  /* border: 1px solid var(--button-border-color) !important;
  border-radius: var(--border-radius-buttons) !important; */
  padding: 4px 4px 4px 4px !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;
}

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

/* keep only :hover selectors for menu icons (remove non-:hover selectors) */

a.hMenuKnap:hover .Sms,
a.RSideKnap:hover .Sms {
  background: url(../images/button_images/IconMobil.gif);
}

a.hMenuKnap:hover .SmsLog,
a.RSideKnap:hover .SmsLog {
  background: url(../images/button_images/IconSMSLog.png);
}

a.hMenuKnap:hover .Grades,
a.RSideKnap:hover .Grades {
  background: url(../images/button_images/IconKarakter.gif);
}

a.hMenuKnap:hover .Guest,
a.RSideKnap:hover .Guest {
  background: url(../images/button_images/IconGuest.gif);
}

a.hMenuKnap:hover .User,
a.RSideKnap:hover .User {
  background: url(../images/button_images/IconProfile.gif);
}

a.hMenuKnap:hover .SharedFolder,
a.RSideKnap:hover .SharedFolder {
  background: url(../images/button_images/IconSharedFolder.gif);
}

a.hMenuKnap:hover .MultipleUser,
a.RSideKnap:hover .MultipleUser {
  background: url(../images/button_images/IconMultipleUser.gif);
}

a.hMenuKnap:hover .Schedule,
a.RSideKnap:hover .Schedule {
  background: url(../images/button_images/IconSchedule.gif);
}

a.hMenuKnap:hover .Print,
a.RSideKnap:hover .Print {
  background: url(../images/button_images/IconPrint.gif);
}

a.hMenuKnap:hover .DeactivateUser,
a.RSideKnap:hover .DeactivateUser {
  background: url(../images/button_images/IconDeactivateUser.gif);
}

a.hMenuKnap:hover .Off,
a.RSideKnap:hover .Off {
  background: url(../images/button_images/IconOff.gif);
}

a.hMenuKnap:hover .RecieveSchedule,
a.RSideKnap:hover .RecieveSchedule {
  background: url(../images/button_images/IconRecieveSchedule.gif);
}

a.hMenuKnap:hover .CellNumber,
a.RSideKnap:hover .CellNumber {
  background: url(../images/button_images/IconCellNumber.gif);
}

a.hMenuKnap:hover .Exam,
a.RSideKnap:hover .Exam {
  background: url(../images/button_images/IconEksamen.gif);
}

a.hMenuKnap:hover .EmailAdress,
a.RSideKnap:hover .EmailAdress {
  background: url(../images/button_images/IconEmailAdress.gif);
}

a.hMenuKnap:hover .Password,
a.RSideKnap:hover .Password {
  background: url(../images/button_images/IconPassword.gif);
}

a.hMenuKnap:hover .Search,
a.RSideKnap:hover .Search {
  background: url(../images/button_images/IconSearch.gif);
}

a.hMenuKnap:hover .PasswordOthers,
a.RSideKnap:hover .PasswordOthers {
  background: url(../images/button_images/IconPasswordOthers.gif);
}

a.hMenuKnap:hover .Edit,
a.RSideKnap:hover .Edit {
  background: url(../images/button_images/IconEdit.gif);
}

a.hMenuKnap:hover .Add,
a.RSideKnap:hover .Add {
  background: url(../images/button_images/IconAdd.gif);
}

a.hMenuKnap:hover .Delete,
a.RSideKnap:hover .Delete {
  background: url(../images/button_images/IconDelete.gif);
}

a.hMenuKnap:hover .SMSMany,
a.RSideKnap:hover .SMSMany {
  background: url(../images/button_images/IconSmsMany.gif);
}

a.hMenuKnap:hover .ITPolicy,
a.RSideKnap:hover .ITPolicy {
  background: url(../images/button_images/IconRulesr.gif);
}

a.hMenuKnap:hover .SMSNews,
a.RSideKnap:hover .SMSNews {
  background: url(../images/button_images/IconSMSNews.gif);
}

a.hMenuKnap:hover .Save,
a.RSideKnap:hover .Save {
  background: url(../images/button_images/IconSave.gif);
}

a.hMenuKnap:hover .Block,
a.RSideKnap:hover .Block {
  background: url(../images/button_images/IconInternetBlok.gif);
}

a.hMenuKnap:hover .StudentInfo,
a.RSideKnap:hover .StudentInfo {
  background: url(../images/button_images/IconEdit.gif);
}

a.hMenuKnap:hover .NoNumber,
a.RSideKnap:hover .NoNumber {
  background: url(../images/button_images/IconCellNumber.gif);
}

a.hMenuKnap:hover .Absense,
a.RSideKnap:hover .Absense {
  background: url(../images/button_images/IconFravaerRegistrering.gif);
}

a.hMenuKnap:hover .Absense_Student,
a.RSideKnap:hover .Absense_Student {
  background: url(../images/button_images/IconFravaerStatistik.gif);
}

a.hMenuKnap:hover .APPNews,
a.RSideKnap:hover .APPNews {
  background: url(../images/button_images/IconAPPNews.gif);
}

a.hMenuKnap:hover .Alarm,
a.RSideKnap:hover .Alarm {
  background: url(../images/button_images/IconAlarm.gif);
}

a.hMenuKnap:hover .AbsenceCard,
a.RSideKnap:hover .AbsenceCard {
  background: url(../images/button_images/IconCard.png);
}

a.hMenuKnap:hover .AbsenceAdmin,
a.RSideKnap:hover .AbsenceAdmin {
  background: url(../images/button_images/IconAbsenceAdmin.png);
}

a.hMenuKnap:hover .AppleSchoolManager,
a.RSideKnap:hover .AppleSchoolManager {
  background: url(../images/button_images/IconAppleSchoolManager.png) no-repeat;
  background-position: right;
}

a.hMenuKnap:hover .Absense_Stat,
a.RSideKnap:hover .Absense_Stat {
  background: url(../images/button_images/IconFravaerStatistik.gif);
}

a.hMenuKnap:hover .Absense_HeadMasterStat,
a.RSideKnap:hover .Absense_HeadMasterStat {
  background: url(../images/button_images/ledericon.gif);
}

a.hMenuKnap:hover .SchoolInfo,
a.RSideKnap:hover .SchoolInfo {
  background: url(../images/button_images/SchoolInfo.gif);
}

a.hMenuKnap:hover .Preview,
a.RSideKnap:hover .Preview {
  background: url(../images/button_images/IconWebfil.gif);
}

a.hMenuKnap:hover .ControlPanel,
a.RSideKnap:hover .ControlPanel {
  background: url(../images/button_images/controlPanel.gif);
}

a.hMenuKnap:hover .WelcomeModule,
a.RSideKnap:hover .WelcomeModule {
  background: url(../images/button_images/welcomemodule.gif);
}

a.hMenuKnap:hover .SickEmployee,
a.RSideKnap:hover .SickEmployee {
  background: url(../images/button_images/sickemployee.png);
}

a.hMenuKnap:hover .SickEmployeeStat,
a.RSideKnap:hover .SickEmployeeStat {
  background: url(../images/button_images/leder_sickemployee_stat.png);
}

a.hMenuKnap:hover .LinkCollection,
a.RSideKnap:hover .LinkCollection {
  background: url(../images/button_images/link_collection.png);
}

a.hMenuKnap:hover .Lending,
a.RSideKnap:hover .Lending {
  background: url(../images/button_images/lending.gif);
}

a.hMenuKnap:hover .Consent,
a.RSideKnap:hover .Consent {
  background: url(../images/button_images/IconPasswordOthers.gif);
}


.hMenuKnapIcon {
  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;
}

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

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hMenuKnap, .hMenuKnapIcon {
    transition: none !important;
    transform: none !important;
  }
}