body {
	/*color: #7f7f7f;*/
	color:#000;
  	font-family: 'Roboto', 'Helvetica', 'sans-serif';
}

h1, h2, h3, h5 {
	color: #002060;
}

h3 div a
{
	font-size: 1.5rem;
}

blockquote {
	margin-left: 3em;
}

ul {
	margin-left: 3em;
}

ol {
	margin-left: 3em;
}

ol li {
}

a {
	color: #002060;
	font-size: normal;
}

a:hover {
	text-decoration: none;
	font-size: normal;
}

input, select, textarea
{
	font-family: 'Roboto', 'Helvetica', sans-serif;
	font-size:inherit;
}

h3 {
	font-size:30px;
}

/*footer
{
   position:absolute!important;
   width:100%;
}*/

/*.footer-spacing
{
	bottom:-10px!important;
}*/

.footer-copy-container
{
	width:100%;
	height:50px;
	float:left;
	/*background-color:red;*/
	color:#ffffff;
}

.footer-copy-container .copyright-container {
	width:50%;
	height:100%;
	float:left;
	/*background-color:green;*/
}

.footer-copy-container .version-container {
	width:50%;
	height:100%;
	float:right;
	text-align:right;
}

.footer-copy-container .version-container span#version-text {
	margin-top:13px;
	display:inline-block
}

#result {
	width:100%;
	height:100%;
	float:left;
	margin-top:20px;
}

span.info{
	color:#002060;
	/* font-weight:bold; */
}

/*#result div
{
	overflow-x: scroll!important;
}*/

/*#result h3 div
{
	overflow-x: hidden!important;
}*/

.mdl-card__supporting-text
{
	color:#000!important;
}

/* BW 2021-10-25 notification button */
.mdl-layout__tab .badge {
	position: absolute;
	top: -10px;
	right: -10px;
	/* padding: 5px 10px;
	border-radius: 50%;
	background-color: red; */
  }

  .pageMessage-wrapper {
	width:100%;
	float:left;
	text-align:center;
	background-color:green;
	color:#fff;
	padding:5px;
	font-size:1.2em;
	margin-bottom:5px;
  }

  .errorMessage-wrapper {
	width:100%;
	float:left;
	text-align:center;
	background-color:red;
	color:#fff;
	padding:5px;
	font-size:1.2em;
	margin-bottom:5px;
  }

  .message-wrapper {
	width:100%;
	float:left;
	text-align:center;
	background-color:green;
	color:#fff;
	padding:5px;
	font-size:1.2em;
	margin-bottom:5px;
  }

@media screen and (min-width:961px)  
{
	/*#result div
	{
	overflow-x: hidden!important;
	}*/
} 

@media screen and (max-device-width: 480px) 
{
	/*footer
	{
		position:static!important;
		width:100%;
	}*/

	#register-wrapper .input-wapper #reg-email
	{
		width:132px!important;
	}

}

@media only screen 
  and (min-device-width: 768px)
  and (orientation: portrait)
{
	.spacing
	{
		padding-bottom:140px!important;
	}

	.reg-spacing
	{
		padding-bottom:190px!important;
	}	

	.site-spacing
	{
		padding-bottom:318px!important;
	}

	.building-spacing
	{
		padding-bottom:288px!important;
	}

	.space-spacing
	{
		padding-bottom:248px!important;
	}

	.confirm-spacing
	{
		padding-bottom:46px!important;
	}

	.message-spacing
	{
		padding-bottom:316px!important;
	}

	/*.pt-footer-spacing
	{
		padding-bottom:336px!important;
	}

	footer
	{
		position: static!important;
	}*/
}

@media only screen 
  and (min-device-width: 768px)
  and (orientation: landscape)
{
	.spacing
	{
		padding-bottom:140px!important;
	}

	.reg-spacing
	{
		padding-bottom:190px!important;
	}	

	.site-spacing
	{
		padding-bottom:318px!important;
	}

	.building-spacing
	{
		padding-bottom:288px!important;
	}

	.space-spacing
	{
		padding-bottom:248px!important;
	}

	.message-spacing
	{
		padding-bottom:60px!important;
	}

	/*footer
	{
		position: static!important;
	}*/
}

/* login */

#login-wrapper
{
	width:100%;
	height:100%;
	float:left;
}

#login-wrapper .input-wapper label
{
	display: inline-block;
	width: 100px;
}

#inputtext1, #inputtext2 {
	width: 170px;
	font-family: 'Roboto', 'Helvetica', sans-serif;
}

/* Enhanced responsive login form */
.loginfields {
	width: 100%;
	max-width: 300px;
	padding: 12px 16px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 8px;
}

.loginfields:focus {
	outline: none;
	border-color: #002060;
	box-shadow: 0 0 0 2px rgba(0, 32, 96, 0.2);
}

#login-wrapper .input-wapper {
	margin-bottom: 20px;
}

