/*
 *    $Revision$
 *    $Id$  TODO: FONTAWESOME icons
 */

 :root {
  --factor: 1;
  --hourpx: 96px;
  --unit0125: 0;
  --unit025: 0;
  --unit050: 0;
  --unit075: 0;
  --unit100: 0;
  --unit125: 0;
  --unit150: 0;
  --unit175: 0;
  --unit200: 0;
  --displayhour1: initial;
  --displayhour2: initial;
  --displayhour3: initial;
  --toppos: 0;
  --listtop: 30px;
}

 /* the grid model */
.planbordgrid {
  display: grid;
  background-color: #fff;
}
.planbordgrid .badge {
  display: inline-block;
  padding: .25em .4em;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  font-size: 90%;
  margin-left: 6px;
  font-weight: 700;
  line-height: 1;
  background-color: var(--tableheadercolor);
  color: var(--tableheaderbackgroundcolor);
}
div.bulkamountwrap {
  max-width: 55px;
}
input.bulkamount {
  max-width: 100%;
}
div.labelgrid label {
  font-family: var(--fontfamily);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.1em;
  padding-left: 6px;
  cursor: inherit;
  max-width: calc(100% - 24px);
  display: inline-block;
}
div.labelgrid label i {
  vertical-align: bottom;
  padding: 1px;
  color: var(--tableheaderbackgroundcolor);
}
div.labelgrid i {
  vertical-align: super;
  cursor: pointer;
}
div.capaciteitgrid i {
cursor: pointer;
}
div.labelgrid input[type=checkbox] {
  height: 27px; /* same as the label height */
}
#mod_res_selectroom .labelgrid:hover,
#mod_res_selectroom .labelgrid:hover i,
#mod_res_selectroom .labelgrid:hover label,
#mod_res_selectroom .labelgrid:hover label i {
color: var(--menuitemhovercolor);
background-color: var(--menuitemhoverbackgroundcolor);
}
#mod_res_selectroom div.rrdet {
color: initial;
background-color: initial;
}
div.capaciteitgrid {
  font-size: 0.8em;
  text-align: right;
}
div.rd { /* reserveringsdetails */
  font-family: Arial Narrow, Arial, Helvetica, sans-serif;
  line-height: 1.1em;
  padding-left: 4px;
  padding-bottom: 2px;
}
div.rd span {
  white-space: nowrap;
}
span.rdk {  /* reserveringsdetails-kop */
  text-decoration: underline;
  padding-bottom: 2px;
  display: block;
}
span.rdt {  /* reserveringsdetails-titel */
  display: block;
  font-weight: bold;
}
span.rdn {  /* reserveringsdetails-naam */
  display: block;
  font-style: italic;
}
div.ric {  /* reserveringsdetails-icons */
  float: right;
  font-size: 2em;
  padding-top: 2px;
  padding-right: 2px;
}
div.rbz {  /* reserveringsdetails-bezoekers */
  color: #CCC;
}
span.maxgridrows {
  font-style: italic;
}

[data-custom-color] {
  position: relative;
}
#legenda [data-custom-color] {
  z-index: 1;
  overflow: hidden;
}
[data-custom-color]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%) rotate(45deg);
  padding: min(1.8em, 100%);
  z-index: -1; /* Dan ligt de tekst er overheen */
}

.res_optie_eigen div.arrowleft,
.res_optie_eigen div.arrowright {
  border-left-color: var(--aareon-tangerine);
  border-right-color: var(--aareon-tangerine);
}

.res_definitief_eigen div.arrowleft,
.res_definitief_eigen div.arrowright {
  border-left-color: var(--aareon-grapefruit);
  border-right-color: var(--aareon-grapefruit);
}

.res_optie div.arrowleft,
.res_optie div.arrowright {
  border-left-color: var(--aareon-ocean-green);
  border-right-color: var(--aareon-ocean-green);
}

.res_definitief div.arrowleft,
.res_definitief div.arrowright {
  border-left-color: var(--aareon-pine-green);
  border-right-color: var(--aareon-pine-green);
}

.res_blok div.arrowleft,
.res_blok div.arrowright {
  border-left-color: rgba(255, 255, 255, 0.6);
  border-right-color: rgba(255, 255, 255, 0.6);
}

/* bijna als planbordgrid-achtergrond*/
.res_lunchblok div.arrowleft,
.res_lunchblok div.arrowright {
  border-left-color: #fffb;
  border-right-color: #fffb;
}

