:root {
    /* colors */
    --rdr-blue: #0063AE;
    --white: #fff;
    --rdr-border: #efefef;
    --text: #333;
    --blue: #0067a5;
    --rubby: #e0115f;
    --green: #50c878;
    --pearl: #eae0c8;
    --coral: #ff4040;
    --yellow: #fada5e;
    --cats-eye: #789753;
    --d-gray: rgba(50, 50, 50, 0.7);
    
    /* radius */
    --modal-radius: 20px;
    
    /* border */
    --border-main: #ddd;
    
    /* colors */
    --light-mode: #fff;
    --dark-mode: #000;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
.text-center {
	text-align: center !important;
}
.modal {
	overflow: hidden !important;
	padding-right: 0 !important;
    font-family: "Poppins", sans-serif;
    background: rgba(0, 0, 0, 0.3);
}
.w_340_1200_90vw {
	max-width: max(min(1200px, 90vw), 340px);
	margin: auto;
	max-height: 90vh; 
}
.w_340_1200_70vw {
	width: max(min(1200px, 70vw), 340px);
	margin: auto;
	min-width: fit-content !important;
}
.w_340_1200_60vw {
	width: max(min(1200px, 60vw), 340px);
	margin: auto;
}
.w_340_1200_50vw {
	width: max(min(1200px, 50vw), 340px);
	margin: auto;
}
.w_340_1200_40vw {
	max-width: max(min(1200px, 40vw), 340px);
	width: 100%;
}
.w_340_1200_30vw {
	max-width: max(min(1200px, 30vw), 340px);
	width: 100%;
}
.w_340_1200_20vw {
	width: max(min(1200px, 20vw), 240px);
	margin: auto;
}
.modal-dialog {
	min-width: 75vw;
	max-width: 90vw;
	width: 100%;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto !important;
}
.modal-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--border1) !important;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    position: relative;
    outline: 0;
    height: max-content;
    border-radius: var(--modal-radius) !important;
    width: 100%;
	display: flex;
	overflow: hidden;
	height: max-content;
}
.modal.small_popup {
	.body-title {
		font-size: 24px;
		font-weight: 500;
		color: var(--txt5);
		line-height: normal;
		margin: 15px auto 5px;
	}
	.iconSec {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 10px 0;
		width: 100%;
	}
	.modal-wrap {
		.modal_inner {
			justify-content: center;
		}
	}
}
.modal-wrap {
	background: var(--light-mode);
    border-radius: var(--modal-radius);
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: slideUp 0.24s cubic-bezier(0.34, 1.2, 0.64, 1);
    
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	
	> form {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
	}
	.modal-header {
        background: var(--bg5);
		border-bottom: 0.5px solid var(--border1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 15px;
		flex-shrink: 0;
		z-index: 10;
	    height: auto;
        max-height: 100%;
        min-height: auto;
        flex: 0 0 auto;
	    
		.modal-head-inner {
			font-size: 18px;
		    font-weight: 500;
		    margin: 0px;
		    text-align: left;
		    font-family: Poppins, sans-serif;
		    display: flex;
		    align-items: center;
		    white-space: normal;
		    gap: 5px;
		    color: var(--text);
		    padding-right: 30px;
		    line-height: normal;
		    
		    span,
		    div {
	    		color: inherit;
	    		font-size: inherit;
	    		font-weight: inherit;
	    		line-height: normal;
		    }
		    .small {
		    	font-size: 16px;
				font-weight: 500;
				color: var(--txt3);
				display: flex;
				align-items: center;
				gap: 5px;
				
				input[type=checkbox] {
					margin: 0;
					transform: none;
					width: 18px;
					height: 18px;
					cursor: pointer;
				}
		    }
		}
	    .close-cta {
			display: flex;
			align-items: center;
			gap: 5px;
			flex-shrink: 0;

    		.closeicon {
    			width: 28px;
				height: 28px;
				border-radius: 7px;
				border: 0.5px solid var(--border1);
				background: none;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--text);
				font-size: 14px;
				transition: background 0.13s;
				font-family: var(--fm2);
				
				i {
					transition: transform 0.22s var(--spring);
					transition: transform 0.22s cubic-bezier(0.34,1.26,0.64,1);
					display: inline-block;
				}
    			
    		}
    		.closeicon:hover {
    			background: var(--bg3);
    			transform: translateY(-1px);
	    		
	    		i {
    				transform: rotate(90deg);
				}
			}
	    }
	}
	.modal-header:before, 
	.modal-header:after {
		display: none;
	}
	.modal-header.no-border {
		justify-content: flex-end;
		padding: 0 !important;
		position: absolute;
        top: 15px;
        right: 15px;
	}
	.modal-scroll {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: thin;
		scrollbar-color: var(--border-main) transparent;
	}
	.modal-body {
		padding: 0;
		position: relative;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
		max-height: 100%;
		
		.modal-body-inner {
			height: 100%;
			max-height: 100%;
			overflow: hidden;
			overflow-y: auto;
			padding: 15px;
			font-size: 16px;
			font-weight: normal;
			line-height: normal;
		}
		.modal-body-inner.form-modal {
			padding: 0;
		}
		.section-divider {
		    background: var(--bg6);
		    border-bottom: 0.5px solid var(--border1);
		    padding: 8px 15px;
		    font-size: 12px;
		    font-weight: 600;
		    text-transform: uppercase;
		    letter-spacing: 0.07em;
		    color: var(--text);
		    display: flex;
		    align-items: center;
		    gap: 6px;
		    border-radius: 0;
		}
		.modal-footer {
 			justify-content: center;
		}
	}
	.modal_inner,
	.modal-footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 10px 15px;
		border-top: 1px solid var(--border1);
		background: var(--white);
		flex-shrink: 0;
		gap: 8px;
		flex-wrap: wrap;
		z-index: 10;
		flex: 0 0 auto;
		
		.btn1 {
			border-radius: var(--r20) !important;
			height: auto;
			min-height: 34px;
			font-size: 14px;
			line-height: normal;
		}
	}
	.modal-footer:before,
	.modal-footer:after {
		display: none;
	}
	.modal-footer.flex-space {
		justify-content: space-between;
		
		.display-data {
			font-size: 12px;
			color: var(--txt3);
			display: flex;
			align-items: center;
			gap: 5px;
			
			i {
				color: var(--rdr-emerald);
				font-size: 16px;
			}
		}
		.modal-footer-inner {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			align-items: center;
		}
	}
	.cardsContainer {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 15px;
		width: 100%;
		padding: 0;
		background: transparent;
		
		.card {
			margin: 0;
			min-height: auto;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			gap: 0;
			border-radius: var(--r10);
	        border: 1px solid var(--border1);
	        box-shadow: none;
			display: flex;
			flex-direction: column;
			
			.img {
				width: 100%;
				height: 110px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				background: var(--bg2);
				max-width: 100%;
				max-height: 100%;
				overflow: hidden;
				cursor: pointer;
				
				.img-class {
					max-height: 110px;
					display: flex;
					border-radius: 3px;
					width: 100%;
					min-height: 85px;
					align-items: center;
					justify-content: center;
					object-fit: cover;
					max-width: 100%;
					height: 100%;
				}
			}
			.cont {
				width: 100%;
				padding: 10px;
				background: var(--white);
				
				.n {
		            text-align: center;
		            height: auto;
		            width: 100%;
		            max-width: 100%;
		            font-size: 14px;
		            font-weight: normal;
		            color: var(--txt3);
		            line-height: normal;
		            word-break: break-all;
				}
			}
		}
	}
}
.hw-auto-30vw {
	width: 100%;
	max-width: 30%;
}
.hw-70vh-30vw {
	width: 100%;
	max-width: 30%;
	max-height: 70%;
}
.hw-50vh-50vw {
	width: 100%;
	max-width: 50%;
	max-height: 50%;
}
.hw-90vh-70vw {
	width: 100%;
	max-width: 90%;
	max-height: 70%;
}

