@import url(/admin/style/normalize.css);
/* @import url(/admin/style/jq-ui.css); */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap');
@font-face {
     font-family: 'dlmdingbatsregular';
     src: url('/admin/ui/3/fonts/DLMDingbats.eot?v=2.6');
     src: url('/admin/ui/3/fonts/DLMDingbats.eot?v=2.6#iefix') format('embedded-opentype'),
          url('/admin/ui/3/fonts/DLMDingbats.woff2?v=2.6') format('woff2'),
          url('/admin/ui/3/fonts/DLMDingbats.woff?v=2.6') format('woff'),
          url('/admin/ui/3/fonts/DLMDingbats.ttf?v=2.6') format('truetype'),
          url('/admin/ui/3/fonts/DLMDingbats.svg?v=2.6#dlmdingbatsregular') format('svg');
     font-weight: normal;
     font-style: normal;
}

:root {
  --bg-primary: #ffffff;
  --bg-shade-min: #f6f7f9;
  --bg-shade-med: #eff3f6;
  --bg-shade-max: #e8ebf2;
  --bg-invert:     var(--fg-primary);
  --bg-invert-max: var(--fg-shade-max);

  --bg-modify-saved: var(--bg-inform-tint);
  --bg-modify-unsaved: var(--bg-warn-tint);
  --bg-tint-watershed1: var(--bg-warn-tint);
  --bg-tint-watershed2: var(--bg-inform-tint);

  --bg-pass:         #80ff80;
  --bg-pass-tint:    #c0ffc0;
  --bg-pass-vivid:   #009900;
  --bg-warn:         #ee9933;
  --bg-warn-tint:    #ffcc99;
  --bg-warn-vivid:   #ffbb00;
  --bg-hilite:       #ffee33;
  --bg-hilite-tint:  #ffffd0;
  --bg-hilite-vivid: #ffff00;
  --bg-fail:         #f75555;
  --bg-fail-tint:    #ffcccc;
  --bg-fail-vivid:   #ee1d23;
  --bg-inform:       #ababff;
  --bg-inform-tint:  #e0e0ff;
  --bg-inform-vivid: #6666ff;

  --fg-primary:   #000000;
  --fg-invert:    var(--bg-primary);
  --fg-shade-min: #354052;
  --fg-shade-med: #607085;
  --fg-shade-max: #757575;
  --fg-inform:    var(--bg-inform-vivid);

  --logo-people: var(--fg-primary);
  --logo-plan: #4F4F4F;

  --header:        var(--fg-shade-min);
  --steps:         var(--input-disabled-text);
  --keyline:       #dfe2e5;
  --keyline-med:   #ced0da;
  --keyline-heavy: #7e8a98;

  --sys-demo:  #dddd00;
  --sys-stage: #bbbbff;
  --sys-head: transparent;

  --nav-main-fill:        #2878bd;
  --nav-main-fill-active: #163f64;
  --nav-main-hilite:      #2f89da;
  --nav-main-lolite:      #1d5587;
  --nav-main-text:        var(--bg-primary);
  --nav-main-disabled:  #98b4cd;
  --nav-support:        #a2a2a2;

  --nav-sec-active: var(--nav-main-fill);
  --nav-sec-illus-filter: none;

  --scroll-bar-active: #ced0dacc;
  --scroll-bar-hidden: #ffffff00;
  --scroll-bar-edge:   #ffffff88;

  --menu-lock: #d8d8d8;

  --link-text:    #0374b5;
  --link-hover:     var(--fg-primary);
  --link-disable: #666666;

  --noti-success:  #319b34;
  --noti-warn:     #f7981c;
  --noti-error:    #de1219;
  --aside-success: #2b772e;
  --aside-warn:    #8e7505;
  --aside-error:   #d01117;
  --noti-label: var(--fg-invert);

  --btn-label: var(--bg-primary);
  --btn-label-invert: var(--fg-primary);

  --btn-submit-fill: #36af47;
  --btn-submit-accent: #36af47;
  --btn-submit-focus-fill:#187908;
  --btn-submit-focus-accent:#13661E;
  --btn-submit-active-fill:#0C4103;
  --btn-submit-active-accent:#0C4103;

  --btn-cancel-fill:#f14046;
  --btn-cancel-accent:#f14046;
  --btn-cancel-focus-fill:#de1219;
  --btn-cancel-focus-accent:#de1219;
  --btn-cancel-active-fill:#860408;
  --btn-cancel-active-accent:#860408;

  --btn-action-fill:#259bf3;
  --btn-action-accent:#259bf3;
  --btn-action-focus-fill:#0E70BA;
  --btn-action-focus-accent:#0E70BA;
  --btn-action-active-fill:#0D5184;
  --btn-action-active-accent:#0D5184;

  --btn-basic-fill: var(--bg-shade-min);
  --btn-basic-accent: var(--keyline-med);
  --btn-basic-focus-fill: var(--keyline);
  --btn-basic-focus-accent: var(--keyline-med);
  --btn-basic-active-fill: #dedede;
  --btn-basic-active-accent: var(--keyline);

  --btn-throbber: url(/admin/ui/3/art/dlmdecor/spinnerInfo.gif);
  --throbber: url(/admin/ui/3/art/SpinnerBlack.svg);
  --throbber-invert: url(/admin/ui/3/art/SpinnerWhite.svg);

  --font-height: calc( 1em * var(--line-height) );
  --field-padding-v: 7px;
  --field-margin-v: 2px;
  --field-border-width-v: 1px;
  --field-height: calc( ( ( var(--field-margin-v) + var(--field-padding-v) + var(--field-border-width-v) ) * 2 ) + var(--font-height) );

  --field-fill: var(--bg-primary);
  --field-border: var(--keyline);
  --field-value: var(--fg-shade-min);
  --field-placeholder: #a0a6ae;
  --field-required-label: var(--aside-error);
  --field-border-focus: var(--keyline-med);
  --field-border-active: #2EA2F8;

  --select-fill: linear-gradient( 0deg , var(--bg-shade-med) 0%, var(--bg-primary) 100%);
  --select-active-fill: var(--select-fill);
  --select-active-value: var(--field-border-active);

  --check-fill: var(--select-fill);
  --check-border: var(--field-border);
  --check-value: var(--btn-submit-fill);

  --check-active-fill: linear-gradient(0deg, #55d73f 0%, #2db515 100%);
  --check-active-border: #27aa11;
  --check-active-value: var(--bg-primary);

  --input-disabled-fill: #e9eDf1;
  --input-disabled-accent: var(--keyline);
  --input-disabled-text: #8f96a1;

  --shadow-full: rgba(0,0,0);
  --shadow-deep: rgba(0,0,0,0.50);
  --shadow-lite: rgba(0,0,0,0.30);
  --shadow-hint: rgba(0,0,0,0.10);

  --sched-today-fill: #485E66;
  --sched-today-text: var(--fg-invert);
  --sched-hover:   #cdecfa;
  --sched-active:  #bbd0d7;
  --sched-work:    #36af47;
  --sched-off:     #ed1d23;
  --sched-holiday: #1991eb;
  --sched-extra:   #d18b07;
  --sched-other:   #92278f;
  --sched-shutdown-fill:#ff8282;
  --sched-shutdown: #cc4444;
  --sched-shadow:      #800080;
  --sched-shadow-fill: #d6add4;
  --sched-pending:     var(--sched-holiday);
  --sched-info-fill: #209DD3;
  --sched-info-text: #ffffff;
  --sched-trans-in: var(--bg-inform-tint);
  --sched-trans-out: var(--bg-fail-tint);

  --sched-shift-early-fill: #fff5ad;
  --sched-shift-late-fill: #c7dfb1;
  --sched-shift-day-fill: #e8e85e;
  --sched-shift-night-fill: #9ed9ef;
  --sched-shift-ylw-fill: #ffff66;
  --sched-shift-red-fill: #ff6666;
  --sched-shift-grn-fill: #99ff66;
  --sched-shift-blu-fill: #6666ff;

  --login-ident-fill: #49515d;
  --login-ident-text: var(--bg-primary);

  --datepick-active: linear-gradient(0deg, #1991eb 0%, #2ea1f8 100%);
  --datepick-active: linear-gradient(0deg, #1991eb 0%, #2ea1f8 100%);

  --row-odd: var(--bg-shade-min);
  --row-even: var(--bg-primary);
  --row-deleted-odd: #fff8f8;
  --row-deleted-even: #ede5e5;
  --row-unvisible: #ffe0e0;
  --row-unvisible-text: var(--fg-primary);
  --row-unavail: #ffe0e0;
  --row-unavail-text: var(--fg-shade-max);
  --row-unavail-text-accent: var(--bg-shade-max);
  --row-highlight: var(--bg-warn);
  --row-highlight-text: var(--fg-primary);
  --row-drag: #ffff00;
  --row-drop: #f9f9cc;
  --row-focus-fill: #4c646e;
  --row-focus-text: var(--fg-invert);
  --row-archive-fill: var(--fg-shade-max);
  --row-archive-text: var(--fg-invert);

  --indicator-absent: #ED4147;
  --indicator-absent-text: var(--fg-invert);
  --indicator-holiday: #ED4147;
  --indicator-holiday-text: var(--fg-invert);
  --indicator-other: #ff9900;
  --indicator-other-text: var(--fg-primary);
  --indicator-adjust-off: #fee;
  --indicator-adjust-off-text: var(--fg-primary);
  --indicator-adjust-on: #fbb;
  --indicator-adjust-on-text: var(--fg-primary);
  --indicator-adjust-border: #a0a;
  --indicator-newrota-border: #0fc;

  --indicator-blue: #7185d5;
  --indicator-blue-text: var(--fg-primary);
  --indicator-red: #d04343;
  --indicator-red-text: var(--fg-primary);
  --indicator-green: #00A651;
  --indicator-green-text: var(--fg-primary);
  --indicator-yellow: #ffe800;
  --indicator-yellow-text: var(--fg-invert);
  --indicator-orange: #e0a300;
  --indicator-orange-text: var(--fg-primary);
  --indicator-purple: #d155d1;
  --indicator-purple-text: var(--fg-primary);

  --indicator-days: #9ad;
  --indicator-days-text: var(--fg-primary);
  --indicator-nights: #226;
  --indicator-nights-text: var(--fg-invert);
  --indicator-a: #a0a;
  --indicator-a-text: var(--fg-primary);
  --indicator-b: #0aa;
  --indicator-b-text: var(--fg-primary);
  --indicator-earlies: #faeac3;
  --indicator-earlies-text: var(--fg-primary);
  --indicator-lates: var(--sched-shift-late-fill);
  --indicator-lates-text: var(--fg-primary);

  --cell-flag-note: #bd251d;
  --cell-flag-action: #1d32bd;

  --flex-text-stroke: #ffffff;
  --flex-alloc-focus: #ffffcc;
  --flex-fg-actions: #003377;
  --flex-overtime: #D04360;
  --flex-toil: #efa9b8;
  --flex-status: #d0df2b;
  --flex-spare: #999;
  --flex-action: #aeae00;
  --flex-agency: #00ae1a;
  --flex-surplus: #ffae1a;
  --flex-training: #aaa;
  --flex-seasonal: #b00;
  --flex-seasonal-student: #6f00bb;
  --flex-sliceOff-opacity: 1;

  --flex-panel-area: #8f3b00;

  --planner-panel-shift: #66ccff;
  --planner-panel-work: #3366ff;

  --duration-layout:0.3s;

  --ico-flame-outer:#fe7f00;
  --ico-flame-inner:#fefe00;
  --ico-firstaid-outer:var(--noti-success);
  --ico-firstaid-inner:var(--bg-primary);
}

body.theme-dark {
  --bg-primary: #26272a;
  --bg-shade-min: #37393c;
  --bg-shade-med: #404246;
  --bg-shade-max: #57595e;

  --bg-invert:     var(--fg-primary);
  --bg-invert-max: var(--fg-shade-max);

  --bg-modify-saved: var(--bg-inform-tint);
  --bg-modify-unsaved: var(--bg-warn-tint);
  --bg-tint-watershed1: var(--bg-warn-tint);
  --bg-tint-watershed2: var(--bg-inform-tint);

  --bg-pass:         #272;
  --bg-pass-tint:    #252;
  --bg-pass-vivid:   #1b1;
  --bg-warn:         #651;
  --bg-warn-tint:    #531;
  --bg-warn-vivid:   #980;
  --bg-hilite:       #a80;
  --bg-hilite-tint:  #552;
  --bg-hilite-vivid: #991;
  --bg-fail:         #711;
  --bg-fail-tint:    #511;
  --bg-fail-vivid:   #b11;
  --bg-inform:       #228;
  --bg-inform-tint:  #226;
  --bg-inform-vivid: #3a3aff;

  --fg-primary:   #efefef;
  --fg-invert:    var(--bg-primary);
  --fg-shade-min: #d6d7d9;
  --fg-shade-med: #dfe3e6;
  --fg-shade-max: #d8dbe2;

  --logo-people: var(--fg-primary);
  --logo-plan: #8a8a8a;

  --header:        var(--fg-shade-min);
  --steps:         var(--input-disabled-text);
  --keyline:       #375353;
  --keyline-med:   #527a7a;
  --keyline-heavy: #85adad;

  --sys-demo:  #717100;
  --sys-stage: #6969b4;

  --nav-main-fill:        #21619a;
  --nav-main-fill-active: #123250;
  --nav-main-hilite:      #2277c4;
  --nav-main-lolite:      #1a4a77;
  --nav-main-text:        #eeeeee;
  --nav-main-disabled:  #8baac7;
  --nav-support:        #909090;

  --nav-sec-active: var(--nav-main-fill);
  --nav-sec-illus-filter: contrast(1.2) brightness(1.2);

  --scroll-bar-active: #556666cc;
  --scroll-bar-hidden: #20212400;
  --scroll-bar-edge:   #20212488;

  --menu-lock: #d8d8d8;

  --link-text:    #63b8e9;
  --link-hover:     var(--fg-primary);
  --link-disable: #666666;


  --noti-success:  #277c2a;
  --noti-warn: #d71;
  --noti-error: #a11;
  --aside-success: #3d3;
  --aside-warn: #da1;
  --aside-error: #f44;
  --noti-label: var(--fg-primary);


  --btn-label: var(--fg-primary);
  --btn-label-invert: var(--fg-primary);

  --btn-submit-fill: #247530;
  --btn-submit-accent: var(--btn-submit-fill);
  --btn-submit-focus-fill:#156806;
  --btn-submit-focus-accent:var(--btn-submit-focus-fill);
  --btn-submit-active-fill:#0C4103;
  --btn-submit-active-accent:var(--btn-submit-active-fill);

  --btn-cancel-fill:#9e2426;
  --btn-cancel-accent:var(--btn-cancel-fill);
  --btn-cancel-focus-fill:#860408;
  --btn-cancel-focus-accent:var(--btn-cancel-focus-fill);
  --btn-cancel-active-fill:#7d2123;
  --btn-cancel-active-accent:var(--btn-cancel-active-fill);

  --btn-action-fill:#146db0;
  --btn-action-accent:var(--btn-action-fill);
  --btn-action-focus-fill:#11609c;
  --btn-action-focus-accent:var(--btn-action-focus-fill);
  --btn-action-active-fill:#0D5184;
  --btn-action-active-accent:var(--btn-action-active-fill);

  --btn-basic-fill: var(--bg-shade-min);
  --btn-basic-accent: var(--keyline-med);
  --btn-basic-focus-fill: var(--keyline);
  --btn-basic-focus-accent: var(--keyline-med);
  --btn-basic-active-fill: #5a5b5c;
  --btn-basic-active-accent: var(--keyline);

  --btn-throbber: url(/admin/ui/3/art/dlmdecor/spinnerInfo.gif);
  --throbber: url(/admin/ui/3/art/SpinnerWhite.svg);
  --throbber-invert: url(/admin/ui/3/art/SpinnerBlack.svg);

  --field-fill: var(--bg-primary);
  --field-border: var(--keyline);
  --field-value: var(--fg-shade-min);
  --field-placeholder: #a0a6ae;
  --field-required-label: var(--aside-error);
  --field-border-focus: var(--keyline-med);
  --field-border-active: #1E82d8;

  --select-fill: linear-gradient( 0deg , var(--bg-primary) 0%, #171717 100%);
  --select-active-fill: var(--select-fill);
  --select-active-value: var(--field-border-active);

  --check-fill: var(--select-fill);
  --check-border: var(--field-border);
  --check-value: var(--btn-submit-fill);

  --check-active-fill: linear-gradient(0deg, #55d73f 0%, #2db515 100%);
  --check-active-border: #27aa11;
  --check-active-value: var(--bg-primary);

  --input-disabled-fill: #375353;
  --input-disabled-accent: var(--keyline-med);
  --input-disabled-text: #7b7d81;

  --shadow-full: rgba(0,0,0);
  --shadow-deep: rgba(0,0,0,0.9);
  --shadow-lite: rgba(0,0,0,0.80);
  --shadow-hint: rgba(0,0,0,0.50);

  --sched-today-fill: #485E66;
  --sched-today-text: var(--fg-primary);
  --sched-hover:   #2d4c5a;
  --sched-active:  #9bb0b7;
  --sched-work:    #36af47;
  --sched-off:     #ed1d23;
  --sched-holiday: #1991eb;
  --sched-extra:   #d18b07;
  --sched-other:   #92278f;
  --sched-shutdown-fill:#ff8282;
  --sched-shutdown: #cc4444;
  --sched-shadow:      #800080;
  --sched-shadow-fill: #d6add4;
  --sched-pending:     var(--sched-holiday);
  --sched-info-fill: #209DD3;
  --sched-info-text: #ffffff;
  --sched-trans-in: var(--bg-inform-tint);
  --sched-trans-out: var(--bg-fail-tint);

  --sched-shift-early-fill: #a09440;
  --sched-shift-late-fill: #629235;
  --sched-shift-day-fill: #9f9204;
  --sched-shift-night-fill: #1f7595;
  --sched-shift-ylw-fill: var(--indicator-yellow);
  --sched-shift-red-fill: var(--indicator-red);
  --sched-shift-grn-fill: var(--indicator-green);
  --sched-shift-blu-fill: var(--indicator-blue);

  --login-ident-fill: #49515d;
  --login-ident-text: var(--fg-primary);

  --datepick-active: linear-gradient(0deg, #1991eb 0%, #2ea1f8 100%);
  --datepick-active: linear-gradient(0deg, #1991eb 0%, #2ea1f8 100%);

  --row-odd: var(--bg-shade-min);
  --row-even: var(--bg-primary);
  --row-deleted-odd: #633;
  --row-deleted-even: #433;
  --row-unvisible: #5a4343;
  --row-unvisible-text: var(--fg-primary);
  --row-unavail: #ffe0e0;
  --row-unavail-text: var(--fg-shade-max);
  --row-unavail-text-accent: var(--bg-shade-max);
  --row-highlight: var(--bg-warn);
  --row-highlight-text: var(--fg-primary);
  --row-drag: #660;
  --row-drop: #533;
  --row-focus-fill: #353c48;
  --row-focus-text: var(--fg-primary);
  --row-archive-fill: #757575;
  --row-archive-text: var(--fg-primary);

  --indicator-absent: #ED4147;
  --indicator-absent-text: var(--fg-invert);
  --indicator-holiday: #ED4147;
  --indicator-holiday-text: var(--fg-invert);
  --indicator-other: #d88100;
  --indicator-other-text: var(--fg-primary);
  --indicator-adjust-off: #9a6a6a;
  --indicator-adjust-off-text: var(--fg-primary);
  --indicator-adjust-on: #9c3737;
  --indicator-adjust-on-text: var(--fg-primary);
  --indicator-adjust-border: #a0a;
  --indicator-newrota-border: #0fc;

  --indicator-blue: #7185d5;
  --indicator-blue-text: var(--fg-primary);
  --indicator-red: #d04343;
  --indicator-red-text: var(--fg-primary);
  --indicator-green: #00A651;
  --indicator-green-text: var(--fg-primary);
  --indicator-yellow: #e0ce00;
  --indicator-yellow-text: var(--fg-invert);
  --indicator-orange: #bb8900;
  --indicator-orange-text: var(--fg-primary);
  --indicator-purple: #d155d1;
  --indicator-purple-text: var(--fg-primary);

  --indicator-days: #9ad;
  --indicator-days-text: var(--fg-primary);
  --indicator-nights: #226;
  --indicator-nights-text: var(--fg-primary);
  --indicator-a: #a0a;
  --indicator-a-text: var(--fg-primary);
  --indicator-b: #0aa;
  --indicator-b-text: var(--fg-primary);
  --indicator-earlies: #faeac3;
  --indicator-earlies-text: var(--fg-invert);
  --indicator-lates: var(--sched-shift-late-fill);
  --indicator-lates-text: var(--fg-primary);

  --cell-flag-note: #bd251d;
  --cell-flag-action: #1d32bd;

  --flex-text-stroke: var(--bg-primary);
  --flex-alloc-focus: #34340a;
  --flex-fg-actions: #8cb1e3;
  --flex-overtime: #b52d48;
  --flex-toil: #efa9b8;
  --flex-status: #a5af1b;
  --flex-spare: #666;
  --flex-action: #aeae00;
  --flex-agency: #008a15;
  --flex-surplus: #946000;
  --flex-training: #aaa;
  --flex-seasonal: #f76868;
  --flex-seasonal-student: #b453f7;
  --flex-sliceOff-opacity: 0.3;

  --flex-panel-area: #ffaf75;

  --planner-panel-shift: #66ccff;
  --planner-panel-work: #3366ff;
}

/* ===== Scroll bar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-bar-active) var(--bg-primary);
}

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

*::-webkit-scrollbar-track {
    border-radius: 3px;
    background: var(--bg-primary);
    box-shadow: inset 0 0 5px 0px var(--scroll-bar-active);
}

*::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}
*::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--scroll-bar-active);
}

/* Removing input spinners: Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

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


 h1 [class^="ico-"],h1 [class*=" ico-"],h2 [class^="ico-"],h2 [class*=" ico-"],h3 [class^="ico-"],h3 [class*=" ico-"],caption [class^="ico-"],caption [class*=" ico-"] {
     float: right;
     margin-right: 0;
     color: var(--fg-primary);
     font-size: 1em;
     font-size: 1rem;
     margin-left: 0.3em;
     cursor: pointer;
}
h1>span [class^="ico-"],h1>span [class*=" ico-"],h2>span [class^="ico-"],h2>span [class*=" ico-"],h3>span [class^="ico-"],h3>span [class*=" ico-"]{
     float: none;
     text-indent: 9999px; /* positive because of rtl */
}
h1>span:has([class^="ico-"]),h1>span:has([class*=" ico-"]),h2>span:has([class^="ico-"]),h2>span:has([class*=" ico-"]),h3>span:has([class^="ico-"]),h3>span:has([class*=" ico-"]){
     float: right;
     direction: rtl;
}
h2 [class^="ico-"].inactive { color: var(--input-disabled-accent); }
[class^="ico-"],[class*=" ico-"] {
     display: inline-block;
     vertical-align: top;
     white-space: nowrap;
    /* child elements absolute */
     position: relative;
    /* remove inline-block white-space */
     margin-right: 0; /* -.16em 5px */
    /* if not already universally applied */
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
    /* padding here for text, icons replicate this using size and position:absolute - padding makes touch-target bigger */
     padding: 0;
    /* units used in font: 1em = 2048, icons 2400 wide, so icons are 1.171875em (2400/2048). Add padding x2 to get size: */
     width: 1.3em;
     height: 1em;
     line-height: 1em;
    /* text hidden old-school */
     text-align: left;
     text-decoration:none;
     text-indent: -9999px;
}
[class^="ico-"]::after,[class*=" ico-"]::after {
    content:"";
}
[class^="ico-"]::before,[class*=" ico-"]::before,[class^="ico-"]::after,[class*=" ico-"]::after {
     font-family: 'dlmdingbatsregular';
     display: block;
     position: absolute;
     white-space: normal;
    /* position centred within element */
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
    /* undo text hidden */
     text-indent: 0;
    /* inherits size from parent, ems cascade - font-size:1.3em; */
     font-style: normal !important;
     font-weight: normal !important;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-smoothing: antialiased;
    /* screen readers */
     speak: none;
    /* transitions here */
     text-decoration: none;
}
button.toggle [class^="ico-"], button.toggle [class*=" ico-"], .minorBtn [class^="ico-"],.minorBtn [class*=" ico-"] {
     line-height: 1.4em;
     font-size: 8px;
     margin-right: 6px;
     margin-top: 3px;
}

.ico-otvoluntary:after   { content: "0"; }
.ico-download:after      { content: "1"; }
.ico-clock:after         { content: "2"; }
.ico-globe:after         { content: "3"; }
.ico-mail:after          { content: "4"; }
.ico-user:after          { content: "5"; }
.ico-user-remove:after   { content: "6"; }
.ico-user-add:after      { content: "7"; }
.ico-user-tick:after     { content: "8"; }
.ico-speedo:after        { content: "9"; }

.ico-factory:after              { content: "L"; }
.ico-otmandatory:after   { content: "A"; }
.ico-history:after       { content: "B"; }
.ico-spot:after          { content: "C"; }
.ico-copy:after          { content: "D"; }
.ico-export:after        { content: "E"; }
.ico-locked:after        { content: "F"; }
.ico-unlocked:after      { content: "G"; }
.ico-help:after          { content: "H"; }
.ico-forward:after       { content: "I"; }
.ico-reverse:after       { content: "I"; transform: rotate(180deg) translate(60%,50%); }
.ico-fold-closed:after   { content: "I"; transition: transform 0.2s; }
.ico-fold-open:after     { content: "I"; transition: transform 0.2s; transform: rotate(90deg) translate(-25%,75%); }
.ico-calendar:after      { content: "J"; }
.ico-thumb-up:after      { content: "K"; }
.ico-thumb-down:after    { content: "K"; transform: scaleY(-1) translate(-50%,50%); }
.ico-notification:after  { content: "N"; }
.ico-popout:after        { content: "O"; }
.ico-pinned:after        { content: "P"; }
.ico-unpinned:after      { content: "Q"; }
.ico-super:after         { content: "S"; }
.ico-forward-fast:after  { content: "T"; }
.ico-reverse-fast:after  { content: "T"; transform: rotate(180deg) translate(50%,50%); }
.ico-right-arrow2:after  { content: "V"; }
.ico-left-arrow2:after   { content: "V"; transform: rotate(180deg) translate(50%, 50%); }
.ico-up-arrow2:after     { content: "V"; transform: rotate(-90deg) translate(50%,-60%); }
.ico-down-arrow2:after   { content: "V"; transform: rotate(90deg) translate(-50%, 60%); }
.ico-trash:after         { content: "X"; }
.ico-star:after          { content: "Y"; }
.ico-swap:after          { content: "Z"; }
.ico-reorder:after       { content: "Z"; transform: rotate(90deg) translate(-35%,50%); }

.ico-add:after           { content: "a"; }
.ico-back:after          { content: "b"; }
.ico-redo:after          { content: "b"; transform: scaleX(-1) translate(50%,-50%); }
.ico-edit:after          { content: "e"; }
.ico-filter:after        { content: "f"; }
.ico-exclam:after        { content: "g"; }
.ico-home:after          { content: "h"; }
.ico-info:after          { content: "i"; }
.ico-jump-closed:after   { content: "j"; }
.ico-jump-open:after     { content: "k"; }
.ico-next:after          { content: "n"; }
.ico-prev:after          { content: "n"; transform: rotate(180deg) translate(50%, 50%); }
.ico-print:after         { content: "p"; }
.ico-settings:after      { content: "q"; }
.ico-right-arrow:after   { content: "r"; }
.ico-left-arrow:after    { content: "r"; transform: rotate(180deg) translate(50%, 50%); }
.ico-up-arrow:after      { content: "r"; transform: rotate(-90deg) translate(50%,-60%); }
.ico-down-arrow:after    { content: "r"; transform: rotate(90deg) translate(-50%, 60%); }
.ico-search:after        { content: "s"; }
.ico-tick:after          { content: "t"; }
.ico-inbox:after         { content: "v"; }
.ico-menu:after          { content: "v"; }
.ico-delete:after        { content: "x"; }
.ico-fullscreen-enter:after { content: "d"; }
.ico-fullscreen-exit:after  { content: "c"; }
.ico-flame:before           { content: "@"; color: var(--ico-flame-outer); }
.ico-flame:after        	{ content: "\5b"; color: var(--ico-flame-inner); }
.ico-firstaid:before        { content: "!"; color: var(--ico-firstaid-outer); }
.ico-firstaid:after     	{ content: "\23"; color: var(--ico-firstaid-inner); }

.ico-presentation-enter:after  { content: "G"; }
.ico-presentation-exit:after  { content: "F"; }

.ico-user-search::after  { content: "5"; font-size: 80%; transform: translate(-60%,-41%); }
.ico-user-search::before {
   content: 's';
   position: absolute;
   top: -1px;
   right: 5px;
   font-family: 'dlmdingbatsregular';
   width: 3px;
   font-size: 0.85rem;
   text-shadow:-1px 0 0 var(--shadow-deep);
   z-index: 1;
}

.ico-notification.ico-post:after { color: var(--bg-fail-vivid); }

.ico-roundel {
     width: 1.1rem;
     height: 1.1rem;
     margin: -0.05rem 5px 0px 0.015em;
     border-radius: 100%;
     background: var(--fg-primary);
     color: var(--fg-invert);
}
 .ico-roundel::after {
     font-size: 1rem;
}
 .ico-pve::after {
     color: var(--bg-pass-vivid);
}
 .ico-wve::after {
     color: var(--bg-invert-max);
}
 .ico-nve::after {
     color: var(--bg-fail-vivid);
}
 .ico-ive::after {
     color: var(--bg-inform-vivid);
}
 .ico-roundel.ico-pve {
     background-color: var(--bg-pass-vivid);
}
 .ico-roundel.ico-wve {
     background-color: var(--bg-invert-max);
}
 .ico-roundel.ico-nve {
     background-color: var(--bg-fail-vivid);
}
 .ico-roundel.ico-ive {
     background-color: var(--bg-inform-vivid);
}
 .ico-roundel.ico-pve::after,.ico-roundel.ico-nve::after,.ico-roundel.ico-ive::after,.ico-roundel.ico-wve::after {
     color: var(--fg-invert);
}
 .ico-med {
     font-size:140%;
}
 .ico-med:after {
     line-height: 140%;
}
 .ico-lrg {
     font-size:180%;
}
 .ico-lrg:after {
     line-height: 140%;
}

.ico-count { text-indent: 0; color: var(--bg-primary); position: absolute; top: -0.5em; right: -0.5em; font-size: 90%; text-align: center; width: auto; height: 1.25em; padding: 0 0.4em 0.2em 0.4em; border-radius: 1.25em; font-style: normal; }
.ico-count:after { content: none; }

.hasCount { position: relative; }

 .popup .message .ico-pve:after, .popup .message .ico-nve:after, .popup .message .ico-ive:after {
     content: "t";
}
 ._template {
     display: none;
}
 ._usePrefGrps,._useRelaxedCheck {
     float: left;
     padding: 5px;
}

 html,body,#page {
     height: 100%;
     margin: 0;
     padding: 0;
}
 html {
     outline: 0;
     line-height: var(--line-height);
     font: 14px 'Source Sans Pro', Candara, sans-serif;
}
 body {
     background: #ffffff;
     background: var(--bg-primary);
     color: var(--fg-primary);
}
 body:not(.iframeBody){
     min-width:1024px;
}
 button {
     -webkit-appearance: none;
     appearance: none;
}
 table {
     border-collapse: collapse;
}
 th,td {
     padding-top: 2px;
     padding-bottom: 1px;
     vertical-align: top;
     background-color: var(--bg-primary); /* ensures sticky row/col cells aren't transparent*/
}
 th.numeric,td.numeric,.listHead th.numeric,.listHead td.numeric,input.numeric,input[type=number],.numeric {
     text-align: right;
}
 td.formButtons {
     padding-top: 8px;
}
 td.border {
     background-color: var(--keyline) !important;
}
 label {
     vertical-align: middle;
     user-select:none;
}
.filterline label {
     display: inline-block;
}
label>input,label>select,label>textarea,label>.formElement {
    display: inline-block;
    margin-left: 0.2em
}
label, .formLabel, .label, th, td.label, th.label {
     color: var(--fg-shade-med);
     font-weight: 600;
}
label>.select2-container {
     font-weight: normal;
     margin-left: 2px;
}
th, td.label, th.label, .formLabel, .formText {
     text-align: right;
     padding: 0 1em 0 0;
     vertical-align: top;
}
.label:has(input,select,textarea,.formElement)>span:first-child {
     text-align: right;	
}
.listSubHead th {
  text-align:left;
}
.formLabel {
     width: 30%;
}
td.formLabel, .adminHolder td.formLabel {
     vertical-align: top;
     line-height: 36px;
}
.labelAlign td.formLabel {
     line-height: normal;
}

td.formLabel.mandatory, td.formLabel:has(+td [required]), td.required, tr.required .formLabel,tr.required label,label.required, td.formLabel.mandatory {
     color: var(--field-required-label);
}
td.formLabel.mandatory:before, td.formLabel:has(+td [required]):before, td.formLabel.required:before, tr.required .formLabel:before,tr.required label:before, label.required:before {
     content: "* ";
}
 .formLabel.shortLabel {
     width: auto;
}
 label span.notice {
     font-weight: normal;
}
 .workingDay {
     color: var(--sched-work);
}

.formInline {
     margin-bottom: 0.5em;
}
.formInline label>span:first-of-type,
.formInline .label>span:first-of-type {
    display: block;
}
.formInline label:has(:not(.bistate)),
.formInline .label:has(:not(.bistate)) {
     display: inline-block;
     vertical-align: top;
     margin-right: 0.5em;
}
.formInline label:has(:not(.bistate)):not(.bistate,:first-of-type),
.formInline .label:has(:not(.bistate)):not(.bistate,:first-of-type) {
    margin-left: 1em;
}
.formInline label:has(input[type="checkbox"],input[type="radio"]), .formInline .bistate {
     vertical-align: bottom;
     margin-bottom: calc( ( var(--field-height) / 2 ) - ( var(--font-height) / 2 )  );
}
.formInline .submitButton, .formInline button,.formInline input[type="submit"]  {
     vertical-align: bottom;
}
.formInline .extraFilter {
    position: fixed;
    vertical-align: top;
    z-index: 100;
}
.formInline.compact,
.formInline.compact label,
.formInline.compact .bistate {
    margin-bottom: 0;
}
.formInline *:last-child {
	margin-bottom: 0;
}

.labelAlign td {
     vertical-align: bottom;
}
 .labelAlign td.label,.labelAlign .formLabel {
     vertical-align: top;
}
 *,*:focus,*:active,a:focus,a:active {
     outline: inherit;
}
 .noentry,.noentry *,.noentry *:hover {
     cursor: not-allowed !important;
}
 .clk {
     cursor: pointer;
}
 form {
     margin: 0;
     padding: 4px;
     overflow: hidden;
}
 form .fields {
     clear: both;
     overflow: hidden;
}
 form .messages {
     padding: 0.2em 0;
     min-height: 2em;
}
 form .fields .formButtons {
     border: 0;
     margin: 0;
     padding: 0;
}
 img {
     vertical-align: middle;
}
 a img {
     border: none;
}
 a, .neighbourNav button, details>p>button, details>p>button[type] {
     outline: none;
     border: 0;
     background: none;
     color: var(--link-text);
     font-weight:normal;
     text-decoration:underline;
}
 .neighbourNav button>[class^="ico-"], details>p>button>[class^="ico-"] {
     color: var(--fg-shade-max);
}
 a:hover, .neighbourNav button:hover, details>p>button:hover, details>p>button[type]:hover {
     color: var(--link-hover);
}
 .neighbourNav button:hover, details>p>button:hover, details>p>button[type]:hover {
     border: 0;
}
 a.disabled,.disabled {
     color: var(--link-disable) !important;
     cursor: default;
     font-style: italic;
}
 .urlNote {
     font-size: 8pt;
     color: var(--fg-shade-max);
     float: right;
}
 #page {
     margin: 0px;
     background: var(--bg-primary);
}
 .iframeBody #page {
     margin: 0;
     padding: 0;
     text-align: left;
     width: auto;
}
 #overlays {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:0;
     overflow:visible;
}
 .head {
     position: relative;
     overflow:hidden;
     background-color: var(--sys-head);
}

/* header & tab bar */

 #dlm_helpLink.noHelp {
     color: var(--fg-shade-max);
     opacity: 0.5;
     cursor:default;
}
 #dlm_helpLink.noHelp:hover {
     color: var(--link-hover);
}
/*v3*/
 #topMenu {
     background: var(--nav-main-fill);
     position: relative;
     bottom: 0;
     right: 0;
     width: 100%;
     max-height:50px; /* for transition */
     height: auto;
     white-space: nowrap;
     overflow: hidden;
     border-top: 1px solid var(--keyline);

     transition: max-height var(--duration-layout) ease-in;
}
 #topMenu #recent {
     display: inline-block;
 }
 #topMenu #recent a {
     width: 150px;
     padding: 0 0 0 6px;
     border: none;
}
#topMenu a, #topMenu span {
     box-sizing: border-box;
     font-size: 15px;
     font-weight: 600 !important;
     line-height: 26px;
}
 #topMenu a {
     display: inline-block;
     border-left: 1px solid var(--nav-main-hilite);
     border-right: 1px solid var(--nav-main-lolite);
     padding: 0 14px 0 14px;
     color: var(--nav-main-text);
     line-height:1.8em;
     font-weight: 500;
     text-decoration: none;
     outline: none;
}
 #topMenu a:hover, #topMenu a.active {
     color: var(--nav-main-text);
     background: var(--nav-main-fill-active);
}
 #topMenu a.disabled, #topMenu.disabled {
     color: var(--nav-main-disabled) !important;
}
 #topMenu a img {
     margin: 0 -3px;
}