/* bijna als planbordgrid-achtergrond */
/* hex-kleuren met 4 of 8 karakters worden niet in IE11 ondersteund (rgba() wel) */
.res_vervallen div.arrowleft,
.res_vervallen div.arrowright {
  border-left-color: var(--aareon-berry);
  border-right-color: var(--aareon-berry);
}

.res_nietvrij div.arrowleft,
.res_nietvrij div.arrowright {
  border-left-color: #B1B3B4;
  border-right-color: #B1B3B4;
}

/* Niet beschikbaar: oranje LICHTGROEN */
/* .res_cleaning div.arrowleft,
.res_cleaning div.arrowright {
  border-left-color: #808080;
  border-right-color: #808080;
} */

.res_extern div.arrowleft,
.res_extern div.arrowright {
  border-left-color: #4e85db;
  border-right-color: #4e85db;
}

/* Via API (extern_id) gereserveerd */
.res_fatal div.arrowleft,
.res_fatal div.arrowright {
  border-left-color: var(--fclt-color-red);
  border-right-color: var(--fclt-color-red);
}

.res_optie_eigen div.arrowleft,
.res_optie_eigen div.arrowright {
  border-left-color: var(--aareon-tangerine);
  border-right-color: var(--aareon-tangerine);
}

.res_definitief_eigen div.arrowleft,
.res_definitief_eigen div.arrowright {
  border-left-color: var(--aareon-grapefruit);
  border-right-color: var(--aareon-grapefruit);
}

.res_optie_eigen:not(div.overflowleft, div.overflowright),
.res_definitief_eigen:not(div.overflowleft, div.overflowright),
.res_optie:not(div.overflowleft, div.overflowright),
.res_definitief:not(div.overflowleft, div.overflowright),
.res_blok:not(div.overflowleft, div.overflowright),
.res_lunchblok:not(div.overflowleft, div.overflowright),
.res_vervallen:not(div.overflowleft, div.overflowright),
.res_cleaning:not(div.overflowleft, div.overflowright),
.res_extern:not(div.overflowleft, div.overflowright),
.res_fatal:not(div.overflowleft, div.overflowright),
.res_nietvrij:not(div.overflowleft, div.overflowright) {
  overflow: hidden;
}
.rescat_p_c,
.rescat_tp_c {
  text-align: right;
}
div.hour-1 {
    display: var(--displayhour1);
}
div.hour-2, div.hour-4 {
    display: var(--displayhour2);
}
div.hour-3 {
    display: var(--displayhour3);
}
div.res_cleaning[prc="0.13"] {
    border-left-width: calc(.125 * var(--hourpx));
   margin-left: var(--unit0125);
}
div.res_cleaning[prc="0.25"] {
    border-left-width: calc(.25 * var(--hourpx));
   margin-left: var(--unit025);
}
div.res_cleaning[prc="0.50"], div.res_cleaning[prc="0.5"] {
    border-left-width: calc(.5 * var(--hourpx));
   margin-left: var(--unit050);
}
div.res_cleaning[prc="0.75"] {
    border-left-width: calc(.75 * var(--hourpx));
   margin-left: var(--unit075);
}
div.res_cleaning[prc="1.00"], div.res_cleaning[prc="1"] {
    border-left-width: var(--hourpx);
   margin-left: var(--unit100);
}
div.res_cleaning[prc="1.25"] {
    border-left-width: calc(1.25 * var(--hourpx));
   margin-left: var(--unit125);
}
div.res_cleaning[prc="1.50"], div.res_cleaning[prc="1.5"] {
    border-left-width: calc(1.5 * var(--hourpx));
   margin-left: var(--unit150);
}
div.res_cleaning[prc="1.75"] {
    border-left-width: calc(1.75 * var(--hourpx));
   margin-left: var(--unit175);
}
div.res_cleaning[prc="2.00"], div.res_cleaning[prc="2"] {
    border-left-width: calc(2 * var(--hourpx));
   margin-left: var(--unit200);
}
div.res_cleaning[prc="0.13"] {
    border-right-width: calc(.125 * var(--hourpx));
   margin-right: var(--unit0125);
}
div.res_cleaning[poc="0.25"] {
    border-right-width: calc(.25 * var(--hourpx));
   margin-right: var(--unit025);
}
div.res_cleaning[poc="0.50"], div.res_cleaning[poc="0.5"] {
    border-right-width: calc(.5 * var(--hourpx));
   margin-right: var(--unit050)
}
div.res_cleaning[poc="0.75"] {
    border-right-width: calc(.75 * var(--hourpx));
   margin-right: var(--unit075);
}
div.res_cleaning[poc="1.00"], div.res_cleaning[poc="1"] {
    border-right-width: var(--hourpx);
   margin-right: var(--unit100);
}
div.res_cleaning[poc="1.25"] {
    border-right-width: calc(1.25 * var(--hourpx));
   margin-right: var(--unit125);
}
div.res_cleaning[poc="1.50"], div.res_cleaning[poc="1.5"] {
    border-right-width: calc(1.5 * var(--hourpx));
   margin-right: var(--unit150);
}
div.res_cleaning[poc="1.75"] {
    border-right-width: calc(1.75 * var(--hourpx));
   margin-right: var(--unit175);
}
div.res_cleaning[poc="2.00"], div.res_cleaning[poc="2"] {
    border-right-width: calc(2 * var(--hourpx));
   margin-right: var(--unit200);
}

