@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  vertical-align: baseline; }

*:focus {
  outline: 0; }

body {
  line-height: 1;
  color: black;
  background: white; }

ol, ul {
  list-style: none; }

table {
  border-collapse: separate;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal; }

blockquote:before, blockquote:after, q:before, q:after {
  content: ""; }

blockquote, q {
  quotes: "" ""; }

/*  Font Awesome 2.0, see https://github.com/FortAwesome/Font-Awesome/releases/tag/2.0.0
 *
 *    the iconic font designed for use with Twitter Bootstrap
 *    -------------------------------------------------------
 *    The full suite of pictographic icons, examples, and documentation
 *    can be found at: http://fortawesome.github.com/Font-Awesome/
 *
 *    License
 *    -------------------------------------------------------
 *    The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
 *    http://creativecommons.org/licenses/by/3.0/ A mention of
 *    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
 *    source code is considered acceptable attribution (most common on the web).
 *    If human readable source code is not available to the end user, a mention in
 *    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
 *    or mobile software).
 *
 *    Contact
 *    -------------------------------------------------------
 *    Email: dave@davegandy.com
 *    Twitter: http://twitter.com/fortaweso_me
 *    Work: Lead Product Designer @ http://kyruus.com */
@font-face {
  font-family: "FontAwesome";
  src: url("/fonts/fontawesome-webfont/fontawesome-webfont.eot");
  src: url("/fonts/fontawesome-webfont/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/fontawesome-webfont/fontawesome-webfont.woff") format("woff"), url("/fonts/fontawesome-webfont/fontawesome-webfont.ttf") format("truetype"), url("/fonts/fontawesome-webfont/fontawesome-webfont.svg#FontAwesome") format("svg");
  font-weight: normal;
  font-style: normal; }
/*  Font Awesome styles
 *  ------------------------------------------------------- */
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit; }

a [class^="icon-"],
a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit; }

/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: middle;
  font-size: 4/3em; }

.btn [class^="icon-"],
.btn [class*=" icon-"], .nav-tabs [class^="icon-"],
.nav-tabs [class*=" icon-"] {
  /* keeps button heights with and without icons the same */
  line-height: 0.9em; }

li [class^="icon-"],
li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center; }
li .icon-large:before,
li .icon-large:before {
  /* 1.5 increased font size for icon-large * 1.25 width */
  width: 1.875em; }

ul.icons {
  list-style-type: none;
  margin-left: 2em;
  text-indent: -0.8em; }
  ul.icons li [class^="icon-"],
  ul.icons li [class*=" icon-"] {
    width: 0.8em; }
  ul.icons li .icon-large:before,
  ul.icons li .icon-large:before {
    /* 1.5 increased font size for icon-large * 1.25 width */
    vertical-align: initial; }

/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 *  readers do not read off random characters that represent icons */
.icon-glass:before {
  content: ""; }

.icon-music:before {
  content: ""; }

.icon-search:before {
  content: ""; }

.icon-envelope:before {
  content: ""; }

.icon-heart:before {
  content: ""; }

.icon-star:before {
  content: ""; }

.icon-star-empty:before {
  content: ""; }

.icon-user:before {
  content: ""; }

.icon-film:before {
  content: ""; }

.icon-th-large:before {
  content: ""; }

.icon-th:before {
  content: ""; }

.icon-th-list:before {
  content: ""; }

.icon-ok:before {
  content: ""; }

.icon-remove:before {
  content: ""; }

.icon-zoom-in:before {
  content: ""; }

.icon-zoom-out:before {
  content: ""; }

.icon-off:before {
  content: ""; }

.icon-signal:before {
  content: ""; }

.icon-cog:before {
  content: ""; }

.icon-trash:before {
  content: ""; }

.icon-home:before {
  content: ""; }

.icon-file:before {
  content: ""; }

.icon-time:before {
  content: ""; }

.icon-road:before {
  content: ""; }

.icon-download-alt:before {
  content: ""; }

.icon-download:before {
  content: ""; }

.icon-upload:before {
  content: ""; }

.icon-inbox:before {
  content: ""; }

.icon-play-circle:before {
  content: ""; }

.icon-repeat:before {
  content: ""; }

/* \f020 doesn't work in Safari. all shifted one down */
.icon-refresh:before {
  content: ""; }

.icon-list-alt:before {
  content: ""; }

.icon-lock:before {
  content: ""; }

.icon-flag:before {
  content: ""; }

.icon-headphones:before {
  content: ""; }

.icon-volume-off:before {
  content: ""; }

.icon-volume-down:before {
  content: ""; }

.icon-volume-up:before {
  content: ""; }

.icon-qrcode:before {
  content: ""; }

.icon-barcode:before {
  content: ""; }

.icon-tag:before {
  content: ""; }

.icon-tags:before {
  content: ""; }

.icon-book:before {
  content: ""; }

.icon-bookmark:before {
  content: ""; }

.icon-print:before {
  content: ""; }

.icon-camera:before {
  content: ""; }

.icon-font:before {
  content: ""; }

.icon-bold:before {
  content: ""; }

.icon-italic:before {
  content: ""; }

.icon-text-height:before {
  content: ""; }

.icon-text-width:before {
  content: ""; }

.icon-align-left:before {
  content: ""; }

.icon-align-center:before {
  content: ""; }

.icon-align-right:before {
  content: ""; }

.icon-align-justify:before {
  content: ""; }

.icon-list:before {
  content: ""; }

.icon-indent-left:before {
  content: ""; }

.icon-indent-right:before {
  content: ""; }

.icon-facetime-video:before {
  content: ""; }

.icon-picture:before {
  content: ""; }

.icon-pencil:before {
  content: ""; }

.icon-map-marker:before {
  content: ""; }

.icon-adjust:before {
  content: ""; }

.icon-tint:before {
  content: ""; }

.icon-edit:before {
  content: ""; }

.icon-share:before {
  content: ""; }

.icon-check:before {
  content: ""; }

.icon-move:before {
  content: ""; }

.icon-step-backward:before {
  content: ""; }

.icon-fast-backward:before {
  content: ""; }

.icon-backward:before {
  content: ""; }

.icon-play:before {
  content: ""; }

.icon-pause:before {
  content: ""; }

.icon-stop:before {
  content: ""; }

.icon-forward:before {
  content: ""; }

.icon-fast-forward:before {
  content: ""; }

.icon-step-forward:before {
  content: ""; }

.icon-eject:before {
  content: ""; }

.icon-chevron-left:before {
  content: ""; }

.icon-chevron-right:before {
  content: ""; }

.icon-plus-sign:before {
  content: ""; }

.icon-minus-sign:before {
  content: ""; }

.icon-remove-sign:before {
  content: ""; }

.icon-ok-sign:before {
  content: ""; }

.icon-question-sign:before {
  content: ""; }

.icon-info-sign:before {
  content: ""; }

.icon-screenshot:before {
  content: ""; }

.icon-remove-circle:before {
  content: ""; }

.icon-ok-circle:before {
  content: ""; }

.icon-ban-circle:before {
  content: ""; }

.icon-arrow-left:before {
  content: ""; }

.icon-arrow-right:before {
  content: ""; }

.icon-arrow-up:before {
  content: ""; }

.icon-arrow-down:before {
  content: ""; }

.icon-share-alt:before {
  content: ""; }

.icon-resize-full:before {
  content: ""; }

.icon-resize-small:before {
  content: ""; }

.icon-plus:before {
  content: ""; }

.icon-minus:before {
  content: ""; }

.icon-asterisk:before {
  content: ""; }

