@font-face {
  font-family: "Spline Sans";
  font-display: swap;
  font-weight: 400 900;
  src: local("Spline Sans"), url("../webfonts/SplineSans-Variable.ttf");
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-display: swap;
  src: local("Schibsted Grotesk"), url("../webfonts/SchibstedGrotesk-Variable.ttf");
}

/****************************
 *       CSS Reset          *
 ****************************/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  color-scheme: light;
  /* color-scheme: light dark; */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul {
  padding-left: 1.5rem;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  line-height: 1.5;
  margin: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}


input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  width: 100%;
}


/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  height: 100%;
  min-height: 5ch;
}

textarea.no-resize {
  resize: none;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5rem;
}

/****************************
 *    CSS Custom Properties *
 ****************************/

:root {
  --hsl-named-stratos: 224, 100%, 11%;
  --hsl-named-stratoshover: 224, 31%, 29%;
  --hsl-named-apple: 111, 45%, 46%;
  --hsl-named-applehover: 111, 50%, 62%;
  --hsl-named-hintofgreen: 133, 100%, 95%;
  --hsl-named-astral: 208, 56%, 46%;
  --hsl-named-fog: 227, 100%, 93%;
  --hsl-named-raven: 224, 9%, 52%;
  --hsl-named-ghost: 228, 15%, 81%;
  --hsl-named-peppermint: 96, 45%, 98%;
  --hsl-named-white: 0, 0%, 100%;
  --hsl-named-black: 0, 0%, 0%;

  --clr-named-stratos: hsl(var(--hsl-named-stratos));
  --clr-named-stratoshover: hsl(var(--hsl-named-stratoshover));
  --clr-named-apple: hsl(var(--hsl-named-apple));
  --clr-named-applehover: hsl(var(--hsl-named-applehover));
  --clr-named-hintofgreen: hsl(var(--hsl-named-hintofgreen));
  --clr-named-astral: hsl(var(--hsl-named-astral));
  --clr-named-fog: hsl(var(--hsl-named-fog));
  --clr-named-raven: hsl(var(--hsl-named-raven));
  --clr-named-ghost: hsl(var(--hsl-named-ghost));
  --clr-named-peppermint: hsl(var(--hsl-named-peppermint));
  --clr-named-white: hsl(var(--hsl-named-white));
  --clr-named-black: hsl(var(--hsl-named-black));
  --clr-named-warning: #eac926;

  --clr-named-error: hsl(0, 63%, 54%);
  --clr-devdlg-red1: hsl(69, 100%, 50%);

  --clr-alternate-row-background: color(from var(--clr-named-apple) srgb r g b / 0.25);




  /* Change these values */
  --coretime-logo-height: 2.5rem;
  --coretime-logo-padding: 0.5rem;
    
  /* Site Header (TopBar) Colours */
  --site-header-background: light-dark(var(--clr-named-stratos), var(--clr-named-stratos));
  --site-header-text: light-dark(#ffffff, #ffffff);
    
  --clr-primary: var(--clr-named-apple);
  --clr-primary-hover: var(--clr-named-applehover); 

  --clr-active: hsl(220, 100%, 93%);
  --clr-text-active: var(--clr-named-black);
  --clr-active-hover: hsl(111, 50%, 62%);

  --clr-inactive: hsl(133, 100%, 96%);
  --clr-disabled: hsl(0, 0%, 87%);

  --clr-inactive-hover: hsl(0, 0%, 0%);
  --clr-text-inactive: var(--clr-named-black);

  --clr-border: hsl(220, 13%, 85%);
  --clr-buttonface: hsl(0, 0%, 94%);
  
  --popup-info: hsl(199, 71%, 63%);
  --popup-success: hsl(111, 72%, 70%);
  --popup-warning: hsl(60, 100%, 85%);
  --popup-error: hsl(17, 100%, 74%);

  --clr-error: hsl(17, 100%, 74%);


  --viewport-right-padding: calc(var(--default-padding) + var(--scrollbar-thickness));


  --size-400: 0.75rem;  /*       12px*/
  --size-500: 0.875rem; /*       14px*/
  --size-600: 1rem;     /*       16px*/
  --size-700: 1.125rem; /*       18px*/
  --size-800: 1.25rem;  /*       --px*/
  --size-900: 1.5rem;   /*       --px*/
  
  --size-1px: 0.0625rem;

  --ff-body: "Schibsted Grotesk";

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  --light-blue: hsl(220, 100%, 95%);
  --dark-blue: hsl(220, 50%, 66%);
  --unconfirmed-text: hsl(220, 60%, 42%);
  --tooltip: var(--clr-named-white);

  --default-border-radius: 0.625rem;
  --default-border-radius: 0.325rem;

  --default-checked-text: "Yes";
  --default-unchecked-text: "No";

  --default-spacing: 1rem;
  --default-padding: var(--default-spacing);
  --default-gap: var(--default-spacing);
  --default-tabs-height: 2.2rem;

  --scrollbar-thickness: 0.333rem;
  --scrollbar-thickness: 0.5rem;

  font-size: 1em;
}




html,
body {
  font-family: var(--ff-body);
  font-size: var(--size-400);
  letter-spacing: 0.075ch;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-thickness);
  height: var(--scrollbar-thickness);
}

*::-webkit-scrollbar-thumb {
  background: var(--clr-primary);
  width: 0.25rem;
  border-radius: var(--default-border-radius);
}









h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

h1 {
  font-size: var(--size-700);
  font-weight: 700;
}

h2 {
  font-size: var(--size-600);
}

h3 {
  font-size: var(--size-500);
}

h4 {
  font-size: var(--size-400);
}

h5 {
  font-size: var(--size-400);
}

h6 {
  font-size: var(--size-400);
  font-weight: 600;
}



label { width: fit-content; text-wrap: pretty;}

.coretime-application-host {
  overflow: hidden;
  height: 100dvh;
  width: 100vw;
}


/****************************
 *      Layout System       *
 ****************************/

/* Coretime Top Bar (top-most frame) */
.main-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  padding-inline: var(--default-padding);
  margin-block-end: 0;
  height: 100%;

  background-color: var(--site-header-background);
  color: var(--site-header-text);

  font-size: var(--size-700);
}

.main-site-header > * {
  display: flex;
  gap: var(--default-gap);
  align-items: center;
  white-space: nowrap;
}


.main-site-header .coretime-header-search {
  width: unset;
  height: auto;
  min-height: unset;
  min-width: unset;
}

.restart-warning-text {
  text-shadow: 2px 1px hsl(100 100% 100% / 0.1);
}


.main-site-header .icon.global-notification-icon,
.main-site-header .icon.global-notes-icon,
.main-site-header .coretime-header-search {
  display: none;
}

.main-site-header.enable-preview-features .icon.global-notification-icon,
.main-site-header.enable-preview-features .icon.global-notes-icon,
.main-site-header.enable-preview-features .coretime-header-search {
  display: unset;
}




table {
  width: 100%;
  font-size: inherit;
}

table.fixed {
  table-layout: fixed;
}




/* Frame Layout */
#main-frameset {
  --_header-height: 2.625rem;

  display: grid;
  grid-template-rows: var(--_header-height) calc(100dvh - var(--_header-height));
}

#main-frameset iframe {
  border: 0;
  height: 100%;
  width: 100%;
}


#main-frameset.menu-hidden #outlookX {
  opacity: 0;
  position: absolute;
  top: var(--_header-height);
  left: 0;
  
  width: 17.5rem;
  height: calc(100dvh - var(--_header-height));

  transition: opacity .5s linear;
  pointer-events: none;
}

#main-frameset.menu-hidden.menu-open #outlookX {
  opacity: 1;
  visibility: visible;
  /* padding-right: var(--default-padding); */

  box-shadow: hsla(111, 50%, 62%, 0.5) 0px 0.33rem 0.33rem;
  pointer-events: all;
}


/* Frame Resizer Styles */
#secondary-frameset {
  display: flex;
  height: calc(100vh - var(--_header-height)); /* Adjust based on your toparea height */
}

#mess {
  display: none; /* Hide the message frame or adjust as needed */
}

#outlookX {
  min-width: 200px; /* Minimum width for navigation */
  max-width: 66vw; /* Maximum width for navigation */
  width: 220px; /* Default width */
  border: none;
  resize: none;
}

#main {
  flex: 1; /* Take remaining space */
  border: none;
  margin-left: -6px;
}

#extra {
  display: none; /* Hide the extra frame or adjust as needed */
}

/* Custom resizer styles */
.frame-resizer {
  width: 6px;
  background: #e0e0e0;
  cursor: col-resize;
  position: relative;
  user-select: none;
  transition: background-color 0.2s;
  left: 5px;
  opacity: 0;
  transition: opacity 0s;
}

#main-frameset.menu-hidden .frame-resizer {
  display: none;
}

.frame-resizer:hover {
  width: 6px;
  background: #c0c0c0;
  opacity: 0.75;
}

.frame-resizer:active {
  background: #a0a0a0;
}

.frame-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 20px;
  background: #999;
  border-radius: 1px;
}








.coretime-menu-container {
  height: 100vh;
  padding: var(--default-padding);
  background-color: var(--clr-named-white);
  padding-inline-end: 0;
}

.coretime-menu-container.menu-hidden.menu-open {
  padding-right: var(--default-padding);
}






iframe#CustomFrame {
  height: 100dvh;
}


.coretime-menu-container,
.coretime-app-container {
  /* Seems the most subtle */
  --_scale-percentage: 0.996;
  --_scale-timing: 3s;
}

.coretime-app-container {
  padding: var(--default-padding);
  width: 100vw;
  width: calc(100vw - var(--scrollbar-thickness, 0));
  max-width: calc(100vw - var(--scrollbar-thickness, 0));
  height: 100vh;
  height: 100dvh;
}

.invoice-manager-app {
  width: 100vw;
  max-width: 100vw;
}


.main-menu-icon {
  height: 2rem;
}




/* Legacy ID Based Selectors */
.formCoretime {
  height: 100%;
  height: 100svh;
  max-height: 100%;
  max-height: 100svh;
}


#PageLoadPlaceholder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
}

#divUserProfile,
#divReportProfile {
  position: relative;
  overflow: auto;
  height: var(--panel-height, auto);
  border: var(--size-1px) solid var(--clr-border);
  /* background-color: var(--clr-named-white); */
}

#divReportProfile {
  display: grid;
  grid-template-columns: repeat(3, 4ch) 1fr;
  gap: calc(var(--default-gap) / 2) 0;
  align-items: center;
  padding: var(--default-padding);
}

#divReportProfile input:not(:disabled) {
  margin-left: 0.4rem;
}

#divReportProfile img {
  justify-self: center;
  height: 95%;
}

#divActRestrict,
#divExpRestrict,
#divselAssignedEmps {
  overflow: auto;
  height: var(--panel-height, auto);
  border: var(--size-1px) solid var(--clr-border);
  /* background-color: var(--clr-named-white); */
}



#divActRestrict,
#divExpRestrict {
  display: grid;
  justify-content: stretch;
  align-content: start;

  /* height: 50svh; */
  overflow: auto;

  padding: calc(var(--default-padding) / 2);

  border: var(--size-1px) solid var(--clr-border);
  /* background-color: var(--clr-named-white); */

  -webkit-border-radius: var(--default-border-radius);
  -moz-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}



#divActRestrict .form-group,
#divExpRestrict .form-group {
  grid-template-columns: 4rem 1fr;
}

iframe.download-frame {
  position: absolute;
  top: -1px;
  left: -1px;

  height: 1px;
  width: 1px;
  
  /* opacity: 0; */
  /* visibility: hidden; */
  
  /* pointer-events: none; */
}



















/* Submit and Cancel Buttons */
.section-grid.auto-size {
  grid-template-rows: auto auto;
}

.button-panel {
  display: flex;
  justify-content: end;
  align-content: center;
  align-items: center;
  gap: 0.5rem;
}

.button-panel.vertical {
  flex-direction: column;
}

.button-panel.vertical button {
  width: 100%;
}

.button-panel:not(.in-parent) {
  grid-row: -1;
}


@media only screen and (max-height: 830px) {

  .section-grid.auto-size.with-break .button-panel:not(.in-parent) {
    grid-row: unset;
    position: fixed;
    bottom: 1rem;
    left: 0.85rem;
    right: 0.85rem;
    height: min-content;
    padding: calc(var(--default-padding) / 2);
    border: 1px solid var(--clr-named-fog);
    border-radius: var(--default-border-radius);
    box-shadow: 0px 4px 10px 1px var(--clr-border);
    background-color: var(--clr-named-white);
  }

}



