/*Brendan Code Here ----------------------------------------------------------*/
*{
				box-sizing: border-box;
}
::selection {
				background-color: var(--primary-light-blue);
				color: var(--primary-dark-blue);
}
.G8{
				gap: 8px;
}
.G12{
				gap: 12px;
}
.G16{
				gap: 16px;
}
.G24{
				gap: 24px;
}
.G32{
				gap: 32px;
}
.G64{
				gap: 64px;
}
/* Padding classes */
.PL8 { padding-left: 8px; }
.PR8 { padding-right: 8px; }
.PT8 { padding-top: 8px; }
.PB8 { padding-bottom: 8px; }
/* Padding Top and Bottom 8px */
.PTB8 { padding-top: 8px; padding-bottom: 8px; }
/* Padding Left and Right 8px */
.PLR8 { padding-left: 8px; padding-right: 8px; }

.PL12 { padding-left: 12px; }
.PR12 { padding-right: 12px; }
.PT12 { padding-top: 12px; }
.PB12 { padding-bottom: 12px; }
/* Padding Top and Bottom 12px */
.PTB12 { padding-top: 12px; padding-bottom: 12px; }
/* Padding Left and Right 12px */
.PLR12 { padding-left: 12px; padding-right: 12px; }

.PL16 { padding-left: 16px; }
.PR16 { padding-right: 16px; }
.PT16 { padding-top: 16px; }
.PB16 { padding-bottom: 16px; }
/* Padding Top and Bottom 16px */
.PTB16 { padding-top: 16px; padding-bottom: 16px; }
/* Padding Left and Right 16px */
.PLR16 { padding-left: 16px; padding-right: 16px; }

.PL24 { padding-left: 24px; }
.PR24 { padding-right: 24px; }
.PT24 { padding-top: 24px; }
.PB24 { padding-bottom: 24px; }
/* Padding Top and Bottom 24px */
.PTB24 { padding-top: 24px; padding-bottom: 24px; }
/* Padding Left and Right 24px */
.PLR24 { padding-left: 24px; padding-right: 24px; }

.PL32 { padding-left: 32px; }
.PR32 { padding-right: 32px; }
.PT32 { padding-top: 32px; }
.PB32 { padding-bottom: 32px; }
/* Padding Top and Bottom 32px */
.PTB32 { padding-top: 32px; padding-bottom: 32px; }
/* Padding Left and Right 32px */
.PLR32 { padding-left: 32px; padding-right: 32px; }

.PL64 { padding-left: 64px; }
.PR64 { padding-right: 64px; }
.PT64 { padding-top: 64px; }
.PB64 { padding-bottom: 64px; }
/* Padding Top and Bottom 64px */
.PTB64 { padding-top: 64px; padding-bottom: 64px; }
/* Padding Left and Right 64px */
.PLR64 { padding-left: 64px; padding-right: 64px; }

/* Margin classes */
.ML8 { margin-left: 8px; }
.MR8 { margin-right: 8px; }
.MT8 { margin-top: 8px; }
.MB8 { margin-bottom: 8px; }
/* Margin Top and Bottom 8px */
.MTB8 { margin-top: 8px; margin-bottom: 8px; }
/* Margin Left and Right 8px */
.MLR8 { margin-left: 8px; margin-right: 8px; }

.ML12 { margin-left: 12px; }
.MR12 { margin-right: 12px; }
.MT12 { margin-top: 12px; }
.MB12 { margin-bottom: 12px; }
/* Margin Top and Bottom 12px */
.MTB12 { margin-top: 12px; margin-bottom: 12px; }
/* Margin Left and Right 12px */
.MLR12 { margin-left: 12px; margin-right: 12px; }

.ML16 { margin-left: 16px; }
.MR16 { margin-right: 16px; }
.MT16 { margin-top: 16px; }
.MB16 { margin-bottom: 16px; }
/* Margin Top and Bottom 16px */
.MTB16 { margin-top: 16px; margin-bottom: 16px; }
/* Margin Left and Right 16px */
.MLR16 { margin-left: 16px; margin-right: 16px; }

.ML24 { margin-left: 24px; }
.MR24 { margin-right: 24px; }
.MT24 { margin-top: 24px; }
.MB24 { margin-bottom: 24px; }
/* Margin Top and Bottom 24px */
.MTB24 { margin-top: 24px; margin-bottom: 24px; }
/* Margin Left and Right 24px */
.MLR24 { margin-left: 24px; margin-right: 24px; }