@keyframes slideUp {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile modal */
@media (max-width: 768px) {
	.modal-content {
		max-width: 100%;
		width: fit-content;
	}
}









.modal-body {
	padding: 0 !important;
	font-family: var(--fm2);
	-webkit-font-smoothing: antialiased;
	overflow-y: auto;
	flex: 1;
	background: var(--white);
}





















/* Custom css needed for individual modals */
.modalwithforms {
	.form-horizontal {
		flex: 1;
		height: 100%;
		min-height: 0;
		display: flex;
        flex-direction: column;
        overflow: hidden;
		
		.modal-body {
			display: flex;
	        flex-direction: column;
	        
	        .modal-body-inner {
				flex: 1;
				height: 100%;
				min-height: 0;
				padding: 0;
			}
		}
		.modal-footer {
			flex-shrink: 0;
		}
	}
}











 
/* outer + inner wrappers — collapse double padding */
.addevent_maincontent,
#addevent_maincontent,
#addevent_subcontent {
	padding: 0 !important;
	margin: 0 !important;
}
 
/* ══════════════════════════════════════════════════════════════
   2. SECTION DIVIDERS  (.section-divider)
   ══════════════════════════════════════════════════════════════ */
.section-divider {
	background: var(--bg6);
	border-bottom: 0.5px solid var(--border1);
	padding: 7px 20px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 6px;
}
 