#login-wrapper .input-wapper label {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	font-weight: 500;
	color: #002060;
}

.submit-btn {
	width: 100%;
	max-width: 200px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 500;
	border-radius: 4px;
	margin-top: 10px;
	transition: all 0.3s ease;
}

/* Desktop mode button - smaller size */
@media screen and (min-width: 1200px) {
	.submit-btn {
		max-width: 150px;
		padding: 10px 16px;
		font-size: 15px;
	}
}

.submit-btn:hover {
	background-color: #001a4d;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 32, 96, 0.3);
}

/* Desktop: widen SSO button so it aligns cleanly */
@media screen and (min-width: 1200px) {
	.sso-btn {
		max-width: 300px;
	}
}

.submit-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 32, 96, 0.3);
}

.alert {
	color: #FF0000;
}

.small-info
{
	margin-bottom:10px;
}

/* register */

#register-wrapper
{
	width:100%;
	height:100%;
	float:left;
}

#register-wrapper .input-wapper label
{
	display: inline-block;
	width: 130px;
}

/* .input-wapper .reg-info
{
	color: #FF0000;
} */

/*BW 2021-04-27 password validator style*/
#password-strength-status {
	padding: 5px 10px;
	color: #FFFFFF;
	border-radius: 4px;
	margin-top: 5px;
}

.medium-password {
	background-color: #b7d60a;
	/* border: #BBB418 1px solid; */
}

.weak-password {
	background-color: #ce1d14;
	/* border: #AA4502 1px solid; */
}

.strong-password {
	background-color: #12CC1A;
	/* border: #0FA015 1px solid; */
}

/* Update message */

#updates {
}

#updates ul {
	margin: 0;
	list-style: none;
}

#updates h3 {
	margin: 0;
}

#updates p {
	margin-bottom: 1.4em;
	font-size: smaller;
	line-height: normal;
}

/* BMW 20-9-2018 New Design*/

label
{
	font-weight: bold;
}

.mdl-layout__header-row h3 
{
	color:#fff;
}

.mdl-layout__header-row,
.mdl-layout__tab-bar,
.mdl-layout__header 
{
	background-color: #002060!important;
}

.mdl-mega-footer,
.mdl-mega-footer--bottom-section,
footer 
{
	background-color: #b5b8bd!important;
}

.input-wapper
{
	width:100%;
	height:100%;
	float:left;
	margin-bottom:15px;
}

.submit-btn, #upload input, input[type="file"]
{
	padding: 10px; 
    background:#002060; 
    border:1px solid #002060;
    cursor:pointer;
    color:#fff;
}

button
{
	padding: 10px; 
    background:#002060; 
    border:1px solid #002060;
    cursor:pointer;
    color:#fff;
    font-size:inherit;
}

.logo-wrapper
{
	width: 30%;
	height: 100%;
	float:left;
}

.date-time-wrapper
{
	width: 30%;
	height: 100%;
	float: right;
	text-align: right;
	color: #fff;
}

.site-name-wrapper
{
	width:40%;
	height:100%;
	/* margin:auto auto; */
	text-align: center;
}

/* Responsive header improvements */
@media screen and (max-width: 768px) {
	.logo-wrapper {
		width: 25%;
	}
	
	.site-name-wrapper {
		width: 50%;
	}
	
	.date-time-wrapper {
		width: 25%;
		font-size: 0.9em;
	}
	
	.mdl-layout__header-row {
		height: 70px;
		margin-top: 5px;
	}
	
	.logo-wrapper img {
		width: 60px;
		height: 60px;
	}
	
	.site-name-wrapper h3 {
		font-size: 1.2em;
		line-height: 1.2;
	}
}

@media screen and (max-width: 480px) {
	.logo-wrapper {
		width: 20%;
	}
	
	.site-name-wrapper {
		width: 60%;
	}
	
	.date-time-wrapper {
		width: 20%;
		font-size: 0.8em;
	}
	
	.mdl-layout__header-row {
		height: 60px;
		margin-top: 0;
	}
	
	.logo-wrapper img {
		width: 50px;
		height: 50px;
	}
	
	.site-name-wrapper h3 {
		font-size: 1em;
		line-height: 1.1;
	}
}

/* .site-name-wrapper h3
{
	text-align: center;
} */

.mdl-layout__header-row
{
	height: 80px;
	margin-top: 10px;
}

/*site details*/

.back-next-wrapper
{
	width: 100%;
	height: 100%;
	float: left;
	margin-top: 40px;
}

.back-next-wrapper .back-btn-wrapper
{
	width: 100%;
	height: 100%;
	float: left;	
}

/*.back-next-wrapper .next-btn-wrapper
{
	width: 50%;
	height: 100%;
	float: right;
	text-align: right;
}*/

.selected-field-wrapper
{
	width: 100%;
	height: 30px;
	float: left;
} 