.ML32 { margin-left: 32px; }
.MR32 { margin-right: 32px; }
.MT32 { margin-top: 32px; }
.MB32 { margin-bottom: 32px; }
/* Margin Top and Bottom 32px */
.MTB32 { margin-top: 32px; margin-bottom: 32px; }
/* Margin Left and Right 32px */
.MLR32 { margin-left: 32px; margin-right: 32px; }

.ML64 { margin-left: 64px; }
.MR64 { margin-right: 64px; }
.MT64 { margin-top: 64px; }
.MB64 { margin-bottom: 64px; }
/* Margin Top and Bottom 64px */
.MTB64 { margin-top: 64px; margin-bottom: 64px; }
/* Margin Left and Right 64px */
.MLR64 { margin-left: 64px; margin-right: 64px; }

.margauto {
				margin: auto;
}
.txtaligncenter {
				text-align: center;
}

.aligncenter {
				align-items: center;
}
.wrap {
				flex-wrap: wrap;
}

.label {
				display: block;
				color: var(--grey-dark);
				margin-bottom: 5px;
}
.W_Fit	{
				width: fit-content !important;
}
.W100 {
				width: 100%;
}

.W90 {
				width: 90%;
}

.W80 {
				width: 80%;
}

.W70 {
				width: 70%;
}

.W60 {
				width: 60%;
}

.W50 {
				width: 50%;
}

.W40 {
				width: 40%;
}

.W30 {
				width: 30%;
}

.W20 {
				width: 20%;
}

.W10 {
				width: 10%;
}

.W5 {
				width: 5%;
}

.W15 {
				width: 15%;
}

.W25 {
				width: 25%;
}

.W35 {
				width: 35%;
}

.W45 {
				width: 45%;
}

.W55 {
				width: 55%;
}

.W65 {
				width: 65%;
}

.W75 {
				width: 75%;
}

.W85 {
				width: 85%;
}

.W95 {
				width: 95%;
}

.colp {
				color: var(--secondary-blue);
}

.colpd {
				color: var(--primary-dark-blue);
}

.colgd {
				color: var(--grey-dark);
}

.colg {
				color: var(--grey);
}

.colgl {
				color: var(--grey-light);
}

.cold {
				color: var(--danger);
}

.colw {
				color: var(--warning);
}


.FW600 {
				font-weight: 600;
}
.FS12 {
				font-size: 12px;
}

.FS14 {
				font-size: 14px;
}
.FS16 {
				font-size: 16px;
}
.FS18 {
				font-size: 18px;
}
.FS20 {
				font-size: 20px;
}
.containerflex {
				display: flex;
}

input[disabled], textarea[disabled], select[disabled] {
				background-color: var(--grey-off-white) !important;
				color: var(--grey) !important;
				border-color: #ccc !important;
				cursor: not-allowed;

}

.IsReq::after {
				content: "*";
				color: red;
				padding-left: 4px; /* Adds a little space between the text and the asterisk */
				font-size: 14px;
}

button{
				cursor: pointer;
}
.Modal_Container{
				position: relative;
				background: white;
				border-radius: 16px;
				width: 95%;
				max-width: 1200px;
				/*max-height: 90vh;*/
	max-height: 100%;
				height: fit-content;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				z-index: 9;
}

