@media screen
{
	ul.form { overflow: visible; list-style-type: none; }
	ul.form > li { width: 100%; padding: 0 0 0 200px; }
	ul.form > li + li { margin-top: 6px; }

	input { line-height: 18px; float: left; padding: 6px 6px; border: 1px solid #DDDDDD; }
	input[type=text] { width: 100%; }
	input[type=color] { width: 100%; }
	input[type=number] { width: 100%; }
	input[type=password] { width: 100%; }
	input:focus { border-color: #2980B9; box-shadow: 0px 0px 15px #2980B9; }
	input[readonly] { background-color: #EEEEEE; }
	input[readonly]:focus { border-color: #888888; }

	select { width: 100%; line-height: 18px; float: left; padding: 6px 3px; border: 1px solid #DDDDDD; }
	select:focus { border-color: #2980B9; box-shadow: 0px 0px 15px #2980B9; }
	select[readonly] { background-color: #EEEEEE; }
	select[readonly]:focus { border-color: #888888; }

	button { min-width: 90px; padding: 6px 12px; margin: 0 0 0 12px; background-color: #2980B9; color: #FFFFFF; }
	th button { min-width: 0; padding: 6px 12px; margin: 0; }
	button:hover     { background-color: #3498DB; }
	button:focus     { background-color: #3498DB; box-shadow: 0px 0px 15px #2980B9; }
	button[disabled] { background-color: #CCCCCC; }

	label { line-height: 24px; float: left; }
	ul.form label { width: 200px; margin-left: -200px; border: 1px solid transparent; }

	ul.errorlist { display: none; background-color: #C0392B; margin: 0 0 6px -200px; }
	form.is-enabled ul.errorlist { display: inherit; }
	ul.errorlist > li { padding: 3px; color: #FFFFFF; font-weight: 600; }

	ul.pagination { list-style-type: none; margin: 12px; }
	ul.pagination > li { border: 1px solid #DDDDDD; float: left; margin: 6px; }
	ul.pagination > li > a { display: block; text-decoration:none; color: #000000; width: 32px; height: 32px; line-height: 32px; }
	ul.pagination > li.active > a { background-color: #4F8EDC; color: #FFFFFF; }
	ul.pagination > li > a.not-allowed { color: #CCCCCC; cursor: not-allowed; }

	form.role-create .panel-head { border: 1px solid #F39C12; background-color: #F39C12; }
	form.role-update .panel-head { border: 1px solid #2980B9; background-color: #2980B9; }
	form.role-modify .panel-head { border: 1px solid #2980B9; background-color: #2980B9; }
	form button { visibility: visible; }
	form button.form-enable { visibility: hidden; }
	form.disabled button { visibility: hidden; }
	form.disabled button.form-enable { visibility: visible; }
}

@media screen and (min-width: 0) and (max-width: 599px)
{
	ul.form > li { padding: 0 0 0 150px; }
	ul.form > li label { width: 150px; margin-left: -150px; border: 1px solid transparent; }
	ul.errorlist { margin: 0 0 6px -150px; }
}
