@charset "utf-8";

/* 로그인 */
.login-box {
	min-width: 20rem;
	padding: 3rem 2rem;
	box-shadow: 0 0 10px var(--dark20);
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

.login-box .logo-box {
	margin-bottom: 1.5rem;
	width: 12rem;
}

.login-box input {
	border: none;
	box-sizing: border-box;
	padding: 1rem 0.8rem;
	margin-bottom: 1rem;
}

.login-box button {
	padding: 1rem;
	margin-top: 0.5rem;
	cursor: pointer;
}

/* 검색 */
.search-box {
	padding: 1rem 1.5rem;
	margin-bottom: 1rem;
	overflow: hidden;
}

.search-title {
	margin-right: 1rem;
}

.search-box input[type="text"], .search-box select, .info-tab input[type="text"],
	.info-tab input[type="password"] {
	padding: 10px 8px;
	margin-right: 0.25rem;
	border: 1px solid var(--dark20);
	border-radius: 4px;
}

.sch-group svg {
	margin: 0 0.25rem 0 0.5rem;
}

.sch-group span {
	margin: 0 0.25rem;
	line-height: 2;
}

.sch-group button {
	border: 0;
}

.sch-group button svg {
	width: 0.8rem;
}

.sch-group .date-picker {
	max-width: 100px;
}

/* 엑셀 다운로드 버튼 */
.print-btn {
	padding: 0.5rem;
	margin-bottom: 0.8rem;
}

.print-btn:hover {
	background-color: var(--primary50);;
}

/* 참여자 목록 */
.tb-box {
	box-shadow: 0 0 10px var(--dark20);
}

.list-tb, .view-tb {
	overflow: hidden;
	table-layout: fixed;
	border-collapse: collapse;
	border-style: hidden;
}

.userStatistics-box {
	overflow-x: auto;
}

.userStatistics-list {
	min-width: 2400px;
}

.list-tb td {
	padding: 1rem 0.25rem;
}

.list-tb th {
	padding: 0.65rem 0.5rem;
}

.list-tb tr {
	border-bottom: 1px solid var(--dark20);
}

.list-tb tbody tr:hover {
	background-color: var(--primary10);
}

.list-tb td, .table-detail {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-date {
	font-size: 0.85rem;
}

/* 페이지네이션, 페이징 */
#pagination{
	width:max-content;
}

/* 상세 페이지 */
.view-content-title {
	padding: 2rem 2rem 0.8rem 2rem;
}

.view-content {
	padding: 0 2rem;
}

.view-tb tr, .view-tb td {
	border: 1px solid var(--dark20);
}

.view-tb td {
	padding: 1rem;
}

.view-tb {
	padding: 1rem;
}

.pop-none-es.off {
	display: none;
}

.pop-none-es.on {
	display: table-row;
}

/* 특이사항 입력 */
#remarks {
	background: transparent;
	border: none;
	padding: 0;
	height: auto;
	font-size: 1rem;
}

#remarks:focus {
	box-shadow: none;
}

/* 삭제, 뒤로 버튼 */
.btn-group {
	margin-top: 3rem;
}

.save-btn, .back-btn {
	padding: 0.8rem 2.5rem;
	font-size: 0.9rem !important;
	line-height: 1;
	margin: 0 0.25rem;
	cursor: pointer;
}

.back-btn:hover, .save-btn:hover {
	background-color: var(--primary);
}

/* 시설별 사용 통계 */
.sch-group label {
	margin-right: 0.5rem;
}

.chart-box {
	margin-top: 2rem;
}

#user-number {
	margin-top: 1rem;
	flex-wrap:wrap;
}

#user-number p {
	margin-right: 1rem;
}

#user-number p>span {
	padding: 0.1rem 0.5rem;
	margin-right: 0.5rem;
}

/* 계정 */
.info-tab {
	padding: 1rem;
}

.info-tab th, .info-tab td {
	padding: 0.5rem;
}

.info-tab input {
	padding: 0.5rem;
}

.info-btn {
	margin-top: 1rem;
	padding: 0.5rem 1rem;
}

.info-btn:hover {
	background: var(--primary);
}

/* QR 생성 */
.qr-content .bt_search {
	margin-right: 0.25rem;
}

#qr-box {
	padding: 1rem;
}

#url {
	margin-top: 1rem;
}

#url>span {
	display: inline-block;
	padding: 0.15rem 0.75rem;
	margin-right: 0.5rem;
}

/* 태블릿, 모바일 반응형 */
@media all and (max-width: 1023px) {
	.body-container {
		position: relative;
	}
	/* 좌측 메뉴 */
	#menu {
		position: absolute;
		width: 45%;
		max-width: 400px;
		z-index: 100;
		height: 100%;
	}
	#menu.off {
		width: 0;
	}
	.tab-none {
		display: none;
	}
	.tab-sub::after {
		content: '';
		background: #2F3532;
		width: 210px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	header>.head {
		padding: 0.8rem;
	}
	#container .lcontent {
		position: absolute !important;
	}
	.menu_toggle {
		top: 120px;
	}
	#container .rcontent {
		margin-left: 0;
		padding: 3rem 0.8rem;
	}
	/* 검색 */
	.search-box {
		padding: 0.5rem 1rem;
	}
	.sch-group button svg {
		width: 0.6rem;
	}
	/* 테이블 */
	.list-tb th, .list-tb td {
		font-size: 0.7rem;
		padding: 0.5rem 0.25rem;
	}
	.list-tb .list-date {
		font-size: 0.65rem;
	}

	/* 페이지 타이틀 */
	.content-title {
		margin: 0 0 1rem 0;
		padding: 1rem 2rem 0.5rem 2rem;
		border-bottom: 1px solid var(--dark20);
	}
	.content-title p {
		font-size: 1rem;
	}
	.content-title>p:first-of-type::after {
		bottom: -0.5rem;
	}
	#content {
		width: 100vw;
		box-sizing: border-box;
		padding: 0 2rem;
	}
}

/* 모바일 반응형 */
@media all and (max-width: 768px) {
	.mobile-only {
		display: block;
	}

	/* 로그인 */
	.login-box {
		width: 80%;
		box-shadow: none;
		min-width: 10rem;
		padding: 0;
	}

	/* 좌측 메뉴 */
	#menu {
		width: 78%;
		max-width: none;
	}

	/* 메인 */
	.top_menu {
		margin-top: 12px;
	}
	header>.head {
		-webkit-box-orient: vertical;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.search-box {
		padding: 0;
		background: none;
	}
	.search-box input[type="text"] {
		width: 50%;
		min-width: auto;
	}
	.scroll-notice {
		margin-top: 1rem;
	}
	.tb-box {
		overflow-x: scroll;
	}
	.list-tb {
		min-width: 900px;
	}
	.userStatistics-list {
		min-width: 1800px;
	}
	.list-tb th, .list-tb td {
		font-size: 0.85rem;
		padding: 0.5rem 0.25rem;
	}
	.list-tb .list-date {
		font-size: 0.8rem;
	}
}