#topMenu [class^="ico-"] {
    vertical-align: bottom;
}

#topMenu [class^="ico-"]::after {
    top: 2px;
}

 #topMenu>a:first-of-type {
    width: 50px;
    text-align: center;
    padding: 0;
}

 #topMenu #tools {
     float: right;
     border-left: 1px solid var(--nav-main-hilite);
}
 #topMenu #tools a {
     border-right: 1px solid var(--nav-main-hilite);
     border-left: 1px solid var(--nav-main-lolite);
     padding: 0 10px;
     font-size: 17px;
     line-height: 27px;
}
 #topMenu #tools a:last-of-type {
     border-right: none;
}
 #history {
     text-align: left;
     max-height: 250px;
     overflow-y: auto;
}
 #history .since {
     text-align: right;
     border-top: 1px solid var(--keyline);
     font-size: 85%;
     color: var(--fg-shade-max)
}
 #history .trail {
     text-align: left;
     font-size: 85%;
}
 #history .title {
     font-weight: bold;
}

/* side menu & show/hide */

 #sideMenu {
     position: absolute;
     width: 22px;
	 height: 100%;
     background-color: var(--scroll-bar-hidden);  /* exists only to be inherited by the menu scrollbar */
     z-index: 50;
     left: 0;
     opacity: 1;
     overflow: overlay;
     overflow-x: hidden;
     scrollbar-width: none;
     border-right: 1px solid var(--keyline);
     box-sizing: border-box;
     transition: background-color var(--duration-layout), width var(--duration-layout), opacity var(--duration-layout), left var(--duration-layout) !important;
}
.presentMode #sideMenu {
	 left: -22px;
}

body:not(.loginPane) #sideMenu:hover {
     position: absolute !important;
     width: 200px !important;
     background-color: var(--scroll-bar-active); /* exists only to be inherited by the menu scrollbar */
     box-shadow: 5px 3px 5px 0 var(--shadow-hint) !important;
     transition: background-color var(--duration-layout), width var(--duration-layout) !important;
}
#bodyArea {
     position:relative;
}
 #sideMenuBody {
     margin: 0;
     width: 200px;
     background: var(--bg-primary);
     min-height:100%;
}
 #sideMenu .open-side {
     z-index: 1;
     position: sticky;
     display: flex;
     top:0;
     height: 30px;
     margin: 0;
     padding: 10px 0 0;
}
 #sideMenu .open-side .lock.unlocked {
     display: block;
     color: var(--menu-lock);
     text-align: center;
     padding: 1px 4px;
     text-decoration: none;
     width: 16px;
}
 #sideMenu .open-side .lock.unlocked span {
     background-color: var(--menu-lock);
     display: block;
     height: 2px;
     margin-bottom: 3px;
     width: 14px;
     opacity: 1;
     transition: opacity var(--duration-layout) ease-in-out !important; /*hamburger fade*/
}

 #sideMenu:hover, .lockedMenu {
    overflow: overlay;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-bar-active) var(--scroll-bar-hidden);
}
 #sideMenu::-webkit-scrollbar {
    width: 13px;
}
 #sideMenu::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: var(--scroll-bar-hidden);
 }
 #sideMenu::-webkit-scrollbar-thumb {
    border-radius: 9px;
    background-color: inherit; /* magic used to make the bar fade in/out based on parent BG hover transition*/
    background-clip: content-box;
    border: 4px solid var(--scroll-bar-hidden);
    border-left-width: 5px;
 }
 #sideMenu:hover {
    scrollbar-color: var(--scroll-bar-active) var(--scroll-bar-edge);
}
 #sideMenu:hover::-webkit-scrollbar-track {
    background-color: var(--scroll-bar-hidden);
    border: 4px solid var(--scroll-bar-edge);
 }

/*DLM people ident*/
 #sideMenu:hover:after, .lockedMenu:after {
    content: "";
    z-index: -1;
    position: absolute;
    left: 0;
    bottom: 4ex;
    height: 116px;
    width: 100%;
    background: url(/admin/ui/3/art/dlmdecor/figures.png) no-repeat center bottom;
    filter: var(--nav-sec-illus-filter);
}
 #sideMenu:has(.privacy):after {
    bottom: 9ex;
}

#sideMenu .privacy {
	position: absolute;
	bottom: 1ex;
    display: inline-block;
    width: 100%;
    text-align: center;
}

a[target=_blank]:after {
    display: inline-block;
    content: "O";
    font-family: 'dlmdingbatsregular';
    font-size: 70%;
    vertical-align: super;
    margin-left: 0.3em;
}

 .lockedMenu {
     box-shadow: 5px 3px 5px 0px var(--shadow-hint)!important;
     width: 200px!important;
     clip: auto!important;
}

 #sideMenu:hover #openSideMenu span,.lockedMenu .open-side span {
     opacity: 0 !important;
     transition: opacity var(--duration-layout) ease-in-out;
}
 #sideMenu:hover .lock,#sideMenu:hover .unlocked,.lockedMenu .lock {
     margin: 0;
     padding: 0!important;
     box-sizing: border-box;
     width: 24px!important;
     height: 21px;
     border: 3px solid var(--menu-lock);
     border-radius: 5px;
     position: relative;
     cursor: pointer;
     overflow: inherit;
     transform: scale(0.5);
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
}
 #sideMenu:hover .lock:after,#sideMenu:hover .unlocked:after,#sideMenu.lockedMenu .open-side .lock:after {
     content: "";
     position: absolute;
     display: block;
     top: 50%;
     left: 50%;
     width: 3px;
     height: 7px;
     margin: -3.5px 0 0 -2px;
     background: var(--menu-lock);
     transition: width 0.4s ease-in-out;
}
 #sideMenu:hover .lock:before, #sideMenu:hover .unlocked:before, #sideMenu.lockedMenu .open-side .lock:before {
     content: "";
     position: absolute;
     display: block;
     bottom: 100%;
     left: 50%;
     width: 10px;
     height: 10px;
     margin-left: -8px;
     border: 3px solid var(--menu-lock);
     border-top-right-radius: 50%;
     border-top-left-radius: 50%;
     border-bottom: 0;
     transition: width 0.1s ease-in-out;
}

/* Locked Hover */
 #sideMenu:hover .lock:hover:before,#sideMenu:hover .unlocked:hover:before,.lockedMenu:hover .lock:hover:before {
     height: 12px;
}

 #sideMenu:hover .unlocked  {
     transform: rotate(10deg);
     transform: scale(0.5);
}
 #sideMenu:hover .unlocked:before {
     bottom: 130%;
     left: 31%;
     margin-left: -11.5px;
     transform: rotate(-45deg);
}
 #sideMenu:hover .unlocked,#sideMenu:hover .unlocked:before {
     border-color: var(--menu-lock);
}
 #sideMenu:hover .unlocked:after {
     background: var(--menu-lock);
}
/* Unlocked Hover */
 #sideMenu:hover .unlocked:hover {
     transform: rotate(3deg);
     transform: scale(0.5);
}
 #sideMenu:hover .unlocked:hover:before {
     height: 10px;
     left: 40%;
     bottom: 124%;
     transform: rotate(-30deg);
}

 #sideMenu .active > a {
     color: var(--nav-sec-active);
     text-decoration: none;
}
 #sideMenu .btn-close {
     font-size: 36px;
     margin-left: 50px;
}
 #sideMenu .btn-close:hover {
     background: transparent;
     color: var(--nav-sec-active);
}
 #mainArea {
     position:relative;
     height: 485px;
     box-sizing: border-box;
     overflow: hidden;
     margin-left: 20px;
     transition: margin-left var(--duration-layout), box-shadow var(--duration-layout), opacity var(--duration-layout);
}
 #mainArea.fullWidthContent {
     margin-left: 200px;
}
.presentMode #mainArea {
	 margin-left: 0px;
}

 #mainArea.dashboard, .adminPane.dashboard, .adminPane.employeeProfile {
     background-color: var(--bg-shade-med);
}

 #mainArea.dashboard  .card, .adminPane.dashboard  .card, .adminPane.employeeProfile .card {
     overflow-y:auto;
     max-height:400px;
}
 #mainIframe {
     position:absolute;
     height:100%;
     width:100%;
     margin: 0;
     border: 0;
     padding: 0;
}
 body.iframeBody #mainArea {
     height: auto;
     position: static;
}
.topLine {
	 max-height: 70px;
	 display: flex;
	 align-items: center;
	 height: 70px;
     transition: max-height var(--duration-layout) ease-in-out;
}
#topBar {
	 position:absolute;
     right: 0;
     display:flex;
     align-items:center;
     max-height:100%;
     padding-top: 13px;
     line-height: 19px;
     font-size: 13px;
     transition: max-height var(--duration-layout) ease-in-out, padding var(--duration-layout) ease-in-out;
}
#topBar button {
     position:relative;
     transform: translateY(0);
     display: inline-block;
     margin: 0 0 0 10px;
     border:0;
     background:transparent;
     padding:0;
     opacity: 1;
     color: var(--fg-shade-med);
     font-weight: 600;
     text-decoration: none;
     text-align: center;
     cursor: pointer;
     transition: 0.5s;
     transition: transform calc(var(--duration-layout) * 2), opacity var(--duration-layout); /* adjusts when menu un/locks*/
}

#topBar .support {
     padding-right: 8px;
}
#topBar .support button {
     width: 55px;
     min-width: 55px;
}
#topBar .layout button {
     width: 0px;
     min-width: 0px;
     overflow: hidden;
     margin: 0;
     padding: 0;
     opacity: 0;
     font-size:1.3rem;
     transition: width var(--duration-layout) ease-in-out,
     	padding var(--duration-layout) ease-in-out,
     	opacity var(--duration-layout) linear;
}
#topBar button span {
     text-transform: capitalize;
  }
#topBar .layout button span[class^='ico'] {
     display: inline-block;
     height:40px;
     color: var(--fg-primary);
}
#topBar button span[class^="ico-"] {
     text-transform: none;
  }
#topBar :hover {
     color: var(--fg-shade-med);
     background:transparent;
     transition: 0.5s;
}
#topBar :hover img {
     opacity: 0.8;
     transition: 0.5s;
}
#topBar span {
     display: inline-block;
}
#topBar span:last-of-type:before {
    content: " ";
    display: block;
}
#topBar img {
     margin: 0;
}
#topBar span[class^="ico-"] {
     width:36px;
     font-weight: normal;
}
#topBar .support span[class^="ico-"] {
     height:36px;
     font-size: 23px;
     border-radius: 50%;
     background: var(--nav-support);
     color: var(--bg-primary);
}
#topBar span[class^="ico-"]:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#topBar button:hover span[class^="ico-"] {
    opacity: 0.8;
    transition: opacity 0.5s;
}

#topBar .support button span[class^='ico'] {
  display:block;
  transform: translateY(0px);
  max-height: 40px;
  margin:auto;
  opacity:1;
  transition-property: max-height, transform, opacity;
  transition-duration: var(--duration-layout);
  transition-timing-function: ease-in-out;
}

#page.fullScreen {
  .logo {
    transition: top var(--duration-layout) ease-in-out;
  }
  .dev-system .logo:after, .test-system .logo:after {
    opacity:0;
    transition: opacity var(--duration-layout) ease-in-out;
  }
  h1#pageTitle {
    top:3px;
    margin-right:300px;
    transition: top var(--duration-layout) ease-in-out;
  }
  .topLine,#topBar {
    max-height:36px;
    padding:0;
  }
  #topBar .support span[class^='ico'], #topBar .support span[class^='ico']:after {
    transform: translateY(-20px);
    max-height: 0px;
    opacity: 0;
  }
  #topBar .layout button {
    width:40px;
    opacity: 1;
     transition: width var(--duration-layout) ease-in-out,
     	padding var(--duration-layout) ease-in-out,
     	opacity var(--duration-layout) linear;
  }
  #topMenu {
    max-height:1px;
 }
}
 #page.presentMode {
   #topBar .support button {
     transform: translateY(-2lh);
     opacity: 0;
   }
   #presentationMode span:before {
     outline: 1px solid red;
   }
   #presentationMode span:after {
     color: red;
     content: "F";
     border: solid red 1px;
     border-radius: 5px;
     padding: 4px;
   }
   .formButtons {
     visibility:hidden;
     position: absolute;
     z-index: -999;
     top: 0;
  }
  .kiosk button, .btnGroup summary, .btnGroup>*, .btnGroup>button
  {
     line-height: 2rem;
     font-size: 1.6rem !important;
  }
}



.logo {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 200px;
    height:100%;
    padding-left: 20px;
    transition: top var(--duration-layout) ease-in-out;
}

.logo svg {
    width:162px;
    height:32px;
    margin-top:10px;
}
.logo svg path  {
    fill: var(--logo-people);
}
.logo svg .st0 {
    fill: var(--logo-plan);
}

 h1#pageTitle {
    position: absolute;
    top: 27px;
    left: 214px;
    right: 0;
    margin-right: 205px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity var(--duration-layout), top var(--duration-layout) ease-in-out;
}
h1#pageTitle.loading:not(:empty)::after{
	content: '';
    display: inline-block;
    width: 0.9em;
    aspect-ratio: 1;
    background-image: var(--throbber);
    background-size: contain;
    vertical-align: middle;
    opacity: 0.3;
    margin-left: 0.3em;
}
.adminHead h1 {
  display:none;
}
 #topMenu .lang {
     float: right;
     margin-right: 20px;
}
 #topMenu .lang .flag {
     cursor: pointer;
     margin: 2px 4px 0 0;
}
 .dropdown {
     position: relative;
     display: inline-block;
}
 .dropdown-content {
     overflow: overlay;
     z-index: 1;
     border-radius: 5px;
     margin: 0 -10px;
}
 .dropdown-content ul {
     margin: 0;
     padding: 0;
}
 .dropdown-content li {
     display: block;
     list-style-type: none;
     width: 100%;
     border-bottom: 1px solid var(--keyline);
}
 .dropdown-content li:last-of-type {
     border-bottom: none;
}
 .dropdown-content li>* {
     box-sizing: border-box;
     display: block;
     float: none;
     width: 100%;
     margin: 0;
     padding: 10px 10px 10px 12px;
     color: var(--fg-shade-min);
     font-weight: 500;
     text-align: left;
     text-decoration: none;
     text-transform: capitalize;
     transition: 0.5s;
}
 .dropdown-content a:hover {
     background: var(--bg-shade-med);
     color: var(--select-value-active);
     transition: 0.5s;
}
 .dropdown a:hover {
     background-color: var(--bg-shade-med);
     transition: 0.5s;
}
 .show {
     display: block;
}

/*! Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */
 .flag {
     display: inline-block;
     width: 24px;
     height: 24px;
     background: url('/admin/ui/3/art/flags.png') no-repeat;
}
.flag.es-mx,.flag.es-gb {
     background-position: -120px -96px;
}
.flag.ru-ru,.flag.ru-gb {
     background-position: -120px -120px;
}
.flag.fr-fr,.flag.fr-gb {
     background-position: -24px -48px;
}
.flag.cz-cz,.flag.cz-gb {
     background-position: -48px -24px;
}
.flag.gr-gr,.flag.gr-gb {
     background-position: -72px -48px;
}
.flag.jp-jp,.flag.jp-gb {
     background-position: -96px -72px;
}
.flag.pl-pl,.flag.pl-gb {
     background-position: -24px -120px;
}
.flag.is-is,.flag.is-gb {
     background-position: -48px -72px;
}
.flag.se-se,.flag.se-gb {
     background-position: -144px -120px;
}
.flag.he-il,.flag.he-gb {
     background-position: 0 -72px;
}
.flag.sk-sk,.flag.sk-gb {
     background-position: -24px -144px;
}
.flag.es-es,.flag.es-gb {
     background-position: -144px -24px;
}
.flag.es-us,.flag.es-gb {
     background-position: -144px -24px;
}
.flag.pt-br,.flag.pt-gb {
     background-position: -120px 0;
}
.flag.pt-pt,.flag.pt-gb {
     background-position: -48px -120px;
}
.flag.hi-in,.flag.hi-gb {
     background-position: -24px -72px;
}
.flag.in-id,.flag.in-gb {
     background-position: -144px -48px;
}
.flag.sr-ba,.flag.sr-gb {
     background-position: -24px 0;
}
.flag.it-it,.flag.it-gb {
     background-position: -72px -72px;
}
.flag.at-at,.flag.at-gb {
     background-position: 0 0;
}
.flag.hr-hr,.flag.hr-gb {
     background-position: -96px -48px;
}
.flag.en-us,.flag.en-gb {
     background-position: -72px -144px;
}
.flag.sl-si,.flag.sl-gb {
     background-position: 0 -144px;
}
.flag.da-dk,.flag.da-gb {
     background-position: -96px -24px;
}
.flag.no-no,.flag.no-gb {
     background-position: 0 -120px;
}
.flag.lt-lt,.flag.lt-gb {
     background-position: -48px -96px;
}
.flag.bg-bg,.flag.bg-gb {
     background-position: -72px 0;
}
.flag.fi-fi,.flag.fi-gb {
     background-position: 0 -48px;
}
.flag.ar-kw,.flag.ar-gb {
     background-position: 0 -96px;
}
.flag.ru-ua,.flag.ru-gb {
     background-position: -48px -144px;
}
.flag.en-gb,.flag.en-gb {
     background-position: -48px -48px;
}
.flag.zh-cn,.flag.zh-gb {
     background-position: -24px -24px;
}
.flag.de-de,.flag.de-gb {
     background-position: -72px -24px;
}
.flag.hu-hu,.flag.hu-gb {
     background-position: -120px -48px;
}
.flag.ar-bh,.flag.ar-gb {
     background-position: -96px 0;
}
.flag.et-ee,.flag.et-gb {
     background-position: -120px -24px;
}
.flag.lv-lv,.flag.lv-gb {
     background-position: -72px -96px;
}
.flag.ro-ro,.flag.ro-gb {
     background-position: -72px -120px;
}
.flag.nl-nl,.flag.nl-gb {
     background-position: -144px -96px;
}
.flag.nl-be {
    background-position: -48px 0;
}

/* Main login panel */

.loginPane #mainArea
{
  position: relative;
  min-height:500px;
  background: var(--bg-shade-med);
}

 .loginPane .logo {
     border-right: 1px solid var(--keyline);
}

#loginPane {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display: table;
  min-height: 390px;
  border-radius:5px;
  overflow:visible;
  background: transparent;
}

.loginPane #offline, .loginPane #online {
   display: table-cell;
   box-sizing: border-box;
   height: 390px;
   min-height: 307px;
   width: 36%;
   min-width: 340px;
   background: var(--bg-primary);
   box-shadow: 0 0 7px var(--shadow-lite);
   overflow: hidden;
   border-radius:5px 0 0 5px;
   padding: 0 30px 30px;
   vertical-align: top;
}

.loginPane #online.togldDefOff, .loginPane #offline.togldDefOff {
    display: none;
}

 .loginPane #offline {
  box-shadow: inset 0 0 150px var(--shadow-deep);
}

 .loginPane #online:before {
     position: absolute;
     top: -22px;
     left: 32px;
     display: block;
     width: 44px;
     height: 44px;
     content: "";
     background: url(/admin/ui/3/art/dlmdecor/loginUser.png) no-repeat center / contain;
}

 #loginPane h1 {
     padding-top: 30px;
}

 .loginPane .pic {
   display:table-cell;
   min-width: 400px;
   border-radius:0 5px 5px 0;
   box-shadow: inset 7px 0 7px -7px var(--shadow-lite);
   background: var(--login-ident-fill) url(/sites/ident.jpg) no-repeat center center / cover;
   vertical-align:bottom;
}

#loginPane .formSlider {
  position: relative;
  height: 30em;
  width: 23em;
  box-sizing: border-box;
  overflow: hidden;
}

 #loginPane form {
     height:100%;
     margin-top: 0;
     padding: 0;
}

  .loginPane #loginForm {
     display: block;
     position: relative;
     width: 100%;
}
 .loginPane .welcomeText {
     font-weight: 500;
     color: var(--login-ident-text);
     width: 100%;
     background: var(--login-ident-fill);
     white-space:nowrap;
     font-size: 24px;
     padding: 4px 33px 12px;
     box-sizing: border-box;
     border-bottom-right-radius: 5px;
}

 #passwordRemind {
     display: none;
     width: 100%;
     position: absolute;
     top: 0;
     left: 880px;
}
 #passwordRemind .error, #passwordRemind .message {
     display: none;
}
 #passwordRenew {
     display: none;
     width: 100%;
     position: absolute;
     top: 0;
     left: 880px;
}


 .loginPane .adminIntro {
     display: none;
}

 #loginPane div.formElement,#loginPane div.formButtons {
     float: none;
     clear: none;
     margin: 0 8px;
     padding: 0;
     border: none;
     vertical-align: middle;
}
 #loginPane .error {
     margin-top: 0;
}
 #loginPane .message {
     margin-top: 0;
}
 #loginPane .lockoutWarning,#loginPane .lockoutMessage {
     padding-top: 5px;
}
 #loginPane .lockoutWarning {
     color: var(--aside-success);
}
 #loginPane .lockoutMessage {
     color: var(--aside-error);
}
 #loginPane div.formElement {
     margin: 0;
     width: 100%;
}
 #loginPane .formElement label {
     display: block;
     width: 100%;
     padding-bottom: 5px;
     margin-right: 0;
     text-align: left;
     color: var(--fg-shade-med);
}
 #loginPane .formElement input {
     width: 100%;
     margin-left:0;
     margin-bottom: 11px;
}

 #loginPane button {
     width: 100%;
     margin: 20px 0 0;
     text-align: center;
}
#loginPane .bottomButtons {
    width: 100%;
    bottom: 0;
    position: absolute;
}


 #loginPane hr {
    margin: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--keyline);
}

.loginPane form .messages {
     min-height: 4em;
}
.loginPane form .message, .loginPane form .error {
     margin: 0;
}
 div.formElement {
     clear: left;
     margin-bottom: 4px;
     display: table;
}
 div.formElement > * {
     display: table-cell;
     vertical-align: middle;
}
 div.formElement label {
     width: 100px;
     text-align: right;
     font-weight: 600;
     margin-right: 8px;
}

/* BUTTONS */

 .formButtons {
     margin: 20px 0;
     padding: 0;
     text-align: right;
}
 h1 .formButtons,h2 .formButtons,h3 .formButtons {
     border: 0;
     font-size: 10pt;
     margin: 0 0 0 1em;
     padding: 0;
     float: right;
}
 .formButtons .altOption {
     float: left;
}

/* BUTTONS and FIELDS */

 button, .submitButton, .cancelButton, .actionButton, .formButtons a, input.formButton, input[type=button], input[type=submit], input[type=reset], #jqibuttonOK, #jqi_state0_buttonOK, #jqi_state0_buttonCancel {
     box-sizing: border-box;
     min-width: 86px;
     margin-right: 5px;
     font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.3s, border-color 0.3s;
}

button[type]:disabled, input[type=button]:disabled, input[type=submit]:disabled, input.formButtonDisabled, button:disabled:hover, input[type=button]:disabled:hover, input[type=submit]:disabled:hover, input.formButtonDisabled:hover {
     border: var(--input-disabled-accent);
     background-color: var(--input-disabled-fill);
     color: var(--input-disabled-text) !important;
     cursor: not-allowed !important;
     transition: none;
}

 button, .formButton {
     border-color: var(--btn-basic-accent);
     background-color: var(--btn-basic-fill);
}
 button:hover, .formButton:hover {
     border-color: var(--btn-basic-focus-accent);
     background-color: var(--btn-basic-focus-fill);
}

button.minor { padding: 0 5px; }

/* all buttons - clicked/spinner */
button.active:not([data-toggle]), .submitButton.active, .cancelButton.active, input.formButton.active, input[type=button].active, input[type=submit].active, input[type=reset].active {
     background-image: var(--throbber-invert);
     background-repeat: no-repeat ;
     background-position: center;
     background-size: 16px 16px;
     color: transparent;
     transition: none;
}

 button.toggle {
   min-width: 0;
   background:linear-gradient( 0deg , var(--bg-shade-med) 0%, var(--bg-primary) 100%);
   padding: 2px;
   font-size: 0.8rem;
}
  button.toggle>[class^="ico-"]:only-child, button.toggle>[class*=" ico-"]:only-child {
    margin: 5px;
    font-size: 1rem;
}
 button.toggle.active {
   background:linear-gradient( 180deg , var(--bg-shade-med) 0%, var(--bg-primary) 100%);
   color: unset;
}
/*TODO*/
 .formButtons a {
     display: inline-block;
     margin-right: 5px;
     background-color: var(--bg-shade-max);
     padding: 0 0.6em 0.1em 0.6em;
     font-weight: normal;
}

/* submit */
 button[type=submit], .submitButton, input[type=submit], #jqibuttonOK, #jqi_state0_buttonOK {
     border-color: var(--btn-submit-accent);
     background-color: var(--btn-submit-fill);
     color: var(--btn-label);
}

/* submit - hover */
 button[type=submit]:hover, .submitButton:hover, input[type="submit"]:hover, #jqibuttonOK:hover, #jqi_state0_buttonOK:hover {
     border-color: var(--btn-submit-focus-accent);
     background-color: var(--btn-submit-focus-fill);
}

/* submit - pressed/clicked */
 button[type=submit]:active, .submitButton:active, input[type="submit"]:active, #jqibuttonOK:active, #jqi_state0_buttonOK:active, button[type=submit].active, .submitButton.active, input.formButton.active, input[type="submit"].active, #jqibuttonOK.active, #jqi_state0_buttonOK:active {
     border-color: var(--btn-submit-active-accent);
     background-color: var(--btn-submit-active-fill);
}


/* cancel // TODO value->class ... wut?*/
 .cancelButton, button[type=submit].cancelButton, input.formButton[value="Cancel"], input.formButton[type=button][value="Cancel"], input.formButton[type="submit"][value="Cancel"], input[type="submit"][value="clear"], #jqi_state0_buttonCancel, input.button[value="clear"] {
     border-color: var(--btn-cancel-accent);
     background-color: var(--btn-cancel-fill);
     color: var(--btn-label);
}

/* cancel hover // TODO value->class ... wut?*/
 .cancelButton:hover, input.formButton[value="Cancel"]:hover, input.formButton[type="button"][value="Cancel"]:hover, input.formButton[type="submit"][value="Cancel"]:hover, input[type="submit"][value="clear"]:hover, #jqi_state0_buttonCancel:hover, input.button[value="clear"]:hover {
     border-color: var(--btn-cancel-focus-accent);
     background-color: var(--btn-cancel-focus-fill);
}
/* cancel pressed/clicked // TODO value->class ... wut?*/
 .cancelButton.active, input.formButton[value="Cancel"].active, .cancelButton:active, input.formButton[value="Cancel"]:active, input.formButton[type="button"][value="Cancel"]:active, input.formButton[type="submit"][value="Cancel"]:active, #jqi_state0_buttonCancel:active, input[type="submit"][value="clear"]:active, input.button[value="clear"]:active {
     border-color: var(--btn-cancel-active-accent);
     background-color: var(--btn-cancel-active-fill);
}

/* action */
.actionButton {
     border-color: var(--btn-action-accent);
     background-color: var(--btn-action-fill);
     color: var(--btn-label);
}
/* action - hover */
 .actionButton:hover {
     border-color: var(--btn-action-focus-accent);
     background-color: var(--btn-action-focus-fill);
}

/* action - pressed/clicked */
 .actionButton:active, .actionButton.active {
     border-color: var(--btn-action-active-accent);
     background-color: var(--btn-action-active-fill);
}


 .formButtons a, .formButtons a:hover, .formButtons a:active, .formButtons a:visited {
     text-decoration: none;
     color: var(--fg-primary);
}

 :not(.btnGroup)>.minorBtn, :not(.btnGroup)>.minorBtn.note, button.toggle {
     padding: 0px 5px;
     color: var(--fg-shade-min);
     background-color: var(--bg-primary);
     border: 1px solid var(--btn-basic-accent);
     min-height: auto;
     font-weight: 500;
}
 :not(.btnGroup)>.minorBtn:hover, :not(.btnGroup)>.minorBtn.note:hover {
     border: 1px solid var(--btn-basic-focus-accent);
     background-color: var(--btn-basic-focus-fill);
}
 :not(.btnGroup)>.minorBtn:active, :not(.btnGroup)>.minorBtn.note:active {
     border: solid 1px var(--btn-basic-active-accent);
     background-color: var(--btn-basic-active-fill);
     background-image: var(--btn-throbber);
     background-position: center center;
     background-repeat: no-repeat;
     color: transparent;
     transition: none;
}
 form .button {
     margin-top: 2px;
     margin-bottom: 2px;
}
 .minorBtn.tab:active,.minorBtn.tab.active {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
}
 .minorBtn.note.cmplnceCtrl {
     position: unset;
}
/* Flex compliance panel*/
.areas.cmplnceCtrl { padding:5px; }
.areas.cmplnceCtrl .area { font-weight:bold; }
.areas.cmplnceCtrl .cls  { width:20px; height:20px;margin:-15px -15px 0 0; float: right; }


/* grouped buttons */

 .btnGroup {
     display: -ms-flexbox;
     display: flex;
}
 .btnGroup>*,.btnGroup>button {
     border: 0 solid var(--btn-basic-accent);
     border-width: 1px 1px 1px 0;
     border-radius: 0;
     background-color: var(--btn-basic-fill) !important;
     vertical-align:top;
     min-width: auto;
     transition: background-color 0.3s, border-color 0.3s;
}
 .btnGroup summary, .btnGroup>:not(script), .btnGroup>button {
     display: inline-block;
     white-space: nowrap;
     line-height: 1rem;
     margin: 0;
     padding: 0.1rem 0.5rem;
     color: var(--fg-shade-min);
     font-size: 0.9rem !important;
     font-weight: normal !important;
     text-decoration: none;
}
 .btnGroup>*:hover,.btnGroup>button:hover {
     border-color: var(--btn-basic-accent);
     background-color: var(--btn-basic-fill);
}
 .btnGroup>*.active,.btnGroup>button.active {
     background-color: var(--btn-basic-active-fill) !important;
     color: var(--fg-shade-min) !important;
 }
.btnGroup>*.hasNote,.btnGroup>button.hasNote {
  padding-right: 16px;
}
.btnGroup>*.hasNote:after,.btnGroup>button.hasNote:after {
  content: "\2022";
  position: absolute;
  color: var(--bg-inform-vivid);
  top: 0; right: 2px;
  font-size: 200%;
}
 .btnGroup>*:nth-child( 1 of :not(script ) ) {
     border-radius: 3px 0 0 3px;
     border-width: 1px;
}
 .btnGroup>*:nth-last-child(1 of :not(script) ) {
     border-radius: 0 3px 3px 0;
}
 .btnGroup>:not(script):only-child {
     border-radius: 3px;
}
nav.btnGroup, .popup section.btnGroup, /*remove post Flex migration to section.btnGroup --> */ .popup .info .options {
     float:right;
     margin:0;
     padding:0;
}
section.btnGroup.fieldOptions {
  float: none;
}
section.btnGroup.fieldOptions>button.active {
  background-color: var(--btn-basic-active-fill) !important;
}
.card section.btnGroup {
    justify-content: flex-end;
    margin: 0 4px;
}
 .btnGroup>details, .btnGroup>a, .btnGroup>button {
     position:relative;
     line-height:1.3rem;
     min-height:auto;
     margin: 0;
}
 .btnGroup summary:hover, .btnGroup>a:hover, .btnGroup>button:hover {
     color: var(--fg-primary);
}
 .btnGroup details > p {
     white-space:nowrap;
     position:absolute;
     overflow:hidden;
     z-index:9;
     top: 1.2rem;
     border: 0;
     background: var(--bg-primary);
     padding: 0.3em 0;
     box-shadow: 0 0 7px var(--shadow-lite);
}
.btnGroup details[open] {
    background-color: var(--keyline);
}

 nav.btnGroup details > p {
     right:0;
}
 .btnGroup details a, .btnGroup details button, .btnGroup details button[type] {
     display:block;
     width:100%;
     padding: 0.3rem 1rem;
     background:none;
     text-align: left;
     transition: background-color 0.3s, border-color 0.3s;
}
.btnGroup details button, .btnGroup details button[type] {
    width: 100%;
    text-align: left;
    border-radius: 0;
}
 .btnGroup details a:hover, .btnGroup details button:hover, .btnGroup details button:hover[type],.btnGroup details button.minorBtn:hover {
     background: var(--bg-shade-med);
     transition: background-color 0.3s, border-color 0.3s;
}
 details > summary {
     list-style-type: none;
     cursor:pointer;
}
 details > summary::-webkit-details-marker {
     display: none;
}
 details > summary::before, details[open] > summary::before {
     content: '';
}
 details > summary::after {
     display: inline-block;
     margin-left:1rem;
     position:relative;
     content: '\02C5';
     top:0;
     transition:top 0.2s;
}
 details > p {
     animation: fadeNudge 0.2s ease-in-out;
}
 details[open] > summary::after {
     top:2px;
     transition:top 0.4s;
}
 @keyframes fadeNudge {
     0% {
         opacity:0;
         top:0.8rem;
    }
     100% {
         opacity:1;
         top:1.2rem;
    }
}
 .neighbourNav {
    margin-left: 2em;
}
 .neighbourNav .prev {
    margin-right:0.5em;
}
 .neighbourNav .next {
    margin-left:0.5em;
}
 button>[class^="ico-"],button>[class*=" ico-"]{
     line-height:normal;
}
 dt {
    font-weight:bold;
     padding-bottom:0.3em;
}
 dd {
     padding-bottom:0.6em;
}
 input,select,textarea,button {
     box-sizing: border-box;
}
 tr:has(.omitSingleOption) td, tr:has(.omitNoOptions) td, label:has(.omitSingleOption) {
    display: none;
}
 input,select,textarea,button,.timeFld {
     margin: var(--field-margin-v) 1px;
     border: var(--field-border-width-v) solid var(--field-border);
     border-radius: 4px;
     background: var(--bg-primary);
     padding: var(--field-padding-v) 10px;
     vertical-align: middle;
     color: var(--field-value);
     font-weight: 600;
}