.Modal_Header{
				background: linear-gradient(to right, #dce6f9, #f5f8ff);
				padding: 16px 24px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: sticky;
				top: 0;
				z-index: 10;
				max-height: 60px;
}
.Modal_Header_Content{
width: 100%;
}

.Modal_Body_Container{
				/*max-height: calc(100% - 138px);*/
				/*min-height: 50vh;*/
				/*overflow-y: auto;*/
				padding: 24px 24px 0 24px;
				background: transparent;
	height: 60vh;
	overflow: hidden;
}

.Modal_Overlay{
				position: fixed;
				top: 0; left: 0; right: 0; bottom: 0;
				background: rgba(0, 0, 0, 0.4);
				backdrop-filter: blur(6px); /* ✅ blur effect */
				-webkit-backdrop-filter: blur(6px);
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20px;
				z-index: 1000;
}

.Modal_Footer_Container{
				display: flex;
				width: 100%;
				padding: 24px ;
				justify-content: flex-end;
				gap: 32px;
				max-height: 80px;
}

.Close_Popup_Button{
				background: none;
				border: none;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
}

.Close_Popup_Button img{
				height: 24px;
				width: 24px;
				cursor: pointer;
}


/* Backdrop covers the viewport */
.prompt_backdrop {
				position: fixed;
				inset: 0;
				background: rgba(0,0,0,.04);
				display: flex;
				align-items: start;
				padding-top: 10%;
				justify-content: center;
				z-index: 9999;
}

/* Dialog box */
.prompt_modal {
				background: var(--white);
				border-radius: 6px;
				min-width: 300px;
				width: fit-content;
				max-width: 430px;
				padding: 32px;
				box-shadow: 3px 8px 20px -10px var(--grey-light);
}

/* Message text */
.prompt_message {
				margin-bottom: 24px;
				font-size: 13px;
				text-align: left;
				color: var(--grey-dark);
				line-height: 1.4;
}

/* Button container */
.prompt_buttons {
				display: flex;
				justify-content: end;
				gap: 16px;
}



/* Overlay: covers the viewport with a semi-transparent background */
.Org_alert_overlay {
				display: flex;
				width: fit-content;
				height: fit-content;
				padding: 0;
				position: fixed;
				top: 120px;
				left: 50%;
				transform: translateX(-50%);


				align-items: baseline;
				justify-content: center;
				z-index: 1000000000;
}

/* Main alert container */
.Org_alert {
				position: relative;
				width: 420px;
				max-width: 90%;
				padding:32px 24px;
				border-radius: 5px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
				background-color: #fff;
				animation: fadeIn 0.2s ease-out;
}

/* Alert type styling */

/* General alert */
.G_alert {
				border-left: 5px solid #006388;
				background-color: #eaf9ff;
}

/* Warning alert */
.W_alert {
				border-left: 5px solid #ffcc00;
				background-color: #fff8e1;
}

/* Danger alert */
.D_alert {
				border-left: 5px solid #ff4444;
				background-color: #ffe6e6;
}

/* Success alert */
.S_alert {
				border-left: 5px solid #00cc66;
				background-color: #e6ffe6;
}

/* Close button styling */
.close-btn {
				position: absolute;
				top: 5px;
				right: 10px;
				background: transparent;
				border: none;
				font-size: 20px;
				color: #333;
				cursor: pointer;
}

/* Alert header styling */
.alert-header {
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 10px;
}

/* Alert text styling */
.alert-text {
				/*font-size: 16px;*/
				/*margin-bottom: 15px;*/
}

/* Alert buttons container styling */
.alert-buttons {
				text-align: right;
}

/* Fade-in animation for the alert */
@keyframes fadeIn {
				from {
								opacity: 0;
								transform: scale(0.9);
				}

				to {
								opacity: 1;
								transform: scale(1);
				}
}



.inp_radio{
				/*appearance: none;*/
				/*-webkit-appearance: none;*/
				/*-moz-appearance: none;*/
				width: 16px;
				height: 16px;
				border: 2px solid #092854;
				/*background-color: red;*/
				accent-color: #376edb;
				border-radius: 50%;
				outline: none;
				cursor: pointer;
				position: relative;
				transition: background-color 0.2s ease, border-color 0.2s ease;
}

.inp_radio_large{
				width: 20px;
				height: 20px;
}

.W100{
				width: 100%;
}




/* ===== Base container ===== */
.custom_select_dropdown {
				position: relative;
				width: clamp(140px, 100%, 800px);
				font-family: system-ui, sans-serif;
				min-width: 200px;
}

.Custom_Dropdown_Active .custom_controls{
	border: 1px solid #3885FD;
}

.Custom_Dropdown_Active .custom_controls::after {
	transform: translateY(-50%) rotate(180deg)
}

.Modal_Container span , .Modal_Container input{
	font-family: Inter;
}

.Modal_Container {
	font-family: Inter;
}
	/* ===== Control (visible area with tags / placeholder) ===== */
.custom_controls {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 6px;
				/*min-height: 42px;*/
				padding: 6px 36px 6px 10px;
				border: 1px solid #ccc;
				border-radius: 6px;
				background: #fff;
				cursor: pointer;
				position: relative;
}

.tags_placeholder_container {
				position: relative;
				min-height: 28px;
				display: flex;
				align-items: center;
}

/* shows placeholder only when no <div> inside */
.tags_placeholder_container:not(:has(div))::before {
				content: attr(data-placeholder); /* must be data-placeholder (correct spelling) */
				position: absolute;
				font-size: 14px;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				color: var(--grey-light);
				pointer-events: none;
				width: max-content;
}

/* ===== Dropdown panel ===== */
.custom_dropdown {
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				margin-top: 6px;
				background: #fff;
				border: 1px solid #ccc;
				border-radius: 6px;
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
				/*padding: 8px;*/
				display: none; /*         !* hidden by default *!*/
				z-index: 10;
				flex-wrap: wrap;
	overflow: hidden;
}
.custom_dropdown.show	{
				display: flex;         /* toggle this via JS */
}



/* ===== Dropdown item ===== */
.dropdown_item {
				display: flex;
				align-items: center;
				/*gap: 8px;*/
				padding: 12px 16px;
				/*border-radius: 8px;*/
				cursor: pointer;
				transition: background 0.2s;
				width: 100%;
}

.dropdown_item:hover {
				background: #f3f4f6;
}

.FormGroup label.dropdown_item{
	font-weight: 400;
	font-size: 14px;
	color: #2B2B2B;
	font-family: Inter;
	font-style: normal;
	line-height: normal;
}


.custom_select_tag label{
			margin: 0;
}

.custom_select_tag{
				border-radius: 4px;
				background: #E9E9E9;
				color: #092854;
				gap: 6px;
				padding: 6px 4px;
				margin: 4px 8px 4px 0;
				height: 19px;
				display: inline-flex;
				align-items: center;
				font-size: 13px;
}

/* ===== Hide real checkbox ===== */
.item_checkbox {
				position: absolute;
				opacity: 0;
				pointer-events: none;
}


/* ===== Tag chip style (for dynamically inserted tags) ===== */
.custom_tag {
				display: inline-flex;
				align-items: center;
				gap: 6px;
				padding: 4px 8px;
				border-radius: 999px;
				background: #e5f0ff;
				font-size: 12px;
}

.custom_tag_remove {
				border: none;
				background: transparent;
				cursor: pointer;
				font-size: 14px;
				line-height: 1;
}

/* ===== Small caret style (optional) ===== */
.custom_controls::after {
				content: "";
				position: absolute;
				right: 10px;
				color: #888;
				pointer-events: none;
				top: 50%;
				transform: translateY(-50%) rotate(0deg);
				width: 18px;
				height: 18px;
				background-image: url("/Images/ResidentsLIst/Dropdown 2.svg");
				background-repeat: no-repeat;
				background-size: contain;
	transition: transform .3s ease;
}


.nostyle {
				background-color: transparent;
				outline: none;
				border: 0px solid transparent;

}


				#TopLevelModal{
				z-index: 1007;
				width: fit-content;
				min-width: 220px;
				max-width: 600px;
				background-color: var(--white);
				border-radius: 5px;
				min-height: fit-content;
				height: 280px;
				max-height: 680px;
				position: fixed;
				box-shadow: 0 0 17px -1px var(--grey);
				border: 1px solid var(--grey-light);
				justify-self: center;
				/* margin: auto; */
				left: 50%;
				top: 25%;
				transform: translate(-50%, -50%);
}
.TopLevelBody #ContentContainerImprintPopup{
				/*justify-content: space-evenly;*/
}
#TopLevelOverlay{
				z-index: 1006;
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background-color: transparent; /* semi-transparent */
				backdrop-filter: blur(0.5px);
				-webkit-backdrop-filter: blur(0.5px)
}
.TopLevelHeader,	.TopLevelBody, .TopLevelFooter{
				padding: 0 12px;
				width: 100%;
}
.TopLevelHeader, .TopLevelFooter{
				display: flex;

				align-items: center;

}
.TopLevelHeader{
				border-bottom: 1px solid var(--grey-light);
				justify-content: space-between;
				height: 40px;
				position: relative;
}
.TopLevelFooter .TopLevelCloseBtn{
				margin: auto auto auto 0;
				color: var(--grey-dark);
				background-color: white;
				border: 1px solid var(--grey);
}
.TopLevelFooter{
				border-top: 1px solid var(--grey-light);
				justify-content: flex-end;
				Gap:12px;
				height: 50px;

}
.TopLevelBody{
				min-height: calc(100% - 64px);
				height: auto;
				max-height: calc(65svh - 64px);
				overflow-y: scroll;
				padding: 24px 32px;
}
.TopLevelClose{
				font-size: 14px;
				font-weight: 600;
}
.TopLevelTitle{
				color: var(--secondary-blue);
				font-weight: 600;
}