.section-divider:first-child {
	border-top: none;
}
 
/* ══════════════════════════════════════════════════════════════
   3. FORM BLOCK — two-column meta-table row
   label left (fixed) · input right (fluid)
   ══════════════════════════════════════════════════════════════ */
.custom-form-style {
	display: grid;
	grid-template-columns: 16.666667% 1fr;
	gap: 0;
}
.form-block {
	display: contents; /* makes label + div slot into the parent grid */
}
/* When a form-block needs to span full width (e.g. preview wrappers) */
.form-block.fullquestiondiv,
.form-block.prevWrapper,
#prevWrapper,
#prevWrapper1 {
	display: block !important;
	grid-column: 1 / -1;
	padding: 0;
}

/* ── Label column ── */
.r-labelCls {
	font-family: var(--fm2);
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	padding: 10px 15px;
	background: transparent;
	border-bottom: 0.5px solid var(--border1);
	display: flex;
	align-items: center;
	line-height: 1.4;
	min-height: 42px;
}
.r-labelCls.visibily-hidden {
	padding: 0;
	height: 0;
	min-height: 0;
}

/* ── Input column ── */
.r-divCls {
	padding: 8px 16px 8px 12px;
	background: var(--rdr-bg);
	border-bottom: 0.5px solid var(--rdr-border);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-height: 42px;
	
	.controls {
		width: 100%;
		display: flex;
		gap: 5px;
	}
}
#language-div {
	padding: 0;
}
/* last row: remove bottom border */
.form-block:last-of-type .r-labelCls,
.form-block:last-of-type .r-divCls {
  border-bottom: none;
}
 
/* ══════════════════════════════════════════════════════════════
   4. FORM CONTROLS  (.form-control)
   ══════════════════════════════════════════════════════════════ */
.form-control {
  font-family: var(--rdr-font) !important;
  font-size: 13px !important;
  color: var(--rdr-text) !important;
  background: var(--rdr-bg) !important;
  border: 0.5px solid var(--rdr-border2) !important;
  border-radius: var(--rdr-radius) !important;
  height: 36px !important;
  padding: 0 12px !important;
  width: 100%;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  -webkit-appearance: none;
}
 
.form-control::placeholder {
  color: var(--rdr-text3) !important;
}
 
.form-control:focus {
  border-color: rgba(0,0,0,0.30) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
  outline: none !important;
}
 
/* Textarea overrides */
textarea.form-control {
  height: auto !important;
  min-height: 88px !important;
  padding: 9px 12px !important;
  resize: vertical;
  line-height: 1.6 !important;
}
 
/* ══════════════════════════════════════════════════════════════
   5. DATE-TIME BOXES  (.date-time-box, .input-icon-box)
   ══════════════════════════════════════════════════════════════ */
.date-time-box .r-divCls {
  flex-direction: column;
  align-items: flex-start;
}
 
.d-flex {
	display: flex;
	gap: 8px;
}
.input-icon-box {
	position: relative;
	flex: 1;
	min-width: 0;
}
.input-icon-box .icon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--rdr-text3);
	font-size: 13px;
	pointer-events: none;
	z-index: 1;
	display: flex;
	align-items: center;
}
.input-icon-box .form-control {
	padding-left: 32px !important;
}
/* remove Bootstrap .no-padding fighting */
.no-padding { padding: 0 !important; }
/* pull-left inside flex — just make it full width */
.pull-left { float: none !important; width: 100% !important; }
 
/* ══════════════════════════════════════════════════════════════
   6. INPUTGROUP (select / dropdown wrappers)
   ══════════════════════════════════════════════════════════════ */
.inputgroup {
	position: relative;
}
 
/* ══════════════════════════════════════════════════════════════
   8. ATTACHMENT / UPLOAD AREA
   ══════════════════════════════════════════════════════════════ */