td table.subtable { margin: 9px 1px; } /* Match margin to form elemnts above plus vertical padding */


:not(.filterline,.formInline)>select,:not(.filterline,.formInline)>label>select {
  min-width: 230px;
}
.filterline select, .formInline select {
  min-width: auto;
}
select[multiple]{
  padding: 7px 0;
}
.horizFilter .submitButton {
     vertical-align: bottom;
}
 input[type=text], input[type=password],select,textarea,.timeFld {
     background: var(--field-fill);
     font-weight: 600;
     font-size: 14px;
     transition: .3s ease-in-out;
}
 input[type=text]:hover, input[type=password]:hover,select:hover,textarea:hover {
     border-color: var(--field-border-focus);
}
 input[type=text]:not([readonly]):focus,input[type=number]:not([readonly]):focus, input[type=password]:not([readonly]):focus, textarea:not([readonly]):focus, select:not([readonly]):focus {
     border-color: var(--field-border-active);
     outline: 0;
     color: var(--field-value);
}
 input[type=text][readonly],input[type=number][readonly],textarea[readonly],select[readonly] {
     border-color:transparent;
     background: var(--bg-shade-med);
     cursor:default;
}
  textarea {
     resize: none;
}
 select {
     padding: 7px 10px;
}
 select:focus {
     border: 1px solid var(--field-border-active);
}
/*IE10/11*/
 :-ms-input-placeholder {
     color: var(--field-placeholder) !important;
     font-weight: 400 !important;
}
/*Edge*/
 ::-ms-input-placeholder {
     color: var(--field-placeholder);
     font-weight: 400;
}
 ::placeholder {
     color: var(--field-placeholder);
     font-weight: 400;
}
 input:disabled, textarea:disabled, select:disabled, select:disabled option[selected="selected"],
 .select2-container--default.select2-container--disabled .select2-selection,
 .select2-container--default.select2-container--disabled .select2-selection__rendered
  {
     background: var(--input-disabled-fill) !important;
     color: var(--input-disabled-text) !important;
     transition: .3s ease-in-out;
}

/* CHECKBOX AND RADIO REPLACEMENTS */

 input[type=radio],input[type=checkbox] {
     position:relative;
     border: none;
     box-shadow: none;
     margin: 1px 1em 0 2px;
     width: 0.55em;
     height: 1.1em;
     vertical-align: middle;
}

label input[type=radio],label input[type=checkbox] {
     vertical-align: middle;
     vertical-align: -webkit-baseline-middle;
     margin-right: 4px;
}

/* Firefox refuses to add pseudo elements to contentless tags, so we have no choice other than to use browser default */
@-moz-document url-prefix() {
    input[type=radio],input[type=checkbox] {
        width: auto;
        height: auto;
    }
}
/* IE also refuses to add pseudo elements to contentless tags, so we have no choice other than to use browser default */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    input[type=radio],input[type=checkbox] {
        width: auto;
        height: auto;
    }
}

 input[type=checkbox]::before, input[type=radio]::before {
     content: "";
     position: absolute;
     top: -0.25em;
     left: -2px;
     display: block;
     width: 1.1em;
     height: 100%;
     box-shadow: inset 0 0 0 0 var(--field-fill);
     border: 1px solid var(--check-border);
     background-image: var(--check-fill);
     background-color: var(--field-fill);
     color: var(--btn-submit-fill);
     text-align:right;
     font-weight:normal;
     transition: all 200ms ease;
}

 input[type=checkbox]:disabled::before, input[type=radio]:disabled::before {
     background: var(--input-disabled-fill);
}
 input[type=checkbox]:before {
     border-radius: 4px;
}
 input[type=checkbox]:checked::before, input[type=radio]:checked::before {
     border-color: var(--check-active-border);
     background: var(--check-active-fill);
     color: var(--check-active-value);
}
 input[type=checkbox]:checked::before {
     content:"t";
     font-family: 'dlmdingbatsregular';
}

 input[type=radio]:before {
     border-radius: 100%;
}
 input[type=radio]:checked::before {
     background-image:  radial-gradient(circle at center, var(--check-active-value) 0%, var(--check-active-value) 30%, transparent 30%), var(--check-active-fill);
}

 input[type=checkbox]:disabled::before, input[type=radio]:disabled::before {
     border: 1px solid var(--input-disabled-accent);
     background: var(--input-disabled-fill);
     color: var(--input-disabled-text);
}
 input[type=radio]:disabled:checked::before {
     background-image:  radial-gradient(circle at center, var(--input-disabled-text) 0%, var(--input-disabled-text) 30%, transparent 30%);
}

 input[type=radio] + label:empty:before {
     margin-right: 0;
}
 input[type=radio]:focus:before {
     outline: none;
     border-color: var(--field-border-active);
}

/* bi-state toggle field */
 .bistate {
     padding: 0;
     white-space: nowrap;
     text-transform: lowercase;
}
 .bistate input {
     display: none;
}
 .bistate,.bistate span,.bistate label.toggle,.bistate label.toggle:before {
     display: inline-block;
}
 .bistate label.toggle, .bistate label.toggle:before {
     margin: 0;
     border-radius: 100em;
     padding: 0;
     transition: .15s ease-in-out;
}
 .bistate label.toggle {
     position: relative;
     width: 2.5em;
     height: 1.1em;
     border: 0.15em solid var(--keyline);
     background: var(--keyline);
     color: var(--fg-primary);
}
 .bistate label.toggle:before {
     content: " ";
     position: absolute;
     left: 0;
     width: 1.1em;
     height: 1.1em;
     background: var(--bg-primary);
}
 .bistate input:checked~label.toggle {
     border-color: var(--btn-submit-fill);
     background: var(--btn-submit-fill);
}
 .bistate input:checked~label.toggle:before {
     transform: translate(1.4em, 0); /* tray width-blob width ... use to negate use of left:100% = no layout update*/
}
 .bistate input:disabled ~ label {
     color: var(--input-disabled-text);
}
 .bistate input:checked:disabled ~ label.toggle {
     border-color: var(--input-disabled-fill);
     background: var(--input-disabled-fill);
}
select {
     -ms-appearance:none;
     -webkit-appearance:none;
     appearance: none;
     font-weight: 600;
     color: var(--field-value);
     background-color: var(--bg-primary);
     background-image: url(/admin/ui/3/art/arrrow-down.png), var(--select-fill);
     background-position: right center;
     background-repeat: no-repeat;
     padding-right: 15px;
     max-width: 250px;
     min-width: 2.5em;
}
select::-ms-expand {
    display: none;
}
select:not([multiple]):focus:hover, select:not([multiple]):active {
     background-image: url(/admin/ui/3/art/arrrow-up.png), var(--select-active-fill);
     background-position: right center;
     background-repeat: no-repeat;
}
select[multiple="multiple"] {
     background: transparent;
}
.fll option {
     color: var(--field-value);
     font-weight: 500;
     font-size: 12px;
     padding: 5px 15px;
     border-top: 1px solid var(--keyline);
}
 option[selected="selected"] {
     border-width: 1px 0 0 0;
     background-color: var(--bg-shade-med);
     color: var(--select-active-value);
}
 select::placeholder {
     color: var(--field-placeholder);
}
select[required]::placeholder, .required select::placeholder {
     color: var(--field-required-label);
}
select[required]:invalid,input[required]:invalid,textarea[required]:invalid,select[required]:invalid+.select2-container .select2-selection {
     border-color: var(--field-required-label);
}
 .timeFld {
     display: inline-block;
     background: var(--field-fill);
}
 .timeFld input[type=text]:hover,.timeFld input[type=text]:focus {
     border: none;
}
 .timeFld input {
     border: 0;
     width: 2ch; /*ch=zero width*/
     margin: 0;
     padding: 0;
     text-align: right;
}
 .timeFld input.minutes, .timeFld input:last-of-type {
     text-align: left;
}
 input.pseudo {
     padding: 0 4px;
     cursor: pointer;
}
 td input.pseudo {
     padding: 0 4px;
}
 input.sml,select.sml,td.sml,th.sml,.sml {
     width: 7ex;
}
 input.med,select.med,textarea.med,td.med,th.med,.med {
     width: 10ex;
}
 input.lrg,select.lrg,textarea.lrg,td.lrg,th.lrg,.lrg {
     width: 20ex;
}
input.xlg,select.xlrg,textarea.xlg,td.xlg,th.xlg,.xlg {
     width: 30ex;
}
input.xxlg,select.xxlg,textarea.xxlg,td.xlg,th.xxlg,.xxlg {
     width: 50ex;
}
 input.fll,select.fll,textarea.fll,button.fll,.fll {
     width: 100%;
     box-sizing: border-box;
}
 input[type="number"]:invalid {
   border-color: var(--bg-fail-vivid);
 }
 input[type="number"][data-maxlength="1"]:not([min^="-"]):not([step*="."]) {
     width: 1ch;
     box-sizing: content-box;
}
 input[type="number"][data-maxlength="1"][min^="-"]:not([step*="."]) {
     width: 2ch;
     box-sizing: content-box;
}
 input[type="number"][data-maxlength="2"]:not([step*="."]) {
     width: 2ch;
     box-sizing: content-box;
}
 input[type="number"][data-maxlength="3"]:not([step*="."]) {
     width: 3ch;
     box-sizing: content-box;
}
 input[type="number"][data-maxlength="4"]:not([step*="."]) {
     width: 4ch;
     box-sizing: content-box;
}
 input[type="number"][data-maxlength="5"]:not([step*="."]) {
     width: 5ch;
     box-sizing: content-box;
}
 input[type="number"][data-maxlength="6"]:not([step*="."]) {
     width: 6ch;
     box-sizing: content-box;
}
 input[type="number"][data-maxlength="7"]:not([step*="."]) {
     width: 7ch;
     box-sizing: content-box;
}
 span.sml,span.med,span.lrg,span.xlg {
     display:inline-block;
}
 button.sml {
     min-width: 3ex;
}
 button.med {
     min-width: 6ex;
     padding-left: 10px;
     padding-right: 10px;
}
 button.lrg {
     min-width: 12ex;
     padding-left: 20px;
     padding-right: 20px;
}
 #dateform td, .runOpts td, .adminHolder td {
     vertical-align: middle;
     padding-top: 0;
     padding-bottom: 0;
}
.adminHolder td.reportSubTypes {
     vertical-align: top;
}
.adminHolder td.formButtons {
     padding-top: 8px;
}
 a.formNextBtn,a.formPrevBtn {
     display: inline-block;
     width: 1em;
     padding: 3px 0;
     text-indent: -10em;
     text-decoration: none;
}
/* TODO icon font */
 a.formNextBtn {
     background: url(/admin/ui/3/art/controls/stepnext.gif) 50% 50% no-repeat;
}
/* TODO icon font */
 a.formPrevBtn {
     background: url(/admin/ui/3/art/controls/stepback.gif) 50% 50% no-repeat;
}
 .formElement.day,.formElement.month,.formElement.year {
     width: 2.6em;
     text-align: center;
     display: inline-block;
}
 .formElement.year {
     width: 4.4em;
}
img.calPicker {
    border: 0;
    padding: 0;
    margin: 0;
}
.calPickClear {
    vertical-align: middle;
    color: var(--btn-cancel-fill);
    margin-left: 4px;
    cursor: pointer;
}
 .formElement.ovrld {
    background: var(--bg-modify-saved);
}
 .formElement.modfd {
    background: var(--bg-modify-unsaved);
}
 .formElement.ovrld option,.formElement.modfd option {
    background: var(--bg-primary);
}

.fieldValueOptions { margin-left: 20px; }

.fieldCheckList input { margin-right: 4px; }

.formSubHead   td div { border-top: 1px solid var(--keyline-heavy); position: relative; top: 0.5em; font-weight: bold; color: var(--fg-shade-med); padding-left: 8px; }
.formSubHeadL2 td div { margin-left: 80px; border-color: var(--keyline-med); }

.formNote { margin-left: 4px; }

 iframe+div.formButtons {
     background: var(--bg-shade-med);
     padding: 13px 0 5px 0;
     margin-top: 0;
}
 div.genericFilter {
     display: inline;
}
 div.genericFilter>label,fieldset.dateFilter>label,.radioLabelButton {
     white-space: nowrap;
     margin-right: 1em;
}
 fieldset.dateFilter {
     display: inline-block;
     border: none;
     padding: 0;
     margin: 0;
     overflow: visible;
     white-space: nowrap;
}

/*Generic filter*/

 label.rdo {
     font-weight: normal;
     border: 1px solid var(--field-border);
     border-radius: 3px;
     padding: 2px 0.1em 2px 0;
     margin: 0 1px;
     vertical-align: middle;
     display: inline-block;
     min-width: 3em;
     text-align: center;
}
 label.rdo.slctd {
     background-color: var(--bg-shade-max);
}
 label.rdo input {
     vertical-align: text-bottom;
     display: none;
}
/* end of generic filter */

 input.assetPath {
     border: none;
     padding: 0;
     margin: 0;
     font-size: inherit;
     background: transparent;
}
 h1 {
     font-size: 1.5em;
     margin: 0;
     font-weight: 500;
     color: var(--header);
     padding-bottom: 0.5em;
}
 h2 {
     margin: 1em 8px 0.5em 0;
     padding-bottom: 0.5em;
     color: var(--header);
     font-size: 18px;
     font-weight: 500;
}
 h3 {
     margin: 1em 0 0.1em;
}
 h3, .subHeading {
     color: var(--header);
     font-size: 16px;
     font-weight: 500;
}
 h4 {
     font-size: 12px;
     margin: 0.2em 0 0.1em;
     font-weight: normal;
}
h2.steps>span {
    color: var(--input-disabled-text);
}
 body>h3 {
     margin: 0 0 0.5em 0;
}
 .note {
     color: var(--fg-primary);
}
 td.note {
     padding: 2px;
}
 .unapproved {
     color: var(--aside-error);
}
 :not(td).message, :not(td).warning, :not(td).msgBox, :not(td).error {
     position: relative;
     clear: both;
     opacity: 1;
     box-sizing: border-box;
     margin: 0 0 20px 0;
     border-radius: 4px;
     padding: 5px 10px 5px 2.2rem;
     text-align: left;
     font-size: 1rem;
     font-weight: normal;
     transition: height 0.1s, opacity 0.2s;
 }

 .error:empty, .warning:empty, .message:empty {
     height: 0;
     margin: 0 !important;
     opacity: 0;
     transition: height 0.1s, opacity 0.2s;
}
 .warning [class^="ico-"]:empty, .warning [class*=" ico-"]:empty,
 .warning [class^="ico-"]:empty, .warning [class*=" ico-"]:empty,
 .message [class^="ico-"]:empty, .message [class*=" ico-"]:empty {
     display:none;
}

 td.message:only-child, td.warning:only-child, td.error:only-child {
     position:relative;
     padding-left:2.2rem; /* reinforces the regular msg/warn/err to stop tr.listLine0>*... selector resetting */
     background-color: inherit;
     color: var(--noti-success);
 }
 .message:not(td), td.message:only-child::before, aside.message::before {
     background-color: var(--noti-success);
     color: var(--noti-label);
 }
 .warning:not(td), .msgBox, td.msgBox:only-child::before, aside.warning::before, aside.msgBox::before  {
     background-color: var(--noti-warn);
     color: var(--noti-label);
 }
 .error:not(td), td.error::before, aside.error::before {
     background-color: var(--noti-error);
     color: var(--noti-label);
 }
 .warning::before, .msgBox::before  {
     background-color: var(--fg-invert);
     color: var(--noti-warn);
 }
 td.message:only-child,.message::before {
     background-color: var(--bg-primary);
     color: var(--noti-success);
 }
 td.warning:only-child  {
     color: var(--aside-warn);
 }
 td.error:only-child,.error::before {
     background-color: var(--bg-primary);
     color: var(--aside-error);
 }
 td.message:not(:only-child),td.warning:not(:only-child),td.error:not(:only-child){
     display:table-cell;
     border-radius: 0;
 }
 td aside:only-child {
     margin:0;
 }
 span.message, span.warning, span.error {
    padding: 0 0.4rem 0 1.8em;
}
 span.message::before, span.warning::before, span.error::before {
    font-size: 0.7rem;
    width: 0.7rlh;
    height: 0.7rlh;
    top: 0.37rlh;
}
 aside.message, aside.warning, aside.error {
     background-color: transparent;
     padding-left:1.8rem;
 }
 aside.message::before, aside.warning::before, aside.error::before {
     left:0;
 }
 aside.message,td.message:not(:only-child),aside.msgBox,td.msgBox:not(:only-child){
     color: var(--aside-success);
 }
 aside.warning,td.warning:not(:only-child){
     color: var(--aside-warn);
 }
 aside.error,td.error:not(:only-child){
     color:var(--aside-error);
 }
 aside.message::before, aside.msgBox::before{
     background: var(--aside-success);
     color: var(--noti-label);
 }
 aside.warning::before,  td.warning:only-child::before {
     background: var(--aside-warn);
     color: var(--noti-label);
 }
 aside.error::before{
     background: var(--aside-error);
     color: var(--noti-label);
 }
 td.message:not(:only-child)::before,td.warning:not(:only-child)::before,td.error:not(:only-child)::before{
     content:none;
 }

 .error .close, .message .close, .warning .close {
     float: right;
     text-decoration: none;
}
 .message [class*=" ico-"], .message .close, .warning [class*=" ico-"], .warning .close, .error [class*=" ico-"], .error .close {
     opacity: 0.5
}
 .message::before,.warning::before,.msgBox::before,.error::before {
     content: "";
     position: absolute;
     left:7px;
     top: 0.7rem;
     display: inline-block;
     box-sizing: border-box;
     margin-left: 0;
     margin-top: -4px;
     border-radius: 50%;
     height: 1.3rem;
     width: 1.3rem;
     text-align: center;
     text-indent:0;
     opacity: 0.8;
     line-height: 1.3;
     font-family: 'dlmdingbatsregular';
     font-size: 1rem;
     font-weight: bold;
}
 td.message::before,td.warning::before,td.msgBox::before,td.error::before {
    top: 0.9ex;
}
td.message::after {
    content: '';
    display: block;
    width: 1px;
    min-height: 1.5rem;
    float: left;
}
 .message::before {
     content: "i";
}
 .warning::before,.msgBox::before {
     content: "g";
}
 .error::before {
     content: "x";
}

 .messages .message br {
     display: none;
}

 .menuBody {
     position: relative;
}
 #menuContainer {
     padding: 0 5px 0 20px;
     top: 0;
     left: 0;
     margin-left: 0;
     width: 100%;
     box-sizing: border-box;
     opacity: 0;
     transition: width var(--duration-layout);
}
 #menuContainer>li>a {
    text-transform: uppercase;
}
 .menuBody ul {
     position: relative;
     list-style: none;
     padding: 0;
     margin: 0;
     width: 100%;
}
 #menuContainer ul li {
     padding-left: 10px;
}

#menuContainer ul ul::after, #menuContainer ul ul::before {
 box-shadow: 0 0 1em var(--shadow-hint);
 content: "";
 position: absolute;
 margin: auto;
 display: block;
 width: 70%;
 height: 1em;
 left: 0;
 right: 0;
}
#menuContainer ul ul::before { top: -1em; }
#menuContainer ul ul::after { bottom: -1em; }
 .menuBody li {
     line-height: 20px;
     padding: 0;
     margin: 0;
     vertical-align: middle;
}
 .menuBody>ul>li {
     padding-right: 5px;
}
 .menuBody a {
     display: block;
     overflow: hidden;
     min-height: 20px;
     border-bottom: 1px solid var(--bg-shade-med);
     padding: 11px 2px 8px;
     color: var(--fg-shade-med);
     font-size: 13px;
     text-decoration: none;
}
 .menuBody a:hover {
     color: var(--select-active-value);
     text-decoration: underline;
}
 .menuBody a.hasSub {
   position: relative;
 }
 .menuBody a.hasSub:after {
   content:'n';
   position:absolute;
   width: 9px;
   height:9px;
   top: 16px;
   right: 0;
   font-family: 'dlmdingbatsregular';
   font-size:9px;
   line-height:9px;
   text-transform: none;
   color: var(--fg-shade-max);
   transform: rotateZ(90deg);
   transition: transform 0.25s ease-out;
}
 .menuBody li ul {
     max-height: 0;
     transition: max-height 0.25s ease-out;
     overflow: hidden;
}
 .menuBody li.hasSubOpen>a.hasSub:after {
   transform: rotateZ(90deg) rotateY(180deg);
   transition: transform 0.5s ease-out;
}
 .menuBody li.hasSubOpen>ul {
     max-height: 2000px;
     transition: max-height 0.5s ease-in;
}
 .adminPane {
     padding: 0;
}
 body.adminPane {
     padding: 0;
     margin: 0;
}
 .adminPane form {
     width: auto;
     clear: right;
     padding: 8px 0 0;
}
 .adminHead {
     padding: 8px;
}
.adminHead:empty {
     display:none;
}
 .adminHead form {
     clear: none;
     padding-top: 0;
}
 .adminHead form td {
     vertical-align: middle;
}
 .adminPane#departmentSelect form {
     padding: 8px;
}
 .adminHead:after {
     content:"";
     display:table;
     clear:both
}
 .adminIntro {
     font-size: 15pt;
     font-size: 15px;
     margin: 0;
     font-weight: 600;
     color: var(--fg-shade-min);
     padding-bottom: 0.5em;
}
 .adminIntro .logo {
     float: right;
}
 .adminMain {
     overflow: auto;
     padding: 0 8px;
}
 .adminMain>p,#adminScroll>p,#adminScroll>._poppable>p,.adminMain>.message,.adminMain>.warning,.adminMain>.msgBox,.adminMain>.error {
     margin-right: 8px;
     margin-bottom: 0.8em;
     margin-left: 8px;
}
 .adminMain>p:first-child,#adminScroll>p:first-child,.adminMain>.message:first-child,.adminMain>.warning:first-child,.adminMain>.msgBox:first-child,.adminMain>.error:first-child {
     margin-top: 0.8em;
}
 .adminDescription {
     margin: 8px;
}
 .adminDescription dt {
     float: left;
     width: 160px;
     font-weight: bold;
}
 .adminDescription dd {
     margin-left: 172px;
}

.adminFoot>h2,.adminFoot>p,.adminFoot>form {
     margin: 0 8px
}
 .adminPane .tools {
     float: right;
     min-width: fit-content;
}
 .tools a img {
    height:16px;
     width:16px
}
 .tools img,.tools span {
     margin: 0 1px;
}
 .tools a,.tools .ctrl {
     display: block;
     margin-top: 4px;
     text-decoration: none;
     white-space: nowrap;
}
 .tools a:hover {
     text-decoration: underline;
}
 .tools .tool * {
     vertical-align: middle;
}
 .tools .tool img+span {
     margin-left: 4px;
}
 .tools .opts {
     position: absolute;
     z-index: 99;
     display: none;
     padding: 5px 10px;
     min-width: 86px;
}
 .tools .ctrl {
     margin: 2px 1px;
     vertical-align: middle;
     padding: 2px 5px 2px 0;
     border: 1px solid var(--keyline);
     border-radius: 4px;
     font-size: 12px;
     padding-left: 10px;
     cursor: pointer;
     font-weight: 600;
     color: var(--fg-shade-min);
     background-color: var(--bg-primary);
     background-image: url(/admin/ui/3/art/arrrow-down.png), var(--select-fill);
     background-position: right center;
     background-repeat: no-repeat;
     -webkit-appearance: none;
     appearance: none;
     padding-right: 25px;
     margin-top: 10px;
}

.popup #adminScrollPop,
.adminPane #adminScroll {
    overflow: auto;
    clear: both;
}
.adminMain,#adminScroll {
    position: relative;
}

.flexScroll {
  display: flex;
  flex-direction: column;
    justify-content: space-between;
  max-height:100%;
    height: 100%;
}
.flexScroll>#filterFormHolder {
	flex: 0 1 auto;
}
.flexScroll>.content {
    flex: 1 1 auto;
  overflow-y:auto;
}
.flexScroll>.formButtons {
	flex: 0 1 auto;
}

 .scrlV {
     overflow-y: auto;
}
 .scrlH {
     overflow-x: auto;
}
 .textPageImages {
     width: 200px;
     float: right;
}
 .textPageEditor {
     width: 550px;
}
 .textPageEditor #adminScroll,.textPageEditor form {
     clear: none;
}
 .attributeImages {
     width: 200px;
     float: right;
}
 .attributeEdit {
     width: 450px;
}
 .adminPane .attributeEdit form,.adminPane .attributeEdit .adminHolder {
     clear: none;
}
 #progress h2,#progress+h2,.textPageImages h2,.textPageEditor h2 {
     margin-top: 0;
}
 #imageScroll {
     margin-top: 8px;
     overflow: auto;
     text-align: center;
}
 .imageThumb {
     width: 86px;
     height: 86px;
     margin: 3px;
     background: var(--bg-shade-med) no-repeat 50% 50%;
}
 .imageDel {
     height: 16px;
     text-align: right;
}
 .imageAdd {
     height: 32px;
     text-align: center;
     margin-top: 38px;
     width: 100%;
}
 .imageAdd a+a {
     margin-left: 22px;
}
 .imageList {
     margin: 0 auto 0 auto;
}
 .imageThumb div {
     display: none;
}
 .imageList .controls div {
     display: block;
}
 .adminHolder {
     clear: right;
     margin-top: 0;
     width: 100%;
     table-layout: auto !important;
     border-collapse: separate;
     border-spacing: 0;
}
.pageNumbers {
    border: 1px solid var(--keyline);
    border-radius: 3px;
    display: inline-block;
    padding: 0 0.2em;
}
.pageNumbers span {
    display: none;
}
.pageNumbers > :not(:last-child) {
    border-right: 1px solid var(--keyline);
}
.pageNumbers a {
    padding: 0 0.2em;
    color: var(--fg-shade-med);
    text-decoration: none;
    font-weight: normal;
}
 .pageNumbers a.selected {
     color: var(--fg-primary);
     text-decoration: none;
}
 .adminMain>.adminHolder,form .adminHolder:first-of-type,#adminScroll>.adminHolder {
     margin-top: 0;
     border-top: none;
}
 h1+#adminScroll,h1+form {
     margin-top: 12px;
}
 .adminHolder label:has(:not(.bistate)) {
     padding-right: 10px;
}
 h2+.adminHolder,#adminScroll>.adminHolder,form>.adminHolder {
     margin-top: 0;
}
 .adminHolder td.control,.adminHolder th.control {
     width: 1px;
     padding: 0 1px;
}
 .adminHolder td.multiControl,.adminHolder tg.multiControl {
     width: 3em;
}
 .adminHolder td.ordering,.adminHolder th.ordering {
     width: 64px;
     white-space: nowrap;
}
 .adminHolder td.time,.adminHolder th.time {
     min-width: 4ex;
     max-width: 5ex;
     white-space: nowrap;
}
 .adminHolder td.date,.adminHolder th.date {
     width: 120px;
     white-space: nowrap;
}
 .adminHolder td.filler,.adminHolder th.filler {
     width: 95%;
}
 .adminHolder td.filler50,.adminHolder th.filler50 {
     width: 50%;
}
 .adminHolder td.headPad,.adminHolder td.tailPad {
     height: 8px;
}
 .adminHolder .shortPad {
     height: 4px;
}
 .adminHolder iframe {
     border: 1px solid var(--keyline);
}
 .adminHolder td.warn {
     padding: 0 2px 0 2px;
}
.adminHolder td.nowrap,
.adminHolder div.nowrap,
.adminHolder span.nowrap {
     white-space: nowrap;
}
 .adminHolder tr.level1 td:first-child {
     padding-left: 4px;
}
 .adminHolder tr.level2 td:first-child {
     padding-left: 8px;
}
 .adminHolder tr.level3 td:first-child {
     padding-left: 12px;
}
 .adminHolder tr.level4 td:first-child {
     padding-left: 16px;
}
 #adminScroll>.clear+.adminHolder,#adminScroll>.adminHolder+.adminHolder {
     margin-top: 24px;
}
 .compactHolder,.compactHolder td.formLabel {
     width: auto;
}
 .compactHolder td.btn {
     padding: 0 10px;
}
 .compactHolder td {
     padding: 2px 4px 1px 4px;
}
 .floatingHolder {
     float: left;
}
 .floatingHolder+.clear {
     clear: left;
}
 #adminScroll .floatingHolder+.floatingHolder {
     margin-top: 0;
     margin-left: 24px;
}
 .control a {
     text-decoration: none;
}
 .control a img,.control a span {
     margin: 0;
}
 .control a img {
     min-width: 16px;
     min-height: 16px;
}
 .listHeadGroup td,.listHeadGroup th {
     font-size: 16px;
     padding: 1em 0 0.5em 5px;
     font-weight: normal;
     color: var(--header);
}
 .listHeadCont {
     background: var(--bg-shade-med);
}
 .listHead>*,.listHeadCont>*,.listSubHead>*,.listLine>*,.listLineDeleted>*,.listLine0>*,.listLine1>*,.listLineDeleted0>*,.listLineDeleted1>*,.listFoot>*,.summary>*,.totals>*,.ag-root,.ag-header-cell,.ag-cell {
     border-width: 0;
 }

 tr.listHead>*,tr.listHeadCont>*,tr.listSubHead>*,tr.listLine>*,tr.listLineDeleted>*,tr.listLine0>*,tr.listLine1>*,tr.listLineDeleted0>*,tr.listLineDeleted1>*,tr.listFoot>*,tr.summary>*,tr.totals>*,
 div.listHead,div.listLine,div.listLine0,div.listLine1,div.listLineDeleted,div.listLineDeleted0,div.listLineDeleted1,.ag-root,.ag-header-cell {
     border-color: var(--keyline);
     border-style: solid;
 }
 tr.listHead>*,tr.listHeadCont>*,tr.listSubHead>*,tr.listLine>*,tr.listLineDeleted>*,tr.listLine0>*,tr.listLine1>*,tr.listLineDeleted0>*,tr.listLineDeleted1>*,tr.listFoot>*,tr.summary>*,tr.totals>*,
 div.listHead,div.listLine,div.listLine0,div.listLine1,div.listLineDeleted,div.listLineDeleted0,div.listLineDeleted1,.ag-header-cell,.ag-cell,.ag-full-width-row .ag-cell-wrapper.ag-row-group {
     padding: 0 8px;
     vertical-align: top;
 }
 tr.listHead,tr.listHeadCont,tr.listSubHead,tr.listLine,tr.listLineDeleted,tr.listLine0,tr.listLine1,tr.listLineDeleted0,tr.listLineDeleted1,tr.listFoot,tr.summary,tr.totals, .ag-root {
     border-radius: 3px;
 }

 .listHead>*,.listHeadCont>*,.ag-header-cell {
     text-align: left;
     color: var(--fg-shade-med);
     font-weight: 600;
 }
 .listHead>*,.listHeadCont>* {
     border-width: 1px 0;
     height: 19px;
     line-height: 19px;
}
tr.listSubHead>* {
    border-top-width: 1px;
    border-bottom-width: 1px;
    color: var(--fg-shade-med);
}
/*** AG Grid styling ***/
 .ag-root {
     border-width: 1px;
 }
.ag-root-wrapper  [class^=ag-], .ag-root-wrapper [class^=ag-]:after, .ag-root-wrapper [class^=ag-]:before, .ag-root-wrapper [class^=ag-]:focus {
    box-sizing: border-box;
    outline: none;
}
 .ag-header-cell-resize {
    height: 60%;
    top: 20%;
}
 .ag-header-cell-resize:after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    top: 20%;
    left: calc(50% - 1px);
    width: 0;
    height: 60%;
    border-right: 1px solid var(--keyline);
 }

 .ag-header-cell {
     border-bottom-width: 1px;
 }

 .listHead>:first-child {
     border-top-left-radius: 3px;
}
 .listHead>:last-child {
     border-top-right-radius: 3px;
}
 .listLine0:last-child, .listLine1:last-child {
     border-right-width:1px;
}
 .listHead a,.listSubHead a {
     color: var(--link-text);
     text-decoration: none;
}
 .listHeadCont a {
     text-decoration: none;
}
 .listFoot td {
     border-top-width: 1px;
     font-weight: bold;
     background: none;
}
 .listGroupSeparator td {
     padding: 4px 0;
}

