/* Defines */
/* Html */
html {
  height: 100%;
  min-height: 100%; }

/* Nav */
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000; }
  .header header {
    height: 42px;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px;
    margin: 0;
    background-color: #ffffff; }

body {
  background: url(../img/background.png) repeat;
  padding-top: 42px;
  height: 100%;
  min-height: 100%; }

/* Content */
#content {
  padding: 40px 20px 20px 20px;
  background: #ffffff;
  max-width: 1400px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%; }
  #content:before {
    box-shadow: rgba(0, 0, 0, 0.4) -10px 0 10px -10px inset;
    content: " ";
    height: 100%;
    left: -10px;
    position: absolute;
    top: 0;
    width: 10px; }
  #content:after {
    box-shadow: rgba(0, 0, 0, 0.4) 10px 0 10px -10px inset;
    content: " ";
    height: 100%;
    right: -10px;
    position: absolute;
    top: 0;
    width: 10px; }

/* Alerts */
.alertAnchor {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0; }

.alertAnchor .alert {
  margin: 20px; }

/* Dashboard */
.dashboard .card {
  margin: 10px 10px;
  height: 20em; }
  .dashboard .card .card-body {
    overflow-y: auto; }
    .dashboard .card .card-body.home-office-box {
      background: url(/img/homeoffice-bg.jpg) no-repeat;
      background-size: cover; }
    .dashboard .card .card-body.time-statistics-box {
      background: url(/img/time-bg.jpeg) no-repeat;
      background-size: cover; }
    .dashboard .card .card-body.vacation-statistics-box {
      background: url(/img/vacation-bg.jpeg) no-repeat;
      background-size: cover; }
    .dashboard .card .card-body h4 {
      text-align: left;
      font-weight: 400;
      font-size: 12pt;
      border-bottom: 1px solid #606060; }
  .dashboard .card .home-office-box .employee-icon, .dashboard .card .home-office-box .employee-label {
    line-height: 24px; }
  .dashboard .card .home-office-box .home-office-list {
    margin-bottom: 1em; }
  .dashboard .card .time-statistics-box dt {
    text-align: left;
    font-weight: 400;
    font-size: 12pt;
    border-bottom: 1px solid #606060; }
  .dashboard .card .time-statistics-box dd {
    text-align: right;
    font-weight: 200;
    font-size: 20pt; }

/* Absence calendar */
.absence-table {
  margin-top: 30px;
  table-layout: fixed; }
  .absence-table td {
    padding: 0; }
  .absence-table th.day {
    text-align: center; }
  .absence-table td.weekend, .absence-table th.weekend {
    background: #f8f8f8; }
  .absence-table tr:hover td, .absence-table tr:hover th {
    background: #f0f0f0 !important; }
  .absence-table th.today, .absence-table td.today {
    border-left: 1px solid #ffadad;
    border-right: 1px solid #ffadad; }
  .absence-table tr:first-of-type > th.today,
  .absence-table tr:first-of-type > td.today {
    position: relative;
    border-top: 1px solid #ffadad; }
  .absence-table tr:first-of-type > th.today::before,
  .absence-table tr:first-of-type > td.today::before {
    margin: -1px;
    content: "today";
    font-size: 15px;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 24px;
    background-color: #ffadad;
    color: #ffffff; }
  .absence-table tr:last-of-type > th.today,
  .absence-table tr:last-of-type > td.today {
    border-bottom: 1px solid #ffadad; }
  .absence-table .absence {
    width: 100%;
    margin-bottom: 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 9pt;
    /* Specific absence types */ }
    .absence-table .absence header {
      display: block;
      padding: 4px;
      color: #404040;
      text-transform: uppercase;
      font-weight: bold;
      text-align: center; }
    .absence-table .absence .comment {
      display: block;
      padding: 4px;
      color: #808080; }
    .absence-table .absence.homeOffice {
      background: #ffffe0; }
      .absence-table .absence.homeOffice header {
        background: #ffffc0; }
    .absence-table .absence.publicHoliday {
      background: #e0e0ff; }
      .absence-table .absence.publicHoliday header {
        background: #c0c0ff; }
    .absence-table .absence.vacation {
      background: #daf7a6; }
      .absence-table .absence.vacation header {
        background: #daf7a6; }
    .absence-table .absence .comment-dropdown {
      font-family: Marlett;
      font-size: 10pt;
      cursor: pointer; }

.absence-filter {
  width: 350px; }

/* Logged tasks */
.month-statistics-table {
  width: 100%;
  table-layout: fixed; }

table.tasks-table {
  margin-top: 30px;
  table-layout: fixed;
  width: 100%; }
  table.tasks-table .task-editor-row {
    margin-bottom: 8px; }
  table.tasks-table .task-comment {
    font-style: italic;
    font-size: 80%;
    color: #808080; }

.icon {
  width: 20pt;
  height: 20pt;
  cursor: pointer;
  opacity: 0.2; }
  .icon:hover {
    opacity: 1.0; }

.rowHoverReveal {
  opacity: 0.2; }
  .rowHoverReveal a {
    text-decoration: none;
    font-weight: bold; }

tr:hover > td .rowHoverReveal {
  opacity: 1; }

/* Work hours */
table.extended-month-statistics-table div.task-box {
  position: relative;
  display: inline-block;
  height: 32px;
  font-size: 10px;
  line-height: 30px;
  border-radius: 4px;
  text-transform: uppercase;
  text-overflow: clip;
  text-align: center;
  overflow: hidden;
  cursor: default; }
  table.extended-month-statistics-table div.task-box::after {
    display: block;
    position: absolute;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.5);
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 3px; }

/* General */
.color-preview {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px; }

.task-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 8px;
  line-height: 10px; }