.icon-exclamation-sign:before {
  content: ""; }

.icon-gift:before {
  content: ""; }

.icon-leaf:before {
  content: ""; }

.icon-fire:before {
  content: ""; }

.icon-eye-open:before {
  content: ""; }

.icon-eye-close:before {
  content: ""; }

.icon-warning-sign:before {
  content: ""; }

.icon-plane:before {
  content: ""; }

.icon-calendar:before {
  content: ""; }

.icon-random:before {
  content: ""; }

.icon-comment:before {
  content: ""; }

.icon-magnet:before {
  content: ""; }

.icon-chevron-up:before {
  content: ""; }

.icon-chevron-down:before {
  content: ""; }

.icon-retweet:before {
  content: ""; }

.icon-shopping-cart:before {
  content: ""; }

.icon-folder-close:before {
  content: ""; }

.icon-folder-open:before {
  content: ""; }

.icon-resize-vertical:before {
  content: ""; }

.icon-resize-horizontal:before {
  content: ""; }

.icon-bar-chart:before {
  content: ""; }

.icon-twitter-sign:before {
  content: ""; }

.icon-facebook-sign:before {
  content: ""; }

.icon-camera-retro:before {
  content: ""; }

.icon-key:before {
  content: ""; }

.icon-cogs:before {
  content: ""; }

.icon-comments:before {
  content: ""; }

.icon-thumbs-up:before {
  content: ""; }

.icon-thumbs-down:before {
  content: ""; }

.icon-star-half:before {
  content: ""; }

.icon-heart-empty:before {
  content: ""; }

.icon-signout:before {
  content: ""; }

.icon-linkedin-sign:before {
  content: ""; }

.icon-pushpin:before {
  content: ""; }

.icon-external-link:before {
  content: ""; }

.icon-signin:before {
  content: ""; }

.icon-trophy:before {
  content: ""; }

.icon-github-sign:before {
  content: ""; }

.icon-upload-alt:before {
  content: ""; }

.icon-lemon:before {
  content: ""; }

.icon-phone:before {
  content: ""; }

.icon-check-empty:before {
  content: ""; }

.icon-bookmark-empty:before {
  content: ""; }

.icon-phone-sign:before {
  content: ""; }

.icon-twitter:before {
  content: ""; }

.icon-facebook:before {
  content: ""; }

.icon-github:before {
  content: ""; }

.icon-unlock:before {
  content: ""; }

.icon-credit-card:before {
  content: ""; }

.icon-rss:before {
  content: ""; }

.icon-hdd:before {
  content: ""; }

.icon-bullhorn:before {
  content: ""; }

.icon-bell:before {
  content: ""; }

.icon-certificate:before {
  content: ""; }

.icon-hand-right:before {
  content: ""; }

.icon-hand-left:before {
  content: ""; }

.icon-hand-up:before {
  content: ""; }

.icon-hand-down:before {
  content: ""; }

.icon-circle-arrow-left:before {
  content: ""; }

.icon-circle-arrow-right:before {
  content: ""; }

.icon-circle-arrow-up:before {
  content: ""; }

.icon-circle-arrow-down:before {
  content: ""; }

.icon-globe:before {
  content: ""; }

.icon-wrench:before {
  content: ""; }

.icon-tasks:before {
  content: ""; }

.icon-filter:before {
  content: ""; }

.icon-briefcase:before {
  content: ""; }

.icon-fullscreen:before {
  content: ""; }

.icon-group:before {
  content: ""; }

.icon-link:before {
  content: ""; }

.icon-cloud:before {
  content: ""; }

.icon-beaker:before {
  content: ""; }

.icon-cut:before {
  content: ""; }

.icon-copy:before {
  content: ""; }

.icon-paper-clip:before {
  content: ""; }

.icon-save:before {
  content: ""; }

.icon-sign-blank:before {
  content: ""; }

.icon-reorder:before {
  content: ""; }

.icon-list-ul:before {
  content: ""; }

.icon-list-ol:before {
  content: ""; }

.icon-strikethrough:before {
  content: ""; }

.icon-underline:before {
  content: ""; }

.icon-table:before {
  content: ""; }

.icon-magic:before {
  content: ""; }

.icon-truck:before {
  content: ""; }

.icon-pinterest:before {
  content: ""; }

.icon-pinterest-sign:before {
  content: ""; }

.icon-google-plus-sign:before {
  content: ""; }

.icon-google-plus:before {
  content: ""; }

.icon-money:before {
  content: ""; }

.icon-caret-down:before {
  content: ""; }

.icon-caret-up:before {
  content: ""; }

.icon-caret-left:before {
  content: ""; }

.icon-caret-right:before {
  content: ""; }

.icon-columns:before {
  content: ""; }

.icon-sort:before {
  content: ""; }

.icon-sort-down:before {
  content: ""; }

.icon-sort-up:before {
  content: ""; }

.icon-envelope-alt:before {
  content: ""; }

.icon-linkedin:before {
  content: ""; }

.icon-undo:before {
  content: ""; }

.icon-legal:before {
  content: ""; }

.icon-dashboard:before {
  content: ""; }

.icon-comment-alt:before {
  content: ""; }

.icon-comments-alt:before {
  content: ""; }

.icon-bolt:before {
  content: ""; }

.icon-sitemap:before {
  content: ""; }

.icon-umbrella:before {
  content: ""; }

.icon-paste:before {
  content: ""; }

.icon-user-md:before {
  content: ""; }

@font-face {
  font-family: "Source Sans";
  src: url("/fonts/source-sans/SourceSans3-VariableFont_wght.ttf"); }
:root {
  --red: #e91e1e;
  --orange: oklch(.7 .2 45);
  --ticking-green: oklch(0.54 0.2 130);
  --space-1: 10px;
  --space-2: 24px;
  --sidebar-padding: 12px;
  --header-spacing: 16px;
  --transition-blink: .14s;
  --transition-snap: .07s;
  --border-radius: 4px;
  --border-radius-sm: 2px;
  --content-border: 2px solid var(--border-color, oklch(0.96 0.002 56));
  --thick-border: 2px solid oklch(0.9 0.002 56);
  --calendar-box-size: 24px;
  --font-size-small: 14px; }

:root {
  --nav-height: 35px;
  --link-color: black;
  --link-hover-color: black; }
  @supports (color: oklch(0 0 0)) {
    :root {
      --body-bg: oklch(0.99 0.002 56);
      --link-color: oklch(0.45 0.15 242);
      --link-hover-color: oklch(0.6 0.15 242);
      --active-background-color: oklch(0.9 0.07 242);
      --input-background-color: oklch(0.95 0.02 242);
      --text-muted: oklch(0.5 0.002 56);
      --s-absent: oklch(0.93 0.002 56);
      --s-proxy: oklch(.7 .2 46);
      --s-present: oklch(0.8 0.2 130);
      --s-travel: oklch(0.7 0.2 130);
      --s-overtime: oklch(.8 .1 250);
      --s-overtime-halfday: oklch(.7 .1 250);
      --s-paid-leave: oklch(.6 .1 250);
      --s-vacation: oklch(0.5 .1 250);
      --s-freelancer-absence: oklch(0.4 .1 250);
      --s-sick: oklch(.65 .15 21);
      --s-maternity-leave: oklch(.75 .1 21);
      --s-parental-leave: oklch(.85 .1 21);
      --s-unpaid-leave: oklch(.8 .15 100);
      --s-training: oklch(.8 .13 163);
      --s-vocational-school: oklch(.65 .15 303); } }

