/*
bw-red: #c52900
bw-yellow:  #c59b00
bw-blue: #00457f
bw-dark-red: #661500
bw-dark-yellow:  #665100
bw-dark-blue:  #002442
bw-light-red: #ff3500
bw-light-yellow:  rgb(255, 217, 0)
bw-light-blue: #0176d7
bw-dark-row: #76b6eb, #b0d1eb?
bw-light-row: #bfe2ff

font-family: Arial, sans-serif; titletext
*/
@font-face {
	font-family: 'Inter';
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
}


@font-face {
	font-family: 'Inter';
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
}

.mainBody {
	background-color: rgb(32, 79, 133);
	font-family: Inter, Verdana;
	text-align: center;
}

.mainDiv {
	font-size: 10pt;
	text-align: center;
	width: 1000px; /*max-width: 1000px; 	 	min-width: 600px;*/
	vertical-align: top;
	/*height: 800px;*/
	border: solid 1px #002442;
	margin-left: auto;
	margin-right: auto;
	/*padding-top: 10px;*/
	margin-top: 20px;
	/*padding-bottom: 10px;*/
	background-color: White;
}

.app-copyright {
	position: fixed;
	right: .75rem;
	bottom: .5rem;
	font-size: .875rem; /* ≈14 px */
	color: #6b7280; /* neutral grey, tweak as needed */
	z-index: 1000;
	user-select: none;
}

@media print {
	.app-copyright {
		display: none;
	}
}

.helpBody {
	font-family: Inter, Verdana;
	text-align: left;
	font-size: 0.9rem;
}

.headerContainer {
	width: 100%;
	margin-bottom: 5px;
	padding: 20px 10px 20px 10px;
	text-align: left;
}

.headerLogo {
	float: right;
	padding-right: 20px;
}

.headerText {
	font-size: 1.8rem;
	font-family: Inter, Verdana, arial;
	font-weight: bolder;
	color: rgb(32, 79, 133);
}

.headerSubText {
	font-size: 1.05rem;
	font-family: Inter, Verdana, arial;
}

.headerTable {
	width: 100%;
	margin-bottom: 5px;
	font-size: large;
	font-family: Inter, Verdana, arial;
}

.centerStyle {
	margin: 0 auto;
	text-align: center;
}

.errorMessageText {
	color: Red;
	font-family: Inter, Arial;
	font-size: medium;
}

.gridTitle {
	font-size: 1.5rem;
	font-weight: bold;
}

.gridSubtitle {
	font-size: 1.1rem;
	font-weight: bold;
}

.helpTitle {
	font-size: 1.5rem;
	font-weight: bold;
	color: /*#00457f*/ rgb(48, 146, 171);
}

.helpSubtitle {
	font-size: 1.1rem;
	font-weight: bold;

}

.helpText {
	font-size: 0.9rem;
	line-height: 1.2;
	color: /*#00457f*/ rgb(48, 146, 171);
}

	.helpText a:link :not(.bwButton), a:hover :not(.bwButton), a:active :not(.bwButton), a:visited :not(.bwButton) {
		color: #00457f;
	}

.gridTitleTD {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-bottom: 10px;
}

.actionLink {
	font-size: 0.7rem;
	font-weight: bold;
}

.actionLinkTD {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-bottom: 10px;
	background-color: rgb(255, 217, 0);
}

.navDiv {
	/*height: 37px;*/
	background-color: rgb(24, 71, 130);
}

.navBar {
	font-size: medium;
	border-top-style: solid;
	border-top-color: Gray;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: Gray;
	border-bottom-width: 1px;
	height: 37px; /*width: 800px;*/
	background-color: rgb(63, 218, 216);
}

.navBarText { text-align: left; }

.navBarText a:visited { color: White; }

	.navBarText a:link :not(.bwButton), a:hover :not(.bwButton), a:active :not(.bwButton), a:visited :not(.bwButton) {
		color: rgb(138, 140, 142);
	}

.navBarButton {
	display: inline-block;
	vertical-align: middle;
}

.navBarTD {
	text-align: center;
	vertical-align: middle;
	border-spacing: 0px;
	display: table-cell;
}

.greetingText {
	font-weight: normal;
	font-size: medium;
	color: #002442;
}

.greetingContainer {
	text-align: right;
	width: 98%;
	padding-bottom: 10px;
}

/*.linkData a:link, a:hover, a:active, a:visited { color: Blue; }*/

.expandClass {
	background-image: url(../images/expand.png);
	background-repeat: no-repeat;
	background-position: 3px center;
	background-color: rgb(138, 140, 142);
	padding-left: 25px;
	cursor: hand;
	padding-top: 7px;
	padding-bottom: 7px;
	font-weight: bold;
	color: white;
	text-shadow: 1px 1px 0px rgb(24, 71, 130);
}

