﻿body {
	padding-top: 50px;
	padding-bottom: 20px;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 10pt;
}

/* Set padding to keep content from hitting the edges */
.body-content {
	padding-left: 15px;
	padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
	   will truncate terms that are too long to fit in the left column 
	*/

.breadcrumb > li:first-child:after {
	content: " " !important;
	white-space: pre-line;
}

.breadcrumb > li + li:before {
	content: "" !important;
	white-space: pre-line;
}

.navbar-inverse .navbar-nav > li > a {
	color: #fff !important;
}

@media (max-width: 767px) {
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
		color: #fff !important;
	}
}

.dl-horizontal dt {
	white-space: normal;
}

/* BRD - Ascii text */
.ascii-data {
	position: relative;
	top: -20%;
	margin: 0px;
	white-space: nowrap;
}

/* Set width on the form input elements since they're 100% wide by default */
.login-group input,
.login-group select,
.login-group textarea {
	max-width: 350px;
}

/* BRD - Added checkmarks to active menu items*/
.dropdown-menu > li > a.active::before {
	content: "\2713";
	position: absolute;
	margin-left: -1em;
	margin-right: .100em;
}

select {
	/* border: 0px !important; */
}

	select.no-border {
		border: 0px !important;
	}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
	border-color: none;
	outline: 0;
	outline: none;
	/* IE6-9 */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

	input::selection {
		/* background-color: #fff; */
	}

	input:-webkit-autofill {
		-webkit-box-shadow: 0 0 0 50px white inset;
		-webkit-text-fill-color: #333;
	}

	input:-webkit-autofill:focus {
		-webkit-box-shadow: 0 0 0 50px white inset;
		-webkit-text-fill-color: #333;
	}

	select.round {
	background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), radial-gradient(#ddd 70%, transparent 72%);
	background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
	background-size: 5px 5px, 5px 5px, 1.5em 1.5em;
	background-repeat: no-repeat;
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
	margin-left: 0px !important;
}

.link-disabled {
	pointer-events: none;
	cursor: default;
	opacity: .3;
}



/* Text Styles */
.title-blue {
	color: #428BCA;
	font-weight: 900;
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-size: 2rem;
}

.section-header {
	margin: 0px !important;
	padding-right: 20px;
	vertical-align: middle;
	font-size: 2.25rem;
}

.copy {
	font-size: 1.1rem;
}

.sort-indicator {
	font-size: .7em;
}

.tagline {
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-weight: 700;
	font-size: 1.1em;
	color: #000;
}

.copyright {
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-weight: 300;
	font-size: .9em;
	color: #ccc;
	text-align: center;
}

.tagline, .copyright {
	margin-bottom: 5px !important;
}




/* Login Page  */
.login-page {
	background: #1F3E59 url('../Images/login-glow-bg.jpg') no-repeat;
	background-size: auto;
	background-position: center top;
}

.login_overflow {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #0000007a;
	z-index: 3;
	top: 0px;
	left: 0px;
	display: none;
}

.login-form {
	min-width: 270px;
	max-width: 350px;
	width: 100%;
	/*
			position: absolute;
		top: 40%;
		left:50%;
		transform: translate(-50%,-40%);
			*/
	background-color: transparent;
	box-shadow: 0 0px 0px rgba(0,0,0,0);
	border: 0px;
}

.login-title {
	font-family: "Open Sans Condensed", arial, sans-serif;
	color: #fff;
	font-weight: 700;
	font-size: 3.0rem;
}

	.login-title sup {
		font-size: 1.5rem;
		line-height: 50%;
	}

.login-group {
	margin-bottom: 1px;
	position: relative;
}

.login-button {
	margin-top: 15px;
}

	.login-button input {
		background: #3e6f7c !important;
		min-width: 100px;
		margin-bottom: 15px;
	}

	.login-button a {
		margin-top: 8px;
		display: inline-block;
		color: #fff;
		font-family: "Roboto", Arial, Helvetica, sans-serif;
	}

.login-textbox, .login-dropdown {
	border: 0px;
	border-radius: 0px;
	box-shadow: 0 1px 2px rgba(0,0,0,0);
}

	.login-dropdown:disabled, .login-dropdown:read-only {
		background: #fff;
	}