/* mediaopt card — the upload trigger zone */
.mediaopt.rdrimagecard {
	display: block;
	width: 100%;
	border: 1px solid var(--border1);
	border-radius: var(--r6);
	background: var(--white);
	transition: border-color 0.18s, background 0.18s;
	cursor: pointer;
	overflow: hidden;
}
.mediaopt.rdrimagecard .abc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 22px 16px;
	text-align: center;
}
.mediaopt.rdrimagecard .productImgCls {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rdr-text3);
	opacity: 0.5;
}
.cust-image-upload {
	.mediaopt.rdrimagecard .productImgCls {
		max-height: 50px;
	}
	.rdrtitletagbox {
		padding: 0;
		margin-top: 10px;
	}
}
.prevWrapper {
	.multiPreview,
	.multiPreview1 {
		.preview-box {
			.media-box {
	            height: 100px;
	            width: 100%;
	            
	            .doc-preview {
	            	height: 100%;
	            	width: 100%;
	            	
	            	.m-name {
						color: inherit;
						font-size: 14px;
						line-height: normal;
						font-weight: inherit;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						white-space: normal;
						word-break: break-all;
						-webkit-line-clamp: 1;
						overflow: hidden;
						padding: 0 5px;
					}
	            }
	            
				img, video, audio {
					max-height: 70px;
					display: block;
					border-radius: 3px;
					width: auto;
					align-items: center;
					justify-content: center;
					object-fit: contain;
					max-width: 100%;
					height: auto;
					max-height: 100%;
					min-height: unset;
				}
				.preview-video,
				.preview-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				.preview-audio {
					height: 50px;
					width: 100%;
					margin: 0 auto;
				}
			}
		}
	}
}
.mediaopt.rdrimagecard .productImgCls i {
  font-size: 28px !important;
}
 
/* Upload button inside the zone */
.mediaopt.rdrimagecard .poplib .btn.btn-default,
#uploadAttach {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font-family: var(--rdr-font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--rdr-blue) !important;
  background: none !important;
  border: 0.5px solid var(--rdr-blue) !important;
  border-radius: 7px !important;
  padding: 6px 14px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none !important;
}
 
.mediaopt.rdrimagecard .poplib .btn.btn-default:hover,
#uploadAttach:hover {
  background: rgba(5, 91, 164, 0.07) !important;
}
 
.prevWrapper,
#prevWrapper,
#prevWrapper1 {
  padding: 0 12px 10px !important;
  background: transparent !important;
}

/* Mobile modal */
@media (max-width: 768px) {
	.prevWrapper,
	#prevWrapper,
	#prevWrapper1 {
		padding: 0 !important;
	}
	.multiPreview {
		.preview-box {
			width: 100%;
		}
	}
}

/* ══════════════════════════════════════════════════════════════
   9. REMINDER / COPY-TO SECTION  (#customReminderMain)
   ══════════════════════════════════════════════════════════════ */
#customReminderMain {
  border-top: 0.5px solid var(--rdr-border);
  background: var(--rdr-bg);
}
 
/* "Add more dates" row — keep the button tight to the input */
#customReminderMain .r-divCls.r-d-col-2 {
  flex-wrap: nowrap;
  gap: 8px;
}
 
/* Add button */
#addReminder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rdr-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 36px;
  padding: 0 16px !important;
  background: var(--rdr-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rdr-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.14s;
}
 
#addReminder:hover { opacity: 0.87; }
 
/* schedules list */
.schedules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
 
/* ── Copy-to checkboxes ── */
.radioInputdiv {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 17px;
	font-weight: normal;
	color: #666;
	margin-right: 14px;
	cursor: pointer;
	gap: 5px;
	
	label {
		font-size: 16px !important;
		color: #333 !important;
		cursor: pointer;
	}
	.aiContent-text {
		font-size: 14px !important;
		font-weight: 500;
		color: #333 !important;
	}
}
.r-labelCls {
	.radioInputdiv {
		width: 100%;
	}
}
.radioInputdiv input[type="checkbox"] {
	width: 13px;
	height: 13px;
	cursor: pointer;
	border-radius: 3px;
}
 
/* custom email input */
.cusEmail.form-control {
  margin-left: 0 !important;
  margin-top: 8px;
}
 
/* ══════════════════════════════════════════════════════════════
   10. ERROR / INFO SPANS
   ══════════════════════════════════════════════════════════════ */
#addRemindrErr,
#internalEmailErr,
.sendmailInfo {
  font-size: 11.5px;
  color: var(--rdr-red);
  font-family: var(--rdr-font);
  margin-top: 3px;
  display: block;
}
 
/* ══════════════════════════════════════════════════════════════
   11. CROSSTAB / DATA-TABLE CONTAINER
   ══════════════════════════════════════════════════════════════ */