/* BW 2021-09-20 accompanied access format issue*/
#jr-access-field
{
	margin-bottom:20px;
}

.selected-field-action-wrapper
{
	width: 100%;
	height: 60px;
	float: left;
} 

/* .selected-field-space-wrapper
{
	width: 100%;
	height: 10px;
	float: left;
}  */

#expand-button-site
 {
	position: relative;
	top: 6px;
}

#expand-button-building
 {
	position: relative;
	top: 7px;
}

#expand-button-space
 {
	position: relative;
	top: 5px;
}

.section--footer
{
	background-color: #F5F5F5!important;
}

/*space details*/

/*.back-next-wrapper #back-btn-space-wrapper
{
	width: 33%;
	height: 100%;
	float: left;	
}

.back-next-wrapper #next-btn-space-wrapper
{
	width: 33%;
	height: 100%;
	float: right;
	text-align: right;
}

.back-next-wrapper #middle-btn-space-wrapper
{
	width: 33%;
	height: 100%;
	float: left;
	text-align: center;
}*/


/*job request details*/

.details-wrapper
{
	width: 100%;
	height: 100%;
	float: left;
	margin-top: 20px;
}

div#review-wrapper
{
	width:100%;
	height:100%;
	float:left;
	margin-top:10px;
}

div#review-wrapper div#starRating-wrapper
{
	width: 100%;
	height: 100%;
	float: left;
	margin-top:10px;
	margin-bottom:10px;
}

div#review-wrapper div#comment-wrapper
{
	width: 100%;
	height: 100%;
	float: left;
	margin-top:10px;
	margin-bottom:10px;
}

.details-wrapper #jobtype
{
	width: 100%;
	height: 100%;
	float: left;
}

.details-wrapper #subtype
{
	width: 100%;
	height: 100%;
	float: left;
	margin-top: 20px;
}

.details-wrapper #problem
{
	width: 100%;
	height: 100%;
	float: left;
	margin-top: 20px;
}

.details-wrapper label, .selected-field-wrapper label {
	display: inline-block;
	width:140px;
}

/* Enhanced styling for key rows on mobile only; desktop aligns like others */

/* Keep labels aligned consistently (desktop already set via .selected-field-wrapper label) */

/* Building: position the search icon nicely */
#buildingField a#showBuilding {
	margin-left:8px;
	line-height:1;
}

/* Mobile tweaks for Site, Building, Space and Description */
@media (max-width: 740px) {
    /* Make these rows flexible and wrap on small screens */
    #siteField,
    #buildingField,
    #buildingField + .selected-field-wrapper,
    #descriptionField {
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:6px;
    }

    /* Labels stack on their own line on mobile */
    #siteField label,
    #buildingField label,
    #buildingField + .selected-field-wrapper label,
    #descriptionField label {
        width:100%;
        min-width:0;
        margin-right:0;
    }

    #buildingField a#showBuilding {
        display:inline-block;
        margin-left:0;
        margin-top:4px;
    }
}

input#selFAULT,
textarea#selDESC
{
	width: 90%;
}

textarea#selDESC
{
	text-indent: 0px!important;
	font-family: 'Roboto', 'Helvetica', sans-serif!important;
}

hr.divider
{
	width:100%;
	border-top: 1px dashed #000;
}

/*#selHoursSpent
{
	margin-left:23px;
}*/

/*date completed, hours spent on the jr details page*/
/* .small-wrapper
{
	width:33%;
	height:100%;
	float:left;
}

.small-wrapper input {
	float:right;
}

.job-field-wrapper
{
	width: 100%;
	height: 80px;
	float: left;
}  */

div.ui-datepicker
{
	background-color:grey;
}

.ui-draggable, .ui-droppable 
{
	background-position: top;
}

div#actionRequired,
div#notes
{
	margin-bottom:10px!important;
	height:100%;
}

.jr-header {
	width:100%;
	height:90px;
	float:left;
	/*background-color:blue;*/
}

.jr-header #jr-title {
	width:90%;
	height:100%;
	float:left;
	text-align:left;
	/*background-color:red;*/
}

.jr-header #jr-print-button {
	width:10%;
	height:100%;
	float:right;
	text-align:right;
	/*background-color:yellow;*/
}

/* BW 2019-08-22 removed, addtional fields now present to provide padding
div#referredTofield
{
	margin-bottom:20px;
}
*/

textarea#actionRequired,
textarea#actionTaken,
textarea#comment,
textarea#notes
{
	width:90%;
}

#grid-container,
#grid-container-operative 
{
  width: 90%;
  height:100%;
  float:left;
  margin-bottom:10px;
  overflow: hidden;
}


.grid-item 
{
  opacity: 0;
  float: left;
  box-sizing: border-box;
}

.grid-item img 
{
  width: 100%;
  height: 100%;
}

.grid-item.loaded 
{
  opacity: 1;
  transition: opacity .5s;
}

/*photo uploader*/

