aside {
	flex-shrink: 0;
	width: 0;
	padding-top: 3rem;
	color: var(--color--white);
	background-color: var(--color--gray-dark);
	overflow-y: scroll;
	z-index: 5;
	transform: translateX(-100%);
	transition: all 300ms ease-in-out;
}

aside.open {
	width: 15.625rem;
	transform: translateX(0);
	box-shadow: 0 0 8px var(--color--shadow);
	border-right: 1px solid var(--color--gray-light);
}

.control-item {
	display: flex;
	flex-flow: column nowrap;
	text-align: center;
}

.control-item-title {
	padding: 0.375rem;
	font-size: 1.25rem;
	cursor: pointer;
	border-bottom: 1px solid var(--color--gray-light);
}

.control-item-title:hover {
	background-color: var(--color--gray);
}

.control-item-content {
	display: grid;
	font-size: 1rem;
	background-color: var(--color--gray);
	border-bottom: 1px solid var(--color--gray-light);
}

/* ----- LOAD ----- */

#load-from-local,
#load-from-docusky {
	padding: 0.25rem;
	cursor: pointer;
}

#load-from-local:hover,
#load-from-docusky:hover {
	background-color: var(--color--gray-light);
}

/* ----- SETTING ----- */

.setting {
	display: flex;
	padding: 0.25rem;
}

.setting-child {
	width: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.setting-long-child {
	flex-grow: 1;
	text-align: start;
}

/* ----- SEARCH ----- */

#search {
	padding: 0.375rem;
}

.search-btn-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.375rem;
	margin-top: 0.375rem;
}

/* ----- ICON ----- */

.setting.target i.fa-eye,
.setting i.fa-eye-slash,
.setting.target i.fa-toggle-on,
.setting i.fa-toggle-off {
	display: block;
}

.setting i.fa-eye,
.setting.target i.fa-eye-slash,
.setting i.fa-toggle-on,
.setting.target i.fa-toggle-off {
	display: none;
}

/* ----- MY COURPUS LIST ----- */

#my-corpus-list tbody:hover {
	cursor: pointer;
}

#my-corpus-list tbody th,
#my-corpus-list tbody td {
	vertical-align: middle!important;
}

#my-corpus-list tr th:first-child,
#my-corpus-list tr th:last-child,
#my-corpus-list tr td:first-child,
#my-corpus-list tr td:last-child {
	text-align: center;
}

#my-corpus-list i.fa-square-o {
	color: #CED1D2;
}

#my-corpus-list i.fa-check-square {
	display: none;
	color: #0275D8;
}

#my-corpus-list .all i,
#my-corpus-list .select i.fa-square-o {
	display: none;
}

#my-corpus-list .select i.fa-check-square {
	display: block;
}