/*-General-*/
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
body {
	padding-top: 0;
	background-color: #fcfcfc;
	font-size: 12px;
}
.headerimg {
	height: 35px;
	background-color: white;
	padding: 5px;
	/*margin-top: -10px;*/
	cursor: pointer;
}
.mainContainer {
	margin: 0 auto;
}
.hidden {
	display: none !important;
}
.contentBox {
	text-align: center;
	padding: 10px;
}
.content {
	width: 80%;
	margin: 20px auto 0;
}
.mainContainer nav ul li a {
	color: white;
}
#add-user,
#createUser .mobile,
#updateUser .mobile,
#register_work_order_application_user .mobile,
#register_permit_application_user .mobile {
	text-decoration: none;
	max-width: 600px;
	margin: 0 auto;
}
.maintable,
.main-table {
	width: 99%;
	margin: 0 auto;
	font-size: 12px;
}
.tables-con {
	width: 100%;
}
/* Index/Home Page */
.sleep {
	max-width: 20px;
	border: 1px solid black;
}
.gridjs-tr {
	font-size: 12px;
}
th.gridjs-th {
	padding: 0;
	padding-right: 5px;
	text-align: center;
	color: black;
}
td.gridjs-td {
	padding: 3px;
	text-align: center;
}
#home th[data-column-id="work_orderNumber"],
#home th[data-column-id="permitNumber"] {
	background-color: #b6d7a8 !important;
}
#home th[data-column-id="dispatch"],
#home th[data-column-id="dispatch_date"],
#home th[data-column-id="inspector"],
#home th[data-column-id="inspector_id"],
#home th[data-column-id="upload"],
#home th[data-column-id="upload_date"],
#home th[data-column-id="invoiced"],
#home th[data-column-id="invoice_date"],
#home th[data-column-id="paid"],
#home th[data-column-id="paid_date"],
#home th[data-column-id="workflow"],
#home th[data-column-id="workflow_date"] {
	background-color: #fff2cc !important;
}
#home th[data-column-id="work_order"],
#home th[data-column-id="permit"],
#home th[data-column-id="markUp"],
#home th[data-column-id="markup"] {
	background-color: #8e7cc3;
}
#home th[data-column-id="select"] {
	background-color: #a64d79
}
#home th[data-column-id="p"],
#home th[data-column-id="r"],
#home th[data-column-id="m"],
#home th[data-column-id="mu"],
#home th[data-column-id="inspection"],
#home th[data-column-id="inspection_date"],
#home th[data-column-id="status"],
#home th[data-column-id="gm"],
#home th[data-column-id="xError"],
#home th[data-column-id="yError"],
#home th[data-column-id="dteIdwork_order"],
#home th[data-column-id="dteIdPermit"],
#home th[data-column-id="review"],
#home th[data-column-id="review_date"] {
	background-color: #a3b2cc !important;
}
#home th[data-column-id="work_orderType"],
#home th[data-column-id="permitType"],
#home th[data-column-id="description"],
#home th[data-column-id="iag_description"],
#home th[data-column-id="work_orderDate"],
#home th[data-column-id="permitDate"],
#home th[data-column-id="#Poles"],
#home th[data-column-id="num_of_poles"],
#home th[data-column-id="year"],
#home th[data-column-id="city"],
#home th[data-column-id="grid"],
#home th[data-column-id="x"],
#home th[data-column-id="y"] {
	background-color: #b7b7b7 !important;
}
#home th[data-column-id="group"],
#home th[data-column-id="comments"] {
	background-color: #8e7cc3 !important;
}
#home th[data-column-id="DESCRIPTION"],
#home th[data-column-id="workflowStatus"],
#home th[data-column-id="attached"] {
	background-color: #cfe2f3 !important;
}
#home th[data-column-id="notDown"],
#home th[data-column-id="notDone"],
#home th[data-column-id="dteWf"] {
	background-color: #cccccc !important;
}
#home .highlight {
	background-color: greenyellow !important;
}
#home td,
#home th {
	text-align: center;
}
.cursor {
	cursor: pointer;
}
.purp,
.dg,
.lg {
	width: 100%;
}
.totals {
	text-align: center;
	margin-right: 50px;
}
.totals span {
	display: inline-block;
}
#poletotal,
#violationtotal,
#guyguardtotal,
#work-order-total,
#permittotal {
	display: inherit;
}
/* Modal - success/error message */
.modal {
	position: fixed;
	width: 100%;
	height: 5.5vh;
	background: #71affc;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal .modalBody {
	display: flex;
	align-items: center;
}
.modal .modalBody p {
	color: black;
	margin-right: 200px;
	font-size: 22px;
}
.modal .modalBody button {
	width: 40px;
	height: 40px;
	padding: 10px;
	background: #ff8037;
	border-radius: 5px;
	border: 0;
	cursor: pointer;
	transition: .3s all ease-in-out;
}
.modal .modalBody button:hover {
	background: #323031;
	color: white;
}
.success {
	background-color: #425cc7 !important;
	color: white;
	text-align: center;
	width: 100%;
	font-size: 20px;
	padding: 10px;
	border-radius: 7px !important;
	margin-bottom: 30px;
}
.error {
	background-color: lightcoral !important;
	color: white;
	text-align: center;
	width: 100%;
	font-size: 20px;
	padding: 10px;
	border-radius: 7px !important;
	margin-bottom: 30px;
}
.errorText {
	color: red;

}
/*-btns-*/
.btn {
	background: gray;
	font-size: 16px;
	border: none;
	padding: 6px 8px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: white;
	transition: .2s all linear;
	cursor: pointer;
}
.btn:hover {
	background: #a3a3a3;
}
.btn.btn-small {
	padding: 3px 4px;
}
.btnCenter {
	display: block;
	width: 215px;
	margin: 20px auto;
}
.btnBlue, .btn-blue {
	background: #0067AC;
}
.btnBlue:hover,.btn-blue:hover {
	background: #323031;
}
.btnRed, .btn-red {
	color: #fff;
	background-color: #dc3545;
}
.btnRed:hover, .btn-red:hover {
	background-color: #c82333;
}
.btnOrange, .btn-orange {
	background: #FF8037;
}
.btnOrange:hover, .btn-orange:hover {
	background: #71AFFC;
}
.btnGreen, .btn-green {
	/*background-color: #28a745;*/
	background-color: green;
}
.btnGreen:hover, .btn-green:hover {
	background-color: #218838;
}
.btnMargin {
	margin: 50px auto;
}
.btn-create-njuns-ticket {
	padding: 2px;
}
#headerText {
	font-size:14px;
	color:white;
}
/* Dashboard */
header {
	z-index: 5000;
	position: sticky;
	font-size:16px;
	width: 100%;
	top: 0;
}
header nav {
	background: #425cc7;
	min-height: 35px;
}
header nav.dev {
	background: #c74f42 !important;
	min-height: 35px;
}
header nav.stage {
	background: #4F8A5B !important;
	min-height: 35px;
}
header nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
}
header nav ul li {
	list-style: none;
	position: relative;
	display: flex;
}
header nav ul li a {
	text-decoration: none;
	padding: 6px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 35px;
	white-space: nowrap;
	color: black;
	transition: .3s all;
}
header nav ul li a:hover {
	color: #71AFFC;
}
header nav ul li > a.active {
	background: #fcfcfc;
	color: black !important;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	position: relative;
	z-index: 2;
}
header nav ul li > a.active.active-wrapped-row {
	border-radius: 10px;
}
header nav ul li > a.active.active-bottom-row::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fcfcfc;
}
.mainContainer h1 {
	text-align: center;
	font-size: 25px;
	padding: 10px;
}
.innerContainer {
	width: 75%;
	margin: 0 auto;
}
.spouseli {
	display: none;
}
.lnum:hover {
	background-color: #0F3B63;
	color: white;
	cursor: pointer;
}
.flexLeft {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.login,
.create {
	background: #0067AC !important;
	width: 100% !important;
	border-radius: 7px !important;
	font-size: 20px !important;
}
.innerContainer img {
	margin-bottom: 5px;
}
.adminForm input {
	margin: 5px 0px 5px;
}
/* Table */
table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 10px;
}
#Users .mobile,
#changelog .mobile {
	text-align: center;
	padding: 0px 85px;
}
.gridjs-table th {
	padding: 2px;
}
.shadetable td,
.shadetable table th {
	padding: 5px;
}
.shadetable tbody tr:nth-of-type(odd) {
	background: rgba(0, 0, 0, 0.05);
}
.shadetable thead tr {
	background: rgba(0, 0, 0, 0.1);
}
.shadetable tbody tr:hover {
	background: rgba(0, 0, 0, 0.1);
}
table.dataTable tbody th,
table.dataTable tbody td {
	padding: 10px 20px;
}
.tableContainer {
	margin-bottom: 40px;
	width: 100%;
}
.tableContainer h2 {
	font-size: 20px;
	margin-bottom: 10px;
}
.dataTables_filter {
	margin-bottom: 10px;
}
/* Form */
.formGroup {
	margin-bottom: 12px;
	text-align: left;
}
.formGroup label {
	display: inline-block;
	margin-bottom: 5px;
}
.formGroup .formControl {
	display: block;
	width: 100%;
	padding: 10px 5px;
	border-radius: 4px;
	border: 1px solid #c1c1c1;
	font-size: 18px;
}
.form-group {
	margin-bottom: 12px;
	text-align: left;
}
.form-group-flex {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.form-group label {
	display: inline-block;
	margin-bottom: 2px;
}
.form-group .form-control {
	display: block;
	width: 100%;
	padding: 4px;
	border-radius: 4px;
	/*border: 1px solid #c1c1c1;*/
	border: 1px solid #4C50AF;
	font-size: 16px;
}
.form-control-small {
	display: block;
	width: 100%;
	padding: 1px;
	border-radius: 4px;
	/*border: 1px solid #c1c1c1;*/
	border: 1px solid #4C50AF;
	font-size: 15px;
}
.form-group-select {
	margin-bottom: 0;
}
.modalContent .form-group textarea {
	font-size: 16px !important; 
	max-width: unset !important;
}

/* password eyeball viewer thingy */
.passwordWrapper {
	position: relative;
}

.passwordWrapper .formControl {
	padding-right: 42px;
}

.togglePassword {
	position: absolute;
	right: 10px;
	top: 65%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	cursor: pointer;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}

.togglePassword svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	display: block;
}