.image-wrapper label {
	width:90%;
}

div#upload
{
	width:90%;
	height:100%;
	float:left;
	margin-bottom:20px;
}

div#progress span.green-message {
	color:#008000;
}

div#progress span.red-message {
	color:#ff0000;
}

/* #selEndDateTime
{
	margin-left:5.2px;
} */

div#endDateTimeField
{
	margin-bottom:10px;
}

#remain
{
	color:#002060;
}

#work-order-wrapper
{
	width:100%;
	height:100%;
	float:left;
	margin:10px 0px 20px 0px;
	/*border:1px solid #000;*/
}

#work-order-wrapper h5
{
	margin-top:0px;
}

#AssetName span.asset-info
{
	background-color:yellow;
	padding:5px;
	width:90%;
}

#AssetName {
	height:40px;
}

.info-wrapper {
	width:100%;
	height:30px;
	float:left;
	padding-top:20px;
}

.info-yellow
{
	background-color:yellow;
	padding:5px;
}

/*user info*/

.user-wrapper
{
	width: 100%;
	height: 20px;
	float: left;
	margin-bottom: 20px;
	border-bottom:1px solid grey;
}

.user-wrapper .user
{
	width: 50%;
	height: 100%;
	float: left;
}

.user-wrapper .date
{
	width: 50%;
	height: 100%;
	float: right;
	text-align: right;
}

/*job request list*/

table
{
  background: white;
  border-collapse: collapse;
  margin: 1.25em 0 0;
  width: 100%;
}

table tr,
table th,
table td 
{
  border: none;
  border-bottom: 1px solid #002060;
  /*font-size: .875rem;*/
}

table th,
table td 
{
  padding: 10px 12px;
  text-align: left;
}

table th 
{
  background: #002060;
  color: #ffffff;
  text-transform: uppercase;
}

table th a
{
	color: #ffffff;
}

table tr td 
{
  background: #eaf3f5;
  /*color: #999999;*/
  color: #000;
}

table tr:nth-of-type(2n+2) td 
{
  background: #ffffff;
}

table.bt tfoot th,
table.bt tfoot td,
table.bt tbody td 
{
  /*font-size: .8125rem;*/
  padding: 0;
}

table.bt tfoot th:before,
table.bt tfoot td:before,
table.bt tbody td:before 
{
  background: #002060;
  color: white;
  margin-right: 10px;
  padding: 2px 10px;
}

table.bt tfoot th .bt-content,
table.bt tfoot td .bt-content,
table.bt tbody td .bt-content 
{
  display: inline-block;
  padding: 2px 5px;
}

table.bt tfoot th:first-of-type:before,
table.bt tfoot th:first-of-type .bt-content,
table.bt tfoot td:first-of-type:before,
table.bt tfoot td:first-of-type .bt-content,
table.bt tbody td:first-of-type:before,
table.bt tbody td:first-of-type .bt-content 
{
  padding-top: 10px;
}

table.bt tfoot th:last-of-type:before,
table.bt tfoot th:last-of-type .bt-content,
table.bt tfoot td:last-of-type:before,
table.bt tfoot td:last-of-type .bt-content,
table.bt tbody td:last-of-type:before,
table.bt tbody td:last-of-type .bt-content 
{
  padding-bottom: 10px;
}

div#FilterWrapper
{
	width:100%;
	/*height:100%;*/ /*removed hight, prevented record table displaying.*/
	float:right;
	text-align:right;
	margin-bottom:20px;
}

div#FilterWrapper div.list-filter 
{
	width:100%;
	/*height:100%;*/
	float:right;
	margin-top:10px;
}

div#FilterWrapper div.small-list-filter 
{
	width:40%;
	/*height:100%;*/
	float:right;
	margin-top:10px;
}

div#FilterWrapper div.manager-info-wrapper
{
	width:40%;
	/*height:100%;*/
	float:left;
	margin-top:10px;
	text-align: left!important;
}

div#FilterWrapper div#list-filter-link
{
	width:100%;
	height:16px;
	float:right;
	margin-top:10px;
	margin-bottom:10px;
}

a.pagination
{
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  display: inline-block;
}

a.active {
  background-color: #002060;
  color: white;
}

a.pagination:hover:not(.active) 
{
	background-color: #ddd;
}

/* Priority text colour */
.red-text
{
	color:red!important;
}

.green-text
{
	color:green!important;
}

.blue-text
{
	color:blue!important;
}

.black-text
{
	color:black!important;
}

/*Take job background colour */

.available {
	background-color: orange!important;
}

div.top-list-table-wrapper
{
	width:100%;
	/*height:100%;*/
	float:left;
	margin-bottom:10px;
	position: relative;
}

div.top-list-table-wrapper .mdl-button--fab.mdl-button--colored,
div.top-list-table-wrapper .mdl-button--fab.mdl-button--colored:hover 
{
	float:right!important;
	margin-right:2px;
	background-color:#002060;
}

