.kbcrm_error_message {
    background-color: red;
    color: white;
}

table.kbcrm_zoek_resultaat {
    width: 100%;
    border-collapse: collapse;
}

table.kbcrm_zoek_resultaat tbody tr:hover {
    background-color: #f0f0f0;
}

table.kbcrm_zoek_resultaat th, table.kbcrm_zoek_resultaat td {
    padding: 5px;
    text-align: left;
    border-bottom: 1px solid grey;
}

button.afspraakdetails {
    margin-bottom: 10px;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    font-size: 15px;
}

button.afspraakdetails:before {
    margin-left: -20px;
    /*padding-left: 10px;*/
    opacity: 1;
    position: absolute;
    text-shadow: none;
    font-family: "Font Awesome 5 Free";
    /* font-size: 24px; */
    font-weight: 900;
    font-style: normal;
    font-variant: none;
    line-height: 1em;
    text-transform: none;
    content: "\f103";
    transition: all .2s;
}

button.afspraakdetails.active:before {
    content: "\f102";
}

div.afspraakdetails {
    display: none;
}

div.afspraakdetails.active {
    display: block;
}

.kbcrm_tijdvak_tijd_selectie {
    
}

.kbcrm_tijdvak_datum_selectie {
    margin: 5px 0 5px 0;
    width: 80%;
}

.kbcrm_tijdvak_tijd_selectie {
    margin: 5px 0 5px 0;
    width: 80%;
}

.kbcrm_afspraak_gereedgemeld {
    text-decoration: line-through;
}

/* 
Styling van de planning tabel, for Desktops/Laptops 
*/
table.kbcrm_planning_table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
table.kbcrm_planning_table tr:nth-of-type(odd) { 
  background: #eee; 
}
table.kbcrm_planning_table th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
table.kbcrm_planning_table td, table.kbcrm_planning_table th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left;
  vertical-align: top;
}

table.kbcrm_planning_table thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

table.kbcrm_planning_table td > div.row {
    margin-bottom: 0.5em;
}

table.kbcrm_planning_table td > div.row:not(.last) {
    border-bottom: solid 1px darkgrey;
}

table.kbcrm_planning_table td > div.row > div[class*="col-"] {
    padding: 0;
    margin: 0;
}

table.kbcrm_planning_table td > div.row > div[class*="col-"] > p {
    /*line-height: 1.25;*/
    margin-block-start: 0;
    margin-block-end: 0;
}

table.kbcrm_planning_table td > div.row > div[class*="col-"] form {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px)  {
	/* Force table to not be like tables anymore */
	table.kbcrm_planning_table, table.kbcrm_planning_table thead, table.kbcrm_planning_table tbody, table.kbcrm_planning_table th, table.kbcrm_planning_table td, table.kbcrm_planning_table tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.kbcrm_planning_table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.kbcrm_planning_table tr { border: 1px solid #ccc; }
	
	table.kbcrm_planning_table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 30%;
	}
	
	table.kbcrm_planning_table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 25%;
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	table.kbcrm_planning_table td:nth-of-type(1):before { content: "Datum"; }
	table.kbcrm_planning_table td:nth-of-type(2):before { content: "Afspraken"; }
	table.kbcrm_planning_table td:nth-of-type(3):before { content: ""; }
}

button.planningfilter {
    margin-bottom: 10px;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    font-size: 15px;
}

button.planningfilter:before {
    margin-left: -20px;
    /*padding-left: 10px;*/
    opacity: 1;
    position: absolute;
    text-shadow: none;
    font-family: "Font Awesome 5 Free";
    /* font-size: 24px; */
    font-weight: 900;
    font-style: normal;
    font-variant: none;
    line-height: 1em;
    text-transform: none;
    content: "\f103";
    transition: all .2s;
}

button.planningfilter.active:before {
    content: "\f102";
}

div.planningfilter {
    display: none;
}

div.planningfilter.active {
    display: block;
}