body {
  color: #696969;
  /*font-family: Gilroy;*/
  font-family: Calibri;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1.74;
}

table.menu {
  border: 2px solid #ccc;
}

table.menu tr:hover { background-color: #99ff99; }
table.menu td {cursor: pointer;}

table.border {
  border-collapse: collapse;
  border: 2px solid #ccc;
}
table.border td {
  border: 1px solid #ccc;
  vertical-align: top;
}
table.border th {
  background-color: #ddd;
}
table.border th, table.border td {
  padding: 4px;
  text-align: left;
}
table.border tr:nth-child(even) {
  background-color: #eee;
}
table.border tr:nth-child(odd) {
  background-color: #fff;
} 
table.border tr.hiddenRow {
  height: 0px;
  padding: 0px;
  margin: 0px;
  font-size: 0px;
  visibility: collapse;
}

tr.hoverRow:hover { background-color: #99ff99 !important; }
tr.currentlyActiveRow { background-color: #e0e0ff !important; }
tr.currentlyActiveRow:hover { background-color: #99ff99 !important; }

td.hoverRow:hover { background-color: #99ff99; }

table.planner {
  border: 2px solid #ccc;
  border-collapse: collapse;
}
table.planner td, table.planner th {
  width: 100px;
  border-left: 1px solid #a0a0a0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
table.planner td:first-child, table.planner th:first-child {
  border-left: none;
}
table.planner td.appointment {
  border: 0px;
  font-size:12px;
  padding: 0;
  margin: 0;
  text-align: center;
  vertical-align:middle;
}
table.planner td.blocked {
  border: 0px;
  text-align: center;
  background-color: #aaa;
}
table.planner td.timeslot {
  border: 0px;
  text-align: center;
  color: #ccc;
}
table.planner td.appointment:hover {
  -webkit-filter: invert(0);
  filter: invert(0);
  cursor: pointer;
}
table.planner td.free:hover {
  background-color: #7be67b;
  color: black;
  cursor: pointer;
}
table.planner td.filler {
  height: 4px;
  width: 1px;
  border: 0px;
}
table.planner td.time {
  border: 0px;
  vertical-align: top;
  text-align: center;
  font-size:16px;
}
table.planner th.time {
  border: 0px;
}

table.planner td.inactive {
  background-image: radial-gradient(#606060 1px, transparent 1px);
  background-size : 3px 3px;
}

/**** begin styles voor popups ****/

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  border: 3px solid #f1f1f1;
  z-index: 9;
  overflow-x: auto;
  overflow-y: auto;
}

/* Styles bij popup voor toevoegen/wijzigen records aan tabel (variabele breedte en hoogte, tot max 75% van scherm) */
.form-popup-table {
  padding: 20px;
  max-width: 75%;
  max-height: 75%;
  background-color: white;
}

/* Add styles to the form container */
.form-container {
  padding: 00px;
  background-color: white;
}

/* Full-width input fields */
.form-container select,
.form-container input[type=text], .form-container input[type=password], .form-container input[type=email], .form-container input[type=number]
{
  width: 90%;
  padding: 12px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

.form-container p.readonly {

  width: 90%;
  padding: 10px;
  margin: 5px 0 22px 0;
  border-style: solid;
  border-color: #f1f1f1;

}

/* When the inputs get focus, do something */
.form-container select:focus,
.form-container input[type=text]:focus, .form-container input[type=password]:focus, .form-container input[type=email]:focus, .form-container input[type=number]:focus
{
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.cancel {
  background-color: red;
}

.delete {
  background-color: rgba(211, 211, 211, 0.5);
  color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

/**** einde styles voor popups ****/

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -70px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }

  label.small  {
    font-size:16px;
  }

  /*** appointment tooltip (in planner) ***/
  .app_tooltip span {
    top: 20px;
    left: -150px;
    width: 250px; 
    border: #000 1px solid;
    padding: 10px;
    z-index: 1000000;
    display: none;
    opacity: 0;
    transition: 750ms all;
}
.app_tooltip:hover span {
    position: absolute;
    outline: none;
    text-decoration: none;
    display: inline;
    font-size: 150%;
    
    opacity: 1;
}

.error {
  color: red;
}