.collapseClass {
	background-image: url(../images/collapse.png);
	background-repeat: no-repeat;
	background-position: 3px center;
	background-color: rgb(138, 140, 142);
	padding-left: 25px;
	cursor: hand;
	padding-top: 7px;
	padding-bottom: 7px;
	font-weight: bold;
	color: white;
	text-shadow: 1px 1px 0px rgb(24, 71, 130);
}

.detailSectionHeader {
	text-align: left;
	background-position: left center;
	background-color: #C4C4C4;
	padding-left: 25px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-weight: bold;
}

.instruction {
	font-size: 11pt;
	font-weight: bolder;
	color: #00457f;
	font-family: Inter, Verdana, arial;
}

.successMessage {
	color: Green;
	font-family: Inter, Verdana, arial;
	text-align: center;
}

.failedMessage {
	color: Red;
	font-family: Inter, Verdana, arial;
	text-align: center;
}

.button {
	padding: 6px 10px 6px 10px;
	border-radius: 10px;
	background-color: #C4C4C4;
	font-family: Inter, Arial, sans-serif;
	color: black;
	margin: 0 auto;
	text-align: center;
	box-shadow: 2px 2px 2px #888888;
}

.dataTables_wrapper .dataTables_length { float: right; }


.gridAlternatingItem {
	background-color: rgb(250, 250, 250);
}

.gridItem {
	background-color: rgb(230, 231, 233);
}

.gridHeader {
	background-color: rgb(255, 217, 0);
}

.gridStandard {
	border: solid 1px #00457f;
	border-spacing: 0; /* cellspacing */
}

	.gridStandard tbody tr td {
		padding: 5px; /*cellpadding */
	}

	.gridStandard tr td {
		padding: 5px; /*cellpadding */
	}

.gridNoPadding {
	border: solid 1px #00457f;
	border-spacing: 0; /* cellspacing */
}

	.gridNoPadding tbody tr td {
		padding: 0; /*cellpadding */
	}

	.gridNoPadding tr td {
		padding: 0; /*cellpadding */
	}

.gridStandardPaddingUndefined {
	border: solid 1px #00457f;
	border-spacing: 0; /* cellspacing */
}

.table.dataTable thead tr {
	background-color: rgb(255, 217, 0);
}

table.dataTable tbody tr.stripe1 {
	background-color: rgb(230, 231, 233);
}

table.dataTable tbody tr.stripe2 {
	background-color: rgb(250, 250, 250);
}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
	background-color: rgb(0, 173, 238);
	background-color: rgba(0, 173, 238, 0.6);
}

table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 { background-color: rgb(50, 223, 255); }

table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 { background-color: rgb(25, 238, 255); }

table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 { background-color: rgb(0, 253, 255); }