body {
  background-color: var(--body-bg);
  color: #000;
  line-height: 1.5em; }

body, input, select, textarea, button {
  font-family: "Source Sans", arial, helvetica, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body.is_loading * {
  cursor: wait !important; }

a {
  color: var(--link-color);
  text-decoration: none;
  transition-property: color;
  transition-duration: var(--transition-blink); }
  a:hover {
    color: var(--link-hover-color);
    text-decoration: none; }
  a > i {
    margin-right: 4px; }

p {
  margin-bottom: var(--space-1); }

strong {
  font-weight: 600; }

hr {
  color: #ddd;
  background-color: #ddd;
  border: none;
  height: 1px; }

img {
  vertical-align: middle; }

ol {
  list-style-type: decimal;
  padding-left: 1.6em; }

ul.with_discs {
  list-style: inside disc; }

dd {
  position: relative; }

@supports not (color: oklch(0 0 0)) {
  .absence_color, .absence-bar, table.absence_overview .absence,
  table.absence_overview .am,
  table.absence_overview .pm,
  table.absence_overview .pending, .absences-legend--item, .user-state-sheet--user {
    --absence-color: #555; } }
@supports (color: oklch(0 0 0)) {
  .absence_color.present, .present.absence-bar, table.absence_overview .present.absence,
  table.absence_overview .present.am,
  table.absence_overview .present.pm,
  table.absence_overview .present.pending, .present.absences-legend--item, .present.user-state-sheet--user {
    --absence-color: var(--s-present); }
  .absence_color.absent, .absent.absence-bar, table.absence_overview .absent.absence,
  table.absence_overview .absent.am,
  table.absence_overview .absent.pm,
  table.absence_overview .absent.pending, .absent.absences-legend--item, .absent.user-state-sheet--user {
    --absence-color: var(--s-absent); }
  .absence_color.vacation, .vacation.absence-bar, table.absence_overview .vacation.absence,
  table.absence_overview .vacation.am,
  table.absence_overview .vacation.pm,
  table.absence_overview .vacation.pending, .vacation.absences-legend--item, .vacation.user-state-sheet--user, .absence_color.vacation_am, .vacation_am.absence-bar, table.absence_overview .vacation_am.absence,
  table.absence_overview .vacation_am.am,
  table.absence_overview .vacation_am.pm,
  table.absence_overview .vacation_am.pending, .vacation_am.absences-legend--item, .vacation_am.user-state-sheet--user, .absence_color.vacation_pm, .vacation_pm.absence-bar, table.absence_overview .vacation_pm.absence,
  table.absence_overview .vacation_pm.am,
  table.absence_overview .vacation_pm.pm,
  table.absence_overview .vacation_pm.pending, .vacation_pm.absences-legend--item, .vacation_pm.user-state-sheet--user, .absence_color.unpaid_vacation, .unpaid_vacation.absence-bar, table.absence_overview .unpaid_vacation.absence,
  table.absence_overview .unpaid_vacation.am,
  table.absence_overview .unpaid_vacation.pm,
  table.absence_overview .unpaid_vacation.pending, .unpaid_vacation.absences-legend--item, .unpaid_vacation.user-state-sheet--user, .absence_color.privacy_absence, .privacy_absence.absence-bar, table.absence_overview .privacy_absence.absence,
  table.absence_overview .privacy_absence.am,
  table.absence_overview .privacy_absence.pm,
  table.absence_overview .privacy_absence.pending, .privacy_absence.absences-legend--item, .privacy_absence.user-state-sheet--user {
    --absence-color: var(--s-vacation); }
  .absence_color.travel, .travel.absence-bar, table.absence_overview .travel.absence,
  table.absence_overview .travel.am,
  table.absence_overview .travel.pm,
  table.absence_overview .travel.pending, .travel.absences-legend--item, .travel.user-state-sheet--user, .absence_color.travel_am, .travel_am.absence-bar, table.absence_overview .travel_am.absence,
  table.absence_overview .travel_am.am,
  table.absence_overview .travel_am.pm,
  table.absence_overview .travel_am.pending, .travel_am.absences-legend--item, .travel_am.user-state-sheet--user, .absence_color.travel_pm, .travel_pm.absence-bar, table.absence_overview .travel_pm.absence,
  table.absence_overview .travel_pm.am,
  table.absence_overview .travel_pm.pm,
  table.absence_overview .travel_pm.pending, .travel_pm.absences-legend--item, .travel_pm.user-state-sheet--user {
    --absence-color: var(--s-travel); }
  .absence_color.training, .training.absence-bar, table.absence_overview .training.absence,
  table.absence_overview .training.am,
  table.absence_overview .training.pm,
  table.absence_overview .training.pending, .training.absences-legend--item, .training.user-state-sheet--user {
    --absence-color: var(--s-training); }
  .absence_color.vocational_school, .vocational_school.absence-bar, table.absence_overview .vocational_school.absence,
  table.absence_overview .vocational_school.am,
  table.absence_overview .vocational_school.pm,
  table.absence_overview .vocational_school.pending, .vocational_school.absences-legend--item, .vocational_school.user-state-sheet--user, .absence_color.vocational_school_am, .vocational_school_am.absence-bar, table.absence_overview .vocational_school_am.absence,
  table.absence_overview .vocational_school_am.am,
  table.absence_overview .vocational_school_am.pm,
  table.absence_overview .vocational_school_am.pending, .vocational_school_am.absences-legend--item, .vocational_school_am.user-state-sheet--user {
    --absence-color: var(--s-vocational-school); }
  .absence_color.overtime, .overtime.absence-bar, table.absence_overview .overtime.absence,
  table.absence_overview .overtime.am,
  table.absence_overview .overtime.pm,
  table.absence_overview .overtime.pending, .overtime.absences-legend--item, .overtime.user-state-sheet--user {
    --absence-color: var(--s-overtime); }
  .absence_color.overtime_am, .overtime_am.absence-bar, table.absence_overview .overtime_am.absence,
  table.absence_overview .overtime_am.am,
  table.absence_overview .overtime_am.pm,
  table.absence_overview .overtime_am.pending, .overtime_am.absences-legend--item, .overtime_am.user-state-sheet--user, .absence_color.overtime_pm, .overtime_pm.absence-bar, table.absence_overview .overtime_pm.absence,
  table.absence_overview .overtime_pm.am,
  table.absence_overview .overtime_pm.pm,
  table.absence_overview .overtime_pm.pending, .overtime_pm.absences-legend--item, .overtime_pm.user-state-sheet--user {
    --absence-color: var(--s-overtime-halfday); }
  .absence_color.freelancer_absence, .freelancer_absence.absence-bar, table.absence_overview .freelancer_absence.absence,
  table.absence_overview .freelancer_absence.am,
  table.absence_overview .freelancer_absence.pm,
  table.absence_overview .freelancer_absence.pending, .freelancer_absence.absences-legend--item, .freelancer_absence.user-state-sheet--user, .absence_color.freelancer_absence_am, .freelancer_absence_am.absence-bar, table.absence_overview .freelancer_absence_am.absence,
  table.absence_overview .freelancer_absence_am.am,
  table.absence_overview .freelancer_absence_am.pm,
  table.absence_overview .freelancer_absence_am.pending, .freelancer_absence_am.absences-legend--item, .freelancer_absence_am.user-state-sheet--user, .absence_color.freelancer_absence_pm, .freelancer_absence_pm.absence-bar, table.absence_overview .freelancer_absence_pm.absence,
  table.absence_overview .freelancer_absence_pm.am,
  table.absence_overview .freelancer_absence_pm.pm,
  table.absence_overview .freelancer_absence_pm.pending, .freelancer_absence_pm.absences-legend--item, .freelancer_absence_pm.user-state-sheet--user {
    --absence-color: var(--s-freelancer-absence); }
  .absence_color.paid_leave, .paid_leave.absence-bar, table.absence_overview .paid_leave.absence,
  table.absence_overview .paid_leave.am,
  table.absence_overview .paid_leave.pm,
  table.absence_overview .paid_leave.pending, .paid_leave.absences-legend--item, .paid_leave.user-state-sheet--user {
    --absence-color: var(--s-paid-leave); }
  .absence_color.unpaid_leave, .unpaid_leave.absence-bar, table.absence_overview .unpaid_leave.absence,
  table.absence_overview .unpaid_leave.am,
  table.absence_overview .unpaid_leave.pm,
  table.absence_overview .unpaid_leave.pending, .unpaid_leave.absences-legend--item, .unpaid_leave.user-state-sheet--user {
    --absence-color: var(--s-unpaid-leave); }
  .absence_color.sick, .sick.absence-bar, table.absence_overview .sick.absence,
  table.absence_overview .sick.am,
  table.absence_overview .sick.pm,
  table.absence_overview .sick.pending, .sick.absences-legend--item, .sick.user-state-sheet--user, .absence_color.sick_overall, .sick_overall.absence-bar, table.absence_overview .sick_overall.absence,
  table.absence_overview .sick_overall.am,
  table.absence_overview .sick_overall.pm,
  table.absence_overview .sick_overall.pending, .sick_overall.absences-legend--item, .sick_overall.user-state-sheet--user {
    --absence-color: var(--s-sick); }
  .absence_color.maternity_leave, .maternity_leave.absence-bar, table.absence_overview .maternity_leave.absence,
  table.absence_overview .maternity_leave.am,
  table.absence_overview .maternity_leave.pm,
  table.absence_overview .maternity_leave.pending, .maternity_leave.absences-legend--item, .maternity_leave.user-state-sheet--user {
    --absence-color: var(--s-maternity-leave); }
  .absence_color.parental_leave, .parental_leave.absence-bar, table.absence_overview .parental_leave.absence,
  table.absence_overview .parental_leave.am,
  table.absence_overview .parental_leave.pm,
  table.absence_overview .parental_leave.pending, .parental_leave.absences-legend--item, .parental_leave.user-state-sheet--user {
    --absence-color: var(--s-parental-leave); }
  .absence_color.proxy, .proxy.absence-bar, table.absence_overview .proxy.absence,
  table.absence_overview .proxy.am,
  table.absence_overview .proxy.pm,
  table.absence_overview .proxy.pending, .proxy.absences-legend--item, .proxy.user-state-sheet--user, .absence_color.proxy_am, .proxy_am.absence-bar, table.absence_overview .proxy_am.absence,
  table.absence_overview .proxy_am.am,
  table.absence_overview .proxy_am.pm,
  table.absence_overview .proxy_am.pending, .proxy_am.absences-legend--item, .proxy_am.user-state-sheet--user, .absence_color.proxy_pm, .proxy_pm.absence-bar, table.absence_overview .proxy_pm.absence,
  table.absence_overview .proxy_pm.am,
  table.absence_overview .proxy_pm.pm,
  table.absence_overview .proxy_pm.pending, .proxy_pm.absences-legend--item, .proxy_pm.user-state-sheet--user {
    --absence-color: var(--s-proxy); } }

.prose-text a {
  text-decoration: underline;
  text-decoration-color: #00000036;
  text-underline-offset: 3px; }

.absence-state {
  color: var(--text-muted);
  font-size: var(--font-size-small);
  line-height: 18px; }
  .absence-state.-pending {
    color: var(--orange);
    font-weight: 600; }

.totals-row, :where(#main) table.-totals-row tr:last-child td, table.month_sheet tr.contract-start td:not(:first-child),
table.month_sheet tr.contract-end td:not(:first-child) {
  margin-top: 4px;
  border-top: var(--content-border);
  padding-top: 4px;
  font-weight: 600; }

.absence-bar {
  border-left: 5px solid var(--absence-color, transparent);
  padding-left: 5px;
  height: 48px; }

.clear {
  clear: both;
  float: none; }

.hidden {
  display: none; }

.center {
  text-align: center; }

.bold {
  font-weight: bold; }

.nowrap {
  white-space: nowrap; }

.error-message {
  color: var(--red); }

.mt-1 {
  margin-top: var(--space-1); }

.mt-2 {
  margin-top: var(--space-2); }

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

.ml-1 {
  margin-left: var(--space-1); }

.my-1 {
  margin-block: var(--space-1); }

.mb-1 {
  margin-bottom: var(--space-1); }

.mb-2 {
  margin-bottom: var(--space-2); }

.d-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2); }
  .d-grid-2col > * > *:last-child {
    margin-bottom: 0 !important; }
    .d-grid-2col > * > *:last-child > *:last-child {
      margin-bottom: 0 !important; }

.d-flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); }