.listLine:nth-child(odd) td,.listLine0 td,div.listLine0,.draggable .listLine0:hover td, .ag-row-even {
    background-color: var(--row-odd);
}
.listLine:nth-child(even) td,.listLine1 td, div.listLine1,.draggable .listLine1:hover td, .ag-row-odd {
    background-color: var(--row-even);
}
.listLineDeleted:nth-child(odd) td,.listLineDeleted0 td,.draggable .listLineDeleted0:hover td {
     background-color: var(--row-deleted-odd);
}
 .listLineDeleted:nth-child(even) td,.listLineDeleted1 td,.draggable .listLineDeleted1:hover td {
     background-color: var(--row-deleted-even);
}
.listLineException:nth-child(odd) td,.listLineException0 td,.draggable .listLineException0:hover td {
     background-color: var(--bg-warn);
}
.listLineException:nth-child(even) td,.listLineException1 td,.draggable .listLineException1:hover td {
     background-color: var(--bg-warn-tint);
}
.listLineError:nth-child(odd) td,.listLineError0 td,.draggable .listLineError0:hover td {
  color: var(--fg-invert);
  background-color: var(--bg-fail);
}
.listLineError:nth-child(even) td,.listLineError1 td,.draggable .listLineError1:hover td {
  background-color: var(--bg-fail-tint);
}
 .listLine>:first-child,.listLine0>:first-child,.listLine1>:first-child,.listHead>:first-child,.listSubHead>:first-child,tr.summary>:first-child,tr.totals>:first-child {
     border-left-width: 1px;
}
 .listLine>:last-child,.listLine0>:last-child,.listLine1>:last-child,.listHead>:last-child,.listSubHead>:last-child,tr.summary>:last-child,tr.totals>:last-child {
     border-right-width: 1px;
}
 .listLine:last-of-type>:first-child,.listLine0:last-of-type>:first-child,.listLine1:last-of-type>:first-child {
     border-bottom-left-radius: 3px;
}
 .listLine:last-of-type>:last-child,.listLine0:last-of-type>:last-child,.listLine1:last-of-type>:last-child {
     border-bottom-right-radius: 3px;
}
tr[class^="listLine"]:last-child td, tr[class*=" listLine"]:last-child td {
     border-bottom-width: 1px;
}
#adminScroll tr[class^="listLine"]:last-child td {
     border-bottom-width: 1px;
}
 tr.summary>* {
     border-top-width: 1px;
}
 tr.summary {
     color: var(--fg-shade-min);
     font-weight: bold;
}
 tr.summary .name {
     font-weight: normal;
}
 .listLine.highlight td,.listLine0.highlight td,.listLine1.highlight td {
     background-color: var(--row-highlight);
     color: var(--row-highlight-text);
}
 tr.totals>* {
     border-top-width: 2px;
     color: var(--fg-shade-min)
}
 .dragHandle {
     cursor: move !important;
}
 .draggable tr:hover td {
     cursor: move !important;
}
 tr.dragging td {
     background-color: var(--row-drag) !important;
     border-bottom: 2px solid var(--fg-primary );
}
 tr.dropped td {
     background-color:var(--row-drop) !important;
}
 td.number,th.number,tr.listHead .number,div.number {
     text-align: right;
}
 td.shortage {
     background-color: var(--fg-shade-med);
     color: var(--fg-invert);
     font-weight: bold;
}
 tr.numbers td,tr.numbers input,tbody.numbers td {
     text-align: right;
}
 tr.numbers td.text,tbody.numbers td.text,tbody.numbers td.text input {
     text-align: left;
}
 tbody.numbers td input,tr.numbers td input {
     border: 0;
     border-bottom: 1px;
     background: none;
     padding: 0;
     margin: 0;
     vertical-align: middle;
     text-align: right;
}
 tbody.numbers td input {
     width: 100%;
}
 th.edit,td.edit {
     background: var(--bg-shade-med);
}
 td.newColStartRight,th.newColStartRight,td.newColStartLeft,th.newColStartLeft {
     width: 2em;
}
.listLine0:hover td,.listLine1:hover td {
     color: var(--row-focus-text);
     background-color: var(--row-focus-fill);
     cursor: pointer;
}
.listLine0:hover td a,.listLine1:hover td a {
     color: var(--row-focus-text);
}
.listLine:hover td {
  color: var(--row-focus-text);
  background-color: var(--row-focus-fill);
}
.listLine:hover a {
  color: var(--row-focus-text);
}
.clickable td, td.clickable, [class^="ico-"].clickable {
    cursor: pointer;
}
.clickable.editing td {
    background: var(--bg-hilite-vivid);
}
.clickable.edited td {
    background: var(--bg-pass-tint);
    transition: 0.25s ease-in;
}
.unvisible.listLine,.unvisible.listLine td,.listLine td.unvisible,.unvisible.listLine0,.unvisible.listLine0 td,.listLine0 td.unvisible {
     border-radius: 0;
}
 .unvisible.listLine, .unvisible.listLine1,.unvisible.listLine1 td,.listLine1 td.unvisible {
     background-color: var(--row-unvisible);
}
 .unvisible.listLine:hover td, .unvisible.listLine0:hover td, .unvisible.listLine1:hover td {
     color: var(--row-unvisible-text);
}
 .unavail.listLine,.unavail.listLine *, .unavail.listLine0,.unavail.listLine0 *,.unavail.listLine1,.unavail.listLine1 * {
     color: var(--row-unavail-text);
     font-style: italic;
     text-shadow: 1px 1px 0 var(--row-unavail-text-accent);
     cursor: default;
}
 .listLine td.archived, .listLine0 td.archived,.listLine1 td.archived {
     background: var(--row-archive-fill);
     color: var(--row-archive-text);
}
 .underModeration td {
     font-weight: bold;
}
 .helpable:hover {
     background: var(--bg-hilite-tint);
}
 .jqifade {
     background-color: var(--shadow-full);
}
 div.jqi {
     position: absolute;
}
 div.jqi .jqicontainer {
     background-color: var(--bg-primary);
     border: 1px solid var(--keyline);
     transition: .3s ease-in-out;
     height: auto;
     border-radius: 4px;
     box-shadow: 0px 0px 3px 3px var(--shadow-hint);
}
 div.jqi .jqimessage {
     background-color: var(--bg-primary);
     padding: 10px 10px 0 10px;
     margin: 0;
     color: var(--fg-primary);
     width: 400px;
}
 div.jqi .jqibuttons {
     background-color: var(--bg-primary);
     padding: 15px 10px 10px 10px;
     text-align: right;
     margin-top: 15px;
     border-top: 1px solid var(--keyline);
}
 div.jqi button {
     color: var(--fg-invert);
}
 div.jqi button * {
     display: none;
}
 div.jqi .jqimessage .helpScroll {
     max-height: 600px;
     overflow: auto;
}
 div.jqi .jqimessage .helpScroll a:active {
     outline: none;
}
 div.jqi .jqimessage #dlm_promptValue {
     width: 390px;
}
 div.jqi .jqimessage .popupIcon {
     display: none;
}
 #jqibox .jqiclose {
     display: none;
}
div.jqi .jqimessage .popupText div {
  overflow: auto;
  max-height: 30lh;
}
form fieldset {
     margin: 5px 0;
     border: 1px solid var(--keyline);
     overflow: hidden;
}
 legend {
     font-size: 12px;
     font-weight: bold;
     color: var(--header);
}
 table.full {
     width: 100%;
}
 table.editList {
     width: 98%;
}
 table.editList td {
     font-size: 12px;
}
 td.ordCtrl,td.edtCtrl {
     width: 44px;
}
 .moveUp img,.moveDown img {
     width: 16px;
     height: 16px;
     border: 0;
}
 .moveDown img {
     background: url('/admin/ui/3/art/buttons/down.gif');
}
 .moveUp img {
     background: url('/admin/ui/3/art/buttons/up.gif');
}
 .newOpt td {
     background: var(--bg-shade-max);
}
 .editRow td {
     background: var(--bg-shade-max);
}
 .listPanel {
     position: relative;
     overflow: hidden;
}
 .listPanel .items {
     overflow: auto;
     position: relative;
}
 .listPanel .item {
     position: relative;
     clear: left;
     margin: 2px 0;
     padding: 0;
     height: 18px;
     background: var(--bg-primary) url('/art/itembg.png') top left repeat-x;
}
 .listPanel .item * {
     direction: ltr;
}
 .listPanel .item img {
     border: 0;
}
 .listPanel .item div {
     margin: 0 3px;
     line-height: 17px;
     height: 17px;
     overflow: hidden;
}
 .listPanel .itemRemove {
     display: block;
     position: absolute;
     right: 0;
}
 .listPanel .listPanel *,*:focus,.listPanel *:active,.listPanel a:focus,.listPanel a:active {
     outline: 0;
}

/* extware user search */
 #results {
     float: left;
     margin: 0 4px;
     width: 300px;
}
 #results fieldset {
     background: var(--bg-primary);
     border-top: 1px solid var(--keyline);
     border-bottom: 1px solid var(--keyline);
     padding: 4px;
     margin-bottom: 10px;
}
 #search,#selected {
     height: 150px;
     overflow: auto;
}
 #search a {
     margin: 0 0 0 4px;
}
 #search .searching {
     padding-top: 3px;
}
 #search .searching * {
     vertical-align: middle;
}
 #search .searching img {
     margin-top: -3px;
}
 #lookupForm {
     margin: 0 2px;
     width: 400px;
     float: left;
}
 #lookupForm .searchForm {
     height: 320px;
     overflow: auto;
}
 #userSelector {
     width: 100%;
}
 #userSelector .clear {
     clear: left;
}
 .assetListItem {
     float: left;
     padding: 0 10px 10px;
     width: 140px;
     height: 180px;
}
 .assetListItem .img {
     background: var(--bg-primary);
     text-align: center;
     height: 100px;
     overflow: hidden;
}
 .assetNote,.assetNote td,.assetNote th {
     font-size: 9px;
     vertical-align: top;
}
 .assetNote {
     height: 80px;
     overflow: auto;
}
 .assetNote th {
     padding-right: 5px;
}
fieldset .scroll,div.scroll {
     max-height: 8em;
     overflow: auto;
}
._popContent .popScroll {
     height: 8em;
     overflow: auto;
}
 .popup,#holiday_hover,#holiday_popup,#popup {
     position: absolute;
     max-width: 90%;
     z-index: 101;
     display: block;
     border: 1px solid var(--keyline);
     border-radius: 5px;
     background: #ffffff;
     background: var(--bg-primary);
     padding: 10px 0;
     box-shadow: 0px 3px 9px 3px var(--shadow-lite);
     margin-top: 5px;
     text-align: left;
}
 #holiday_hover,#holiday_popup,#popup {
     padding: 3px;
}
 .popup .hdr {
     padding-bottom: 0.5em;
     padding-left: 10px;
     padding-right: 10px;
}
 .popup .hdr>* {
    margin:0;
    padding-bottom:0;
}
 .popup .bdy {
     overflow:auto;
     padding-left: 10px;
     padding-right: 10px;
}
.holidayPopup #popup_lockPeriods {
    padding: 7px;
    margin: 2px;
    border: 1px solid var(--field-border-focus);
    border-radius: 4px;
    cursor: pointer;
}
.holidayPopup #popup_lockPeriods ico {
    float: right;
}
.popup .bdy p {
  margin-top: 0;
}
.popup .bdy p.formIntro {
  font-weight: bold;
}
.popup .bdy p.formWarning {
  font-weight: bold;
  color: var(--noti-error);
}
 .popup .bdy form {
     padding-left: 0;
     padding-right: 0;
}
 .popup .bdy form .message:after {
     content: none;
}
 .popup div.formElement {
     clear: left;
     margin-bottom: 4px;
     display: table;
}
 .popup div.formElement label {
     width: auto;
     padding-right: 8px;
}
 .overlay .bdy {
     overflow: auto;
}
.popup .formButtons {
     margin-bottom: 0;
     padding: 10px 10px 0 10px;
}

.popup .formButtons label { display: block; float: left; }
.popup .formButtons label span { text-align: left; }

.panel {
     position: fixed;
}
 .optionStack {
     text-align: center;
}
 .optionStack button {
     margin: 0.2em 0;
}
 .optionStack .section {
     margin-top: 1em;
}
 .optionStack .warn button {
     background: var(--btn-submit-fill);
}
 .popup:not(.ui-draggable-dragging), .overlay:not(.ui-draggable-dragging) {
   transition: left 0.2s, top 0.2s, translate 0.2s;
 }

.popup section+section { margin-top: 12px; }

.popup #close,.overlay #close {
    text-align: right;
    padding: 5px;
}
.popup #close a,.overlay #close a {
    color: var(--fg-shade-max);
    font-weight: bold;
    text-decoration: none;
}
 .popup #close a:hover,.overlay #close a:hover {
     color: var(--fg-shade-med);
}
 .popup .close a,.popup .minimize a,.overlay .close a,.overlay .minimize a {
     position: absolute;
     right: 10px;
     top: 10px;
     padding: 3px;
     font-size: 10px;
}
 .popup .close a,.popup .minimize a,.overlay .close a,.overlay .minimize a,.ico-3d {
     position: absolute;
     right: 5px;
     top: 5px;
     z-index: 100;
     box-sizing: border-box;
     width: 19px;
     height: 19px;
     border: none;
     background: transparent;
     color: var(--fg-primary);
     font-weight: 900;
     text-align: center;
     text-decoration:none;
     cursor: pointer;
}
 .ico-3d:after {
     padding: 1px;
     line-height: 100%;
     width: 1em;
     left: -.03em;
}
 .popup .minimize a,.overlay .minimize a {
     right: 10px;
}
 .popup .optList {
     height: 20em;
     overflow: auto;
}
 .optFilter {
     padding-bottom: 4px;
}
 .optList div,.optList td {
     cursor: pointer;
}
 .optList .unavailable,.optList .unavailable td {
     cursor: default;
}
 .overlay {
     position: absolute;
     z-index: 100;
     border: 1px solid var(--keyline);
     background: var(  --bg-primary);
     padding: 7px;
     margin: 20px;
     box-shadow: 0 0 8px var(--shadow-deep);
     border-radius: 5px;
}
 .popupInner {
     overflow: auto;
     text-align: left;
}
 .subpopup {
     border: 4px solid var(--keyline);
     padding: 0 10px 10px;
}
 .subpopup #close {
     text-align: right;
     padding: 5px;
}
 .subpopup #close a {
     color: var(--fg-shade-max);
     font-weight: bold;
     text-decoration: none;
}
 .subpopup #close a:hover {
     color: var(--fg-shade-med);
}
 .subpopupInner {
     overflow: auto;
     text-align: left;
}
 .popupmodal {
     width: 100%;
     height: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 99;
     position: absolute;
     background: var(--shadow-full);
     opacity: 0.5;
}
 #overlays .popupmodal {
     height: 100vh;
}
 .popup .resultsHolder,.subpopup .resultsHolder {
     max-height: 10em;
     overflow-y: auto;
}
.popup .avails.high .resultsHolder {
     max-height: 20em;
}
 #redirectLink {
     border-top: 1px solid var(--keyline);
     padding-top: 10px;
     margin-top: 10px;
}
 .pageAssets {
     height: 120px;
     overflow: auto;
}
 .pageAttributes {
     height: 120px;
     overflow: auto;
}
 .pageItems {
     height: 120px;
     overflow: auto;
     clear: both;
}
 .pageItems table {
     width: 95%;
}
 .pagination {
     padding: 10px;
}
 .pagination a {
     padding: 2px;
}
 .pagination a.current {
     color: var(--fg-primary);
     text-decoration: none;
}
 .popCalendar {
     position: absolute;
     width: 210px;
     height: auto;
     box-shadow: 0px 0px 3px 3px var(--shadow-hint);
     border: 1px solid var(--keyline);
     border-radius: 4px;
     background-color: var(--bg-primary);
     padding-bottom: 10px;
     transition: .3s ease-in-out;
}
 .popCalendar > div:first-of-type {
     padding: 10px;
     border-bottom: 1px solid var(--keyline);
}
 .popCalendar .monthPrevious {
     float: left;
     padding: 3px 3px 0 0px;
     font-weight: normal;
}
 .popCalendar .yearPrevious {
     float: left;
     padding: 3px 0 0;
     font-weight: bold;
}
 .popCalendar .monthTitle {
     text-align: center;
     padding: 4px 0;
     font-weight: 600;
     color: var(--header);
}
 .popCalendar .monthNext {
     float: right;
     padding: 3px 0px 3px 3px;
     font-weight: normal;
}
 .popCalendar .yearNext {
     float: right;
     padding: 3px 0 3px 0;
     font-weight: bold;
}
 .popCalendar .monthPrevious a,.popCalendar .monthNext a {
     color: var(--fg-shade-med);
     text-decoration: none;
}
 .popCalendar .week {
     clear: both;
     overflow: hidden;
     padding: 0 10px;
}
 .popCalendar > .week:first-of-type {
     padding: 10px;
}
 .popCalendar > div:nth-child(2) {
     padding: 10px;
}
 .popCalendar .daynone {
     width: 25px;
     background-color: var(--bg-primary);
     margin: 1px;
     padding: 1px 0;
     text-align: center;
     float: left;
}
 .popCalendar .day {
     margin: 1px;
     text-align: center;
     float: left;
}
 .popCalendar .day a {
     color: var(--fg-shade-min);
     text-decoration: none;
     display: block;
     height: 25px;
     padding: 4px;
     box-sizing: border-box;
     border-radius: 50%;
     width: 25px;
}
 .popCalendar .day a:hover {
     text-decoration: underline;
     color: var(--fg-invert);
     background-image: var(--datepick-active);
}
 .popCalendar .s {
     background-color: var(--bg-primary);
}
 .popCalendar .today {
     color: var(--fg-invert);
     font-weight: bold;
}
 .popCalendar .today a {
     color: var(--fg-invert);
     background: var(--bg-pass-vivid);
}
 .popCalendar .selected {
     border-radius: 50%;
     background-image: var(--datepick-active);
     color: var(--fg-primary);
}
 .popCalendar .selected a {
     color: var(--fg-invert);
}
 .popCalendar .selected a:hover {
     color: var(--fg-invert);
}
 .popCalendar .dayhead {
     width: 25px;
     background-color: var(--bg-primary);
     color: var(--link-text);
     margin: 1px;
     padding: 1px 0;
     text-align: center;
     float: left;
     border-bottom: 1px solid var(--bg-primary);
     text-transform: uppercase;
}
 .popCalendar .hs {
     background-color: var(--bg-primary);
     border-bottom: 1px solid var(--bg-primary);
}
 .popCalendar .close {
     text-align: right;
     padding: 2px 5px;
     border-top: 1px solid var(--keyline);
     margin-top: 10px;
}
 .popCalendar .close a {
     display: inline-block;
     box-sizing: border-box;
     min-width: 86px;
     margin-top: 10px;
     padding: 3px 5px;
     color: var(--fg-invert);
     font-weight: normal;
     font-size: 12px;
     text-align: center;
     text-decoration: none;
}

 #holidayplan .teamleader .name,#dayview .teamleader .name {
     background: var(--bg-hilite-tint);
}
 #holidayplan table {
     margin-bottom: 3px
}
 #holidayplan .listLine0 td, #holidayplan .listLine1 td {
     background-color:var(--bg-primary);
     cursor:default;
}
 #holidayplan .listLine0:hover td, #holidayplan .listLine1:hover td, #holidayplan .listLine0:hover td a, #holidayplan .listLine1:hover td a {
     color: unset !important;
}
#holidayplan tr.employee td.notes,#holidayplan tr.employee td.action {
     position: relative;
     overflow: hidden;
}
#holidayplan tr.employee td.day {
     background-color: var(--bg-shade-med);
     cursor:pointer;
}

#holidayplan tr.employee td.notes:after, #holidayplan tr.employee td.action:before, #shiftAllocations .compliance:after {
      content: '';
      position: absolute;
      display: block;
      top: 0px;
      height: 10px;
      width: 10px;
      transform: skewX(45deg);
}

#holidayplan tr.employee td.notes:after {
      background: var(--cell-flag-note);
      left: auto; right: -7px;
      transform: skewX(45deg);
}

#holidayplan tr.employee td.action:before {
      background: var(--cell-flag-action);
      left: -7px; right: auto;
      transform: skewX(-45deg);
}

#shiftAllocations .compliance,
#shiftAllocations .statusCounts {
      position:relative;
}
#shiftAllocations .compliance:after {
      background: var(--cell-flag-action);
      left: auto;
      right: -7px;
      transform: skewX(45deg);
}
 #holidayplan .employee .wrongshift {
     background-color: var(--bg-shade-med);
}
 #holidayplan th,#holidayplan td {
     width: 1em;
}
 #holidayplan td.name,#holidayplan td.name p {
     text-align: left;
     width: 13em;
     overflow: hidden;
}
 #holidayplan td.name {
     padding-left: 0.5em;
     padding-right: 0.1em;
}
 #holidayplan td.empNo {
     padding-left: 0.1em;
     padding-right: 0.1em;
     text-align: center;
}
 #holidayplan td.time {
     width: 3em;
}
 #holidayplan td.ttl {
     width: 3em;
}
 #holidayplan td p {
     margin: 0;
     padding: 0;
     overflow: hidden;
     white-space: nowrap;
}
 #holidayplan td div,#holidayplan td input {
     color: var(--fg-primary);
     font-weight: normal;  transition:none; /* reset form field styles */
}
 #holidayplan td,#holidayplan td div,#holidayplan td input {
     margin: 0;
     padding: 0;
     border: 0;
     overflow: hidden;
     text-align: center;
}
 #holidayplan td,#holidayplan td div,#holidayplan td input,#holidayplan .day p {
     width: 3em;
     height: 18px;
     line-height: 18px;
     vertical-align: baseline;
}
 #holidayplan .month td {
     font-weight: bold;
}
 #holidayplan tr.employee td.shft {
     background-color: var(--bg-shade-max);
}
 #holidayplan tr.employee td.abs {
     color: var(--indicator-absent-text);
     background-color: var(--indicator-absent);
}
 #holidayplan tr.employee td.oth {
     color: var(--indicator-other-text);
     background-color: var(--indicator-other);
}
 #holidayplan tr.employee td.hol {
     color: var(--indicator-holiday-text);
     background-color: var(--indicator-holiday);
}
 #holidayplan tr.employee td.adjusted {
     background-color: var(--indicator-adjust-off);
     color: var(--indicator-adjust-off-text);
}
 #holidayplan tr.employee td.adjusted.shft {
     background-color: var(--indicator-adjust-on);
     color: var(--indicator-adjust-on-text);
}
 #holidayplan colgroup.day td {
     font-weight: bold;
}
 #holidayplan td {
     text-align: center;
     border: 1px solid var(--bg-primary) !important; /*blocks clientadmin.css abominations*/
     border-radius: 4px;
}
 #holidayplan td a {
     text-decoration: none;
}
 #holidayplan td input {
     background: none;
}
 #holidayplan td.sum {
     width: 25px;
}
 #holidayplan .team td {
     border-left: 0;
     border-right: 0;
     border-bottom: 2px solid var(--keyline);
     color: var(--fg-shade-med);
}
 #holidayplan .employee .sh_nights,#dayview .employee .sh_nights {
     border: 1px solid var(--indicator-nights);
     color: var(--fg-invert);
}
 #holidayplan .employee .sh_blue,#dayview .employee .sh_blue, #holidayplan .employee .blue, #holidayplan .employee .blue_days, #holidayplan .employee .blue_nights,
 #schedule .employee .blue, #schedule .employee .blue_days,#schedule .employee .blue_nights {
     border: 1px solid var(--indicator-blue);
     color: var(--fg-primary);
}
 #holidayplan .employee .sh_red,#dayview .employee .sh_red, #holidayplan .employee .red, #holidayplan .employee .red_days,  #holidayplan .employee .red_nights,
 #schedule .employee .red, #schedule .employee .red_days, #schedule .employee .red_nights {
     border: 1px solid var(--indicator-red);
     color: var(--fg-primary);
}
 #holidayplan .employee .sh_green,#dayview .employee .sh_green, #holidayplan .employee .green, #holidayplan .employee .green_days, #holidayplan .employee .green_nights,
 #schedule .employee .green, #schedule .employee .green_days, #schedule .employee .green_nights {
     border: 1px solid var(--indicator-green);
     color: var(--fg-primary);
}
 #holidayplan .employee .sh_yellow,#dayview .employee .sh_yellow, #holidayplan .employee .yellow, #holidayplan .employee .yellow_days, #holidayplan .employee .yellow_nights,
 #schedule .employee .yellow,  #schedule .employee .yellow_days,  #schedule .employee .yellow_nights {
     border: 1px solid  var(--indicator-yellow);
     color: var(--fg-primary);
}
 #holidayplan .employee .sh_purple,#dayview .employee .sh_purple, #holidayplan .employee .purple, #holidayplan .employee .purple_days, #holidayplan .employee .purple_nights,
 #schedule .employee .purple,  #schedule .employee .purple_days,  #schedule .employee .purple_nights {
     border: 1px solid var(--indicator-purple);
     color: var(--fg-primary);
}
 #holidayplan .employee .sh_orange,#dayview .employee .sh_orange, #holidayplan .employee .orange, #holidayplan .employee .orange_days, #holidayplan .employee .orange_nights,
 #schedule .employee .orange,  #schedule .employee .orange_days,  #schedule .employee .orange_nights {
     border: 1px solid var(--planner-shift-orange);
     color: var(--fg-primary);
}
 #holidayplan .employee .sh_days,#dayview .employee .sh_days, #holidayplan .employee .days_900to500,
 #schedule .employee .days_900to500 {
     border: 1px solid var(--indicator-days);
     color: var(--fg-primary);
}
 #holidayplan .employee .sh_a,#dayview .employee .sh_a, #holidayplan .employee .a_late,#holidayplan .employee .a_early,
 #schedule .employee .a_early,#schedule .employee .a_earlyfriday,#schedule .employee .a_late,#schedule .employee .a_latefriday {
     border: 1px solid var(--indicator-a);
     color: var(--fg-primary);
}
 #holidayplan .employee .sh_b,#dayview .employee .sh_b, #holidayplan .employee .b_late,#holidayplan .employee .b_early,
 #schedule .employee .b_early,#schedule .employee .b_earlyfriday,#schedule .employee .b_late,#schedule .employee .b_latefriday {
     border: 1px solid var(--indicator-b);
     color: var(--fg-primary);
}
 #holidayplan .employee .onshift, #schedule .employee .onshift {
     border: 1px solid var(--keyline-heavy);
     background-color: var(--bg-shade-med);
}
 #schedule .employee .wrongshift {
     border: 1px solid var(--bg-fail-vivid);
     background-color: var(--bg-shade-med);
}

.selectorLabel {
    display: block;
}

.selectorLabel>span:first-child {
    min-width: 20%;
    display: inline-block;
    padding-right: 5px;
    vertical-align: middle;
    text-align: right;
}

.selectorLabel select {
    min-width: 65%;
}

 #dayview {
     width: 770px;
     font-size: 10px;
     border: 1px solid var(--keyline);
}
 #dayview table {
     width: 100%;
}
 #dayview td {
     font-size: 10px;
     text-align: center;
     border: 1px solid var(--keyline);
     border-top: 0;
     border-left: 0;
     padding: 0;
}
 #dayview td a {
     text-decoration: none;
}
 #dayview .employee td div {
     width: 30px;
     height: 15px;
     padding: 0;
     overflow: hidden;
}
 #dayview td input {
     width: 16px;
     border: 0;
     background: none;
     margin: 0;
     padding: 0;
     font-size: 10px;
     text-align: center;
}
 #dayview td.name {
     width: 130px;
     text-align: left;
}
 #dayview .team td {
     height: 24px;
     padding-top: 8px;
     border-left: 0;
     border-right: 0;
     border-bottom: 2px solid var(--keyline);
     color: var(--fg-shade-min);
}
 #dayview .line td {
     color: var(--fg-shade-min);
}
 #dayview .spacer {
     width: 4px;
     background: var(--keyline);
}
 #dayview .employee .onshift {
     border: 1px solid var(--keyline);
     background-color: var(--bg-shade-max);
}
 #dayview .planCol1,#dayview .planCol3 {
     background-color: var(--bg-shade-min);
}
 #dayview tbody.rowBody,#dayview tbody a .rowHide {
     display: none;
}
#holiday_popup {
  width:600px !important;
}
 #holiday_hover h1 {
     font-size: 12px;
     padding: 2px;
     margin: 0;
     border: 0;
}
 #holiday_hover h2 {
     font-size: 11px;
     padding: 2px;
     margin: 0;
     border: 0;
}
 #holiday_hover h3 {
     font-size: 11px;
     padding: 2px;
     margin: 0;
     border: 0;
}
 #holiday_hover p {
     padding: 2px;
     margin: 0;
}
#holiday_hover .employeeNotes p {
  max-width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 #holiday_popup form {
     background: none;
     padding: 0;
}
 #holiday_popup h1, #holiday_popup h2,#holiday_popup h3,#holiday_popup .period, #annualRotaDay .dayCtrl .period {
     margin: 0;
     border: 0;
     padding: 2px;
}
 #holiday_popup .hdr>* {
     display:inline-block;
}
 #holiday_popup .period,#holiday_popup .mdayon .formElement,#annualRotaDay .dayCtrl .period,#annualRotaDay .dayCtrl .mdayon .formElement,#annualRotaDay .dayCtrl .mdayon .formElement {
     font-weight: bold;
     font-size: 11px;
}
 #holiday_popup p {
     padding: 2px;
     margin: 0;
}
 #holiday_popup .mlabel, #annualRotaDay .dayCtrl .mlabel {
     float: left;
     clear: left;
     width: 3em;
}
 #holiday_popup .mdayon .formElement, #annualRotaDay .dayCtrl .mdayon .formElement {
     border: 0;
     padding: 0;
     width: 1.5em;
     font-weight: normal;
}
 #holiday_popup .mdayon .year, #annualRotaDay .dayCtrl .mdayon .year {
     border: 0;
     padding: 0;
     width: 2.5em;
}
#holiday_popup .progress {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3;
    box-shadow: 0 0 8px var(--shadow-deep);
    background: var(--bg-primary);
    padding: 2em;
    color: var(--noti-success);
    font-weight: 600;
}
 #schedule {
     width: auto;
}
 #schedule .month {
     border: 0;
     width: 760px;
     margin: 10px 0 1px 0;
     text-align: center;
}
 #schedule .team td, #schedule .line td, #schedule .employee td, #schedule .summary td {
     border: 0;
}
 #schedule .month td, #schedule .team td, #schedule .line td, #schedule .employee td, #schedule .summary td {
     width: 16px;
     height: 15px;
     margin: 0;
     padding: 0 0 1px;
     font-size: 10px;
}
 #schedule .month td, #schedule .team td, #schedule .summary td {
     text-align: center;
 }

 #schedule .team td, #schedule .line td {
     border-bottom: 0 solid var(--keyline);
     background-color: var(--bg-primary);
     color: var(--fg-shade-med);
}
 #schedule .summary td {
     border-top: 0 solid var(--keyline-heavy);
     color: var(--fg-shade-med);
}
 #schedule .month input, #schedule .team input, #schedule .line input, #schedule .employee input {
     width: 16px;
     height: 15px;
     margin: 0;
     padding: 0;
     font-size: 10px;
     vertical-align: middle;
     border: 1px solid var(--keyline);
     text-align: center;
}
 #schedule .month td.name, #schedule .team td.name, #schedule .line td.name, #schedule .employee td.name, #schedule .summary td.name {
     width: 130px;
     text-align: left;
}
 #schedule div a {
     text-decoration: none;
}
 #schedule .month td .total0, #schedule .month td .total1 {
     width: 20px;
     border: 0 solid var(--keyline);
     margin: 0 2px 0 8px;
}
 #schedule .employee td .total0, #schedule .employee td .total1 {
     width: 20px;
     border: 1px solid var(--bg-primary);
     text-align: center;
     margin: 0 2px 0 8px;
}
 .schedule tr {
     border-bottom: 0;
}
 .schedule td.employee {
     text-align: left;
}
 .schedule td {
     width: 19px;
     text-align: center;
}
 .schedule tr.listHead th {
     text-align: center;
}
 .schedule tr.listHead th.date {
     text-align: left;
}
 .schedule .days {
     background-color: var(--bg-shade-max);
}
 .schedule .nights {
     background-color: var(--bg-shade-max);
}


/* Shift Schedule */

 .scheduleMonth select {
     min-width: 85px;
}
 .scheduleMonth td {
     vertical-align: middle;
     line-height: 1.5;
}
 .scheduleMonth td a {
     display: block;
     box-sizing: border-box;
     margin: 2px 0;
     border: 1px solid var(--fg-invert);
     border-radius: 4px;
     background: var(--fg-shade-max);
     color: var(--fg-invert);
     text-decoration: none;
}
 .scheduleMonth tr:hover {
     background-color: var(--bg-shade-min);
}
 .scheduleMonth td a:hover {
     background-color: var(--bg-warn) !important;
     color: var(--fg-primary) !important;
}
 .scheduleMonth td.weekend {
     background-color: var(--bg-shade-max);
}
 .scheduleMonth .listLine0:hover td.weekend:hover,.scheduleMonth .listLine1:hover td.weekend:hover,.scheduleMonth .listLine0:hover td a,.scheduleMonth .listLine1:hover td a {
     color: var(--fg-primary);
}
 .scheduleMonth td a.blue, .scheduleMonth td a.blue_days, .scheduleMonth td a.blue_nights, .scheduleMonth td a.sh_blue {
     background-color: var(--indicator-blue);
     color: var(--indicator-blue-text);
}
 .scheduleMonth td a.red, .scheduleMonth td a.red_days, .scheduleMonth td a.red_nights, .scheduleMonth td a.sh_red {
     background-color: var(--indicator-red);
     color: var(--indicator-red-text);
}
 .scheduleMonth td a.green, .scheduleMonth td a.green_days, .scheduleMonth td a.green_nights, .scheduleMonth td a.sh_green {
     background-color: var(--indicator-green);
     color: var(--indicator-green-text);
}
 .scheduleMonth td a.yellow, .scheduleMonth td a.yellow_days, .scheduleMonth td a.yellow_nights, .scheduleMonth td a.sh_yellow {
     background-color: var(--indicator-yellow);
     color: var(--indicator-yellow-text);
}
 .scheduleMonth td a.purple, .scheduleMonth td a.purple_days, .scheduleMonth td a.purple_nights, .scheduleMonth td a.sh_purple {
     background-color: var(--indicator-purple);
     color: var(--indicator-purple-text);
}
 .scheduleMonth td a.orange, .scheduleMonth td a.orange_days, .scheduleMonth td a.orange_nights, .scheduleMonth td a.sh_orange {
     background-color: var(--indicator-orange);
     color: var(--indicator-orange-text);
}
 .scheduleMonth td a.sh_nights {
     background-color: var(--indicator-nights);
     color: var(--indicator-nights-text);
}
 .scheduleMonth td a.sh_days {
     background-color: var(--indicator-days);
     color: var(--indicator-days-text);
}
 .scheduleMonth td a.sh_earlies {
     background-color: var(--indicator-earlies);
     color: var(--indicator-earlies-text);
}
 .scheduleMonth td a.sh_lates {
     background-color: var(--indicator-lates);
     color: var(--indicator-lates-text);
}
 .scheduleMonth td a.sh_a {
     background-color: var(--indicator-a);
     color: var(--indicator-a-text);
}
 .scheduleMonth td a.sh_b {
     background-color: var(--indicator-b);
     color: var(--indicator-b-text);
}


 .popupText .noskills {
     text-decoration: line-through;
}

 .popupText .key {
     float: none;
     margin: 4px 0 0 0;
}
 .popupText .key span {
     border: 1px solid var(--keyline);
     margin: 0 4px 0 0;
}
 .popupText .key span.unvisible {
     background-color: var(--bg-shade-med);
     color: var(--aside-error);
}
 .shortages table.shiftGroup {
     margin-bottom: 24px;
}
 #shiftplan .unavail td,.shortages .unavail td {
     color: var(--fg-shade-max);
}
 #shiftplan .notes {
     background-image: url(/admin/ui/3/art/notesflag.gif);
     background-repeat: no-repeat;
     background-position: top 1px right 1px;
}
#shiftplan .overtime.extensionpre {
    float: left;
    padding: 0;
    padding-left:0.1%;
    border: 1px solid var(--flex-overtime);
    border-radius: 4px;
    transition: border-color 0.3s, background-colour 0.3s;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
 #lineStoppages {
     max-height: 150px;
     overflow: auto;
}
 #lineStoppages ._shortContent {
     width: 150px;
}
 #lineStoppages .message {
     padding-left: 8px;
}
 #shiftplan .lineStopage {
     height: 5px;
     min-height: 5px;
     position: relavite;
}
 #shiftplan .lineStopage .lineStopOn,#shiftplan .lineStopage .lineStopOff {
     height: 5px;
     float: left;
}
 #shiftplan .lineStopage .lineStopOn {
     background: var(--aside-error);
}
 #shiftplan .requirements {
     display:none;
}

#cover .formButtons .assignmentCodeSelect {
  float:left;
  width:70%;
}