div.top-list-table-wrapper span.record-count
{
	position:absolute; 
	bottom:0;
	font-weight: bold;
}

div.top-list-table-wrapper span.jr-filter
{
	position:absolute; 
	bottom:0;
	left:92px;
	font-weight: bold;
}

.team-leader-label
{
	font-size:1.1em;
}

#totaljr {
	color:#9e9e9e;
}

.disable-link {
	color:#9e9e9e;
}

/* overdue jr colour indicator on list page */
td.od-indicator
{
	border-left:solid 4px red;
}

/* due today jr colour indicator on list page */
td.due-today-indicator
{
	border-left:solid 4px #FFBF00;
}

/*stats*/

div#stats-wrapper
{
	width:100%;
	height:100;
	float:left;
	margin-bottom:20px;
}

span.stat-title
{
  font-size:1.1em;
}

span.stat
{
	font-size:1.6em;
	font-weight:bold;
	color:#002060;
}

span.stat a
{
	text-decoration: none;
	font-weight:bold;
}

span.stat a:hover
{
	text-decoration: underline;
}

.red-stat,
.red-stat a,
.red-stat a:hover
{
	color:red!important;
}

.amber-stat,
.amber-stat a,
.amber-stat a:hover
{
	color:#FFBF00!important;
}

.green-stat,
.green-stat a,
.green-stat a:hover
{
	color:green!important;
}

table#stats {
  border: none;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

table#stats tr {
  background-color: #ffffff;
}

table#stats tr td
{
	background-color: #ffffff;
}

table#stats tr, 
table#stats th,
table#stats td
{
	border-bottom: none;
}

table#stats th,
table#stats td 
{
  text-align: left;
  padding:0px;
  padding-bottom:4px;
}

table#stats th
{
	background-color:#ffffff;
	color:#000000;
	font-weight:normal;
	text-transform: capitalize;
}

@media screen and (max-width: 600px) {
  table#stats thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table#stats tr {
    display: block;
  }
  
  table#stats td {
    display: block;
    text-align: right;
  }
  
  table#stats td::before {
    content: attr(data-label);
    float: left;
  }

  span.stat{
	font-size:1.4em;
  }

}

div.toggle-link-wrapper
{
	width:100%;
	height:20px;
	float:left;
	padding-bottom: 10px;
}

/*loading gif*/

#loading 
{
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image 
{
  position: absolute;
  top: 40%;
  left: 45%;
  z-index: 100;
}

/* Sub-Menu */

#menu-icons-wrapper
{
    width:100%;
    height:24px;
    float:right;
    text-align: right;
}

/*Team View Pages*/

div#top-team-view-container {
	width:100%;
	height:20px;
	float:left;
	font-size:1.2em;
	margin-bottom: 20px;
	/*border:1px solid;*/
}

div#top-team-view-container div#datetime {
	width:50%;
	height:100%;
	float:left;
	text-align:left;
}

div#top-team-view-container div#reset-link {
	width:50%;
	height:100%;
	float:right;
	text-align:right;
}

.team-stats-container{
	width:100%;
	height:100;
	float:left;
	margin-bottom:20px;
	/*border:1px solid #000;*/
}

th.text-centre
{
	text-align: center;
	font-weight:bold;
}

td.text-centre
{
  text-align: center;
  padding:0px!important;
}

.team-stat
{
	font-weight:bold;
	font-size: 1.3em;
}

div.overall-stats-container {
	width:100%;
	height:100%;
	float:auto auto;
}

table.overall-stats
{
	width:100%;
	height:100%;
}

table.overall-stats tr td text{
	font-family: 'Roboto', 'Helvetica', 'sans-serif'!important;
}

div.team-jobrecords-container {
	width:100%;
	height:100%;
	float:left;
	/*border:1px solid #000;*/
}

.team-view-jr-table {
  width: 100%;
  margin:0;
  padding:0;
  background-color:#ffffff;
  border-collapse: collapse!important;
  border: none!important;
}

.team-view-jr-table tr {
  background-color: #ffffff;
}

.team-view-jr-table tr td
{
	background-color: #ffffff;
}

.team-view-jr-table tr, 
.team-view-jr-table th,
.team-view-jr-table td
{
	border-top:none;
	border-bottom:none;
}

.team-view-jr-table th,
.team-view-jr-table td 
{
  text-align: left;
  padding:4px;
}

.team-view-jr-table th
{
	background-color:#ffffff;
	color:#000000;
	font-weight:normal;
	text-transform: capitalize;
}

#team-view-jr-dialog table, span#ui-id-1 {
	font-size:1.2em;
}

.team-view-jr-table td.highlight {
	background-color: yellow!important;
}

/*modal dialog*/
.ui-widget.ui-widget-content {
	border-color: #002060!important;
}

.ui-dialog-titlebar {
	background-color: #002060!important;
	color: #ffffff!important;
}