.icon-warning-sign::before {
  color: var(--orange);
  padding-right: 0.25em; }

.small-heading, #main #main_inner .session_navigation .current_user, :where(#main) table.grid th, table.month_sheet td.calendar_week {
  margin-bottom: 3px;
  color: oklch(0.55 0.002 56);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px; }
  .small-heading.-navigation, #main #main_inner .session_navigation .-navigation.current_user, :where(#main) table.grid th.-navigation, table.month_sheet td.-navigation.calendar_week {
    padding: 2px 10px; }
  .small-heading.-above-box, #main #main_inner .session_navigation .-above-box.current_user, :where(#main) table.grid th.-above-box, table.month_sheet td.-above-box.calendar_week {
    margin-bottom: 6px; }

.application-name {
  margin-bottom: var(--header-spacing);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 3px;
  text-align: center;
  line-height: var(--nav-height); }

.homeoffice-summary {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted); }
  .homeoffice-summary img {
    vertical-align: calc(0.33em - var(--icon-height, 16px)/2); }

th.right,
td.right {
  text-align: right; }

th.money_amount,
td.money_amount {
  text-align: right;
  white-space: nowrap; }

.none,
.no_elements {
  color: #777; }

.viewport, #main #main_inner {
  min-width: 1000px;
  max-width: 1212px;
  margin: 0 auto; }

.flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--body-bg);
  line-height: 34px;
  font-weight: 600;
  text-align: center; }
  .flash.notice, .flash .notice, .flash.success, .flash .success {
    color: #493; }
  .flash.error, .flash .error, .flash.failure, .flash .failure {
    color: var(--red); }

.button, .buttons a,
.buttons input[type=submit],
.buttons input[type=button],
.buttons button,
.buttons .delete_link {
  appearance: none;
  border: none;
  background-color: oklch(0.95 0.002 56);
  transition: background var(--transition-blink);
  border-radius: var(--border-radius);
  cursor: pointer;
  line-height: 28px;
  height: 28px;
  padding: 0 10px;
  color: var(--link-color);
  font-size: 16px;
  font-weight: normal;
  white-space: nowrap; }
  .button:hover, .buttons a:hover,
  .buttons input[type=submit]:hover,
  .buttons input[type=button]:hover,
  .buttons button:hover,
  .buttons .delete_link:hover {
    color: var(--link-hover-color);
    text-decoration: none;
    background-color: oklch(0.97 0.002 56); }
  .button.-danger:hover, .buttons a.-danger:hover,
  .buttons input.-danger[type=submit]:hover,
  .buttons input.-danger[type=button]:hover,
  .buttons button.-danger:hover,
  .buttons .-danger.delete_link:hover {
    color: var(--red); }
  .button.-primary, .buttons a.-primary,
  .buttons input.-primary[type=submit],
  .buttons input.-primary[type=button],
  .buttons button.-primary,
  .buttons .-primary.delete_link {
    background: black;
    background: oklch(0.5 0.15 242);
    color: white; }
    .button.-primary:hover, .buttons a.-primary:hover,
    .buttons input.-primary[type=submit]:hover,
    .buttons input.-primary[type=button]:hover,
    .buttons button.-primary:hover,
    .buttons .-primary.delete_link:hover {
      background: oklch(0.6 0.15 242); }
    .button.-primary[disabled], .buttons a.-primary[disabled],
    .buttons input.-primary[disabled][type=submit],
    .buttons input.-primary[disabled][type=button],
    .buttons button.-primary[disabled],
    .buttons .-primary[disabled].delete_link {
      background-color: oklch(0.6 0.002 56) !important;
      color: oklch(0.9 0.002 56) !important; }
  .button.-secondary, .buttons a.-secondary,
  .buttons input.-secondary[type=submit],
  .buttons input.-secondary[type=button],
  .buttons button.-secondary,
  .buttons .-secondary.delete_link {
    background: #555;
    background: oklch(0.7 0.15 242);
    color: white; }
    .button.-secondary:hover, .buttons a.-secondary:hover,
    .buttons input.-secondary[type=submit]:hover,
    .buttons input.-secondary[type=button]:hover,
    .buttons button.-secondary:hover,
    .buttons .-secondary.delete_link:hover {
      background: oklch(0.8 0.15 242); }
    .button.-secondary[disabled], .buttons a.-secondary[disabled],
    .buttons input.-secondary[disabled][type=submit],
    .buttons input.-secondary[disabled][type=button],
    .buttons button.-secondary[disabled],
    .buttons .-secondary[disabled].delete_link {
      background-color: oklch(0.8 0.002 56) !important; }
  table.with-actions .button, table.with-actions .buttons a, .buttons table.with-actions a,
  table.with-actions .buttons input[type=submit],
  .buttons table.with-actions input[type=submit],
  table.with-actions .buttons input[type=button],
  .buttons table.with-actions input[type=button],
  table.with-actions .buttons button,
  .buttons table.with-actions button,
  table.with-actions .buttons .delete_link,
  .buttons table.with-actions .delete_link {
    line-height: 24px;
    height: auto; }

#container {
  min-width: 1280px;
  position: relative; }

.segment {
  margin-bottom: var(--space-2); }
  .page > .segment:first-child {
    margin-top: var(--space-2); }
  .segment h2:not(:first-child) {
    margin-top: var(--space-2); }
  .segment .segment {
    padding-inline: 0; }
  .segment.-divider {
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--border-color); }