.no-text-wrap, .NoWrap {
  width: auto;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-rtl {
  direction: rtl;
}

.full-width {
  width: 100%;
}

.ReportFilterHead > * {
  /* background-color: var(--clr-named-fog); */
  border-block: var(--size-1px) solid var(--clr-border);
  padding-block: calc(var(--default-padding) / 2);
}

.ReportFilterHead > *:first-child {
  padding-inline: var(--default-padding);

  -webkit-border-top-left-radius: var(--default-border-radius);
  -moz-border-top-left-radius: var(--default-border-radius);
  border-top-left-radius: var(--default-border-radius);

  -webkit-border-bottom-left-radius: var(--default-border-radius);
  -moz-border-bottom-left-radius: var(--default-border-radius);
  border-bottom-left-radius: var(--default-border-radius);
}

.ReportFilterHead > *:last-child {
  padding-inline: var(--default-padding);

  -webkit-border-top-right-radius: var(--default-border-radius);
  -moz-border-top-right-radius: var(--default-border-radius);
  border-top-right-radius: var(--default-border-radius);

  -webkit-border-bottom-right-radius: var(--default-border-radius);
  -moz-border-bottom-right-radius: var(--default-border-radius);
  border-bottom-right-radius: var(--default-border-radius);
}

/****************************
 *      Icon System         *
 ****************************/

.icon {
  position: relative;
}

.icon-interactive {
  cursor: pointer;
}

.icon.fa-light,
.icon.fa-solid,
.icon.fa-duotone {
  font-size: var(--size-500);
}

.icon.fa-light.medium,
.icon.fa-solid.medium,
.icon.fa-duotone.medium {
  font-size: var(--size-700);
}

.icon.fa-light.large,
.icon.fa-solid.large,
.icon.fa-duotone.large {
  font-size: var(--size-900);
}

.icon.danger {
  color: var(--clr-named-error);
}

.icon.warning {
  color: var(--clr-named-warning);
}

.icon.success {
  color: var(--clr-named-apple);
}

.main-site-header .icon.fa-light {
  font-size: inherit;
}

.icon-button .icon.fa-light,
.icon-button .icon.fa-solid,
.icon-button .icon.fa-duotone {
  font-size: var(--size-600);
  color: var(--clr-named-stratos);
}

.main-site-header-right .fa-light {
  color: var(--clr-named-white);
}



.icon:disabled {
  cursor: default;
  color: var(--clr-disabled);
  pointer-events: none;
}



a.send-mail-icon[href="#"] {
  display: none;
}

.icon.more-info-icon {
  font-size: var(--size-600);
}

.icon.link-icon {
  margin-left: 0.5rem;
}

.icon.help-icon {
  margin-left: 0.5rem;
  cursor: default;
}

button.icon.icon-close-dialog-button {
  position: absolute;
  top: var(--default-padding);
  right: var(--default-padding);
  font-weight: var(--fw-700);
  padding-right: 0.5rem;
}

.icon.map-icon {
  margin-left: 0.5rem;
}

.report-fav-icon-container {
  top: -0.2rem;
}

.report-fav-icon {
  height: 1.3rem;
}

.report-fav-icon .fa-primary{
  fill: var(--clr-primary);
}

.report-fav-icon .fa-secondary{
  fill: transparent;
}

.report-fav-icon.active .fa-secondary{
  fill: var(--clr-primary);
  opacity: 0.5;
}

.icon.refresh-icon {
  display: grid;
  place-items: center;
  text-decoration: none;
  appearance: none;
  transition: rotate 0.125s linear;
}

.icon.refresh-icon.refreshing {
  rotate: 0deg;
  animation: refreshing 1s linear infinite;
  transform-origin: center;
}

@keyframes refreshing {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon.refresh-icon:hover {
  rotate: -45deg;
}


.icon.global-notification-icon {
  display: grid;
  place-items: center;
  text-decoration: none;
  appearance: none;
}

.icon.global-notification-icon > .new-notification-badge {
  position: absolute;
  top: -0.2rem;
  width: 2rem;

  font-size: 0.7rem;
  font-weight: 500;

  display: none;
  align-items: center;
  justify-items: center;

  isolation: isolate;
}

.icon.global-notification-icon > .new-notification-badge.over-cap {
  font-size: 0.6rem;
}



.icon.global-notification-icon > .new-notification-badge::before {
  position: absolute;
  z-index: -1;

  font-size: 1rem;
  font-weight: 900;
  color: red;
}

.icon.global-notification-icon.has-new > .new-notification-badge {
  display: grid;
}

.icon.global-notification-icon.has-new {
  animation: ringTheBell 6s linear infinite;
}

.icon.global-notification-icon:hover {
  animation: ringTheBell 3s linear infinite;
}


@keyframes ringTheBell {
  0% {
    transform: rotate(-25deg);
  }
  5% {
    transform: rotate(25deg);
  }
  10% {
    transform: rotate(-25deg);
  }
  15% {
    transform: rotate(0deg);
  }
 100% {
    transform: rotate(0deg);
  }
}

.icon.provisionally-billed {
  color: var(--clr-named-error);
}

.icon.billed {
  color: var(--clr-named-apple);
}

.icon.icon.approved {
  color: var(--clr-named-apple);
}

.icon.icon.rejected {
  color: var(--clr-named-error);
}


.icon.fa-lock {
  color: var(--clr-named-stratos);
}

.icon.non-recoverable-expense-icon {
  color: red;
}

.icon.recoverable-expense-add-icon {
  color: var(--clr-primary);
}

.icon.fa-circle-exclamation {
  color: var(--clr-named-error);
}


.icons-grid {
  --_icon-count: 0;

  display: grid;
  grid-template-columns: repeat(var(--_icon-count), 0.8rem);
  gap: calc(var(--default-gap) / 2);
  align-items: center;
  justify-content: start;
  color: var(--clr-named-black);
}

.icons-grid.auto {
  grid-template-columns: repeat(var(--_icon-count), auto);
}

.icons-grid.centered {
  justify-content: center;
}

.icons-grid.space-between {
  justify-content: space-between;
}

.icon.time-type-marker {
  font-size: var(--size-800);
  line-height: 1;
}


.toast-popup-host {
  position: fixed;
  z-index: 9999;
  left: var(--default-padding);
  right: var(--default-padding);
  /* bottom: var(--default-padding); */
  bottom: 4rem;

  pointer-events: none;

  display: grid;
  gap: calc(var(--default-gap) / 2);
  justify-content: stretch;
}

.toast-popup {
  min-height: 1.5rem;
  
  background-color: var(--popup-info);
  color: var(--clr-named-stratos);
  text-align: center;
  border-radius: var(--default-border-radius);

  margin-inline: calc(var(--default-padding) * 0.75);
  
  padding: var(--default-padding);
  padding-inline: auto;

  pointer-events: all;

  opacity: 0;
  transition: opacity 0.5s linear;
  box-shadow: 0px 4px 10px 1px var(--clr-border);
}

.toast-popup.success {
  background-color: var(--popup-success);
  color: rgb(48, 48, 48);
}

.toast-popup.warning {
  background-color: var(--popup-warning);
  color: rgb(48, 48, 48);
}

.toast-popup.error {
  background-color: var(--popup-error);
  color: rgb(48, 48, 48);
}

.toast-popup.show {
  opacity: 1;
}



.popup-menu {
  position: absolute;
  top: 2.5rem;
  left: calc((var(--_callerX) - 30ch) + 25px);

  width: 30ch;
  height: max-content;
  background: red;
  border: var(--size-1px) solid var(--clr-border);
  background-color: var(--clr-named-peppermint);
  -webkit-border-radius: var(--default-border-radius);
  -moz-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);

  box-shadow: 0px 3px 5px 2px var(--clr-border);
}

.popup-content {
  padding: var(--default-padding);
}

/****************************
 *      Form System         *
 ****************************/

/* Inputs and Controls */
.section-title.MandRequired,
label.MandRequired {
  position: relative;
}

.section-title.MandRequired::after,
label.MandRequired::after {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='0.5rem' height='0.5rem' fill='%23ff0000' viewBox='0 0 512 512'%3e%3cpath d='M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z'/%3e%3c/svg%3e");
  position: absolute;
  margin-left: 0.25rem;
  /* top: 25%; */
}

input[type="checkbox"],
input[type="radio"] {
  height: 1rem;
  width: 1rem;
  min-width: unset;
}

input[type="color"] {
  width: 3rem;
  min-width: 3rem;
  padding: 0;
}

input:not([type="radio"]) {
  accent-color: var(--clr-primary);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: var(--clr-primary);
}

a.button {
  appearance: none;
  text-decoration: none;
  text-align: center;
  color: inherit;
  background-color: var(--clr-buttonface);
}

input,
button,
a.button,
select,
textarea {
  padding: 0.25rem 0.3125rem;
  border: var(--size-1px) solid var(--clr-border);
  -webkit-border-radius: var(--default-border-radius);
  -moz-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);

  min-width: fit-content;
  /* min-height: 1.85rem; */
}

a.button,
button,
input[type="button"],
button[type="submit"],
input[type="submit"] {
  display: flex;
  align-items: center;
  gap: calc(var(--default-spacing) / 2);

  text-align: center;
  white-space: nowrap;
  padding: calc(var(--default-padding) / 4) var(--default-padding);
  transition: 
    box-shadow 250ms, 
    background-color 250ms, 
    color 250ms;
  min-height: 1.85rem;
  cursor: pointer;
}


input[type="checkbox"], input[type="radio"] {
  min-height: unset;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

input:not([disabled]):not([readonly]).error {
  background-color: var(--clr-error);
}

a.button.icon,
button.icon {
  padding: 0;
  border: none;
  width: auto;
  min-width: auto;
  background-color: transparent;
}

a.button > div,
button > div,
input[type="button"] > div,
input[type="submit"] > div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

a.button img,
button img,
input[type="button"] img,
input[type="submit"] img {
  display: inline;
  width: 1.625rem;
  height: 1.625rem;
}

select {
  padding: 0.188rem 0.3125rem;
}

input:disabled,
a.button:disabled,
button:disabled,
select:disabled,
textarea:disabled {
  cursor: default;
}


a.button:hover:not(:disabled):not(.icon):not(:active),
button:hover:not(:disabled):not(.icon):not(:active),
input[type="button"]:hover:not(:disabled):not(:active) {
  background-color: var(--clr-named-hintofgreen);
  box-shadow: var(--clr-border) 0px 0.33rem 0.33rem;
}

a.button[data-type="primary"]:not(:disabled),
button[data-type="primary"]:not(:disabled),
button[type="submit"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"][data-type="primary"]:not(:disabled) {
  background-color: var(--clr-primary);
  color: var(--clr-named-white);
}

a.button[data-type="primary"]:hover:not(:disabled):not(:active),
button[data-type="primary"]:hover:not(:disabled):not(:active),
button[type="submit"]:hover:not(:disabled):not(:active),
input[type="submit"]:hover:not(:disabled):not(:active),
input[type="button"][data-type="primary"]:hover:not(:disabled):not(:active) {
  background-color: var(--clr-primary-hover);
  /* color: var(--clr-named-stratos); */
  box-shadow: hsla(111, 50%, 62%, 0.5) 0px 0.33rem 0.33rem;
}



a.button[data-type="danger"]:hover:not(:disabled):not(:active),
button[data-type="danger"]:hover:not(:disabled):not(:active),
input[type="button"][data-type="danger"]:hover:not(:disabled):not(:active) {
  border-color: color(from var(--clr-named-error) srgb r g b / 0.9);
  background-color: color(from var(--clr-named-error) srgb r g b / 0.7);
  box-shadow: color(from var(--clr-named-error) srgb r g b / 0.9) 0px 0.33rem 0.33rem;
  color: var(--clr-named-white);
}



a.button:disabled,
button:disabled,
input[type="button"]:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed;
}


button.small-button {
  min-height: 1.5rem;
}



input:disabled::placeholder {
  opacity: 0;
}

a.button[data-type="text-only"],
button[data-type="text-only"],
input[type="button"][data-type="text-only"] {
  border: none;
  width: max-content;
  background-color: transparent;
  padding-inline: calc(var(--default-padding) / 2);
}

