@CHARSET "ISO-8859-15";

#header,
#footer,
#page-wrapper button[name="reset"],
.std-form button[name="reset"] {
	background-color: #313131;
	color: white;
}

#header {
	width: calc(100% - 6em);
	flex-basis: 4em;
	margin: 0;
	padding: 1.7ex 3em 1.5ex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline;
}

#header #menu-area,
#header #logout-area {
	flex-basis: 37em;
}

#header #logo-area {
	flex-basis: auto;
}

#header #menu-area {
	text-align: left;
}

#header #logo-area {
	text-align: center;
}

#header #logout-area {
	text-align: right;
}

#page-wrapper #header button {
	background-color: transparent;
	border-color: #767676;
	font-size: 100%;
}

#page-wrapper #header button:hover {
	background-color: #626262;
}

#header #logo-area img {
	width: 6em;
	height: auto;
}

#header #logo-area {
	align-self: center;
}

#footer {
	width: 100%;
	height: 4em;
	flex-basis: 4em;
	min-height: 4em;
	margin: 12ex 0 0;
	padding: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

#footer span {
	padding: 0 0.5em;
}


#page-wrapper {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #dadada;
	overflow-y: auto;
}

.narrow,
.verynarrow {
	display: none;
}

.force-wrap {
	flex-basis: 100%;
	height: 0;
}

.force-wrap.space-down {
	margin-bottom: 3ex;
}

.std-form {
	background-color: white;
	padding: 1ex;
	width: calc(100% - 2ex);
	display: flex;
	flex-flow: row wrap;
	gap: 1ex 1em;
	align-items: baseline;
}

.std-form label {
	padding-right: 0.5em;
}

fieldset {
	background-color: white;
	border-radius: 0.5ex;
	width: calc(100% - 2.2em);
	max-width: calc(100% - 2em - 0.75ex);
	margin: 1ex 0 4ex 0;
	padding: 2ex;
}

fieldset legend {
	font-size: 110%;
	color: #555;
}

.std-form,
.std-form label,
.std-form input[type="text"],
.std-form input[type="password"],
.std-form input[type="date"],
.std-form input[type="time"],
.std-form input[type="number"],
.std-form input[type="submit"],
.std-form select,
.std-form button {
	font-size: 12pt;
}

.std-form label {
	padding-bottom: 1ex;
	user-select: none;
}

.std-form input[type="text"],
.std-form input[type="password"],
.std-form input[type="date"],
.std-form input[type="time"] {
	padding: 1.25ex 1em;
	border: 1px solid #e3e3e3;
	border-radius: 0.5ex;
}

.std-form input[type="date"] {
	padding-top: 1.25ex;
	padding-bottom: 1.45ex;
}

.std-form input[type="number"] {
	padding: 0.8ex 0.5em;
	width: 4em;
	text-align: center;
}

.std-form select {
	padding: 0.8ex 0.5em;
}
	
#page-wrapper button,
.std-form input[type="submit"],
.std-form button {
	width: 7em;
	padding: 1ex 1em;
	background-color: #007bff;
	color: white;
	border: 1px solid #8ec4ff;
	border-radius: 0.5ex;
	transition: filter 0.15s, background-color 0.3s;
	cursor: pointer;
}

#page-wrapper button.dangerous-button,
.std-form button.dangerous-button {
	background-color: red; /*#a22;*/
	border-color: #f88;
}

#page-wrapper button.dangerous-button:hover,
.std-form button.dangerous-button:hover {
	background-color: #a00;
}



#page-wrapper button[name="reset"],
.std-form button[name="reset"],
#page-wrapper button[name="cancel"],
.std-form button[name="cancel"] {
	width: 8em;
	background-color: #313131;
}

#page-wrapper button:hover,
.std-form input[type="submit"]:hover,
.std-form button:hover {
	filter: brightness(1.2);
}

#page-wrapper button:disabled {
	cursor: default;
}

#page-wrapper button:disabled:hover {
	filter: none;
}

#page-wrapper button[name="reset"]:hover,
.std-form button[name="reset"]:hover,
#page-wrapper button[name="cancel"]:hover,
.std-form button[name="cancel"]:hover {
	background-color: #244466;
	filter: none;
}

.std-form ul {
	list-style: none;
	padding: 0.3ex 0 1ex 1em;
	margin: 0.5ex 0;
}

.std-form li {
	font-size: 90%;
	color: #c44;
}


@media only screen and (max-width: 640px)
{
	.std-form,
	.std-form label,
	.std-form input[type="text"],
	.std-form input[type="date"],
	.std-form input[type="time"],
	.std-form input[type="submit"],
	.std-form button {
		font-size: 11pt;
	}
}

@media only screen and (max-width: 480px)
{
	.std-form,
	.std-form label,
	.std-form input[type="text"],
	.std-form input[type="password"],
	.std-form input[type="date"],
	.std-form input[type="time"],
	.std-form input[type="submit"],
	.std-form select,
	.std-form button {
		font-size: 3.3vw;
	}

	.std-form input[type="text"],
	.std-form input[type="time"] {
		padding: 1ex 0.75em;
	}

	.std-form input[type="date"] {
		padding: 1.2ex 0.75em;
	}

	.std-form label {
		padding-bottom: 0.5ex;
	}
}