#main {
  padding: var(--space-2); }
  #main #main_inner {
    position: relative; }
    #main #main_inner #main_side_bar .side_bar_box a {
      line-height: 28px; }
    #main #main_inner .side_bar .side_bar_navigation a, #main #main_inner .tab_bar a, #main #main_inner .select_bar .navigation .bar_inner_inner a {
      display: block;
      padding: 3px 10px;
      border-radius: var(--border-radius);
      font-weight: 500;
      color: oklch(0.25 0.002 56);
      text-decoration: none;
      transition: color, background-color;
      transition-duration: var(--transition-blink); }
      #main #main_inner .side_bar .side_bar_navigation a.current, #main #main_inner .tab_bar a.current, #main #main_inner .select_bar .navigation .bar_inner_inner a.current, #main #main_inner .side_bar .side_bar_navigation a:hover, #main #main_inner .tab_bar a:hover, #main #main_inner .select_bar .navigation .bar_inner_inner a:hover {
        text-decoration: none;
        background-color: var(--active-background-color);
        color: black; }
    #main #main_inner .tab_bar a, #main #main_inner .side_bar a {
      position: relative; }
      #main #main_inner .tab_bar a .notifications_count, #main #main_inner .side_bar a .notifications_count {
        position: absolute;
        display: inline-block;
        box-sizing: border-box;
        min-width: 24px;
        padding-inline: 8px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: var(--active-background-color);
        border-radius: 1000px;
        font-size: 14px;
        font-weight: 600;
        color: oklch(0.4 0.15 242); }
    #main #main_inner .side_bar a .notifications_count {
      right: 6px;
      top: 3px; }
    #main #main_inner .tab_bar a .notifications_count {
      position: relative;
      bottom: 1px;
      margin-left: 5px; }
    #main #main_inner .side_bar {
      position: absolute;
      left: 0;
      top: 0;
      width: 250px;
      padding-bottom: var(--space-2); }
      #main #main_inner .side_bar .side_bar_box {
        border: var(--content-border);
        border-radius: var(--border-radius);
        overflow: hidden;
        background-color: white;
        margin-bottom: var(--space-1); }
        #main #main_inner .side_bar .side_bar_box.sign_in {
          padding: var(--sidebar-padding); }
          #main #main_inner .side_bar .side_bar_box.sign_in input {
            width: 100%;
            box-sizing: border-box; }
        #main #main_inner .side_bar .side_bar_box.account_information {
          padding: var(--sidebar-padding);
          line-height: 1.4; }
          #main #main_inner .side_bar .side_bar_box.account_information .date {
            font-weight: 600; }
          #main #main_inner .side_bar .side_bar_box.account_information ul {
            margin-bottom: 0; }
            #main #main_inner .side_bar .side_bar_box.account_information ul li {
              display: flex;
              justify-content: space-between; }
            #main #main_inner .side_bar .side_bar_box.account_information ul .ticking {
              color: var(--ticking-green);
              font-weight: 600; }
          #main #main_inner .side_bar .side_bar_box.account_information .deferred_data {
            line-height: 20px; }
            #main #main_inner .side_bar .side_bar_box.account_information .deferred_data.loading {
              background: url("../images/ajax-loader.gif") left no-repeat;
              background-size: 20px 20px;
              width: 20px; }
              #main #main_inner .side_bar .side_bar_box.account_information .deferred_data.loading:before {
                content: " "; }
        #main #main_inner .side_bar .side_bar_box.clock_in_and_out {
          display: grid;
          grid-template-areas: "clock button" "state state" "travel travel-switch";
          align-items: center;
          padding: var(--sidebar-padding);
          --background-color: oklch(0.77 0.2 130);
          background-color: var(--background-color);
          border: 2px solid oklch(0.72 0.2 130); }
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out.clocked_out {
            --background-color: oklch(0.77 0.002 56);
            border-color: oklch(0.72 0.002 56); }
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out .action {
            grid-area: button;
            justify-self: end; }
            #main #main_inner .side_bar .side_bar_box.clock_in_and_out .action .action_button {
              display: block;
              position: relative; }
              #main #main_inner .side_bar .side_bar_box.clock_in_and_out .action .action_button .action_button_inner {
                position: relative;
                top: 0;
                display: block;
                width: 48px;
                height: 48px;
                background-color: var(--link-color);
                text-align: center;
                border-radius: 1000px;
                font-size: 28px;
                color: white;
                line-height: 54px;
                transition: all var(--transition-snap); }
                #main #main_inner .side_bar .side_bar_box.clock_in_and_out .action .action_button .action_button_inner .icon-play {
                  margin-left: 4px; }
              #main #main_inner .side_bar .side_bar_box.clock_in_and_out .action .action_button:not(.-disabled):hover .action_button_inner {
                background-color: var(--link-hover-color);
                box-shadow: 0 2px 0 oklch(0.4 0.15 242);
                top: -2px; }
              #main #main_inner .side_bar .side_bar_box.clock_in_and_out .action .action_button:not(.-disabled):active .action_button_inner {
                box-shadow: inset 0 1px 1px oklch(0.4 0.15 242);
                top: 0; }
              #main #main_inner .side_bar .side_bar_box.clock_in_and_out .action .action_button.-disabled .action_button_inner, #main #main_inner .side_bar .side_bar_box.clock_in_and_out .action .action_button:is([inert] *) .action_button_inner {
                background-color: oklch(0.45 0.002 56);
                color: oklch(0.77 0.002 56); }
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out .time {
            grid-area: clock;
            font-size: 50px;
            line-height: 1;
            margin-bottom: -0.05em; }
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out .presence_state {
            grid-area: state;
            margin-top: 3px;
            font-weight: 500;
            line-height: 1; }
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out .spontaneous_travel_label,
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out .spontaneous_travel_switch {
            margin-top: var(--space-1); }
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out .spontaneous_travel_label {
            grid-area: travel; }
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out .spontaneous_travel_switch {
            grid-area: travel-switch;
            justify-self: end;
            width: 59px;
            height: 24px;
            background-image: url(../images/slider_off.png);
            background-position: 0 -5px; }
            #main #main_inner .side_bar .side_bar_box.clock_in_and_out .spontaneous_travel_switch:hover {
              background-image: url(../images/slider_off_hover.png); }
            #main #main_inner .side_bar .side_bar_box.clock_in_and_out .spontaneous_travel_switch.-active {
              background-image: url(../images/slider_on.png); }
            #main #main_inner .side_bar .side_bar_box.clock_in_and_out .spontaneous_travel_switch.-active:hover {
              background-image: url(../images/slider_on_hover.png); }
          #main #main_inner .side_bar .side_bar_box.clock_in_and_out .notice > *:last-child {
            margin-bottom: 0 !important; }
            #main #main_inner .side_bar .side_bar_box.clock_in_and_out .notice > *:last-child > *:last-child {
              margin-bottom: 0 !important; }
        #main #main_inner .side_bar .side_bar_box .side_bar_box--warning {
          line-height: 1.3;
          margin-top: var(--space-1); }
      #main #main_inner .side_bar .side_bar_navigation {
        margin-top: var(--space-2); }
        #main #main_inner .side_bar .side_bar_navigation .bar_inner_inner {
          display: flex;
          flex-direction: column;
          gap: 2px; }
    #main #main_inner .session_navigation {
      --height: 34px;
      line-height: var(--height); }
      #main #main_inner .session_navigation .current_user a {
        line-height: 1 !important; }
      #main #main_inner .session_navigation .logout_dialog .logout_button {
        display: block;
        text-align: center;
        background: var(--link-color);
        color: white;
        border-radius: var(--border-radius);
        border: none;
        transition: background var(--transition-blink);
        text-transform: none;
        font-weight: normal; }
        #main #main_inner .session_navigation .logout_dialog .logout_button:hover {
          background: var(--link-hover-color); }
      #main #main_inner .session_navigation .logout_dialog.hidden {
        display: none; }
    #main #main_inner .content {
      margin-left: calc(250px + var(--space-1)); }
      body.login-screen #main #main_inner .content {
        margin-left: 0; }
    #main #main_inner .tab_bar {
      margin-bottom: var(--header-spacing);
      position: relative;
      height: var(--nav-height); }
      #main #main_inner .tab_bar .level_1_inner_inner {
        display: flex;
        gap: var(--space-1); }
      #main #main_inner .tab_bar a {
        flex: 1;
        display: inline-block;
        padding: 5px 20px;
        text-align: center; }
    #main #main_inner .select_bar .navigation .bar_inner_inner {
      display: flex;
      gap: var(--space-1); }
    #main #main_inner .page {
      --border-color: oklch(0.96 0.002 56);
      border: var(--content-border);
      border-radius: var(--border-radius);
      overflow: hidden;
      position: relative;
      min-width: 850px;
      background-color: #fff; }
      #main #main_inner .page #new_absence_button,
      #main #main_inner .page #new_presence_button {
        padding-bottom: 15px; }
      #main #main_inner .page .select_bar {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        padding-block: var(--space-1);
        border-bottom: var(--content-border);
        margin-bottom: var(--space-2); }
        #main #main_inner .page .select_bar input:not([type=submit]),
        #main #main_inner .page .select_bar select {
          background-color: var(--input-background-color);
          border-color: transparent;
          color: oklch(0.3 0.15 242);
          font-weight: 500; }
      body.login-screen #main #main_inner .page {
        min-width: auto;
        width: 400px;
        margin: auto; }

#ui-datepicker-div {
  margin-top: 2px;
  font-size: 14px;
  line-height: 14px; }

.page_viewport, .segment, #main #main_inner .page .select_bar {
  padding-left: var(--space-2);
  padding-right: var(--space-2); }

#main .columns {
  margin: 0 -20px; }
  #main .columns .column,
  #main .columns .wide_column,
  #main .columns .narrow_column {
    width: 50%;
    min-width: 400px;
    float: left; }
    #main .columns .column .column_inner,
    #main .columns .wide_column .column_inner,
    #main .columns .narrow_column .column_inner {
      padding: 0 20px; }
  #main .columns .wide_column {
    width: 55%;
    min-width: 500px; }
  #main .columns .narrow_column {
    width: 40%;
    min-width: 300px; }
    #main .columns .narrow_column input[type=text] {
      max-width: 100%; }
#main .help {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  font-weight: normal;
  line-height: 18px; }
#main h1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--space-2); }
  #main h1 > span:first-child {
    margin-right: 5px; }
  #main h1 > span + span {
    font-weight: 400; }
#main h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--space-1); }
#main dl dt {
  font-weight: 500;
  margin-bottom: 0.1em; }
#main dl dd {
  margin-bottom: 0.6em; }
#main #overtime_cutting {
  columns: 4; }
  #main #overtime_cutting label {
    font-weight: normal; }
#main form label {
  font-weight: 500; }
#main form input[type=checkbox] + label {
  font-weight: normal; }
#main form input + i[class^="icon-"] {
  position: absolute;
  left: 8px;
  top: 5px;
  pointer-events: none;
  color: var(--link-color); }
#main form ul li {
  list-style: none;
  margin-bottom: 5px; }
#main form input:not([type=submit]):not([type=button]),
#main form select,
#main form textarea {
  padding: 2px 4px;
  border: 2px solid #777;
  border: 2px solid oklch(0.93 0.002 56);
  background-color: white;
  border-radius: var(--border-radius); }
#main form select {
  padding-bottom: 0; }
#main form input[type=text],
#main form input[type=password],
#main form textarea {
  width: 350px; }
body.login-screen #main form input,
body.login-screen #main form textarea {
  width: 100%;
  box-sizing: border-box; }
#main form select {
  max-width: 550px;
  cursor: pointer; }
#main form textarea {
  width: 98%;
  height: 60px; }
#main form input[type=text].number_field {
  width: 70px;
  text-align: right; }
#main form input[type=text].date_picker {
  width: 105px;
  padding-left: 24px; }
#main form input[type=text].datetime_picker {
  width: 160px;
  padding-left: 24px; }
#main form .field_with_errors input, #main form .field_with_errors select, #main form .field_with_errors textarea {
  border: 2px solid var(--red); }
