/*-General-*/
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
body {
	padding-top: 30px;/* Line added BW Grid page visual fix 9/8/25 */
	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;
}
#adduser,
#createUser .mobile,
#updateUser .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="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="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="dteIdPermit"],
#home th[data-column-id="review"],
#home th[data-column-id="review_date"] {
	background-color: #a3b2cc !important;
}
#home th[data-column-id="permitType"],
#home th[data-column-id="description"],
#home th[data-column-id="iag_description"],
#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,
#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;
}
.btnCenter {
	display: block;
	width: 215px;
	margin: 20px auto;
}
.btnBlue {
	background: #0067AC;
}
.btnBlue:hover {
	background: #323031;
}
.btnRed {
	color: #fff;
	background-color: #dc3545;
}
.btnRed:hover {
	background-color: #c82333;
}
.btnOrange {
	background: #FF8037;
}
.btnOrange:hover {
	background: #71AFFC;
}
.btnGreen, .btn-green {
	background-color: #28a745;
}
.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: fixed;/* Line changed from "position: relative;" BW Grid page visual fix 9/8/25 */
	font-size:16px;
	width: 100%;/* Line added BW Grid page visual fix 9/8/25 */
	top: 0;/* Line added BW Grid page visual fix 9/8/25 */
}
header nav {
	background: #425cc7;
	height: 30px;
	padding-top: 5px;
}
header nav ul {
	display: flex;
	justify-content: flex-start;
}
header nav ul li {
	list-style: none;
}
header nav ul li a {
	text-decoration: none;
	padding: 2px 15px 5px 15px;
	display: block;
	color: black;
	transition: .3s all;
}
header nav ul li a:hover {
	color: #71AFFC;
}
.active {
	background: #fcfcfc;
	color: black !important;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.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;
	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 label {
	display: inline-block;
	margin-bottom: 2px;
}
.form-group .form-control {
	display: block;
	width: 100%;
	padding: 5px;
	border-radius: 4px;
	border: 1px solid #c1c1c1;
	font-size: 17px;
}
.form-group-select {
	margin-bottom: 0;
}
.modalContent .form-group textarea {
	font-size: 16px !important; 
	max-width: unset !important;
}
/* 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 #adduser,
#changelog #adduser {
	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;
}
.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 {
	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;
}
.review-page .heading-flex .btn {
	padding: 2px 5px;
}
#njuns-review-page .njuns-wall-header {
	padding: 5px;
	font-size: 16px;
}
#violation-view-pole .njuns-step-table th {
	background-color: #cecece;	
}
.small-modal-text {
	display: block;
	font-size: 12px;
	margin-top: 20px;
}
.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;
	/* 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: 12px;
}
.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%;
	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;
}
.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 {
	/* max-height: 115px; */
	height: 30px;
	overflow-y: auto;
	font-size: 12px;
	resize: vertical;
	min-height: 30px;
}
#violation_contractor .comment-con {
	height: unset;
	max-height: 115px;
}
.comment-box {
	padding: 3px;
	/* border-bottom: 1px solid lightslategray; */
	border-radius: 5px;
	width: 93%;
	background: #55d2cc;
	color: #0d0d0d;
	margin: 10px auto;
	transition: .3s all ease-in-out;
	text-align: left;
}
.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 */
#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;
}
.review-page .njuns-table-heading.heading-blue {
	background: #022ca7;
}
.review-page .njuns-table-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 .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;
}
.review-page .box-con {
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid lightgray;
}
.review-page .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;
}
.review-page .js-toggle {
	cursor: pointer;
}
.review-page .js-toggle.is-collapsed {
	opacity: 0.85;
}
.review-page .img-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
}
.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;
}
.review-page .filter-actions {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

/* 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 {
	width: 100%;
	max-height: unset;
	max-width: unset;
}
/* #pole-review-page .njuns-table-heading {
	font-size: 16px;
	padding: 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 1s 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) {
	body {
		padding-top: 0;
	}
	header {
		position: static;
	}
	header nav {
		height: auto;
	}
	header nav ul {
		display: block;
	}
	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;
}
.hovermenu {
	cursor: pointer;
}
.menulink {
	padding: 10px 15px 7px 15px;
	z-index: 100;
	position: initial;
}
#savelink {
	cursor: pointer;
}
.selected {
	border-top: 3px solid grey;
	border-bottom: 3px solid grey;
}
/* violation styles */
#violation #p,
#violation-gridphp #p,
#guyguards #p,
#violation_contractor #p {
	max-width: 100px;
}
.dispatch {
	background-color: blueviolet;
	float: left;
}
.duplicate {
	float: left;
	background-color: cornflowerblue;
}
#violation .f16,
#violation-gridphp .f16,
#guyguards .f16,
#violation_contractor .f16{
	font-size: 12px;
}
#violation .sorthome,
#violation-gridphp .sorthome,
#guyguards .sorthome,
#violation_contractor .sorthome {
	float: left;
	background-color: cornflowerblue;
	padding: 5px;
}
#violation .vioupdate,
#violation-gridphp .vioupdate,
#guyguards .vioupdate,
#violation_contractor .vioupdate {
	background-color: lightblue;
	float: left;
}
#violation-view-pole .dt-search input,
#violation-view-pole .dt-container select.dt-input {
	background: white;
}
#violation .viomenu,
#violation-gridphp .viomenu,
#guyguards .viomenu,
#violation_contractor .viomenu,
#violation-view-pole .viomenu {
	margin-top: 10px;
	padding: 5px;
}
#violation-view-pole .create-njuns-btn-con {
	float: left;
	background-color: coral;
}
#violation .review,
#violation-gridphp .review,
#guyguards .review,
#violation .violation_contractor,
#violation-gridphp .violation_contractor,
#violation-view-pole .review {
	float: right;
	background-color: #45e145;
}
/* #violation textarea,*/
#guyguards textarea {
	font-size: 12px;
	line-height: 1.25;
	max-width: 230px;
	max-height: 200px;
	width: 100%;
}
#violation .viofilter,
#guyguards .viofilter,
#violation_contractor .viofilter {
	float: left;
	padding: 5px;
	background-color: burlywood;
}
#violation-gridphp .viofilter {
	padding: 5px;
	background-color: burlywood;
}