input[type="date"].no-icon::-webkit-inner-spin-button,
input[type="date"].no-icon::-webkit-calendar-picker-indicator,
input[type="time"].no-icon::-webkit-inner-spin-button,
input[type="time"].no-icon::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}


input[type="number"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus {
  outline: none;
  border-color: var(--clr-named-apple);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

input[type="time"].no-value,
input[type="number"].no-value {
  color: lightgray;
}

.dropdown-button-container {
  display: grid;
  position: relative;
}

.dropdown-button-buttons {
  display: grid;
  grid-template-columns: 1fr 3ch;
}

.dropdown-button-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: var(--size-1px) solid var(--clr-named-stratos);
}

.dropdown-button-marker {
  display: grid;
  place-items: center;

  padding: 0;
  
  min-width: revert;
  
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-button-content {
  display: none;
  gap: calc(var(--default-gap) / 2);

  position: absolute;
  top: 2rem;
  right: 0;
  z-index: 10;

  width: 30ch;
  max-height: min(20rem, 50vh);
  padding: var(--default-padding);

  background-color: var(--clr-named-peppermint);
  border: var(--size-1px) solid var(--clr-named-ghost);

  -webkit-border-radius: var(--default-border-radius);
  -moz-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
  box-shadow: 0px 3px 5px 2px var(--clr-named-ghost);

  overflow: auto;
  text-align: start;
}

.pager {
  display: grid;
  grid-template-columns: 15ch 1fr;
  gap: calc(var(--default-gap) / 2);
}

.date-spinner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--default-gap);
}


.drop-down-menu {
  position: relative;
}

.drop-down-menu .drop-down-text {
  cursor: pointer;
}

.drop-down-menu .drop-down-text .icon {
  margin-left: calc(var(--default-spacing) / 2);
}

.drop-down-menu .drop-down-content {
  display: none;
}

.drop-down-menu:focus .drop-down-content,
.drop-down-menu:focus-within .drop-down-content {
  position: absolute;
  top: 2rem; left: 0;

  display: grid;
  gap: var(--default-gap);
  text-align: start;

  width: max-content;

  padding: var(--default-padding);
  
  border-width: var(--size-1px);
  border-style: solid;
  border-color: var(--clr-border);
  border-radius: var(--default-border-radius);
  
  background-color: var(--clr-named-peppermint);
  box-shadow: 3px 2px 7px 1px var(--clr-named-ghost);  
}



/****************************
 *      Table System        *
 ****************************/

/* Table Styling */
td,
th {
  text-align: start;
  /* vertical-align: bottom; */
  padding: calc(var(--default-padding) / 4);
}

th[data-width] {
  width: attr(data-width);
}

th, thead td {
  border-bottom: var(--size-1px) solid var(--clr-border);
  font-weight: var(--fw-600);
  vertical-align: bottom;
}

th.bottom, 
tfoot td, 
tfoot th {
  border-bottom: none;
  border-top: var(--size-1px) solid var(--clr-border);
  font-weight: var(--fw-500);
}


th[data-sort-dir="down"]::after {
  font-family: 'Font Awesome 6 Pro';
  content: '\f0d8';
}

th[data-sort-dir="up"]::after {
  font-family: 'Font Awesome 6 Pro';
  content: '\f0d7';
}

tr.highlighted {
  --_highlight-duration: 2s;
  z-index: 1;
}



tr.highlighted td {
  position: relative;
  animation: borderTBHighlight var(--_highlight-duration) ease-out;
  border-top: 0px solid var(--clr-primary);
  border-bottom: 0px solid var(--clr-primary);
}

tr.highlighted td::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    hsla(90, 100%, 80%, 0.7) 0%,
    hsla(90, 100%, 85%, 0.8) 50%,
    hsla(90, 100%, 80%, 0.7) 100%
  );
  opacity: 0;
  animation: highlightOverlayFade var(--_highlight-duration, 2s) ease-out;
  border-radius: inherit;
}