.togglePassword .iconEyeSlash {
	display: none;
}

.togglePassword.active .iconEye {
	display: none;
}

.togglePassword.active .iconEyeSlash {
	display: block;
}

/* View Order */
.textarea {
	width: 100%;
	height: 100px;
}
input:disabled,
textarea:disabled {
	background: #eee;
	color: gray;
}
input:disabled:hover,
select:disabled:hover,
textarea:disabled:hover {
	cursor: no-drop;
}
select:disabled {
	background: #eee;
	color: gray;
}
.visible {
	visibility: visible;
}
/* Tables */
#Users table,
#changelog table {
	box-shadow: 0px 0px 2px 2px #e1e1e1;
}
#Users #add-user,
#changelog #add-user {
	width: 45% !important;
}
/* Admin Access */
#adminAccess textarea {
	width: 100%;
	resize: none;
}
#adminAccess .mobile {
	margin: 30px;
}
/* Other Styles */
.sel {
	width: 100%;
	font-size: 20px;
	text-align: center;
}
.linline {
	display: inline;
	padding: 1px 20px 1px 20px;
	border: 1px solid blue;
	background-color: azure;
}
.linline:hover {
	cursor: pointer;
	background-color: #bfbfbf;
}
.edit {
	font-size: 16px;
}
.center {
	text-align: center;
}
.bgModal {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, 0.45);
	position: fixed;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	overflow-y: auto; 
}
.bgModal.large-view .modalContainer {
	width: 60%;
	/* padding: 12px; */
}
.modalContainer {
	width: 550px;
	background-color: #e6e6e6;
	border-radius: 10px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	padding: 20px;
	font-size: 16px;
}
.modalHeader.dev {
	background: #c74f42;
	border-radius: 5px;
	color: white;
	margin-bottom: 10px;	
}
.modalContainer .main-con { 
	display: flex;
	justify-content: space-between;
}
.modalContainer .main-con .box { 
	flex-basis: 48%;
}
#loading-spinner,
#loading-spinner-2  {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modalHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bgModal.large-view .modalHeader .modalHeaderContent  { 
	display: flex; 
	flex: 1;
	align-items: center;
}
.bgModal.large-view .modalHeader .modalHeaderContent p {
	flex: 1;
	text-align: center;
}
.modalHeader p {
	font-size: 22px;
	/* padding: 10px; */
}
#modalImage {
	max-width: 100%;
	border-radius: 10px;
	margin: 10px auto;
	display: block;
}
.fieldset-box {
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 15px;
}
.fieldset-box legend {
	padding: 2px 8px;
	font-size: 18px;
}
.combo-box {
	display: flex;
	align-items: center;
	position: relative;
	gap: 20px;
}
.combo-box .combo-box-icons {
	/* I originally had these inside the input but then made the input readonly so I don't want them in the input anymore...  */
	/* position: absolute; */
	right: 12px;
	display: flex;
	gap: 19px;
	color: #393939;
	cursor: pointer;
}
.combo-box .combo-box-icons i {
	transition: .2s all ease-in-out;
}
.search-assigned-member:hover {
	color: gray;
}
.clear-search-assigned-member:hover {
	color: red;
}
.njuns-member-table tr:nth-child(odd) {
	background-color: #f2f2f2;
}
.njuns-member-table tr:hover {
	background-color: #ddd;
	cursor: pointer;
}
.njuns-member-table td,
.njuns-member-table td {
	padding: 13px 6px;
}
.njuns-image-con .flex {
	display: flex; 
	gap: 10px;
}
.njuns-image-con .grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
}
.njuns-image-con .flex img { 
	width: 250px;
	border-radius: 10px;
	display: block;
	margin: 6px 0;
}
.njuns-image-con .grid img {
	width: 100%;
	border-radius: 10px;
	display: block;
	margin: 6px 0;
}
.njuns-image-con {
	position: relative;
}
.btn-delete-njuns-image {
	color: red;
	position: absolute;
	top: 12px;
	right: 6px;
	background: white;
	padding: 3px;
	border-radius: 5px;
	box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: .3s all ease-in-out;
}
.btn-delete-njuns-image:hover { 
	background: lightgray;
}
.njuns-ticket-creation-form .btn-con {
	display: flex;
	align-items: center;
}
.njuns-ticket-creation-form .btn-con .btn {
	margin-bottom: 0;
}
/* 
.njuns-ticket-creation-form .btn-con .closeModal2 { 
	margin-left: auto;
} */
.njuns-ticket-creation-form .btn-con .btn-submit {
	background: #28a745;
	margin-left: auto;
}
.njuns-ticket-creation-form .btn-con .btn-submit:hover {
	background: #218838;
}
.njuns-ticket-creation-form .njuns-assigned-member-error {
	font-style: italic;
	font-size: 12px;
	padding: 3px 0;
}
.njuns-step-table {
	margin-bottom: 2px;
}
.njuns-search-member-con {
	width: 345px;
	margin-bottom: 25px;
}
.njuns-search-member-con .flex {
	display: flex;
	gap: 12px;
}
.modalContainer .njuns-get-county-list-con {
	background: lightgray;
	padding: 20px;
	border-radius: 5px;
	margin-top: 15px;
	border-left: 5px solid green;
}
.modalContainer .njuns-get-county-list-con .form-group {
	display: flex;
	align-items: center;
	gap: 5px;
}
.modalContainer .njuns-get-county-list-con > div {
	padding: 10px 0; 
	width: 300px;
}
.modalContainer .njuns-get-county-list-con .flex {
	display: flex;
	gap: 15px;
	align-items: center;
}
.modalContainer .njuns-get-county-list-con .flex #njuns-save-county-btn {
	margin: 0;
}