.grid {
    width: 100vw;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0 1fr;
    overflow: hidden;
}

body.fclt-modal .grid {
    padding-right: 5px; /* let op; de waarde hiervan moet gelijk zijn aan de negatieve margin van [class^=plantimegrid], .plandategrid { margin: -#px } */
}

/* Enkele aanpassingen voor planbord inline (voorzieningen subframe bijvoorbeeld) */
.card-body .grid {
    width: 100%;
    outline: 1px solid var(--fclt-border-color);
}
.card-body [id$="-body"].planbordgrid {
    margin-bottom: -5px;
}
/* Einde voorzieningen aanpassingen */

/* sensor-classes */
.icongrid    { font-size: 1.4em;}
.sens-blocked   { color: #0b0bae;}
.sens-fatal     { color: var(--fclt-color-red);}
.sens-free      { color: #45ca45;}
.sens-occupied  { color: #d33121;}
.sens-uncertain { color: #aea8a8;}

div.fcltframeheader.floating {
  max-width: 100%;
  width: 100vw;
  position: absolute;
  top: var(--toppos);
  z-index: 11;
}
.grid div.header.floating {
  max-width: 100%;
  position: absolute;
  top: calc(var(--toppos) + var(--listtop));
  z-index: 10;
}
body.fclt-modal .grid div.header.floating {
  position: fixed;
}
.header {
  grid-area: 1/1;
}
.body {
  grid-area: 2/1;
}

div.grid input[id^=autofilter-] {
  align-self: center;
  grid-area: 1/1/3/1;
  justify-self: left;
  height: 22px;
}
[class^=plantimegrid], .plandategrid {
  text-align: center;
  background-color: white;
  margin: 0 -5px;
  word-wrap: normal;
}
div.click {
  cursor: pointer;
}
div.planbordgrid {
  width: 100%;
  display: grid;
  grid-template-columns: 310px 60px;
  grid-auto-columns: 1fr;
  grid-auto-rows: minmax(0px, auto);
  row-gap: 0px;
  -moz-column-gap: 1px;
       column-gap: 1px;
}
div.planbordgrid.deel {
  grid-template-columns: 240px 20px;
}
div[data-loc].hidden {
  grid-auto-rows: 0;
  overflow-y: hidden;
}
div.planbordgrid > div {
  margin-bottom: 5px;
}
div.rrdet {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: .9em;
  /* Padding zit op .rrdesc-wrapper */
  padding: 0;
  margin: 0;
  line-height: 1.2em;
}
.rrphoto {
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-image-url wordt inline gezet want komt uit de DB */
}
.tab_obj_sched .rrphoto { /* In het voorzieningen planbord wel het hele plaatje laten zien */
  background-size: contain;
  overflow: hidden;
}
.rrphoto .rrdesc-wrapper {
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--textcolor);
  margin: 8px;
  border-radius: 4px;
  transition: background 150ms ease-out;
}
.rrdesc-wrapper {
  padding: 4px 6px;
}
.rrphoto:hover .rrdesc-wrapper {
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--textcolor);
}
div.rc-compact, div.rc {
  background-color: var(--fclt-color-grey-25);
  z-index: 0;
}
div.labelgrid, div.capaciteitgrid {
  white-space: normal;
  background-color: var(--fclt-color-grey-10);
}
div.capaciteitgrid {
  z-index: 1;
}
div.grid[data-writable="false"] > .body > .planbordgrid {
  cursor: not-allowed;
}
div.locatiegrid, div.insdiscgrid {
  cursor: pointer;
  color: var(--tableheadercolor);
  background-color: var(--tableheaderbackgroundcolor);
  padding: 5px;
  font-weight: bold;
}
div.locatiegrid::before, div.insdiscgrid::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  padding-right: 5px;
  content: "\f078";
}
div.locatiegrid.collapsed::before, div.insdiscgrid.collapsed::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  padding-left: 1.5px;
  padding-right: 6.5px;
  content: "\f054";
}
:is(.locatiegrid, .insdiscgrid) {
  display: none;
}
.labelgrid:not(.res_nofit_hidden, [style$="display: none;"]) ~ :is(.locatiegrid, .insdiscgrid) {
  display: block;
}