@keyframes highlightOverlayFade {
  0% {
    opacity: 0.85;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

tr.highlighted td:first-child {
  animation: borderTLBHighlight var(--_highlight-duration) ease-out;
  border-left: 0px solid var(--clr-primary);
}

tr.highlighted td:last-child {
  animation: borderTRBHighlight var(--_highlight-duration) ease-out;
  border-right: 0px solid var(--clr-primary);
}

@keyframes borderTBHighlight {
  0% {
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-top-color: var(--clr-primary-hover);
    border-bottom-color: var(--clr-primary-hover);
  }
  100% {
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-color: var(--clr-primary);
    border-bottom-color: var(--clr-primary);
  }
}

@keyframes borderTLBHighlight {
  0% {
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-color: var(--clr-primary-hover);
    border-bottom-color: var(--clr-primary-hover);
    border-left-color: var(--clr-primary-hover);
  }
  100% {
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-color: var(--clr-primary);
    border-bottom-color: var(--clr-primary);
    border-left-color: var(--clr-primary);
  }
}

@keyframes borderTRBHighlight {
  0% {
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-top-color: var(--clr-primary-hover);
    border-bottom-color: var(--clr-primary-hover);
    border-right-color: var(--clr-primary-hover);
  }
  100% {
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-top-color: var(--clr-primary);
    border-bottom-color: var(--clr-primary);
    border-right-color: var(--clr-primary);
  }
}

@keyframes rowHighlight {
  0% {
    background-color: color(from var(--clr-primary) srgb r g b / 0.3);
    box-shadow: 0 0 0 0 color(from var(--clr-primary) srgb r g b / 0.4);
  }
  50% {
    background-color: color(from var(--clr-primary) srgb r g b / 0.2);
    box-shadow: 0 0 0 4px color(from var(--clr-primary) srgb r g b / 0.2);
  }
  100% {
    background-color: var(--clr-named-hintofgreen);
    box-shadow: 0 0 0 0 color(from var(--clr-primary) srgb r g b / 0);
  }
}

@keyframes cellPulse {
  0% {
    background-color: color(from var(--clr-primary) srgb r g b / 0.15);
  }
  50% {
    background-color: color(from var(--clr-primary) srgb r g b / 0.08);
  }
  100% {
    background-color: transparent;
  }
}

.text-align-right,
.AR {
  text-align: right;
}

.text-align-center,
.AC {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}





/****************************
 *      Profile System      *
 ****************************/

/* USER PROFILE RE_WRITE */
.ProfileBody {
  padding: var(--default-padding);
}

.ProfileBody td {
  padding: 0;
  padding-right: calc(var(--default-padding) / 2);
  height: 1ch;
}

.ProfileBody img {
  height: 1.2rem;
  width: 1.2rem;
}




.log-container {
  overflow: auto;
  border: var(--size-1px) solid var(--clr-named-fog);
  border-radius: var(--default-border-radius);
  height: calc(100dvh - (var(--panel-height-adjust) + (var(--default-padding) * 2)));
}

.log-container .log-viewer {
  display: grid;
  overflow: auto;

  font-family: Consolas;
}

.log-viewer .empty-padding-line {
  margin-bottom: 2rem;
}




.even-columns {
  display: grid;
  grid-auto-flow: column;
  gap: var(--default-gap);
}

.even-columns.spaced > * {
  grid-auto-columns: 1fr;
}

.even-rows {
  display: grid;
  gap: var(--default-gap);
}







.section-grid {
  --_grid-columns: 1;
  --_grid-parent-padding: var(--default-padding);

  display: grid;
  grid-template-columns: repeat(var(--_grid-columns), 1fr);
  grid-auto-rows: max-content;
  gap: var(--_block-gap, var(--default-gap))
    var(--_inline-gap, calc(var(--default-gap) * 1.5));
}

.section-grid.horizontal {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.section-grid.fill {
  height: calc(100svh - calc(var(--_grid-parent-padding) * 2));
}

.form-section .section-grid {
  grid-column: span var(--_grid-columns);
}

.section-grid.even-columns {
  grid-template-columns: repeat(var(--_grid-columns), 1fr);
  grid-auto-flow: row;
}


.form-section {
  --_form-grid-columns: 2;

  display: grid;
  grid-template-columns: repeat(var(--_form-grid-columns), 1fr);
  grid-auto-rows: max-content;
  gap: var(--_block-gap, var(--default-gap)) var(--_inline-gap, var(--default-gap));
}

.form-section.one-column {
  --_form-grid-columns: 1;
}

.form-section .form-section {
  --_block-gap: var(--default-gap);
  --_form-grid-columns: 1;
}

.form-section .form-section.two-columns {
  --_form-grid-columns: 2;
  --_inline-gap: var(--default-gap);
}

.form-section + .form-section {
  margin-top: var(--default-gap);
}

.form-section .form-section + .form-section {
  margin-top: 0;
}

.form-section > .section-title:first-child + *:last-child {
  grid-column: span var(--_form-grid-columns);
}

.spacer {
  min-width: var(--default-spacing);
}

.form-section.emp-toil-rates .form-group {
  grid-template-columns: 1fr 1fr;
}


/****************************
 *      Grid System         *
 ****************************/

/* REMEMBER: Media queries are based on frame width, 
   NOT device/screen width 
 */


.section-grid > .section-title,
.form-section > .section-title,
.panel-content > .section-title {
  font-size: var(--size-500);
  line-height: 2;
  border-bottom: 1px solid var(--clr-border);
}

.form-section > .section-title {
  grid-column: span var(--_form-grid-columns);
}

.section-grid > .section-title,
.panel-content > .section-title {
  grid-column: span var(--_grid-columns);
}

.section-grid > .section-title + p{
  grid-column: span var(--_grid-columns);
}
.form-section > .section-title + p {
  grid-column: span var(--_form-grid-columns);
}

div:has(.section-title + p) {
  grid-column: span var(--_grid-columns);
}

.section-grid .section-title.one-column,
.form-section .section-title.one-column {
  grid-column: unset;
}

.form-section .fill {
  grid-column: 1 / -1;
}

.form-group {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 2fr 4fr;
  justify-content: space-between;
  align-items: center;
  gap: var(--default-gap);
}

.form-group:has(input[type="checkbox"]) {
  min-height: 1.45rem;
}

.form-group label button {
  display: inline-block;
  display: inline-flex;
}

.form-group button {
  min-height: 0;
}



.form-group.auto-size {
  grid-template-columns: repeat(2, auto);
}

.form-group.reverse {
  grid-template-columns: 60% auto;
}

.form-group.no-space {
  justify-content: flex-start;
  gap: 0 var(--default-gap);
}

.form-group.no-align {
  align-items: unset;
}

.input-group {
  display: flex;
  gap: calc(var(--default-gap) / 2);
  align-items: center;
}

.input-group:not(.no-grow.reversed) :first-child:not([hidden]) {
  flex-grow: 1;
}

.input-group:not(.no-grow).reversed :last-child {
  flex-grow: 1;
}

.input-group.even-columns > :not([hidden]) {
  flex-basis: 50%;
}

.input-group.centered {
  justify-content: center;
  gap: var(--default-gap);
}

.input-group:has(.MandText),
.form-group:has(.MandText) {
  position: relative;
}

.input-group input,
.input-group select,
.input-group button {
  min-width: unset;
}

.header-section .input-group input:not([type="checkbox"]):not([type="radio"]),
/* .header-section .input-group button, */
.header-section .input-group select {
  min-width: 20ch;
  max-width: 25ch;
} 

.form-group .MandText,
.input-group .MandText {
  position: absolute;
  border: 1px solid red;
  padding: 0.5rem 2rem;
  border-radius: var(--default-border-radius);
  bottom: -3rem;
  right: 0;
  background-color: var(--clr-named-hintofgreen);
}

.form-group .MandText::after,
.input-group .MandText::after {
  --_arrow-size: 0.625rem;

  content: "";
  position: absolute;
  right: 1rem;
  top: -0.6rem;
  width: 0;
  height: 0;
  border-left: var(--_arrow-size) solid transparent;
  border-right: var(--_arrow-size) solid transparent;
  border-bottom: var(--_arrow-size) solid rgb(255 76 76);
  clear: both;
}

.input-group.reversed > *:last-child {
  width: 100%;
}


.form-group > div:not([class]) {
  min-height: 1.875rem;
}

.one-column {
  --_grid-columns: 1;
}

.two-columns {
  --_grid-columns: 2;
}

.two-columns:not(.even) {
  grid-template-columns: max(15%, 35ch) 1fr;
}

.three-columns {
  --_grid-columns: 3;
}

.three-columns:not(.even) {
  grid-template-columns: max(15%, 35ch) 1fr auto;
}

.label-defs-columns {
  --_grid-columns: 3;
  grid-template-columns: max(15%, 35ch) auto 1fr;
}

.label-defs-columns :nth-child(4n+2) {
  justify-self: center;
}


.flex-layout {
  display: flex;
  gap: var(--default-gap);
  align-items: center;
}

.flex-layout .flex-grow {
  flex-grow: 1;
}

.flex-layout.flex-wrap {
  flex-wrap: wrap;
}


.lockout-banner {
  display: grid;
  align-items: center;
  
  position: absolute;
  left: -1rem;
  width: calc(100% + 2rem);
  min-height: 3rem;
  height: 3rem;

  background-color: var(--clr-error);
  padding: calc(var(--default-padding) / 2) var(--default-padding);
}

.health-alert {
  display: flex;
  gap: var(--default-gap);
  align-items: center;
}

.health-alert p {
  flex-grow: 1;
}

.health-alert button {
  justify-self: end;
}

ul.health-check-list {
  list-style: none;
}

ul.health-check-list li {
  display: flex;
  gap: var(--default-gap);
  align-items: center;
  padding-block: calc(var(--default-spacing) / 2);
}




.search-widget {
  display: none;
  grid-template-columns: repeat(2, auto);
  align-items: center;
}

.search-widget[data-searchable="true"] {
  display: grid;
}

.search-widget .search-icon {
  min-height: auto;
  font-size: 1rem;
  /* margin-right: calc(var(--default-padding) / 2); */
  outline-offset: 0.25rem;
}

.search-widget button:focus-visible {
  outline-color: var(--clr-primary);
}

.search-widget > .search-field {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns .5s linear;
}

.search-widget > .search-field > div {
  position: relative;
  overflow: hidden;
}

.search-widget > .search-field input {
  width: 100%;
  position: relative;
}

.search-widget > .search-field input:disabled,
.search-widget > .search-field button:disabled {
  display: none;
}

.search-widget > .search-field > div > button {
  position: absolute;
  right: 0.25rem;
  bottom: 0.3rem;
  font-size: 1rem;
  line-height: 1;
  background-color: transparent;
  padding: 0;
  min-height: 0;
  border: none;
  cursor: pointer;
}

.search-widget > .search-field > div > button:hover {
  background-color: transparent;
  box-shadow: none;
}


.search-widget.searching {
  grid-template-columns: auto;
}

.search-widget.searching .search-icon {
  display: none;
}

.search-widget.searching .search-field {
  grid-template-columns: 1fr;
}


.password-container {
  position: relative;
}

.password-container input {
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box;
}

.password-container .password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  cursor: pointer;
  color: #aaa;
}

.password-container .password-toggle:hover {
  background-color: none;
}

.password-container:has(input:disabled) .password-toggle {
  display: none;
}



/****************************
 *      Report System       *
 ****************************/

/* Reporting */
.report-options, #TblOptionsSel:not([hidden]) {
  grid-column: span (--_grid-columns);

  display: grid;
  gap: calc(var(--default-gap) * 2) var(--default-gap);
  align-items: center;
}


.options-section {
  display: grid;
  grid-template-columns: 10rem 1fr;
  align-items: center;

  position: relative;
}

.options-section:not(:last-child)::after {
  content: '';
  background: linear-gradient(90deg, transparent 0%, var(--clr-named-ghost) 20%, var(--clr-named-ghost) 80%, transparent 100%);
  position: absolute;
  height: var(--size-1px);
  left: 0;
  right: 0;
  bottom: -1rem;
}

.options-section .options-title {
  font-weight: 700;
  /* align-self: start; */
}

.options-section .options-title.vertical-start {
  margin-top: 0.125rem;
}

.options-section .options-content {
  --_grid-columns: 3;

  display: grid;
  grid-template-columns: repeat(var(--_grid-columns), max-content);
  gap: var(--default-gap) calc(var(--default-gap) * 4);
}

.options-section.no-auto-layout .options-content {
  --_grid-columns: 1;
}

.options-section.no-auto-layout .options-content .options-content {
  --_grid-columns: 3;
}

@media only screen and (max-width: 64rem) {
  .options-section .options-content,
  .options-section.no-auto-layout .options-content .options-content  {
    --_grid-columns: 1;
  }
}


.options-section .options-content > * {
  flex-grow: 1;
}

.options-content .form-group {
  display: flex;
  gap: calc(var(--default-gap) / 2);
  align-items: center;
}

.report-options-new-window {
  display: flex;
  align-items: center;
  gap: var(--default-gap);

  place-self: end;
  align-self: center;
}


.report-filter-container summary {
  position: relative;
  list-style: none;
  border: var(--size-1px) solid var(--clr-named-apple);
  border-radius: var(--default-border-radius);
  padding: 0.5rem 1rem;
  background-color: var(--clr-named-apple);
  color: var(--clr-named-white);
  transition: 
    border-bottom-left-radius 0.125s linear,
    border-bottom-right-radius 0.125s linear;
  cursor: pointer;
}

.report-filter-container summary::before,
.report-filter-container summary::after {
  content: '';
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  border: 0.5rem solid transparent;
  border-left-color: #000000;
}

.report-filter-container summary::after {
  right: calc(1rem + 1px);
  border: 0.5rem solid transparent;
  border-left-color: #000000;
}


.report-filter-container[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.report-filter-container[open] summary::before,
.report-filter-container[open] summary::after {
  content: '';
  position: absolute;
  right: 1rem;
  bottom: 0.5rem;
  border: 0.5rem solid transparent;
  border-top-color: #000000;
}

.report-filter-container[open] summary::after {
  right: calc(1rem + 1px);
  border: 0.5rem solid transparent;
  border-top-color: #000000;
}

.report-filter-container .report-filter-content {
  border: 1px solid var(--clr-border);
  border-top: none;
  border-radius: var(--default-border-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: calc(var(--default-padding) / 2);
}

.report-filter-container .report-filter-content::before {
  border: 3px solid red;
}

.report-filter-container .report-filter-content::after {
  border: 3px solid red;
}

.report-filter-content .report-filter-options {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0;
  padding-inline: calc(var(--default-padding) / 2);
  padding-bottom: calc(var(--default-padding) / 2);
}


.report-filter-options > * {
  flex-grow: 1;
}

.report-analysis-filter,
.report-analysis-filter .analysis-filter-buttons {
  display: grid;
  gap: var(--default-gap);
}

.report-analysis-filter {
  grid-template-columns: 1fr auto 1fr;
  align-content: center;
}

.report-analysis-filter-options {
  display: grid;
  gap: var(--default-gap); 
}

.report-analysis-filter-options .form-group {
  grid-template-columns: auto auto;
}

.page-help-message {
  display: inline-flex;
  gap: var(--default-gap);
  align-items: center;
}

/* .page-help-message::after, */
.page-help-message::before {
  font-family: 'Font Awesome 6 Pro';
  font-size: var(--size-600);
  content: '\f4a3';
  place-self: center;
}

.page-help-message.danger {
  color: var(--clr-named-error);
}

details > .page-help-message {
  cursor: pointer;
}

details > .page-help-message + * {
  margin-left: 3rem;
}

@media only screen {
  .page-break {
    margin-block: calc(var(--default-padding) * 2);
  }

  .coretime-app-container:has(.statement) {
    background-color: var(--clr-named-ghost);
  }

  .statement {
    --_page-height: 297mm;
    --_page-width: 210mm;

    height: var(--_page-height);
    min-height: var(--_page-height);
    max-height: var(--_page-height);
    
    width: var(--_page-width);
    min-width: var(--_page-width);
    max-width: var(--_page-width);
    
    margin-inline: auto;
    background-color: var(--clr-named-white);
    border-radius: var(--default-border-radius);
    box-shadow: 3px 5px 15px 0px hsl(224deg 100% 11% / 70%);
  }
  .statement > table {
    padding: 10mm;
  }
}
@media only screen {
  .print-only {
    display: none;
  }
}

@media only print {
  .screen-only {
    display: none;
  }

  .page-break {
    page-break-before: always;
  }
}

.report-results-header {
  display: grid;
  padding-inline: var(--default-padding);
  margin-bottom: var(--default-padding);
  max-width: 100vw;
}

.coretime-app-container:has(#TblRep) {
  overflow: visible;
}

.report-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: calc(var(--default-padding) / 2);
}

details.report-header-row > div {
  margin-left: 1rem;
}

.report-title {
  font-size: 1.2rem;
  line-height: 1.2;
}

.report-group-total > td,
.report-group-total > th,
.report-grand-total > td,
.report-grand-total > th {
  border-top: 1px solid var(--clr-named-ghost);
  border-bottom: 1px solid var(--clr-named-ghost);
  padding-block: calc(var(--default-padding) / 2);
  padding-bottom: 1rem;
  margin-top: var(--size-1px);
  font-weight: var(--fw-600);
}

.report-group-total + .report-group-total > td,
.report-group-total + .report-group-total > th {
  border-top: none;
}

.report-grand-total > td,
.report-grand-total > th,
tfoot .report-grand-total > th {
  font-weight: var(--fw-700);
}


.report-group-total+.report-grand-total > td,
.report-group-total+.report-grand-total > th {
  border-bottom: none;
  padding-bottom: revert;
}

.report-results-pager,
.report-output-buttons {
  display: flex;
  gap: var(--default-gap);
}

.report-results-pager > .pager-buttons {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: calc(var(--default-gap) / 2);
}

.report-results-pager > .pager-info {
  display: grid;
  gap: calc(var(--default-gap) / 2);
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  margin-right: 2rem;
}

.pager-info > .pager-counts {
  display: grid;
  gap: calc(var(--default-gap) / 2);
  grid-template-columns: max-content auto max-content;
  align-items: center;
}

.report-results-pager > .pager-info button {
  margin-right: 2rem;
}

.report-results-pager > .pager-info input[type="text"] {
  max-width: 4ch;
}

.report-output-buttons {
  justify-self: end;
}



.outlook-bar::view-transition-group(*) {
  animation-duration: 5s;
}





/* There is a better way to do this, but in the interest of not changing the markup of all
   the pages in Delphi, this was the simplest option */

.ui-tabs-content-container {
  --_tab-height: var(--default-tabs-height);
}

.ui-tabs-content-container > div {
  height: 100%;
}



/****************************
 *      Panel System        *
 ****************************/

.panel {
  --_panel-block-gap: var(--default-gap, 1rem);
  --_panel-inline-gap: calc(var(--default-gap, 1rem) * 2);

  background-color: var(--clr-named-peppermint);
  border: 0.06125rem solid var(--clr-named-ghost);
  -webkit-border-radius: var(--default-border-radius);
  -moz-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);

  /* width: calc(100vw - calc(var(--default-padding) * 2));
  max-width: calc(100vw - calc(var(--default-padding) * 2)); */
  height: calc(100% - var(--panel-height-adjust));
  max-height: calc(100% - var(--panel-height-adjust));

  margin: 0;
  overflow: hidden;
}

.panel:not(.inherit-height-adjustment) {
  --panel-height-adjust: 0rem;
}

.panel > details.panel-content:not([open]) {
  padding-bottom: 0;
}

.layout-panel {
  margin: 0;
  padding: 0;
}

.layout-panel.fill, .layout-panel.fill .in-parent {
  height: calc(100vh - var(--panel-height-adjust));
  height: calc(100dvh - var(--panel-height-adjust));
  max-height: calc(100vh - var(--panel-height-adjust));
  max-height: calc(100dvh - var(--panel-height-adjust));
}


table .panel {
  width: 100%;
  padding: 0;
}

.panel.white {
  background-color: var(--clr-named-white);
}

.panel.fill {
  height: calc(100vh - var(--panel-height-adjust));
  height: calc(100dvh - var(--panel-height-adjust));
  max-height: calc(100vh - var(--panel-height-adjust));
  max-height: calc(100dvh - var(--panel-height-adjust));

  margin: 0;
}

.layout-panel.fill .panel:not(.inherit-height-adjustment),
.layout-panel.fill .layout-panel:not(.inherit-height-adjustment),
.layout-panel.fill .in-parent {
  height: calc(100% - var(--panel-height-adjust));
  max-height: calc(100% - var(--panel-height-adjust));
}

.panel-row {
  --_flow-type: column;
  display: grid;
  grid-auto-flow: var(--_flow-type);
  grid-auto-columns: 1fr;
  gap: var(--default-gap);
}

.panel.in-parent,
.panel-row > .panel {
  flex-grow: 1;
  width: auto;
  max-width: unset;
}

.panel > .panel-content {
  --_grid-columns: 1;

  display: grid;
  grid-template-columns: repeat(var(--_grid-columns), 1fr);
  grid-auto-rows: max-content;
  gap: var(--_panel-block-gap) var(--_panel-inline-gap);
  
  height: calc(100% - var(--panel-height-adjust));
  max-height: calc(100% - var(--panel-height-adjust));

  padding: var(--default-padding);    
  /* margin: calc((var(--size-1px) * 2) * -1) var(--size-1px); */
  overflow: auto;
}

.layout-panel > .panel-content {
  --_grid-columns: 1;
  --_panel-padding: var(--default-padding);

  display: grid;
  grid-template-columns: repeat(var(--_grid-columns), 1fr);
  grid-auto-rows: max-content;
  gap: var(--_panel-block-gap) var(--_panel-inline-gap);
  
  height: calc(100dvh - var(--panel-height-adjust));
  max-height: calc(100dvh - var(--panel-height-adjust));

  padding: var(--_panel-padding);    
  overflow: auto;
}

.panel.resize-v > .panel-content { 
  overflow: hidden;
}

.panel > .panel-content.no-gap {
  gap: 0;
}

.panel > .panel-content.half-padding {
  padding: calc(var(--default-padding) / 2);
}

.side-panel > .panel-content {
  padding: 0;
  padding-right: calc(var(--default-padding) / 2);
  overflow: auto;
  height: 100%;
  max-height: 100%;
}

.panel.fill > .panel-content {
  height: calc(100vh - var(--panel-height-adjust));
  height: calc(100dvh - var(--panel-height-adjust));
  max-height: calc(100vh - var(--panel-height-adjust));
  max-height: calc(100dvh - var(--panel-height-adjust));
}




@media only screen and (max-height: 830px) {

  .section-grid.auto-size.with-break {
    margin-bottom: 4rem;
  }

  .section-grid.auto-size.with-break .panel.fill,
  .section-grid.auto-size.with-break .layout-panel.fill {
    height: auto;
    max-height: unset;
  }

  .section-grid.auto-size.with-break .panel.fill > .panel-content {
    height: auto;
    max-height: unset;
  }

}



/****************************
 *      Dialog System       *
 ****************************/

.hidden {
  display: none;
}

dialog, .ui-dialog {
  --_fade-duration: 0.125s;
  --_dialog-animation-duration: 0.3s;

  border: var(--size-1px) solid var(--clr-border);
  outline: var(--size-1px) solid var(--clr-border);
  background-color: var(--clr-named-peppermint);
  background-color: var(--clr-named-white);

  -webkit-border-radius: var(--default-border-radius);
  -moz-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);

  box-shadow: 0px 4px 10px 1px var(--clr-border);

  min-width: 40ch;
  max-height: 90vh;
  max-height: 90dvh;

  /* padding: var(--default-padding); */

  opacity: 0;
  transform: scaleY(0);
  transition: opacity var(--_dialog-animation-duration) ease-out,
    transform var(--_dialog-animation-duration) ease-out,
    overlay var(--_dialog-animation-duration) ease-out allow-discrete,
    display var(--_dialog-animation-duration) ease-out allow-discrete;

  place-self: center;
}