.login-footer, .login-footer a {
	margin-top: 50px;
	color: #fff;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-size: 1.5rem;
}

/* Preference Styles */
.pref-panel-background {
	/*background: #e9f2f5;*/
	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(218,228,235,0.5)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dae4eb', GradientType=0 );
}

.center-column {
	text-align: center;
}

/* Inbox Styles*/

.inbox-unread {
	font-weight: 900;
}

.inbox-read {
	font-weight: 300;
}

.inbox-header {
	padding: 10px 0;
	background: rgb(24, 80, 96);
	color: #fff;
	z-index: 800;
	font-size: 110%;
	font-weight: 700;
}

	.inbox-header a {
		color: #fff;
		white-space: nowrap;
	}

.inbox-toolbar {
	background: #eee;
	padding: 10px;
	z-index: 800;
}

.inbox-icons {
	width: 20px;
	display: inline-block;
}

.selDiv {
	position: relative;
	top: 1px;
}

.inbox-row-container {
	position: relative;
	top: 95px;
}

.inbox-row {
	padding: 10px 0 5px 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid rgba(51, 153, 183, 0.20);
}

	.inbox-row a {
		color: #000;
	}




	.inbox-row:nth-child(even) {
		/*background: #e9f2f5;*/
		background: rgba(255,255,255,1);
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(218,228,235,0.5)));
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dae4eb', GradientType=0 );
	}

	.inbox-row:nth-child(odd) {
		background: #FFF;
	}

	.inbox-row:hover {
		background: rgba(51, 153, 183, .10);
	}

#inbox-filters {
	max-height: 500px;
	overflow-y: scroll;
}

/* Notes Styles, direct copy of Inbox Styles*/

.notes-unread {
	font-weight: 900;
}

.notes-read {
	font-weight: 300;
}

.notes-header {
	padding: 10px 0;
	background: rgb(24, 80, 96);
	color: #fff;
	z-index: 800;
	font-size: 110%;
	font-weight: 700;
}

	.notes-header a {
		color: #fff;
		white-space: nowrap;
	}

.notes-toolbar {
	background: #eee;
	padding: 10px;
	z-index: 800;
}

.notes-icons {
	width: 20px;
	display: inline-block;
}

/*.notes-row-container {
		position:relative; 
		top: 95px;
	}*/

.notes-row {
	padding: 10px 0 5px 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid rgba(51, 153, 183, 0.20);
}

	.notes-row a {
		color: #000;
	}

	.notes-row:nth-child(even) {
		/*background: #e9f2f5;*/
		background: rgba(255,255,255,1);
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(218,228,235,0.5)));
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dae4eb', GradientType=0 );
	}

	.notes-row:nth-child(odd) {
		background: #FFF;
	}

	.notes-row:hover {
		background: rgba(51, 153, 183, .10);
	}

#notes-filters {
	max-height: 500px;
	overflow-y: scroll;
}


.totop-footer {
	margin: 5px;
	left: initial !important;
	display: none;
	opacity: .5;
	padding: 5px;
	height: 30px;
	background-color: #000;
}

	.totop-footer:hover {
		opacity: 1;
		background-color: #000;
	}


.container .inbox-toolbar.affix {
	width: inherit;
	top: 50px !important;
}

.container-fluid .inbox-toolbar.affix {
	width: 100%;
	top: 50px !important;
}

.container .inbox-header.affix {
	width: inherit;
	top: 100px !important;
}

.container-fluid .inbox-header.affix {
	width: 100%;
	top: 100px !important;
}


input[type='checkbox'].flag-checkbox {
	display: none
}

	input[type='checkbox'].flag-checkbox + label .unchecked {
		display: inline;
		color: rgb(217, 217, 217);
		cursor: pointer
	}

	input[type='checkbox'].flag-checkbox + label .checked {
		display: none;
		cursor: pointer;
		color: #ff5e00
	}

input[type='checkbox']:checked.flag-checkbox {
	display: none
}

	input[type='checkbox']:checked.flag-checkbox + label .unchecked {
		display: none
	}

	input[type='checkbox']:checked.flag-checkbox + label .checked {
		display: inline
	}