.res_optie_eigen,      /* Optie eigen reservering: Tangerine */
.res_definitief_eigen, /* Definitief eigen reservering: Grapefruit */
.res_optie,            /* Optie: Ocean Green */
.res_definitief,       /* Definitief: Pine Green */
.res_blok,             /* Blokkade: Wit */
.res_vervallen,        /* Vervallen: Berry */
.res_afgemeld,         /* Afgemeld: Antraciet */
.res_nietvrij,         /* Niet beschikbaar: oranje LICHTGROEN */
.res_cleaning,
.res_nieuw,
.res_fatal,            /* dirty */
.res_extern {          /* Via API (extern_id) gereserveerd */
  z-index: 1;
}
@page {
  size: A4 landscape;
}
@media print {
  body, .grid {
      width: 29cm;
  }
  div.fcltframeheader.floating,
  .grid div.header.floating {
      display: none;
  }
  .grid div.body div.rc {
      border: .5px solid #eae6e6;
      outline: 1.5px solid white;
  }
  div.ric {
      float: none;
  }
  div.res_optie_eigen,
  div.res_definitief_eigen,
  div.res_optie,
  div.res_definitief,
  div.res_blok,
  div.res_vervallen,
  div.res_nietvrij   {
      height:unset!important;
  }
}

#resselector option {
  background-color: #17D575;
  color: #333;
  font-weight: normal;
  text-align: center; /* want dat heeft .fatal ook*/
}

#resselector .fatal {
    background-color: var(--fclt-color-bad-contrast);
    color: var(--fclt-color-bad);
}

#selectedDates{
 margin-top: 3px;
}
/* RES planboard noot: res gaat per id, obj gaat via class */
#tab_room_sched tbody tr,
#tab_room_sched thead tr,
.tab_obj_sched tbody tr,
.tab_obj_sched thead tr {
    background-color: #eee;
}
#tab_room_sched tbody tr:hover,
.tab_obj_sched tbody tr:hover {
    background-color: #ddd;
}
#tab_room_sched tr.selected,
.tab_obj_sched tr.selected {
    background-color: #ddd;
    font-weight: bold;
}

i.plancad {
    cursor: pointer;
    font-size: 1.2em;
}
table.tab_cat_sched,
table.tab_cat_sched table { /* Verbruiksartikelkenmerkentable */
    width: 100%;
}

table.tab_cat_sched table {
    table-layout: fixed;
}
table.tab_cat_sched table label { width: auto; }

body:not(#listbody, #planbody) div#resCatList table.tab_cat_sched td.label { /* Genoeg ruimte voor kenmerken zo */
    width: 40%;
}
body:not(#listbody, #planbody) div#resCatList table.tab_cat_sched td.shrink { /* Aantal en Tijd */
    width: 1%;
}

.tab_cat_sched td:nth-child(5) { white-space: nowrap; } /* Tijd */

.invisible { visibility: hidden; } /* Zo zie je niks en neemt die toch ruimte in */

body:not(#listbody, #planbody) div#resCatList table.tab_cat_sched table td.label {
    max-width: 250px;
    width: 30%;
}
body:not(#listbody, #planbody) div#resCatList table.tab_cat_sched table td.label + td {
    width: 70%;
}

.tab_cat_sched.compressed tr.catline.notexisting { display: none; }
.tab_cat_sched.compressed tr.catflexline.notexisting { display: none; }

.tab_cat_sched tr.catline > td.label > label { line-height: 2.35em; }

