textarea { resize: vertical; overflow: auto; }

TABLE.INVOICE2 { border-style: solid; border-width: 1px; border-collapse: collapse; }
TD.INVOICE {vertical-align: top; border-style: solid; border-width: 1px; border-collapse: collapse;}

td:has(input[type="checkbox"]) {
	margin: 2px 0px;
}

ul.sortable-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 16px;
	justify-content: center; /* Centers the content horizontally */
}

/* Adjust the width for each card */
.sortphoto {
	flex: 1 1 calc((100% / 8)- 16px); /* Ensures 7 items per row, with gap accounted */
	max-width: calc((100% / 8) - 16px); /* Limits each item to roughly 1/7th */
	box-sizing: border-box; /* Ensures padding doesn’t expand the container */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px;
	background-color: #fff;
	position: relative;
	min-height: 180px; /* Ensures a consistent minimum height */
}

/* Hover effect */
.sortphoto:hover {
	box-shadow: 10px 9px 32px -12px rgba(0,0,0,0.75);
}

/* Image styling within the card */
.sortphoto img {
	height: 100px;
	width: 100%;
	object-fit: cover;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-bottom: 8px;
}

.sortphoto textarea, .sortphoto p {
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
}

.container {
	width: 100%;
}

.toggle-container {
	display: block;
}

.open-button {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 1px 1px 0;
	padding: 0.15rem 0.3rem; /* Adjust padding for the button size */
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #e4e4e4;
	color: black;
}

.open-button:hover {
	border: 1px solid blue;
	background: #afafaf;
}

.sortphoto {
	flex: 1 1 calc((100% / 8)- 16px); /* Ensures 7 items per row, with gap accounted */
	max-width: calc((100% / 8) - 16px); /* Limits each item to roughly 1/7th */
	box-sizing: border-box; /* Ensures padding doesn’t expand the container */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px;
	background-color: #fff;
	position: relative;
	min-height: 180px; /* Ensures a consistent minimum height */
}

.security-text {
	text-align: left;
}

.overflow-text {
	white-space: nowrap;
	overflow-x: auto;
	max-width: 90%;
}

input[type="checkbox"] {
	margin: 2px 0px;
	vertical-align: middle;
td:has(input[type="checkbox"]) {
	margin: 2px 0px;
}

.tooltip {
	position: relative;
	display: inline-block;
	width: 16px !important;
	vertical-align: middle;
}
  
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: white;
	color: black;
	border: 1px solid black;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
  
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
}  

.tooltip:hover .tooltiptext {
	visibility: visible;
}

ul.sortable-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 16px;
	justify-content: center; /* Centers the content horizontally */
}

/* Adjust the width for each card */
.sortphoto {
	flex: 1 1 calc((100% / 8)- 16px); /* Ensures 7 items per row, with gap accounted */
	max-width: calc((100% / 8) - 16px); /* Limits each item to roughly 1/7th */
	box-sizing: border-box; /* Ensures padding doesn’t expand the container */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px;
	background-color: #fff;
	position: relative;
	min-height: 180px; /* Ensures a consistent minimum height */
}

/* Hover effect */
.sortphoto:hover {
	box-shadow: 10px 9px 32px -12px rgba(0,0,0,0.75);
}

/* Image styling within the card */
.sortphoto img {
	height: 100px;
	width: 100%;
	object-fit: cover;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-bottom: 8px;
}

.sortphoto textarea, .sortphoto p {
    font-weight: bold;
	width: 100%;
    box-sizing: border-box;
}

.container {
	width: 100%;
}

.toggle-container {
	display: block;
}

.open-button {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 1px 1px 0;
	padding: 0.15rem 0.3rem; /* Adjust padding for the button size */
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #e4e4e4;
	color: black;
}

.open-button:hover {
	border: 1px solid blue;
	background: #afafaf;
}