#main form .field_with_errors label {
  color: var(--red); }
#main form .error_message {
  color: var(--red);
  font-size: var(--font-size-small); }
#main form select.combo_box option[value='Neu...'] {
  color: #182; }
#main form .tag_picker .tag_cloud {
  margin-top: 7px; }
#main form table tr td {
  vertical-align: middle; }

:where(#main) table td, :where(#main) table th {
  padding: 0.1em 0.2em; }
:where(#main) table tr.clickable_row {
  cursor: pointer;
  transition: background-color var(--transition-blink); }
  :where(#main) table tr.clickable_row:hover {
    background-color: var(--active-background-color); }
:where(#main) table td.clickable_cell {
  cursor: pointer; }
  :where(#main) table td.clickable_cell .day:hover {
    background-color: var(--active-background-color); }
:where(#main) table td.wrap {
  white-space: normal; }
:where(#main) table.vertical th {
  border-right: 1px solid #ccd; }
:where(#main) table.vertical td {
  padding-left: 13px; }
:where(#main) table.-totals-row tr:nth-last-child(2) td {
  padding-bottom: 4px; }
:where(#main) table.-totals-row tr:last-child td {
  border-bottom-width: 0; }
:where(#main) table.balance {
  --border-color: oklch(0.94 0.002 56);
  width: 100%;
  padding: 5px 0;
  background-color: oklch(0.97 0.002 56);
  border: var(--content-border);
  border-color: var(--border-color);
  border-radius: var(--border-radius); }
  :where(#main) table.balance td {
    transition: background-color var(--transition-blink); }
    :where(#main) table.balance td.signum {
      width: 1ch;
      padding-right: 0;
      text-align: center;
      padding-left: var(--space-1); }
    :where(#main) table.balance td.value {
      text-align: right;
      white-space: nowrap;
      padding-right: var(--space-1); }
  :where(#main) table.balance tr:hover td {
    background-color: var(--border-color); }
  :where(#main) table.balance tr:last-child td {
    border-color: var(--border-color); }
:where(#main) table.grid {
  white-space: nowrap;
  width: 100%; }
  :where(#main) table.grid.-narrow {
    width: 50%; }
  :where(#main) table.grid th {
    padding-bottom: 3px; }
:where(#main) table.with-actions tr th:last-child,
:where(#main) table.with-actions tr td:last-child {
  width: 1px;
  text-align: right; }
:where(#main) table .number {
  text-align: right; }

.pagination {
  display: flex;
  gap: 5px;
  margin-top: var(--space-1); }
  .pagination a, .pagination span {
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    min-width: 30px;
    padding: 0 5px;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 500; }
    .pagination a.current, .pagination a:not(.gap):hover, .pagination span.current, .pagination span:not(.gap):hover {
      background-color: var(--active-background-color);
      text-decoration: none; }
  .pagination a.prev_page,
  .pagination a.next_page,
  .pagination .disabled {
    display: none; }
  .pagination .gap {
    background: none;
    color: #888;
    border: none;
    margin-right: 0;
    margin-left: -6px; }

#search_widget {
  position: relative; }
  #search_widget ::placeholder {
    color: oklch(0.6 0.1 242);
    font-weight: normal; }
  #search_widget input#query {
    width: 300px;
    padding-block: 3px;
    padding-left: 24px; }
  #search_widget i.icon-search {
    top: 4px !important; }
  #search_widget table.help {
    margin-bottom: 0;
    margin-top: var(--space-1); }

.content-footer {
  margin-top: var(--space-2);
  border-top: var(--content-border);
  padding-block: var(--space-1); }

.buttons {
  display: flex;
  gap: var(--space-1); }
  .buttons.bar {
    margin-top: var(--space-2);
    border-top: var(--content-border);
    padding-block: var(--space-1); }
    .segment .buttons.bar {
      margin-inline: calc(-1 * var(--space-2));
      padding-inline: var(--space-2);
      margin-bottom: calc(-1 * var(--space-2)); }
  .buttons a,
  .buttons input[type=submit],
  .buttons input[type=button],
  .buttons button,
  .buttons .delete_link {
    height: 30px;
    line-height: 30px; }
  .buttons a.delete_link {
    display: inline-block;
    color: var(--red); }

.prose {
  color: #333;
  font-style: italic;
    font-style-margin-bottom: 3px; }
  .prose > *:last-child {
    margin-bottom: 0 !important; }
    .prose > *:last-child > *:last-child {
      margin-bottom: 0 !important; }

#main .presence a:hover,
#main .absence a:hover {
  text-decoration: underline; }
#main .presence.faulty, #main .presence.interfering {
  color: var(--red); }
  #main .presence.faulty a, #main .presence.interfering a {
    color: var(--red); }
#main .presence.ticking {
  color: var(--ticking-green); }
  #main .presence.ticking a {
    color: var(--ticking-green); }
#main select#filter {
  margin-bottom: 15px; }
#main .left_aligned_container {
  margin-left: -84px; }
#main #absence_requests tr.confirmation input[type=text],
#main #proxy_requests tr.confirmation input[type=text] {
  padding: 1px 6px; }

table.absence_overview img,
table.month_sheet img {
  vertical-align: -2px; }
table.absence_overview tr td,
table.month_sheet tr td {
  white-space: nowrap; }
  table.absence_overview tr td.wrap_normal,
  table.month_sheet tr td.wrap_normal {
    white-space: normal; }

table.month_sheet tr:nth-last-child(2) td {
  border-bottom: var(--thick-border); }
table.month_sheet tr:last-child td {
  padding-top: 4px;
  font-weight: 600;
  border-bottom-width: 0; }

.ui-datepicker {
  padding: var(--space-1); }
  .ui-datepicker .ui-datepicker-header {
    background: oklch(0.7 0.1 242);
    border-color: oklch(0.7 0.1 242); }
  .ui-datepicker .ui-state-default {
    color: oklch(0.5 0.15 242); }
  .ui-datepicker .ui-timepicker-div {
    margin-top: 1em; }
  .ui-datepicker .ui-datepicker-calendar .ui-state-default {
    border-color: transparent;
    border-radius: var(--border-radius-sm); }
  .ui-datepicker:has(.ui-datepicker-buttonpane) {
    padding-bottom: 0; }

ul.absences_to_cover li {
  flex-direction: column; }
  ul.absences_to_cover li + li {
    margin-top: var(--space-1); }
  ul.absences_to_cover li .name {
    font-size: var(--font-size-small);
    color: var(--text-muted); }

.help_toggle i {
  margin-left: 0.5em;
  font-size: 20px;
  vertical-align: bottom; }

#department_overview_department_id {
  max-width: 640px; }

h2 + .absence_overview {
  margin-top: -15px; }