a#showBuilding
{
	outline: none;
}

/*reports*/
.report-container {
	width:100%;
	height:100%;
	float:left;
	/*border:1px solid #000;*/
}

.report-container #month-filter-container {
	width:100%;
	height:100%;
	float:right;
	text-align:right;
	margin-bottom:10px;
}

.report-container .report-table {
	width:100%;
	height:100%;
	float:left;
	/*border:1px solid #000;*/
	margin-top:20px;
	margin-bottom:40px;
}

.report-container #report-table #list_table th
{
	color:#ffffff!important;
}

.report-container .report-bar-chart{
	width:100%;
	height:100%;
	float:left;
	/*border:1px solid #000;*/
	margin-top:20px;
	margin-bottom:40px;
}

.report-container .report-pie-charts-container {
	width:100%;
	height:100%;
	float:left;
	/*border:1px solid #000;*/
	/*margin-top:20px;
	margin-bottom:40px;*/
}

.report-container .report-pie-charts-container .priority {
	width:30%;
	height:100%;
	float:left;
}

.report-container .report-pie-charts-container .time {
	width:30%;
	height:100%;
	float:left;
	margin-left:5%;
}

.report-container .report-pie-charts-container .job-types {
	width:30%;
	height:100%;
	float:left;
	margin-left:5%;
}

.report-records-container {
	width:100%;
	height:100%;
	float:left;
}

.report-container .report-records-container .report-records {
	width:100%;
	height:100%;
	float:left;
	/*border:1px solid #000;*/
	margin-top:20px;
}

.report-container .report-records-container .report-records table th,
.report-container .report-table table th {
	color:#000000;
}

.report-sub-heading {
	font-size:14px;
	color:#000000;
}

.report-container h4 {
	margin-bottom:5px!important;
}

#report-top-container {
	width:100%;
	height:50px;
	float:left;
	/*background-color:green;*/
}

#report-top-container #report-title {
	width:50%;
	height:100%;
	float:left;
	text-align:left;
}

#report-top-container #print-button {
	width:50%;
	height:100%;
	float:right;
	text-align:right;
	/*background-color:yellow;*/
}

/*page breaker*/
.page-break-indicator {
	page-break-after: always;
}

/*multi operative fields on details page*/

/* BW 2021-12-02 additional height for multi-operative fields*/
div.multi-operative-select-wrapper {
	height:140px!important;
	margin-bottom:10px;
	margin-top:5px;
}

.operativeName {
	background-color: yellow;
}

.multi-operative-notes textarea {

	border:none;
}

/* BW 2022-01-18 multi-operative name fix for mobile device. */
.multi-operative-names {
	height:40px!important;
}

table.multi-operatives {
	width:60%;
	border:none;
	margin-bottom:5px;
}

table.multi-operatives tr,
table.multi-operatives th,
table.multi-operatives td 
{
  border: none;
  padding:0px
}

table.multi-operatives td {
	padding-bottom:5px;
	background-color:#ffffff;
}

/*multi-operative data*/
div.multi-operative-data-wrapper {
	width:100%;
	height:100%;
	float:left;
	margin-top:20px;
}

div.multi-operative-data-wrapper div.multi-operative-fields {
	width:100%;
	height:100%;
	float:left;
	padding-left:5px;
	background-color:#c0c0c0;
	margin-bottom:10px;
}

div.confirm-details-wrapper {
	width:100%;
	height:100%;
	float:left
}

div.confirm-details-wrapper label {
	width:180px!important;
}

.help-icon {
	margin-top:19px;
}

.orange-button {
	background-color:orange;
	border:1px solid orange;
}

/*devices*/

/*Lenovo 7inch Tablet*/
@media only screen and (max-device-width: 1024px)
{
	/*job request details*/

	/* #selEndDateTime
	{
		margin-left:8px;
	} */
}

@media only screen and (max-device-width: 600px)
{
	/* #selEndDateTime
	{
		margin-left:8px;
	} */

	div#priority-field
	{
		height:100%;
		margin-bottom:10px;
	}

	/*register*/

	#register-wrapper .input-wapper #reg-email
	{
		width:250px!important;
	}

		/*forgotten password*/
    #forgotten_password_email
	{
		width:300px!important;
	}
}

@media only screen and (max-width: 960px)
{
	div.multi-operative-select-wrapper {
		height:280px!important;
	}
}