p._flexPanelModule {
    padding-left: 10px;
    padding-right: 10px;
}

 .shortages td.line {
     width: 20%;
}
 .shortages td.area {
     width: 30%;
}
 .shortages .team td {
     padding: 0 0 4px;
     font-size: 12px;
     font-weight: bold;
}
 .shortages .team td.period {
     font-size: 10px;
}
 .shortages tr.line td {
     border-bottom: 1px solid var(--keyline-heavy);
     color: var(--fg-shade-med);
     font-size: 10px;
}
 .shortageDayStep {
     float: right;
     clear: right;
     margin-top: 0;
}
 .adminHead .shortageDayStep {
     letter-spacing: 1px;
     padding-right: 10px;
     margin: 0;
}
 .adminHead .shortageDayStep a {
     margin: 0 5px;
     letter-spacing: normal;
}
 .adminHead .shortageDayStep img {
     margin: -2px 5px 0;
}
 .adminHead .shortageDayStep *:first-child {
     margin-left: 0;
}
 .adminHead .shortageDayStep span + img {
     margin-left: 5px;
     margin-right: 0;
     letter-spacing: normal;
}
 .shortageDateForm td {
     vertical-align: middle;
}
 .shortageDayStep .showAll {
     display: block;
     text-align: center;
     margin-top: 1em;
}
 #shiftplan {
     clear: both;
}
 #shiftplan .listSubHead td {
     border: 0;
}
 #shiftplan h2,#shiftplan h3 {
     margin: 0;
     padding: 0;
}
 #shiftplan h4 {
     margin: 2px 0;
     border-bottom: 1px solid var(--keyline);
     font-weight: normal;
}
 .shiftplan p, .shiftplan aside, .shiftplan .skill .employee,.shiftplan .skill .missing,.shiftplan .skill .supplmnt {
     position: relative;
     margin: 0;
}
 #shiftplan .required {
     overflow: hidden;
     margin: 1px 0;
}
#shiftplan .required .lvl {
    display: none;
}
#shiftplan .skill .employee,#shiftplan .skill .missing,#shiftplan .skill .supplmnt {
    overflow: hidden;
    margin: 0 0 1px;
    padding: 0;
    text-shadow: -2px 0 0 var(--flex-text-stroke), 2px 0 0 var(--flex-text-stroke), 0 -2px 0 var(--flex-text-stroke), 0 2px 0 var(--flex-text-stroke),
    -2px 2px 0 var(--flex-text-stroke), -2px -2px 0 var(--flex-text-stroke), 2px 2px 0 var(--flex-text-stroke), 2px -2px 0 var(--flex-text-stroke),
    -1px 0 0 var(--flex-text-stroke), 1px 0 0 var(--flex-text-stroke), 0 -1px 0 var(--flex-text-stroke), 0 1px 0 var(--flex-text-stroke),
    -1px 1px 0 var(--flex-text-stroke), -1px -1px 0 var(--flex-text-stroke), 1px 1px 0 var(--flex-text-stroke), 1px -1px 0 var(--flex-text-stroke)
}
 #shiftplan .skill .employee>*,#shiftplan .skill .missing>*,#shiftplan .skill .supplmnt>* {
     border: 1px solid var(--keyline);
     border-radius: 4px;
     transition: border-color 0.3s, background-colour 0.3s;
}
 #shiftplan .employee:hover>:not(.sliceOff) {
     border-color: var(--select-active-value) !important;
     background-color: var(--flex-alloc-focus) !important;
     transition: border-color 0.3s, background-colour 0.3s;
}
 #shiftplan .spare .employee>:not(.sliceOff) {
     background-color: var(--bg-primary);
     border: 1px solid var(--keyline-heavy);
     float: none;
}
 #shiftplan .actions .employee>:not(.sliceOff) {
     border: 1px solid var(--keyline);
     background-color: var(--bg-shade-med);
     color: var(--flex-fg-actions);
}
/* agency before overtime, so that agency on OT appear as OT*/
 #shiftplan .employee.overtime>:not(.sliceOff),#shiftplan .employee>.overtime,.key .overtime, section#info .key .overtime {
     border: 1px solid var(--flex-overtime);
}
 #shiftplan .employee .overtime.toil>*,.overtime.toil {
     background: var(--flex-toil);
}
 #shiftplan .employee .status,
 .key .status, section#info .key .status {
     border: 1px solid var(--flex-status);
}
 #shiftplan .employee .action {
     border: 1px solid var(--flex-action);
}
#shiftplan .employee .agency, #shiftplan .employee .agencyRota,
#popup .avails .staff .agency, #subpopup .avails .staff .agency,
.key .agency, section#info .key .agency, .key .agencyRota, section#info .key .agencyRota {
     border: 1px solid var(--flex-agency);
}
 #shiftplan .employee .training, .key .training {
     background-color: var(--bg-shade-med);
     color: var(--flex-training);
     border: 1px solid var(--keyline);
}
#shiftplan .employee .seasonal, .key .seasonal {
     color: var(--flex-seasonal);
     font-style: italic;
}
#shiftplan .employee .seasonal.student, .key .seasonal.student {
     color:var(--flex-seasonal-student);
}
#shiftplan .skill .missing>*,
section#info .key .missing {
     border-color: var(--bg-hilite);
     background-color: var(--bg-hilite);
}
#shiftplan .missing.agency>*,#shiftplan .supplmnt.agency {
     background-color: var(--flex-agency);
     border-radius: 6px
}
 #shiftplan .agencyOverRequested .agency {
     background-color: var(--flex-surplus);
}
 #shiftplan .supplmnt.agency .level {
     color: var(--fg-primary);
}
 #shiftplan .form .button {
     margin: 2px 4px 2px 0;
}
 #shiftplan .employee .area,#popup .info .area,#popup .staff .area {
     color: var(--flex-panel-area);
}

#shiftplan .employee .transfer,#popup .info .transfer,#popup .staff .transfer, .key .transfer {
  color: var(--fg-inform);
}

 #shiftplan .employeeName {
     position: relative;
     padding: 0 4px;
}
/*position:relative for zindex issues*/
 #shiftplan .spare .unavailable {
     border: 2px solid var(--flex-status);
}
 #shiftplan .unavailableEmployee {
     border: 0 solid var(--bg-primary);
     padding: 0 10px 0 0;
     margin: 0 10px 3px 0;
     color: var(--flex-fg-actions);
}
 #shiftplan .employee .ico-pinned {
     float: right;
}
#shiftplan tr.skill [class^="ico-"],#shiftplan tr.skill [class*=" ico-"],.popup .employeeTable  [class^="ico-"],#shiftplan .line .icnhldr [class^="ico-"],#shiftplan .team .icnhldr [class^="ico-"],section#info .key .overtime [class^="ico-"] {
     font-size:1em;
}
#shiftplan tr.skill [class^="ico-"],#shiftplan tr.skill [class*=" ico-"] {
    font-size:0.7em;
    margin: 2px 0 0;
}
 #shiftplan .actions .employee .agency {
     border: 0;
}
 #shiftplan .sliceOff {
     position: absolute;
     top: 1px;
     bottom: 1px;
     left: 1px;
     box-sizing: border-box;
     background-image: url(/admin/ui/3/art/spa/flex-off.gif);
     z-index: 0;
     opacity: var(--flex-sliceOff-opacity);
}
 #shiftplan .missing .sliceOff, #shiftplan .supplmnt.agency .sliceOff {
     border-radius: 0;
     background-color: var(--bg-primary);
     z-index: 1;
}

.shiftplan .popup .results .pref { width: 1px; }
.shiftplan .popup .results .prefIcon { margin: 2px 2px 0 0; }

/* Agency Request screen styles */
._requestAgencyPanel table:last-child {
    padding: 10px 0 0 0;
}
._requestAgencyPanel table:first-child {
    padding: 10px 0 10px 0;
}

 .key .sliceOff {
     left:0;
     width:50% ;
}
 section#info,section#status {
    padding:0.4em 8px;
}
section#controls {
    float:left ;
    margin:0.4em 8px;
}
section#controls + aside {
    float: left;
}
section#status {
    float:right;
}
 section#status>p,section#status>aside,section#status>div {
     margin:0;
}
 .key {
     float:right;
}
 .key span, .key div, .key input {
     display:inline-block;
     overflow:auto;
     font-size:10px;
     padding: 3px 5px;
}
 .key div, .key input {
     position:relative;
     overflow: hidden;
}
 section#info .key .localstaff {
     border: 1px solid var(--keyline-heavy);
     color: var(--fg-shade-med);
}
 section#info .key .over {
     color:var(--fg-shade-min);
     border:1px solid var(--flex-spare);
}
 .wkflex h3 {
     margin: 2px 0;
}
 .wkflex h3 * {
     vertical-align: bottom;
}
 .wkflex .key {
     padding:7px 3px;
     overflow:auto;
     clear:right;
}
 .wkflex .key div {
     float:right;
}
 .wkflex .key span, .wkflex .key div, .wkflex .key input {
     margin-right:15px;
}
 section#info .key div, section#info .key input {
     border:1px solid var(--keyline);
}
 section#info .key span, section#info .key div, section#info .key input {
     margin-left:1em;
}
 .compliance .area {
     font-weight:bold;
}
section#info .compliance,
section#info .statusCounts {
     display:inline-block;
}
section#info .statusCounts {
  margin-left: 24px;
}
 #shiftplan .employee a {
     text-decoration: none;
}
 #shiftplan td {
     padding: 1px 2px;
}
 #shiftplan td.employeeName {
     padding: 0;
}
 #shiftplan tr.skill td {
     border-top: 1px solid var(--keyline);
     padding-top:2px;
     padding-bottom:2px;
     line-height: 1.6;
     vertical-align: top;
}
 #shiftplan tr.skill td.skill {
     width: 200px;
     max-width: 200px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
}

.shiftplan tr.skill td ._agRqSkLvl {
  color: var(--flex-agency);
  font-weight: bold;
  font-style: italic;
  cursor:pointer;
}

 #shiftplan td.skillLevel {
     width: 2em;
}
 #shiftplan td.skillTimes {
     width: 6em;
     white-space: nowrap;
}
 #shiftplan td.skillTimes.error {
     color: var(--aside-error);
     background-color: var(--row-unavail);
}
 #shiftplan td.minimum {
     width: 4em;
}
 #shiftplan .team td {
     padding-bottom: 0;
     font-size: 12px;
     font-weight: bold;
}
 #shiftplan .team td.period {
     color: var(--header);
}
 #shiftplan .line td {
     background: var(--bg-shade-max);
}
 #shiftplan .line td .pinButton {
     float: right;
     color: var(--bg-shade-med);
     background: var(--fg-primary);
}
 #shiftplan .line td .pinButton[disabled] {
     background: var(--fg-shade-max);
}
 #shiftplan .icnhldr {
     clear: left;
     float: left;
}
#shiftplan tr.under_5 td.employeeName,
#shiftplan tr.under_4 td.employeeName,
#shiftplan tr.under_3 td.employeeName,
#shiftplan tr.under_2 td.employeeName,
#shiftplan tr.under_1 td.employeeName,
#shiftplan tr.under_0 td.employeeName {
     background-color: var(--bg-hilite);
     color: var(--fg-invert);
}
#shiftplan tr.over_5 td.employeeName .employee,
#shiftplan tr.over_4 td.employeeName .employee,
#shiftplan tr.over_3 td.employeeName .employee,
#shiftplan tr.over_2 td.employeeName .employee,
#shiftplan tr.over_1 td.employeeName .employee,
#shiftplan tr.over_0 td.employeeName .employee {
     border: 1px solid var(--keyline-heavy);
}
 #shiftplan tr.training td.employeeName {
     background-color: var(--bg-shade-med);
     color: var(--flex-training);
     border: 1px solid var(--keyline);
}

/* Shift Shortfall Report */
table.adminHolder.shortfall td.team.frzn {
     top: 46px; border-bottom: 1px solid var(--keyline-heavy); height: 22px;
}
table.adminHolder.shortfall td.shft.frzn {
     background: var(--bg-shade-max); top: 22px; border-bottom: 1px solid var(--keyline-heavy); height: 22px;
}

 #popup,#subpopup {
     padding: 10px 0;
     margin: 0;
     text-align: left;
}

 #popup .staff p, #popup .skills td, #subpopup p {
     margin: 0;
     border-bottom: 1px solid var(--keyline);
     padding: 0;
}
 #popup p:last-of-type, #subpopup p:last-of-type {
     border-bottom: none;
}
#popup p.agency:last-of-type, #subpopup p.agency:last-of-type {
     border-bottom: 1px solid var(--flex-agency);
}
 #popup p>* {
     padding: 2px 0;
}
 #popup h1, #popup h2, #popup h3, .popup h1, .popup h2, .popup h3 {
     margin: 0;
}
/* Removed from #popup .info -    overflow: hidden; */
 #popup .info {
     padding: 0 10px 1em;
     border-bottom: solid var(--keyline-heavy) 1px;
}
 #popup p.info, #subpopup p.info {
     padding: 8px 10px 2px;
     margin: 0;
     font-weight: bold;
}
 #popup input[type=button] {
     margin-top: 10px;
}
 #popup form {
     padding: 0;
}
 #popup form > *{
     margin-left: 10px;
     margin-right: 10px;
     margin-top: 5px;
}

#popup p a,
#subpopup p a {
     display: block;
     padding: 2px;
     text-decoration: none;
     color: var(--fg-primary);
     margin:0;
}
 #popup p a {
     margin-left:10px;
 }
 #subpopup p {
     padding-left:10px;
}
 #popup a.subInfo {
     float: right;
    margin-top: 2px;
}
 #popup p a.selected,#popup .skills tr.assigned td {
    background-color: var(--bg-shade-med);
    color: var(--link-text);
}

#popup p a:hover, #subpopup p a:hover, #popup .skills tr.available:hover td {
    color: var(--link-text);
    cursor: pointer;
}
 #popup p a:hover .area {
     color: var(--link-hover);
}
 #popup .skills,#popup .avails .staff,#subpopup .avails .staff {
     max-height: 250px;
     overflow-y: auto;
     clear: both;
}
 #popup .skills tr.disabled td {
     background-color: var(--bg-primary);
     color: var(--link-disable);
}
 #popup .block {
     float: left;
     padding-right: 1em;
}
 #popup p.flex.note {
     margin-top: 1em;
}
 #popup .staff p {
     clear: both;
}
 #popup .avails.high {
     max-height: 400px;
}

#popup #actionBlock, #popup #shiftAndTime {
     padding-left: 10px;
     padding-right: 10px;
}

 #popup .skills table {
     width: 100%;
}
 #popup .skills td {
     padding: 2px 4px;
}

 #popup .sep, #subpopup .sep {
     height: 1px;
     font-size: 1px;
     line-height: 1px;
     border-top: 1px solid var(--keyline);
     padding: 3px 0 2px 0;
}

 #printable {
     background-color: var(--bg-primary);
     color: var(--fg-primary);
     text-align: left;
}

 #printable h1,#printable h2 {
     border: 0;
}
 .shift_blue, .shift_blue_days, .shift_blue_nights {
     color: var(--indicator-blue);
}
 .shift_red, .shift_red_days, .shift_red_nights {
     color: var(--indicator-red);
}
 .shift_green, .shift_green_days, .shift_green_nights {
     color: var(--indicator-green);
}
 .shift_yellow,.shift_yellow_days,.shift_yellow_nights {
     color: var(--indicator-yellow);
}
 table.reportTable {
   border-collapse: separate;
 }
 .reportTable th {
     color: var(--header);
     font-weight: normal;
     font-size: 11px;
     padding: 0 1px;
     width: 30px;
     overflow: hidden;
}
 .reportTable th div {
     width: 30px;
     overflow: hidden;
}
 .reportTable th.employeeName div,.reportTable td.employeeName div {
     width: 100%;
}
 .reportTable td {
     border: 1px solid var(--bg-primary);
     border-radius: 3px;
     padding: 1px 2px;
     width: 25px;
}
 .reportTable .subHead td {
     border-right: none;
     vertical-align: bottom;
}
 .reportTable .number {
     text-align: right;
}
 .reportTable .spacer td {
     height: 10px;
     border-right: 0;
}
 .reportTable .spacer2 td {
     height: 10px;
     border: 0;
}
 .reportTable .summary td {
     height: 10px;
     border: 0;
     border-bottom: 1px solid var(--keyline);
}
 .reportTable .summary th {
     height: 10px;
     border: 0;
     border-bottom: 1px solid var(--keyline);
}
 .reportTable td.sep {
     border-bottom: 0;
     width: 10px;
}
 .reportTable th.sep {
     border-bottom: 0;
     width: 10px;
}
 .reportTable td.name {
     border-left: 1px solid var(--keyline);
}
 .reportTable td.hol {
     background: var(--sched-holiday);
     color: var(--bg-shade-max);
     text-align: center;
}
 .newReport td,.newReport th {
     border: 1px solid var(--keyline-heavy);
}
/* agency week report */
 .dySgmnt,.listLine0 td.dySgmnt,.listLine1 td.dySgmnt {
     background-color: var(--bg-hilite-tint);
     color: var(--fg-primary);
}
 .nghtSgmnt,.listLine0 td.nghtSgmnt,.listLine1 td.nghtSgmnt {
     background-color: var(--bg-inform-tint);
     color: var(--fg-primary);
}
 .shortDate {
     width: 5em;
}
 .offShift td {
     font-style: italic;
     opacity: 0.5;
}
 .offShift hr {
     border: 0;
     border-bottom: 1px solid var(--keyline);
}
 .summaryTable th {
     color: var(--header);
     font-weight: normal;
     font-size: 11px;
     padding: 0;
     overflow: hidden;
     border: 1px solid var(--keyline);
}
 .summaryTable th div {
     overflow: hidden;
}
 .summaryTable td {
     border-bottom: 1px solid var(--keyline);
     border-right: 1px solid var(--keyline);
     padding: 1px 2px;
     font-size: 12px;
}
 .summaryTable .number {
     text-align: right;
}
 .summaryTable .spacer td {
     height: 10px;
     border-right: 0;
}
 .summaryTable .spacer2 td {
     height: 10px;
     border: 0;
}
 .summaryTable .summary td {
     height: 10px;
     border: 0;
     border-bottom: 1px solid var(--keyline);
}
 .summaryTable .summary th {
     height: 10px;
     border: 0;
     border-bottom: 1px solid var(--keyline);
}
 .summaryTable td.sep {
     border-bottom: 0;
     width: 10px;
}
 .summaryTable th.sep {
     border-bottom: 0;
     width: 10px;
}
 .summaryTable td.name {
     border-left: 1px solid var(--keyline);
}
 .calculationPage h2 {
     font-size: 12px;
     border-bottom: 0;
     text-decoration: none;
     padding: 0;
     margin: 0;
}

 .calculation td {
     padding: 1px 2px;
}
 .calculation td.value {
     background-color: var(--bg-shade-min);
}
 .calculation th.noborder {
     border: 0;
}
 .calculation td.noborder {
     border: 0;
}
 .calculation div.number {
     width: 35px;
     text-align: right;
     border: 0;
     background-color: var(--bg-shade-min);
     padding: 1px 2px;
     text-align: right;
}
 .calculation input.number {
     width: 35px;
     text-align: right;
     border: 0;
     background-color: var(--bg-shade-min);
     padding: 1px 2px;
     text-align: right;
}
 .calculation input.number:focus {
     background-color: var(--bg-primary);
}
 .noborder {
     border: 0;
}
 .labourPlanInputPage h2 {
     font-size: 14px;
     border-bottom: 0;
     text-decoration: none;
     padding-bottom: 3px;
     padding-top: 6px;
     margin: 0;
}
 .labourPlanInputPage tr {
     padding: 2px;
}
 .labourPlanInputPage th {
     border: 0;
     font-size: 12px;
     padding: 1px;
     padding: 2px;
}
 .labourPlanInputPage td {
     border: 1px solid var(--keyline);
     font-size: 12px;
     padding: 1px 2px;
}
 .labourPlanInputPage td.value {
     background-color: var(--bg-shade-min);
}
 .labourPlanInputPage th.noborder {
     border: 0;
}
 .labourPlanInputPage td.noborder {
     border: 0;
}
 .labourPlanInputPage .number {
     width: 35px;
     text-align: right;
     background-color: var(--bg-shade-min);
     font-size: 12px;
     padding: 1px 2px;
     text-align: right;
}
 .labourPlanInputPage input.number:focus {
     background-color: var(--bg-primary);
}
 .noborder {
     border: 0;
}

 .bldText {
     font-weight: bold;
}
 option .shift {
     color: var(--fg-shade-min);
     padding-left: 10px;
}
 h2 .actions {
     float: right;
     display: block;
}
 h2 .note {
     font-size: 11px;
     font-weight: bold;
     text-align: right;
     clear: right;
}
 .scroll.preClear {
     clear: both;
}
 .report table,.reportFigures {
     width: 100%;
}
 .reportFigures td {
     width: 33%;
     text-align: center;
}
 .reportFigures table {
     border: 2px solid var(--keyline);
     margin: auto;
}
 .reportFigures table td,.reportFigures table th {
     width: auto;
     border: 1px solid var(--keyline);
     text-align: left;
}
 .reportFigures .caption {
     white-space: nowrap;
     text-align: center;
     background: var(--bg-invert);
     color: var(--fg-invert);
}
 .bdrAll {
     border: 1px solid var(--keyline);
}
 .bdrT,tr.bdrT td,tr.bdrT th {
     border-top: 1px solid var(--keyline);
}
 .bdrTStrng,tr.bdrTStrng td,tr.bdrTStrng th {
     border-top: 2px solid var(--keyline);
}
 .bdrTR,tr.bdrTR td,tr.bdrTR th {
     border-top: 1px solid var(--keyline);
     border-right: 1px solid var(--keyline);
}
 .bdrL,tr.bdrL td,tr.bdrL th {
     border-left: 1px solid var(--keyline);
}
 .bdrB,tr.bdrB td,tr.bdrB th {
     border-bottom: 1px solid var(--keyline);
}
 .bdrBhv,tr.bdrBhv td,tr.bdrBhv th {
     border-bottom: 1px solid var(--keyline-heavy);
}
 .bdrNo,tr.bdrNo td,tr.bdrNo th {
     border: 0 !important;
}
/*chargeable absence report*/
 .running {
     background: var(--bg-warn-vivid);
     color: var(--fg-primary);
}
 .chargeable {
     background: var(--bg-hilite-tint);
     color: var(--fg-primary);
}
 .running td,.running th,.chargeable td,.chargeable th {
     background: var(--bg-primary);
}
 td.trnsp {
     background: transparent;
}
 #manningNotes #noteText {
     width: 99%;
     height: 4em;
     margin: auto;
}
 table.intable {
     border: 0;
     border-spacing: 0;
}
 .intable td,
 .intable th {
     padding-left: 10px;
}
 #timesect {
     clear: both;
     padding: 0 5px;

}
 #infoBar {
     height: 30px;
     border: 1px solid var(--keyline-med);
     border-top: 0;
}
 #msgBar {
     margin:2px 0;
}
 #timesect #ui-rangeSlider-shftHrs {
     position: absolute;
     z-index: -1;
     height: 20px;
     background: var(--planner-panel-shift);
}
 div.ibShftHrs {
     position: absolute;
     z-index: -2;
     height: 30px;
     background: var(--planner-panel-shift);
}
 span.ibShftHrsTxt, div.ibEty {
     position: absolute;
     top:0;
     overflow: hidden;
     white-space: nowrap;
     font-size: 0.8rem;
}
 span.ibShftHrsTxt {
     z-index: -2;
     padding-left: 2px;
     overflow: hidden;
     text-align: left;
}
 div.ibEty {
     z-index: 1;
     height: 13px;
     margin-top: 20px;
     background: var(--bg-primary);
     padding-left: 2px;
     padding-right: 2px;
     cursor: pointer;
}
 div.ibEty.shftNtWr {
     background: var(--bg-shade-max);
}
 div.ibEty.shftWr {
     background: var(--planner-panel-work);
     color: var(--fg-invert);
}
 div.ibEty.ntShftNtWr {
     background: var(--bg-shade-max);
}
 div.ibEty.ntShftWr {
     background: var(--sched-work);
}
 div.ibEty.filr {
     border: 0;
     background: transparent;
}
 div.ibEty.filr:hover {
     background:var(--bg-invert-max);
     opacity: .2;
}
 #timesect #hrLn {
     display:inline-block;
     z-index: -4;
     width: 100%;
     margin: 30px 2px 20px;
     border-top: 1px solid var(--keyline-med);
}
#timesect .ui-rangeSlider {
    z-index: 2;
    padding-top: 35px;
}
 #timesect .ui-rangeSlider-label {
     bottom: 25px;
     margin-right: 8px;
     margin-left: 8px;
     border-radius: 4px;
     background: var(--fg-shade-min);
     padding: 6px;
     font-size: 11px;
     color: var(--fg-invert);
}
 #timesect .ui-rangeSlider .ui-rangeSlider-handle {
     width: 8px;
     height: 16px;
     border: 1px solid var(--keyline-med);
     background-image: var(--select-fill);
}
 #timesect .ui-rangeSlider .ui-rangeSlider-leftHandle {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
     margin-left: -2px;
}
 #timesect .ui-rangeSlider .ui-rangeSlider-rightHandle {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
}
 #timesect .ui-rangeSlider .ui-rangeSlider-innerBar {
     margin: 1px 6px 0px;
}
 #timesect .ui-rangeSlider .ui-rangeSlider-bar {
     background: var(--datepick-active);
     height: 9px;
     margin-top: 5px;
     opacity: 1;
     filter: alpha(opacity=100);
     -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
}
 #timesect .ui-rangeSlider .ui-rangeSlider-innerBar {
     height: 9px;
     background: var(--bg-shade-max);
     margin-top: 5px;
}
 #timesect .ui-ruler-tick {
     margin-top: 15px;
}
 #timesect .ui-ruler-tick-inner {
     position: relative;
}
 #timesect .ui-ruler-tick-inner:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 8px;
    border-left: 1px solid var(--keyline-med);
    bottom: 0;
    left: 0;
}
 #timesect .ui-ruler-tick-label {
     margin-left: 2px;
     border: none;
     padding: 0;
     color: var(--fg-shade-med);
     font-size: 0.8rem;
}
 #timesect #infoBar {
     height: 30px;
     margin: 24px 0 5px;
     z-index: 1;
}

.holidayPopup #shiftTimes {
    padding: 10px 5px 10px 5px;
}

.holidayPopup #_shiftInfo {
    display:block;
    padding-bottom:5px;
    padding-left:2px;
}

.holidayPopup #_shiftInfo span:not(:first-child) {
    padding-left:10px;
}

.holidayPopup #_shiftInfo span label {
    font-weight:bold;
}

.holidayPopup #shiftTimes #shiftTimesMessage {
    padding: 5px 0;
}
.holidayPopup form {
    border-top: 1px solid var(--keyline-heavy);
}

/*hoursreconcile*/
 div._filterHolder.hasResults {
     display: none;
     z-index: 15;
     position: absolute;
     top: 0px;
     width: 100%;
     background: var(--bg-primary);
     border-bottom: 1px solid var(--keyline-heavy);
     box-shadow: 0px 0px 3px var(--shadow-deep);
}
/* * FullCalendar v1.4.4 Stylesheet * * Feel free to edit this file to customize the look of FullCalendar. * When upgrading to newer versions, please upgrade this file as well, * porting over any customizations afterwards. * * Date: Wed Feb 3 22: 56: 20 2010 -0800 * */
 .fc,.fc .fc-header,.fc .fc-content {
     font-size: 1em;
}
 .fc {
     direction: ltr;
}
 .fc table {
     border-spacing: 0;
}
 .fc td,.fc th {
     padding: 0;
     vertical-align: top;
}
/* Header ------------------------------------------------------------------------*/
 table.fc-header {
     width: 100%;
}
 .fc-header-left {
     width: 25%;
}
 .fc-header-left table {
     float: left;
}
 .fc-header-center {
     width: 50%;
}
 .fc-header-center table {
     margin: 0 auto;
}
 .fc-header-right {
     width: 25%;
}
 .fc-header-right table {
     float: right;
}
 .fc-header-title {
     margin-top: 0;
     white-space: nowrap;
}
 .fc-header-space {
     padding-left: 10px;
}
/* right-to-left */
 .fc-rtl .fc-header-title {
     direction: rtl;
}
/* Buttons ------------------------------------------------------------------------*/
 .fc-header .fc-state-default,.fc-header .ui-state-default {
     margin-bottom: 1em;
     cursor: pointer;
}
 .fc-header .fc-state-default {
     border-width: 1px 0;
     padding: 0 1px;
}
 .fc-header .fc-state-default,.fc-header .fc-state-default a {
     border-style: solid;
}
 .fc-header .fc-state-default a {
     display: block;
     border-width: 0 1px;
     margin: 0 -1px;
     width: 100%;
     text-decoration: none;
}
 .fc-header .fc-state-default span {
     display: block;
     border-style: solid;
     border-width: 1px 0 1px 1px;
     padding: 3px 5px;
}
 .fc-header .ui-state-default {
     padding: 4px 6px;
}
 .fc-header .fc-state-default span,.fc-header .ui-state-default span {
     white-space: nowrap;
}
/* for adjacent buttons */
 .fc-header .fc-no-right {
     padding-right: 0;
}
 .fc-header .fc-no-right a {
     margin-right: 0;
     border-right: 0;
}
 .fc-header .ui-no-right {
     border-right: 0;
}
/* for fake rounded corners */
 .fc-header .fc-corner-left {
     margin-left: 1px;
     padding-left: 0;
}
 .fc-header .fc-corner-right {
     margin-right: 1px;
     padding-right: 0;
}
/* DEFAULT button COLORS */
 .fc-header .fc-state-default, .fc-header .fc-state-default a {
     border-color: var(--keyline-heavy);
    /* outer border */
     color: var(--fg-primary);
}
 .fc-header .fc-state-default span {
     border-color: var(--bg-primary) var(--bg-primary) var(--keyline);
    /* inner border */
     background: var(--bg-shade-max);
}
/* PRESSED button COLORS (down and active) */
 .fc-header .fc-state-active a {
     color: var(--fg-invert);
}
 .fc-header .fc-state-down span, .fc-header .fc-state-active span {
     background: var(--bg-invert-max);
     border-color: var(--fg-shade-med) var(--fg-shade-med) var(--fg-shade-max);
    /* inner border */
}
/* DISABLED button COLORS */
 .fc-header .fc-state-disabled a {
     color: var(--fg-shade-max);
}
 .fc-header .fc-state-disabled, .fc-header .fc-state-disabled a {
     border-color: var(--bg-shade-max);
    /* outer border */
}
 .fc-header .fc-state-disabled span {
     border-color:var(--bg-primary) var(--bg-primary) var(--keyline);
    /* inner border */
     background: var(--bg-shade-max);;
}
/* Content Area & Global Cell Styles ------------------------------------------------------------------------*/
 .fc-widget-content {
     border: 1px solid var(--keyline);
    /* outer border color */
}
 .fc-content {
     clear: both;
}
 .fc-content .fc-state-default {
     border-style: solid;
     border-color: var(--keyline);
    /* inner border color */
}
 .fc-content .fc-state-highlight {
    /* today */
     background: var(--bg-hilite-tint);
}
 .fc-content .fc-not-today {
     background: none;
}
 .fc-cell-overlay {
    /* semi-transparent rectangle while dragging */
     background: var(--bg-modify-saved);
     opacity: .2;
     filter: alpha(opacity=20);
    /* for IE */
}
 .fc-view {
    /* prevents dragging outside of widget */
     width: 100%;
     overflow: hidden;
}
/* Global Event Styles ------------------------------------------------------------------------*/
 .fc-event, .fc-agenda .fc-event-time, .fc-event a {
     border-style: solid;
     border-color: var(--link-text);
    /* default BORDER color (probably the same as background-color) */
     background-color: var(--link-text);
    /* default BACKGROUND color */
     color: var(-fg-invert);
    /* default TEXT color */
}
 .fc-event {
     text-align: left;
}
 .fc-event a {
     overflow: hidden;
     font-size: .85em;
     text-decoration: none;
     cursor: pointer;
}
 .fc-event-editable {
     cursor: pointer;
}
 .fc-event-time, .fc-event-title {
     display:block;
     padding: 0 1px;
}
/* for fake rounded corners */
 .fc-event a {
     display: block;
     position: relative;
     width: 100%;
     height: 100%;
}
/* right-to-left */
 .fc-rtl .fc-event a {
     text-align: right;
}
/* resizable */
 .fc .ui-resizable-handle {
     display: block;
     position: absolute;
     z-index: 99999;
     border: 0 !important;
    /* important overrides pre jquery ui 1.7 styles */
     background:url(data:image/gif;base64,AAAA) !important;
    /* hover fix for IE */
}
/* Horizontal Events ------------------------------------------------------------------------*/
 .fc-event-hori {
     border-width: 1px 0;
     margin-bottom: 1px;
}
 .fc-event-hori a {
     border-width: 0;
}
/* for fake rounded corners */
 .fc-content .fc-corner-left {
     margin-left: 1px;
}
 .fc-content .fc-corner-left a {
     margin-left: -1px;
     border-left-width: 1px;
}
 .fc-content .fc-corner-right {
     margin-right: 1px;
}
 .fc-content .fc-corner-right a {
     margin-right: -1px;
     border-right-width: 1px;
}
/* resizable */
 .fc-event-hori .ui-resizable-e {
     top: 0 !important;
    /* importants override pre jquery ui 1.7 styles */
     right: -3px !important;
     width: 7px !important;
     height: 100% !important;
     cursor: e-resize;
}
 .fc-event-hori .ui-resizable-w {
     top: 0 !important;
     left: -3px !important;
     width: 7px !important;
     height: 100% !important;
     cursor: w-resize;
}
 .fc-event-hori .ui-resizable-handle {
     _padding-bottom: 14px;
    /* IE6 had 0 height */
}
/* Month View, Basic Week View, Basic Day View ------------------------------------------------------------------------*/
 .fc-grid table {
     width: 100%;
}
 .fc .fc-grid th {
     border-width: 0 0 0 1px;
     text-align: center;
}
 .fc .fc-grid td {
     border-width: 1px 0 0 1px;
}
 .fc-grid th.fc-leftmost, .fc-grid td.fc-leftmost {
     border-left: 0;
}
 .fc-grid .fc-day-number {
     float: right;
     padding: 0 2px;
}
 .fc-grid .fc-other-month .fc-day-number {
     opacity: 0.3;
     filter: alpha(opacity=30);
    /* for IE */
    /* opacity with small font can sometimes look too faded might want to set the 'color' property instead making day-numbers bold also fixes the problem */
}
 .fc-grid .fc-day-content {
     clear: both;
     padding: 2px 2px 0;
    /* distance between events and day edges */
}
/* event styles */
 .fc-grid .fc-event-time {
     font-weight: bold;
}
/* right-to-left */
 .fc-rtl .fc-grid {
     direction: rtl;
}
 .fc-rtl .fc-grid .fc-day-number {
     float: left;
}
 .fc-rtl .fc-grid .fc-event-time {
     float: right;
}
/* Agenda Week View, Agenda Day View ------------------------------------------------------------------------*/
 .fc .fc-agenda th, .fc .fc-agenda td {
     border-width: 1px 0 0 1px;
}
 .fc .fc-agenda .fc-leftmost {
     border-left: 0;
}
 .fc-agenda tr.fc-first th, .fc-agenda tr.fc-first td {
     border-top: 0;
}
 .fc-agenda-head tr.fc-last th {
     border-bottom-width: 1px;
}
 .fc .fc-agenda-head td, .fc .fc-agenda-body td {
     background: none;
}
 .fc-agenda-head th {
     text-align: center;
}
/* the time axis running down the left side */
 .fc-agenda .fc-axis {
     width: 50px;
     padding: 0 4px;
     vertical-align: middle;
     white-space: nowrap;
     text-align: right;
     font-weight: normal;
}
/* all-day event cells at top */
 .fc-agenda-head tr.fc-all-day th {
     height: 35px;
}
 .fc-agenda-head td {
     padding-bottom: 10px;
}
 .fc .fc-divider div {
     font-size: 1px;
    /* for IE6/7 */
     height: 2px;
}
 .fc .fc-divider .fc-state-default {
     background: var(--bg-shade-med);
    /* color for divider between all-day and time-slot events */
}
/* body styles */
 .fc .fc-agenda-body td div {
     height: 20px;
    /* slot height */
}
 .fc .fc-agenda-body tr.fc-minor th, .fc .fc-agenda-body tr.fc-minor td {
     border-top-style: dotted;
}
 .fc-agenda .fc-day-content {
     padding: 2px 2px 0;
    /* distance between events and day edges */
}
/* Vertical Events ------------------------------------------------------------------------*/
 .fc-event-vert {
     border-width: 0 1px;
}
 .fc-event-vert a {
     border-width: 0;
}
/* for fake rounded corners */
 .fc-content .fc-corner-top {
     margin-top: 1px;
}
 .fc-content .fc-corner-top a {
     margin-top: -1px;
     border-top-width: 1px;
}
 .fc-content .fc-corner-bottom {
     margin-bottom: 1px;
}
 .fc-content .fc-corner-bottom a {
     margin-bottom: -1px;
     border-bottom-width: 1px;
}
/* event content */
 .fc-event-vert span {
     display: block;
     position: relative;
     z-index: 2;
}
 .fc-event-vert span.fc-event-time {
     white-space: nowrap;
     _white-space: normal;
     overflow: hidden;
     border: 0;
     font-size: 10px;
}
 .fc-event-vert span.fc-event-title {
     line-height: 13px;
}
 .fc-event-vert span.fc-event-bg {
    /* makes the event lighter w/ a semi-transparent overlay */
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--bg-primary);
     opacity: .3;
     filter: alpha(opacity=30);
    /* for IE */
}
/* resizable */
 .fc-event-vert .ui-resizable-s {
     bottom: 0 !important;
    /* importants override pre jquery ui 1.7 styles */
     width: 100% !important;
     height: 8px !important;
     line-height: 8px !important;
     font-size: 11px !important;
     font-family: monospace;
     text-align: center;
     cursor: s-resize;
}
 body.printed {
     margin: 0;
     padding: 8px;
     overflow: visible;
     text-align: left;
     background-color: var(--bg-primary);
     font-size: 12px;
}
 body.printed #mainArea {
     height: auto;
     position: static;
}
 body.printed td {
     padding: 1px 2px;
     vertical-align: top;
}
 body.printed table.adminHolder {
     width: 100%;
}
 body.printed .listHead th {
     color: var(--fg-primary);
     border-bottom: 2px solid var(--keyline-heavy);
     font-size: 12px;
     font-weight: bold;
}
 body.printed .listHead td {
     color: var(--fg-primary);
     border-bottom: 2px solid var(--keyline-heavy);
     font-size: 12px;
     font-weight: bold;
}
 body.printed .listSubHead td {
     border-bottom: 2px solid var(--keyline-heavy);
     font-size: 14px;
     font-weight: bold;
}
 body.printed .listLine0 td {
     background: var(--bg-primary);
     border-bottom: 1px solid var(--keyline-med);
}
 body.printed .listLine1 td {
     background: var(--bg-primary);
     border-bottom: 1px solid var(--keyline-heavy);
}
 body.printed .listLine0 td img {
     display: none;
}
 body.printed .listLine1 td img {
     display: none;
}
 body.printed .tools {
     display: none;
}
 body.printed .noprint {
     display: none;
}
 body.printed .shortPad {
     height: 8px;
}
 body.printed .adminPane {
     padding: 0;
}

 #statusTable td.columnName {
     max-width: 80px;
}