/* Draggable dialog */
dialog[data-draggable="true"] .dialog-title {
  cursor: move;
  user-select: none;
}

dialog[data-draggable="true"].dragging {
  /* Optional: slightly reduce pointer-events for inner content during drag */
  /* pointer-events: none; */
  --_dialog-animation-duration: 0;
}

.ui-dialog {
  opacity: 1;
  transform: unset;
}

dialog::backdrop {
  /* background: hsl(100 100% 0 / 0); */
  animation: backdropFadeOut var(--_fade-duration) linear forwards;
  /* transition: opacity 0.5s linear; */
}

dialog[open] {
  opacity: 1;
  transform: scaleY(1);
}

dialog.no-backdrop[open]::backdrop {
  display: none;
}

dialog[open]::backdrop {
  animation: backdropFadeIn var(--_fade-duration) linear forwards;
}


dialog.backdrop-only-dialog {
  opacity: 0;
  position: absolute;
  height: 1px; width: 1px;
  top: 0;
  left: 0;
}

dialog button:focus {
  outline-width: var(--size-1px);
}


@keyframes backdropFadeIn {
  from {
    background: hsl(100 100% 0 / 0.0);
  }
  to {
    background: hsl(100 100% 0 / 0.5);
  } 
}

@keyframes backdropFadeOut {
  from {
    background: hsl(100 100% 0 / 0.5);
  } 
  to {
    background: hsl(100 100% 0 / 0.0);
  }
}

#loading-overlay-dialog {
  background-color: transparent;
  outline: none;
  box-shadow: none;
  border: none;
  
  width: 15rem;
  height: 15rem;

  position: relative;
  overflow: hidden;
}

#loading-overlay-dialog[open] {
  display: grid;
  grid-template-rows: 4fr 1fr;
  justify-items: center;
}

#report-loading-overlay .loading-timeout-message,
#loading-overlay-dialog .loading-timeout-message {
  opacity: 0;
  transform: translateY(20rem);
  transition: 
    transform .5s linear, 
    opacity .5s .5s linear;
  background-color: hsla(0, 0%, 60%, 0.575);
  text-align: center;
  align-content: center;
  border-radius: var(--default-border-radius);
  box-shadow: 0 0 10px 5px hsla(0, 0%, 60%, 0.575);
  height: 1.5rem;
}

#report-loading-overlay .loading-timeout-message {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

#report-loading-overlay .loading-timeout-message,
#loading-overlay-dialog .loading-timeout-message.show {
  opacity: 1;
  transform: translateY(0);
}

.developer-notes-panel {
  --_dialog-width: 40ch;
  --_dialog-height: 8rem;
  
  display: flex;
  gap: var(--default-gap);
  flex-direction: column-reverse;
  
  position: fixed;
  bottom: 4rem;
  right: calc((100vw * -1) + var(--_dialog-width) + (var(--default-padding) * 2));

  width: var(--_dialog-width);
  
  padding: 0;

  pointer-events: none;

  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;

  transition: transform 150ms ease-in;
}

.developer-notes-panel [data-lastpass-root] {
  pointer-events: all;
}

.notifications-panel {
  --_dialog-width: 50ch;
  display: flex;
  gap: var(--default-gap);
  flex-direction: column;
  position: fixed;
  bottom: 0;
  right: calc((100vw * -1) + var(--_dialog-width) + (var(--default-padding) * 2));
  width: var(--_dialog-width);
  height: 100%;
  padding: var(
--default-padding);
  transition: 
    transform 150ms ease-in,
    opacity 100ms 50ms linear;
}

.developer-notes-panel.closed,
.notifications-panel.closed {
  transform: translateX(calc(var(--_dialog-width) * 2));
  display: none;
}

.notifications-panel .notification {
  position: relative;
}

.notification .notification-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--default-gap);
}

.notification .notification-controls {
  display: grid;
  place-self: center;
  justify-items: center;
  font-size: 1.2rem;
  gap: 0;
}

.notification .notification-controls > .icon {
  font-size: 1.3rem;
}


.notification .unread-icon,
.notification.un-read .read-icon {
  --fa-display: none;
}

.notification.un-read .unread-icon {
  --fa-display: inline-block;
}


.notification .notification-body {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(var(--default-gap) / 2);
}


.notifications-panel .notification:not(:last-child)::after {
  content: '';
  background: linear-gradient(90deg, transparent 0%, var(--clr-named-ghost) 20%, var(--clr-named-ghost) 80%, transparent 100%);
  position: absolute;
  height: var(--size-1px);
  left: 0;
  right: 0;
  bottom: -0.5rem;
}



@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scaleY(0);
  }
}

.dialog-content {
  display: grid;
  grid-template-rows: 2.5rem 1fr;
  height: 100%;
  gap: var(--default-gap);
  margin: 1rem;
}

.dialog-content.no-title {
  grid-template-rows: 1fr;
}

.dialog-content .dialog-title,
.dialog-content .dialog-header {
  font-weight: var(--fw-700);
  font-size: var(--size-600);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: calc(var(--default-padding) / 2);
}

.dialog-content .dialog-body {
  display: grid;
  gap: var(--default-gap);
  padding-inline: var(--default-padding);
}

.dialog-content .dialog-body > ul {
  margin-left: 1.5rem;
}


.dialog-content .button-panel {
  display: flex;
  align-content: center;
  justify-content: end;
}



.embedded-frame {
  border: none;
}

.developer-notes-dialog {
  pointer-events: all;

  position: static;
  place-self: unset;

  background: repeating-linear-gradient(
  45deg,
  #fff241,
  #fff241 10px,
  #404040 10px,
  #404040 20px);
}

.developer-notes-dialog .dialog-content {
  z-index: calc(inherit + 1);
  grid-template-rows: 2rem auto;
  background-color: white;
  background-color: hsl(var(--hsl-named-black), 0.85);
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  padding-top: calc(var(--default-padding) / 2);
  color: white;
}

.developer-notes-dialog .dialog-content .dialog-title {
  font-weight: var(--fw-600);
  display: flex;
  justify-content: space-between;
  align-items:center;
}

.dialog-title .icon-close-dialog-button {
  margin-left: auto;
}

.dialog-title .icon-close-dialog-button::after {
  position: static;
  font-size: 1.25rem;
  margin-left: auto;
}

.alert-message-dialog {
  /* --_dialog-height: 30ch;
  --_dialog-width: 60ch; */
}








/****************************
 *      Page Components     *
 ****************************/

/* Section Styling */
.job-review-tabs {
  display: flex;
  flex-wrap: wrap;

  gap: calc(var(--default-gap) / 2);

  align-items: center;
  justify-content: start;
}

.job-review-tabs > button {
  flex-basis: max-content;
}

.job-review-tabs > button[data-type="primary"] {
  pointer-events: none;
}



header.section-grid {
  --_block-gap: 0.7rem;
}

.page-header {
  --_column-sizing: 1fr;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--_column-sizing);
  gap: var(--default-gap);

  align-items: center;
}



.page-header .page-title {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: var(--size-700);
  line-height: 1;
}

.page-title > select,
.page-title > input {
  font-size: revert;
  line-height: revert;
  margin-inline: var(--default-spacing);
  width: auto;
}

.page-header .header-section {
  display: flex;
  align-items: center;
  gap: var(--default-gap);
}

.radio-group,
.radio-button-group {
  display: flex;
  gap: var(--default-gap);
  align-items: center;
  margin: 0;
  padding: 0;
}

