@charset "utf-8";
body {
	-webkit-text-size-adjust: none;
}

.board-table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
	word-break: break-all;
}

.board-table th, .board-table td {
	box-sizing: border-box;
	padding: 0.5em 0.75em;
	border: 1px solid #ccc;
}

.board-table th {
	background-color: #f7f7f7;
	padding: 0.75em;
	color: #555;
}

.board-table th button {
	margin-left: 0.85em;
	padding: 0.25em 0.85em;
	border: 1px solid #a8a8a8;
	border-radius: 4px;
	background: #a8a8a8;
	font-size: 0.75em;
    font-family: "Open Sans";
	color: #fff;
	cursor: pointer;
}

.board-table th button:hover {
	background: #bbb;
}

.board-table td select, .board-table td input {
	box-sizing: border-box;
	padding: 0.5em 0.35em;
	min-width: 7.5em;
	max-width: 100%;
	border-radius: 4px;
	min-height: 2.65em;
	border: 1px solid #ddd;
	font-family: "Open Sans";
    background-color: white;
	font-size: 1em;
	color: #444;
}

.board-table td select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	min-width: 10em;
	background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve'%3E%3Cpath id='XMLID_225_' d='M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A") no-repeat right 0.5em center / 10px;
}

.board-table td input.full {
	width: 100%;
	flex: none;
}

.board-table td input.long {
	width: 30em;
}

.board-table td input.middle {
	width: 20em;
}

.board-table td input.short {
	width: 10em;
}

.board-table td input.center {
	text-align: center;
}

.board-table td input.right {
	text-align: right;
}

.board-table td select.full {
	width: 100%;
	flex: none;
}

.board-table td select.long {
	width: 30em;
}

.board-table td select.middle {
	width: 20em;
}

.board-table td select.short {
	width: 10em;
}

.board-table td textarea {
	box-sizing: border-box;
	padding: 0.5em 0.35em;
	width: 100%;
	border-radius: 4px;
	border: 1px solid #ddd;
	font-family: "Open Sans";
    background-color: white;
	font-size: 1em;
	color: #444;
	resize: none;
}

.board-table td img {
	max-width: 100% !important;
}

.buttons {
	margin: auto;
	padding: 1em 0;
}
.buttons.center {
	text-align: center;
}

.buttons .left {
	float: left;
}

.buttons .right {
	float: right;
}

.board-table td button, .buttons a, .buttons button {
	display: inline-block;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	min-width: 7.5em;
	margin-left: 0.5em;
	padding: 0.6em 1em 0.55em;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #F7F7F7;
	-webkit-box-shadow: 0 1px 0 #CCC;
	        box-shadow: 0 1px 0 #CCC;
	text-align: center;
	text-decoration: none;
    font-family: "Open Sans";
	font-size: 1em;
	color: #555;
	cursor: pointer;
}

.buttons a:hover, .buttons button:hover{
	border-color: #999;
}

.buttons a.gray, .buttons button.gray {
	background: #E0E0E0;
}

.buttons a:first-child, .buttons button:first-child {
	margin-left: 0;
}

.board-table td button {
	min-width: 5em;
	font-size: 11px;
	padding: 0.9em 0.75em 0.92em 0.75em;
	vertical-align: top;
}

@media screen and (max-width: 960px) {
	
}

@media screen and (max-width: 640px) {
	.board-table, .board-table tbody {
		display: block;
	}

	.board_table_wrap .board-table colgroup {
		display: none;
	}
	
	.board-table tbody {
		margin-bottom: 10px;
	}

	.board-table tbody:last-child {
		margin-bottom: 0;
	}

	.board-table tr {
		display: block;
		border: 0;
		margin-bottom: 10px;
	}
	
	.board-table tr:last-child {
		margin-bottom: 0;
	}

	.board-table th, .board-table td {
		display: block;
		border-width: 1px 1px 0 1px;
	}

	.board-table th {
		-webkit-box-flex: 0;
		-ms-flex: none;
		flex: none;
		padding: 0.65em 0.5em;
		width: auto;
		line-height: 1.25;
		text-align: left;
	}

	.board-table td {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 0.5em;
		border-width: 1px;
		margin-bottom: 10px;
	}

	.board-table td select, .board-table td input {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0px;
		flex: 1 1 0px;
	}
	
	.buttons {
		padding: 0.75em 0;
	}

	.buttons a, .buttons button {
		min-width: 6em;
	}

	.board-table tr[class*="group-column"] {
		margin-bottom: 0;
		padding: 7px 7px 0 7px;
		border: 1px solid #ccc;
		border-width: 0 1px;
	}

	.board-table tr[class*="group-column"] th {
		margin-top: 7px;
	}
	
	.board-table tr[class*="group-column"] th:first-child {
		margin-top: 0;
	}

	.board-table tr[class*="group-column"] th.group-title {
		margin: -7px -7px 7px -7px;
		padding: 9px;
		border-width: 1px 0;
		background: #f7f7f7;
		font-weight: bold;
	}
	
	.board-table tr[class*="group-column"] td {
		margin-bottom: 0;
	}
	
	.board-table tr.group-column-last {
		padding: 7px;
		margin-bottom: 10px;
		border-width: 0 1px 1px 1px;
	}
}

@media screen and (max-width: 480px) {
	.board-table tbody td a {
		display: inline-block;
		max-width: 100%;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.buttons a, .buttons button {
		min-width: 5em;
	}
}