/* .njuns-step-table  */
.njuns-table-heading,
.heading {
	text-align: center;
	/* 
	font-weight: bold;
	
		font-size: 12px; 
		padding: 2px;
	*/
	font-size: 16px;
	padding: 5px;
	background: #ab4548;
	color: white;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.heading.small {
	padding: 3px;
}
.review-page .heading-flex .btn {
	padding: 2px 5px;
}
#njuns-review-page .njuns-wall-header {
	padding: 5px;
	font-size: 16px;
}
.small-modal-text {
	display: block;
	font-size: 12px;
	margin-top: 20px;
}
.modalContent .error-msg,
.modalContent .njuns-error-msg {
	padding: 20px;
	background: #fbfbe3;
	border-left: 5px solid red;
	border-radius: 5px;
}
.fixed-table-con {
	position: sticky;
	bottom: 3px;
	background: white;
	border-top: 4px solid lightgray;
}
.flex-con {
	display: flex;
	/* fixed  
	max-height: 400px;
	overflow-x: scroll;*/
}
/* njuns wall */
.njuns-wall-con {
	font-family: sans-serif;
	font-size: 13px;
	margin-top: 5px;
	/* overflow-y: scroll;
	max-height: 585px; */
}
.njuns-wall-header {
	background: #a84248;
	color: white;
	text-align: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 4px;
	margin-bottom: 3px;
	font-size: 16px;
}
.njuns-wall-con .wall-box {
	margin-bottom: 5px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid lightgray;
}
.njuns-wall-con .wall-box .wall-header {
	font-size: 12px;
}
.njuns-wall-con .wall-box:nth-child(odd) {
	background: #e7e7e7;
}
.njuns-wall-con .wall-box .wall-header {
	margin-bottom: 20px;
}
.njuns-wall-con .wall-box .flex {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.njuns-wall-con .wall-box .row {
	display: flex;
	gap: 5px;
}
.njuns-wall-con .wall-box .icon-color {
	color: #494545;
}
.njuns-wall-con .wall-box .file-link {
	margin-bottom: 5px;
}
#njuns-ticket-link {
	padding-top: 5px;
	display: flex;
	justify-content: space-between;
}
.adjust-njuns-ticket-number {
	color: #0000EE;
	text-decoration: underline;
	cursor: pointer;
}
.njuns-wall-con img {
	max-width: 100%;
	width: 100%;
	margin-top: 5px; 
	padding: 5px;
	border-radius: 10px;
}
.njuns-date-mini-con {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.btn-delete-njuns-tic-data {
	font-size: 10px;
	padding: 2px;
	background: red;
}
/*
.adjust-njuns-ticket-number:hover {
}
*/
.icon-white {
	color: white;
}
.save-njuns-ticket-id {
	margin-top: 20px;
	background :#28a745;

}
.thumbnail {
	max-width: 300px; 
	max-height: 400px;
}
/*
.modalContent,
.modalContent2 {
	padding: 12px;
} */
.modal-info-text {
	padding: 15px 0;
}
.modalContent h5 {
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 10px;
}
.modalContent .flex-poles {
	display: flex;
	gap: 20px;
	margin-bottom: 7px;
	padding-top: 2px;
	justify-content: space-between;
	/* width: 270px; */
	border-bottom: 2px dashed rgba(0, 0, 0, 0.2);
}
/* .modalContent */ .flex-data {
	display: flex;
	gap: 20px;
	margin-bottom: 7px;
	padding-top: 2px;
	justify-content: space-between;
	border-bottom: 2px dashed rgba(0, 0, 0, 0.2);
	align-items: center;
}
.inspector-con {
	display: flex;
	align-items: center;
	gap: 10px;
}
.modalContent .m-top-15 {
	margin-top: 15px;
}
.modalContent .m-bottom-15 {
	margin-bottom: 15px;
}
.modalContent .btn-modal-link {
	display: inline-block;
	padding: 6px 8px;
	background: gray;
	border-radius: 5px;
	color: white;
	text-decoration: none;
	margin: 10px 0;
	transition: .2s ease-in-out;
	cursor: pointer;
}
.modalContent .btn-modal-link:hover { 
	background: #a3a3a3;
}
.modalContent p {
	margin-bottom: 5px;
	padding-top: 2px;
}
.modalContent .mini-heading {
	margin: 10px 0;
	font-size: 20px;
	font-weight: bold;
}
.modalContent .btn {
	margin-bottom: 20px;
	display: block;
}
.modalContent input[readonly] {
	background: #d6d6d6;
	cursor: no-drop;
	padding: 5px !important;
}
.closeModal,
.closeModal2 {
	margin: 5px;
	border-radius: 5px;
	background: #ff0000;
	color: white;
	padding: 6px;
	font-size: 12px;
	cursor: pointer;
	transition: .3s all ease-in-out; 
}
.closeModal:hover,
.closeModal2:hover {
	background: #ff4242;
}
/*
.modal-filters {
	padding: 0 15px 15px;
} */
.modal-filters-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.modal-filters label {
	display: block;
}
.modal-filters .form-group {
	margin-bottom: 8px;
}
.modal-filters .modafilt {
	display: block;
	/* padding: 5px; */
}
.small-text {
	font-size: 12px;
}

/* comments */
.comments-textarea {
	width: 100%; 
	resize: none;
	max-width: 100%; 
	height: 43px;
	font-size: 12px;
	padding: 2px;
}
.comments-textarea-1 {
	width: 100%; 
	resize: none;
	max-width: 100%; 
	height: 43px;
	font-size: 12px;
	padding: 2px;
}
.comment-con {
	height: auto;
	max-height: none;
	overflow-y: visible;
	font-size: 12px;
	resize: none;
	min-height: fit-content;
}
#violation_contractor .comment-con {
	height: auto;
	max-height: none;
}
.comment-box {
	padding: 3px;
	/* border-bottom: 1px solid lightslategray; */
	border-radius: 5px;
	width: 100%;
	background: #55d2cc;
	color: #0d0d0d;
	margin: 10px auto;
	transition: .3s all ease-in-out;
	text-align: left;
	height: auto;
	overflow: visible;
}
.comment-box .comment {
	overflow-wrap: anywhere;
}
.comment-box:hover { 
	background: #8ee2df;
}
.comment-box:nth-child(even) {
	/* background: lightgray; */
	background: #bababa;
}
.comment-box:nth-child(even):hover { 
	background: #d0d0d0;
}
.comment-box .flex { 
	display: flex;
	gap: 10px;
	justify-content: space-between;
}
.comment-box .toolbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.comment-box .toolbar i { 
	border-radius: 5px;
	padding: 2px;
	transition: .3s all ease-in-out;
	cursor: pointer;
}
.comment-box .toolbar .btn-remove-comment {
	color: white;
	background: red;
} 
.comment-box .toolbar .btn-remove-comment:hover {
	background: #fd4a4a;
} 
.comment-box .toolbar .btn-edit-comment { 
	background: white;
	color: green;
}
.comment-box .toolbar .btn-edit-comment:hover { 
	background: #dadada;
}
.comment-box p { 
	padding-bottom: 5px;
}
.comment-box .user { 
	font-style: italic;
	font-size: 13px;
	margin-top: 10px;
}
.comment-box .user.updated-by {
	margin-top: 0;
	font-size: 12px;
}
.comment-td {
	/*width: 33%;*/
	vertical-align: top;
}