#data-table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--rdr-radius);
  border: 0.5px solid var(--rdr-border2);
}
 
/* ══════════════════════════════════════════════════════════════
   12. HIDDEN / DISPLAY UTILITIES
   ══════════════════════════════════════════════════════════════ */
[style*="display: none"],
[style*="display:none"] {
  /* let JSP control visibility; don't fight it */
}
 
/* ══════════════════════════════════════════════════════════════
   13. SCROLLBAR (modal-body)
   ══════════════════════════════════════════════════════════════ */
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  background: var(--background-b-gray);
  border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.22);
}
 
/* ══════════════════════════════════════════════════════════════
   14. RESPONSIVE — collapse to single column below 500px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
	.custom-form-style {
		grid-template-columns: 1fr;
	}
 
  .form-block { display: block !important; }
 
  .r-labelCls {
    padding: 10px 16px 6px;
    border-bottom: none;
    min-height: unset;
    background: var(--rdr-bg2);
  }
 
  .r-divCls {
    padding: 6px 16px 10px;
    border-bottom: 0.5px solid var(--rdr-border);
    background: var(--rdr-bg);
  }
 
  .section-divider { padding: 7px 15px; }
}
/* ── 1. CORE RULE — empty label or div cells collapse fully ── */
.r-labelCls:empty,
.r-divCls:empty {
  display: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
}
 
 
/* ── 2. display:none form-blocks must not affect grid layout ── */
/*    CSS grid still reserves row space for display:none children
      unless we explicitly remove them from flow               */
.form-block[style*="display: none"],
.form-block[style*="display:none"] {
  display: none !important;
}
 
 
/* ── 3. prevWrapper rows — collapse when inner preview is empty ── */
/*    .multiPreview1 and .multiPreview are empty divs until files
      are uploaded. Hide the entire wrapper row until they have
      children.                                                  */
.form-block.prevWrapper:has(#multiPreview1:empty),
.form-block.prevWrapper:has(#multiPreview:empty) {
  display: none !important;
}
 
/* Fallback for browsers without :has() — target by id directly */
#prevWrapper1:has(#multiPreview1:empty),
#prevWrapper:has(#multiPreview:empty) {
  display: none !important;
}
 
/* Also: the wrappers have inline style="display:flex" but if the
   inner div is empty the label+div still hold a full row height */
#prevWrapper1 .r-labelCls:empty,
#prevWrapper  .r-labelCls:empty {
  display: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
 
#prevWrapper1 .r-divCls:has(#multiPreview1:empty),
#prevWrapper  .r-divCls:has(#multiPreview:empty) {
  display: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
 
 
/* ── 4. time input columns hidden via inline style ── */
/*    The clock-o input-icon-box divs have style="display:none"
      but still take up flex space inside the d-flex row       */
.input-icon-box[style*="display: none"],
.input-icon-box[style*="display:none"] {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
}
 
 
/* ── 5. Crosstab form-block — hidden via inline style ── */
.form-block.CROSSTABConfig_cls[style*="display: none"],
.form-block.CROSSTABConfig_cls[style*="display:none"] {
  display: none !important;
}
 
 
/* ── 6. Reminder section — hidden by default ── */
#customReminderMain[style*="display: none"],
#customReminderMain[style*="display:none"] {
  display: none !important;
}
 
/* Reminder error span — empty, shouldn't hold height */
#addRemindrErr:empty,
#internalEmailErr:empty,
.sendmailInfo:empty {
  display: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
 
/* The form-block row containing addRemindrErr — when span is empty
   the whole row collapses                                        */
.form-block:has(#addRemindrErr:empty) {
  display: none !important;
}
 
 
/* ── 7. cusEmail — hidden via inline style, still holds margin ── */
.cusEmail[style*="display: none"],
.cusEmail[style*="display:none"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}
 
/* cusEmailMain wrapper — empty by default ── */
.cusEmailMain:has(#cusEmailMain:empty) {
  display: none !important;
}
 
#cusEmailMain:empty {
  display: none !important;
}
 
 
/* ── 8. voiceAiArea / voiceAiAreaMain — hidden until toggled ── */
.voiceAiAreaMain[style*="display: none"],
.voiceAiAreaMain[style*="display:none"],
.voiceAiArea[style*="display: none"],
.voiceAiArea[style*="display:none"] {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
 
 
/* ── 9. Ai-inputBlock — hidden until listening starts ── */
#Ai-inputBlock[style*="display: none"],
#Ai-inputBlock[style*="display:none"] {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
 
/* Its paired empty r-labelCls also collapses ── */
#Ai-inputBlock ~ .r-labelCls,
.r-labelCls + #Ai-inputBlock[style*="display: none"],
.r-labelCls + #Ai-inputBlock[style*="display:none"] {
  display: none !important;
}
 
