@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
	list-style: none;
	text-decoration: none;
	margin: 0;
	box-sizing: border-box;
}

html {
	height: 100%;
	font-size: 10.56px;
}
html body {
	height: fit-content;
	line-height: 1.5;
	margin: 5rem 0 0 5rem;
	font-family: 'Titillium Web', sans-serif;
	background-color: #eeeeee;
	color: black;
	cursor: default;
}

@media screen and (min-width: 100px) { html { font-size:5.28px;} }
@media screen and (min-width: 200px) { html { font-size: 7.04px;} }
@media screen and (min-width: 300px) { html { font-size: 7.92px;} }
@media screen and (min-width: 400px) { html { font-size: 8.8px;} }
@media screen and (min-width: 500px) { html { font-size: 9.68px; } }
@media screen and (min-width: 700px) { html { font-size: 11.44px; } }
@media screen and (min-width: 800px) { html { font-size: 12.32px; } }
@media screen and (min-width: 900px) { html { font-size: 12.32px; } }
@media screen and (min-width: 1000px) { html { font-size: 12.32px; } }
@media screen and (min-width: 1100px) { html { font-size: 12.32px; } }
@media screen and (min-width: 1200px) { html { font-size: 12.32px; } }
@media screen and (min-width: 1300px) { html { font-size: 13.2px; } }
@media screen and (min-width: 1400px) { html { font-size: 12.08px; } }
@media screen and (min-width: 1500px) { html { font-size: 14.96px; } }
@media screen and (min-width: 1600px) { html { font-size: 15.94px; } }
@media screen and (min-width: 1700px) { html { font-size: 16.72px; } }
@media screen and (min-width: 1800px) { html { font-size: 17.6px; } }