/* Review Page */
.mb-7 {
	margin-bottom: 7px;
}
#njuns-review-page {
	font-family: sans-serif;
}
.review-page .main-container {
	width: 98%;
	max-width: 2560px;
	margin: 20px auto;
	/* padding: 0 5px; */
}
.review-page .alert-note {
	padding: 10px;
	text-align: center;
	margin-bottom: 10px;
}
.review-page .cps-details p {
	padding-bottom: 8px;
	color: #171717;
}
.review-page .cps-details p span {
	color: gray;
	color: #4d4d4d;
}
.review-page .fieldset-box {
	margin-top: 15px;
}
.review-page .filter-con {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.review-page .njuns-top-bar {
	margin-bottom: 20px;
}
.review-page .cps-flex {
	display: flex;
	gap: 20px;
}
.review-page .cps-flex .flex-item:nth-child(1) { 
	flex: 1;
}
.review-page .cps-flex .flex-item:nth-child(2) { 
	flex: 4;
}
.review-page .cps-flex .flex-item:nth-child(3) { 
	flex: 1;
}
.review-page .njuns-step-table {
	width: 100%;
}
.review-page .keyboard-nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.njuns-table-heading.heading-blue,
.heading.heading-blue {
	background: #022ca7;
}
.njuns-table-heading.heading-green,
.heading.heading-green {
	background: #076a07;
}

.review-page .filter {
	margin-bottom: 8px;
}
.review-page .standardfilter {
	width: 100%;
	padding: 5px;
	font-size: 14px;
	border: 1px solid #4C50AF;
	border-radius: 3px;
	color: #333;
}
.review-page .btn-con {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}
.review-page .status-chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.review-page .status-chip.white {
	background: white;
}
.review-page .status-chip.red {
	background: red;
	color: white; 
}
.review-page .btn {
/*   padding:8px 12px;  
	color:white; 
	text-decoration:none; 
	display: inline-block; */
	font-weight: normal; 
}
.review-page .btn-prev {
	background:#007bff;
}
.review-page .btn-next {
	background:#28a745;
	margin-left: auto;
}
.review-page .btn-apply-filter {
	background:#28a745;
	margin-left: auto;
}
.box-con {
	margin-bottom: 5px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid lightgray;
}
.box-con.no-radius-top {
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}
.review-page .box-con:nth-child(odd) {
	background: #e7e7e7;
}
/* pole-review box-cons are grouped differently and need classes for coloring */
.review-page .box-con.light-gray {
	background: #e7e7e7;
}
.review-page .box-con.white {
	background: #fff;
}
.review-page .box-con .no-comments {
	font-style: italic;
	padding: 10px 0;
	margin: 0;
}
.review-page .box-con .comment-con {
	height: unset; 
	max-height: 145px; 
	resize: unset;
}
.review-page .box-con .comment-box {
	width: 98%;
	padding: 6px;
}
.review-page .highlight-image {
	border: 2px solid yellow;
	box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.2);
}
.review-page .js-accordion-section {
	margin-bottom: 10px;
}
.js-toggle {
	cursor: pointer;
}
.js-toggle.is-collapsed.is-collapsed-hidden {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-bottom: 5px;
}
.review-page .img-grid {
	display: grid;
	grid-template-columns: 1fr 1fr; /*  1fr */
	gap: 30px;
}
.review-page .img-grid .inner-img-col {
	column-count: 3; /* 2 */
}
.review-page .img-grid img {
	border-radius: 10px;
}
.review-page .flex-p {
	display: flex;
	gap: 20px;
}
/* Details (key/value) */
.review-page .details-box {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.review-page .details-row {
	display: grid;
	/* grid-template-columns: 120px 1fr; */
	grid-template-columns: 145px 1fr;
	gap: 10px;
	align-items: start;
}
.review-page .details-label {
	font-weight: 600;
	color: #4d4d4d;
	white-space: nowrap;
}
.review-page .details-value {
	word-break: break-word;
}
.review-page .details-row-full {
	grid-template-columns: 1fr;
}
.review-page .details-comments {
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	padding: 6px 8px;
}
/* Unable to inspect callout */
.review-page .details-alert {
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid #f2b6b6;
	background: #ffecec;
}
.review-page .details-alert-title {
	font-weight: 700;
	margin-bottom: 4px;
}
.review-page .details-alert-body {
	margin-top: 2px;
}
/* Headings with add button */
.review-page .heading-flex {
	display: flex;
	align-items: center;
}
.review-page .heading-flex .header-left,
.review-page .heading-flex .header-right {
	flex: 1;
	display: flex;
}
.review-page .heading-flex .header-right {
	justify-content: flex-end;
}
.review-page .heading-flex .header-center {
	flex: 0;
	text-align: center;
}
.review-page .add-btn {
	background: green !important;
	color: white !important;
	transition: .3s all ease-in-out !important;
	border-radius: 5px;
	padding: 4px;
	font-size: 14px;
	cursor: pointer;
}
.review-page .add-btn:hover {
	background: #07b807 !important;
}
.review-page .dispatch-violations-btn {
	margin-top: 10px;
	text-align: center;
	width: 130px;
}
/* Conditions */
.review-page .conditions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.review-page .condition-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.review-page .condition-label {
	flex: 1;
}
.review-page .condition-control {
	display: flex;
	justify-content: flex-end;
}
/* Keyboard navigation  */
.review-page .kb-help {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.review-page .kb-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.review-page .kb-key {
	min-width: 120px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	background: #f7f7f7;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.review-page .kb-desc {
	flex: 1;
}
.review-page .kb-divider {
	height: 1px;
	background: #e3e3e3;
	margin: 6px 0;
}
/* Recent list */
.review-page .recent-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.review-page .recent-item {
	padding: 6px 10px;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}
.review-page .recent-item:hover {
	background: #f0f6ff;
	border-color: #2196F3;
}
.review-page #google-map,
.review-page #google-street-container {
	width:  100%;
	height: 555px;
	border-radius: 10px;
}
.review-page #google-map-container {
	width:  560px;
	height: 400px;
}
.review-page .google-map-modal {
	display: none; /* Initially hidden */
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}
.review-page .google-map-modal-content {
	background: white;
	padding: 20px;
	border-radius: 8px;
	width: 600px;
	text-align: center;
}