/* Shift Allocations Report Styles */
 .shftalloc:not(:empty)  {
   background: var(--bg-primary);
   border: 1px solid var(--bg-primary); /* fake cellspacing */
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px var(--keyline); /* 'inner' border */
   transition: border-color 0.3s, background-colour 0.3s;
 }
#shiftAllocations tr:hover td.shftalloc {
   border-color: var(--select-active-value);
   transition: border-color 0.3s, background-colour 0.3s;
}
 .shftalloc.ntplnd {
     box-shadow: none;
     background: var(--bg-shade-med);
     text-align: center;
}
 .shftalloc.suplmnt {
     box-shadow: none;
     background: var(--bg-warn-tint);
     color: var(--fg-primary);
}
 .shftalloc.ovrtm {
     box-shadow: none;
     background: var(--bg-fail-tint);
     color:  var(--fg-primary);
}
 .shftalloc.agncy {
     box-shadow: none;
     background: var(--sched-shift-late-fill);
     color:  var(--fg-primary);
}
 .shftalloc.sklntusbl {
     box-shadow: none;
     background: var(--bg-fail);
     color:  var(--fg-primary);
}
 .shftalloc.onclshft {
     box-shadow: none;
     background: var(--sched-shutdown);
     color: var(--fg-primary);
}
 .shftalloc.transIn {
     box-shadow: none;
     background: var(--sched-trans-in);
     color:  var(--fg-primary);
}
 .shftalloc.unnmdagncy {
     background: var(--flex-agency);
     color: var(--fg-invert);
}

.shftalloc.ntplnd.reqtofil { background: var(--bg-hilite); }
.shftalloc.action          { background: var(--bg-shade-min); color:var(--fg-shade-max); }

 .listSubHead.tmrow td {
     color: var(--fg-invert);
     background: var(--fg-shade-med);
}
 .listSubHead.bkrow td {
     background: var(--fg-shade-max);
     color: var(--fg-invert);
}


 .iframeBody #page.print,#page.print .freeze.corner,#page.print .freeze.rows,#page.print .freeze.cols {
     display: none;
}
 @media screen {
     .printOnly,.printPageFoot {
         display: none;
    }
}
 @media print {
     form {
         overflow: visible;
    }
    body,#mainArea {
         background: transparent;
         position: relative;
         width: 100%;
         height: auto;
         padding: 0;
         margin: 0;
    }
     #mainArea,.mainArea,.adminPane #adminScroll,.adminMain,.scrlV,.scrlH {
         overflow: visible;
    }
    .scroll {
         max-height: auto;
    }
    #topBar,#topMenu,#sideMenu,.logo,.tools,.btnGroup,button,.printNone,.freeze.corner,.freeze.rows,.freeze.cols {
         display: none;
    }
    .printPageFoot {
         position: fixed;
         bottom: 0;
    }
   h1#pageTitle {
    	position: relative;
    	top: 0;
    	left: 0;
    	right: 0;
    }
   #mainArea.fullWidthContent{
    	margin-left:0
    }
    .tblGrp tbody,.grp tbody,tr {
         position: relative;
         -webkit-column-break-inside: avoid;
         page-break-inside: avoid;
         break-inside: avoid;
    }
    .freeze,.noprint {
         display: none;
    }
    .compact,.compact td,.compact th {
         font-size: 8px;
    }
    table.bordered {
         border-collapse: collapse;
    }
    .bordered td,.bordered th {
         border: 1px solid var(--keyline-heavy);
    }
    #holidayplan table {
         width: auto;
    }
    #holidayplan table td.name {
         width: auto;
    }
    #shiftplan .employee {
         margin: 0;
    }
    #shiftplan .employee div {
         padding: 2px;
         border: 0;
         margin: 0;
    }
    #shiftplan .spare .employee {
         float: left;
         width: 120px;
    }
    #shiftplan .spare .unavailable {
         float: left;
         width: 200px;
    }
    .key {
         border: 0;
         padding: 7px 3px;
         overflow: auto;
         clear: right;
    }
    .key div {
         float: right;
         margin-right: 15px;
         padding: 3px 5px;
    }
    #shiftplan .employee a {
         text-decoration: none;
    }
    #shiftplan table,.manningRpt table {
         margin-top: 10px;
         clear: both;
    }
    #shiftplan td {
         padding: 1px 2px;
    }
    #shiftplan td.employeeName {
         padding: 0;
    }
    #shiftplan td.skill {
         width: 150px;
    }
    .formButton,.submitWrapOut,.cancelWrapOut,.calPicker, .calPickClear {
         display: none !important;
    }
}
 #rotaDisplay {
     float: left;
     border: 1px solid var(--keyline);
     border-radius: 4px;
}
 .shiftPattern .weekHolder {
     margin: auto;
     border-collapse: separate;
     border-top: 1px solid var(--keyline);
     background: transparent;
     padding: 10px;
     text-align: center;
}
 .shiftPattern .weekHolder td,.shiftPattern .weekHolder th {
     font-size: 9px;
     vertical-align: middle;
}
 .shiftPattern .title {
     background: var(--bg-primary);
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: 4px 8px;
     color: var(--header);
     font-weight: bold;
}
 .shiftPattern .dayLabels td,.shiftPattern .dayLabels th,.shiftPattern .dayIndicators th {
     color: var(--fg-primary);
     padding: 4px;
     text-align: center;
     font-weight: bold;
}
/* rota finder*/
 .shiftPattern .dayIndicators td {
     text-align: center;
     width: 3em;
     height: 4.8ex;
     border: 1px solid var(--keyline);
     background: transparent;
}
 .shiftPattern .dayIndicators td.active {
     background: var(--bg-pass-vivid);
     color: var(--fg-primary);
}
 .shiftPattern .dayIndicators td.prior {
     border-color: transparent;
}
 .shiftPattern .dayIndicators td.start {
     border-color: var(--bg-warn);
}
 .shiftPattern .editable td:hover {
     cursor: pointer;
}
 .shiftPattern .patternNotice {
     background: var(--bg-fail-vivid);
     padding: 3px;
     color: var(--fg-primary);
     font-weight: bold;
}
 #offsetPicker td {
     cursor: default;
}
 #offsetPicker .dayIndicators td {
     border: 1px solid var(--keyline);
}
 #offsetPicker td.start {
     cursor: pointer;
     border-color: var(--bg-inform-vivid);
}
 .freeze {
     z-index: 10;
     position: fixed;
     overflow: hidden;
}
 .freeze.corner {
     z-index: 11;
}
 .freeze table {
     table-layout: fixed;
     position: absolute;
}
 .freeze.cols,.freeze.corner {
     border-right: 1px solid var(--keyline);
     box-shadow: 2px 0 4px -2px var(--shadow-deep);
}
 .freeze.rows {
     box-shadow: 0 5px 3px -3px var(--shadow-hint);
}

 .grid-scroll:not(.fixed) table {
     min-width:100%;
 }

 .grid-scroll table {
     border-collapse: separate;
     border-style: none;
     border-spacing: 0;
     background: var(--bg-primary);
     cursor: default;
}
 #prd br {
     display: none;
}
.grid-scroll .dummy th,.grid-scroll .dummy td {
     height: 0 !important;
     padding: 0 !important;
     border: 0 !important;
     margin: 0 !important;
}
.grid-scroll td,.grid-scroll th {
     overflow: hidden;
     line-height: inherit;
     white-space: nowrap;
}
.grid-scroll td.gridLabel,.grid-scroll th.gridLabel,.grid-scroll td.gridEndLabel,.grid-scroll th.gridEndLabel {
     text-align: left;
     vertical-align: middle;
}
.grid-scroll td.gridEndLabel,.grid-scroll th.gridEndLabel {
     text-align: right;
}
 .clrfx:after {
     content: " ";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
 * html .clrfx {
     height: 1%;
}
 *:first-child+html .clrfx {
     min-height: 1px;
}
/*responsive %age width styles */
 .slt.gtr.flx .card {
     box-sizing: border-box;
     max-height: 300px;
     max-height: max-content;
     height: 100%;
     width: 100%;
     overflow-x: hidden;
     overflow-y: inherit;
}
 .slt.gtr .monthCal {
     height: inherit;
}
 .x-shade .card {
     padding: 0.25em;
     min-height: 2em;
}
 .x-bleed .card {
     padding-top: 0;
     padding-right: 0;
     padding-left: 0;
}
 .x-bleed .card p {
     margin: 0;
     padding: 1em 0.25em;
}

 .flx {
    display: flex;
 }
 .flx-row {
    flex-flow: row wrap;
 }
 .flx-col {
    flex-flow: col wrap;
 }

 .gtr.flx>.x2,.gtr.flx>.x3,.gtr.flx>.x4,.gtr.flx>.x6 {
    margin: 0.25em;
    box-sizing: border-box;
}

.gtr.flx {
    margin: -0.25em;
    box-sizing: border-box;
}
.gtr.flx>.gtr.flx>:last-child {
    margin-right: 0;
}
.gtr.flx>.gtr.flx>:first-child {
    margin-left: 0;
}
.gtr.flx>.gtr.flx>* {
    margin-top: 0;
    margin-bottom: 0;
}

 .flx>.x2,.flx>.x3,.flx>.x4,.flx>.x6 {
    flex: 12 0 100%;
}
 .flx>.x2, .flx>.x4.s2 {
    flex: 6 0 41%;
 }
 .flx>.x3,.flx>.x6.s2 {
    flex: 4 0 29%;
 }
 .flx>.x3.s2,.flx>.x6.s4 {
    flex: 8 0 58%;
}
 .flx>.x4 {
    flex: 3 0 21%;
 }
 .flx .x6 {
     flex: 2 0 15%;
}

.grd {
  display:grid;
  column-gap: 1rem;
  row-gap: 0.5rem;
  grid-auto-columns: min-content max-content;
}

.grd .label {
    white-space: nowrap;
}

 .grd.c2 {
    grid-template-columns: auto 1fr;
 }

 .grd.c2 .x2, .grd.c3 .x3, .grd.c4 .x4, .grd .x-all {
   width:100%;
   grid-column:  1/-1;
 }

 .grd.c3 .x2 {
   grid-column:  auto/span 2;
 }

.col {
  margin-top: 0.5em;
  column-gap: 0.5em;
}
.col:not(:first) {
  column-gap: 0.5em;
}
.col>.x2,.col>.x3,.col>.x4,.col>.x6 {
  width:auto;
  break-inside: avoid;
  margin-bottom:0.5em;
}
.col.cols-2 {
  column-count: 2
}
.col.cols-3 {
  column-count: 2
}
.col.cols-4 {
  column-count: 4
}
 .x2,.x4.s2,.x6.s3 {
     width: 49%;
}
 .x3,.x6.s2 {
     width: 32%;
}
 .x3.s2,.x6.s4 {
     width: 65%;
}
 .x4 {
     width: 25%;
}
 .x4.s3 {
     width: 75%;
}
 .x6 {
     width: 15%;
}
 .x6.s5 {
     width: 82%;
}
 .col h2,.grd h2,.flx h2 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    margin: 0;
    border-bottom: 1px solid var(--keyline);
}
 .col h2>button,.grd h2>button,.flx h2>button {
   border:0;
   background:transparent;
   padding:0;
   text-decoration: underline;
 }

 .col .crd,.grd .crd,.flx .crd {
     border: 1px solid var(--keyline);
     border-radius: 4px;
     background: var(--bg-primary);
 }

 .card .optOutWeek {
     float: right;
     margin: 0.5em 0.5em 2px 8px;
}
 .card .optOutWeek .unvisible {
     text-align: center;
     color: var(--noti-error);
}
 .card .clear {
     clear: right;
}
.card>table.adminHolder {
     border:none;
}
.card .adminHolder th, .card .adminHolder td {
    border:none;
}
.card table.list tbody:first-of-type>:first-child td {
    border-top: solid var(--keyline) 1px;
}
.monthCal h2 {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.monthCal .monthPrev,.monthCal .monthNext {
    cursor: pointer;
}
.monthCal table {
    width: 100%;
}
.workSched tr td {
    position: relative;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 14.3%;
}
.workSched td.wrk.adj p.dateNum,
.workSched td.hol.adj p.dateNum,
.workSched td.xtr.adj p.dateNum,
.workSched td.off.adj p.dateNum,
.workSched td.oth.adj p.dateNum {
    background-color: var(--indicator-adjust-on);
}
.workSched tr td.today p.dateNum,
.workSched tr td.wrk.today p.dateNum,
.workSched tr td.hol.today p.dateNum,
.workSched tr td.xtr.today p.dateNum,
.workSched tr td.off.today p.dateNum,
.workSched tr td.oth.today p.dateNum {
    background-color: var(--sched-today-fill);
    color: var(--sched-today-text);
}
.workSched tr td.actv p.dateNum,
.workSched tr td.wrk.actv p.dateNum,
.workSched tr td.hol.actv p.dateNum,
.workSched tr td.xtr.actv p.dateNum,
.workSched tr td.off.actv p.dateNum,
.workSched tr td.oth.actv p.dateNum {
    background-color: var(--sched-active);
}
.workSched td p.dateNum {
    display: block;
    box-sizing: border-box;
    height: 30px;
    width: 30px;
    margin: 3px auto;
    border: solid transparent 3px;
    border-radius: 50%;
    background-color: var(--bg-shade-med);
    padding: 3px;
    line-height: 17px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.workSched td.othMon p.dateNum {
    background-color: var(--bg-shade-min);
    color: var(--fg-shade-max);
    cursor: default;
}
.workSched td.shd p.dateNum {
    border-color: var(--sched-shadow);
    background-color: var(--sched-shadow-fill);
}
.workSched td.wrk p.dateNum {
    border-color: var(--sched-work);
}
.workSched td.off p.dateNum,
.workSched td.tardy p.dateNum {
    border-color: var(--sched-off);
}
.workSched td.hol p.dateNum {
    border-color: var(--sched-holiday);
}
.workSched td.xtr p.dateNum {
    border-color: var(--sched-extra);
}
.workSched td.oth p.dateNum {
    border-color: var(--sched-other);
}
.workSched td.shutdown p.dateNum {
    border-color: var(--sched-shutdown);
}
.workSched td.pnd p.dateNum {
    color: var(--sched-pending);
}
 .workSched .wkDy td {
     border-bottom: none;
     font-size: 10px;
     line-height: 12px;
     color: var(--fg-shade-med);
     font-weight: 600;
     padding: 5px 5px 10px;
}
 .workSched .wkDy td p.dateNum {
     padding: 0;
     border: 0;
}
 .workSched td .holCount {
     position:absolute;
     bottom: 0;
     left:56%;
     display: block;
     width: 2.5ch;
     height: 2.5ch;
     line-height: 2.5ch;
     margin: 0;
     border-radius: 50%;
     opacity: 0;
     transform: scale(-0.8);
     transition: all 0.3s ease-in;
}
 .holCount .workSched .holCount {
     opacity: 1;
     transform: scale(1);
     transition: all 0.2s ease-out;
}
 .holCount .workSched .wrk .holCount {
     background: var(--sched-info-fill);
     color: var(--sched-info-text);
}
 .workSched .info {
     min-height: 6em;
     padding: 0 1em;
     overflow-y: auto;
}
 .workSched .info .date {
     font-weight: bold;
     padding: 1em 0;
}
.workSched .info .tardyStatus {
     font-weight: bold;
}
.workSched .info p {
     margin: 0;
     padding: 0;
}
 .workSched .info .detail:hover {
     cursor: pointer;
     background: var(--sched-active);
}
 .workSched .info .suggest.hol {
     color: var(--sched-holiday);
}
 .workSched .info .suggest.xtr {
     color: var(--sched-extra);
}
 .workSched .info .suggest.oth {
     color: var(--sched-other);
}
 .workSched .buttonBar {
     float: right;
     margin-top: 8px;
}
 .stats table {
     margin-bottom: 2em;
}
 .stats caption {
     text-align: left;
     font-weight: bold;
}
 .stats td {
     padding-top: 0.2em;
     padding-bottom: 0.2em;
}
 .stats .circliful {
     margin: auto;
}
 #leaveRequests .suggestNote {
     width: 1%;
     white-space: nowrap;
}
 .condchngchckTable td {
     vertical-align: middle;
}
/* Shift schedule style */
 .shiftTableHeader {
     width: 100%;
     color: var(--fg-primary);
     font-weight: bold;
}
 .shiftHeaderHourCell {
     width: 25%;
     float: left;
}
 .shiftHeaderHourCellPad {
     padding-left: 5px;
     position: relative;
     left: -1px;
     border-left: 2px solid var(--keyline);
}
 .shiftHeaderHourCellLast {
     float: left;
     padding-left: 5px;
     border-left: 2px solid var(--keyline);
}
 .scheduleMonthTextSpan {
     padding-left: 5px;
     padding-right: 5px;
}
 .trafficLightRed,.listSubHead .trafficLightRed,.listSubHead .trafficLightRed {
     color: var(--bg-fail-vivid);
}
 .trafficLightAmber,.listSubHead .trafficLightAmber,.listSubHead .trafficLightAmber {
     color: var(--bg-warn-vivid);
}
 .trafficLightGreen,.listSubHead .trafficLightGreen,.listSubHead .trafficLightGreen {
     color:var(--bg-pass-vivid);
}
._absencePercentage .listLine .trafficLightRed {
    background: var(--bg-fail-vivid);
    color: var(--bg-primary);
}
._absencePercentage .listLine .trafficLightAmber {
    background: var(--bg-warn-vivid);
    color: var(--fg-primary);
}
._absencePercentage .listLine .trafficLightGreen {
    background: var(--bg-pass-vivid);
    color: var(--bg-primary);
}
.planningSummary .ico-add,table.weeklySummary .ico-add {
     display: none;
}
table.weeklySummary td.opsactv {
    box-shadow: inset 0px -3px 0px 0px var(--bg-inform-vivid);
}
table.weeklySummary td.opsactv {
    box-shadow: inset 0px -3px 0px 0px var(--bg-inform-vivid);
}
 td.state-excess,td.excess,.state-excess,.excess,.state-excess td,.excess td {
     background-color: var(--bg-warn);
     color: var(--fg-primary);
}
 td.state-ok,.state-ok,.state-ok td {
     background-color: var(--bg-pass);
     color: var(--fg-primary);
}
 td.state-warn,.state-warn,.state-warn td {
     background-color: var(--bg-warn);
     color: var(--fg-primary);
}
 td.state-acceptable,.state-acceptable,.state-acceptable td {
     background-color: var(--bg-shade-min);
     color: var(--fg-primary);
}
 td.state-exception,.state-exception,.state-exception td {
     background-color: var(--bg-fail);
     color: var(--fg-primary);
}
 td.state-strike,.state-strike {
     text-decoration: line-through;
}
 .listLine0 td.state-adjusted,.listLine1 td.state-adjusted {
     padding-right: 1px;
}
 td.state-adjusted .ico-add,.state-adjusted .ico-add {
     display: block;
     float: right;
     font-size: 85%;
}
 tr.collapsed td h2,tr.collapsed th h2 {
     color: var(--input-disabled-text);
     font-style: italic;
}
/* Pay Conditions style */
 .payRuleCond {
     border: 1px solid var(--keyline-heavy);
     width: 400px;
}
#opsRunEditForm ._removeSplit, #opsRunEditForm ._removeSplit [class^="ico-"]{
     vertical-align:bottom;
}
#opsRunEditForm .listLine td{
     vertical-align:middle;
}

#opsRunEditForm ._repeat:not(._template):not(:first-of-type){
     border-top:1px solid var(--field-border);
     padding-top:5px;
     margin-top:10px;
}

 input.edited {
     background: var(--bg-modify-unsaved);
}
 table.bulkFilter td.formLabel {
     width: auto;
}
 table.budgetResults tbody td,table.bulkResults tbody td {
     vertical-align: middle;
}
 table.budgetResults tbody td.under {
     color: var(--bg-pass-vivid);
}
 table.budgetResults tbody td.over {
     color: var(--bg-fail-vivid);
}
 table.selectable tr td {
     border-left: 1px solid var(--keyline);
     border-bottom: 1px solid var(--keyline);
     padding-top: 1px;
     padding-bottom: 1px;
}
 table.selectable tr th {
     text-align: center;
}
 td.selectable {
     text-align: center;
     border-left: 1px solid var(--keyline);
     border-bottom: 1px solid var(--keyline);
}
 td.dualelem {
     height: 35px;
}
 label.inline {
     font-weight: normal;
}
 .unselectable {
     color: var(--input-disabled-text);
}
/* Circliful dial CSS*/
 .circliful {
     position: relative;
}
 .circle-text,.circle-info,.circle-text-half,.circle-info-half {
     width: 100%;
     position: absolute;
     text-align: center;
     display: inline-block;
}
 .circle-info,.circle-info-half {
     color: var(--fg-shade-max);
}
 .circliful .fa {
     margin: -10px 3px 0 3px;
     position: relative;
     bottom: 4px;
}

@property --v {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0.01turn;
}

.ringIdent {
  --ring-glyph-stroke: 4px;
  --ring-label-color: #000000;
}
.ringIdent.type_h {
  --ring-col:#8893f0;
  --ring-glyph: '\2666';
}

.ringIdent.type_x {
  --ring-col:#efcb3d;
  --ring-glyph: "\2663";
}

.ringIdent.type_m {
  --ring-col:#Fd6060;
  --ring-glyph: "\2665";
}

.ringIdent::after {
    content: var(--ring-glyph);
    display: inline-block;
    width: 1em;
	font-size:1em;
    text-align: center;	
    opacity: 1;
    color: var(--fg-invert);
    -webkit-text-stroke: var(--ring-glyph-stroke) var(--ring-col);
    paint-order: stroke;
}

#rings {
    position: relative;
    width: 100%;
    max-width: 300px;
    --track:20px;
}

#rings .ring {
    --v:0.01turn;
    --trackngutter: calc( var(--track) + 3px );

    box-sizing: border-box;
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    background-clip: padding-box;

    inset: var( --trackngutter );
    width: calc(100% - (var(--trackngutter) * 2) );

    transition: inset 0.5s, width 0.5s;
}
#rings>.ring {
    position: relative;
}

#rings .ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: var(--track); /* control the border thickness */
    background: conic-gradient( from var(--v) at 50% 50%, rgba(0,0,0,.45) 0turn,rgba(0,0,0,0.4) 0.002turn, rgba(0,0,0,0) 0.02turn ),
      conic-gradient( var(--ring-col) var(--v), var(--ring-col) var(--v), var(--keyline) var(--v));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    transition: padding 0.5s, opacity 0.5s, --v 0.8s cubic-bezier(0.83, 0, 0.17, 1);
}

#rings .ring.hidden {
    inset: 0;
    width: 100%;
}

#rings .ring::after {
    position: absolute;
    left: calc(50% - 0.4em);
}

#rings .ring.hidden::before {
    padding: 0;
    opacity: 0.00001;
}

.ringIdent.hidden::after, .ringSingleton .ringIdent::after {
    font-size:0;
    opacity: 0.00001;
    transition: all 500ms;
}

#rings .legend {
	margin:auto;
	margin-top: calc( 1.5*var(--track));
	border-collapse: separate;
}
#rings caption {
	text-align:center;
}

#rings .legend .ringIdent:after {
	margin-left: 0.3em;
    float:right;
}

#rings .legend .ringIdent {
	border-radius:5px;
	padding: 0 0.3em;
	font-weight:bold;
	text-align:center;
    color: var(--ring-label-color);
	background-color: var(--ring-col);
	
	span {
	 display: inline-block;
	 min-width: 4ch;
	}
}
#rings .legend th {
	text-align: right;
	font-weight:normal;
}
#rings .legend .hidden, #rings .legend ._label:has(+.hidden) {
    visibility:hidden;
    line-height:0;
    overflow:hidden;
}

#rings:not(:has(.ringIdent:not(.hidden))) {
    visibility: hidden;
}

.stats caption.ringIdent:after {
  padding-left: 1ch;
  font-size: calc(1lh - ( var(--ring-glyph-stroke) * 2 ) );
}

/*input "clear" X icon*/
 span.deleteicon input {
     padding-right: 20px;
}
 span.deleteicon {
     position: relative;
}
 span.deleteicon span {
     position: absolute;
     display: block;
     top: 0;
     right: 0px;
     width: 16px;
     height: 16px;
     margin: 0 2px;
     cursor: pointer;
}
 span.deleteicon span,span.deleteicon span:hover {
     color: var(--link-text);
}


/* Report notes cell styles */
 th.noteCell,td.noteCell {
     max-width: 20em;
}

/* Trip plan*/
 .queued {
     color: var(--bg-fail-vivid);
}
 .confirmed {
     color: var(--bg-inform-vivid);
}
 .drop-accept,.drop-accept td {
     background-color: var(--sched-shift-late-fill);
     box-shadow: 0 5px 8px -9px var(--shadow-deep) inset;
}
 .drop-outofwindow,.drop-outofwindow td {
     background-color: var(--bg-inform);
}
 .drop-reducedrest,.drop-reducedrest td {
     background-color: var(--bg-warn-tint);
}
 .drop-over,.drop-over td {
     background-color: var(--bg-hilite-tint);
}

/* Job Display poo-up */
 table.jobDisplay,table.moveDisplay {
     width: 100%;
     margin-top: 8px;
}
 table.jobDisplay td.label {
     padding: 2px 4px 1px 0;
}

/* progress bar */
 .progress {
     position: relative;
     background: var(--btn-submit-fill);
     width: 200px;
     height: 1.5em;
     margin: 0.5em auto;
}
 .progress .bar {
     position: absolute;
     background: var(--bg-pass-vivid);
     left: 0;
     height: 1.5em;
}
 .progress .value {
     position: absolute;
     width: 100%;
     min-width: 2px;
     line-height: 1.5em;
     text-align: center;
}

.filterForm {
     display: none;
     z-index: 20;
     position: absolute;
     top: 0px;
     width: calc(100% - 16px);
     background: var(--bg-primary);
     border-bottom: 1px solid var(--keyline);
     box-shadow: 0px 0px 3px 3px var(--shadow-hint);
     padding-right: 10px;
     box-sizing: border-box;
}
.filterFormScroll {
  overflow-y: auto;
  max-height: calc(100vh - 228px);
}
 .filterForm #dateform > * {
     padding-left: 10px;
     padding-right: 10px;
}
 span.formOption {
     margin-right: 4px;
}
 .formOption * {
     vertical-align: middle;
}
 .formOptionsHolder {
     max-height: 150px;
     overflow-y: auto;
}

/* Legacy inline spinner - deprecated in favour of button-spinners and overlay spinners */
.runReportSpinner {
	display: inline-block;
	width:25px;
	height:25px;
    vertical-align: middle;
    background: var(--bg-primary) var(--throbber) no-repeat 0 0;
    background-size: 25px;
 }

/* Progress popup styles */
 #progressPopup {
     position: absolute;
     top: 0;
     left: 0;
     height: auto;
     max-width: 406px;
     min-height: 48px;
     z-index: 110;
     margin-top: -32px!important;
     background: var(--bg-primary) var(--throbber) no-repeat 0 0;
     background-size: 30px;
     background-position: 20px center;
     padding: 20px 20px 20px 72px;
     box-shadow: 0px 0px 3px 3px var(--shadow-hint);
}
 #progressPopup.basic {
     border: none;
     padding: 0 30px;
     border-radius: 32px;
     box-shadow: none;
     background: center / 30px no-repeat var(--throbber), radial-gradient(circle at center, var(--bg-primary) 0%, var(--bg-primary) 11%, transparent 64%);
}
 #progressTitle {
     font-size: 18px;
     font-weight: normal;
     color: var(--header);
     margin-bottom: 8px;
}
 #progressMessage {
     margin-bottom: 4px;
}
 #progressTrough {
     position: relative;
     width: 400px;
     margin-bottom: 4px;
     border-radius: 2px;
     background: var(--bg-shade-max);
     padding: 0;
}
 #progressBar {
     overflow:hidden;
}
 #progressBar>div {
     height: 5px;
     background: var(--noti-success);
     border-radius: 2px;
     transform-origin: left;
     transform: translateX(-100%);
     transition: transform 0.3s;
}
 #progressPercent {
     position: absolute;
     top: -16px;
     width: 100%;
     text-align: right;
     line-height: 12px;
     vertical-align: middle;
     right: 0;
}
 #progressDescription {
     text-align: center;
}
 #flexAuditHistCont {
     overflow: auto;
}
 .reportSubType * {
     vertical-align: middle;
}
 .reportSubType span {
     margin: 0 4px;
}
 .graphHolder svg>g>g:last-child {
     pointer-events: none
}
 .graphHolder {
     overflow: hidden;
}
 .forecast td.error {
     background: var(--bg-fail-vivid);
     color: var(--fg-primary);
     font-weight: normal;
}
 .forecast td.warning {
     background: var(--bg-fail-tint);
     color: var(--fg-primary);
     font-weight: normal;
}
 .forecast tr.unfilled td.info {
     vertical-align: baseline;
     text-align: center;
}
 .forecast tr.unfilled div.ico-info {
     font-size: 96%;
}
 .forecast .rotaTable+.rotaTable {
     margin-top: 20px;
}

/* System differentiators */
 .demo-system .head,.test-system .head {
     --sys-head: var(--sys-demo);
}
 .stage-system .head,.endtoend-system .head {
     --sys-head: var(--sys-stage);
}
 .dev-system .logo:after,.demo-system .logo:after,.test-system .logo:after,.training-system .logo:after,.endtoend-system .logo:after,.stage-system .logo:after {
     position: absolute;
     right: 0;
     margin-bottom: 18px;
     font-size: 1rem;
     font-weight: bold;
     text-shadow: -1px -1px 2px var(--sys-head), 1px -1px 2px var(--sys-head), -1px 1px 2px var(--sys-head), -1px 1px 2px var(--sys-head);
}
 .dev-system .logo:after {
     content: 'DEV';
}
 .demo-system .logo:after {
     content: 'DEMO';
}
 .test-system .logo:after {
     content: 'TEST';
}
 .stage-system .logo:after {
     content: 'STAGE';
}
 .training-system .logo:after {
     content: 'TRAINING';
}
 .endtoend-system .logo:after {
     content: 'END-TO-END TEST';
}
/* Skills Matrix */
 table.skillsMatrix th[data-skillid],table.skillsMatrix th[data-sortfield] {
     cursor: pointer;
}
/* Current Running styles - requires hierarchical layout */
 .adminPaneCurrentRunning h2 {
     margin: 1em 5px 0.5em;
}
 .adminPaneCurrentRunning h3 {
     margin-left: 13px;
}
 .adminPaneCurrentRunning h4 {
     margin: 1em 21px 0.1em;
     color: var(--fg-shade-min);
     font-size: 14px;
     font-weight: normal;
}
 .adminPaneCurrentRunning .listLine0 td:first-child,.adminPaneCurrentRunning .listLine1 td:first-child,.adminPaneCurrentRunning .listHead td:first-child {
     padding-left: 29px !important;
}

/* Holiday over/under report */
 .holidaybooklimits td.over, .holidaybooklimits td.under {
     background: var(--bg-fail-tint);
}