.breadcrumb {
	position: fixed;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 2rem;
	background-color: #c8c8c8;
	border-style: solid;
	border-width: 1px 0 1px 0;
	border-color: gray;
	z-index: 100;
}
.breadcrumb .top-title {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0 5rem;
	color: var(--info-font-color);
	font-weight: bold;
}
.breadcrumb .top-title a {
	color: var(--info-font-color);
	text-decoration: underline;
}
.wrapper {
	margin: 0 auto;
	padding: 0 0 2rem 0;
}
.wrapper button {
	font-size: 1rem;
}
.wrapper .container-fluid {
	width: 100%;
}
.wrapper .container-fluid .main_container {
	width: 90%;
	padding: calc(2.5rem + 0.8rem) 2.5rem 2.5rem 5rem;
}
.wrapper .container-fluid .main_container .db-result {
	text-align: center;
	color: rgb(9, 140, 41);
	font-weight: bold;
}
.wrapper .container-fluid .main_container input,
.wrapper .container-fluid .main_container select {
	padding: 0.4rem;
	border: 1px solid black;
	border-radius: 0;
	font-size: 1rem;
}
.wrapper .container-fluid .main_container input[type=checkbox] {
	accent-color: #000;
	margin: 0.5rem;
	transform: scale(1.5);
}
.wrapper .container-fluid .main_container input[type=range] {
	padding: 0;
}
.wrapper .container-fluid .main_container textarea:focus-visible {
	outline: none;
}
.wrapper .container-fluid .main_container .btn_container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.wrapper .container-fluid .main_container .btn_container button {
	margin: 0 0.2rem;
}
.wrapper .container-fluid .main_container .btn_operation {
	padding: 0.5rem 1rem;
	border: 1px solid gray;
	border-radius: 0.5rem;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
}
.wrapper .container-fluid .main_container .btn_edit {
	padding: 5px 10px;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	display: inline-block;
	outline: none;
	border-radius: 5px;
	z-index: 0;
	background: #e0e0e0;
	overflow: hidden;
	color: #000;
}
.wrapper .container-fluid .main_container .btn_edit:not(:disabled):hover {
	outline: 2px solid black;
}
.wrapper .container-fluid .main_container .btn_edit:disabled {
	opacity: 0.5;
}
.wrapper .container-fluid .main_container .btn_save {
	padding: 5px 10px;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	display: inline-block;
	outline: none;
	border-radius: 5px;
	z-index: 0;
	background: #173D77;
	overflow: hidden;
	color: #ffffff;
}
.wrapper .container-fluid .main_container .btn_save:not(:disabled):hover {
	outline: 2px solid black;
}
.wrapper .container-fluid .main_container .btn_save:disabled {
	opacity: 0.5;
}
.wrapper .container-fluid .main_container .btn_delete {
	padding: 5px 10px;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	display: inline-block;
	outline: none;
	border-radius: 5px;
	z-index: 0;
	background: rgb(183, 0, 0);
	overflow: hidden;
	color: #ffffff;
}
.wrapper .container-fluid .main_container .btn_delete:not(:disabled):hover {
	outline: 2px solid black;
}
.wrapper .container-fluid .main_container .btn_delete:disabled {
	opacity: 0.5;
}
.wrapper .container-fluid .main_container .btn_back {
	padding: 5px 10px;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	display: inline-block;
	outline: none;
	border-radius: 5px;
	z-index: 0;
	background: #495057;
	overflow: hidden;
	color: #ffffff;
}
.wrapper .container-fluid .main_container .btn_back:not(:disabled):hover {
	outline: 2px solid black;
}
.wrapper .container-fluid .main_container .btn_back:disabled {
	opacity: 0.5;
}
.wrapper .container-fluid .main_container .btn_show {
	padding: 5px 10px;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	display: inline-block;
	outline: none;
	border-radius: 5px;
	z-index: 0;
	background: #495057;
	overflow: hidden;
	color: #ffffff;
}
.wrapper .container-fluid .main_container .btn_show:not(:disabled):hover {
	outline: 2px solid #495057;
}
.wrapper .container-fluid .main_container .btn_show:disabled {
	opacity: 0.5;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dt-buttons>.dt-button {
	padding: 5px 10px;
	font-weight: bold;
	transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	outline: none;
	border-radius: 5px;
	z-index: 0;
	background: #fff;
	overflow: hidden;
	border: 2px solid var(--navi-container-color);
	color: var(--navi-container-color);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dt-buttons>.dt-button:not(:disabled) {
	cursor: pointer;
	&:hover {
		background-color: var(--navi-container-color);
		color: #fff;
	}
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dt-buttons .dt-button-collection {
	position: fixed;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%,-50%) !important;
	width: fit-content;
	margin: 0 !important;
	padding: 0.5rem !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dt-buttons .dt-button-collection .dt-button-collection-title {
	margin: 0 0 1rem 0 !important;
	padding: 0 !important;
	font-weight: bold;
	color: var(--info-font-color);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dt-buttons .dt-button-collection div:last-child {
	display: flex;
	flex-wrap: wrap;
	width: 50rem;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dt-buttons .dt-button-collection div:last-child .dt-button {
	position: relative;
	width: calc(20% - 0.4rem);
	margin: 0.2rem !important;
	white-space: nowrap;
	background: white;
	border: 2px solid black;
	box-shadow: 1px 1px 3px #666;
	z-index: 0;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dt-buttons .dt-button-collection div:last-child .dt-button.active {
	background: rgb(211, 255, 211);
	box-shadow: inset 1px 1px 3px #666;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dt-buttons .dt-button-collection div:last-child .dt-button span {
	color: black;
	font-weight: bold;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTables_info {
	color: var(--info-font-color);
	font-weight: bold;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTables_length {
	float: right;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTables_length select {
	background-color: white;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable {
	padding: 1rem;
    background-color: white;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable input[type=checkbox] {
	margin: 0.5rem;
    transform: scale(1.5);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable input[type=text] {
	border-radius: 0;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable select {
	border-radius: 0;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable td {
	padding: 5px 1rem;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: rgb(210, 210, 210);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr:last-of-type td,
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr:last-of-type th {
	border-bottom: 1px solid rgb(210, 210, 210);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable tbody tr:hover {
	background-color: #eeeeee;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable tbody td {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: rgb(210, 210, 210);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead th {
	padding: 0.5rem 1rem;
	background-color: white;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting:hover {
	background-color: rgb(188, 234, 255);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting::before {
	content: "" !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting::after {
	content: "" !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting span::after {
	content: "◇" !important;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-size: 1.5rem;
	opacity: 1 !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting_asc:hover {
	background-color: rgb(188, 234, 255);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting_asc::before {
	content: "" !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting_asc::after {
	content: "" !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting_asc span::after {
	content: "▲" !important;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-size: 1.5rem;
	opacity: 1 !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting_desc:hover {
	background-color: rgb(188, 234, 255);
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting_desc::before {
	content: "" !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting_desc::after {
	content: "" !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th.sorting_desc span::after {
	content: "▼" !important;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-size: 1.5rem;
	opacity: 1 !important;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th,
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th span {
	white-space: nowrap;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable thead tr th select {
	border-radius: 0;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .dataTable tbody td select option:disabled {
	display: none;
}
.wrapper .container-fluid .main_container .dataTables_wrapper .paginate_button.first,
.wrapper .container-fluid .main_container .dataTables_wrapper .paginate_button.previous,
.wrapper .container-fluid .main_container .dataTables_wrapper .paginate_button.next,
.wrapper .container-fluid .main_container .dataTables_wrapper .paginate_button.last {
	border: 1px solid black;
}

.modal-table {
    border-collapse: separate;
    border-spacing: 0 1.5rem;
}
.modal-table th label {
    margin-right: 2rem;
}
.modal-table input:not([type=checkbox]):not([type=radio]),
.modal-table select {
    width: 18rem;
    height: 2.5rem;
}
.modal-table select option:disabled {
    display: none;
}
.modal-table td input::placeholder {
    opacity: 0.3;
}
.modal-table .notice {
    width: 100%;
    text-align: center;
    color: var(--info-font-color);
}