/* Search Styles*/
.action-search-btn {
	padding: 5px 10px;
	border-radius: 10px;
	border: 1px solid gray;
	margin-top: -5px;
	font-size: 80%;
	background: rgba(255,255,255,.2)
}

	.action-search-btn:hover {
		background: rgba(255,255,255,.4)
	}







/* Bootstrap Overrides */

/*
	label {
		margin: 0 5px;
		font-weight: 300;
	}
		*/

.label-danger {
	font-weight: 400;
	font-size: 1.4rem;
	margin: 3px 0 5px 0;
	display: block;
}

.basic-addon {
	background: #fff !important;
	border: 0px !important;
	color: #999;
	border-radius: 0px !important;
}

.inline-obj {
	display: inline-block !important;
}

.dropdown-header {
	font-size: 1.3rem;
	font-weight: 700;
}

.dropdown-menu.inbox-filters, .dropdown-menu.dropdown-scroll {
	max-height: 400px;
	overflow: hidden;
	overflow-y: auto;
}

.dropdown-menu.inbox-actions {
	max-height: 400px;
	overflow: hidden;
	overflow-y: auto;
}

.navbar-toggle.inbox-toolbar-toggle {
	border: none !important;
	margin-right: 20px;
	margin-bottom: 0px !important;
}

.navbar-inverse .navbar-brand {
	color: #fff !important;
	font-weight: 700;
	font-size: 1.2em;
}

label.navbar-brand {
	margin-bottom: 0px;
}

.navbar-inverse .nav a.dropdown-toggle {
	color: #fff;
	font-size: 1em;
}

.form-group {
	width: 100%;
}

.input-group {
	width: inherit;
}