/*IPhone 7*/
@media (max-width: 420px) and (orientation: portrait)
{
    /*general*/

    input, select
    {
    	font-size:12px;
    }

    div#scheduled-time-field
    {
    	margin-bottom:20px;
    }

    div#priority-field
	{
		height:100%;
		margin-bottom:10px;
	}

    /* div#referredTofield
    {
    	height:100%;
    } */

    /* div#InspectionRef {
    	margin-bottom:10px;
    } */

    /* .small-wrapper {
		width:100%!important;
	} */

	/*register*/

	#register-wrapper .input-wapper #reg-email
	{
		width:130px!important;
	}

	/*forgotten password*/
    #forgotten_password_email
	{
		width:250px!important;
	}

	h3, .jr-header #jr-title h3 {
		font-size: 24px;
	}

	.fc-toolbar h2 {
		font-size:1.3em!important;
		line-height: 28px!important;
	}

	h5 {
		font-size:15px;
	}

	em, .input-wapper .reg-info {
		font-size:12px;
	}

}

/*IPhone 7*/
@media (max-width: 667px) and (orientation: landscape)
{
	#register-wrapper .input-wapper #reg-email
	{
		width:280px!important;
	}

	/* .small-wrapper input {
		float:right!important;
	}

	.small-wrapper {
		width:45%!important;
	} */
}

/*Samsung S8*/
@media only screen and (max-device-width: 411px)
{
	#register-wrapper .input-wapper #reg-email
	{
		width:200px;
	}

	div#endDateTimeField
	{
		margin-bottom:20px;
		margin-top:20px;
	}
}

/*Samsung S9 360 x 740*/
@media only screen and (min-width: 740px) and (orientation: landscape)
{
	#reg-email
	{
		width:320px!important;
	}

	/* .small-wrapper input {
		float:right!important;
	} */

	/*.small-wrapper {
		width:48%!important;
	}*/

	/*fix for PC screen*/
	/*date completed, hours spent on the jr details page*/
	/* .small-wrapper {
		width:34%!important;
	}*/
} 


@media (max-width: 360px) and (orientation: portrait)
{
	/* .small-wrapper {
		width:100%!important;
	} */
}

/*stop font size enlarging on Iphone in landscape mode*/
html {
    -webkit-text-size-adjust: none;
}

/* Location search field - hidden by default, shown only on mobile */
.locationSearch {
	display: none;
	margin-top:10px;
}

/* Job Type filter - visible on all screen sizes */
.jobTypeSearch {
	margin: 10px 0;
	clear: both;
}

.job-type-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.job-type-wrapper label {
	font-weight: bold;
	margin: 0;
}

.job-type-wrapper select {
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	background-color: white;
	min-width: 150px;
	cursor: pointer;
}

.job-type-wrapper select:hover {
	border-color: #999;
}

.job-type-wrapper .reset-btn {
	background-color: #002060;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.3s;
	font-weight: 500;
	min-width: 70px;
}

.job-type-wrapper .reset-btn:hover {
	background-color: #00164d;
}

.job-type-wrapper .reset-btn:active {
	background-color: #000c2e;
	transform: scale(0.98);
}

/* Hide Job Type column while keeping filtering functional */
th[data-column-id="jobtype"],
td[data-column-id="jobtype"] {
	display: none;
}

/*general mobile and tablet fixes*/

@media (max-width: 968px)
{

	h3, .jr-header #jr-title h3 {
		font-size: 24px;
	}

	.fc-toolbar h2 {
		font-size:1.3em!important;
		line-height: 28px!important;
	}

	h5 {
		font-size:15px;
	}

	em, .input-wapper .reg-info {
		font-size:12px;
	}

	/*date completed, hours spent on the jr details page*/
	/* .small-wrapper {
		width:58%;
	} */

	/*commented out, caused labels to be aligned to the right on Lenovo tablet
	/*.small-wrapper input {
		float:left;
	}*/

	/* BW 2023-01-16 */
	/* overdue jr colour indicator on list page */
	td.od-indicator
	{
		border-top:solid 4px red!important;
	}

	/* due today jr colour indicator on list page */
	td.due-today-indicator
	{
		border-top:solid 4px #FFBF00!important;;
	}

	/* BW 2023-04-21 default the hight of the textarea */ 
	textarea#actionTaken
	{
		height:50px!important;
	}

	/* Job Type filter responsive styling for mobile/tablet */
	.job-type-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.job-type-wrapper label {
		font-size: 14px;
	}

	.job-type-wrapper select {
		width: 100%;
		min-width: 200px;
		font-size: 16px; /* Prevent zoom on iOS */
		padding: 8px 12px;
	}

	.job-type-wrapper .reset-btn {
		padding: 10px 18px;
		font-size: 15px;
		min-width: 75px;
	}

	#siteField,
	#buildingField {
		height:40px!important;
		margin-bottom:10px!important;
	}

	#schedule-title {
		padding-top:40px!important;
	}
	
    div#scheduled-time-field
    {
    	height:50px;
    }

		/* Fix: allow details rows to grow and wrap on tablets/mobiles */
		.selected-field-wrapper {
			height:auto;
			margin-bottom:10px;
		}

		/* Priority row: stack elements and make the select full width */
		#priority-field {
			display:flex;
			flex-wrap:wrap;
			align-items:center;
			gap:6px;
		}

		#priority-field label {
			width:100%;
		}

		#priority-field select#selPriority {
			display:block;
			width:100%;
			max-width:100%;
		}
}

