.space {
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	height: 25px;
	padding-top: 5px;
	text-align: center;
	width: 33px;
}
.nomorGerbong {
	background-color: #ffffff;
	border: 1px solid #000000;
	color: #000000;
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	height: 27px;
	padding-top: 6px;
	text-align: center;
	width: 35px;
}
.nomorGerbong:hover {
	background-color: #609450;
	color: #ffffff;
}
.nomorGerbong.active {
	background-color: #4a8bc2;
	color: #ffffff;
}
.space-empty {
	display: inline-block;
	font-size: 12px;
	height: 10px;
	text-align: center;
	width: 30px;
}
.green {
	background-color: #609450;
	color: #ffffff;
}
.green.active {
	background-color: #4a8bc2 !important;
	color: #ffffff;
}
.green:hover {
	background-color: #4a8bc2;
}
.red {
	background-color: #bd362f;
	color: #ffffff;
}
.gerbong {
	background-color: #fff;
	border: 2px solid #000;
	border-collapse: separate !important;
	border-radius: 130px 5px 5px 130px;
	border-spacing: 5px !important;
	margin-left: 50px;
	padding: 5px;
	width: 1000px;
}
.gerbongTitle {
	font-weight: bold;
	text-align: center;
}
.gerbongBox {
	background-color: #ffffff;
	padding: 10px;
}


.gerbong-wrapper {
	position: relative;
	height: 260px;
	margin: 10px auto;
	padding: 15px;
	overflow: hidden;
	background: #fff;
}
.gerbong-wrapper ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gerbong-wrapper ul > li.gerbong-list {
	position: absolute;
	display: block;
	float: left;
	margin: 0 0 15px;
	padding: 0;
	top: 0;
	width: 100%;
}
.gerbong-wrapper table {
	margin-bottom: 0;
}
.gerbong-wrapper .gerbong-title {
	padding: 5px 0 15px;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
}
.gerbong-wrapper .gerbong-list #flip-scroll {
	margin-left: 19px;
}
.gerbong-wrapper .gerbong-list .gerbong-head {
	position: absolute;
	width: 20px;
	height: 130px;
	margin-top: 12px;
	padding: 10px 0;
	border: 1px solid #ddd;
	text-align: center;
}
.gerbong-wrapper .gerbong-list .gerbong-head .inside-line {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 100%;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.gerbong-pagination {
	position: relative;
	margin: 10px 0 30px;
	text-align:center;
}
.gerbong-pagination ul > li {
	display: inline-block;
	margin-left: 5px;
}
.gerbong-pagination ul > li:first-child {
	margin-left: 0;
}
.gerbong-pagination ul > li.active a.btn {
	background: #B83D25;
	border-color: #B83D25;
	color: #fff;
}


#flip-scroll td.spacer{
	border-top: 0;
	border-left: 0;
	border-right: 0;
}
#flip-scroll td.spacer > *{
	height: 30px;
	width: 100%;
	padding: 5px 10px;
	background: #fff;
	font-size: 12px;
	line-height: 1.5;
}


/**
=================================
TABLET < 800px
=================================
**/
@media (max-width: 800px) {


	/**
	-------------------------------------------
	TABLE RESPONSIVE FLIP
	-------------------------------------------
	**/
	#flip-scroll .cf:after{
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
    #flip-scroll * html .cf{
    	zoom: 1;
    }
    #flip-scroll *:first-child+html .cf{
    	zoom: 1;
    }
    #flip-scroll table{
    	width: 100%;
    	border-collapse: collapse;
    	border-spacing: 0;
    }

    #flip-scroll th,
    #flip-scroll td{
    	margin: 0;
    	vertical-align: top;
    }
    #flip-scroll th{
    	text-align: left;
    }
    #flip-scroll table{
    	display: block;
    	position: relative;
    	width: 100%;
    }
    #flip-scroll thead{
    	display: block;
    	float: left;
    }
    #flip-scroll tbody{
    	display: block;
    	width: auto;
    	position: relative;
    	overflow-x: auto;
    	white-space: nowrap;
    }
    #flip-scroll thead tr{
    	display: block;
    }
    #flip-scroll th{
    	display: block;
    	text-align: right;
    }
    #flip-scroll tbody tr{
    	display: inline-block;
    	vertical-align: top;
    }
    #flip-scroll td{
    	display: block;
    	min-height: 1.25em;
    	text-align: left;
    }

    /* sort out borders */
    #flip-scroll th{
    	border-bottom: 0;
    	border-left: 0;
    }
    #flip-scroll td{
    	border-left: 0;
    	border-right: 0;
    	/*border-bottom: 0;*/
    }
    #flip-scroll tbody tr{
    	border-left: 1px solid #babcbf;
    }
    #flip-scroll tbody tr:last-child{
    	border-right: 1px solid #babcbf;
    }
    #flip-scroll th:last-child,
    #flip-scroll td:last-child{
    	border-bottom: 0;
    }

	#flip-scroll td.seat-num{
    	width: 60px;
    }
    #flip-scroll td.spacer{
    	width: 50px;
    	border-color: #fff;
    }

	/**
	-------------------------------------------
	GERBONG RENDER FLIP
	-------------------------------------------
	**/
    .gerbong-wrapper{
		height: 500px;
		overflow-y: auto;
	}
	.gerbong-wrapper .gerbong-list #flip-scroll{
		margin-left: 0;
	}
	.gerbong-wrapper .gerbong-list #flip-scroll table{
		display: inline-block;
		width: auto;
	}
	.gerbong-wrapper .gerbong-list #flip-scroll tbody{
		display: inline-block;
	}
	.gerbong-wrapper .gerbong-list .gerbong-head, .gerbong-wrapper .gerbong-list .gerbong-head .inside-line{
		display: none;
	}

}