.lds-ellipsis {
				display: inline-block;
				position: fixed;
				width: 50px;
				height: 50px;
				top: 60px;
				z-index: 100000;
}

.lds-ellipsis div {
				position: absolute;
				top: 33px;
				width: 7px;
				height: 7px;
				z-index: 100000;
				border-radius: 20%;
				background: #5995f1;
				animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
				left: 6px;
				animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
				left: 6px;
				animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
				left: 24px;
				animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
				left: 42px;
				animation: lds-ellipsis3 0.6s infinite;
}

#load_overlay {
				z-index: 100000;
				position: absolute;
				height: 100vh;
				width: 100vw;
				background-color: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
}

@keyframes lds-ellipsis1 {
				0% {
								transform: scale(0);
				}

				100% {
								transform: scale(1);
				}
}

@keyframes lds-ellipsis3 {
				0% {
								transform: scale(1);
				}

				100% {
								transform: scale(0);
				}
}

@keyframes lds-ellipsis2 {
				0% {
								transform: translate(0, 0);
				}

				100% {
								transform: translate(18px, 0);
				}
}

#loader {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				display: inline-block;
				position: relative;
				border: 4px solid;
				border-color: var(--grey-off-white) transparent;
				box-sizing: border-box;
				animation: rotateouter 1s linear infinite;
}