.navbar-nav > li > a {
	font-weight: 700;
}
/* CR23378 Archive list in Web Admin File Manager not scrollable */
.navbar-nav.archive-tool-bar .dropdown.open ul.dropdown-menu {
	max-height: 400px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.dropdown-menu, .form-control, .btn {
	font-size: 10pt;
}

.result-breadcrumb {
	background-color: #fff !important;
	border-bottom: 0px solid #CCC;
	padding: 8px 0px !important;
	font-size: 1.5rem;
	font-weight: 300;
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	margin-bottom: 0px !important;
}







/* Errors */
.errors {
	clear: both;
	width: 100%;
	text-align: center;
}

	.errors ul, .errors > li {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}

	.errors li {
		background: #a03734;
		border-radius: 5px;
		margin: 0px;
		padding: 5px;
		color: #fff;
		word-break: break-all;
	}

.login-errors {
	min-width: 270px;
	max-width: 350px;
}

.editNotice {
	font-weight: 700;
	font-style: italic;
	color: #14ac09
}

.notes-icon-text {
	display: none !important;
}

.paging-footer {
	position: fixed;
	background-color: #FFF !important;
	border-top: 1px solid #555;
	width: 100%;
	height: 50px;
	text-align: center;
	bottom: 0;
}





/* Corner Elements*/
.round-left {
	border-top-left-radius: 2px !important;
	border-bottom-left-radius: 2px !important;
}

.round-right {
	border-top-right-radius: 2px !important;
	border-bottom-right-radius: 2px !important;
}

.round-top {
	border-top-left-radius: 2px !important;
	border-top-right-radius: 2px !important;
}

.round-bottom {
	border-bottom-left-radius: 2px !important;
	/* border-bottom-right-radius: 2px !important; */
}

.round-all {
	border-radius: 2px !important;
}

@media (min-width: 768px) and (max-width: 991px) {
	.inbox-date {
		text-align: right;
		font-weight: normal !important;
	}

	.inbox-row-container {
		top: 51px;
	}

	.notes-icons {
		width: 20px;
		display: inline-block !important;
	}

	.notes-icons {
		width: 20px;
		display: inline-block !important;
	}

	.notes-icon-text {
		display: inline-block !important;
	}

	.notes-header-sm {
		background: rgb(24, 80, 96);
		color: #fff !important;
		font-weight: 700;
		padding: 10px 0;
	}

		.notes-header-sm span {
			color: #fff;
		}


	.dropdown-menu.inbox-filters, .dropdown-menu.dropdown-scroll {
		max-height: none;
		overflow: unset;
		overflow-y: unset;
	}

	.dropdown-menu.inbox-actions {
		max-height: none;
		overflow: unset;
		overflow-y: unset;
	}

	.center-column {
		text-align: left;
	}

		.center-column input[type='checkbox'] {
			float: left;
			margin-right: 5px;
		}
}


@media screen and (max-width: 767px) {
	select {
		display: block;
		/* max-width:225px !important; */
		width: 100%;
	}

	.selected-reports-checkbox, .selection-checkbox, .cb-checkbox, .checkbox input {
		transform: scale(1.2);
	}



	.login-title {
		font-size: 2.6rem;
	}

	.section-header {
		font-size: 1.75rem;
	}

	.inbox-row-container {
		top: 50px;
	}

	#inbox-filters {
		max-width: 200px;
		max-height: 200px;
		overflow-y: scroll;
	}

	.inbox-date {
		text-align: right;
		font-size: 1.1rem;
		font-weight: normal !important;
	}

	.notes-icon-text {
		display: inline-block !important;
	}

	.notes-header-sm {
		background: rgb(24, 80, 96);
		color: #fff !important;
		font-weight: 700;
		padding: 10px 0;
	}

		.notes-header-sm span {
			color: #fff;
		}


	.dropdown-menu.inbox-filters, .dropdown-menu.dropdown-scroll {
		max-height: none;
		overflow: unset;
		overflow-y: unset;
	}

	.dropdown-menu.inbox-actions {
		max-height: none;
		overflow: unset;
		overflow-y: unset;
	}

	.inbox-row-container {
		top: 55px;
	}

	.img-responsive {
		margin-left: 10px;
	}

	.tagline, .copyright {
		text-align: center !important;
		margin-bottom: 0px !important;
	}



	.breadcrumb > li {
		white-space: pre-line;
	}

		.breadcrumb > li:first-child:after {
			content: "" !important;
			white-space: pre-line;
		}

		.breadcrumb > li + li:before {
			content: " " !important;
			padding: 0px !important;
		}

	.center-column {
		text-align: left;
	}

		.center-column input[type='checkbox'] {
			float: left;
			margin-right: 5px;
		}
}


/* SSE tables */
#sse-results-table {
	width: 100%;
}

	#sse-results-table .search-column-header {
		color: #fff;
		text-decoration: none;
	}

		#sse-results-table .search-column-header:hover {
			text-decoration: underline;
		}

	#sse-results-table tr:hover td {
		background: rgba(51, 153, 183, .10);
	}

	#sse-results-table .search-view, #sse-results-table .search-select {
		color: #000;
		text-decoration: none;
	}

		#sse-results-table .search-view:hover, #sse-results-table .search-select:hover {
			color: #ffac00;
		}

	#sse-results-table thead {
		background-color: rgb(24, 80, 96);
		color: #fff;
	}

	#sse-results-table th {
		padding: 5px 10px;
		border-right: 1px solid #555;
	}

		#sse-results-table th a {
			color: #fff;
			white-space: nowrap;
		}

	#sse-results-table td {
		white-space: nowrap;
		padding: 5px 10px;
		border-bottom: 1px solid #eee;
		border-right: 1px solid #eee;
	}

	#sse-results-table a.search-drilldown {
		color: #000;
		text-decoration: none;
	}

		#sse-results-table a.search-drilldown:hover {
			text-decoration: underline;
		}

	#sse-results-table tbody tr:nth-child(even) {
		background: rgba(255,255,255,1);
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(218,228,235,0.5)));
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(218,228,235,0.5) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dae4eb', GradientType=0 );
	}

	#sse-results-table tbody tr:nth-child(odd) {
		background: #FFF;
	}