.radio-button-group > div:not([class]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

ul.radio-button-group {
  list-style: none;
}

.radio-group:not(.no-grow) > *, 
.radio-button-group:not(.no-grow) > * {
  flex-grow: 1;
}

@media only screen and (max-width: 64rem) {
  .form-group .radio-group,
  .form-group .radio-button-group {
    display: grid;
    grid-template-columns: 2fr 1fr;
    justify-content: space-between;
  }
}






.has-tooltip {
  position: relative;
  display: inline-block;
}

/****************************
 *      Tooltip System      *
 ****************************/

/* Tooltip text */
.has-tooltip .tooltip-text {
  visibility: hidden;
  background-color: var(--tooltip);
  color: var(--clr-named-stratos);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  font-size: initial;
  font-weight: var(--fw-400);

  width: 20ch;
  position: absolute;
  z-index: 1;
}

.has-tooltip:hover .tooltip-text {
  visibility: visible;
}










/****************************
 *      Utility Classes     *
 ****************************/

.no-padding {
  padding: 0;
}

/* Legacy background classes - consider modernizing */
.bg-alternate-row {
  background-color: var(--clr-alternate-row-background);
}

.bg-fog {
  background-color: var(--clr-named-fog);
}

.bg-blue {
  background-color: var(--clr-named-astral);
}

.bg-transparent {
  background-color: transparent;
}

.bg-green {
  background-color: var(--clr-named-apple);
}

.bg-red {
  background-color: var(--clr-named-error);
  color: var(--clr-named-white);
  font-weight: var(--fw-700);
}

.bg-yellow {
  background-color: var(--popup-warning);
}

.bg-black {
  background-color: var(--clr-named-black);
}

/* Legacy class aliases for backward compatibility */
.BGGray0 {
  background-color: var(--clr-alternate-row-background);
}

.BGGray1 {
  background-color: var(--clr-named-fog);
}

.BGBlue {
  background-color: var(--clr-named-astral);
}

.BGCol {
  background-color: transparent;
}

.BGGreen {
  background-color: var(--clr-named-apple);
}

.BGRed {
  background-color: var(--clr-named-error);
  color: var(--clr-named-white);
  font-weight: var(--fw-700);
}

.BGYellow {
  background-color: var(--popup-warning);
}

.BGBlack {
  background-color: var(--clr-named-black);
}

.mandatory-background {
  background-color: color(from var(--clr-named-error) srgb r g b / 0.28);
}

/* Legacy alias */
.MandBackground {
  background-color: color(from var(--clr-named-error) srgb r g b / 0.28);
}

.table-grid {
  display: grid;
  gap: calc(var(--default-gap) / 2);
  align-content: center;

  grid-auto-rows: min-content;
}

.table-grid .header {
  font-weight: var(--fw-700);
}

.table-grid .align-center {
  justify-self: center;
}

.table-grid .align-right {
  justify-self: end;
}

.approvals-label-grid {
  grid-template-columns: min-content auto repeat(4, max-content);
}

.licensed-users-grid {
  grid-template-columns: 0.45fr repeat(2, max-content);
}

[data-licence-option] {
  user-select: none;
}

.summary-dashboard-filter-dialog {
  min-width: 30rem;
  width: 50rem;
  max-width: 50%;

  min-height: 40rem;

}

@media only screen and (max-width: 64rem) {
  .summary-dashboard-legend {
    padding-top: 0;
  } 
}


.summary-page-heading {
  --_grid-columns: 3;

  display: grid;
  grid-template-columns: repeat(var(--_grid-columns), 1fr);
  grid-auto-rows: auto;
  align-items: center;
  gap: var(--default-gap);
}

.summary-page-heading:has(+ #SummaryPageDetails > .ui-tabs:not([hidden])) {
  margin-bottom: 0;
}

.summary-page-heading > * {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.summary-week-selector,
.summary-submit-buttons {
  justify-self: end;
}

.summary-filters-section {
  grid-column: span 2;

  display: flex;
  align-content: center;
  gap: 1rem;
}

.summary-filters-section > label {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.summary-totals-table {
  grid-template-rows: auto 1fr;
}

.summary-mid-panel {
  grid-template-columns: 55ch 1fr;
  min-height: 20%;
  align-items: start;
}

#divSummaryChart svg>g>g:nth-of-type(2) {
  /* transform: translate(-10rem, -2.5rem);
  scale: 1.2; */
}

.summary-bottom-panel {
  grid-column: span var(--_grid-columns);
}

.crm-panel-content {
  display: grid;
  grid-template-columns: auto 25ch;
  gap: var(--default-gap);
}

.crm-panel-data {
  overflow: auto;
}

.crm-panel-data tr:not(:has(th)):hover {
  background-color: var(--clr-named-hintofgreen);
}

.crm-panel-buttons {
  display: grid;
  grid-auto-rows: min-content;
  /* justify-content: end; */
  gap: calc(var(--default-gap) / 2);
}



#popup-dialog {
  height: 50dvh;
  width: 50vw;
  padding: 0;
}

#popup-dialog  #popup-content{
  width: 100%;
  height: 100%;
  border: none;
}


.team-chart-page-header {
  --_grid-columns: 3;
  --_grid-rows: 2;

  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--_grid-columns), 1fr);
  grid-template-rows: repeat(var(--_grid-rows), max-content);
  gap: var(--default-gap);
}

.team-chart-approvals-button {
  justify-self: end;
}

.team-chart-table-info {
  grid-template-columns: 3fr 1fr 2fr 1fr;
  grid-auto-rows: 1fr;
  grid-template-areas:
    "client   a        noteslbl   b"
    "project  worktype notes      pages"
    "activity totals   notes      pager";
  align-items: center;
}


.team-chart-table-info #client-info {
  grid-area: client;
}

.team-chart-table-info #RepPageTo {
  grid-area: pages;
}

.team-chart-table-info #project-info {
  grid-area: project;
}

.team-chart-table-info #worktype-info {
  grid-area: worktype;
}

.team-chart-table-info label[for="TblNotes"] {
  grid-area: noteslbl;
}

.team-chart-table-info #TblNotes {
  grid-area: notes;
  align-self: stretch;
}

.team-chart-table-info #Pager {
  grid-area: pager;
  align-self: end;

  display: flex;
}

.team-chart-table-info #activity-info {
  grid-area: activity;
}

.team-chart-table-info #total-info {
  grid-area: totals;
}



#tdCalBar {
  display: flex;
  gap: 0.5rem;

  align-items: center;
  justify-self: end;
}

#DateDiv {
  position: relative;
}

.calendar-button input[type="date"],
.calendar-button input[type="month"],
.calendar-button input[type="week"],
#dpDateDiv, #weekendingDate {
  opacity: 0;
  position: absolute;
  top: 0.25rem;
  right: 0;
}

#DayTabs .week-tab {
  min-width: 10%;
}

#DayTabs .week-tab > a {
  display: flex;
  justify-content: space-between;
}

.timesheet-marker::marker {
  font-size: 1.5rem;
  line-height: 1;
}

#tblActivities tr:not(:has(th)):hover,
#tblExpenses tr:not(:has(th)):hover {
  background-color: var(--clr-named-hintofgreen);
}

.timesheets-bottom-panel .panel-content {
  --_panel-block-gap: calc(var(--default-gap) / 4); 
  padding-bottom: calc(var(--default-padding) / 4);
}


#TblPiano {
  border: var(--size-1px) solid var(--clr-named-ghost);
  border-radius: var(--default-border-radius);
  overflow: clip;
}

#TblPiano > table {
  width: 100%;
}

#TblPiano th:not(:first-child) {
  border-left: var(--size-1px) solid var(--clr-named-ghost);
}

.PianoBar > table {
  border: var(--size-1px) solid var(--clr-named-ghost);
}

.PianoBar td {
  background-color: var(--clr-named-hintofgreen);
}

.PianoBar td:not(:first-child) {
  border-left: var(--size-1px) solid var(--clr-named-ghost);
}

.PianoBar td:hover {
  background-color: var(--clr-named-ghost);
}

.time-item-form-grid {
  grid-template-columns: repeat(2, 1fr);
}

.week-selector {
  display: flex;
  align-items: center;
  gap: calc(var(--default-gap) / 2);

  justify-self: end;
}

A.info {
  position: relative;
  text-decoration: none;
}

A.info span {
  display: none;
}

A.info:hover span {
  display: block;
  min-width: 30ch;
  max-width: 50ch;

  position: absolute;
  top: 1.5rem;
  z-index: 30;

  padding: calc(var(--default-padding) / 2) var(--default-padding);
  border-radius: var(--default-border-radius);
  border: var(--size-1px) solid var(--clr-border);
  background-color: var(--clr-named-peppermint);
}

.time-span-grid {
  --_time-span-increments: 120;
  display: grid;
  grid-template-columns: repeat(var(--_time-span-increments), 1fr);
  height: 100%;
}

tr:has(.time-span-grid) {
  height: 1px;
}

td:has(.time-span-grid) {
  padding: 0;
  height: inherit;
}

.time-span-grid > .time-span {
  cursor: pointer;
}

.time-span.BGYellow {
  background-color: #FF9900;
}


.time-span-tooltip, 
.tooltip {
  display:none;
  gap: calc(var(--default-gap) / 2);
  padding: var(--default-padding);

  min-width: 40ch;
  max-width: 70ch;
  
  background-color: var(--tooltip);

  border: var(--size-1px) solid var(--clr-border);
  -webkit-border-radius: var(--default-border-radius);
  -moz-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);

  box-shadow: 0px 4px 10px 1px var(--clr-border);
}

.time-span-tooltip {
  grid-template-columns: auto 1fr;
}

.tooltip .tooltip-title {
  font-size: var(--size-500);
  font-weight: var(--fw-600);
}

.time-span-tooltip label {
  font-weight: var(--fw-600);
}

.time-span-tooltip .status-icons {
  justify-self: end;
}

.time-span-tooltip.shown,
.tooltip.shown {
  display:grid;
  position:fixed;
  overflow:hidden;
}

.time-span-separator {
  background-color: var(--clr-named-raven);
  max-width: 1rem;
  width: calc(var(--size-1px) * 2);
}

.time-span {
  border-block: 1px solid var(--clr-named-ghost);
}

.time-span.start-span {
  border-top-left-radius: var(--default-border-radius);
  border-bottom-left-radius: var(--default-border-radius);
  border-left: 1px solid var(--clr-named-ghost);
}

.time-span.end-span {
  border-top-right-radius: var(--default-border-radius);
  border-bottom-right-radius: var(--default-border-radius);
  border-right: 1px solid var(--clr-named-ghost);
}


.time-entry-start-end-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, fit-content);
  gap: var(--default-gap);
}

.enter-expense-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: fit-content;
  gap: var(--default-gap);

  justify-content: start;
  align-items: center;
}

.enter-expense-values-grid.base-currency {
  grid-template-columns: repeat(2, 1fr);
}

.enter-expense-values-grid .show-when-mileage {
  display: none;
}

.enter-expense-values-grid.mileage-expense .show-when-mileage {
  display: grid;
}

.enter-expense-values-grid.base-currency .hide-when-base {
  display: none;
}


.analysis-filter-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: var(--default-gap);
  align-items: center;
}




.edit-page-heading-row {
  display: grid;
  gap: var(--default-gap);
  grid-template-rows: repeat(var(--heading-rows, 1), auto);
  grid-template-columns: min-content max-content 1fr;
}

.edit-page-heading-row select {
  width: 100%;
  grid-column: auto / -1;
}

.edit-page-heading-row:has(.extra-actions[hidden]) {
  grid-template-columns: max-content 1fr;
}

/* WIP / Debtors / FinSum (JobReview) */

.section-grid.wip-grid {
  grid-template-columns: 1fr 16rem;
  grid-auto-rows: 1fr;
}

.section-grid.wip-grid:not(.wip):not(.debtors) {
  grid-template-columns: 1fr;
}

.section-grid.wip-grid:not(.wip):not(.debtors) :has(> #TblRight),
.section-grid.wip-grid:not(.wip):not(.debtors) > #TblRight {
  display: none;
}

.wip-tag-controls {
  --default-gap: 0.5rem;
  --_toggle-duration: 1s;
}

.wip-tag-controls.closed {
  gap: 0;
}

.wip-left-panel {
  grid-template-rows: 1fr 10ch;
  grid-column: 1;
  height: calc(100vh - var(--panel-height-adjust));
  height: calc(100dvh - var(--panel-height-adjust));
  max-height: calc(100vh - var(--panel-height-adjust));
  max-height: calc(100dvh - var(--panel-height-adjust));
}

.section-grid.wip-grid:not(.wip):not(.debtors) .wip-left-panel,
.wip-grid.debtors .wip-left-panel {
  grid-template-rows: 1fr;
}

.wip-left-panel {
  grid-auto-rows: auto;
}

.wip-right-panel {
  grid-column: 2;
  grid-row: 1 / -1; 
}

.wip-grid #TblNotes {
  grid-column: 1;
  grid-row: 2;
}

.wip-grid #TblNotes > textarea {
  height: 100%;
}

.wip-tag-controls-content {
  display: grid;
  gap: var(--default-gap);

  grid-template-rows: 1fr;
  transform: scale(1);
  opacity: 1;

  transition: 
    grid-template-rows var(--_toggle-duration), 
    transform calc(var(--_toggle-duration) / 2),
    opacity calc(var(--_toggle-duration) / 2) calc(var(--_toggle-duration) / 2);
}

.wip-tag-controls.closed .wip-tag-controls-content {
  grid-template-rows: 0fr;
  transform: scale(0.75);
  opacity: 0.5;
}

.wip-tag-controls.closed .wip-tag-controls-content > div {
  overflow: hidden;
}