#loader::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				transform-origin: center center;
				margin: auto;
				border: 3px solid;
				border-color: transparent var(--secondary-blue);
				animation: rotateinner 0.5s linear infinite;
				width: 36px;
				height: 36px;
				border-radius: 50%;
}

@keyframes rotateinner {
				0% {
								transform: rotate(0deg);
				}

				100% {
								transform: rotate(-360deg);
				}
}

@keyframes rotateouter {
				0% {
								transform: rotate(0deg);
				}

				100% {
								transform: rotate(360deg);
				}
}





.ImgViewOverlay{
				position: fixed;
				top: 0;
				z-index: 10000;
				background-color: rgba(0,0,0,0.4);
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
}

.ImgZoomContainer{
				width:fit-content;
				height: fit-content;
				max-height: 600px;
				max-width: 700px;
				position: relative;
				display: inline-block;
}

#ImgView{
				width: 100%;
				max-width: 80svw;
				height: auto;
				max-height: 600px;
				object-fit: contain;
				cursor: none;
				border-radius: 4px;
}
#ImgCount{
				position: absolute;
				/* bottom: -100%; */
				color: white;
				bottom: -30px;
				/* margin: auto; */
				justify-self: anchor-center;
				font-weight: bold;
				width: 80px;
				text-align: center;

}

#ImgViewzoomLens {
				position: absolute;
				width: 120px;
				height: 120px;
				pointer-events: none;
				display: none;
				background-repeat: no-repeat;
				border: 1px solid lightgrey;
				border-radius: 0;
}

#PreviewImgCloseButton{
				background-color: #e6e5e5;
				padding:7px;
				cursor: pointer;
				position: absolute;
				top: 15px;
				right: 15px;
				color: white;
				font-size: 20px;
				font-weight: bold;
				border: none;
				border-radius: 50%;
				width: 30px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
}

.PreviewImgBtn{
				background-color: #e6e5e5;
				padding: 7px;
				cursor: pointer;
				position: absolute;

				color: var(--secondary-blue);
				font-size: 20px;
				font-weight: bold;
				border: none;
				border-radius: 4px;
				width: 60px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				/*top:0;*/
				/*transform: translateY(-50%);*/

}

.NextPRW{
				right: 15px;
				transform: rotate(180deg);
}
.PrevPRW{
				left: 15px;
}





/*list css*/
.ContentArea{
				padding: 24px;
				height: calc(100vh - 110px) !important;
				box-sizing: border-box;
				background: var(--grey-off-white);
}
.PageIndexContainer{
				margin-bottom: 0px !important;
				padding-bottom:24px;
				height: 65px;

}

.TopBar{
				height: 70px !important;
}
.Footer{
				height: 40px !important;
}
.MainContainer{
display: flex;
				flex-direction: column;
				/*!*gap: 16px;*! JC Changed ----------------------------*/
				padding:0 !important;
}

