:root {
	--bg-color-white: #fff;
	--bg-color-blue: #06a2f9;
	--bg-color-grey: #f2f2f2;
	--bg-color-green: #3ab700;
	--text-color-white: #fff;
	--text-color-black: #484848;
	--text-color-blue: #06a2f9;
	--text-color-grey: #afafaf;
	--border-color-grey: #afafaf;
	--border-color-blue: #06a2f9
}

div.table table.dienstregeling {
	width: 100%;
	border-collapse: unset !important;
	border-spacing: 0;
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-left: 1px solid #777;
	border-right: 1px solid #777;
	border-bottom: 1px solid #777;
	box-sizing: border-box
}

div.table table.dienstregeling tr {
	position: relative;
	transition: all .1s ease
}

div.table table.dienstregeling tr th {
	background: var(--bg-color-green);
	padding: 5px 0;
	color: #fff;
	text-align: center;
	border: 0;
}

div.table table.dienstregeling tr td {
	text-align: center;
	padding: 5px 0;
	transition: font-size .2s ease;
	width: 20px;
	position: relative;
	border-bottom: 1px #ccc solid;
	border-right: 1px #ccc solid
}

div.table table.dienstregeling tr td.halte:is(:empty),
div.table table.dienstregeling tr.text td.halte {
	border: 0
}

div.table table.dienstregeling tr:nth-child(even) td  {
	background: rgba(0, 0, 0, 0.1)
}

div.table table.dienstregeling tr th:nth-child(1), div.table table.dienstregeling tr td:nth-child(1) {
	padding-left: 1em;
	 min-width:20vw;
}

div.table table.dienstregeling tr td:not(.halte):not(.text):hover::before {
	background-color: #ffa;
	content: '';
	height: 10000px;
	left: 0;
	position: absolute;
	top: -5000px;
	width: 100%;
	z-index: -1;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
}

div.table table.dienstregeling tr:not(.text) td:not(.text):hover::after {
	background-color: #ffa;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	content: '';
	height: 100%;
	left: -5000px;
	position: absolute;
	top: 0;
	width: 10000px;
	z-index: -1
}

div.table table.dienstregeling tr td.tijd {
	min-width: 48px
}

div.table table.dienstregeling tr td.tijd.hasRemark {
	border: 1px solid #3C434A;
	background-image: url('../images/remark_fe.png');
	background-position: top right;
}

div.table table.dienstregeling tr td.name {
	text-align: left;
	padding: 0 10px;
	min-width: 250px;
	box-sizing: border-box;
	white-space: nowrap
}

div.table table.dienstregeling tr .halte {
	text-align: left;
	width: 400px
}
div.table table.dienstregeling tr td.halte.hasRemark {
	background-image: url('../images/busstop_remark_fe.png');
	background-position: 0px 2px;
	background-repeat: no-repeat;
}

div.table table.dienstregeling tr td.blauw {
	background: var(--bg-color-green);
	color: #fff;
	text-align: center
}

div.table table.dienstregeling{
	border-style:solid;
	border-color:black;
	border-width:2px
}

.hasRemark{
	position:relative;
}

.cellRemark{
	display: none;
	position: absolute; 
	z-index: 100;
	border: 1px;
	background-color: white;
	border-style: solid;
	border-width: 3px;
	border-color: var(--bg-color-green);
	border-radius: 5px;
	padding: 1em;
	color: black; 
	top: 20px; 
	left: 40px;
	min-width: 100px;
}

.hasRemark:hover span.cellRemark{
	display:block;
}

/*
table { border-collapse: collapse; }
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

*/

div.table table.rooster {
	width: 100%;
	border-collapse: unset !important;
	border-spacing: 0;
	position: relative;
	z-index: 1;
	border-left: 1px solid #777;
	border-right: 1px solid #777;
	border-bottom: 1px solid #777;
	box-sizing: border-box
}
div.table::-webkit-scrollbar {
    display: none;
}
div.table table.rooster thead {
    position: sticky !important;
    top: 0;
    background-color: white;
    z-index: 999;
	overflow: scroll;
}

div.table table.rooster tr {
	position: relative;
	transition: all .1s ease
}

div.table table.rooster tr td, div.table table.rooster tr th {
	text-align: center;
	padding: 5px 0;
	transition: font-size .2s ease;
	width: 20px;
	position: relative;
	border-bottom: 1px #ccc solid;
	border-right: 1px #ccc solid
}

.\31 A,
.\31 B {
	background: yellow !important;
}
.\32 A,
.\32 B {
	background: #42cd42 !important;
}
.\33 A,
.\33 B {
	background: #4bc3ff !important;
}
.\34 A,
.\34 B {
	background: orange !important;
}

.zaterdag.\31 A,
.zaterdag.\31 B {
	background: #954600c7 !important;
}
.zaterdag.\32 A,
.zaterdag.\32 B {
	background: red !important;
}
.zaterdag.\33 A,
.zaterdag.\33 B {
	background: #d374d3 !important;
}

div.table table.rooster tr:nth-child(even) td  {
	background: rgba(0, 0, 0, 0.1)
}


div.table table.rooster tr th:nth-child(1), div.table table.rooster tr td:nth-child(1) {
	padding-left: 1em;
	min-width: 200px;
	text-align: left;
}

div.table table.rooster tr td:hover::before {
	background-color: #ffa;
	content: '';
	height: 10000px;
	left: 0;
	position: absolute;
	top: -5000px;
	width: 100%;
	z-index: -1;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
}

div.table table.rooster tr td:hover::after {
	background-color: #ffa;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	content: '';
	height: 100%;
	left: -5000px;
	position: absolute;
	top: 0;
	width: 10000px;
	z-index: -1
}

div.table table.rooster tr td.hasRemark {
	border: 1px solid #3C434A;
	background-image: url('../images/remark_fe.png');
	background-position: top right;
}

div.table table.rooster{
	border-style:solid;
	border-color:black;
	border-width:2px

}
.rooster .cellRemark{
	top: 15px; 
	left: 20px;
}

tr.number_of_drivers {
	display:none;
}


@media (max-width: 782px) {

div.table table.rooster thead {
    position: sticky !important;
    top: 0;
    background-color: white;
    z-index: 999;
	overflow: scroll;
}


div.table table.dienstregeling tr td.halte {
	padding-left: 1em;
	min-width:60vw;
}


}