@charset "UTF-8";

/* Scroll Bar */
::-webkit-scrollbar {
	width: 15px;
	display: block;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: #bbb;
	border-radius: 10px;
	background-clip: padding-box;
	border: 3px solid transparent;
}

/* Layout */
body {
	background: #f2fffb !important;
}
.header {
	display: flex;
	position: fixed;
	width: 100%;
	height: 60px;
	transition: 0.3s;
	padding: 20px 35px;
	color: white;
	background: linear-gradient(120deg, #46bccb, #80c290);
    border-bottom: solid 1px #5dc0b2;
    box-shadow: 1px 3px 5px #d6d6d6;
}
.header .header-left, .header .header-title, .header .header-right {
	flex: 1;
	font-size: 1.3rem;
	align-self: center;
}
.header span[role=timer]:before {
	content: '\f017';
	font-family: 'Font Awesome 6 Free';
	font-weight: 600;
	margin-right: 0.3rem;
}

.header .header-left {
	text-align: left;
}

.header .header-right {
	text-align: right;
}

.header .logo {
	height: 35px;
}
.header .header-title {
	font-size: 1.7rem;
	font-weight: 600;
	flex: 2.5;
	text-align: center;
}

.contents {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: fixed;
	overflow: none;
	width: 100%;
	padding: 20px;
	margin-top: 60px;
	height: calc(100% - 60px);
    background: linear-gradient(120deg, #3dc3d40d, #a5deb30d)!important;
}

.room-container {
	height: 20%;
}
.seat-container {
	height: 80%;
	width: 100%;
	display: flex;
	overflow: auto;
	border: solid 1px #dddd;
	background: white;
	flex-direction: column;
    align-items: center;
}

.room-container, .seat-container {
	border-radius: 0.28571rem;
	box-shadow: 1px 1px 5px #ddd;
}
.seat-container table {
	border-collapse: initial;
	border-spacing: 1px;
	align-self: baseline;
	display: contents;
}
.seat-container ul li span {
	margin-right: 0px;
}
.seat-container ul li {
	margin-right: 10px;
}

.seat-container table > div {
	margin-left: 0px;
}
.seat-container div[role="seat"] {
	margin-bottom: 1rem;
}
.seat-container div[role="seat"] tbody {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.seat-container .seat {
	font-size: 0.75rem;
	height: 40px;
    width: 40px;
    background: #dedede;
    border: solid 1px white;
    color: white;
    text-align: center;
    border-radius: 5px;
    cursor: default;
}
.seat-container .seat.no-seat {
	background: transparent;
	border-color: transparent;
}
.seat-container .seat-sex-m {
	background: #3ea7eb;
    color: white;
}
.seat-container .seat-sex-f {
	background: #fb7f95;
    color: white;
}

.seat-container .seat.seat-use-1{
	background: #3dc3d4;
}

.seat-container .seat.seat-use-9{
	background: #c1c1c1;
}

.seat-container .seat.seat-use-10{
	background: #fc880d;
}
/* Tabulator */
.tabulator .tabulator-footer {
	padding: 0px 0.78571em;
}
.tabulator .tabulator-row {
    height: 32px!important;
}
.tabulator .tabulator-headers, .tabulator .tabulator-headers .tabulator-col {
	height: 35px!important;
}
.tabulator-row .tabulator-cell {
	padding: 0.2rem 0.55rem !important;
}

.tabulator-row.tabulator-selectable:not(.tabulator-selected):not(.tabulator-calcs):hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active:hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active:hover {
	background-color: #d8f0ff !important;
	color: #0684d5 !important;
}


/* orange Theme */
body[data-theme="orange"] {
	background: #fffefd !important;
}
body[data-theme="orange"] .header {
	background: white;
	border-bottom: none;
	box-shadow: 1px 3px 5px #f0f0f0;
}

body[data-theme="orange"] .header .logo {
	display: none;
}
body[data-theme="orange"] span[role="data"][data-target="library_name"] img {
	filter: none;
}

body[data-theme="orange"] .header .header-left,
body[data-theme="orange"] .header .header-title,
body[data-theme="orange"] .header .header-right {
	color: #ff7900;
	font-size: 1.2rem;
}
body[data-theme="orange"] .header .header-title {
	font-size: 1.5rem;
}
body[data-theme="orange"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active,
body[data-theme="orange"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active {
	background-color: #ffefd9 !important;
}

body[data-theme="orange"] .zoom-size {
	color: #ff7900;
}

body[data-theme="orange"] .zoom-size .btn {
    border-color: #ff7900;
    color: #ff7900;
}
body[data-theme="orange"] .zoom-size .btn:hover {
	background: #ffd0a5;
}

body[data-theme="orange"] ::-webkit-scrollbar-thumb {
	background-color: #fde6d4;
}
/* PC */
@media (max-width: 1280px) {
	.header, .footer {
		padding: 20px 30px;
		height: 60px;
	}
	.contents {
		margin-top: 60px;
		height: calc(100% - 60px);
		gap: 30px;
		padding: 10px 20px;
	}
}
/* Tablets */
@media (max-width: 1090px) {
	.header, .footer {
		padding: 20px 25px;
	}
	.contents {
		gap: 25px;
		padding: 10px 25px;
	}
	.header .header-left, .header .header-title, .header .header-right {
		font-size: 1rem;
	}
	.header .header-title {
		font-size: 1.5rem;
	}
}
/* Mobile */
@media (max-width: 790px) {
	.header {
		height: 50px;
		padding: 10px 15px;
	}
	.contents {
		gap: 10px;
		padding: 10px 15px;
		margin-top: 50px;
		height: calc(100% - 50px);
	}
	.header .header-left, .header .header-title, .header .header-right {
		font-size: 1rem;
	}
	.header .header-title {
		font-size: 1.3rem;
	}
	.header .header-title img {
		height: 25px;
	}
}
@media (max-width: 600px) {
	.contents {
		gap: 15px;
		padding: 10px 15px;
	}
	.header {
		height: 40px;
	}
	.contents {
		margin-top: 40px;
		height: calc(100% - 40px);
	}
	.header .header-left, .header .header-title, .header .header-right {
		font-size: 0.8rem;
	}
	.header .header-title {
		font-size: 1.1rem;
		flex: 3.1;
	}
	.header .header-title img {
		height: 20px;
	}
	.header span[role=timer]:before {
		content: ''
	}
}
@media (max-width: 500px) {
	.header .header-left, .header .header-title, .header .header-right {
		font-size: 0.8rem;
	}
	.header .header-title {
		font-size: 1rem;
		flex: 3.1;
	}
	.header .header-title img {
		height: 20px;
	}
	.header span[role=timer]:before {
		content: ''
	}
}