.planbord.compressed tr.res_nofit { display: none; }
.tab_cat_sched tr.catline.existing { background-color: #EBEFFF; }
.tab_cat_sched tr.catflexline.existing { background-color: #EBEFFF; }

 table.planbord tr label { font-weight: normal;overflow: hidden; white-space: nowrap; }
 table.planbord td       {  vertical-align: inherit; } /* Herstel de generieke 'top' uit default.csx */

 table.planbord td.label       { width: 180px; padding-left: 5px; }
 table.tab_cat_sched td.label  { width: 250px; padding-left: 5px; }

 table.planbord label          { width: 180px; font-weight: normal; overflow: hidden; white-space: nowrap; }
 table.tab_cat_sched label     { width: 250px; font-weight: normal; overflow: hidden; white-space: nowrap; }
 table.tab_cat_sched th        { white-space: nowrap; }

table.planbord td.capaciteit { width: 55px;
                               text-align: right;
                               vertical-align: bottom;
                               padding-right:15px; }

div.res_remark {
                  display: none;
                  float: right;
                  position:absolute;
                  z-index:15; /* floatingHeader = 10, hambDropDown = 11 */
                  width:400px;
                  left:450px;
                  padding: 5px;
                  background-color: #FCFD93;
                  border: 1px solid #eee;
                  box-shadow: 4px 4px 8px #666;
                  white-space: normal;
               }
div.resartflexedit tr.catline.existing{ background-color: #EBEFFF; }
div.resartflexedit table tr td,
div.resartflexedit table tr td span,
div.resartflexedit table tr td input,
div.resartflexedit table tr td select,
div.resartflexedit table tr td textarea { font-style: italic; }
div.resartflexlist { margin-left: 10px;
                     color: #888;
                     font-style: italic;
                   }
div.resartflexshow { margin-left: 10px;
                     color: #888;
                     font-style: italic;
                   }
table.planbord96 tr td.between div { width:24px;}
table.planbord96 tr td.post div { width:16px;}
table.planbord96 td.reserv { background-image:url(../pictures/plan96x16.png) }

table.planbord72 tr td.between div { width:24px;}
table.planbord72 tr td.post div { width:16px;}
table.planbord72 td.reserv { background-image:url(../pictures/plan72x16.png) }

table.planbord60 tr td.between div { width:24px;}
table.planbord60 tr td.post div { width:16px;}
table.planbord60 td.reserv { background-image:url(../pictures/plan60x16.png) }

table.planbord48 tr td.between div { width:24px;}
table.planbord48 tr td.post div { width:16px;}
table.planbord48 td.reserv { background-image:url(../pictures/plan48x16.png) }

table.planbord36 tr td.between div { width:24px;}
table.planbord36 tr td.post div { width:16px;}
table.planbord36 td.reserv { background-image:url(../pictures/plan36x16.png) }

table.planbord24 tr td.between div { width:24px;}
table.planbord24 tr td.post div { width:16px;}
table.planbord24 td.reserv { background-image:url(../pictures/plan24x16.png) }

table.planbord16 tr td.between div { width:24px;}
table.planbord16 tr td.post div { width:8px;}
table.planbord16 td.reserv { background-image:url(../pictures/plan16x16.png) }

table.planbord8 tr td.between div { width:10px;}
table.planbord8 tr td.post div { width:3px;}
table.planbord8 td.reserv { background-image:url(../pictures/plan08x16.png) }

table.planbord4 tr td.between div { width:2px;}
table.planbord4 tr td.post div { width:0px;}
table.planbord4 td.reserv { background-image:url(../pictures/plan04x16.png) }

table.planbord           { border: 1px solid #ccc ; margin-top:5px; margin-right: 5px; }

table.planbord td.plantd { padding:0px; margin:0px; }
table.planbord td.plantd div.tddiv { position: relative; padding:0px; margin:0px; width:100%; height: 16px;}

table.planbord td.plantd.tijdbalk { height: 16px; }
table.planbord.multiday td.plantd.tijdbalk div.tddiv { height: 32px; }
table.planbord label { font-weight: normal; }

table.planbord tr        { height: 21px; }
table.planbord td.reserv { background-repeat: repeat-x;
                           background-position:1px 4px;}
table.planbord tr td.between div { margin-bottom: 1px; }
table.planbord tr td.post { padding:0px; }
table.planbord div.gepland{ position: absolute;
                            height: 16px;
                            top: 0px;
                           }
div.resIcon {
    position    : absolute;
    width       : 100%;
    height      : 100%;
    white-space : nowrap;
    line-height : 1.25em;
    font-size   : 1.25em;
    text-align  : center;
    font-family : 'Font Awesome 6 Pro';
    color       : #444;
}
div.resIconLeft {
    line-height : 1.25em;
    font-size   : 1.25em;
    font-family : inherit;
    font-size : 1.1em;
    color       : #444;
}

table.planbord div.begintijd{ position: absolute;
                              height: 17px;
                              left: 0px;
                              background-color: #eee;
                              top: -1px;
}
table.planbord div.eindtijd { position: absolute;
                              height: 17px;
                              background-color: #eee;
                              top: -1px;
}
table.planbord tr:hover div.begintijd,
table.planbord tr:hover div.eindtijd {background-color: #CCC;}


div.plantime           { position: absolute;
                         text-align: center;
                         height: 16px;
                         width: 40px;
}
div.plandate           {
                         position: absolute;
                         text-align: center;
                         height: 32px;
                         width: 40px;
                         top: 0px;}

#plandate {font-size: 1.2em; padding: 0 10px 0 10px; vertical-align: top;}

table.planbord.multiday div.plantime { top: 16px; }

table.planbord div.click  { cursor: pointer;}
table.planbord input[type=checkbox] { height:16px; width: 16px; }
table.planbord input[type=radio] { height:16px; width: 16px; }


div.gepland { border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(255,255,255,0.2); }
table.planbord4 div.gepland { border-left: 0px solid #999; border-right: 0px solid #999; }

.resbartext {
    color: #fff;
    position: absolute;
    margin: 0 0 0 2px;
    font-size: 0.95em;
    line-height: 1.3em;
    text-shadow: 1px 1px 1px #999;
}

div.continueleft,
div.res_nopre,
div.overflowleft  { border-left:  0px; }
div.continueright,
div.res_nopost,
div.overflowright { border-right: 0px; }

tr.selected div.res_current  {  background-color: #F00;  }

table.planbord div.overflowleft   { background-image:url(../pictures/moreleft.png);
  background-position:left top;
  background-repeat:no-repeat;
}
table.planbord div.overflowright  { background-image:url(../pictures/moreright.png);
  background-position:right top;
  background-repeat:no-repeat;
}
div.overflowright div.rd,
div.overflowleft div.rd {
  display: inline-block;
}
div.overflowright div.wrap-arrowright,
div.overflowleft div.wrap-arrowleft {
  background-color: white;
  display: flex;
  align-items: center;
  height: 100%;
  width: 10px;
}
div.overflowright div.wrap-arrowright {
  float: right;
  margin-right: -10px;
}
div.overflowleft div.wrap-arrowleft {
  float: left;
  margin-left: -10px;
}
div.overflowright div.arrowright,
div.overflowleft div.arrowleft {
  width: 0;
  height: 0;
  border-top: 18px solid white;
  border-bottom: 18px solid white;
}
div.overflowright div.arrowright {
  border-left-width: 10px;
  border-left-style: solid;
}
div.overflowleft div.arrowleft {
  border-right-width: 10px;
  border-right-style: solid;
}
.ui-resizable-resizing,
.ui-draggable-dragging {
  z-index: 2;
}
.ui-resizable-handle:before {
  font-family: "Font Awesome 6 Pro";
  transform: rotate(90deg);
  content: "\f141";
}
.grid .ui-resizable-handle.ui-resizable-w  { left: 0px; }
.grid .ui-resizable-handle.ui-resizable-e  { right: 0px; }

tr.selected div.overflowright { background-image:url(../pictures/moreright_sel.png); }
tr.selected div.overflowleft  { background-image:url(../pictures/moreleft_sel.png); }

table.planbord tr td.between div { height:16px; }

tr          div.res_nieuw    {  display: none; }
div.grid div.res_nieuw.selected,
tr.selected div.res_nieuw    {  display: block;
                                background-color: #1AD91A;
                             }

/* De volgende regels overrulen mogelijk bovenstaande. */
tr.res_nofit.selected, div.grid div.labelgrid.res_nofit.selected
                             {  display: table-row!important; }
tr.res_nofit td              {  color: #808080; }
tr.res_nofit label,
div.grid div.labelgrid.res_nofit label
                             {  color: var(--fclt-color-red); }
tr.extern td                 {  background-color: #F7F7F7; }

tr.unselected div.res_current:before {
    position: absolute;
    font-family: 'Font Awesome 6 Pro';
    content: "\f00d";
    color: #F00;
    left: 50%;
    margin-left: -0.5em;
}

div.objcatline,div.resexternline
                      { cursor: pointer;
                        background-position: 4px 4px;
                        padding-top: 4px;
                      }
div.resexternline span { padding-left: 20px;}

div.objcatline.closed div.objcatdiv { display: none;}
div.resexternline.closed div.resexterndiv { display: none;}
.resexterntitle {font-size: 1.2em; font-weight: bold;}
.resexterntitle:hover {text-decoration: underline;}

div.objcatline.notavailable { background-image:none;
                              cursor: default;
                            }
div.objcatline.existing { font-weight: bold;
                        }

div.objcatdiv { font-weight: normal;
                color: black;
              }
.resobjtxt {
  font-style: italic;
  margin-left: 10px;
  font-weight: lighter;
}
.addcatering { cursor: pointer }


tr div.res_fatal             {  background-color: #ccc;
  background-repeat: repeat-x;
  background-position: 4px 0;
  background-image:url(../pictures/resdirty.png)!important;
  z-index: 1; }

span.res_fatal,
input[type=text].button.required.res_fatal {
  background-color: var(--fclt-color-bad-contrast)!important;
  border: 1px solid var(--fclt-color-bad);
  background-repeat: no-repeat;
  background-image: url(../pictures/resdirty.png)!important;
  padding-left : 20px;
  z-index: 1;
}

#timetip {position:absolute;border:1px solid #666;background-color:#fff;padding:2px;z-index:999;display:none;}

.res_optie_eigen      { background-color:   var(--aareon-tangerine); color: #fff; }
.res_definitief_eigen { background-color:   var(--aareon-grapefruit); color: #fff; }
.res_optie       { background-color:   var(--aareon-ocean-green); color: #333; }
.res_definitief  { background-color:   var(--aareon-pine-green); color: #fff; }
.res_blok        { background-color:   rgba(255, 255, 255, 0.6); color: #333;} /* bijna als planbordgrid-achtergrond*/
.res_lunchblok   { background-color:   #fffb;} /* bijna als planbordgrid-achtergrond */ /* hex-kleuren met 4 of 8 karakters worden niet in IE11 ondersteund (rgba() wel) */
.res_vervallen   { background-color:   var(--aareon-berry); color: #fff;}
.res_afgemeld    { background-color:   #323033; color: #ddd;} /* Antraciet */
.res_cleaning    { border-left-style:  solid;
                   border-left-color:  #808080;
                   border-right-style: solid;
                   border-right-color: #808080;
                 }
.res_extern { background-color: #4e85db;  color: #fff;} /* Via API (extern_id) gereserveerd */
.res_nietvrij    { background-color:   #B1B3B4; color: #000; } /* Niet beschikbaar: oranje LICHTGROEN */
.res_fatal {
  background-color: var(--fclt-color-red);
  color: var(--fclt-color-red-contrast);
}

@media print
  { /* in print-mode doe we de kleuren als border. Daarmee geeft cleaning wel rare 'punten'. Het zij zo. */
  	div.res_optie_eigen { height:0px!important; border-top:7px solid #E37B00; border-bottom:7px solid #E37B00; } /* Optie eigen reservering: lichtblauw */
  	div.res_definitief_eigen { height:0px!important; border-top:7px solid #009979; border-bottom:7px solid #009979; } /* Definitief eigen reservering: lichtrood */
    div.res_optie      { height:0px!important; border-top:7px solid rgb(238,176,102); border-bottom:7px solid rgb(238,176,102); } /* Optie: blauw ORANJE */
    div.res_definitief { height:0px!important; border-top:7px solid #66C2AF; border-bottom:7px solid #66C2AF; } /* Definitief: rood */
    div.res_blok       { height:0px!important; border-top:7px solid #747578; border-bottom:7px solid #747578; } /* Blokkade: zwart GRIJS*/
    div.res_vervallen  { height:0px!important; border-top:7px solid #AB1455; border-bottom:7px solid #AB1455; } /* Vervallen: paars */
    div.res_nietvrij   { height:0px!important; border-top:7px solid #B1B3B4; border-bottom:7px solid #B1B3B4; } /* Niet beschikbaar: oranje LICHTGROEN */

    table.planbord td.reserv { border:1px solid #888;}
    .plancad           { display: none; }
  }