.review-page .date-container {
	justify-content: center;
}
.filter-actions {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.highlight-njuns-row {
	background: aqua !important;
}
.njuns-field-error {
	border: 2px solid red;
	padding: 4px;
	border-radius: 5px;
}






/* violation page  */
#violation .box-con {
	border: unset;
}
.side-filter-bar {
	display: flex;
	flex-direction: column;
	width: 200px;
	flex: 0 0 200px;
	/* flex-wrap: wrap;
	align-items: center; */
}
.side-filter-bar .con-header {
	text-align: center;
	margin-bottom: 5px;
}
.side-filter-bar input[type=text], 
.side-filter-bar input[type=date], 
.side-filter-bar select,
select.menu-builder-select {
	width: 100%;
	margin-bottom: 4px;
	border: none; 
	border-radius: 3px;
	padding: 4px;
	border: 1px solid #4C50AF;
}
.side-filter-bar #select-search {
	margin-bottom: 12px;
}
select.menu-builder-select[data-has-value="1"] {
	border: 1px solid #0b63d8;
	background-color: #dbe8ff;
	color: #000;
	box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.15);
}
.njuns-member-code-lookup[data-code]:not([data-code=""]) {
	border: 1px solid #0b63d8;
	background-color: #dbe8ff;
	color: #000;
	box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.15);
}
.side-filter-bar #filter-btn, 
.side-filter-bar #multisub {
	margin-top: 8px;
}
.side-filter-bar .btn {
	width: 100%;
	font-size: 15px;
}
.side-filter-bar .btn:not(:last-child) {
	margin-bottom: 8px;
}
.side-filter-bar #inspdrop {
	margin-bottom: 12px;
}

/* box-con colors  - some are not used */
.side-filter-bar .box-con.light-gray {
	background: #e7e7e7;
}
.side-filter-bar .box-con.green {
	background: green;
}
.side-filter-bar .box-con.tan {
	background: #cda06c;
}
.side-filter-bar .box-con.light-blue {
	background: lightblue;
}
.side-filter-bar .box-con.corn-flower-blue {
	background: cornflowerblue;
}
.side-filter-bar .box-con.blue-violet {
	color: white;
	background: blueviolet;
}
.side-filter-bar .box-con.njuns-red {
	color: white;
	background: #ab4548;
}
.side-filter-bar .box-con.njuns-wholesale-widget-body {
	color: white;
	background: #353535;
}
.btn-white {
	background: #f8f9fa;
	color: black;
}
.heading.heading-update-fields {
	background: #27748a;
}
.heading.heading-dispatch {
	background: #7213ca;
}
.heading.heading-njuns {
	background: #a02229;
}
.heading.heading-njuns-wholesale {
	background: #1a1a1a;
}
#violation .filter-actions {
	margin-top: 8px;
}
#violation .filter-actions .btn {
	margin: 0;
}

/* Njuns Wholesale / Settings */
.page-con {
	margin-bottom: 60px;
}
.page-con h1 {
	font-family: Arial, sans-serif;
	font-size: 22px;
	font-weight: 600;
	padding: 40px 20px;
	margin: 0;
}
.page-con {
	width: 95%;
	max-width: 1920px;
	margin: 0 auto;
}
.page-con fieldset {
	padding: 10px;
	font-size: 16px;
	border-radius: 5px;
} 
.page-con fieldset legend {
	padding: 10px;
	font-size: 22px;
}
.page-con fieldset fieldset > legend {
	font-size: 18px;
}
.page-con .content-con {
	max-width: 900px;
	margin-bottom: 20px;
	line-height: 1.3;
}
.page-con .njuns-affected-member-con {
	flex: 1;
}
.page-con .add-widget {
	flex: .5;
}
.iag-datatable thead {
	background-color: #e8f3ff; /* light header blue */
	color: #333;
}
.iag-datatable th {
	font-size: 16px;
}
.iag-datatable td {
	font-size: 15px;
}
.iag-datatable th, .iag-datatable td {
	padding: 8px 10px;
	border: 1px solid #ccc;
	text-align: left;
}
.iag-datatable tbody tr:nth-child(even) {
	background-color: #f9f9f9; /* subtle striping */
}
.iag-datatable tbody tr:hover {
	background-color: #e8f3ff !important;
}
.page-con .flex-main {
	display: flex;
	gap: 20px;
}
.page-con .njuns-member-results {
	border: 2px solid #c1c1c1;
	border-radius: 5px;
	max-height: 450px;
	overflow-y: auto;
	display: none;
}
.page-con .njuns-member-result {
	padding: 10px 12px;
	border-bottom: 1px solid #e9e9e9;
	color: #181818;
	cursor: pointer;
	line-height: 1.35;
	background: #fff;
}
.page-con .njuns-member-result:last-child {
	border-bottom: none;
}