/* Budgets (JobReview) */
.section-grid.budget-grid {
  grid-template-columns: 1fr 16rem;
  grid-template-rows: 1fr;

  height: 100%;

  transition: 
    grid-template-columns 250ms linear,
    gap 250ms linear;
}

.section-grid.budget-grid.settings-tab {
  grid-template-columns: 1fr 0;
  gap: 0;
}

.budget-right-panel {
  padding-top: var(--default-tabs-height);
  transition: opacity, 200ms linear;
}

.section-grid.budget-grid.settings-tab .budget-right-panel {
  opacity: 0;
}

.section-grid.budget-grid .budget-right-panel .panel-content {
  overflow: hidden;
}


/* Documents (job Review) */
.documents-grid {
  display: grid;
  grid-template-columns: 1fr 10rem;
  gap: var(--default-gap);
}


/* BvA Dashboard / Report */
.bva-dashboard-main {
 display: grid;
 grid-template-columns: 50ch 1fr;  
 gap: var(--default-gap);
}

.bva-dashboard-main.report {
 grid-template-columns: 70ch 1fr;  
}


/* Invoicing Form */
.section-grid.invoicing-grid {
  grid-template-rows: repeat(3, auto);
}

.invoicing-grid .invoice-details-panel {
  view-transition-name: invdetailspanel;
}

.invoicing-grid .invoice-details-tabs {
  view-transition-name: invdetailstabs;
}

.invoicing-grid .invoice-details-content {
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.invoicing-grid .invoice-line-type-selection {
  display: grid;
  gap: calc(var(--default-gap) / 2);
}
.invoicing-grid .invoice-bill-text-input {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: calc(var(--default-gap) / 2) var(--default-gap);
  align-items: center;
}



/* Task Manger (Master) */
.page-header.task-manager-header {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--default-gap);
}

.task-manager-header .filters-section {
  grid-column: 1 / -1;

  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}



/* Schedule */
table tr.item-separator {
  position: relative;
}

table tr.item-separator:not(:last-child)::before {
  content: '';
  background: linear-gradient(90deg, transparent 0%, var(--clr-named-ghost) 20%, var(--clr-named-ghost) 80%, transparent 100%);
  position: absolute;
  height: var(--size-1px);
  left: 0;
  right: 0;
  bottom: 1rem;
}


.schedule-value {
  position: relative;
  display: grid;
  align-items: center;
}

.schedule-value input {
  text-align:right;
}

.schedule-value span {
  position: absolute;
  left: 0.3rem;
  /* top: 0.325rem; */
  color: var(--clr-named-apple);
  font-weight: var(--fw-900);
}



/* Staff Planner */
.page-header.staff-planner-header {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--default-gap);
}

.staff-planner-header .planner-filters-section {
 grid-column: span 2; 
 justify-content: center;
}

.staff-planner-header .planner-buttons-section {
  grid-column: span 3;
  justify-self: end;
}



.staff-planner-header .planner-options-section {
  grid-column: span 3;

  display: grid;
  gap: var(--default-gap);
  grid-template-columns: auto 1fr;
}

.staff-planner-header .analysis-filter-section {
  grid-column: span 3;

  display: grid;
  gap: var(--default-gap);
  grid-template-columns: repeat(3, 1fr);

  align-items: center;
  justify-items: end;
}


@media only screen and (max-width: 87.75rem) {
  .staff-planner-header .view-filters-section {
    grid-column: span 2; 
   }

   .staff-planner-header .planner-buttons-section {
    grid-column: span 3;
  }
}

@media only screen and (max-width: 64rem) {
  .page-header.staff-planner-header {
    grid-template-rows: repeat(3, auto);
  }

  .staff-planner-header .planner-options-section {
    grid-row: 2;
    grid-column: span 6;

    grid-template-columns: repeat(3, 1fr);
  }

  .planner-options-section .radio-button-group {
    grid-column: span 2;
  }
  
  .staff-planner-header .analysis-filter-section {
    grid-column: span 6;
    grid-row: 3;
    justify-items: start;
  } 
}

.planner-main-panel,
.planner-bottom-panel {
  min-height: 7.375rem;
}

.planner-main-panel {
  resize: vertical;
}

.planner-project-header {
  font-weight: var(--fw-700);
}

.planner-name-column {
  min-width: 30ch; 
  width: 30ch;
  max-width: 30ch;
  cursor:pointer;
}





.invoice-manager .invoice-manager-main-panel {
  display: grid;
  grid-template-columns: auto 38.585rem;
  gap: var(--default-gap);
}

.invoice-manager .left-col {
  resize: horizontal;
}

.invoice-manager .left-col {
  min-width: 40vw;
}

.invoice-manager .right-col {
  min-width: 20rem;
}

.invoice-manager .grid-column-header,
.invoice-manager .icon-column-header {
  color: var(--clr-named-stratos);
}


.invoice-manager .printed,
input.grid-checkbox.print {
  accent-color: #ffaaaa;
}

.invoice-manager .printed::after {
    background-color: #ffaaaa;
}


.invoice-manager .emailed,
input.grid-checkbox.email {
  accent-color: #92c100;
}

.invoice-manager .emailed::after {
    background-color: #92c100;
}

.invoice-manager .menu-dot,
.invoice-manager .grid-dot {
    position: relative;
}

.invoice-manager .grid-dot {
  isolation: isolate;
  display: grid;
}

.invoice-manager .menu-dot::after,
.invoice-manager .grid-dot::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1.55rem;
  height: 1.55rem;
  top: -25%;
  left: -23%;
  border-radius: 50%;
}

.invoice-manager .headerdoc-icon,
.invoice-manager .printall,
.invoice-manager .emailall,
.invoice-manager .backingsheetall {
  display: grid;
  align-content: center;
  justify-content: center;
}

.invoice-manager .invoice-preview-pane {
  border: none;
  width: 100%;
}

.invoice-manager .k-grid table {
  border-spacing: 0;
}

.invoice-manager .k-selected,
.invoice-manager .k-grid table tr:hover {
  background-color: var(--clr-named-hintofgreen);
}

.invoice-manager .k-grid-header-locked>table, 
.invoice-manager .k-grid-header-wrap>table {
  margin-bottom: 0;
}

.invoice-manager .k-grid-footer-wrap, 
.invoice-manager .k-grid-header-wrap,
.invoice-manager .k-widget,
.invoice-manager .k-filter-row th, 
.invoice-manager .k-grid-header th.k-header,
.invoice-manager div.k-grid-header,
.invoice-manager div.k-grid-footer,
.invoice-manager div.k-grid-footer td,
.invoice-manager .k-grid td,
.invoice-manager .k-autocomplete {
  border: none;
}

.invoice-manager .k-grid-header th.k-header,
.invoice-manager .k-filter-row th {
  border-color: var(--clr-named-ghost);
  border-style: solid;
  border-width: 0;
  border-bottom-width: 1px;
}

.invoice-manager div.k-grid-footer td {
  border-color: var(--clr-named-ghost);
  border-style: solid;
  border-width: 0;
  border-top-width: 1px;
}

.invoice-manager .k-dirty {
  display: none;
}

.k-popup, 
.k-widget.k-tooltip.k-popup {
  background-color: var(--clr-named-peppermint);
  border: var(--size-1px) solid var(--clr-named-stratos);
  border-radius: var(--default-border-radius);
}

.k-icon.fa-light {
  font-size: revert;
  height: auto;
  width: auto;
  line-height: 1;
}

.invoice-manager .k-filter-row .k-button {
  height: auto;
  min-height: 0.25rem;
  margin-left: 1rem;
}

.invoice-manager .layout-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.invoice-manager .layout-item {
  padding: 10px;
  display: flex;
  align-items: center;
}

.invoice-manager .layout-icon {
  margin-right: 10px;
}

.invoice-manager .layout-item:hover {
  background: #dddddd;
}

.invoice-manager #layoutselector {
  max-height: 50vh;
  overflow: hidden;
}

.invoice-manager #layoutselector .dialog-body {
  overflow: auto;
  max-height: 35vh;
}

.invoice-manager .progresscontent {
  height: 100%;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
   */
   overflow: hidden;
}

.invoice-manager .progresslabel {
  flex: 0 0 20px;
  width: 100%;
  text-align: center;
}




.invoice-manager .k-progress-status-wrap {
  border-color: var(--clr-named-ghost);
  border-radius: var(--default-border-radius);
}

.invoice-manager .k-selected .k-progress-status-wrap {
  background-color: var(--clr-named-apple);
}








.integration-sync-settings-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sync-sub-group {
  display: grid;
  gap: var(--default-gap);
}

.sync-sub-group label {
  padding-left: 2rem;
}

.plugin-supported-feature-table {
  display: flex;
  flex-wrap: wrap;
  gap: var(--default-gap);
}

.plugin-supported-feature-table .feature {
  padding: 0.5rem;

  background-color: var(--clr-named-hintofgreen);
  border: 1px solid var(--clr-border);
  border-radius: var(--default-border-radius);

}

.integration-log-message-dialog {
  width: 70vw;
  min-width: 70vw;
  min-height: 50vh;
  max-height: 80vh;
}



th.WeekEndHdr, td.WeekEndHdr {
  background-color: var(--clr-named-fog);
}



.sub-page-popup-dialog {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0;
}

.sub-page-popup-dialog .button-panel {
  padding: 0 calc(var(--default-padding) + var(--scrollbar-thickness)) var(--default-padding) var(--default-padding);
}



input[type="time"].no-picker::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

table.manage-ot-table .AR {
  border-bottom: var(--size-1px) solid var(--clr-border);
}




.alert-text {
  color: var(--clr-named-error);
  justify-self: center;
}

.text-error {
  color: var(--clr-named-error);
}

/* Legacy alias */
.red-text {
  color: var(--clr-named-error);
}


.form-group div[data-lastpass-icon-root] {
  display: none;
}

*[hidden][hidden],
.form-group[hidden] {
  display: none;
}

.form-group.toil-rate-group > input:nth-of-type(2) {
  display: none;
}

.form-group.toil-rate-group > input[disabled] {
  display: none;
}

.form-group.toil-rate-group > input[disabled] + input:nth-of-type(2) {
  display: block;
}

.full-width {
  width: 100%;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}


.no-gap.no-gap {
  gap: 0;
}

.no-gap-x.no-gap-x {
  gap: 0 var(--default-gap);
}

.no-gap-y.no-gap-y {
  gap: var(--default-gap) 0;
}



.small-gap {
  --default-gap: calc(var(--default-spacing) / 2);
}

.large-gap {
  --default-gap: calc(var(--default-spacing) * 2);
}


.align-start {
  align-items: start;
}

.align-centered {
  align-items: center;
}

.align-end {
  align-items: end;
}


.justify-start {
  justify-items: start;
}

.justify-centered {
  justify-items: center;
}

.justify-end {
  justify-items: end;
}

.content-start {
  justify-content: start;
}

.content-centered {
  justify-content: center;
}

.content-end {
  justify-content: end;
}


.self-start {
  justify-self: start;
}

.self-centered {
  justify-self: center;
}

.self-end {
  justify-self: end;
}


.vertical-start,
.align-top {
  align-self: start;
  margin-top: 0.325rem
}

.vertical-start.no-margin,
.align-top.no-margin {
  margin-top: initial;
}

.vertical-end,
.align-bottom {
  align-self: end;
}


.place-centered {
  place-self: center;
}



.allow-overflow {
  overflow: auto;
}


.ml-auto {
  margin-left: auto;
}

.ml-1rem {
  margin-left: 1rem;
}

.ml-2rem {
  margin-left: 2rem;
}


.mr-auto {
  margin-right: auto;
}

.mr-1rem {
  margin-right: 1rem;
}

.mr-2rem {
  margin-right: 2rem;
}

.mlr-auto {
  margin-inline: auto;
}


.mb-1rem {
  margin-bottom: 1rem;
}

.mt-1rem {
  margin-top: 1rem;
}


.resize-v {
  resize: vertical;
  overflow-y: auto;
  min-height: var(--_min-height, initial);
}


.panel.fill.resize-v > .panel-content {
  max-height: max-content;
  height: max-content;
}

.resize-h {
  resize: horizontal;
  overflow-x: auto;
  min-width: var(--_min-width, initial);
}

.resize-b {
  resize: both;
  
  min-width: var(--_min-width, initial);
  min-height: var(--_min-height, initial);
}

