body {
  font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
  font-size: 14px;
  z-index: 100;
  height: 100%;
}

.navbar-inverse {
  background-color: #dae6f4;
  background-image: -webkit-linear-gradient(top,#dae6f4 0,#d9e5f3 100%);
}

ul.nav-tabs {
  background-image: -webkit-linear-gradient(top, #b2c3d7 0, #cfdced 100%);
  border: 1px solid #849dbd;
  border-radius: 2px;
}

ul.nav-tabs li a {
  background-color: #dae6f4;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
  background-color: #fedd71;
}

.navbar-inverse .navbar-nav > li > a {
  color: #1e395b;
  -ms-text-shadow: none;
  text-shadow: none;
}

.navbar {
  border: 1px solid #849dbd;
  border-radius: 0;
  margin-bottom: 0;
}

.btn-toolbar {
  margin-left: 1px;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover,
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
  background-color: #fedd71;
  color: #1e395b;
  background-image: none;
}

.topInfo {
  display: block;
  min-height: 20px;
  background-color: white;
}

.userInfo {
  float: right;
  height: 20px;
}

.logout {
  background-color: rgb(215, 244, 214);
  padding: 3px;
  text-decoration: none;
}

.site.top .navbar-nav.navbar-right a.action {
  margin-top: 10px;
}

.btn-toolbar .action, .faketoolbar.action {
  display: inline-block;
  height: 24px;
  margin-right: 5px;
  margin-top: 5px;
  width: 24px;
}


.action {
  background-repeat: no-repeat;
  cursor: pointer;
}

.action.calendar {
  background-image: url("/img/24/calendar.png");
}

.action.email {
  background-image: url("/img/24/mail_compose.png");
}

.monitor .site.content {
  flex: 1 1 auto;
  position: relative; /* need this to position inner content */
  overflow-y: auto;
}

.form-horizontal .form-group {
  margin-left: 0;
}

.mailbox .icon.uitgesteld {
  background-image: url("/img/16/alarmclock.png");
  margin-bottom: -1px;
  margin-top: 1px;
}

.mailbox th a.icon, .mailbox .icon {
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  width: 16px;
}

.mailbox .icon.attachment {
  background-image: url("/img/16/attachment.png");
  margin-bottom: -1px;
  margin-top: 1px;
}


.priority, .prioSelect div {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.prioSelect {
  margin-left: 10px;
  border: 1px;
  border-style: solid;
  height: 25px;
  display: inline-block;
}



.Prio1 {
  background-image: url("/img/24/Prio1.png");
}

.Prio2 {
  background-image: url("/img/24/Prio2.png");
}

.Prio3 {
  background-image: url("/img/24/Prio3.png");
}

.Prio4 {
  background-image: url("/img/24/Prio0.png");
}

.mailbox div.subject {
  display: inline-block;
  margin-bottom: 2px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mailbox .subject {
  cursor: default;
}

.unread {
  font-weight: bold;
}

.mailbox .textPreview {
  color: #777777;
  cursor: default;
}
table.mailbox {
  border: none;
}

.mailFilter {
  margin-bottom: 8px;
  margin-top: 6px;
  min-width: 640px;
}

.mailSearch {
  background-image: url("/img/16/search.png");
  background-position: right;
  background-repeat: no-repeat;
  border: 1px solid #aaaaaa;
  float: right;
  padding-right: 18px;
}

.mailbox {
  margin-top: 20px;
  overflow: hidden;
  padding-right: 4px;
}


  .mailbox td, .mailbox th {
    padding-left: 4px;
    padding-right: 4px;
    max-width: 900px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mailbox th {
    border: 1px solid #aaaaaa;
    text-align: left;
    text-transform: uppercase;
  }

    .mailbox th.icon {
      width: 20px;
    }

    .mailbox th a, .mailbox th a:focus {
      color: black;
      text-decoration: none;
    }

  .mailbox div.icon {
    height: 16px;
    margin-left: auto;
    width: 16px;
  }

  .mailbox td.colAction {
    vertical-align: middle;
    padding-top: 8px;
    padding-right: 12px;
  }

  .mailbox .action {
    display: inline-block;
    width: 16px;
    height: 16px;
    visibility: hidden;
  }

  .mailbox tr:hover .action {
    visibility: visible;
  }

  .mailbox .action.delete {
    background-image: url("/img/16/delete.png");
    background-repeat: no-repeat;
  }

  .mailbox td {
    border-bottom: 1px solid #e1e1e1;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    padding-bottom: 8px;
    vertical-align: top;
  }

    .mailbox td.colSubject, .mailbox th.colSubject {
      max-width: 400px;
    }

    .mailbox td.colSubject {
      min-height: 36px;
    }

  .mailbox tr.selectedRow {
    background-color: #cde6f7;
  }

  .mailbox tr {
  }

    .mailbox tr.archief {
      background-color: #f0f0f0;
    }

    .mailbox tr.locked {
      background-color: cornsilk;
    }

    .mailbox tr:hover {
      background-color: #e8f0fa;
    }






  .mailbox .icon.replied {
    background-image: url("/img/16/message_replied.png");
  }

  .mailbox .icon.status {
    background-image: url("/img/16/message_status.png");
  }

  .mailbox a {
    color: black;
    text-decoration: none;
  }

    .mailbox a:hover {
      text-decoration: underline;
    }


  .mailbox .pagerRow td {
    border: none;
  }

  .mailbox .pagerRow table {
    border-collapse: collapse;
    display: table;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
  }

  .mailbox .pagerRow a, .mailbox .pagerRow span {
    color: black;
    font-weight: bold;
  }

.statustype, .bolletje {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-block;
  padding: 4px;
}

.statustype .status-el-perc {
  width: 40px;
  height: 20px;
  display: inline-block;
  white-space: nowrap;
}

.statustype .status-el-gesl {
  margin-bottom: 10px;
  display: inline-block;
  white-space: nowrap;
}

.statustype.Direct {
  background-color: greenyellow;
}

.statustype.Reservelijst {
  background-color: aqua;
}

.statustype.Geclusterd {
  background-color: silver;
}

.statustype.GeclusterdVerstuurd {
  background-color: orange;
}

.statustype.Onzeker {
  background-color: black;
}

.statustype.GeclusterdGelezen {
  background-color: blue;
}

.statustype.GeclusterdBevestigd {
  background-color: greenyellow;
}

.statustype.GeclusterdGeweigerd {
  background-color: red;
}

.statustype.WachtOpVerplaatsen {
  background-color: magenta
}

.statustype.Geannuleerd {
  background-color: yellow;
}

.statustype.ZakkerBellen {
  background-color: rgb(244, 184, 184);
}

.statustype.WachtOpStap {
  background-color: rgb(155, 70, 242);
}

fieldset legend, .group-header {
  color: navy;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
  background-color: #FEDDA4;
}

.material-icons.md-12 {
  font-size: 12px;
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

.online {
  margin-top: 10px;
  margin-right: 10px;
  background: rgb(118, 178, 59);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  width: 25px;
}


.gridView {
  margin-left: 2px;
}

.gridView > thead > tr > th, .webgrid-header th {
  background-image: -webkit-linear-gradient(top, #d8e4f2 0, #ecf4fb 100%);
  white-space: nowrap;
}

.gridView > thead > tr > th, .gridView > tbody > tr > td {
  vertical-align: top;
}

.gridView > thead > tr > th a {
  display: inline-block;
  height: 16px;
  padding-bottom: 2px;
  padding-top: 3px;
}

.gridView > thead > tr > th.sorted > .sortIcon {
  display: inline-block;
  height: 16px;
  width: 16px;
}

.gridView > thead > tr > th.sorted.Descending > .sortIcon {
  background-image: url("/img/16/sort_desc.png");
}

.gridView > thead > tr > th.sorted.Ascending > .sortIcon {
  background-image: url("/img/16/sort_asc.png");
}

.gridView td.alert, .colAnnuleringsdatum .alert, .formview .alert {
  padding: 0;
  border: none;
}

.gridView th {
  font-weight: normal;
  color: #1e395b;
}

.gridView > tbody > tr:hover {
  background-color: #fedd71;
}

.gridView > tbody > tr > td, .gridView > thead > tr > th, .gridView {
  border-color: rgb(223, 219, 219);
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  padding-right: 6px !important;
}

.gridView td.rightAlign {
  text-align: right;
}

.gridView td.nowrap {
  white-space: nowrap;
}

.gridView > tbody > tr:nth-child(even):not(:hover):not(.alert) {
  background-color: #f0f4f8;
}