/* Locked user account banner on employee profile */
 .employeeProfile .lockedAccount {
     display: inline-block;
     border-radius: 4px;
     background-color: var(--noti-error);
     padding: 0 4px;
     color: var(--noti-label);
     font-weight: bold;
     font-size: 150%;
}
/* Submit Overtime Requests styles */
 .adminPaneSubmitOvertimeRequest #dateform_shifts {
     width: 175px;
}
 .adminPaneSubmitOvertimeRequest .listLineNewSuggest td {
     padding: 4px 4px 0;
}
 .adminPaneSubmitOvertimeRequest .listLineNewSuggest td.plainTextCell {
     padding-top: 8px;
}
 .adminPaneSubmitOvertimeRequest .listLineNewSuggest td.buttonCell {
     padding-top: 5px;
}
 .adminPaneSubmitOvertimeRequest .listLineNewSuggest td:first-child {
     padding-left: 3px;
}
 .adminPaneSubmitOvertimeRequest .message,.adminPaneSubmitOvertimeRequest .warning {
     margin: 7px 5px;
     padding: 0;
}
/* List styles for WTR rules config page */
 #coverCheckSetup ol {
     counter-reset: item;
}
 #coverCheckSetup li ol {
     padding-left: 12px;
}
 #coverCheckSetup ol li {
     display: block;
}
 #coverCheckSetup ol li:before {
     content: counters(item, ".") ". ";
     counter-increment: item;
}
/* Styles for agency weekly request screen */
 table.agWeekly input.number {
     width: 3ex;
}
 table.agWeekly input.number.hglght {
     border: 1px solid var(--bg-fail-vivid);
     padding: 1px;
}
 table.agWeekly td.availnums {
     min-width: 4em;
     vertical-align: middle;
}
 table.agWeekly td.inputTot.number {
     padding-right: 5px;
}
/* List page filter form styles */
 form.listFilter span.formHolder {
     margin-left: 12px;
}
/* Absence Tracker styles */
 #absenceTracker tr.inactive, #absenceTracker td.inactive {
     text-decoration: line-through;
}
 #absenceTracker form#absenceForm td.formLabel {
     width: 20%;
}
 #absenceTracker form#absenceForm td.formLabel:after {
     content: ": ";
}
 #absenceTracker form#absenceForm div.autoText {
     background: var(--bg-shade-med);
     height: 17px;
     padding: 1px;
     border: 1px solid var(--bg-shade-med);
     margin: 1px 0;
     width: 100%;
     white-space: nowrap;
}
 #absenceTracker form#absenceForm div.autoText.number {
     width: 100px;
     text-align: right;
}
 #absenceTracker form#absenceForm textarea {
     width: 98%;
}
 #absenceTracker form#absenceForm tr.padTop td {
     padding-top: 8px;
}
 #absenceTracker form#absenceForm tr.padBot td {
     padding-bottom: 8px;
}
 #absenceTracker.simple form#absenceForm textarea,#absenceTracker.simple form#absenceForm div.autoText {
     width: 40ex;
}
 #absenceTracker form#absenceForm td.formLabel.mandatory,form#contactNoteEditForm td.formLabel.mandatory {
     color: var(--field-required-label);
}
 #absenceTracker form#absenceForm td.contactNoteHead,#absenceTracker form#absenceForm tr.padTop td.statusChangeHead {
     padding-top: 4px;
     border-top: 1px solid var(--keyline-heavy);
}
 #absenceTracker form#absenceForm td.contactNoteLabel,#absenceTracker form#absenceForm tr.padTop td.statusChangeLabel {
     font-weight: bold;
     text-align: right;
     padding-top: 8px;
}
#absenceTracker form#absenceForm .addContactNote,
#absenceTracker form#absenceForm .addStatusChange {
     cursor: pointer;
     margin-top: 8px;
     font-size: 90%;
}
#absenceTracker form#absenceForm .addContactNote { text-align: right; margin-right: 8px; }
 form#absenceForm .warning {
     background: var(--bg-fail-tint);
}
 #contactNoteEditForm h2 {
     margin: 0;
}
 #contactNoteEditForm textarea {
     width: 200px;
}
 #absenceTracker #contactNoteList,#absenceTracker #statusChangeList,#contactNoteEditForm #contactNoteList {
     overflow-y: auto;
     height: 292px;
     border-bottom: 1px solid var(--keyline-heavy);
}
 #contactNoteEditForm #contactNoteList {
     height: 262px;
}
 #absenceTracker form#absenceForm tr.padTop td #statusChangeList td,
 #absenceTracker #contactNoteList .contactNote,#contactNoteEditForm #contactNoteList .contactNote {
     padding: 4px;
}
 #absenceTracker #statusChangeList .statusChange:hover td {
     background: var(--bg-inform-tint);
     cursor: pointer;
}
#absenceTracker input[type="radio"],
#absenceTracker input[type="checkbox"] { vertical-align: middle; }
#absenceTracker form#absenceForm table.adminHolder { width: clamp( 600px, 80%, 1400px ); }
#absenceTracker form#absenceForm table.nopad td { padding-top: 0; padding-bottom: 0; white-space: nowrap; }
 #absenceTracker #contactNoteList .control,#contactNoteEditForm #contactNoteList .control {
     float: right;
     padding-left: 4px;
}
 #absenceTracker #contactNoteList .contactNote:hover,#contactNoteEditForm #contactNoteList .contactNote:hover {
     background: var(--bg-inform-tint);
     cursor: pointer;
}
 #absenceTracker #contactNoteList .contactNote .header,#contactNoteEditForm #contactNoteList .contactNote .header {
     font-weight: bold;
     margin-bottom: 4px;
}
 #absenceTracker td.deEmphasize {
     color: var(--fg-shade-max);
}
 #contactNoteEditForm table {
     width: 100%;
}
 #contactNoteEditForm .formLabel {
     width: auto;
     white-space: nowrap;
}
 #contactNoteEditForm #contactNoteList {
     width: 600px;
}
 #absenceChangeEditForm table {
     width: 100%;
}
 #absenceChangeEditForm .formLabel {
     width: auto;
     white-space: nowrap;
}
 #notFitFormNote {
     position: absolute;
     background: var(--bg-primary);
     color: var(--fg-primary);
     font-weight: bold;
     text-align: centre;
     border: 1px solid var(7e8a98);
}
 #notFitFormNote div {
     padding: 100px 20px 0 20px;
}
 #rtwForm table+table {
     margin-top: 8px;
}
 #rtwForm table.cols2 td {
     width: 50%;
}
 #rtwForm table.cols3-1 td:first-child {
     width: 75%;
}
 #rtwForm table.cols3-1 td:last-child {
     width: 25%;
}
 #rtwForm table.borderA,#rtwForm table.borderH,#rtwForm table.borderV {
     border-collapse: collapse;
}
 #rtwForm table.borderA td,#rtwForm table.borderH td,#rtwForm table.borderV td {
     padding: 1px 4px;
}
 #rtwForm table.borderA td,#rtwForm table.borderH td {
     border-top: 1px solid var(--keyline-heavy);
     border-bottom: 1px solid var(--keyline-heavy);
}
 #rtwForm table.borderA td,#rtwForm table.borderV td {
     border-left: 1px solid var(--keyline-heavy);
     border-right: 1px solid var(--keyline-heavy);
}
 #rtwForm table.borderN,#rtwForm table.borderN td {
     border: none;
}
 #rtwForm table#contactHistory {
     border-bottom: 1px solid var(--keyline-heavy);
}
 #rtwForm table#signatures td {
     padding: 12px;
     line-height: 200%;
}
 #rtwForm table#signatures .dateEntry {
     float: right;
     margin-right: 48px;
}
 #rtwForm table#signatures .dateSep {
     margin: 0 24px 0 48px;
}
 #rtwForm table.solidHead .listHead td {
     background: var(--bg-invert);
     color: var(--fg-invert);
     font-weight: bold;
}
 @media print {
     #rtwForm table {
         page-break-inside: avoid;
    }
}
/* Table modification notifications */
 tr.modified td.modable {
     transition: background 2s ease-in;
}
 tr.modified td.modified {
     background: var(--bg-modify-unsaved);
     transition: background .1s ease-in;
}
/* Table sorting indicators */
tr.listHead td.sortable,tr.listHead th.sortable {
     background-image:    url('/admin/ui/3/art/controls/sortable.gif');
     background-repeat:   no-repeat;
     background-position: 100% 50%;
     cursor: pointer;
     padding-right: 16px;
}
 .ag-icon {
   display:block;
   width:12px;
   height:12px;
}
.ag-header-cell-text {
  flex-grow:1;
}
 tr.listHead td.sortedA,tr.listHead th.sortedA,.ag-icon.ag-icon-asc {
     background-image: url('/admin/ui/3/art/controls/sortedA.gif');
}
 tr.listHead td.sortedD,tr.listHead th.sortedD,.ag-icon.ag-icon-desc {
     background-image: url('/admin/ui/3/art/controls/sortedD.gif');
}

/* Shift adjustment note field */
.shiftAdjustNote {
  margin-top: 12px;
}
.shiftAdjustNote textarea {
  width: 100%;
}

/* Activity Hours Report */
 .reportTable.activitiesTable th {
     font-weight: bold;
     color: var(--fg-primary);
}
 .reportTable.activitiesTable td.total {
     font-weight: bold;
}
 .reportTable.activitiesTable td.zero {
     color: var(--fg-shade-max);
}
 .reportTable.activitiesTable td.zero.total {
     color: var(--fg-shade-med);
}
 .reportTable.activitiesTable th.name,.reportTable.activitiesTable td.name {
     width: 100px;
}
 .reportTable.activitiesTable .listLine0.teamHeader td {
     background-color: var(--bg-shade-max);
     font-weight: bold;
}
 .reportTable.activitiesTable .listLine0.teamHeader td:first-child {
     padding-left: 4px;
}
/* Agency Weekly Fulfillment screen style */
 table.agWeeklyFulfil td {
     border-right: 1px solid var(--keyline-heavy);
     border-bottom: 1px solid var(--keyline-heavy);
}
 table.agWeeklyFulfil .fll._empName {
     width: 80%;
}
 table.agWeeklyFulfil ._chkbxctrl {
     float: right;
     width: 3ex;
}
 table.agWeeklyFulfil th.psuedoCtrl {
     min-width: 20em;
}
 tr.listHead ._chkbxctrl {
     margin-right: -4px;
}
 th.psuedoCtrl {
     min-width: 17em;
}
/* Agency Fulfil rejected Employee Styles */
tr._unused ._rejectedEmp, tr._reused ._rejectedEmp {
    padding-left:5px;
}
/* Editable cell tables */
 .editableHolder .editable {
     cursor: pointer;
     background: var(--bg-primary);
     border: 1px solid var(--keyline);
}
 .editableHolder .editable.editing {
     background: var(--bg-shade-med);
}
 .editableHolder .editable.saving {
     background: var(--bg-modify-unsaved);
}
 .editableHolder .editable.saved {
     background: var(--bg-primary);
     transition: background 1s ease-in;
}

/* Nested select2 dropdowns styles */
 .nestedSelectItem {
     display: block;
}
 .nestedSelectItem.categoryItem {
     font-weight: bold;
}
 .nestedSelectItem.level0 {
     padding-left: 0;
}
 .nestedSelectItem.level1 {
     padding-left: 10px;
}
 .nestedSelectItem.level2 {
     padding-left: 20px;
}
 .nestedSelectItem.level3 {
     padding-left: 30px;
}
 .nestedSelectItem.level4 {
     padding-left: 40px;
}
 .nestedSelectItem.level5 {
     padding-left: 50px;
}
/* Headcount Capacity Report */
 #headcountCapacity .sectionHead td {
     background: var(--bg-shade-max);
     font-weight: bold;
     text-align: right;
}
 #headcountCapacity .sectionLabel {
     font-weight: bold;
}
 #headcountCapacity .reportLabel {
     text-align: right;
}

/* Annual Schedule */
 #hourlyBreakdownTable td.disabled {
     background-color: var(--input-disabled-accent);
}
/* Annual Rota */
 #annualRota tr.details td {
     padding-bottom: 24px;
}
 #annualRota .rowLabel {
     font-weight: bold;
     padding-left: 24px;
     padding-right: 4px;
}
 #annualRota .colLabel {
     font-weight: bold;
     padding-right: 8px;
}
 #annualRota .subLabel {
     font-weight: bold;
     padding-right: 4px;
}
 #annualRota .negative, .reportTable td.negative {
     background: var(--noti-error);
     color: var(--noti-label);
}
 #annualRota .modeHolder {
     margin: 4px 12px;
}
 #annualRota #modeLabel {
     margin-right: 4px;
     font-weight: bold;
}
#annualRotaDay #shiftSelect select {
     min-width: 65%;
}

#annualRotaDay #plannedRevertBtn  {
     margin-left: 2px;
     vertical-align: middle;
}

/* Contracted Hours Report */
 .contractedhoursReport .reportTable td.zero {
     color: var(--fg-shade-max);
}
/* Transfer out Report */
 .transferoutReport td.zero {
     color: var(--fg-shade-max);
}
/* Resource Plan */
 #resourcePlan td.reportLabel,#resourcePlan td.reportValue {
     padding: 0 4px;
}
 #resourcePlan td.reportLabel {
     font-weight: bold;
}

/* Skills List */
 .moveSkillPanelMessage {
     padding-bottom: 5px;
}
 .inspectSkill.ico-info {
     color: var(--link-text);
     font-size: 1.5em;
}
/* IE 10+ styles */
 @media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast: none) {
     #adminScroll .adminHolder {
         width: 99%;
    }
}
/* Skill Bulk Assignment */
 .skillBulkAssignmentMain .employeeTable td {
     vertical-align: middle;
}
 .skillBulkAssignmentMain .employeeTable input[type=checkbox] {
     margin: -3px 0;
}
 .setSkillsPanelTable {
     margin: 2px 0 5px;
}
 .setSkillsPanelTable .setSkillsRow td {
     padding: 0 8px 3px 0;
}
 #searchResultDiv {
     max-height: 300px;
     overflow: auto;
}
 #selectedResultDiv {
     max-height: 300px;
     overflow: auto;
}
 .absencestats tr {
     line-height: 16px;
}
/* Daily Capacities */
 #dayCapacity .buttonRow {
     padding-top: 5px;
}
 #dayCapacity .buttonRow input[type=button] {
     color: var(--fg-invert);
     padding: 0 0.83em;
     margin-left: 8px;
}
 #dayCapacityDetail td.updating {
     background: var(--bg-modify-unsaved);
}
 #dayCapacityDetail tr.listLine0 td.updated {
     background: var(--bg-modify-saved);
     transition: background 1s ease-in;
}
 #dayCapacityDetail tr.listLine1 td.updated {
     background: var(--bg-primary);
     transition: background 1s ease-in;
}
/* Daily Allocations Report */
 .dailyAllocReport tr.listHead th,.dailyAllocReport tr.listSubHead th {
     text-align: center;
}
 .dailyAllocReport .smalblock {
     min-width: 10em;
}
 .dailyAllocReport td.employee {
     padding-left: 3px;
}
 .dailyAllocReport .gap {
     background: var(--bg-hilite);
     border: 1px solid var(--keyline);
}
 .dailyAllocReport .movert {
     background: var(--bg-warn-vivid);
}
 .dailyAllocReport .vovert {
     background: var(--bg-inform);
}
 .dailyAllocReport .train {
     background: var(--bg-pass);
}
 .dailyAllocReport .mora {
     background: var(--sched-shadow-fill);
}
 .dailyAllocReport tr.areaRow {
     border: 1px solid var(--keyline-heavy);
}
/* Rollcall Report */
 .rollcallReportMain .reportContainer .page-break {
     page-break-before: always;
}
 .rollcallReportMain .reportContainer table {
     width: 100%;
     margin-bottom: 2em;
}
 .rollcallReportMain .activitiesContainer table {
     width: 100%;
}
 .rollcallReportMain .activityContainer {
     width: 50%;
}
 .rollcallReportMain .activityContainer table {
     width: 90%;
     border: 1px solid var(--keyline);
}
 .rollcallReportMain .activitiesTable .postCell {
     width: 55%;
}
 .rollcallReportMain .activitiesTable .employeeCell {
     width: 45%;
}
 .rollcallReportMain .activitiesTable .overtimeSign {
     float: right;
}
 .rollcallReportMain .overtimeTable .employeeCell {
     width: 25%;
}
 .rollcallReportMain .overtimeTable .postCell {
     width: 30%;
}
 .rollcallReportMain .overtimeTable .startCell {
     width: 20%;
}
 .rollcallReportMain .overtimeTable .otCodeCell {
     width: 25%;
}

/* Weekly Shift Flex */
 .wkflex td, .wkflex th {
     padding: 0 2px;
 }
.wkflex th.shutdown {
  border-bottom: 1px solid var(--sched-shutdown);
  background-image: linear-gradient(180deg, var(--bg-primary) 0%, var(--sched-shutdown) 800%);
 }
 .wkflex td.slot {
     overflow: hidden;
     margin: 0 0 1px;
     padding: 0;
     color: var(--fg-primary);
}
 .wkflex .unassigned td.slot,.wkflex .unavailable td.slot {
     vertical-align: top;
}
 .wkflex #shiftplan .skill .employee,.wkflex #shiftplan .skill .missing {
     margin-left: 0;
}
 .wkflex .skill .overmanned .employee {
     background: var(--flex-surplus);
}
 .wkflex .ctrlBar {
     float: right;
}
 .wkflex.compact td.slot {
     max-width: 50px;
}
 .wkflex.compact .compactToggle {
     background: var(--bg-invert-max) !important;
     color: var(--fg-invert);
}

.wkflex .popup .listSubHead td { border-top: none; }
.wkflex #popup form > * { margin-bottom: 4px; }

.wkflex .popup td [class^="ico-"] { font-size: 1em; margin-left: 4px; }
.wkflex .popup .actions aside { margin-left: 8px; }

.wkflex .allocations .wholeday { text-align: center; position: relative; z-index: 1; }
.wkflex .allocations .wholeday:before { border-top: 2px solid var(--keyline-med); content:""; margin: 0 auto; position: absolute; top: 8px; left: 0; right: 0; bottom: 0; z-index: -1; width: 96%; }
.wkflex .allocations .wholeday span { background: var(--bg-primary); padding: 0 12px; }

.wkflex .allocations td { border-color: var(--keyline-med); }
.wkflex .allocations td.unvisible,
.wkflex .allocations td.unvisible span { background: var(--row-unvisible); }

.wkflex .seasonalHoursFilter { display:flex; justify-content: flex-end; }
.wkflex .seasonalHours { max-height: 300px; overflow-y: auto; }
.wkflex .seasonalHours .employee:hover { border: none; }

.wkflex .employee .area,.popup .employeeName .area {
    margin-left: 0.5em;
}
.wkflex .employee .ico-pinned {
    float: right;
}
.popup .daySelector {
    display: flex;
    justify-content: space-between;
}
.popup .daySelector label {
    display: block;
    font-size: 8pt;
}
.popup .daySelector .employeeFilter {
     margin: 4px;
     order: 99; /*place last*/
}
 .popup .daySelector .moveAllHolder {
     padding-left: 16px;
}
 .popup.wkFlexPop h2, .popup.wkFlexPop .note {
     margin: 0.5em 5px 0 5px;
}
 .popup.wkFlexPop .resultsHolder {
     max-height: 10em;
     overflow: auto;
}
 .popup.wkFlexPop .resultsHolder.overtime {
     max-height: 20em;
}
 .popup .employeeTable {
     width: calc( 100% - 1px );
     border-collapse: separate;
     border-spacing: 0;
}
.popup .employeeTable tr.sectionHead {
      position: sticky;
      top: 0;
      z-index: 1; /* ensure icon fonts go behind sticky head*/
      background: var(--bg-primary);
}
.popup .employeeTable tr.sectionHead td
{
     border-bottom: 1px solid var(--keyline-med);
     padding-top: 1em;
}

.popup .employeeTable tr.listLine:has(+tr.sectionHead) td {
     border-bottom: 1px solid var(--keyline-med);
}

 .popup .employeeTable td.avail {
     width: 1em;
     text-align: centre;
     white-space: nowrap;
}
 .popup .employeeTable td.avail.interest {
     background: var(--bg-inform-tint);
}
 .popup .employeeTable .employee td {
     padding: 2px;
}
 .popup .employeeTable .employee.seasonal td {
     color: var(--flex-seasonal);
     font-style: italic;
}
 .popup .employeeTable .employee.seasonal.student td {
     color:var(--flex-seasonal-student);
}
 .popup .employeeTable .employee .ico-info,.popup .employeeTable .employee.selectable td {
     cursor: pointer;
}
 .popup .actions.flexweekly span,.popup .actions.flexweekly select {
     margin: 3px;
}
 #employeeSearchResults.popup {
     border-radius: 0;
     box-shadow: 0 0 2px var(--shadow-deep);
}

/* Allocation Groups Report (Daily Shift Alloc) */
 .allocGroup {
     font-size: 10px;
}
 .section {
     clear: both;
     border-bottom: 1px solid var(--keyline-heavy);
}
 .allocGroup .section h2 {
     margin-top: 0;
     padding-top: 10px;
     padding-bottom: 0;
}
 .lineColumn h3 {
     background: var(--bg-inform-tint);
     padding: 3px;
}
 .lineColumn h3.packing {
     background: var(--bg-shade-max);
     color: var(--aside-error);
}
 .lineColumn {
     min-width: 200px;
     max-width: 19%;
     float: left;
     padding-left: 5px;
     padding-bottom: 5px;
}
 .modeList .lineColumn {
     min-width: 750px;
     max-width: 50%;
}
 .lineColumnGroup {
     float: left;
}
 .lineColumnGroup .lineColumn {
     clear: left;
}
 .skuLabel {
     padding-top: 15px;
     padding-bottom: 10px;
     overflow: hidden;
     min-height: 24px;
     max-width: 200px;
}
 .group {
     padding-top: 15px;
}
 .group .areaEmp {
     width: 100%;
     padding-top: 2px;
}
 .group .areaName, .group .coverage {
     text-align: left;
     padding-left: 2px;
     float: left;
     width: 47%;
     font-weight: bold;
}

 .group .coverage {
     width: 1ch;
}
 .group .empName {
     text-align: left;
     padding-left: 2px;
     width: 45%;
}
 .group .areaName,.group .empName {
     white-space: nowrap;
     overflow: hidden;
}
 .allocGroup .gap {
     background-color: var(--bg-hilite);
     border: 1px solid var(--keyline);
}

/* END Allocation Groups Report (Daily Shift Alloc) */

 .wkflex #employeeSearch input {
     min-height: 0;
}
 .wkflex #employeeSearch {
     clear: none;
}
 .wkflex #allocationMessge,#shiftAllocations #allocationMessge {
     padding: 7px 3px;
}
 .wkflex .listHead .ico-add {
     float: right;
     margin: 0 2px;
     cursor: pointer;
}
/* Watersheds */
 .watershed1,td.watershed1 {
     background: var(--bg-tint-watershed1);
}
 .listLine0 .watershed1 {
     filter: brightness(98%);
}
 .watershed2,td.watershed2 {
     background: var(--bg-tint-watershed2);
}
 .listLine0 .watershed2 {
     filter: brightness(98%);
}
/* SKU Based Requirement Adjustments */
 ._skuReqAdjusts ._results {
     overflow: auto;
     max-height: 250px;
}
 .shiftPubStatus,.shiftlockstat {
     float: right;
     clear: right;
     padding: 5px;
}
 .shiftPubStatus span {
     margin: 0 0.25em;
}
 #shiftplan .shiftlockstat {
     display:block;
     float: right;
}
/* Clear Allocation Popup styles */
 .clearAllocOptns label {
     font-weight: normal;
}
/* Weekly Employee Planning Report */
 .weeklyPlanningReport .overtimeSymbol {
     font-weight: bold;
     color: var(--fg-shade-min);
}
 .weeklyPlanningReport .overtimeSymbol.overtimeVolPartiallyOrNotUsed {
     color: var(--fg-primary);
}
 .weeklyPlanningReport .overtimeSymbol.overtimeVol {
     color: var(--aside-success);
}
 .weeklyPlanningReport .overtimeSymbol.overtimeNonVol {
     color: var(--aside-error);
}
/* Weekly Summary Overtime Auto-allocation results */
 .extraResults {
     max-height: 400px;
}
/* Publish pop-up */
 #publishForm label {
     white-space: nowrap;
}
/* Shift flex primary matching highlights */
 .highlightPrimary .required .hasPrimary {
     background: var(--bg-fail-tint);
}
 .highlightPrimary .required .workingPrimary {
     background: var(--bg-pass-tint);
}
/* Scrollable area in a popup */
 .popupText .scrollList {
     overflow-y: auto;
     max-height: 300px;
}

 body.obscured #menuContainer,body.obscured #topMenu>div,body.obscured #topMenu>a,body.obscured #sideMenu,body.obscured #mainArea {
     opacity: 0;
}
 body.unobscured #menuContainer,body.unobscured #topMenu>div,body.unobscured #topMenu>a,body.unobscured #sideMenu,body.unobscured #mainArea {
     opacity: 1;
}
 #topMenu>div,#topMenu>a {
     transition: opacity 1s;
 }
/* Forecast Report */
 .reportTable.forecastTable td.total {
     font-weight: bold;
}
 .reportTable.forecastTable td.labelsCol {
     width: 9%;
}
 .reportTable.forecastTable td.totalsCols {
     width: 16%;
}
/* Comment view/edit popup */
 #commentEditForm textarea {
     width: 100%;
}
 #commentEditForm .viewOnly .commentText {
     white-space: pre-line;
     padding-top: 4px;
     border-top: 1px solid var(--keyline-med);
}
 #commentEditForm .commentAttrib {
     margin-top: 8px;
     padding-top: 4px;
     border-top: 1px solid var(--keyline-med);
}
/* Absence Tracker and Comment Report */
 #absenceTracker .comment,#employeeCommentReport .comment {
     white-space: pre-line;
}
/* Employee Status Category Report */
 #empStatCatReport .reportTable .rowLabel,#empStatCatReport .reportTable .listHead td {
     white-space: nowrap;
}
 #empStatCatReport .reportTable .listHead td[colspan] {
     text-align: center;
}
 #empStatCatReport .reportTable td.number.zero {
     color: var(--fg-shade-max);
}
#empStatCatReport .subTypeSwitcher {
     margin-top: 4px;
}
#empStatCatReport .subTypeSwitcher .minorBtn.selected {
     background-color: var(--bg-invert-max);
     color: var(--fg-invert);
}
 #empStatCatReport .reportSubType span {
     margin: 0;
}
/* Raw Data Reports: Overtime Volunteers Report */
 .overtimeVolunteersTable .categoryHeader {
     margin: 0;
     display: block;
}
 .overtimeVolunteersTable .categoryItem {
     margin: 0;
     display: block;
}
 .overtimeVolunteersTable .categoryItem+.categoryHeader {
     margin-top: 7px;
}
/* Job Time Exceptions */
 #jobTimeExceptions td.formLabel:after {
     content: ":";
}
/* Info table */
 .infoTable .formLabel {
     padding-top: 2px;
}
 .infoTable .formLabel:after {
     content: ":";
}
 .infoTable .error, .infoTable .warning, .infoTable .message {
     padding-bottom: 1px;
}
/* Skills Assignment */
 #setSkillsPanelForm a.skillRowRemove {
     margin-top:20px;
}

/*Importer preview/confirm */
 .importer-list {
     display:flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: space-evenly;
     align-items: stretch;
}
 .importer-list label {
     display: block;
     padding-left: 5px;
     padding-bottom: 5px;
}
 .importer-list .item-wrapper {
     box-sizing: border-box;
     width: 15rem;
     margin-bottom: 10px;
     border: 1px solid var(--keyline-med);
     border-radius: 0;
     padding: 10px;
     cursor: pointer;
}
 .importer-list .item-wrapper:not(.blank) {
     background: url(/admin/ui/3/art/open-in-popup-table-w.png) right 10px top 10px;
     background-repeat: no-repeat;
     background-size: 22px;
}
 .importer-list .item-wrapper:hover {
     background-color: var(--keyline-med);
}
 .importer-list .item-wrapper.no-change:hover {
     background-color: var(--noti-success);
}
 .importer-list .item-wrapper.no-change {
     background: transparent;
}
 .importer-list .item-wrapper h4 {
     padding: 0 25px 0 10px;
}
 .importer-list .item-wrapper h3 {
     padding: 0 10px;
     font-size: 24px;
     margin-top: 10px;
}
 .importer-list .item-wrapper .note {
     padding: 10px 0 0;
     border-top: 1px solid;
}
 .importer-list .item-wrapper {
     background-color: var(--bg-shade-min);
}
 .importer-list .item-wrapper.blank, .importer-list .item-wrapper.blank:hover {
     color: var(--fg-shade-min);
     border: 1px solid var(--keyline-med);
     cursor: auto;
}
.importer-list .item-wrapper:not(.blank) {
     background-color: var(--noti-success);
     border: 1px solid var(--aside-success);
     color: var(--fg-invert);
}
 .importer-list .item-wrapper:not(.blank):hover {
     filter: brightness(90%);
}
 .importer-list .item-wrapper.warnings:not(.blank){
     background-color: var(--noti-warn);
     border: 1px solid var(--aside-warn);
     color: var(--fg-primary);
}
 .importer-list .item-wrapper.warnings:not(.blank):hover{
     filter: brightness(90%);
}
 .importer-list .item-wrapper.errors:not(.blank), .importer-list .item-wrapper.removals:not(.blank) {
     background-color: var(--noti-error);
     border: 1px solid var(--aside-error);
     color: var(--fg-invert);;
}
 .importer-list .item-wrapper.errors:not(.blank):hover, .importer-list .item-wrapper.removals:not(.blank):hover {
     filter: brightness(90%);
}
 .importer-list .item-wrapper.no-change {
     cursor: auto;
}


 .popup .w2ui-grid .w2ui-grid-body table {
     width: 100%;
}
 .popup .w2ui-toolbar table.w2ui-button.over .w2ui-tb-text, .popup .w2ui-toolbar table.w2ui-button .w2ui-tb-text {
     vertical-align: middle;
}
 .popup .w2ui-grid .w2ui-toolbar-search .w2ui-search-down {
     position: absolute;
     margin-top: 5px;
     margin-left: 4px;
}
 .popup .w2ui-grid .w2ui-toolbar-search .w2ui-search-clear {
     margin-top: 5px;
}
 .popup .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data .w2ui-show-children.w2ui-icon-empty {
     display: none;
}
 .popup .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data .w2ui-show-children.w2ui-icon-empty:first-of-type{
     display: inline-block;
}
 .popup .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data .w2ui-show-children.w2ui-icon-collapse
 {
     padding-right:7px;
}
 .popup .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data .w2ui-show-children.w2ui-icon-expand
 {
     padding-right:5px;
}
 .w2ui-overlay .w2ui-menu {
     width: 100%!important;
     max-width: 650px!important;
}
 .w2ui-overlay {
     width: auto;
     min-width: 320px !important;
}
 .popup .w2ui-grid .w2ui-toolbar-search .w2ui-search-clear {
     margin-top: 5px;
     display: block!important;
     margin-left: 0;
}
 .w2ui-grid > div {
     position: relative;
}
 #tb_grid-errors_toolbar_item_w2ui-reload, #tb_grid-errors_toolbar_item_w2ui-column-on-off{
     display: none;
}

 .filterControls {
     width: 100%;
     max-width: 720px;
}
/* Add colon to form labels in TDs where TABLE has specific class */
 table.editForm td.formLabel:after {
     content: ":";
}

/* Styles for sticky grid scroll elements */
 .listHead, .listHead>* {
   background-color: var(--bg-primary);
}
/* tbody frozen column cells - keep first, frozen headers change frozen column cells' z-index */
 .grid-scroll.sticky tbody td.frzn {
     z-index: 1;
     position: sticky;
     left: 0;
}
/* thead frozen headers */
 .grid-scroll.sticky thead.frzn td, .grid-scroll.sticky thead.frzn th {
     z-index: 5;
     position: sticky;
     top: 0;
}
 .grid-scroll.sticky thead.frzn td.frzn, .grid-scroll.sticky thead.frzn th.frzn {
     z-index: 6;
     left: 0;
}
/* thead frozen footers */
.grid-scroll.sticky tfoot.frzn td,
.grid-scroll.sticky tfoot.frzn th,
.grid-scroll.sticky tr.frznFoot td {
    z-index: 5;
    position: sticky;
    bottom: 0;
}
.grid-scroll.sticky tfoot.frzn td.frzn,
.grid-scroll.sticky tfoot.frzn th.frzn,
.grid-scroll.sticky tr.frznFoot td.frzn {
    z-index: 6;
    left: 0;
}
/* tbody frozen sub-headers */
.grid-scroll.sticky tbody tr.frzn td, .grid-scroll.sticky tbody tr.frzn th {
     z-index: 5;
     position: sticky;
     top: 0;
}
.grid-scroll.sticky tbody tr.frzn td.frzn, .grid-scroll.sticky tbody tr.frzn th.frzn {
     z-index: 6;
}
/* Weekly Flex frozen styles */
 .wkflex #shiftplan td.frzn {
     background: var(--bg-primary);
}
 .wkflex #shiftplan .team.frzn td {
     background: var(--bg-primary);
     top: 38px;
     font-size: 12px;
     padding-bottom: 0;
     font-weight: bold;
}
 .wkflex #shiftplan .line.frzn td {
     background: var(--bg-shade-max);
     top: 62px;
     font-size: 10px;
     border-bottom: 1px solid var(--keyline);
     height: 20px;
}
 .wkflex #shiftplan td.jobLength, .wkflex tr.listHead th:not(.frzn) {
     border-right: 1px solid var(--keyline);
}

/* Schedule Status Actuals frozen styles */
.scheduleLines td.frzn { background: var(--bg-primary); }

/* Actual Hours Completion Report */
 #acthrsCmpltn .subTypeSwitcher {
     margin-top: 4px;
}
 #acthrsCmpltn .subTypeSwitcher .minorBtn.selected {
     background-color: var(--bg-invert-max);
     color: var(--fg-invert);
}
 #acthrsCmpltn td.nve {
     background: var(--bg-fail-vivid);
}
 #acthrsCmpltn td.pve {
     background: var(--bg-pass-vivid);
}

button.biStateLabel { display: inline-block; position: relative; }

button.biStateLabel span {
  content: attr(data-bistate-def);
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  transition:300ms
}

button.biStateLabel:after {
  content: attr(data-bistate-alt);
  opacity:0;
  transition:300ms
}

button.biStateLabel.alt span { opacity:0 }
button.biStateLabel.alt::after {  opacity:1 }

.formButtons .bistate { margin-right:1em }
.bistate.notify { visibility:hidden }
.bistate.notify.active { visibility:visible }

#screenExport { position: absolute; left:-9999px; top: 0px; }