.list_content_container{
				display: grid;
				row-gap: 24px;
				width: 100%;
				background: #FFF;
				border-radius: 24px;
				padding: 24px;
				grid-template-rows: repeat(3, auto); /* each row sized by content */

				height: calc(100% - 65px);
}

.list_actions_header_container{
				width: 100%;
				/*padding-bottom: 24px; JC Changed ----------------------------*/
				justify-content: space-between;
				gap:16px;
}

.BottomContainer{
				height: auto;
				padding: 0;
}
/* ===== reusable layout ===== */

/*.list_container{ JC ADDED TO HIS SITE CSS --------------------------------------------------------------*!*!*/
/*				width: 100%;*/
/*				border: 1px solid var(--grey-light);*/
/*				border-radius: 16px;*/
/*				overflow-y: auto;*/
/*				position: relative;*/
/*				scrollbar-gutter: stable overlay; !* keeps layout stable + overlays scrollbar *!*/


/*}*/



.list_content_container{
/*width:calc(100% - 63px);*/
}
/*.list_header{
/*				background-color:var(--grey-off-white) ;*/
/*				border-top-left-radius: inherit;*/
/*				border-top-right-radius: inherit;*/
/*				padding: 10px 0;*/
/*				position: sticky;*/
/*				top: 0;*/
/*}*/
/*.list_header .list_cell{*/
/*				padding: 0px 10px;*/
/*}*/
/*.list_header .list_cell:not(:first-of-type){*/
/*border-left: 2px solid var(--grey-light);*/
/*!*}*! JC ADDED TO HIS SITE CSS --------------------------------------------------------------*/

/*.list_row {*/
/*				display: flex;*/
/*				width: 100%;*/
/*}*/
/*.actions_cell{*/
/*				display: flex;*/
/*				justify-content: space-evenly;*/
/*				align-items: center;*/
/*				gap: 5px;*/
/*}*/

/*.center_cell{*/
/*				display: flex;*/
/*				justify-content: center;*/
/*				align-items: center;*/
/*}*/

/*.list_cell { JC ADDED TO HIS SITE CSS --------------------------------------------------------------*/
/*				flex: 1 1 0;        !* default: share remaining space equally *!*/
/*				min-width: 0;*/
/*				padding: 10px 8px;*/
/*				font-size: clamp(11.5px, 1.1vw, 13px);*/
/*				line-height: 1.3;*/
/*				white-space: normal;*/
/*				display: -webkit-box;*/
/*				-webkit-line-clamp: 2;*/
/*				-webkit-box-orient: vertical;*/
/*				overflow: hidden;*/
/*				text-overflow: ellipsis;*/
/*				!*text-overflow: ellipsis;*!*/
/*				!*text-wrap: nowrap;*!*/
/*				!*overflow: hidden;*!*/
/*}*/

/*.list_cell div{*/
/*				font-size: clamp(11.5px, 1.1vw, 13px);*/
/*				line-height: 1.3;*/
/*				white-space: normal;*/
/*				display: -webkit-box;*/
/*				-webkit-line-clamp: 2;*/
/*				-webkit-box-orient: vertical;*/
/*				overflow: hidden;*/
/*				text-overflow: ellipsis;*/
/*!*text-overflow: ellipsis;*!*/
/*!*				text-wrap: nowrap;*!*/
/*!*				overflow: hidden;*!*/
/*}*/
/*!* Optional cosmetics for testing *!*/
/*!* .list_cell { padding: 8px; border: 1px solid #ccc; } *! JC ADDED TO HIS SITE CSS --------------------------------------------------------------*/