#day-data table {
	border-collapse: collapse;
}

#day-data td {
	padding: 0;
	line-height: 150%;
}

#day-data tr td:nth-child(2) {
	padding-left: 1em;
}

.pagination_control {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 90%;
	line-height: 2.5ex;
	text-align: center;
	cursor: default;
	/*background-color: white;*/
}

.pagination_wrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	gap: 0 0;
	margin: 2ex 0 0;
	padding: 0;
}

.pagination_control a,
.pagination_control span.disabled {
	display: inline-block;
	flex-basis: 5em;
	/*background-color: white;*/
	text-decoration: none;
	text-align: center;
	padding: 0.6ex 0 0.4ex;
	border: none;
}

.pagination_control a.paginator_page {
	background-color: white;
}

.pagination_control a.paginator_page,
.pagination_control span.disabled.currentpage
{
	/*flex-basis: 2.5em;*/
}

.pagination_control a {
	color: #222;
	cursor: pointer;
	transition: 0.2s;
}

.pagination_control a:hover {
	transform: scale(1.1);
	background-color: #B2CEEE;
}

.pagination_control a.clicked {
	transform: scale(1.11);
	background-color: #007BFF;
	color: white;
}

.pagination_control .icon,
.pagination_control .sep {
	display: none;
}

.pagination_control span.disabled {
	color: #777;
	cursor: default;
}

.pagination_control span.disabled.currentpage {
	background-color: #007BFF;
	color: white;
}

.jconfirm-holder {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	max-width: 640px;
	min-width: 320px;
}


.std-table {
	border-collapse: collapse;
	border: 1px solid #eee;
	width: 100%;
	/*max-width: 1980px;*/
}

.std-table th {
	border-bottom: 1px solid black;
	background-color: #007bff;
	color: white;
	cursor: pointer;
}

.std-table th,
.std-table td {
	/*padding: 0.75ex 0.4em;*/
	text-align: left;
}

.std-table td {
	padding: 3ex 0 3ex 0.333em;
}

.std-table th {
	padding: 1ex 0 1ex 0.333em;
	font-weight: normal;
}

.std-table th.sc {
	background-color: #59A7FF;
}

.std-table tr td.sc {
	background-color: transparent;
}

.std-table tr td.sc,
.std-table tr th.sc {
	border-left: 1px dotted #888;
	border-right: 1px dotted #888;
}

.std-table tr.even {
	background-color: #F2F8FF;
}

.std-table tr.odd {
	background-color: white;
}

.std-table tr:hover {
	filter: brightness(0.925);
}


.std-table tr:hover td.sc {
	background-color: #eef;
}

.std-table .edit,
.std-table .copy,
.std-table .delete {
	width: 3em !important;
	height: 3em !important;
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: center center;
}

.std-table .edit {
	background-image: url("/skin/img/edit.png");
}

.std-table .copy {
	background-image: url("/skin/img/copy.png");
}

.std-table .delete {
	background-image: url("/skin/img/delete.png");
}



.std-table textarea,
.std-table select {
	font-size: 100%;
	padding: 0.5ex 0.5em;
}

.std-table input[type="date"] {
	font-size: 100%;
	padding: 1.25ex 1em;
	border: 1px solid #e3e3e3;
	border-radius: 0.5ex;
	padding-top: 1.25ex;
	padding-bottom: 1.45ex;
}




.page-header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 90%;
	margin: 7ex 0 3ex;
}


#content h1,
#content h2 {
	font-weight: normal;
}

#content h2 {
	font-size: 146%;
	margin-top: 3ex;
}

#content .page-header h1,
#content .page-header h2 {
	margin: 0 0;
}

#content .page-header h1 {
	font-size: 177%;
}


.menu-main {
	display: flex;
	flex-flow: row nowrap;
	gap: 0 1em;
	list-style-type: none;
	padding-left: 0;
}

.menu-main li a {
	text-decoration: none;
	color: white;
}

.menu-main li a:hover {
	text-decoration: underline;
}

.menu-main li.active a,
.menu-main li.active a:visited {
	color: red;
}

.menu-main li.active a:hover {
	text-decoration: none;
}

.icon-scan {
	display: inline-block;
	width: 1.5ex;
	height: 1.5ex;
	padding: 1ex;
	position: relative;
	top: 1ex;
	margin-right: 1ex;
	background-color: transparent;
	background-image: url('/skin/img/scanner.png');
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.75;
}


@media only screen and (max-width: 1632px)
{
	#header #logo-area {
		flex-basis: 24em;
	}

	#header #logout-area {
		flex-basis: 6em;
	}
}

@media only screen and (max-width: 1488px)
{
	#header #logo-area {
		flex-basis: 6em;
	}

	#header #logout-area {
		flex-basis: 6em;
	}
}


@media only screen and (max-width: 784px)
{
	#header {
		align-items: center;
	}

	#header #logo-area {
		order: 2;
		flex-basis: 50%;
		text-align: left;
	}

	#header #logout-area {
		order: 3;
		flex-bais: 50%;
	}
}