table.absence_overview {
  --today-border: 3px solid var(--red);
  line-height: var(--calendar-box-size); }
  table.absence_overview .absence,
  table.absence_overview .am,
  table.absence_overview .pm,
  table.absence_overview .pending {
    background-color: var(--absence-color); }
  table.absence_overview th,
  table.absence_overview td {
    padding: 0;
    vertical-align: middle; }
  table.absence_overview th.-today {
    font-weight: bold;
    color: var(--red); }
  table.absence_overview thead th {
    font-size: var(--font-size-small);
    text-align: center;
    color: var(--text-muted); }
  table.absence_overview.-year .day.today {
    z-index: 1;
    outline: var(--today-border);
    outline-offset: 2px; }
  table.absence_overview.-year th.name {
    padding-right: 16px; }
  table.absence_overview.-month {
    isolation: isolate; }
    table.absence_overview.-month td:has(.day.today) {
      border-left: var(--today-border);
      border-right: var(--today-border); }
    table.absence_overview.-month tr:first-child td {
      vertical-align: bottom; }
    table.absence_overview.-month tr:first-child td:has(.day.today) {
      border-top: var(--today-border);
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius); }
    table.absence_overview.-month tr:last-child td {
      vertical-align: top; }
    table.absence_overview.-month tr:last-child td:has(.day.today) {
      border-bottom: var(--today-border);
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius); }
    table.absence_overview.-month tr:first-child:last-child td {
      vertical-align: middle; }
    table.absence_overview.-month td.pusher {
      pointer-events: none;
      width: 100%;
      position: relative;
      background: linear-gradient(to left, #fff 5px, transparent 20px), linear-gradient(to left, #fff 5px, transparent 20px); }
    table.absence_overview.-month th.name {
      position: relative;
      z-index: -1; }
      table.absence_overview.-month th.name:hover {
        z-index: 1; }
        table.absence_overview.-month th.name:hover .name-and-info {
          max-width: none !important;
          padding-right: 8px; }
        table.absence_overview.-month th.name:hover .account-info {
          opacity: 1; }
    table.absence_overview.-month .name-and-info {
      position: absolute;
      top: 1px;
      left: 0;
      background: #fff;
      --days: 31;
      max-width: calc(92px + ((31 - var(--days)) * 26px) - var(--today-marker-width, 0px));
      white-space: nowrap;
      overflow: hidden;
      cursor: default; }
    table.absence_overview.-month tr:has(.day.today) .name-and-info {
      --today-marker-width: 6px; }
    table.absence_overview.-month tr:has(td:nth-child(30)) .name-and-info {
      --days: 28; }
    table.absence_overview.-month tr:has(td:nth-child(31)) .name-and-info {
      --days: 29; }
    table.absence_overview.-month tr:has(td:nth-child(32)) .name-and-info {
      --days: 30; }
    table.absence_overview.-month tr:has(td:nth-child(33)) .name-and-info {
      --days: 31; }
    table.absence_overview.-month .account-info {
      opacity: 0;
      font-size: var(--font-size-small);
      color: var(--text-muted); }
      table.absence_overview.-month .account-info > span {
        padding-left: 20px; }
    table.absence_overview.-month:has(.day.today) tr:first-child .name {
      top: 4px; }
  table.absence_overview .day {
    width: var(--calendar-box-size);
    aspect-ratio: 1/1;
    background-color: #aaa;
    background-color: oklch(0.9 0.002 56);
    position: relative;
    margin: 1px;
    border-radius: var(--border-radius-sm);
    overflow: hidden; }
    table.absence_overview .day > div:not(.invert) {
      color: white; }
    table.absence_overview .day > div::before {
      display: inline-block;
      width: 100%;
      text-align: center;
      font-weight: 600;
      font-size: 14px; }
    table.absence_overview .day.should_work {
      background: #eee;
      background: oklch(0.97 0.002 56); }
    table.absence_overview .day.attestation_required > div::before {
      font-family: "FontAwesome";
      content: "";
      color: var(--red);
      text-shadow: 0px 0px 2px white, 0 0 2px white;
      line-height: calc(var(--calendar-box-size) + 2px); }
    table.absence_overview .day .vacation_draft {
      display: flex;
      align-items: center;
      justify-content: center; }
      table.absence_overview .day .vacation_draft:before {
        content: "●";
        color: var(--s-vacation); }
    table.absence_overview .day .absence,
    table.absence_overview .day .pending,
    table.absence_overview .day .vacation_draft,
    table.absence_overview .day .tooltip_container {
      position: absolute;
      width: 100%;
      height: 100%; }
    table.absence_overview .day .pending::before {
      content: "?"; }
    table.absence_overview .day .am,
    table.absence_overview .day .pm {
      position: absolute;
      width: 50%;
      height: 100%; }
    table.absence_overview .day .am {
      left: 0; }
    table.absence_overview .day .pm {
      right: 0; }
    table.absence_overview .day .proxy + .pending.am,
    table.absence_overview .day .proxy + .pending.pm {
      width: 100%; }
    table.absence_overview .day .presence_despite_sickness:before {
      content: "B"; }
    table.absence_overview .day .proxy_triangle {
      position: absolute;
      bottom: -3px;
      left: 0;
      overflow: hidden;
      width: var(--calendar-box-size);
      height: calc(var(--calendar-box-size) - 12px);
      color: var(--s-proxy);
      font-size: 32px; }

body.absence_form form .reason_help {
  margin-top: 10px;
  display: none; }

.absences-legend {
  column-width: 180px; }

.absences-legend--item {
  break-inside: avoid;
  margin-bottom: var(--space-1);
  display: grid;
  align-items: start;
  grid-template-areas: "box label";
  grid-template-columns: 20px 1fr;
  column-gap: var(--space-1);
  line-height: 1.3;
  --box-size: calc(var(--calendar-box-size) - 2px); }

.absences-legend--label {
  grid-area: label;
  line-height: var(--box-size); }

.absences-legend--box {
  grid-area: box;
  border-radius: var(--border-radius-sm);
  width: var(--box-size);
  aspect-ratio: 1/1;
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: var(--absence-color);
  color: white;
  font-weight: 500; }
  .absences-legend--box.-empty {
    background-color: oklch(0.97 0.002 56);
    color: black; }

table.month_sheet i {
  color: var(--text-muted);
  padding-left: 0.2em; }
  table.month_sheet i[title] {
    color: oklch(0.5 0.15 242); }
table.month_sheet td:not(.calendar_week) {
  border-bottom: 1px solid oklch(0.95 0.002 56); }
table.month_sheet td:last-child, table.month_sheet th:last-child {
  width: 300px;
  white-space: normal; }
table.month_sheet tr.sunday td {
  border-bottom: 2px solid oklch(0.94 0.002 56); }
table.month_sheet tr.saturday, table.month_sheet tr.sunday, table.month_sheet tr.holiday {
  color: oklch(0.7 0.002 56); }
table.month_sheet tr.contract-end td {
  border-bottom: none;
  padding-bottom: var(--space-1); }
table.month_sheet tr.contract-start td:not(:first-child) {
  padding-top: var(--space-1);
  border-bottom: var(--thick-border);
  border-top: none;
  font-weight: 500; }
table.month_sheet .overtime_change_hours {
  color: var(--text-muted); }

.user-state-sheet {
  columns: 3; }

.user-state-sheet--placeholder {
  display: grid;
  place-items: center; }

.user-state-sheet--user {
  break-inside: avoid;
  margin-bottom: var(--space-1);
  display: grid;
  grid-template-areas: "indicator name" "indicator state";
  grid-template-columns: 20px 1fr;
  align-items: start;
  column-gap: var(--space-1);
  line-height: 1.3; }

.user-state-sheet--name {
  grid-area: name;
  font-weight: 500; }

.user-state-sheet--state {
  grid-area: state;
  color: var(--text-muted);
  font-size: var(--font-size-small); }

.user-state-sheet--indicator {
  grid-area: indicator;
  border-radius: 100%;
  aspect-ratio: 1/1;
  background-color: var(--absence-color); }

#main .retroeditable_days {
  display: none; }
  #main .retroeditable_days .help {
    margin-top: 0;
    margin-left: 23px; }
#main input#contract_retroeditable:checked ~ .retroeditable_days {
  display: inline; }

/*# sourceMappingURL=screen.css.map */