.maandoverzicht-van-personen {
  display: block;
  max-height: 400px;
  overflow: auto;
  margin-bottom: 10px;
}

/* fix specifiek voor Firefox */
@-moz-document url-prefix() {
  .maandoverzicht-van-personen {
    margin-left: 1px;
  }
}

.maandoverzicht-van-persoon {
  margin-bottom: 10px;
}

.dagen {
  margin-bottom: 0;
  overflow: auto;
  display: block;
}

.maandoverzicht {
  display: inline-block
}

.maandoverzicht, .naam-bij-input, .voornaam, .opdracht, .pvh, .mededeling, .looncodes, .dag, .overuren, .datum-in-tabel, .x-y-in-tabel, .opmerking-tabel,
.fouten, .toevoegen-en-verwijderen, .aantal-mtc, .aantal-supplementen,
.naam-header, .voornaam-header, .opdracht-header, .pvh-header, .mededeling-header, .maand, .cell-spatie-header, .cell-spatie-header-einde,
.aantal-mtc-header,.aantal-supplementen-header , .bijsturing-uren-header, .bijsturing-header {
  border: 1px solid #ddd;
}

.naam, .maandoverzicht-van-personen {
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.selected {
  border: 1px solid #000;
  width: 19px;
  max-width: 19px;
  height: 22px;
  max-height: 22px;
}
div.selected:before {
    position: absolute; display: block; content: '';
    border: 1px solid white;
    height: 100%; width: 100%;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    z-index: 100;
}

.naam, .naam-bij-input, .naam-header, .naam-spatie {
  /* als dit aangepast wordt, moet ook naamBreedte in functie setTableWidth
       in opdrachtenGrid.js aangepast worden */
  max-width: 215px;
  min-width: 215px;
}

.voornaam, .voornaam-header, .voornaam-spatie {
  /* als dit aangepast wordt, moet ook voornaamBreedte in functie setTableWidth
       in opdrachtenGrid.js aangepast worden */
  max-width: 120px;
  min-width: 120px;
}

.opdracht, .opdracht-header, .opdracht-spatie {
  /* als dit aangepast wordt, moet ook opdrachtBreedte in functie setTableWidth
       in opdrachtenGrid.js aangepast worden */
  max-width: 60px;
  min-width: 60px;
}

.klaar-voor-uitvoering-tekst {
  font-weight: bold;
}

.opdracht, .pvh, .aantal-mtc, .aantal-supplementen {
  text-align: right;
}

.mededeling, .mededeling-header, .mededeling-spatie {
  /* als dit aangepast wordt, moet ook mededelingBreedte in functie setTableWidth
       in opdrachtenGrid.js aangepast worden */
  max-width: 15px;
  min-width: 15px;
  text-align: center;
}

.tellerinfo {
  max-width: 15px;
  min-width: 15px;
  text-align: left;
}
.opdrachtinfo {
  max-width: 15px;
  min-width: 15px;
  text-align: left;
}

.ongelezen {
  color: red;
  font-weight: bold;
}

.gelezen {
  color: green;
  font-weight: bold;
}

.mtc-opmerking {
  color: red;
  font-weight: bold;
}

.cell-spatie-header, .cell-spatie-header-einde {
  /* als dit aangepast wordt, moet ook spatieBreedte in functie setTableWidth in opdrachtenGrid.js aangepast worden */
  max-width: 24px;
  min-width: 24px;
}

.cell-spatie {
  /* als width veranderd wordt, moet dit ook aangepast worden in opdrachtenGrid.js in de $watch op dagen */
  max-width: 24px;
  min-width: 24px;
}

.naam-header, .voornaam-header, .opdracht-header, .pvh-header, .mededeling-header, .maand, .cell-spatie-header, .cell-spatie-header-einde,
.datum-header, .x_y-header,.opmerking-header, .fouten-header, .toevoegen-en-verwijderen-header,
.aantal-mtc-header, .aantal-supplementen-header, .bijsturing-uren-header, .bijsturing-header {
  background-color: #47445B;
  background-image: linear-gradient(to bottom, #524f6a, #47445B);
  background-repeat: repeat-x;
  height: 25px;
}

.naam-header, .voornaam-header, .opdracht-header, .pvh-header, .mededeling-header, .maand, .cell-spatie-header,
.datum-header, .x_y-header,.opmerking-header, .fouten-header, .toevoegen-en-verwijderen-header,
.aantal-mtc-header, .aantal-supplementen-header,.bijsturing-uren-header, .bijsturing-header {
  border-left: 1px solid #fff;
}

.naam, .naam-bij-input, .voornaam, .opdracht, .pvh, .mededeling, .aantal-mtc, .aantal-supplementen {
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
}

.pointer {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.dag {
  /* width moet zelfde zijn als van .looncodes */
  width: 20px !important;
  max-width: 20px !important;
  min-width: 20px;
  padding: 0;
  text-align: right;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dagen {
  border-bottom: 2px solid #444;
}

.weekdag, .weekdag-bevroren, .weekend, .huidigeDag {
  line-height: 22px;
  padding-right: 2px;
}

.weekdag {
  background: #fff;
}

.fc-content {
  padding-right: 3px;
  padding-left: 3px;
}

.fc-row {
  padding-right: 3px;
  padding-left: 3px;
}

.weekend {
  border: 1px solid white;
  background: #DCDCDC;
}
.fc-other-month{
  background: #f5f5f5;
}
.huidigeDag {
  background: #ffa;
}

.grensPeriode {
  border-left: #FF00FF solid;
}

.grens {
  border-left: #444 solid;
}

.klaar-voor-uitvoering {
  border-right: 2px #bbb solid;
  border-top: 2px #bbb solid;
  border-bottom: 2px #bbb solid;
}

.maand {
  overflow: hidden;
  text-align: center;
}

.content-center {
  display: flex;
  justify-content: center;
}

.maand-div, .naam-header, .voornaam-header, .opdracht-header, .pvh-header, .mededeling-header, .cell-spatie-header, .datum-header, .x_y-header,
.opmerking-header, .fouten-header, .toevoegen-en-verwijderen-header, .aantal-mtc-header, .aantal-supplementen-header, .bijsturing-uren-header, .bijsturing-header {
  color: #fff;
  overflow: hidden;
  font-size: 13px;
  font-weight: bold;
}

.maand-div, .naam-header, .voornaam-header, .opdracht-header, .pvh-header, .cell-spatie-header, .datum-header, .x_y-header, .opmerking-header,
.fouten-header, .toevoegen-en-verwijderen-header, .aantal-mtc-header, .aantal-supplementen-header, .bijsturing-uren-header, .bijsturing-header {
  padding: 3px;
}

.mededeling-header {
  padding: 0;
}

.looncodes {
  /* als width veranderd wordt, moet dit ook aangepast worden in opdrachtenGrid.js
       in de $watch op dagen */
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: 22px;
  max-height: 22px;
  white-space: nowrap;
  padding: 0;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.looncodesHeader {
  border: 1px solid black;
  min-width: 80px;
  max-width: 80px;
}

.looncodesInMaandOverzicht {
  border: 1px solid black;
  min-width: 80px;
  max-width: 80px;
}

.looncodesContainer {
  position: relative;
  width: 100%;
  height: 22px;
  max-height: 22px;
  overflow: hidden;
}

.fc td.arceer, .arceer {
  /* Twee eerste pixel values moeten gelijk zijn, dit is de breedte van de zwarte streep.
  De derde pixel breedte is de SOM van de breedte van de witte en zwarte streep.
  Bv. zwart 2 en wit 6 breed -> 2px, 2px, 8px. */
  /*background: #333 repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255, 255, 255, 1) 2px, rgba(255, 255, 255, 1) 8px);*/

  /* Uiteindelijk gebruiken we de repeating-linear-gradient toch niet, omdat die met fouten rendert in Firefox developer edition.
     Een base64 image werkt veel beter, de arcering komt wel een pixel te laag in Firefox developer edition maar FF, IE en Chrome tonen het wel goed. */
  background: #333 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAK0lEQVR42mP4jwMwMDBAMD5JMBufJIYCdEkUBdgk4QpwSULlcEvCFeDzKgDEFs8xJ7rTLQAAAABJRU5ErkJggg==');
  /*background-attachment: fixed;*/
}

.geen-opdrachten-boodschap {
  margin: 5px;
  color: #d00;
}

.opdrachtengrid-onderste-deel {
  margin-top: 10px;
}

.met-commentaar {
  position: absolute;
  top: 3px;
  left: 2px;
  height: 14px;
  margin-top: 1px;
  z-index: 1;
}

.bevroren {
  opacity: 0.5;
  background-color: #ddd;
}

.bevroren-img, .bevroren-img-individueel {
  position: absolute;
  background: url('../images/bevroren2-blauw.png');
  z-index: 2;
}

.bevroren-voor-gebruiker-img, .bevroren-voor-gebruiker-img-individueel {
  position: absolute;
  background: url('../images/bevroren4-blauw.png');
  z-index: 2;
}

.bevroren-img, .bevroren-voor-gebruiker-img {
  width: 19px;
  max-width: 19px;
  height: 22px;
  max-height: 22px;
}

.bevroren-img-individueel {
  width: 124px;
  max-width: 124px;
  height: 100%;
  max-height: 100%;
}

.sorteerSymboolContainer {
  position: relative;
  top: -28px;
}

.sorteerSymbool {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  font-size: 14px;
}

.sorteerSymbool-smal {
  position: absolute;
  top: 0;
  left: 10%;
  z-index: 1;
  font-size: 14px;
}

.classic {
  padding: 0.8em 1em;
}

.custom {
  padding: 0.5em 0.8em 0.8em 2em;
}

* html a:hover {
  background: transparent;
}

.classic {
  background: #FFFFAA;
  border: 1px solid #FFAD33;
}

.critical {
  background: #FFCCAA;
  border: 1px solid #FF3334;
}

.help {
  background: #9FDAEE;
  border: 1px solid #2BB0D7;
}

.info {
  background: #9FDAEE;
  border: 1px solid #2BB0D7;
}

.warning {
  background: #FFFFAA;
  border: 1px solid #FFAD33;
}

.tooltip-ek {
  background: white;
  color: black;
  border: 1px solid black;
  padding: 5px;
  border-radius: 2px;
  z-index: 1000;

  position: absolute;
}

#dagen-header {
  border-bottom: solid black;
}

.inputButtonLeft {
  color: #000000 !important;
  font-weight:normal !important;
  text-shadow: none !important;
}

.inputButtonRight {
  color: #000000 !important;
  margin-left: -4px !important;
  text-shadow: none !important;
}

.inputButtonDisabled{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}