.page-con .njuns-member-result:hover {
	background: #f5f7fa;
}
.page-con .njuns-member-result:active {
	background: #e9eef5;
}
.page-con .njuns-member-code {
	font-weight: bold;
	font-size: 14px;
	color: #181818;
	margin-bottom: 2px;
}
.page-con .btn-con {
	display: flex;
	gap: 10px;
}
.page-con .btn-con .btn {
	margin-left: auto;
}
.page-con .njuns-member-company {
	font-size: 13px;
	color: #2d2d2d;
	margin-bottom: 2px;
}
.page-con .njuns-member-description {
	font-size: 12px;
	color: #666;
	line-height: 1.35;
}
.page-con .njuns-error-msg {
	padding: 10px;
}
.page-con .njuns-member-selected {
	display: none;
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid #b9d8c2;
	border-left: 4px solid #4c8c5a;
	border-radius: 6px;
	background: #f4fbf6;
	color: #181818;
	margin-bottom: 12px;
}
.page-con .njuns-member-selected-label {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #4c8c5a;
	margin-bottom: 6px;
}
.page-con .njuns-member-selected-code {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 2px;
}
.page-con .njuns-member-selected-company {
	font-size: 13px;
	margin-bottom: 2px;
}
.page-con .njuns-member-selected-description {
	font-size: 12px;
	color: #666;
	line-height: 1.35;
}

@media screen and (max-width: 1160px){
	.page-con .flex-main {
		flex-direction: column;
	}
}



/* Generic (id)page exclusive styles to reset styles  
Once all review pages have my html - I can start porting over 
the reviewpage.css into this file and then get these cleaned up! 
*/
.review-page {
	font-size: 16px;
}
.review-page .icon-btn {
	padding: unset;
	color: #3f5fc4;
}
.review-page .filter-container {
	max-width: unset;
}
/**/
#pole-review-page .thumbnail, 
#pole-view-page .thumbnail,
#violation-review .thumbnail {
	width: 100%;
	max-height: unset;
	max-width: unset;
	margin-bottom: 10px;
}
/* #pole-review-page .njuns-table-heading {
	font-size: 16px;
	padding: 5px;
} */