#violation table,
#violation-gridphp table,
#guyguards table {
	font-size: 12px;
	text-align: center;
}
#violation .maintable,
#violation .main-table,
#violation-gridphp .main-table,
#guyguards .maintable,
#guyguards .main-table,
#violation_contractor .maintable,
#violation_contractor .main-table {
	margin-top: 5px;
}
#violation .head,
#violation-gridphp .head,
#guyguards .head,
#violation_contractor .head {
	margin-top: 5px;
}
#violation th,
#guyguards th,
#violation_contractor th,
#violation-view-pole th {
	background-color: white;
	white-space: normal !important;
}
#violation-gridphp thead tr {
	border-color: gray;
}
#violation-gridphp th {
	border-color: gray;
	background-color: #ddd;
	white-space: normal !important;
	font-weight: bolder;
}
#violation-gridphp #dt_1_cb,
#violation-gridphp #dt_1_permit_pole_index,
#violation-gridphp #dt_1_gridxy,
#violation-gridphp #dt_1_city,
#violation-gridphp #dt_1_njuns_date,
#violation-gridphp #dt_1_njuns_id,
#violation-gridphp #dt_1_con_date_assigned,
#violation-gridphp #dt_1_con_comp_date,
#violation-gridphp #dt_1_contractor_col,
#violation-gridphp #dt_1_ri_disp_date,
#violation-gridphp #dt_1_undefined {
	background-color: rgb(255, 204, 204);
}
#violation th[data-column-id="category"],
#violation-gridphp #dt_1_type,
#guyguards th[data-column-id="category"],
#violation_contractor th[data-column-id="category"],
#violation-view-pole th[data-column-id="category"] {
	background-color: #ead1dc !important;
}
#violation th[data-column-id="vid"],
#violation th[data-column-id="permit"],
#violation-gridphp #dt_1_permit_number,
#violation-gridphp #dt_1_violation_id,
#violation_contractor th[data-column-id="vid"],
#violation_contractor th[data-column-id="permit"],
#guyguards th[data-column-id="vid"],
#guyguards th[data-column-id="permit"],
#violation-view-pole th[data-column-id="permit"],
#violation-view-pole th[data-column-id="vid"] {
	background-color: #f9cb9c !important;
}
/* violationStatus = resolutionstat; violationLevel = levels */
#violation th[data-column-id="resolutionstat"],
#violation th[data-column-id="levels"],
#violation-gridphp #dt_1_violation_level,
#violation-gridphp #dt_1_resolutionstat,
#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"],
#violation-view-pole th[data-column-id="resolutionstat"],
#violation-view-pole th[data-column-id="levels"] {
	background-color: #fff2cc !important;
}
#violation th[data-column-id="violator"],
#violation-gridphp #dt_1_violator_col,
#violation_contractor th[data-column-id="violator"],
#guyguards th[data-column-id="violator"],
#violation-view-pole th[data-column-id="violator"] {
	background-color: plum !important;
}
#violation th[data-column-id="comments"],
#violation th[data-column-id="inspectorComments"],
#violation th[data-column-id="resolutionComments"],
#violation th[data-column-id="contractorComments"],
#violation-gridphp #dt_1_inspectorComments,
#violation-gridphp #dt_1_iagComments,
#violation-gridphp #dt_1_contractorComments,
#violation_contractor th[data-column-id="comments"],
#violation_contractor th[data-column-id="inspectorComments"],
#violation_contractor th[data-column-id="resolutionComments"],
#violation_contractor th[data-column-id="contractorComments"],
#guyguards th[data-column-id="comments"],
#guyguards th[data-column-id="inspectorComments"],
#guyguards th[data-column-id="resolutionComments"],
#guyguards th[data-column-id="contractorComments"],
#violation-view-pole th[data-column-id="comments"],
#violation-view-pole th[data-column-id="inspectorComments"],
#violation-view-pole th[data-column-id="resolutionComments"],
#violation-view-pole th[data-column-id="contractorComments"] {
	background-color: mediumturquoise !important;
}
/*inspectionDate = dateinspected; */
#violation th[data-column-id="datenotified"],
#violation th[data-column-id="dateinspected"],
#violation th[data-column-id="dateresolved"],
#violation_contractor th[data-column-id="datenotified"],
#violation_contractor th[data-column-id="dateinspected"],
#violation_contractor th[data-column-id="dateresolved"],
#guyguards th[data-column-id="datenotified"],
#guyguards th[data-column-id="dateinspected"],
#guyguards th[data-column-id="dateresolved"],
#violation-view-pole th[data-column-id="datenotified"],
#violation-view-pole th[data-column-id="dateinspected"],
#violation-view-pole th[data-column-id="dateresolved"] {
	background-color: lightslategray !important;
}
#violation-gridphp #dt_1_inspection_date {
	background-color: lightslategray !important;
	color: #fff !important;
}
#violation th[data-column-id="photo"],
#violation th[data-column-id="measurement"],
#violation th[data-column-id="contactname"],
#violation-gridphp #dt_1_measurement_col,
#violation_contractor th[data-column-id="photo"],
#violation_contractor th[data-column-id="measurement"],
#violation_contractor th[data-column-id="contactname"],
#guyguards th[data-column-id="photo"],
#guyguards th[data-column-id="measurement"],
#guyguards th[data-column-id="contactname"],
#violation-view-pole th[data-column-id="photo"],
#violation-view-pole th[data-column-id="measurement"],
#violation-view-pole th[data-column-id="contactname"] {
	background-color: darksalmon !important;
}
#violation th[data-column-id="select"],
#violation-gridphp th[data-column-id="select"],
#violation_contractor th[data-column-id="select"],
#guyguards th[data-column-id="select"],
#violation-view-pole th[data-column-id="select"] {
	background-color: #a64d79 !important;
}
#violation th[data-column-id="pid"],
#violation th[data-column-id="pmid"],
#violation-gridphp #dt_1_pole_id,
#violation_contractor th[data-column-id="pid"],
#violation_contractor th[data-column-id="pmid"],
#guyguards th[data-column-id="pid"],
#guyguards th[data-column-id="pmid"],
#violation-view-pole th[data-column-id="pid"],
#violation-view-pole th[data-column-id="pmid"] {
	background-color: hotpink !important;
}
#violation th[data-column-id="gln-x"],
#violation th[data-column-id="gln-y"],
#violation th[data-column-id="gln-xy"],
#violation_contractor th[data-column-id="gln-x"],
#violation_contractor th[data-column-id="gln-y"],
#violation_contractor th[data-column-id="gln-xy"],
#guyguards th[data-column-id="gln-x"],
#guyguards th[data-column-id="gln-y"],
#guyguards th[data-column-id="gln-xy"],
#violation-view-pole th[data-column-id="gln-x"],
#violation-view-pole th[data-column-id="gln-y"],
#violation-view-pole th[data-column-id="gln-xy"] {
	background-color: slateblue !important;
}
#violation-gridphp #dt_1_glnxy {
	background-color: slateblue !important;
	color: #fff !important;
}
#violation td[data-column-id="gln-xy"],
#violation-gridphp td[data-column-id="gln-xy"],
#violation_contractor td[data-column-id="gln-xy"],
#guyguards td[data-column-id="gln-xy"],
#violation-view-pole td[data-column-id="gln-xy"] {
	color:black;
}
#violation .gridjs-td span,
#violation-gridphp .gridjs-td span,
#guyguards .gridjs-td span,
#violation_contractor .gridjs-td span {
	width: 100%;
	display: inline-block;
}
#violation td[data-column-id="violationId"],
#violation-gridphp td[data-column-id="violationId"],
#guyguards td[data-column-id="violationId"],
#violation_contractor td[data-column-id="violationId"] {
	text-align: left;
}
#violation .subdeet,
#violation-gridphp .subdeet,
#guyguards .subdeet,
#violation_contractor .subdeet {
	margin-top: 0px !important;
}
#violation .standardfilter,
#violation-gridphp .standardfilter,
#guyguards .standardfilter,
#violation_contractor .standardfilter {
	max-width: 125px;
}
/* grid styles */
.gridpage .invis {
	color: transparent !important;
	background-color: transparent !important;
}
.gridpage #detail_modal {
	padding: 0px 10px 10px 10px;
	width: 420px;
	border: 1px solid black;
	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: white;
}
.gridpage table th {
	position: sticky;
	left: 0;
	background-color: papayawhip;
	z-index: 1;
	padding: 5px !important;
}
.gridpage table {
	border-collapse: unset !important;
	border-color: #CCCCCC;
}
.gridpage #close {
	text-align: right;
	cursor: pointer;
}
.gridpage .gridtable {
	background-color: white;
	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: rgba(0, 0, 0, 0.1);
}
.gridpage .xhead {
	position: sticky;
	top: 28px;/* Line changed from "top: 0px;" BW Grid page visual fix 9/8/25 */
	left: 0px;
	background-color: white;
	z-index: 1000;
}
.gridpage .border {
	border: 1px solid black;
}
.gridpage .xcells {
	z-index: 1;
}
.gridpage .xth {
	background-color: white;
	font-size: 10px;
}
.gridpage .yth {
	background-color: white;
}
.gridpage .yhead {
	background-color: white;
}
/* .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;
	right: -300px; /* Start off-screen */
	background: #4caf50; /* Green for success */
	color: white;
	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.success {
	width: unset;
}
/* Show notification */
.notification.show {
	right: 20px; /* Slide in */
	opacity: 1;
}
/* Error notification */
.notification.error {
	background: #f23320 !important; 
}
/* Close button */
.notification .close-btn {
	margin-left: 15px;
	cursor: pointer;
	font-weight: bold;
	padding: 5px;
	font-size: 22px;
}
.no-comments {
	margin-top: 12px;
}
/* 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;
}