/* ===== Percentage width helpers ===== */
.w_5p   { flex: 0 0 5%;    width: 5%; }
.w_10p  { flex: 0 0 10%;   width: 10%; }
.w_12p  { flex: 0 0 12.5%;   width: 12.5%; }
.w_15p  { flex: 0 0 15%;   width: 15%; }
.w_17p  { flex: 0 0 17.5%;   width: 17.5%; }
.w_20p  { flex: 0 0 20%;   width: 20%; }
.w_25p  { flex: 0 0 25%;   width: 25%; }
.w_30p  { flex: 0 0 30%;   width: 30%; }
.w_33p  { flex: 0 0 33.33%; width: 33.33%; }
.w_35p  { flex: 0 0 35%;   width: 35%; }
.w_40p  { flex: 0 0 40%;   width: 40%; }
.w_45p  { flex: 0 0 45%;   width: 45%; }
.w_50p  { flex: 0 0 50%;   width: 50%; }
.w_55p  { flex: 0 0 55%;   width: 55%; }
.w_60p  { flex: 0 0 60%;   width: 60%; }
.w_65p  { flex: 0 0 65%;   width: 65%; }
.w_66p  { flex: 0 0 66.66%; width: 66.66%; }
.w_70p  { flex: 0 0 70%;   width: 70%; }
.w_75p  { flex: 0 0 75%;   width: 75%; }
.w_80p  { flex: 0 0 80%;   width: 80%; }
.w_85p  { flex: 0 0 85%;   width: 85%; }
.w_90p  { flex: 0 0 90%;   width: 90%; }
.w_95p  { flex: 0 0 95%;   width: 95%; }
.w_100p { flex: 0 0 100%;  width: 100%; }



::-webkit-scrollbar {
				width: 3px;
				height: 3px;
				border-radius: 5px;
}

select:hover {
				cursor: pointer;
}

::-webkit-scrollbar-track {
				background: var(--grey-light) !important;
				border-radius: 5px;
				overflow: hidden;
}

::-webkit-scrollbar-thumb {
				background: var(--grey) !important;
				border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
				background: var(--grey-dark) !important;
				cursor: pointer;
}



.pulse {
				margin: auto 0 auto auto;
				animation-name: stretch;
				animation-duration: .7s;
				animation-timing-function: ease-out;
				animation-direction: alternate;
				animation-iteration-count: infinite;
				animation-play-state: running;
}

@keyframes stretch {
				100% {
								transform: scale(1.2);
				}
}
.flicker{
				animation: flicker 3s infinite;

}
@keyframes flicker {
				0%, 100% { opacity: 1; }
				49% { opacity: 0.95; }
				50% { opacity: 0.97; }
				51% { opacity: 0.96; }
}


.BackArrowImg{
				transform: rotate(180deg);
}

.PGN_disable{
				opacity: 0.5;
}
.list_content_container{
				container-name: general_list;
				container-type: inline-size;
}

@container general_list (max-width:500px) {
.list_container{
/*padding:4px 8px;*/
}


				.list_header{
								display: none;
				}
				.list_row{
								flex-wrap: wrap;
								border-bottom:2px solid var(--grey-light)

				}
	.list_cell{
					flex:0 0 100%;
					width: 100%;
					position: relative;
					display: flex;
					flex-direction: column;
					text-align: right;
					justify-content: end;
					align-items: end;
					border-bottom: 1px solid var(--grey-light);
	}
				.actions_cell{
								flex-direction: row;
								border-bottom: none;
				}

				.list_cell:before{
								content: attr(data-label) ;
								position: absolute;
								font-weight: bold;
								line-height: 1;
								/*top: 50%;*/
								/*transform: translateY(50%);*/

								left: 8px;
								color: var(--primary-dark-blue);
								align-self:anchor-center;
				}


								.list_row:nth-child(odd){
								background-color: #f8fbff;
				}

				.list_actions_header_container{
								flex-wrap: wrap-reverse;
								gap:12px;
								padding-bottom: 12px;

				}

				.AddContainer{
								justify-content: end;
								width: 100%;
				}
				.SearchBarContainer{
								width: 100%;
				}



}

/*.SearchWrapper{*/
/*				border: 1px solid var(--grey-light);*/
/*				height: fit-content;*/
/*				width: clamp(150px, 100%, 1200px);*/
/*				position: relative;*/
/*				border-radius: 8px;*/
/*				overflow: hidden;*/
/*				align-items: center;*/
/*				display: flex;*/
/*}*/
/*.SearchWrapper:focus-within{*/
/*				box-shadow: 0 0 0 2px var(--secondary-blue);*/
/*}*/

/*.SearchIcon{*/
/*width: 20px;*/
/*				cursor: pointer;*/
/*				tab-index: 0;*/
/*				position: absolute;*/
/*				right: 8px;*/
/*}*/
/*.SearchInput{*/
/*				border-radius: inherit;*/
/*outline: none;*/
/*border: none;*/
/*				padding: 8px;*/
/*				width: 100%;*/
/*				height: 35px;*/

/*}*/



/*Brendan Code Ends Here ----------------------------------------------------------*/