.review-page .img-tile {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.review-page .img-tile img {
	display: block;
	width: 100%;
	height: auto;
}

.review-page .img-toolbar {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 10px;
	background: rgba(0,0,0,0.55);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 120ms ease, transform 120ms ease;
	pointer-events: none;
	z-index: 2;
}

.review-page .img-tile:hover .img-toolbar {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.review-page .img-btn {
	border: 0;
	background: rgba(255,255,255,0.15);
	color: #fff;
	padding: 6px 8px;
	border-radius: 8px;
	cursor: pointer;
	line-height: 1;
}

.review-page .img-btn:hover {
	background: rgba(255,255,255,0.25);
}
/* Accordion heading arrow */
.js-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

.js-toggle .toggle-arrow {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid #fff;
	transition: transform 150ms ease;
}

.js-toggle-body.is-filter-container-collapsed .filter-container > * {
	display: none;
}

.js-toggle-body.is-filter-container-collapsed .filter-container > select.is-collapsed-active-select {
	display: block !important;
}

.js-toggle-body.is-filter-container-collapsed .filter-container > .menu-filter-group.has-active-select {
	display: block !important;
}

.js-toggle-body.is-filter-container-collapsed .filter-container > .menu-filter-group.has-active-select > * {
	display: block !important;
}

.js-toggle-body.is-filter-container-collapsed .filter-container > .menu-filter-group.has-active-select > .menu-date-filter-row {
	display: flex !important;
}

.js-toggle-body.is-filter-container-collapsed .filter-container .filter-actions {
	display: none !important;
}

.js-toggle.is-collapsed .toggle-arrow {
	transform: rotate(0deg);
}

.js-toggle:not(.is-collapsed) .toggle-arrow {
	transform: rotate(90deg);
}
/* Have this button always hug the right side(it's flexed) */
.review-page #applyFilters {
	margin-left: auto;
}
.review-page .box-con ul {
	list-style: none;
}
.review-page .box-con ul li {
	padding-bottom: 5px;
}
.review-page .attachment-has-pic {
	margin-left: 5px;
}


@media screen and (max-width: 1600px) {
	.review-page .cps-flex .flex-item:nth-child(3) { 
		flex: 1.45;
	}
}
@media screen and (max-width: 1400px) {
	/* .review-page .cps-flex {
		width: 800px;
		margin: 0 auto;
	} */
	.review-page .njuns-image-con .flex img {
		width: 250px;

	}
}
@media screen and (max-width: 1340px) {
	.review-page .cps-flex {
		flex-direction: column;
	}
	.review-page .njuns-image-con .flex img {
		width: 150px;
	}
	.review-page .njuns-wall-con img {
		max-width: 60%;
		display: block;
		margin: 0 auto;
	}
}
@media screen and (max-width: 867px) {
	.review-page .cps-flex {
		width: 95%;
	}
}
@media screen and (max-width: 745px) {
	.review-page .njuns-image-con .flex {
		flex-wrap: wrap;
	}
}


.spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
	margin: 10px auto;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes loading-dots {
	0% {
		content: "Loading.";
	}
	33% {
		content: "Loading..";
	}
	66% {
		content: "Loading...";
	}
	100% {
		content: "Loading....";
	}
}
.loading-text::after {
	content: "Loading";
	text-align: left;
	display: inline-block;
	width: 69px;
	animation: loading-dots 3s steps(4, end) infinite;
}
.loading-svg::after {
content: "";
display: inline-block;
width: 15px;		
height: 15px;	   
background: url('/images/loading-spinner.svg') no-repeat center center;
background-size: contain;
vertical-align: middle;
}
.main-loading-spinner img {
	display: block;
	margin: 0 auto;
}
@media screen and (max-width: 1500px) {
	.innerContainer {
		width: 85%;
	}
}
@media screen and (max-width: 1400px) {
	.width70 {
		width: initial;
	}
	.njuns-image-con .flex img {
		width: 32%;
	}
}
@media screen and (max-width: 1130px) {
	.bgModal.large-view .modalContainer {
		width: 80%;
	}
}
@media screen and (max-width: 1000px) {
	header nav ul {
		justify-content: flex-start;
	}
	header nav ul li a {
		text-align: center;
	}
	.tabs {
		flex-direction: column;
		align-items: center;
	}
}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 675px) {
	.innerContainer {
		width: 97%;
	}
}
@media screen and (max-width: 530px) {
	table.dataTable tbody th,
	table.dataTable tbody td {
		padding-left: 40%;
	}
}
.clientinput {
	width: 100% !important;
	padding: 3px !important;
	font-size: 12px;
}
.clienttable td {
	padding: 3px 20px !important;
}
#Users .admintable {
	width: 60% !important;
	margin: 0 auto !important;
}
#Users .create {
	margin-bottom: 10px;
}
#changelog .admintable {
	width: 60% !important;
	margin: 0 auto !important;
}
#changelog .create {
	margin-top: 10px;
}
.selectallbox {
	float: left;
	background-color: #a64d79;
	padding: 5px;
}
.searchfilterbox {
	float: left;
}
.searchbox {
	float: left;
	background-color: burlywood;
	padding: 5px;
}
.updatebox {
	float: left;
	padding: 5px;
	background-color: lightblue;
}
.inspectorbox {
	float: right;
	padding: 5px;
	background-color: blueviolet;
}
.totalsbox {
	display: block;
}
.datepicker {
	max-width: 85px;
	width: 100%;
}
.menuitem {
	background-color: #425cc7;
	margin-top: 0px;
	padding-left: 10px;
	z-index: 100;
	position: absolute;
	top: 100%;
	left: 0;
}
.hovermenu {
	cursor: pointer;
	position: relative;
}
.menulink {
	padding: 10px 15px 7px 15px;
	z-index: 100;
	position: initial;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
}
#savelink {
	cursor: pointer;
}
.selected {
	border-top: 3px solid #808080;
	border-bottom: 3px solid #808080;
}
/* Shared detail-row highlight across GridPHP/jqGrid tables. */
.ui-jqgrid .ui-jqgrid-btable tr.selected > td,
.ui-jqgrid .ui-jqgrid-btable tr.grid-detail-selected > td {
	background-color: #f0e68c !important;
}
/* violation styles */
#violation #p,
#guyguards #p,
#violation_contractor #p {
	max-width: 100px;
}
.dispatch {
	background-color: #8a2be2;
	float: left;
}
.duplicate {
	float: left;
	background-color: #6495ed;
}
#violation .f16,
#guyguards .f16,
#violation_contractor .f16{
	font-size: 12px;
}
#violation .sorthome,
#guyguards .sorthome,
#violation_contractor .sorthome {
	float: left;
	background-color: #6495ed;
	padding: 5px;
}
#violation .vioupdate,
#guyguards .vioupdate,
#violation_contractor .vioupdate {
	background-color: #add8e6;
	float: left;
}
#violation .vioupdate {
	width: fit-content;
	background-color: #add8e6;
}
#violation .viomenu,
#guyguards .viomenu,
#violation_contractor .viomenu {
	margin-top: 10px;
	padding: 5px;
}
#violation .viomenu {
	width: fit-content;
	padding: 5px;
}
#violation .review,
#guyguards .review,
#violation .violation_contractor {
	float: right;
	background-color: #45e145;
}
#guyguards .viofilter,
#violation_contractor .viofilter {
	float: left;
	padding: 5px;
	background-color: #deb887;
}
#violation .viofilter {
	padding: 5px;
	background-color: #deb887;
}

#violation table,
#guyguards table {
	font-size: 12px;
	text-align: center;
}
#violation .maintable,
#guyguards .maintable,
#violation_contractor .maintable,
#violation_contractor .main-table,
#home .maintable,
#home .main-table {
	margin-top: 5px;
}
#violation .head,
#guyguards .head,
#violation_contractor .head {
	margin-top: 5px;
}
#home th,
#violation th {
	border-color: #808080;
	background-color: #ddd;
	white-space: normal !important;
	font-weight: bolder;
}
#home th,
#violation thead tr {
	border-color: #808080;
}

/*----------------------------------------------- GridPHP Styles -----------------------------------------------*/

.ui-jqgrid-titlebar,
.ui-jqgrid-toppager {
	display: none;
}
.ui-jqgrid .ui-jqgrid-htable th.ui-state-default,
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
	border-right: 1px solid #7f7f7f !important;
	background-color: #ddd;
	background-image: none !important;
}
.ui-search-table {
	margin-bottom: 0px !important;
}

/* Keep jqGrid multiselect checkbox column fixed on the left across GridPHP pages. */
.ui-jqgrid .ui-jqgrid-htable th[id$="_cb"],
.ui-jqgrid .ui-jqgrid-btable td[aria-describedby$="_cb"] {
	position: sticky;
	left: 0;
	border-right: 2px solid #7f7f7f !important;
	background-color: #f4f4f4;
}
.ui-jqgrid .ui-jqgrid-htable th[id$="_cb"] {
	z-index: 6;
}
.ui-jqgrid .ui-jqgrid-btable td[aria-describedby$="_cb"] {
	z-index: 3;
}
/* Keep the first filter-toolbar header cell pinned over the row while horizontal scrolling. */
.ui-jqgrid .ui-jqgrid-htable thead tr.ui-search-toolbar th:first-child {
	position: sticky;
	left: 0;
	z-index: 5;
	border-right: 2px solid #7f7f7f !important;
	background-color: #f4f4f4;
	background-image: none !important;
}

