.trein{
	padding: 70px 0 5px;
	display: inline-block;
}
.trein.nopadding{
	padding: 40px 0 10px;
}

.trein .voorkant,
.trein .wagon{
	display: inline-block;
	height: 90px;
}
.trein .voorkant{
	background: url('../images/trein/voorkant.svg') no-repeat;
	background-size: contain;
	width: 60px;
}
.trein .wagon{
	background: url('../images/trein/wagon.svg') no-repeat;
	background-size: contain;
	width: 90px;
	position: relative;
}
.trein .wagon::after{
	content: "";
	position: absolute;
	top: 32px;
	left: 49px;
	font-size: 11px;
	display: block;
	color: #ffffff;
}
.trein .wagon::before{
	content: attr(data-number);
	border: 1px solid #000;
	width: 26px;
	height: 26px;
	padding: 5px;
	border-radius: 50%;
	display: block;
	position: absolute;
	top: -35px;
	left: 50%;
	margin-left: -13px;
	line-height: 13px;
	text-align: center;
	color: #000;
}
.trein .wagon.active::before{
	background-color: #5acf14;
	border-color: #5acf14;
	color: #fff;
}
.trein .wagon.formklikbaar { cursor: pointer;}
.trein .wagon.exceptionformklikbaar { cursor: pointer;}

.deel div.bezet { cursor: pointer;}
.deel div.samenplaatsing { cursor: pointer;}
.deel div.medereizigers { cursor: pointer;}
.deel div.klikbaar { cursor: pointer;}
.deel div.klikbaar:hover { background-color: #efefef;}

.trein .wagon span{
	position: absolute;
	top: 32px;
	left: 24px;
	font-size: 11px;
}

.trein .wagon.zp{
	background-image: url('../images/trein/wagon_zp.svg');
}
.trein .wagon.zp:after{
	left: 49px;
	content: "ZP";
}
.trein .wagon.b{
	background-image: url('../images/trein/wagon_b.svg');
}
.trein .wagon.b:after{
	left: 52px;
	content: "B";
}
.trein .wagon.llp{
	background-image: url('../images/trein/wagon_llp.svg');
}
.trein .wagon.llp:after{
	left: 47px;
	content: "LLP";
}
.trein .wagon.ec{
	background-image: url('../images/trein/wagon_ec.svg');
}
.trein .wagon.ec:after{
	left: 47px;
	content: "EC";
}
.trein .wagon.cc{
	background-image: url('../images/trein/wagon_cc.svg');
}
.trein .wagon.cc:after{
	left: 47px;
	content: "CC";
}

.top-buffer { margin-top:20px; }

.legenda{
	display: block;
	padding-top: 50px;
}
.legenda > span{
	display: block;
}
.legenda > span::before{
	content: "";
	width: 10px;
	height: 10px;
	background-color: #ffffff;
	display: inline-block;
	margin-right: 6px;
	border: 1px solid #798487;
}
.legenda > span.zitwagon::before{ background-color: #00aeef; }
.legenda > span.luxeligplaatswagon::before{ background-color: #BE1E2D; }
.legenda > span.barwagon::before{ background-color: #231f20; }

.treinindeling-wrap{
	overflow-x: scroll;
	overflow-y: hidden;
	
}
.treinindeling{
	max-width: 100000px;
	height: 200px;
	background-color: #fff;
	border: 1px solid #000;
	counter-reset: deel;
}
.treinindeling .deel{
	width: 100px;
	height: 90%;
	// margin-right: 10px;
	display: inline-block;
	border: 1px solid #000;
	position: relative;
	float: left;
}
.treinindeling .deel:after{
	counter-increment: deel;
	content: counter(deel);
	display: block;
	position: absolute;
	left: calc(50% - 10px);
	top: calc(50% - 10px);
	width: 20px;
	height: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
}
.treinindeling .deel div{
	height: calc(100% / 3);
	width: 30%;
	display: inline-block;
	position: absolute;
	text-align: center;
	background-color: #fff;
}
.treinindeling .deel div span{
	height: 20px;
	width: 20px;
	left: calc(50% - 10px);
	top: calc(50% - 10px);
	position: absolute;
}
.treinindeling .deel div:nth-of-type(1){top: 0; border-right: 1px solid #000; border-bottom: 1px solid #000; }
.treinindeling .deel div:nth-of-type(2){top: calc(100% / 3 ); border-right: 1px solid #000; border-bottom: 1px solid #000; }
.treinindeling .deel div:nth-of-type(3){top: calc(100% / 3 * 2); border-right: 1px solid #000; }
.treinindeling .deel div:nth-of-type(4){top: 0; right: 0; border-left: 1px solid #000; border-bottom: 1px solid #000; }
.treinindeling .deel div:nth-of-type(5){top: calc(100% / 3 ); right: 0; border-left: 1px solid #000; border-bottom: 1px solid #000; }
.treinindeling .deel div:nth-of-type(6){top: calc(100% / 3 * 2); right: 0; border-left: 1px solid #000; }

.treinindeling .deel div.hoofdboeker{ background-color: #01ff24; }
.treinindeling .deel div.bezet{ background-color: #ed1c24; }
.treinindeling .deel div.medereizigers{ background-color: #39b54a; }
.treinindeling .deel div.samenplaatsing{ background-color: #36b8ea; }

span.hoofdboeker{ color: #39b54a; font-style: italic; }

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}


.coupe{
	margin-left: 0;
	margin-right: 0;
}
.coupe-cell{
	border: 1px solid #e4e4e4;
	padding-top: 12px;
	padding-bottom: 12px;
	min-height: 120px;
}
.coupe-cell p {
	margin-bottom: 0;
}

.coupe-cell .ticket-number {
	word-break: break-all;
}

ul.nav.nav-tabs.padding-18 {
	max-height:66px;
}
ul.nav.nav-tabs.padding-18:after {
	display: block!important;
}
[data-toggle="collapse"] .arrow:after{
	content: "\f077";
	font-family: FontAwesome;
	display: inline-block;
	padding-left: 10px;
}
[data-toggle="collapse"].collapsed .arrow:after{
	content: "\f078";
}
.group-header {
	display: inline-block;
	margin-left: 1rem;
}
.field-hint {
	background-color: rgba(238, 209, 33, 0.25);
	border-radius: 3px;
	padding: 0.5rem 1rem;
}
.field-hint.yesno {
	position: absolute;
}
.field-hint::before {
	display: none !important;
}