/* The empty r-labelCls injected before #Ai-inputBlock ── */
#Ai-inputBlock:is([style*="display: none"],[style*="display:none"]) {
  display: none !important;
}
 
/* Collapse the sibling empty label when #Ai-inputBlock is hidden */
#Ai-inputBlock:is([style*="display: none"],[style*="display:none"]) + * {
  /* can't use previous sibling in CSS — handled by :has() below */
}
 
.r-divCls:has(+ #Ai-inputBlock[style*="display: none"]),
.r-divCls:has(+ #Ai-inputBlock[style*="display:none"]) {
  /* the r-divCls before the inputBlock is the voiceAiAreaMain wrapper
     — that's fine, leave it. Target the empty label specifically.  */
}
 
/* Direct: empty r-labelCls immediately before a hidden Ai-inputBlock */
.r-labelCls:empty:has(~ #Ai-inputBlock[style*="display: none"]) {
  display: none !important;
}
 
 
/* ── 10. language-div — hidden while listening ── */
#language-div[style*="display: none"],
#language-div[style*="display:none"] {
  display: none !important;
}
 
 
/* ── 11. stopBtn — hidden by default ── */
#stopBtn[style*="display: none"],
#stopBtn[style*="display:none"] {
  display: none !important;
}
 
 
/* ── 12. status text — hidden by default ── */
#status[style*="display: none"],
#status[style*="display:none"] {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
 
 
/* ── 13. .desktop-version / .mobile-version — empty when hidden ── */
@media (min-width: 769px) {
  .mobile-version { display: none !important; padding: 0 !important; margin: 0 !important; }
}
@media (max-width: 768px) {
  .desktop-version { display: none !important; padding: 0 !important; margin: 0 !important; }
}
 
 
/* ── 14. waveform — hidden by default, no layout cost ── */
.waveform[style*="display: none"],
.waveform[style*="display:none"] {
  display: none !important;
}
 
 
/* ── 15. eventSelection — empty div should not hold row height ── */
#eventSelection:empty {
  display: none !important;
}
 
.form-block:has(#eventSelection:empty) {
  display: none !important;
}
 
 
/* ── 16. formPHText — always hidden ── */
#formPHText {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}
 
 
/* ── 17. schedules — empty until reminders added ── */
.schedules:empty {
  display: none !important;
}
 
.form-block:has(.schedules:empty) {
  display: none !important;
}
 
 
/* ── 18. sendTestMailBody_loader — only visible when checkbox checked ── */
/*    Contains cusEmail (hidden) + empty divs — collapse when all empty */
.sendTestMailBody_loader:has(.cusEmail[style*="display: none"]):has(#cusEmailMain:empty):has(.sendmailInfo:empty) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
 
 
/* ── 19. GLOBAL SAFETY NET
      Any .r-divCls or .r-labelCls that only contains
      hidden or empty children should not hold height.
      :has() makes this precise without touching visible rows. ── */
 
/* r-divCls whose only visible child is an empty #multiPreview */
.r-divCls:has(.multiPreview1:empty):not(:has(*:not(.multiPreview1):not(.multiPreview))),
.r-divCls:has(.multiPreview:empty):not(:has(*:not(.multiPreview):not(.multiPreview1))) {
  padding: 0 !important;
  min-height: 0 !important;
  border-bottom: none !important;
}
 
/* r-divCls that only has empty schedules */
.r-divCls:has(.schedules:empty):not(:has(*:not(.schedules))) {
  padding: 0 !important;
  min-height: 0 !important;
}
.modal-mediaopt {
	.mediaopt.rdrimagecard {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 15px;
		width: 100%;
		
		.abc {
			 flex: 0 0 60%;
			max-width: 60%;
			box-sizing: border-box;
			min-width: 0			
		}
		.rdrtitletagbox {
			flex: 1 1 0;
			max-width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 8px;
			min-width: 0;
			
			.rdrimagetitle,
			.rdrimagetags {
				display: block;
				width: 100%
			}
		}
	}
}
@media (max-width: 768px) {
	.mediaUploadArea.mediaopt.rdrimagecard .abc,
	.mediaUploadArea.mediaopt.rdrimagecard .mediaDetails.rdrtitletagbox {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100% !important;
	}
}