#dt_1_work_order_pole_index,
#dt_1_permit_pole_index,
#dt_1_gridxy,
#dt_1_city,
#dt_1_njuns_date,
#dt_1_njuns_id,
#dt_1_con_date_assigned,
#dt_1_con_disp_date,
#dt_1_con_comp_date,
#dt_1_con_crew,
#dt_1_con_status_name,
#dt_1_contractor_col,
#dt_1_ri_disp_date,
#dt_1_undefined {
	background-color: #fcc !important;
}
#dt_1_work_order_type,
#dt_1_type,
#dt_1_category,
#guyguards th[data-column-id="category"],
#violation_contractor th[data-column-id="category"] {
	background-color: #ead1dc !important;
}
#dt_1_permit,
#dt_1_permit_number, #dt_1_p, #dt_1_work_order_number,
#dt_1_violation_id {
	background-color: #f9cb9c !important;
}
#dt_1_violation_level,
#dt_1_inspector,
#dt_1_inspector_id,
#dt_1_resolutionstat,
#dt_1_upload_date,
#dt_1_invoice_date,
#dt_1_paid_date,
#dt_1_workflow_date,
#violation_contractor th[data-column-id="resolutionstat"],
#violation_contractor th[data-column-id="levels"],
#guyguards th[data-column-id="resolutionstat"],
#guyguards th[data-column-id="levels"] {
	background-color: #fff2cc !important;
}
#dt_1_violator_col,
#dt_1_violator,
#dt_1_customer,
#violation_contractor th[data-column-id="violator"],
#guyguards th[data-column-id="violator"] {
	background-color: #dda0dd !important;
}
#dt_1_inspectorComments,
#dt_1_iagComments,
#dt_1_contractorComments,
#dt_1_reviewComments {
	background-color: #48d1cc !important;
}
#dt_1_iag_description {
	background-color: #b7b7b7 !important;
}
#dt_1_status,
#dt_1_dispatch_date,
#dt_1_inspection_date,
#dt_1_gps,
#dt_1_globalid,
#dt_1_review_date {
	background-color: #a3b2cc !important;
}
#dt_1_photo {
	background-color: #e9967a !important;
}
#dt_1_cb {
	background-color: #a64d79 !important;
}
#dt_1_pole_id,
#dt_1_pmid {
	background-color: #ff69b4 !important;
}
#dt_1_markup,
#dt_1_glnxy,
#dt_1_labeltext {
	background-color: #8e7cc3 !important;
	color: #000 !important;
}



#violation .gridjs-td span,
#guyguards .gridjs-td span,
#violation_contractor .gridjs-td span {
	width: 100%;
	display: inline-block;
}
#violation td[data-column-id="violationId"],
#guyguards td[data-column-id="violationId"],
#violation_contractor td[data-column-id="violationId"] {
	text-align: left;
}
#violation .subdeet,
#guyguards .subdeet,
#violation_contractor .subdeet {
	margin-top: 0px !important;
}
.standardfilter {
	max-width: unset;
}
/* grid styles */
.gridpage .invis {
	color: transparent !important;
	background-color: transparent !important;
}
.gridpage #detail_modal {
	padding: 0px 10px 10px 10px;
	width: 420px;
	border: 1px solid #000;
	top: 40%;
	position: fixed;
	margin: auto;
	text-align: center;
	background-color: #e6e6e6;
	box-shadow: 0px 0px 2px 1px #425cc7;
	z-index: 20;
	left: 40%;
}
#heatmap #detail_modal {
width: 300px;
left: 43%;
}
.gridpage .buttonholder,
.gridpage .violatordiv,
.gridpage .inspdiv {
	text-align: center;
}
.gridpage .buttonholder {
	font-size: 50px;
}
.gridpage .dispbutton {
	font-size: 50px;
	width: 150px;
	background: #425cc7;
	color: #fff;
}
.gridpage table th {
	position: sticky;
	left: 0;
	background-color: papayawhip;
	z-index: 1;
	padding: 5px !important;
}
.gridpage table {
	border-collapse: unset !important;
	border-color: #CCC;
}
.gridpage #close {
	text-align: right;
	cursor: pointer;
}
.gridpage .gridtable {
	background-color: #fff;
	font-size: 8px;
	font-weight: bold;
}
.gridpage .gridtable td {
	text-align: center;
	width: 30px !important;
	min-width: 30px;
	max-width: 30px;
	padding: 0px;
	opacity: .7;
}
.gridpage .gridtable tr {
	height: 15px !important;
	min-height: 15px;
	max-height: 15px;
}
.gridpage .gridtable tbody tr:hover {
	background: #0000001a;
}
.gridpage .xhead {
	position: sticky;
	top: 28px;/* Line changed from "top: 0px;" BW Grid page visual fix 9/8/25 */
	left: 0px;
	background-color: #fff;
	z-index: 1000;
}
.gridpage .border {
	border: 1px solid #000;
}
.gridpage .xcells {
	z-index: 1;
}
.gridpage .xth {
	background-color: #fff;
	font-size: 10px;
}
.gridpage .yth {
	background-color: #fff;
}
.gridpage .yhead {
	background-color: #fff;
}
/* .gridpage select {
	max-width: 130px;
} */
td.flex-options:not(:first-child) {
	display: flex;
	justify-content: space-between;
}
.flex-options > input {
	margin-right: .2em;
}
/* Notification container */
.notification {
	position: fixed;
	/* bottom: 0px; */
	bottom: 20px;
	right: -300px; /* Start off-screen */
	background: #4caf50; /* Green for success */
	color: #fff;
	padding: 5px 15px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	font-size: 16px;
	transition: right 0.3s ease-in-out, opacity 0.3s;
	opacity: 0;
	display: flex;
	align-items: center;
	/* justify-content: space-between; */
	gap: 20px;
	min-width: 250px;
	box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, 0.5);
	z-index: 1000;
}
.notification.notification-success,
.notification.success {
	width: unset;
}
/* Show notification */
.notification.show {
	right: 20px; /* Slide in */
	opacity: 1;
}
/* Error notification */
.notification.notification-error,
.notification.error {
	background: #f23320 !important;
	width: unset;
	max-width: 360px;
	text-align: left;
	font-size: 16px;
	padding: 5px 15px;
}
/* Close button */
.notification .close-btn {
	margin-left: 15px;
	cursor: pointer;
	font-weight: bold;
	padding: 5px;
	font-size: 22px;
}
.pulse-red {
	animation: pulseRed 800ms ease-out 0s 1;
}
@keyframes pulseRed {
	0% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.15);
		transform: scale(1.02);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
		transform: scale(1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.pulse-red {
		animation: none;
		outline: 2px solid #ef4444;
	}
}
.no-comments {
	margin-top: 6px;
}
/* for njuns modal city search  */
.autocomplete { 
	position: relative;
	width: 325px;
	margin-top: 12px; 
}
.autocomplete-list {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 1051; /* above modal backdrop content */
	max-height: 240px;
	overflow-y: auto;
	margin-top: 2px;
	padding: 4px 0;
	background: #fff;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: .5rem;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.autocomplete-item {
	padding: .5rem .75rem; cursor: pointer;
}
.autocomplete-item[aria-selected="true"],
.autocomplete-item:hover {
	background: rgba(0, 123, 255, 0.1);
}
.autocomplete-empty {
	padding: .5rem .75rem; color: #6c757d; cursor: default;
}
.attachments-con {
	max-height: 100px;
	overflow: scroll;
}

.prior-inspection-data {
	background-color: #f5f5dc !important;
}

#inspcount {
	font-size:12px;
	padding-left:25px;
}

.isp-condition-cons {
	min-width: 270px;
}