/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* vue template */
[v-cloak] {
  display: none;
}

/* variables */
:root {
  --disabled-color: lightgray;
  --success-subtle-color: #ccffcc;
  --input-border-color: lightgray;
  --input-focus-background-color: #FFF6D0;
  --weekend-background-color: #d2d6fe50;
  --holiday-background-color: #fec9d550;
}

/* default styles */
html {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  background: white;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px;
}

input,select,textarea {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
}

  input:invalid {
    border: 1px solid red !important;
  }

table {
  padding: 0;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px;
}

td {
  padding: 0;
  margin: 0;
}

iframe {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

big {
  font-size: 120%;
}

a:link {
  color: #00008b;
}

a:visited {
  color: #00008b;
}

a:hover {
  color: blue;
}

a.disabled {
  color:lightgray;
  cursor:default;
}

form {
  margin: 0;
  padding: 0;
}

label {
  margin-right: .4em;
}

input, textarea, select, button:not(.ui-widget) {
  margin: 1px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

  input[type=text], input[type=password] {
    height: 1.65em;
    padding: 1px 2px 2px 2px;
    border: 1px solid black;
  }

  input[type=button], input[type=submit], button:not(.ui-widget) {
    height: 1.8em;
    min-width: 6em;
  }

  input[type=checkbox], input[type=radio] {
    height: 1.2em;
    width: 1.2em;
    vertical-align: middle;
  }

  input::placeholder {
    color: #b3b6b0;
  }

select {
  height: 1.65em;
  border: 1px solid black;
}

textarea {
  border: 1px solid black;
}

/* input colors */
input[type=text], input[type=password], textarea, select {
  border-color: lightgray;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
  background-color: #FFF6D0;
  border-color: lightgray;
}

  input[type=text][disabled], input[type=password][disabled], textarea[disabled], select[disabled] {
    background-color: lightgray;
  }

  input[type=text][readonly], input[type=password][readonly], textarea[readonly] {
    background-color: #e8e8e8;
  }

span.inputHint {
  padding:2px;
  color:#BBBBBB;
}

/* jquery-ui overrides */

.ui-autocomplete {
  background: #E0F0FF;
  font-size: 11px;
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.ui-selectmenu-menu .ui-menu {
  max-height: 400px;
}

.ui-menu {
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  text-align: left;
}

.ui-menu-divider hr {
  height: 0px!important;
}

.ui-menu-item a {
  height: 1.3em;
  padding: 0;
  margin: 0;
}

/* datepicker drop shadow */
.ui-datepicker {
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* inputmultiselect overrides */
.jquery_inputmultiselect_input {
  font-family:  'Segoe UI', Tahoma, sans-serif;
}

.jquery_inputmultiselect_options_selected {
  overflow: hidden;
}

.jquery_inputmultiselect_options_unselected {
  height: 22em;
}

.jquery_inputmultiselect_options_item {
  white-space: nowrap;
}

.jquery_inputmultiselect_options_item input[type=checkbox] {
  margin-right: .3em;
}

.jquery_inputmultiselect_options_item_hovered {
  border-color:#FFE070;
  color:black;
  background-color:#FFE070;
}

.jquery_inputmultiselect_options_selected_item {
  border-color:#c0dcff;
  color:black;
  background-color:#c0dcff;
}

/* invalid input */
.invalid { color:red; }
input.invalid {	border:1px solid red;	padding:2px 1px; }
  input.invalid::placeholder {
    color: #fca2a2;
  }

/* error input */
input.error { color:red;	border:1px solid red;	padding:2px 1px; }

/* delete button */
input.delete {
  display: inline-block;
  min-width: 18px;
  width: 18px;
  height: 18px;
  border: 0;
  background-color: transparent;
  background-image: url('../images/del.png');
  background-repeat: no-repeat;
  background-position:center center;
  cursor: pointer;
  cursor: hand;
}

/* special highlights */
span.err { display:block; padding:2px 4px; background:#ffcccc; color:black; border:1px solid #b3b6b0; margin:2px 0px; }
span.info { display:block; padding:2px 4px; background:#FFFFCC; color:black; border:1px solid #b3b6b0; margin:2px 0px; }
span.explanation { display:inline-block; margin:0 .25em 0 .25em; width:16px; height:16px; vertical-align:bottom; background:url('../images/info.png'); background-repeat:no-repeat; }
span.warning { display:inline-block; margin:0 .25em 0 .25em; width:16px; height:16px; vertical-align:bottom; background:url('../images/warning.png'); background-repeat:no-repeat; }
span.mandatory { color:red; margin-left:.3em; }

/* notification */
.notification-container{
  background:transparent;
  margin-top:.4em;
}

.notification {
  margin:.1em;
  padding:.4em .8em .4em 2em;
  background-color: #e8f5ff;
  background-image: url(../images/info.png);
  background-repeat: no-repeat;
  background-position-x:.5em;
  background-position-y:center;
  color:#0066b0;
  border:1px solid #0066b0;
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.notification-warning {
  background-color: #fffbd1;
  background-image: url(../images/warning.png);
  color:#c30054;
  border:1px solid #c30054;
}

.notification-error {
  background-color: #fffbd1;
  background-image: url(../images/error.png);
  color:#c30054;
  border:1px solid #c30054;
}

/* input form */
.form {
}

  .form hr {
    border: 0;
    height: 1px;
    background: #0094ff;
  }

tr.form-header td, div.form-header {
  margin: 0;
  padding: 0px 4px 2px 0px;
  border-bottom: 1px solid #0094ff;
  color: #0094ff;
  font-size: 130%;
  font-weight: 200;
}

div.form-header {
  margin-bottom: .25em;
}

tr.form-header + tr > td {
  padding-top: .25em;
}

tr.form-header2 td, div.form-header2 {
  margin: 0;
  padding: 0px 4px 2px 0px;
  border-bottom: 1px solid #0094ff;
  color: #0094ff;
}

div.form-header2 {
  margin-bottom: .25em;
}

tr.form-header2 + tr > td {
  padding-top: .25em;
}

tr.form-section-header td {
  margin: 0;
  padding: .3em 0 .1em 0;
  border-bottom: 1px solid #0094ff;
  color: #0094ff;
  font-size: 90%;
  font-weight: 400;
}

  tr.form-section-header td ~ td {
    padding-left: 4px;
  }

tr.form-section-header + tr > td {
  padding-top: .25em;
}

tr.form-highlight {
  font-weight: bold;
}

tr.form-list-header td {
  border-bottom: 1px solid #0094ff;
  color: #0094ff;
  padding-right: 2px;
}

tr.form-list-header + tr > td {
  padding-top: .25em;
}

tr.form-list-row td {
  padding-right: 2px;
}

table.form .ui-tabs {
  border: none;
  margin-bottom:.2em;
}

  table.form .ui-tabs .ui-tabs-nav {
    border-left: none;
    border-top: none;
    border-right: none;
    background-color: transparent;
    background-image: none;
  }

  table.form .ui-tabs .ui-tabs-anchor {
    padding: 3px 14px;
  }

/* draggable item */
.draggable {
  display: block;
  padding: .30em;
  width: 8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 .25em .25em;
  cursor: pointer;
  cursor: hand;
}

/* report input form */
.report {
  border:1px solid lightgray;
  display:inline-block;
  width:25em;
  height:15em;
  margin-right:1em;
  margin-bottom:1em;
  padding:.2em .5em;
}

  .report .form {
    width:100%;
  }

/* pane2 */
.pane2Head { border: #b3b6b0 1px solid; border-bottom:0; margin:0px 5px; margin-top:10px; padding:2px 6px; overflow:hidden; background:#e3e3e3; color:#6c53b8; font-weight:bold; }
.pane2 { margin:0px 5px; padding:4px 6px; padding-top:6px; background:#f8f8f0; border: #b3b6b0 1px solid; overflow:hidden; }
.pane2 p { margin-top:4px; }

/* tooltip */
.tooltip {
  padding:0; 
  margin:0;
  background-color:#fff7da;
  border:1px solid #CCCC99;
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
} 
.tooltip-header { padding:4px 4px; overflow:hidden; font-weight:bold; }
.tooltip-content { position:relative; padding:2px 6px 4px 6px; overflow:hidden; }

/* splitters */
.splitterH { font-size:1px; height:8px; cursor:row-resize; }
.splitterH:hover { background:#FFE070; }
  .splitterH.drag, .splitterH.drag:hover { background:gray; }
.splitterV { font-size:1px; width:8px; cursor:col-resize; }
.splitterV:hover { background:#FFE070; }
  .splitterV.drag, .splitterV.drag:hover { background:gray; }

/* page */
.page {
}

.page-header {
  color: #0094ff;
  font-size: 150%;
  font-weight: 200;
  margin-bottom: .25em;
}

.page-tabs {
  margin-bottom:.25em;
}

  .page-tabs .ui-tabs {
    padding-top:0;
    border: none;
  }

    .page-tabs .ui-tabs .ui-tabs-nav {
      padding-top:0;
      border-left: none;
      border-top: none;
      border-right: none;
      background-color: transparent;
      background-image: none;
    }

    .page-tabs .ui-tabs .ui-tabs-anchor {
      padding: 3px 14px;
    }

.page-content {
  padding:.2em;
}

/* popup */
.popup-content {
  padding:1em;
}

/* grid */
.gridContainer {
  border: lightgray 1px solid;
  margin: 0;
  padding: 0;
}

.gridHeaderContainer {
}

.gridHeader {
}

  .gridHeader td {
    height: 1.8em;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    background-color: whitesmoke;
    cursor:pointer;
    cursor:hand;
  }

  .gridHeader td:hover {
    background-color: #FFE070;
  }

.gridHeaderStatus {
  width:1.8em;
  background: url('../images/grid.png') repeat-x 0px 0px;
}

.gridHeaderText {
  padding-right:4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  .gridHeaderAsc ~ .gridHeaderText, .gridHeaderDesc ~ .gridHeaderText {
    padding-right:14px;
  }

.gridHeaderAsc {
  width:12px;
  height:100%;
  background: url('../images/grid.png') repeat-x -1px -24px;
}

.gridHeaderDesc {
  width:12px;
  height:100%;
  background: url('../images/grid.png') repeat-x -1px -48px;
}

.gridHeaderResize {
  width:6px;
  height:100%;
  cursor:col-resize;
}

.gridLinesContainer {
}

.gridLines {
  background: white;
}

.gridLines tr:hover {
  background-color:#FFE070;
}

.gridLineActive {
  background-color: #c0dcff;
}

.gridLineStatus {
  width:1.8em;
}

.gridLines td {
  height: 1.6em;
  border-right: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  cursor: default;
  overflow:hidden;
  text-overflow:ellipsis;
}

  .gridLines td.delete {
    background-image: url('../images/del.png');
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    cursor: hand;
  }

  .gridLines td p {
    display: inline;
    margin-left:2px;
    white-space: nowrap;
  }

.gridSetupTitle td {
  padding:.2em;
  color: #0094ff;
  font-size:130%;
}

.gridSetupHeader td {
  border-right: 1px solid lightgray;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  background-color:whitesmoke;
  height: 1.8em;
}

.gridSetupContent td {
  border-bottom: 1px solid whitesmoke;
  height: 1.6em;
}

.gridSetupFooter td {
  height: 2.5em;
  border-top: 1px solid #0094ff;
}

.gridMenu {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  background: white;
  text-align: left;
}

.gridMenu {
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

  .gridMenu li {
    margin: 0;
    padding: 0;
  }

    .gridMenu li a {
      display: block;
      padding: 3px 9px;
      color: black;
      text-decoration: none;
      white-space: nowrap;
    }

      .gridMenu li a:hover {
        background: #FFE070;
      }

    .gridMenu li.menuitem-separator {
      border-top: 1px solid darkgray;
      margin-top: 1em;
      font-size: .3em;
      line-height: 1em;
    }

/* employee editor */
.permitted-term {
  display: block;
  width: 44em;
  white-space: nowrap;
}

.permitted-term-name {
  display:inline-block;
  width: 18em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permitted-term-door {
  display:inline-block;
  width: 13em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permitted-term-door-disabled {
  color: lightgray;
}

/* work time calendar editor */
table.wtc { border:1px solid gray; border-collapse:collapse; }
table.wtc td { padding:0.6em; text-align:center; } 
td.wtcHeader { border-bottom:1px solid gray; color:#0094ff; }
td.wtcActive { border:1px solid gray; cursor:pointer; cursor:hand; background:#f5f5f5; }

/* attendance editor */
input.pass { border:1px solid #999999; padding:1px 2px 2px 2px; text-align:right; }
input.passError { background:#ffcccc; }
input.passReadonly { background:lightgray; }
input.passApprovalPending { background: #FFE070; }
input.passAuto { background:#ccffcc; }
input.passAdded { background:#ddf4ff; }
input.passChanged { color:#3300ff; background:white; }
input.passImported { background:#e5dcff; }
input.passOut { font-weight:bold; }
.gridLines .weekend { background-color:#e6e8ff; }
.gridLines .holiday { background-color:#ffe0e7; }
.gridLines td .activity-error {
  background-color: #ffcccc;
  border-radius: 3px;
  padding: 0 .2em;
}

/* order editor */
.gridLines .orderItemMain {
  background-color: #C0D0FF;
} 
.gridLines .orderItemAssembly { background-color:#D0E0FF; } 
.gridLines .orderItemStuff { background-color:#FFF0D0; } 
.gridLines .orderItemProduct { background-color:#FFE0D0; } 

/* attendance calendar */
.acal {
  overflow:hidden;
}

.acal-header {
  border-bottom: 1px solid #0094ff;
  color: #0094ff;
}

.acal-header-cell {
  height: 1.8em;
}

.acal-header-employee {
  width: 16em;
}

.acal-header-days {
}

  .acal-header-days .acal-header-cell {
    width: 2em;
    text-align: center;
  }

.acal-data {
}

.acal-data-cell {
  height: 1.8em;
  overflow: hidden;
}

.acal-data-cell-weekend {
  background-color: var(--weekend-background-color);
}

.acal-data-cell-holiday {
  background-color: var(--holiday-background-color);
}

  .acal-data .acal-data-row:nth-child(even) {
    background-color: whitesmoke;
  }

.acal-data-employee {
  width: 16em;
  border-right: 1px solid #0094ff;
}

  .acal-data-employee .acal-data-cell {
    width: 100%;
  }

.acal-data-days {

}

  .acal-data-days .acal-data-cell {
    width: 2em;
    border-right: 1px solid lightgray;
  }

.acal-data-pass {
  background-color: #0094ff;
  opacity: 0.4;
  height: 1.4em;
  margin-top: .2em;
}

.acal-data-pass-active {
  opacity: 1.0;
  cursor: pointer;
  cursor: hand;
}

.acal-data-pass-apvl {
  background-color: #FFE070;
}

/* shift planner */
.planner {
  --planner-cell-width: 5em;
  --planner-row-height: 2.9em;
  --planner-row-group-height: 1.6em;
}

.planner {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.planner-table {
  display: inline-block;
}

.planner-row {
  display: flex;
  flex-direction: row;
}

.planner-row-group {
  font-weight: bold;
  color: dimgray;
  border-bottom: 1px solid dimgray;
}

.planner-cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 0 3px;
}

.planner-cell-center {
  text-align: center;
}

.planner-cell-right {
  text-align: right;
}

.planner-cell-success {
  color: green;
}

.planner-cell-error {
  color: red;
}

.planner-cell-1 {
  width: 3.4em;
}

.planner-cell-2 {
  width: 6.8em;
}

.planner-cell-3 {
  width: 10.2em;
}

.planner-cell-4 {
  width: 13.6em;
}

.planner-cell input, .planner-cell select {
  width: 100%;
  border: none;
  margin: 0;
}

  .planner-cell input:not(:focus), .planner-cell select:not(:focus) {
    background-color: transparent;
  }

  .planner-cell input:hover, .planner-cell select:hover {
    border:1px solid var(--input-border-color);
    background-color: var(--input-focus-background-color);
  }

.planner-cell-header {
  width: 100%;
  font-size: 85%;
  height: 1.5em;
  line-height: 1.5em;
  padding: 0;
  overflow: hidden;
  color: gray;
}

.planner-header {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  overflow: hidden;
  width: 100%;
  border-bottom: 1px solid #0094ff;
  color: #0094ff;
}

.planner-header-left {
  overflow: hidden;
  flex-shrink: 0;
}

.planner-header-data {
  overflow: hidden;
}

  .planner-header-data .planner-cell {
    width: var(--planner-cell-width);
  }

.planner-header-right {
  overflow: hidden;
  flex-shrink: 0;
}

  .planner-header-right .planner-cell {
    width: 4em;
  }

.planner-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
}

.planner-content-left {
  overflow: hidden;
  flex-shrink: 0;
  border-right: 1px solid #0094ff;
}

  .planner-content-left .planner-row:nth-child(even) .planner-cell {
    background-color: whitesmoke;
  }

  .planner-content-left .planner-cell {
    height: var(--planner-row-height);
  }

  .planner-content-left .planner-row-group .planner-cell {
    height: var(--planner-row-group-height);
  }

.planner-data {
  min-height: 0px;
  flex-shrink: 1;
  overflow: auto;
}
    .planner-data .planner-row:nth-child(even) {
      background-color: whitesmoke;
    }

  .planner-data .planner-cell {
    width: var(--planner-cell-width);
    height: var(--planner-row-height);
    padding: 1px;
    border-right: 1px solid lightgray;
  }

    .planner-data .planner-cell[data-day-type="weekend"] {
      background-color: rgba(210, 214, 254, 0.44);
    }

    .planner-data .planner-cell[data-day-type="holiday"] {
      background-color: var(--holiday-background-color);
    }

  .planner-data .planner-row-group .planner-cell {
    height: var(--planner-row-group-height);
    width: 100%;
  }

  .planner-data .planner-cell input {
    height: 1.5em;
    text-align: center;
  }

.planner-content-right {
  overflow: hidden;
  flex-shrink: 0;
  border-left: 1px solid #0094ff;
}

  .planner-content-right .planner-row:nth-child(even) .planner-cell {
    background-color: whitesmoke;
    
  }

  .planner-content-right .planner-cell {
    width: 4em;
    height: var(--planner-row-height);
  }

  .planner-content-right .planner-row-group .planner-cell {
    height: var(--planner-row-group-height);
  }

.planner-controls {
  border-top: 1px solid #0094ff;
  padding: .4em 0;
}

/* presence */
.presence-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-content: flex-start;
  flex-flow: column wrap;
  gap: .5em;
}

.presence-panel {
  font-size: 120%;
  width: 18em;
  height: 2em;
  padding: .25em .5em;
  padding-right: 2em;
  border: 1px solid var(--input-border-color);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  background-repeat: no-repeat;
  background-position: right .5em center;
}

  .presence-panel.present {
    background-image: url('../images/term_on.png');
    background-color: var(--success-subtle-color);
  }

  .presence-panel.missing {
    background-image: url('../images/term_off.png');
  }

/* menu control */
ul .menupopup { position:absolute; margin:0; padding:0; overflow:hidden; border:1px solid black; background:whitesmoke; text-align:left; }
ul.menupopup {
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
ul.menupopup li { margin:0; padding:0; }
ul.menupopup li a { display:block; padding:3px 9px; color:black; text-decoration:none; white-space:nowrap; }
ul.menupopup li a:hover { background:#FFE070; }
ul.menupopup li.menuitem-separator { border-top:1px solid darkgray; margin-top:1em; font-size:.3em; line-height:1em; }

/* main page */
#mainOutdatedBrowser {
  padding:.3em;
  font-size:12px;
  background:#FFE070;
  text-align:center;
}

#mainHeader {
  overflow: hidden;
  color:white;
  background-color: #404040;
  border-bottom: 1px solid lightgray;
}

  #mainHeader input[type=button], #mainHeader input[type=submit] {
    height:1.8em;
    margin-top:-1px; /* HACK */
  }

  #mainHeader .ui-selectmenu-button {
    margin:.2em 0 0 0;
    padding:.1em;
    color:white;
    font-size:90%;
    background:transparent;
    border:1px solid gray;
  }

  #mainHeader .ui-selectmenu-button.ui-state-hover {
    color:black;
    background:#FFE070;
  }

  #mainHeader .ui-selectmenu-button .ui-icon {
    padding:0;
    margin:0;
    top:0;
    right:0;
  }

  #mainHeader .ui-selectmenu-button .ui-selectmenu-text {
    padding:0 .3em 0 .3em;
    margin:0;
  }

  #mainHeader .section-left {
    float:left;
    margin:.2em .2em 0 .2em;
  }

  #mainHeader .section-right {
    float:right;
    margin:.2em .2em 0 .6em;
  }

  #mainHeader .section-right label {
    font-size:80%;
  }

#mainUserDetail {
  top:.2em;
  right:.2em;
  z-index:1;
  background:white;
  color:black;
  padding:.4em;
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

#mainSync {
  width: 40px;
  height: 40px;
  background-image: url(../images/import-inactive.png);
  background-repeat: no-repeat;
  background-position: 6px;
  background-size: 24px;
}

  #mainSync #mainSyncStatus {
    right: 3px;
    bottom: 3px;
    width: 16px;
    height: 16px;
    background-image: url(../images/help.png);
  }

  #mainSync.running {
    background-image:url(../images/import-active.png);
  }

  #mainSync.completed #mainSyncStatus { background-image: url(../images/ok.png); }
  #mainSync.running #mainSyncStatus { background-image: url(../images/play.png); }
  #mainSync.error #mainSyncStatus { background-image: url(../images/error.png); }
  #mainSync.warning #mainSyncStatus { background-image: url(../images/warning.png);}

#mainSyncDetail {
  top:.2em;
  right:.2em;
  z-index:1;
  background:white;
  color:black;
  padding:.4em;
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

#mainMenu {
  float:left;
  width: 13.2em;
  background-color: whitesmoke;
  border-right: 1px solid lightgray;
  color: black;
  min-height:39em;
}

  #mainMenu hr {
    border: 0;
    height: 1px;
    background: lightgray;
  }

  #mainMenu .menu {
    font-size:120%;
    font-weight:100;
    display:block;
    padding:.35em;
    border-bottom:1px solid whitesmoke;
    color: inherit;
    text-decoration:none;
    position: relative;
  }

  #mainMenu .menu-active {
    background-color: #c0dcff;
    color:black;
  }

  #mainMenu .menu:hover {
    background-color: #FFE070;
    color: black;
  }

  #mainMenu .menu:hover {
    background-color: #FFE070;
    color: black;
  }

  #mainMenu .menu-submenu {
    font-size:100%;
    padding-left:2.1em;
  }

  #mainMenu .menu-icon {
    padding-left:1.7em;
    background-repeat: no-repeat;
    background-position:.5em .75em;
  }

  #mainMenu .menu-icon-home { background-image:url(../images/menu-home.png); }
  #mainMenu .menu-icon-whoiswhere { background-image:url(../images/menu-whoiswhere.png); }
  #mainMenu .menu-icon-mealregistration { background-image:url(../images/menu-mealregistration.png); }
  #mainMenu .menu-icon-employee { background-image:url(../images/menu-employee.png); }
  #mainMenu .menu-icon-pass { background-image:url(../images/menu-pass.png); }
  #mainMenu .menu-icon-order { background-image:url(../images/menu-order.png); }
  #mainMenu .menu-icon-activity { background-image:url(../images/menu-activity.png); }
  #mainMenu .menu-icon-perm { background-image:url(../images/menu-perm.png); }
  #mainMenu .menu-icon-settings { background-image:url(../images/menu-admin.png); }
  #mainMenu .menu-icon-calendar {
    background-image: url(../images/menu-calendar.png);
  }
  #mainMenu .menu-icon-planner {
    background-image: url(../images/menu-planner.png);
  }
  #mainMenu .menu-icon-reporting { background-image:url(../images/menu-reporting.png); }
  #mainMenu .menu-icon-admin { background-image:url(../images/menu-admin.png); }

  #mainMenu .menu-warning:after {
    content: '!';
    color: white;
    background-color: dodgerblue;
    font-family: Tahoma;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: .3em;
    right: .3em;
    width: 14px;
    height: 14px;
    border: 1px solid white;
    border-radius: 7px;
  }

#mainContent {
  padding: .5em .5em .5em .7em;
  overflow: hidden;
}