.select2-container{ display: inline-table; }
.select2-container .select2-search--inline .select2-search__field{ margin: 0; padding: 0;}
.select2-container--open .select2-dropdown--below, .ui-widget-content { border-top-left-radius: 0; border-top-right-radius: 0; border: 1px solid var(--keyline); border-top: none; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background: var(--bg-primary);}
.select2-search--dropdown .select2-search__field{ padding: 8px; }
.select2-container--default .select2-selection--single { height: auto; }
.select2-container--default .select2-selection--single .select2-selection__rendered {padding:0; line-height:var(--line-height); color: var(--field-value);}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{ font-weight: 600; color: var(--fg-shade-min); background-color: var(--select-fill); background-image: var(--select-fill); -webkit-appearance: none; appearance: none; padding: 7px 30px 7px 10px; border: 1px solid var(--keyline);  border-radius: 4px; min-height: 15px; min-width: 100px;}
.select2-container--default .select2-selection--single .select2-selection__clear{ cursor: pointer; float: right; font-weight: bold; /*right: -10px;*/ top: -2px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height: 4px;  top: 50%; right: 0; width: 28px;}
.select2-container--default .select2-selection--single .select2-selection__arrow b{ border: none; height: 4px; position: absolute; width: 17px; background-color: transparent; background-image: url(/admin/ui/3/art/arrrow-down.png); background-position: right center; background-repeat: no-repeat;}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{ background-image: url(/admin/ui/3/art/arrrow-up.png); background-position: right center; background-repeat: no-repeat;}
.select2-container--default .select2-selection--multiple{ padding-top: 6px; padding-bottom: 6px; line-height: 0.8em;}
.select2-container--default .select2-selection--multiple .select2-selection__clear{ margin-top: 2px; position: absolute; right: 15px;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{ background-color: var(--bg-shade-max); border: 0; margin: 1px 5px 0 0; padding: 1px 4px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{ color: var(--fg-shade-med); }
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single{ box-shadow:none; background-color: var(--bg-primary); background-image: var(--select-fill); border-color: var(--select-active-value); transition: 0.3s ease-in-out;}
.select2-container--default .select2-search--dropdown .select2-search__field{ background-position: right center; background-repeat: no-repeat; background-image: url(/admin/ui/3/art/search.png);}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {padding:0}
.select2-container--disabled .select2-selection .select2-selection__rendered { color: var(--input-disabled-text); }
.select2-container--disabled.select2-container--focus .select2-selection { border-color: var(--keyline); }

.ui-autocomplete {
    position: absolute;
}
.ui-autocomplete.ui-menu {
    max-height: 200px;
    overflow-y: auto;
    z-index: 101;
    list-style: none;
    padding: 0;
    margin: 0;
    outline: none;
}
.select2-results__option, .ui-menu .ui-menu-item {
    display:block;
    border:0;
    border-top: 1px solid var(--keyline);
    padding: 5px 15px;
    color: var(--fg-shade-min); font-weight: 600;
    font-size: 12px;
    text-decoration:none;
}
.ui-menu .ui-menu-item {
    margin:0;
}
.ui-autocomplete .ui-widget-content {
    border-width: 0;
}
.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option--highlighted[aria-selected],
.ui-autocomplete:not(:has(.ui-menu-item:hover)) .ui-menu-item.ui-state-focus, .ui-autocomplete .ui-menu-item:hover {
    border-width: 1px 0 0 0;
    background-color: var(--bg-shade-med);
    color: var(--select-active-value);
}
#empQuickFindForm {
    display:inline-block;
    z-index:101;
    height: 0;
    overflow:hidden;
    background: var(--nav-main-fill);
    border-radius: 0 0 3px 3px;
    transition: height 0.1s;
}

#empQuickFindForm.active {
    height: 3em;
    transition: height 0.1s;
}
input.ui-autocomplete-input.results {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
input.ui-autocomplete-input {
    transition: border-radius 0.3s;
}

ul.ui-autocomplete[hidden],
ul.ui-autocomplete:empty {
  display: block;
  opacity: 0;
  transform: scale(0);
}

.quicklook .x-all{
    text-align:center;
}

.quicklook .workSched table {
    margin:auto;
}

.quicklook .workSched td:not(:first-child) {
    border-left: 10px solid transparent;
}

/* Skill Training Styles */

.trainingSkills h2 { margin-top: 0; }
.trainingSkills .requestBox + .requestBox { margin-top: 1.5em; }

.popup .infoBar { width: 100%; border: 1px solid #dfe2e5; margin: 8px 0px 12px 0px; }
.popup .infoBar .formLabel { padding: 0 0.25em; }

.popup .loading {
     background: #ffffff url(/admin/ui/3/art/SpinnerBlack.svg) no-repeat 0 0;
     background-size: 16px;
     background-position: center center;
     padding: 15px 0;
}

/* UI Switch styles */

/* Employee Inbox Icon and Popup */
#dlm_employeeInbox .ico-count { right: 0; }

#employeeInbox { width: 380px; padding: 0; }
#employeeInbox .header { padding: 12px 20px 8px 20px; border-bottom: 1px solid var(--keyline); font-size: 20px; color: var(--header); }
#employeeInbox .items { max-height: 400px; overflow-y: auto; }
#employeeInbox .item  { padding-bottom: 12px; border-bottom: 1px solid var(--keyline); cursor: pointer; }
#employeeInbox .item.unread { background: var(--bg-inform-tint); position: relative; }
#employeeInbox .item.unread:before { content: "\2022"; position: absolute; color: var(--link-text); top: 1px; left: 6px; font-size: 200%; }
#employeeInbox .item .itemTime { float: right; white-space: nowrap; font-size: 80%; margin: 12px 20px 0 4px; }
#employeeInbox .item .subject,
#employeeInbox .item .itemBody { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#employeeInbox .item .subject  { padding: 12px  8px  8px 20px; font-weight: bold; color: var(--fg-shade-max); }
#employeeInbox .item.unread .subject  { color: var(--fg-primary); }
#employeeInbox .item .itemBody { padding:  4px 20px 0 20px; }
#employeeInbox .item .interactText { display: none; }
#employeeInbox .item.reading { cursor: default; }
#employeeInbox .item.reading .subject,
#employeeInbox .item.reading .itemBody { white-space: normal; color: var(--fg-primary); }
#employeeInbox .item.reading .interactText { display: block; text-align: right; margin: 8px 20px 0 0; }
#employeeInbox .item.reading .interactText .submitButton { margin-right: 0; }
#employeeInbox .item.nointeract .interactText { display: none; }

.subTypeSwitcher {
     margin-top: 4px;
     line-height: normal;
}
.subTypeSwitcher .minorBtn.selected {
     background-color: #808080;
     color: #ffffff;
}

/* cli-admin styles*/
#holidayplan tr.employee td.hol, td.schdDy.wrk.hol { background-color:var(--sched-holiday) }
#holidayplan tr.employee td.ovr, td.schdDy.wrk.ovr { background-color:var(--sched-extra) }
#holidayplan tr.employee td.tr , td.schdDy.wrk.tr  { background-color:var(--sched-holiday) }
#holidayplan tr.employee td.sck, td.schdDy.wrk.sck { background-color:var(--sched-off) }
#holidayplan tr.employee td.aa , td.schdDy.wrk.aa  { background-color:var(--sched-holiday) }
#holidayplan tr.employee td.ua , td.schdDy.wrk.ua  { background-color:var(--sched-off) }
#holidayplan tr.employee td.mat, td.schdDy.wrk.mat { background-color:var(--sched-holiday) }
#holidayplan tr.employee td.pat, td.schdDy.wrk.pat { background-color:var(--sched-holiday) }
#holidayplan tr.employee td.locked     {color: var(--fg-invert); background-color: var(--bg-invert-max) }


#holidayplan td.shadowRota1 div {border-bottom: 2px solid var(--sched-shadow);}

#holidayplan tr.employee td.days_weekend,
#holidayplan tr.employee td.sty_days_weekend,
#holidayplan tr.employee td.sty_0645_1445,
#holidayplan tr.employee td.sty_0640_1245,
#holidayplan tr.employee td.sty_0640_1845,
#holidayplan tr.employee td.sty_0600_1800,
#holidayplan tr.employee td.early_monthu,
#holidayplan tr.employee td.sty_early_monthu,
#holidayplan tr.employee td.early_fri,
#holidayplan tr.employee td.sty_early_fri,
#holidayplan tr.employee td.earlies,
#holidayplan tr.employee td.sty_earlies,
#holidayplan tr.employee td.days,
#holidayplan tr.employee td.sty_days,
#holidayplan tr.employee td.sty_daysfri { background-color:var(--sched-shift-early-fill) }

#holidayplan tr.employee td.late_monthu,
#holidayplan tr.employee td.sty_late_monthu,
#holidayplan tr.employee td.sty_1440_2245,
#holidayplan tr.employee td.sty_1240_1845,
#holidayplan tr.employee td.late_fri,
#holidayplan tr.employee td.sty_late_fri,
#holidayplan tr.employee td.sty_backs,
#holidayplan tr.employee td.sty_backsfri,
#holidayplan tr.employee td.lates,
#holidayplan tr.employee td.sty_lates { background-color: var(--sched-shift-late-fill) }

#holidayplan tr.employee td.nights_week,
#holidayplan tr.employee td.sty_nights_week,
#holidayplan tr.employee td.sty_2240_0645,
#holidayplan tr.employee td.sty_1840_0045,
#holidayplan tr.employee td.sty_1840_0645,
#holidayplan tr.employee td.sty_1800_0600,
#holidayplan tr.employee td.nights_weekend,
#holidayplan tr.employee td.sty_nights_weekend,
#holidayplan tr.employee td.nights,
#holidayplan tr.employee td.sty_nights,
#holidayplan tr.employee td.sty_nightsfri { background-color: var(--sched-shift-night-fill) }

.hr_06, td a.hr_06, td.hr_06.adjusted.shft, table._moduleSummaryTable td.hr_06, #holidayplan tr.employee td.hr_06,
.hr_07, td a.hr_07, td.hr_07.adjusted.shft, table._moduleSummaryTable td.hr_07, #holidayplan tr.employee td.hr_07,
.hr_08, td a.hr_08, td.hr_08.adjusted.shft, table._moduleSummaryTable td.hr_08, #holidayplan tr.employee td.hr_08,
.hr_09, td a.hr_09, td.hr_09.adjusted.shft, table._moduleSummaryTable td.hr_09, #holidayplan tr.employee td.hr_09,
.hr_10, td a.hr_10, td.hr_10.adjusted.shft, table._moduleSummaryTable td.hr_10, #holidayplan tr.employee td.hr_10,
.hr_11, td a.hr_11, td.hr_11.adjusted.shft, table._moduleSummaryTable td.hr_11, #holidayplan tr.employee td.hr_11,
.hr_12, td a.hr_12, td.hr_12.adjusted.shft, table._moduleSummaryTable td.hr_12, #holidayplan tr.employee td.hr_12,
.hr_13, td a.hr_13, td.hr_13.adjusted.shft, table._moduleSummaryTable td.hr_13, #holidayplan tr.employee td.hr_13 { background-color: var(--sched-shift-early-fill); color: var(--fg-primary); }
.hr_14, td a.hr_14, td.hr_14.adjusted.shft, table._moduleSummaryTable td.hr_14, #holidayplan tr.employee td.hr_14,
.hr_15, td a.hr_15, td.hr_15.adjusted.shft, table._moduleSummaryTable td.hr_15, #holidayplan tr.employee td.hr_15,
.hr_16, td a.hr_16, td.hr_16.adjusted.shft, table._moduleSummaryTable td.hr_16, #holidayplan tr.employee td.hr_16,
.hr_17, td a.hr_17, td.hr_17.adjusted.shft, table._moduleSummaryTable td.hr_17, #holidayplan tr.employee td.hr_17 { background-color: var(--sched-shift-late-fill); color: var(--fg-primary); }
.hr_18, td a.hr_18, td.hr_18.adjusted.shft, table._moduleSummaryTable td.hr_18, #holidayplan tr.employee td.hr_18,
.hr_19, td a.hr_19, td.hr_19.adjusted.shft, table._moduleSummaryTable td.hr_19, #holidayplan tr.employee td.hr_19,
.hr_20, td a.hr_20, td.hr_20.adjusted.shft, table._moduleSummaryTable td.hr_20, #holidayplan tr.employee td.hr_20,
.hr_21, td a.hr_21, td.hr_21.adjusted.shft, table._moduleSummaryTable td.hr_21, #holidayplan tr.employee td.hr_21,
.hr_22, td a.hr_22, td.hr_22.adjusted.shft, table._moduleSummaryTable td.hr_22, #holidayplan tr.employee td.hr_22,
.hr_23, td a.hr_23, td.hr_23.adjusted.shft, table._moduleSummaryTable td.hr_23, #holidayplan tr.employee td.hr_23,
.hr_24, td a.hr_24, td.hr_24.adjusted.shft, table._moduleSummaryTable td.hr_24, #holidayplan tr.employee td.hr_24,
.hr_00, td a.hr_00, td.hr_00.adjusted.shft, table._moduleSummaryTable td.hr_00, #holidayplan tr.employee td.hr_00,
.hr_01, td a.hr_01, td.hr_01.adjusted.shft, table._moduleSummaryTable td.hr_01, #holidayplan tr.employee td.hr_01,
.hr_02, td a.hr_02, td.hr_02.adjusted.shft, table._moduleSummaryTable td.hr_02, #holidayplan tr.employee td.hr_02,
.hr_03, td a.hr_03, td.hr_03.adjusted.shft, table._moduleSummaryTable td.hr_03, #holidayplan tr.employee td.hr_03,
.hr_04, td a.hr_04, td.hr_04.adjusted.shft, table._moduleSummaryTable td.hr_04, #holidayplan tr.employee td.hr_04,
.hr_05, td a.hr_05, td.hr_05.adjusted.shft, table._moduleSummaryTable td.hr_05, #holidayplan tr.employee td.hr_05 { background-color: var(--sched-shift-night-fill); color: var(--fg-primary); }

#holidayplan td.shadowRota1, #holidayplan td.shadowRota2, #holidayplan td.shadowRota3 {background-color: var(--sched-shadow-fill)}

td.shutdown.day, td.shutdown.shft, .annualRota td.shutdown { background: var(--sched-shutdown-fill) !important; border-color: var(--sched-shutdown) !important }


/*reports*/
.filterform label { padding-left: 10px;}
td.nwFrmLbl     { width:0; }
tr.newTotals td { border-top:1px solid var(--fg-shade-min); border-bottom:2px solid var(--fg-shade-min); color:var(--fg-shade-min); font-weight:bold; padding-right:5px; }
td.totalNum     { font-weight:bold; padding:0 4px; }

tr.plainTotals td { border-top: 1px solid var(--fg-shade-min); border-bottom: 1px solid var(--fg-shade-min); color:var(--fg-shade-min); font-weight: bold; padding-right: 5px; }
tr.periodSep   td { border-top: 2px solid var(--fg-shade-min); height: 1.2em; }

.txtNoWrap      { white-space:nowrap; }

/*shiftLockStatus.jsp */
span.timeText       { font-weight:bold; font-size:12px; clear:both; }

tr.spacer,tr.spacer td      { border:0; }

input.hglght { background: var(--bg-hilite); }

/* Emp Annual Rota */

table.figTbl td.colSep { border-right: 2px solid var(--keyline-heavy); }
table.figTbl tr.listLine0 td, table.figTbl tr.listLine1 td, table.figTbl tr.listLine0 th, table.figTbl tr.listLine1 th { border-width: 0 1px; }
.figTbl td.noborder, .figTbl th.noborder   	 	{ border:0;  }
table.figTbl .number.warn 	{ background:var(--bg-fail); }

.multpltbl { float:left; margin-left:10px; }

td.adjst { background: var(--indicator-adjust-on); }
#hourlyBreakdownTable td.time { width:50px; }

#hourlyBreakdownTable td.schdDy.shadowRota1,#hourlyBreakdownTable td.schdDy.shadowRota2,#hourlyBreakdownTable td.schdDy.shadowRota3 {
  border-left: 2px solid var(--sched-shadow); background-color: var(--sched-shadow-fill);
}

#hourlyBreakdownTable td.schdDy.wrk { background: var(--sched-shift-night-fill); }

.row-label 		{ width: 8em; min-width: 6em;  padding-left:5px; font-size:11px; }
.row-label.topWide	{ width: 15em; min-width: 12em; }

.column-label.schdDy, .listSubHead td.column-label.schdDy, .listSubHead th.column-label.schdDy, .grid-scroll td.column-label.schdDy, .grid-scroll th.column-label.schdDy { min-width:6ex; }
.column-label, .listSubHead td.column-label, .listSubHead th.column-label, .grid-scroll td.column-label, .grid-scroll th.column-label {
 text-align:center; max-width:6ex; min-width:5ex; line-height:9px; vertical-align:middle; font-size:10px; white-space:normal; }
.column-label { text-align: center; vertical-align:middle; }

.lowWide, .column-label.lowWide, .listSubHead td.column-label.lowWide, .listSubHead th.column-label.lowWide, .grid-scroll td.column-label.lowWide, .grid-scroll th.column-label.lowWide {
 max-width:7ex; min-width:6ex; }
 .topWide, .column-label.topWide, .listSubHead td.column-label.topWide, .listSubHead th.column-label.topWide, .grid-scroll td.column-label.topWide, .grid-scroll th.column-label.topWide {
 max-width:4ex; min-width:10ex; }
 .superWide, .column-label.superWide, .listSubHead td.column-label.superWide, .listSubHead th.column-label.superWide, .grid-scroll td.column-label.superWide, .grid-scroll th.column-label.superWide {
 max-width: 10em; min-width: 9em; }
tr.listSubHead td.column-label, tr.listSubHead th.column-label, tr.listSubHead td.row-label, tr.listSubHead th.row-label { text-align:center; }

td.column-label.cmmntcol, .listSubHead th.column-label.cmmntcol, .grid-scroll td.column-label.cmmntcol, .grid-scroll th.column-label.cmmntcol  { min-width:10em; }


 /* Agency Sign In Sheet */
.regstrlyout tfoot { display: none; }
td.mergeRight, th.mergeRight { border-right:none; }
td.mergeLeft, th.mergeLeft { border-left:none; }


@media print
{
  .printsmall, .printsmall table.figTbl .number, .printsmall table.figTbl input { font-size:7px; }

 /* Agency Sign In Sheet */
 table.regstrlyout { margin-top:20px; float:none !important; }
 .regstrlyout td, .regstrlyout th {-webkit-column-break-inside:avoid !important; page-break-inside:avoid !important; break-inside:avoid !important; }
 .regstrlyout td { font-size:12px; border:1px solid var(--keyline); padding:5px 6px; height:3em; }
 .regstrlyout th { font-size:12px; padding:5px 6px; height:2em; }
 .regstrlyout .maxwdth  { width:6em; }
 .regstrlyout .time { min-width:5em; }
 .regstrlyout .mergeLeft { min-width:5em; border-left:none; }
 .regstrlyout .mergeRight { border-right:none; }
 .regstrlyout .text { min-width:10em; }
 .regstrlyout .spacer { width:2em; border:none; }
 .regstrlyout thead, .regstrlyout tbody { display:block; }
 .regstrlyout .page-break { display:block; page-break-before: always; }

 .regstrlyout thead.fixed-head { display: table-header-group; }
 .regstrlyout tbody.fixed-head { display: table-row-group; }
 .regstrlyout tfoot { display: table-footer-group; }
 .regstrlyout tfoot td { border: none; }
 .regstrlyout .chkbx { float:right; border: 1px solid var(--keyline); width: 10px; height: 10px; display: block; margin-right: 4px; }

 .regstrlyout ._template{display:none;}

 .wallprnt { font-size:14px; }

 .roster    { width: auto; }
 .roster td { font-size: 16px; padding: 4px 8px; border-bottom: 1px solid var(--keyline-heavy); }

 .shftalloc.onclshft { color: var(--bg-primary); }
}

/* START End of Shift*/
.shiftEndApp tbody td { border: 1px solid var(--keyline-heavy); }
.shiftEndApp td.shiftTotal , .shiftEndApp div.shiftTotal  { background: var(--bg-pass-tint); }
.shiftEndApp td.underHours , .shiftEndApp div.underHours  { background: var(--bg-fail); }
.shiftEndApp td.overHours  , .shiftEndApp div.overHours   { background: var(--bg-warn); }
.shiftEndApp td.hasOvertime, .shiftEndApp div.hasOvertime { background: var(--bg-fail-tint); }
.shiftEndApp td.hasTransIn , .shiftEndApp div.hasTransIn  { background: var(--sched-trans-in); }
.shiftEndApp td.hasTransOut, .shiftEndApp div.hasTransOut { background: var(--sched-trans-out); }
.shiftEndApp tr.listFoot td.shiftTotal { background: none; }

.shiftEndApp tr.agency td.underHours, .shiftEndApp div.underHours  { background: var(--bg-warn); }

#endShiftLinePop table { width: 99%; }
#endShiftLinePop tbody td { border: 1px solid var(--keyline-heavy); }
/* END End of Shift*/

/*Date picker */
.date-picker {
  width: 170px;
  height: 25px;
  padding: 0;
  border: 0;
  line-height: 25px;
  padding-left: 10px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.date-picker-wrapper {
    position: absolute;
    z-index: 102;
    padding: 5px 0px;
    font-size: 12px;
    color: var(--fg-shade-max);
    background-color: var(--bg-primary);
    border: 1px solid var(--keyline);
    height: auto;
    border-radius: 4px;
    box-shadow: 0 0 3px 3px var(--shadow-hint);
}

.dp-clearfix {
  clear: both;
  height: 0;
  font-size: 0;
}

.date-picker-wrapper.inline-wrapper {
  position: relative;
  box-shadow: none;
  display: inline-block;
}

.date-picker-wrapper.single-date {
  width: auto;
}

.date-picker-wrapper.no-shortcuts {
  padding-bottom: 0;
}

.date-picker-wrapper .footer {
  font-size: 11px;
  padding-top: 3px;
}

.date-picker-wrapper b {
  color: var(--fg-shade-med);
  font-weight: 700;
}

.date-picker-wrapper a {
  color: var(--link-text);
  text-decoration: underline;
}

.date-picker-wrapper .month-name {
  text-transform: uppercase;
}

.date-picker-wrapper .select-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  text-transform: capitalize;
}

.date-picker-wrapper .select-wrapper:hover {
  text-decoration: underline;
}

.date-picker-wrapper .month-element {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    color: var(--fg-shade-min);
}

.date-picker-wrapper .select-wrapper select {
    position: absolute;
    opacity: 0.01;
    left: 0;
    top: -10px;
    margin: 0;
    outline: 0;
    border: 0;
    background: transparent;
    appearance: none;
    color: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    text-transform: uppercase;
    cursor: pointer;
}
.date-picker-wrapper .select-wrapper option {
    text-transform: capitalize;
}

.date-picker-wrapper .month-wrapper {
    border-top: 1px solid var(--keyline);
    background-color: var(--bg-primary);
    padding: 5px;
    cursor: default;
    position: relative;
    _overflow: hidden;
}

.date-picker-wrapper.no-topbar .month-wrapper {
    border-top: none;
}

.date-picker-wrapper .month-wrapper table {
  margin: auto;
}

.date-picker-wrapper .month-wrapper table.month2 {
  width: 210px;
  float: left;
}

.date-picker-wrapper .month-wrapper table th, .date-picker-wrapper .month-wrapper table td {
  vertical-align: middle;
  text-align: center;
  line-height: 14px;
  margin: 0px;
  padding: 0px;
}
.date-picker-wrapper .month-wrapper table th {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--bg-primary);
    text-transform: capitalize;
    font-weight: 400;
}
.date-picker-wrapper .month-wrapper table th .select-wrapper:hover {
     color: var(--select-active-value);
     text-decoration: underline;
}
.date-picker-wrapper .month-wrapper table tr {
  clear: both;
  overflow: hidden;
  display: block;
}
.date-picker-wrapper .month-wrapper table td, .date-picker-wrapper .month-wrapper table .week-name th {
    padding: 1px;
    text-align: center;
}
.date-picker-wrapper .month-wrapper table .week-name th {
    width: 25px;
    color: var(--fg-shade-min);
}
.date-picker-wrapper .month-wrapper table .day, .date-picker-wrapper .week-number {
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    display: block;
    margin-bottom: 1px;
    border-radius: 50%;
    padding: 5px 4px 4px;
    color: var(--fg-shade-max);
    line-height: 1.1;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
  color: var(--fg-shade-max);
  cursor: default;
  display: block;
  color: transparent!important;
  background: transparent!important;
}

.date-picker-wrapper .month-wrapper table .day.checked,  .date-picker-wrapper .month-wrapper table .day.real-today.checked{
  background-color: var(--select-active-value);
  color: var(--fg-invert);
}

.date-picker-wrapper .month-wrapper table .week-name {
  height: 20px;
  line-height: 20px;
  font-weight: 100;
  text-transform: uppercase;
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip {
  cursor: help !important;
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
  white-space: nowrap;
}

.date-picker-wrapper .time label {
  white-space: nowrap;
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
  cursor: pointer;
}

.date-picker-wrapper .month-wrapper table .day.toMonth {
  transition: background-color cubic-bezier(0.39, 0.58, 0.57, 1) 800ms;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
  background-color: var(--sched-hover);
  color: var(--fg-shade-max);
  transition: background-color linear 100ms;
}

.date-picker-wrapper .month-wrapper table .day.nextMonth,
.date-picker-wrapper .month-wrapper table .day.lastMonth {
  display: none;
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background: var(--sched-today-fill);
    color: var(--sched-today-text);
}

.date-picker-wrapper table .caption {
  height: 40px;
}
.date-picker-wrapper table .caption th {
    display: block;
    float: left;
    line-height: initial;
    width: 50%;
}
.date-picker-wrapper table .caption > th:first-of-type,
.date-picker-wrapper table .caption > th:last-of-type {
  width: 25%;
}
.date-picker-wrapper table .caption > th:first-of-type {
    text-align: left;
}
.date-picker-wrapper table .caption > th:last-of-type {
   text-align: right;
}
.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
  padding: 0 5px;
  cursor: pointer;
}

.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
  background-color: var(--bg-invert-max);
  color: var(--fg-invert);
}

.date-picker-wrapper .gap {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 100%;
  background-color: var(--noti-error);
  font-size: 0;
  line-height: 0;
  float: left;
  top: -5px;
  margin: 0 10px -10px;
  visibility: hidden;
  height: 0;
}

.date-picker-wrapper .gap .gap-lines {
  height: 100%;
  overflow: hidden;
}

.date-picker-wrapper .gap .gap-line {
  height: 15px;
  width: 15px;
  position: relative;
}

.date-picker-wrapper .gap .gap-line .gap-1 {
  z-index: 1;
  height: 0;
  border-left: 8px solid var(--bg-primary);
  border-top: 8px solid var(--keyline);
  border-bottom: 8px solid var(--keyline);
}

.date-picker-wrapper .gap .gap-line .gap-2, .date-picker-wrapper .gap .gap-line .gap-3  {
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 2;
  height: 0;
  border-left: 8px solid transparent;
  border-top: 8px solid var(--bg-primary);
}

.date-picker-wrapper .gap .gap-line .gap-3 {
  top: 8px;
}

.date-picker-wrapper .gap .gap-top-mask, .date-picker-wrapper .gap .gap-bottom-mask {
  width: 6px;
  height: 1px;
  position: absolute;
  top: -1px;
  left: 1px;
  background-color: var(--bg-shade-max);
  z-index: 3;
}

.date-picker-wrapper .gap .gap-bottom-mask {
  top: auto;
  bottom: -1px;
  left: 7px;
}

.date-picker-wrapper .selected-days {
  display: none;
}

.date-picker-wrapper .drp_top-bar {
    line-height: 1.4;
    position: relative;
    padding: 5px 90px 10px 10px;
}

.date-picker-wrapper .drp_top-bar .error-top,
.date-picker-wrapper .drp_top-bar .normal-top {
  display: none;
}

.date-picker-wrapper .drp_top-bar .default-top {
  display: block;
}

.date-picker-wrapper .drp_top-bar.error .default-top {
  display: none;
}

.date-picker-wrapper .drp_top-bar.error .error-top {
  display: block;
  color: var(--aside-error);
}

.date-picker-wrapper .drp_top-bar.normal .default-top {
  display: none;
}

.date-picker-wrapper .drp_top-bar.normal .normal-top {
  display: block;
}

.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
  color: var(--fg-shade-min);
}

.date-picker-wrapper .drp_top-bar .apply-btn {
  position: absolute;
  right: 10px;
  top: 6px;
  padding: 3px 5px;
  margin: 0;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  background: var(--btn-submit-fill);
  border: solid 1px var(--btn-submit-accent);
  color: var(--btn-label-invert);
  line-height: initial;
}

.date-picker-wrapper .drp_top-bar .apply-btn:hover {
    background: var(--btn-submit-focus-fill);
    border: 1px solid var(--btn-submit-focus-accent);
}

.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
  cursor: pointer;
  color: var(--input-disabled-text);
  border: 1px solid var(--keyline);
  background: var(--input-disabled-fill);
  font-style: normal;
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled:hover {
    background: var(--keyline);
}

.date-picker-wrapper .time {
  position: relative;
  width: 100%;
}

.date-picker-wrapper.single-month .time {
  display: block;
}

.date-picker-wrapper .time input[type=range] {
  vertical-align: middle;
  width: 129px;
  padding: 0;
  margin: 0;
  height: 20px;
}

.date-picker-wrapper .time1 {
  width: 180px;
  padding: 0 5px;
  text-align: center;
}

/*time styling*/
.time2 {
  width: 180px;
  padding: 0 5px;
  text-align: center;
}

.date-picker-wrapper .time1 {
  float: left;
}

.date-picker-wrapper .time2 {
  float: right;
}

.date-picker-wrapper .hour {
  text-align: right;
}

.minute {
  text-align: right;
}

.date-picker-wrapper .hide {
  display: none;
}

.date-picker-wrapper .date-range-length-tip {
  position: absolute;
  margin-top: -4px;
  margin-left: -8px;
  box-shadow: 0 0 3px var(--shadow-lite);
  display: none;
  background-color: var(--bg-hilite-tint);
  padding: 0 6px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 16px;
  filter: drop-shadow(0 0 3px var(--shadow-lite));
}

.date-picker-wrapper .date-range-length-tip:after {
  content: '';
  position: absolute;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--bg-hilite-tint);
  left: 50%;
  margin-left: -4px;
  bottom: -4px;
}

.date-picker-wrapper.two-months.no-gap .month1 .next,
.date-picker-wrapper.two-months.no-gap .month2 .prev {
  display: none;
}

.date-picker-wrapper .week-number {
  padding: 5px 0;
  line-height: 1;
  font-size: 12px;
  margin-bottom: 1px;
  color: var(--fg-shade-max);
  cursor: pointer;
}

.date-picker-wrapper .week-number.week-number-selected {
  color: var(--select-active-value);
  font-weight: bold;
}
/*END date picker*/

/* SHift Audit Report sub-headings */
#shiftAuditReport .frznL1 td { top: 23px; }
#shiftAuditReport .frznL2 td { top: 45px; }

/* Leave and Status Reports List Mode */
.statusListReport .frznl1 td, .statusListReport .frznl1 th { top:  0px; }
.statusListReport .frznl2 td, .statusListReport .frznl2 th { top: 21px; }
/* Control block for list screens */
.controlBlock { position: sticky; right: 0; width: 1%; vertical-align: middle; }
.controls     { display: grid; grid-auto-rows: minmax(18px, auto); }
.controls.s1  { grid-template-columns: repeat(1, 20px); }
.controls.s2  { grid-template-columns: repeat(2, 20px); }
.controls.s3  { grid-template-columns: repeat(3, 20px); }
.controls.s4  { grid-template-columns: repeat(4, 20px); }
.controls.s5  { grid-template-columns: repeat(5, 20px); }
.controls.s6  { grid-template-columns: repeat(6, 20px); }
.controls.s7  { grid-template-columns: repeat(7, 20px); }
.controls.s8  { grid-template-columns: repeat(8, 20px); }
.controls .p1 { grid-column: 1; }
.controls .p2 { grid-column: 2; }
.controls .p3 { grid-column: 3; }
.controls .p4 { grid-column: 4; }
.controls .p5 { grid-column: 5; }
.controls .p6 { grid-column: 6; }
.controls .p7 { grid-column: 7; }
.controls .p8 { grid-column: 8; }

/* New Plan Acceptance */
.planAcceptance tbody tr.frzn.l0 td { top:  0px; }
.planAcceptance tbody tr.frzn.l1 td { top: 59px; }
.planAcceptance tbody tr.frzn.l1b td { top: 80px; }
.planAcceptance tbody tr.frzn.l2 td { top: 80px; }
.planAcceptance tbody tr.frzn.l3 td { top: 98px; }

.planAcceptance .dataLine td:first-child { padding-left: 2em; }
.planAcceptance .dataLine:hover td { background-color: var(--row-focus-fill); color: var(--row-focus-text); }
.planAcceptance .reqDisplay { width: 20%; }


/* Ops Running Actual Schedule */
.opsRunningActual .summary { display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 12px; }
.opsRunningActual .summary .adminHolder { width: auto; }

.opsRunningActual td.zero { color: var(--fg-shade-max); }

.addButton .ico-roundel { margin-top: 0.05rem; }

/* SKU Crewing List Screen */
.skuCrewing ::placeholder { color: var(--fg-primary); }

/* Ops Run 'inspector' */
#opsRunInspector .opsRun, .shiftplan .opsRun {
     position: relative;
     box-sizing: border-box;
     background-color: var(--bg-shade-med);
     border: 1px solid var(--keyline);
     border-radius: 4px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     transition: border-color 0.3s, background-colour 0.3s;
}
.shiftplan .opsRun {
     float:left;
}
#opsRunInspector .opsRun:hover, .shiftplan .opsRun:hover {
    overflow: visible;
    color: var(--fg-primary);
}
#opsRunInspector .opsRun:hover {
  text-shadow: 0 1px 0 var(--fg-invert), 1px 0 0 var(--fg-invert), 0 -1px 0 var(--fg-invert), -1px 0 0 var(--fg-invert);
}
#opsRunInspector .opsRun.precede, .shiftplan .opsRun.precede {
  padding-left: 1em;
}
#opsRunInspector .opsRun.precede::before, .shiftplan .opsRun.precede::before {
  content: "\00AB";
  position: absolute;
  left: 0;
}
#opsRunInspector .opsRun.succeed, .shiftplan .opsRun.succeed {
  padding-right: 1em;
}
#opsRunInspector .opsRun.succeed::after, .shiftplan .opsRun.succeed::after {
  content: "\00BB";
  position: absolute;
  right: 0;
}
#opsRunInspector .opsRun.runOther, .shiftplan .opsRun.runOther {
     background-color: var(--sched-info-fill);
     color: var(--sched-info-text);
}
.shiftplan .opsRunDisplay td {
  background-color: var(--bg-shade-min);
}

/* General purpose repprt table to replace .reportTable */
.reportDisplay { margin: 12px 0; border-collapse: separate; }

.reportDisplay thead th, .reportDisplay thead td,
.reportDisplay tbody th.rowLabel, .reportDisplay tbody td.rowLabel,
.reportDisplay tbody.header th, .reportDisplay tbody.header td,
.reportDisplay tbody.subHead th, .reportDisplay tbody.subhead td,
.reportDisplay tbody.inlineHead th, .reportDisplay tbody.inlineHead td { font-weight: bold; }

.reportDisplay thead th, .reportDisplay thead td,
.reportDisplay tbody.header th, .reportDisplay tbody.header td,
.reportDisplay tbody.subHead th, .reportDisplay tbody.subhead td,
.reportDisplay tbody.inlineHead th, .reportDisplay tbody.inlineHead td { border-bottom: 1px solid var(--keyline);  }

.reportDisplay thead th.noBdrB, .reportDisplay thead td.noBdrB,
.reportDisplay tbody.header th.noBdrB, .reportDisplay tbody.header td.noBdrB,
.reportDisplay tbody.subHead th.noBdrB, .reportDisplay tbody.subhead td.noBdrB,
.reportDisplay tbody.inlineHead th.noBdrB, .reportDisplay tbody.inlineHead td.noBdrB { border-bottom: none;  }

.reportDisplay .reportRow:nth-child(odd)  td { background-color: var(--row-odd);  }
.reportDisplay .reportRow:nth-child(even) td { background-color: var(--row-even); }

.reportDisplay tr.spacer     td { height: 16px; border: none;}
.reportDisplay tr.highSpacer td { height: 32px; border: none;}

.reportDisplay td.zero { color: var(--fg-shade-max); }

/* Shift List Editing */
#shiftList.extending .listHead th { background-color: var(--bg-inform-tint); }

/* noUISlider overwriting */
.people-plan .noUi-target { background: var(--bg-shade-max); border: none; margin: 40px 1em 28px 1em; }
.people-plan .noUi-horizontal { height: 9px; }
.people-plan .noUi-connect { background: var(--datepick-active); }
.people-plan .noUi-handle { cursor: col-resize; }
.people-plan .noUi-tooltip { border-radius: 4px; background: var(--fg-shade-min); padding: 6px; font-size: 11px; color: var(--fg-invert); }
.people-plan .noUi-handle:focus .noUi-tooltip { background: var(--bg-primary); color: var(--fg-primary); }
.people-plan .noUi-horizontal .noUi-handle { width: 8px; height: 16px; border: 1px solid var(--keyline-med); background-image: var(--select-fill); right: 0; }
.people-plan .noUi-handle::before,
.people-plan .noUi-handle::after { left: 0; }
.people-plan .noUi-pips-horizontal { padding: 0 0 12px 0; height: 30px; }
.people-plan .noUi-value { font-size: 0.8rem; }
.people-plan .noUi-marker-horizontal.noUi-marker-large { width: 1px; height: 8px; }

/* Planner pop-up */
.holidayPopup .plannerNotes textarea { height: 80px; }


/* Date and Shift combo styles */
.dateAndShiftType .shiftType,
.dateAndShiftType .allDayOption { margin-left: 12px; }
.dateAndShiftType .allDayOption span { display: inline; margin-left: 4px; }


/* Update Tabulator Styles */
.people-plan .tabulator,
.people-plan .tabulator .tabulator-header,
.people-plan .tabulator-row .tabulator-cell,
.people-plan .tabulator .tabulator-header .tabulator-col { border-color: var(--keyline); }

.people-plan .tabulator { background-color: var(--bg-primary); }

.people-plan .tabulator .tabulator-header { min-height: 21px; font-weight: 600; }
.people-plan .tabulator .tabulator-header .tabulator-col .tabulator-header-filter { margin-bottom: 2px; }

.people-plan .tabulator .tabulator-header,
.people-plan .tabulator .tabulator-header .tabulator-col { background-color: var(--bg-primary); color: var(--fg-shade-med); }
.people-plan .tabulator-row .tabulator-cell,
.people-plan .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 0 8px; }
.people-plan .tabulator-row { min-height: auto; }

.people-plan .tabulator-row.tabulator-row-odd  { background-color: var(--row-odd); }
.people-plan .tabulator-row.tabulator-row-even { background-color: var(--row-even); }
.people-plan .tabulator-row.state-warn { background-color: var(--bg-warn); color: var(--fg-primary); }

.people-plan .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button { padding: 0; margin: 4px 4px 0 0; }
.people-plan .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button .ico-filter { font-size: 75%; margin: 4px 4px 0 0; }

.people-plan .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents { color: var(--noti-success); }

@media (hover: hover) and (pointer: fine) {
  .people-plan .tabulator-row.tabulator-selectable:hover { color: var(--row-focus-text); background-color: var(--row-focus-fill); }
  .people-plan .tabulator-edit-list .tabulator-edit-list-item:hover { background: var(--nav-main-fill); }
}

/* ! THIS BLOCK MUST COME LAST ! */
body>img[src$="/favicon.ico"] { display: none; }

.displayNone, .togldDefOff, *.togldDefOff { display: none; }
.displayBlock, .togldDefOn { display: block; }
span.togldDefOn { display: inline; }
/* ! NO MORE RULES ! */