@media screen and (max-width: 500px) {

	#viewer {
		height: unset !important;
	}

	.paging-footer {
		background-color: #FFF !important;
	}

	.notes-icon-text {
		display: inline-block !important;
	}

	.notes-header-sm {
		background: rgb(24, 80, 96);
		color: #fff !important;
		font-weight: 700;
		padding: 10px 0;
	}

		.notes-header-sm span {
			color: #fff;
		}

	/* Force table to not be like tables anymore */
	#sse-results-table table, #sse-results-table thead, #sse-results-table tbody, #sse-results-table th, #sse-results-table td, #sse-results-table tr {
		display: block;
		margin: -5px 0 0 0;
	}

	#sse-results-table {
		overflow: hidden !important;
	}

		#sse-results-table tr {
			margin-top: 10px;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#sse-results-table thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		#sse-results-table td {
			white-space: normal;
			padding: 5px;
			border-right: 0px solid #eee;
		}


		#sse-results-table .search-view, #sse-results-table .search-select {
			color: #fff;
			text-decoration: none;
		}

		#sse-results-table tr {
			border: 1px solid #ccc;
		}

		#sse-results-table tbody tr {
			background: #fff !important;
		}

		#sse-results-table tr:hover td {
			background: none;
		}

			#sse-results-table tr:hover td.search-result-icon {
				background: rgb(24, 80, 96);
			}

		#sse-results-table td.search-result-icon {
			border-bottom: 0px solid #eee;
			background: rgb(24, 80, 96);
			color: #fff;
			float: left;
			width: 50%;
			height: 35px;
			padding-top: 7px;
		}

	.sse-results-table-notes td.search-result-icon {
		width: 100% !important;
	}


	#sse-results-table td.search-result-icon-top {
		border-bottom: 1px solid #555;
		text-align: left !important;
	}

	#sse-results-table td.search-result-icon-bottom {
		border-bottom: 1px solid #555;
		text-align: right !important;
	}

	#sse-results-table td.search-result-item {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		clear: both;
	}


	#sse-results-table td:before {
		top: 0px;
		left: 0px;
		width: 100%;
		padding: 5px;
		display: block;
		background: #eee;
		font-weight: 700;
		cursor: pointer;
	}
}

.version-placeholder {
	font-size: 12px;
	color: #870013;
	text-align: center;
	vertical-align: top;
	padding: 0px 5px 5px 5px;
	font-weight: 600;
	margin: 0px 0px -15px 0px;
	display: none;
}

	.version-placeholder .see-versions {
		text-align: left;
		width: 242px;
		margin: 0px auto;
		padding: 0px 0px 0px 5px;
	}

#permissonsforgroup {
}

	#permissonsforgroup h5 {
		float: left;
		margin-right: 5px;
	}

	#permissonsforgroup .archive-security-member-combo {
		float: left;
	}

	#permissonsforgroup .dropdown-menu {
		left: 163px;
	}

.navbar-default .navbar-nav > li > a {
	color: #2d2d2d !important;
}

.modal-title .badge,
.navbar-collapse .badge,
.toolbar-nav .badge {
	background-color: #222;
}

.row .copyright {
	color: #000;
}

	.dropdown-menu > li > span {
		display: block;
		padding: 3px 20px;
		clear: both;
		font-weight: normal;
		line-height: 1.42857143;
		color: #333;
		white-space: nowrap;
		cursor: pointer;
	}
	.pieceStateDiv {
		margin: 0px 0px 3px 0px;
		position: relative;
	}
	.pieceStateDiv .pieceContainer {
		display: block;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 20px;
	}

	/* Hide the browser's default checkbox */
	.pieceStateDiv .pieceContainer input {
		position: absolute;		
		cursor: pointer;
		left: 0px;
		top: 0px;
	}
	/* On mouse-over, add a grey background color */
	.pieceStateDiv .pieceContainer:hover input ~ .checkmark {
		background-color: #ccc;
	}

	/* When the checkbox is checked, add a blue background */
	.pieceStateDiv .pieceContainer input:checked ~ .checkmark {
		background-color: #2196F3;
	}

	.pieceStateDiv .pieceContainer input.dif:checked ~ .checkmark {
		background-color: #cdcdcd;
	}
	.pieceStateBtn {
		margin: 10px 0px 0px 0px;
	}