.sortphoto {
	flex: 1 1 calc((100% / 8)- 16px); /* Ensures 7 items per row, with gap accounted */
	max-width: calc((100% / 8) - 16px); /* Limits each item to roughly 1/7th */
	box-sizing: border-box; /* Ensures padding doesn’t expand the container */
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px;
	background-color: #fff;
	position: relative;
	min-height: 180px; /* Ensures a consistent minimum height */
}

.security-text {
	text-align: left;
}

.overflow-text {
	white-space: nowrap;
	overflow-x: auto;
	max-width: 90%;
}

input[type="checkbox"] {
	margin: 2px 0px;
	vertical-align: middle;
}

.lcs-popupButton {
	cursor: pointer;
	width: 26px;
	height: 18px;
}

.step-banner
{
    padding:10px 20px;
    font-weight:normal !important;
    
}

.NotificationButton, .PopUpButton {
	cursor: pointer;
	width: 26px;
	vertical-align: top;
}

.NotificationButton {
	font-weight: bold;
	color: red;
}

.help {
	font-weight: bold;
	cursor: help;
	color: blue;
}

.Subtle {
	color: gray;
}

.PhotoTitleInput {
	overflow:hidden;
	text-align: center;
	cursor:pointer;
	width:100%;
	height:25px;
	line-height:25px;
	vertical-align: middle;
	white-space: nowrap;
	display:inline;
	padding-right:5px;
	border: 0px;
}


/*** Styles used for GenerateHeader and GenerateSlimHeader ***/
#Banner_Table {
	width: 100%;
	border: 0px;
	background: url('images/header-background.jpg');
}

#Banner_Left {
	vertical-align: middle;
}

#Banner_LeftLogo {
	height: 50px;
}

#Banner_Right {
	width: 530px;
	text-align: right;
	background: url('images/header-right.jpg');
}

#Banner_TitleCell {
	text-align: right;
}

#SubBanner_Table {
	width: 100%;
	border: 0px;
}

.SubBanner_LeftSpacer {
	width: 5px;
}

#SubBanner_TitleCell {
	font-weight: bold;
}
/*** End of GenerateHeader and GenerateSlimHEader styles ***/

/**
	blake@valuepro.com.au 20170614
	Content padding for job card
**/


#Tab1, #Tab2, #Tab3, #Tab4, #Tab5, #Tab6, #Tab7, #Tab8, #Tab9, #Tab10, #Tab11, #Tab12, #Tab13, #Tab14, #Tab15, #Tab16, #Tab17, #Tab18, #Tab19, #Tab20 {
	margin-top: 15px;
}

#TopTab1, #TopTab2, #TopTab3, #TopTab4, #TopTab5, #TopTab6, #TopTab7, #TopTab8, #TopTab9, #TopTab10, #TopTab11, #TopTab12, #TopTab13, #TopTab14, #TopTab15, #TopTab16, #TopTab17, #TopTab18, #TopTab19, #TopTab20 {
	position: relative;
	left: -5px;
}

#BodyArea {

	background: transparent;

	/**padding-top: 20px;**/
	/**padding-left: 10px;**/

	/*
		blake@valuepro.com.au 20170621
		border hack; resolve issues with layout inside iframe
		will probably break outside of quirks mode
	*/

	border-style: solid !important;
	border-color: transparent !important;
	border-left-width: 0px !important;
	border-top-width: 0px !important;
	border-bottom-width: 0px;
	border-right-width: 0px;
}

/* Dark background for email list */

/* #EmailList tr {
	background: inherit !important;
} */

/* Completely optional */
.lct-header-blue {
	padding-top: 10px;
	padding-bottom: 1px;
}

.lct-header-blue b {
	/*color: #00b779 !important;*/
	color: blue !important;
}

/**
	Hardcoded modifications

	default.asp	- blake@valuepro.com.au - 20170619 - Added inline style to body { margin: 10px 5px 0px 5px; }
	default.asp - blake@valuepro.com.au - 20170621 - Removed unncessary padding td from header
	default.asp - blake@valuepro.com.au - 20170621 - Reduced remaining padding td from 10px to 5px

	TabBar.asp  - blake@valuepro.com.au - 20170621 - 

**/