.bold-text {
  font-weight: var(--fw-700);
}

input.error,
select.error {
  background-color: pink;
}

.no-user-select {
  user-select: none;
}

.no-min-height {
  min-height: unset;
}

.loading-bg {
  --_loading-color: color(from var(--clr-named-hintofgreen) srgb r g b / 0.5);
  animation: ElementLoadingAnimationBG var(--_scale-timing) linear infinite;
}

@keyframes ElementLoadingAnimationBG {
  0% {
    background-color: var(--clr-named-white);
  }
  25% {
    background-color: var(--_loading-color);
  }
  50% {
    background-color: var(--clr-named-white);
  }
  75% {
    background-color: var(--_loading-color);
  }
  100% {
    background-color: var(--clr-named-white);
  }
}



.altRow, .alt-row {
  background-color: var(--clr-named-hintofgreen);
}

.no-shrink {
  flex-shrink: 0;
}




#editor-container > table.k-editor {
  height: 100%;
}

#PolicyStregth {
  display: grid;
  justify-content: start;
  align-items: center;
  padding-inline: var(--default-padding);
  border-radius: var(--default-border-radius);
}


/****************************
 *      Media Queries       *
 ****************************/

/* Consolidated media queries for responsive design */

@media only screen and (max-width: 64rem) {
  /* Mobile layout adjustments */
  .form-section {
    --_form-grid-columns: 1;
  }

  .form-section > .spacer {
    display: none;
  }

  .options-section .options-content,
  .options-section.no-auto-layout .options-content .options-content {
    --_grid-columns: 1;
  }

  .form-group .radio-group,
  .form-group .radio-button-group {
    display: grid;
    grid-template-columns: 2fr 1fr;
    justify-content: space-between;
  }

  .summary-dashboard-legend {
    padding-top: 0;
  }

  .page-header.staff-planner-header {
    grid-template-rows: repeat(3, auto);
  }

  .staff-planner-header .planner-options-section {
    grid-row: 2;
    grid-column: span 6;
    grid-template-columns: repeat(3, 1fr);
  }

  .planner-options-section .radio-button-group {
    grid-column: span 2;
  }
  
  .staff-planner-header .analysis-filter-section {
    grid-column: span 6;
    grid-row: 3;
    justify-items: start;
  }

  .coretime-app-container {
    padding-inline-start: var(--default-padding);
  }

  #divUserProfile {
    height: auto;
  }

  #divselAssignedEmps {
    height: auto;
  }

  #divActRestrict,
  #divExpRestrict {
    overflow: visible;
    height: auto;
  }

  #secondary-frameset {
    display: grid;
    grid-template-columns: 0 1fr 0;
  }

  #main-frameset #outlookX {
    opacity: 0;
    position: absolute;
    top: var(--_header-height);
    left: 0;
    
    width: 17.5rem;
    height: calc(100dvh - var(--_header-height));

    transition: opacity .25s linear;
    pointer-events: none;
  }

  #main-frameset.menu-open #outlookX {
    opacity: 1;
    visibility: visible;
    box-shadow: hsla(111, 50%, 62%, 0.5) 0px 0.33rem 0.33rem;
    pointer-events: all;
  }
}

@media only screen and (max-width: 87.75rem) {
  .staff-planner-header .view-filters-section {
    grid-column: span 2; 
  }

  .staff-planner-header .planner-buttons-section {
    grid-column: span 3;
  }
}

@media only screen and (max-height: 830px) {
  .section-grid.auto-size.with-break {
    margin-bottom: 4rem;
  }

  .section-grid.auto-size.with-break .panel.fill,
  .section-grid.auto-size.with-break .layout-panel.fill {
    height: auto;
    max-height: unset;
  }

  .section-grid.auto-size.with-break .panel.fill > .panel-content {
    height: auto;
    max-height: unset;
  }

  .section-grid.auto-size.with-break .button-panel:not(.in-parent) {
    grid-row: unset;
    position: fixed;
    bottom: 1rem;
    left: 0.85rem;
    right: 0.85rem;
    height: min-content;
    padding: calc(var(--default-padding) / 2);
    border: 1px solid var(--clr-named-fog);
    border-radius: var(--default-border-radius);
    box-shadow: 0px 4px 10px 1px var(--clr-border);
    background-color: var(--clr-named-white);
  }
}

@media only screen {
  .page-break {
    margin-block: calc(var(--default-padding) * 2);
  }

  .coretime-app-container:has(.statement) {
    background-color: var(--clr-named-ghost);
  }

  .statement {
    --_page-height: 297mm;
    --_page-width: 210mm;

    height: var(--_page-height);
    min-height: var(--_page-height);
    max-height: var(--_page-height);
    
    width: var(--_page-width);
    min-width: var(--_page-width);
    max-width: var(--_page-width);
    
    margin-inline: auto;
    background-color: var(--clr-named-white);
    border-radius: var(--default-border-radius);
    box-shadow: 3px 5px 15px 0px hsl(224deg 100% 11% / 70%);
  }
  
  .statement > table {
    padding: 10mm;
  }
}

@media only print {
  .screen-only {
    display: none;
  }
}

/****************************
 *      Animations          *
 ****************************/

::view-transition-group(root) {
  animation-duration: 0.25s;
  animation-fill-mode: both;
}

#LicenceDIV { 
  z-index: -1; 
}

/****************************
 *      Calculator Dialog   *
 ****************************/

#calculator-dialog {
  --_calculator-width: 20rem;
  --_calculator-height: 28rem;
  --_calculator-header-height: 2.5rem;
  --_calculator-display-height: 4.3rem;
  --_calculator-button-size: 3rem;
  --_calculator-gap: 0.25rem;
  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: var(--_calculator-width);
  height: var(--_calculator-height);
  min-width: var(--_calculator-width);
  min-height: var(--_calculator-header-height);
  max-width: 90vw;
  max-height: 90vh;
  
  margin: 0;
  padding: 0;
  border: var(--size-1px) solid var(--clr-border);
  border-radius: var(--default-border-radius);
  background-color: var(--clr-named-white);
  box-shadow: 0px 8px 25px 5px rgba(0, 0, 0, 0.3);
  
  cursor: grab;
  user-select: none;
  overflow: hidden;
  z-index: 9999;
  
  transition: 
    width 0.3s ease,
    height 0.3s ease,
    transform 0.3s ease;
}

#calculator-dialog:active {
  cursor: grabbing;
}

#calculator-dialog.minimized {
  cursor: default;
}

#calculator-dialog.minimized .calculator-header {
  cursor: default;
}

#calculator-dialog .calculator-header button:hover {
  background-color: color-mix(in srgb, var(--clr-named-stratos) 85%, white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Focus styles for calculator */
#calculator-dialog:focus {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

#calculator-dialog:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

#calculator-dialog.minimized {
  width: 15rem;
  height: var(--_calculator-header-height);
  bottom: 0;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  cursor: default;
}

#calculator-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: backdropFadeIn 0.125s linear forwards;
}

/* Backdrop for div-based calculator */
.calculator-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  animation: backdropFadeIn 0.125s linear forwards;
}

/* Calculator Header */
.calculator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  height: var(--_calculator-header-height);
  padding: 0 var(--default-padding);
  
  background-color: var(--clr-named-stratos);
  color: var(--clr-named-white);
  
  font-weight: var(--fw-600);
  font-size: var(--size-500);
  
  cursor: grab;
}

.calculator-header:active {
  cursor: grabbing;
}

.calculator-title {
  flex: 1;
  text-align: center;
  margin-right: 2rem; /* Space for controls */
}

.calculator-controls {
  display: flex;
  gap: calc(var(--default-gap) / 2);
  align-items: center;
}

.calculator-btn {
  display: grid;
  place-items: center;
  
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  
  border: none;
  border-radius: calc(var(--default-border-radius) / 2);
  background-color: transparent;
  color: var(--clr-named-white);
  
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.calculator-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.calculator-btn:active {
  background-color: rgba(255, 255, 255, 0.3);
}

.calculator-btn .icon {
  font-size: var(--size-400);
}

/* Calculator Body */
.calculator-body {
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--_calculator-header-height));
  padding: var(--_calculator-gap);
  gap: var(--_calculator-gap);
  
  background-color: var(--clr-named-peppermint);
}

#calculator-dialog.minimized .calculator-body {
  display: none;
}

/* Calculator Display */
.calculator-display {
  display: flex;
  flex-direction: column;
  gap: calc(var(--_calculator-gap) / 2);
  
  height: var(--_calculator-display-height);
  padding: var(--default-padding);
  
  background-color: var(--clr-named-white);
  border: var(--size-1px) solid var(--clr-border);
  border-radius: var(--default-border-radius);
  
  font-family: 'Courier New', monospace;
  font-weight: var(--fw-600);
}

.calculator-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  font-size: var(--size-700);
  color: var(--clr-named-stratos);
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-result {
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  font-size: var(--size-400);
  color: var(--clr-named-raven);
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Calculator Buttons */
.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--_calculator-gap);
  flex: 1;
}

.calc-btn {
  display: grid;
  place-items: center;
  
  height: var(--_calculator-button-size);
  min-height: var(--_calculator-button-size);
  
  border: var(--size-1px) solid var(--clr-border);
  border-radius: var(--default-border-radius);
  background-color: var(--clr-named-white);
  color: var(--clr-named-stratos);
  
  font-size: var(--size-600);
  font-weight: var(--fw-600);
  font-family: inherit;
  
  cursor: pointer;
  transition: 
    background-color 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
  
  user-select: none;
}

.calc-btn:hover {
  background-color: var(--clr-named-hintofgreen);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calc-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.calc-btn .icon {
  font-size: var(--size-500);
}

/* Button Types */
.calc-btn.number {
  background-color: var(--clr-named-white);
}

.calc-btn.operator {
  background-color: var(--clr-named-astral);
  color: var(--clr-named-white);
}

.calc-btn.operator:hover {
  background-color: color(from var(--clr-named-astral) srgb r g b / 0.8);
}

.calc-btn.equals {
  background-color: var(--clr-primary);
  color: var(--clr-named-white);
}

.calc-btn.equals:hover {
  background-color: var(--clr-primary-hover);
}

.calc-btn.clear,
.calc-btn.clear-entry {
  background-color: var(--clr-named-error);
  color: var(--clr-named-white);
}

.calc-btn.clear:hover,
.calc-btn.clear-entry:hover {
  background-color: color(from var(--clr-named-error) srgb r g b / 0.8);
}

.calc-btn.backspace {
  background-color: var(--clr-named-raven);
  color: var(--clr-named-white);
}

.calc-btn.backspace:hover {
  background-color: color(from var(--clr-named-raven) srgb r g b / 0.8);
}

.calc-btn.copy {
  background-color: var(--clr-named-apple);
  color: var(--clr-named-white);
}

.calc-btn.copy:hover {
  background-color: var(--clr-primary-hover);
}

.calc-btn.decimal {
  background-color: var(--clr-named-ghost);
}

.calc-btn.decimal:hover {
  background-color: color(from var(--clr-named-ghost) srgb r g b / 0.8);
}

/* Responsive Design */
@media only screen and (max-width: 64rem) {
  #calculator-dialog {
    --_calculator-width: 18rem;
    --_calculator-height: 25rem;
    --_calculator-button-size: 2.5rem;
  }
  
  .calculator-input {
    font-size: var(--size-600);
  }
  
  .calc-btn {
    font-size: var(--size-500);
  }
  
  .calc-btn .icon {
    font-size: var(--size-400);
  }
}

@media only screen and (max-width: 48rem) {
  #calculator-dialog {
    --_calculator-width: 16rem;
    --_calculator-height: 22rem;
    --_calculator-button-size: 2.25rem;
  }
  
  .calculator-input {
    font-size: var(--size-500);
  }
  
  .calc-btn {
    font-size: var(--size-400);
  }
}

/* Focus styles for accessibility */
.calc-btn:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

.calculator-btn:focus-visible {
  outline: 2px solid var(--clr-named-white);
  outline-offset: 1px;
}

/* Animation for minimized state */
@keyframes minimizeSlide {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0.8;
  }
}

@keyframes restoreSlide {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#calculator-dialog.minimized {
  animation: minimizeSlide 0.3s ease forwards;
}

#calculator-dialog:not(.minimized) {
  animation: restoreSlide 0.3s ease forwards;
}