table.dataTable thead tr { background-color: #FFE37A; }

.dataTable { border: solid 1px black; }

.adhoc_background { background-color: #FFF2C2; }

.calendar_input {
	background-image: url('../images/calendar.png');
	background-repeat: no-repeat;
	background-position: right;
	border-style: groove;
}

.quicklinks_Row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.quicklinks_Column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
}

.column {
	float: left;
	padding: 0px 10px;
}

#btnPeople_quicklinks {
	background: rgb(0, 173, 238) url("../images/Person.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#btnDoors_quicklinks {
	background: rgb(0, 173, 238) url("../images/Door.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#btnHolidays_quicklinks {
	background: rgb(0, 173, 238) url("../images/Holiday.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#btnReports_quicklinks {
	background: rgb(0, 173, 238) url("../images/Reports.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#btnAdvanced_quicklinks {
	background: rgb(0, 173, 238) url("../images/Advanced.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#btnHelp_quicklinks {
	background: rgb(0, 173, 238) url("../images/Question.png");
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	border-width: 0px;
	border-color: white;
	outline: none;
	background-size: contain;
}

#btnLockDown_quicklinks {
	background-color: red;
	border-color: white;
	width: 218px;
	height: 40px;
	border-width: 3px;
	border-style: solid;
	border-radius: 1px;
	font-family: Inter, Arial;
	font-size: 11.25pt;
	color: white;
	font-weight: bold;
	text-shadow: 1px 1px rgb(24, 71, 130);
}

.btn_quicklinks {
	height: 120px;
	width: 120px;
	border-radius: 50%;
	border-width: 0px;
	border-color: white;
	outline: none;
}

.quicklink_size {
	height: 30px;
	width: 30px;
	margin-right: 5px;
}

.quicklink_selected {
	height: 45px;
	width: 45px;
	margin-right: 5px;
	box-shadow: rgb(255, 217, 0) 0em 0em 0px 4px inset
}

.btn_quicklink {
	border-radius: 50%;
	border-width: 0px;
	border-color: white;
	outline: none;
}

/*See BlueButton.js for CSS related styling*/

.btn_label {
	vertical-align: top;
	padding-bottom: 10px;
	font-family: Inter, Verdana;
}

input[name$='btnLogout'] {
	background: rgb(0, 173, 238) url("../images/Logout.png");
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	border-width: 0px;
	border-color: white;
	outline: none;
	background-size: contain;
}

#btnHome {
	background: rgb(0, 173, 238) url("../images/Home.png");
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	border-width: 0px;
	border-color: white;
	outline: none;
	background-size: contain;
}

.loginField {
	width: 206px;
	height: 30px;
	float: right;
	padding-right: 10px;
	border-radius: 5px;
	border: 2px solid #999;
}

.loginField:focus {
	outline: none;
	border: 2px solid #333;
	box-shadow: 0 0 3px rgba(1,118,215,0.5);
}

.loginField::placeholder {
	color: #999;
	opacity: 1;
}

.loginField::-webkit-input-placeholder {
	color: #999;
}

.loginField::-moz-placeholder {
	color: #999;
	opacity: 1;
}

.loginField:-ms-input-placeholder {
	color: #999;
}

.password-toggle {
	color: #999;
	padding-right: 5px;
}

.password-toggle:hover {
	color: #333;
}

.wrapper { padding: 0; }

.form-row {
	display: flex;
	justify-content: flex-end;
	padding: .5em;
}

.form-row > label {
	padding: .5em 1em .5em 0;
	flex: 1;
}

.form-row > .loginField { flex: 2; }

.form-row > .bwButton { padding: .5em; }

.loginForm {
	display: grid;
	width: 456px;
	background-color: #f8f9fb;
	border-width: 0px;
	box-shadow: /*inset 0px 0px 1px 2px rgb(230, 231, 233),*/ 0px 0px 3px 5px rgb(57, 117, 176);
}

#bwLogo {
	height: 80px;
	background-image: url("../images/BlueWeb25.png");
	background-color: #f8f9fb;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: 0px;
	border-spacing: 0px;
	border-width: 0px;
	border-radius: 13px 13px 0 0;
}

#loginBackground {
	display: block;
	margin-top: auto;
	margin-bottom:auto;
}

.bwLoginBackgroundImage {
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.bwButton {
	color: white;
	border: 0;
	/*box-shadow: inset 0em 0em 1px 2px rgb(255, 255, 255), 0em 0em 0px 1px rgb(255, 255, 255), 0em 0em 0px 1px rgb(0, 173, 238), rgb(24, 71, 130) 0px 0px 3px 2px;*/
	background-color: rgb(0, 173, 238);
	font-family: Inter, Verdana;
	font-weight: bold;
	/*text-shadow: 1px 1px rgb(24, 71, 130);*/
	padding: .5em;
	background-size: contain;
	text-align: center;
	border-radius: 5px;
}

.disabled {
	background-color: rgb(138, 140, 142);
}

.bwLabel {
	color: #000000;
	font-family: Inter, Verdana;
	font-weight: bold;
	/*text-shadow: 1px 1px rgb(24, 71, 130); */
	text-align: center;
}

.bwVersion {
	color: #666;
	font-size: 10pt;
	text-align: center;
	font-family: Inter, Verdana;
	margin-top: -15px;
	margin-bottom: 15px;
}

.loginBackground {
	background-color: rgb(24, 71, 130);
	vertical-align: middle;
}

#LoginCompany {
	font-family: Inter, Verdana;
	font-weight: 700;
	font-size: 18pt;
	padding-top: 0px;
	padding-right: 0px;
	/*text-shadow: 2px 1px 1px rgb(0, 0, 0);*/
}

.buttonIcon {
	width: 25px;
	height: 25px;
	vertical-align: bottom;
	border-radius: 50%;
	border-width: 0px;
	outline: none;
	background-color: transparent;
	box-shadow: rgb(24, 71, 130) 0em 0em 0px 1px inset;
}



.icon_fill { background-color: transparent; }

.icon_hover {
	background-color: rgb(48, 146, 171);
}

.icon_active {
	background-color: rgb(57, 117, 176);
}

.button_transform { transform: translateY(4px); }

.button_fill {
	background-color: rgb(48, 146, 171);
}

.button_hover {
	background-color: rgb(63, 218, 216);
}

.button_active { background-color: rgb(255, 217, 0); }

.background_color { background-color: rgb(24, 71, 130); }

.section_yellow { background-color: rgb(255, 217, 0); }