/* Responsive fix: prevent overlap of fields and Save button on small screens */
@media (max-width: 740px) {
    /* Allow field rows to expand to content height */
    .selected-field-wrapper {
        height: auto;
        margin-bottom: 10px;
    }

    /* Make the Referred To row wrap cleanly */
    .selected-field-wrapper.referred-to {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    /* Place label on its own line for narrow widths */
    .selected-field-wrapper.referred-to label {
        width: 100%;
    }

    /* Ensure the dropdown uses the full available width */
    .selected-field-wrapper.referred-to select {
        width: 100%;
        max-width: 100%;
    }

    /* Team (Facilities) field: make select full-width and stack under label */
    #selTradeType {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-top: 6px;
    }
}

/* Style reference links as buttons on mobile view (when table uses basictable) */
@media (max-width: 731px) {
	table.bt tbody td a {
		display: inline-block;
		padding: 8px 16px;
		background: #002060;
		border: 1px solid #002060;
		color: #fff;
		border-radius: 4px;
		text-decoration: none;
		font-weight: 500;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.1s ease;
	}
	
	table.bt tbody td a:hover {
		background: #001a4d;
		transform: translateY(-1px);
		box-shadow: 0 2px 4px rgba(0, 32, 96, 0.3);
	}
	
	table.bt tbody td a:active {
		transform: translateY(0);
		box-shadow: 0 1px 2px rgba(0, 32, 96, 0.3);
	}
}

/* Enhanced Mobile Responsive Design */

/* Mobile-first approach for login page */
@media screen and (max-width: 768px) {
	/* Login form improvements */
	#login-wrapper .input-wapper label {
		display: block;
		width: 100%;
		margin-bottom: 8px;
		font-weight: 500;
	}
	
	.loginfields {
		width: 100%;
		max-width: none;
		padding: 14px 16px;
		font-size: 16px; /* Prevents zoom on iOS */
	}
	
	.submit-btn {
		width: 100%;
		max-width: none;
		padding: 16px 20px;
		font-size: 16px;
		margin-top: 20px;
	}
	
	/* Card improvements */
	.mdl-card {
		margin: 10px;
	}
	
	.mdl-card__supporting-text {
		padding: 20px;
	}
	
	/* Header improvements */
	.mdl-layout__header-row {
		padding: 0 16px;
	}
	
	/* Tab bar improvements */
	.mdl-layout__tab-bar {
		padding: 0 16px;
	}
	
	.mdl-layout__tab {
		padding: 12px 16px;
		font-size: 14px;
	}
}

@media screen and (max-width: 480px) {
	/* Extra small screens */
	.mdl-card {
		margin: 5px;
	}
	
	.mdl-card__supporting-text {
		padding: 16px;
	}
	
	.mdl-layout__header-row {
		padding: 0 8px;
	}
	
	.mdl-layout__tab-bar {
		padding: 0 8px;
	}
	
	.mdl-layout__tab {
		padding: 10px 12px;
		font-size: 13px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 150px;
	}
	
	/* Ensure tabs are readable on small screens */
	@media screen and (max-width: 360px) {
		.mdl-layout__tab {
			font-size: 12px;
			padding: 8px 10px;
			max-width: 120px;
		}
	}

	/* Job Type filter for extra small screens */
	.job-type-wrapper {
		gap: 6px;
	}

	.job-type-wrapper label {
		font-size: 13px;
	}

	.job-type-wrapper select {
		padding: 10px 12px;
		font-size: 16px; /* Prevent zoom on iOS */
	}

	.job-type-wrapper .reset-btn {
		padding: 10px 14px;
		font-size: 15px;
		min-width: 70px;
	}
	
	/* Login form for very small screens */
	.loginfields {
		padding: 12px 14px;
		font-size: 16px;
	}
	
	.submit-btn {
		padding: 14px 16px;
		font-size: 16px;
	}
	
	/* Error and message wrappers */
	.errorMessage-wrapper,
	.message-wrapper {
		font-size: 1em;
		padding: 8px;
		margin-bottom: 10px;
	}
}

/* Landscape orientation improvements */
@media screen and (max-height: 500px) and (orientation: landscape) {
	.mdl-layout__header-row {
		height: 50px;
		margin-top: 0;
	}
	
	.logo-wrapper img {
		width: 40px;
		height: 40px;
	}
	
	.site-name-wrapper h3 {
		font-size: 0.9em;
	}
	
	.mdl-card__supporting-text {
		padding: 16px;
	}
	
	#login-wrapper .input-wapper {
		margin-bottom: 12px;
	}
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
	.submit-btn {
		min-height: 44px; /* iOS recommended touch target */
	}
	
	.mdl-layout__tab {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	
	.loginfields {
		min-height: 44px;
	}
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.logo-wrapper img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}