/* staging 20250926 0553 */

/*
HEADER SECTION




*/

/*
.admin-background {
	background-color: #dddbdb !important; 
}

body.admin-background {
	background-color: #dddbdb !important; 
	min-height: 100vh; 
	margin: 0; 
	padding: 0; 
}

.mce-container {
	background-color: #dddbdb !important; 
	min-height: 100%; 
}
*/


/* Superadmin frontend edit buttons  */
.icon-edit, .btn.btn-small.btn-info, .float-end, .jmodedit {
	display: none !important;
}

.category-name {
	display: none !important;
}

.footer-section .logo-wrapper {
	display: none !important;
}

h1 {
	font-size: 24px !important; 
	font-weight: 700 !important;
	margin-top: 25px !important;
	/* margin-bottom: 100px !important; */ 
}

@media (max-width: 768px) {
	h1 {
		font-size: 22px !important; 
		font-weight: 700 !important;
		/* margin-bottom: 75px !important; */
	}
}

.spacer-50 {
	height: 50px; 
}

.spacer-100 {
	height: 100px; 
}

.spacer-350 {
	height: 350px; 
}

.spacer-500 {
	height: 500px; 
}


.mobile-break {
  display: none; /* hidden except at mobile widths */
}

@media (max-width: 768px) {
  .mobile-break {
	display: inline !important; 
  }
}

html, body {
	height: 100%; /* Ensure the body stretches to fill the viewport */
}

.home-alias .header-left-section {
	// visibility: hidden !important;
}

/* Removes bullet points from custom fields */
ul.fields-container {
	list-style: none;
	padding-left: 0;
}

/*EmbedNPages iframes*/
.embed-frame {
	width: 90%;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 3px;
	height: 100%;
	display: block;
	margin: 0 auto;
	/* Default height to ensure responsiveness */
}

@media (max-width: 991.98px) {
	.astroid-nav-wraper {
		display: block !important;
		/* Force display on smaller widths */
	}
}

/* make mobile footer menu items appear */
@media (max-width: 992px) {
	.astroid-nav-wraper ul {
		display: flex !important;
		flex-basis: auto;
	}
}

.astroid-article-pageheading {
	display: none; /* Hides the displayed site title */
}

.logo-wrapper .site-title {
	text-decoration: none; /* Remove the underline */
}

/* Menu text default color */
.mod-astroid-menu .nav-item .nav-link {
	color: #000000; 
	transition: color 0.3s ease; 
}

/* Menu text hover color */
.mod-astroid-menu .nav-item .nav-link:hover {
	color: #ffffff;
}

/* Target the button inside the logout form and style it to match the nav links */
.com-users-logout__form .btn.as-menu-item {
	// background-color: white;
	font-weight: 500; /* Match font weight */  
}

/* Logout button text default color */
.mod-astroid-menu .com-users-logout__form .btn-primary {
	color: #000000; /* Default color set to black */
	transition: color 0.3s ease, background-color 0.3s ease;
}

/* Logout button text hover color */
.mod-astroid-menu .com-users-logout__form .btn-primary:hover {
	color: #ffffff;
}

.astroid-container {
	padding-top: 50px; 
}

.astroid-component-section {
	padding: 50px 0;
}

@media (max-width: 768px) {
	.astroid-container {
		padding-top: 10px;
	}
	.astroid-component-section {
		padding: 25px 0 !important;
	}
}


/* header menu 



 */

.astroid-nav li {
	/* This targets items in the header menu row, including the $username span insertion */
	display: flex;
	align-items: center;
	/* Optional, ensures vertical centering if needed */
}

.menu-username {
	/* display: inline; */
	/* Not sure if this is needed to ensure the username stays inline with the link */
	color: grey;
	font-style: italic;
	margin-right: 10px;
}

.title-suffix {
	color: grey;
	font-style: italic;
	font-weight: 600;
	margin-left: 15px;
}

.title-username {
	color: black;
	font-style: italic;
	font-weight: 600;
	margin-left: 1px;
}


/* offcanvas styles 





 */

/* IF NEEDED: REMOVE MENU FROM OFF CANVAS AT LARGER WIDTHS
@media (min-width: 992px) {
	#astroid-offcanvas .moduletable {
		display: none;
	}
}
*/

.astroid-sidebar-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Three columns max: THIS ISN'T WORKING, BUT ACCEPTING FOR NOW 20241201 */
	gap: 10px; /* Adjust spacing between items */
}

.astroid-sidebar-menu .nav-item {
	text-align: center; /* Center align items */
}

/* Optional: Adjust spacing or padding within menu items for compactness */
.astroid-sidebar-menu .nav-item .nav-item-inner {
	padding: 5px;
}

.astroid-offcanvas-inner > div:first-child {
	flex-shrink: 0; 
}

.astroid-offcanvas-inner > div:last-child {
	flex-grow: 1 !important; 
	display: flex !important; 
	flex-direction: column !important; 
}

#offcanvas_editor_form {
	flex-grow: 1 !important; 
	display: flex !important;
	flex-direction: column !important;
	position: relative !important; 
}

#offcanvas_editor_form .tox {
	flex-grow: 1 !important; 
	height: 100% !important; 
}

/* This targeting is effective according to web dev tools, but the height value remains 0px*/
#offcanvas_editor_form .tox-edit-area {
	flex-grow: 1 !important; 
	height: 100% !important; 
}


/* The height: auto only applies if used with !important. And when applied, the height of the tox-edit-area itself collapses to zero. The height: calc logic is needed to stop the bottom of the save button from being outside the view port */
.astroid-offcanvas-inner {
	display: flex !important;
	flex-direction: column;
	/* height: auto !important; */ /*NOTE: applying auto causes tox-edit-area to shrink to zero */
	height: calc(100dvh - 70px - env(safe-area-inset-bottom, 0)) !important; /* NOTE: this keeps the save button inside the viewport, but there are problems with ios safari */
}

/* I'm not sure this media query is having any effect */

/* 
@media (max-width: 768px) { 
	#offcanvas_editor_form .save-button {
		position: absolute;
		bottom: env(safe-area-inset-bottom, 150px);
		left: 5px;
		right: 5px;
	}
}
*/




/* Article










*/


.astroid-article-title {
	display: flex;
	justify-content: left;
	align-items: baseline;
	/*gap: 20px;*/
	column-gap: 20px;
	row-gap: 5px;
	flex-wrap: wrap;
	margin-bottom: 100px;
}

.astroid-article-title h1 a {
	text-decoration: none;
}

@media (max-width: 768px) {
	.astroid-article-title {
		margin-bottom: 75px !important;
	}
}

.astroid-article-text {
	display: flex !important;
	flex-direction: column; /* Stack the forms vertically */
	align-items: flex-start; /* Align items to the left */
}

.astroid-article-text figure {
	width: 100%; /* Ensures full width for embeds */
	margin: 0; 
}

.astroid-footer-section {
	padding-bottom: 40px;
}

h3.module-title {
	font-size: 30px
}


/* Group pages


*/

/*
.group-section-links {
	font-size: 16px;
	line-height: 1.1;
	margin: 10px 0;
	padding-left: 40px;
}

.group-section-links li {
	margin-bottom: 12px;
	list-style-type: disc;
}

.group-section-links a {
	
	text-decoration: none;
	font-weight: 300;
}

.group-section-links a:hover {
	text-decoration: underline;
	color: rgb(69, 191, 85) !important;
}

*/


/* UNTIL 20250916 2244
.group-section-links {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.8;
	margin: 25px 0;
	padding: 0;
	padding-left: 25px;
}

.group-section-links li {
	margin-bottom: 15px;
	list-style: none;
	position: relative;
}

.group-section-links li:before {
	content: "▪️"; 
	position: absolute;
	left: -20px;
	color: #6b7280;
}

*/


/* NEW 20250916 2244 */
.group-section-links {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 2.25; 
  margin: 30px 0;         /* space before/after the list */
  padding: 0;
  text-align: center;
  width: 100%;               /* take full width of parent container */
  display: block;            /* ensure block-level element */
}

.group-section-links li {
  list-style: none;       /* remove bullet */
  margin: 15px 0;         /* spacing between items */
}

.group-section-links a {
  text-decoration: none;   /* removes underline */
}





/* Buttons




 */

@keyframes flash-success {
	
	0% { background-color: #218838; }
	25% { background-color: #74a77f; }
	50% { background-color: #d4edda; } /* Light green */
	100% { background-color: white; } /* Revert to default */
}

.flash-success {
	animation: flash-success 2s ease-in-out;
}

.save-button {
	margin-top: 10px;
	color: #808080 !important;
	background-color: inherit !important;
	pointer-events: none;
	width: 100%;
}

.save-button-wrapper {
	height: 0;
	overflow: hidden;
	transition: height 0.2s ease;
}

.save-button-wrapper:has(.save-button:not([style*="display: none"])) {
	height: 55px;
}

.archive-button { 
	margin-bottom: 10px;
	margin-right: 10px !important;
	padding: 0 !important;
	background-color: transparent !important; /* Removes the background color */
	color: grey !important; 
	font-style: italic; 
	border: none !important; 
	box-shadow: none; 
	visibility: hidden;
	pointer-events: none;
}

/* 
NEW 20250601 : Added summarize button and changed button visuals 
*/
.summarize-button { 
	display: block !important;
	margin: 0 auto 400px;
	/* padding: 0 !important; */
	/* background-color: transparent !important; */
	/* color: grey !important; */
	font-style: italic; 
	font-size: 18px !important;
	/* border: none !important; */
	box-shadow: none; 
	visibility: visible;
	pointer-events: auto;
}

.summarize-button-tutor { 
	display: block !important;
	margin: 0 auto 50px;
	padding: 0 !important;
	background-color: transparent !important;
	color: grey !important; 
	font-style: italic; 
	font-size: 18px !important;
	border: none !important; 
	box-shadow: none; 
	visibility: visible;
	pointer-events: auto;
}

.archive-all-button { 
	display: block !important;
	margin: 0 auto 400px;
	/* padding: 0 !important; */
	/* background-color: transparent !important; */
	/* color: grey !important; */
	font-style: italic; 
	font-size: 24px !important;
	/* border: none !important; */
	box-shadow: none; 
	visibility: visible;
	pointer-events: auto;
}
/*
END OF NEW 
*/


.disabled-save-button {
	margin-top: 10px;
	color: #808080 !important;
	pointer-events: none;
}

.active-save-button {
	margin-top: 10px;
	pointer-events: auto;
}

.disabled-ping-button {
	color: #808080 !important;
	background-color: #fff !important;
	border: 0.75px solid #808080;
	border-radius: 6px;
	pointer-events: none;
	margin: 0px;
	padding: 5px 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: inherit; 
	vertical-align: baseline;
	position: relative;
	top: -2px;
}

.active-ping-button {
	color: #000000 !important;
	background-color: #fff !important;
	border: 1.5px solid #000;
	border-radius: 6px;
	pointer-events: auto;
	margin: 0px;
	padding: 5px 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: inherit; 
	vertical-align: baseline;
	position: relative;
	top: -2px;
}



/* Labels




*/


.label-button-container:not(:has(> label.editor-label-archive)) {
	display: flex; 
	justify-content: space-between;
	align-items: flex-end; 
	margin-bottom: 10px; 
}

form .label-button-container {
	/* This ensures styles inside forms remain unchanged */
}

body :not(form) > .label-button-container:has(> label.editor-label-archive) {
	display: flex;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	width: 100%; 
	text-align: center; 
	margin-top: 50px;
	margin-bottom: 20px; 
}

body :not(form) > .label-button-container:has(> label.editor-label-group) {
	display: flex;
	justify-content: center; 
	align-items: center; 
	width: 100%; 
	text-align: center; 
	margin-top: 50px;
	margin-bottom: 20px; 
}

/* to try to apply display:flex only when there might be an archive button, ie not when the box is itself an archive box */ 	
.editor-form-small .label-button-container:not(:has(> label.editor-label-archive)) {
	display: flex; 
	/* display: block !important; /* orginally flex. changed to block for case of 'your words' archive on words page */
	justify-content: space-between; /* Distribute label and button */
	align-items: flex-end; /* Vertically align label and button */
	margin-bottom: 10px;
}

.editor-label {
	font-size: 18px; 
	font-weight: 550;
	color: #333 !important;
	margin-left: 5px;
	margin-bottom: 10px; 
	text-decoration: none; !important /* Remove link underlines */
	cursor: pointer;
}

a.editor-label:hover {
	color: rgb(69, 191, 85) !important;
	transition: color 0.2s ease;
}

a.editor-label:active {
	color: rgb(69, 191, 85);
}

span.editor-label {
	cursor: default; /* Non-clickable labels shouldn't have pointer cursor */
}

/*
label[onclick] {
  cursor: pointer;
  transition: color 0.2s ease;
}

label[onclick]:hover {
  color: rgb(69, 191, 85) !important;
}

label[onclick]:active {
  color: rgb(69, 191, 85);
}
*/

.editor-label-import-ext {
	font-size: 18px; 
	font-weight: 550;
	color: rgba(230,120,20,1) !important;
	margin-left: 5px;
	margin-bottom: 10px; 
}

.editor-label-archive {
	font-size: 28px; 
	font-style: italic; 
	font-weight: 550;
	color: #333;
	/* margin-bottom: 40px; */
	text-align: center !important; 
	display: block !important; /* Ensures text-align works */
	margin: 0 auto 40px auto !important; /* Centers horizontally */
	/* width: max-content; /* Prevents it from stretching */
}

.editor-label-group {
	font-size: 28px; 
	font-style: italic; 
	font-weight: 550;
	/* color: #333; */
	color: rgba(230,120,20,1);
	/* margin-bottom: 40px; */
	text-align: center !important; 
	display: block !important; /* Ensures text-align works */
	margin: 0 auto 40px auto !important; /* Centers horizontally */
	/* width: max-content; /* Prevents it from stretching */
}

.editor-label-offcanvas-user {
	font-size: 30px; 
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 550;
	color: #333;
	margin-top: 25px;
	margin-left: 0px;
	margin-bottom: 20px; /* Space between label and editor */
	text-align: center;
	font-style: italic;

}

.editor-label-offcanvas-admin {
	font-size: 30px; 
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 550;
	color: #333;
	margin-top: 15px;
	margin-left: 0px;
	margin-bottom: 20px; /* Space between label and editor */
}

@media (max-width: 768px) {
	.editor-label-archive {
		font-size: 24px;
	}
	.editor-label-group {
		font-size: 24px;
	}
	.editor-label-offcanvas {
		font-size: 24px !important;
	}
	h3.module-title {
		font-size: 28px
	}
}



/* WS Editor Groups




*/


/* ===== ws-editor-group-II ===== 




*/
.ws-editor-group-II {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 125px;
  flex-direction: column;
  justify-content: center !important;
  gap: 0px;
}

@media (min-width: 769px) {
  .ws-editor-group-II {
	flex-direction: row;
	/* flex-wrap: wrap; */ 
	gap: clamp(15px, 2vw, 20px);
  }
}

@media (min-width: 993px) {
  .ws-editor-group-II {
	gap: clamp(20px, 2vw, 25px);
  }
}

@media (min-width: 1201px) {
  .ws-editor-group-II {
	gap: clamp(25px, 2.5vw, 30px);
  }
}

@media (min-width: 1401px) {
  .ws-editor-group-II {
	gap: clamp(30px, 3vw, 40px);
  }
}
/* ============================== end ============================== */




/* ===== ws-editor-group-III =====



*/
.ws-editor-group-III {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 100px;
  flex-direction: column;
  justify-content: center !important;
  gap: 50px;
}

@media (min-width: 769px) {
  .ws-editor-group-III {
	flex-direction: row;
	/* flex-wrap: wrap; */ 
	gap: clamp(15px, 2vw, 20px);
  }
}

@media (min-width: 993px) {
  .ws-editor-group-III {
	gap: clamp(20px, 2vw, 25px);
  }
}

@media (min-width: 1201px) {
  .ws-editor-group-III {
	gap: clamp(25px, 2.5vw, 30px);
  }
}

@media (min-width: 1401px) {
  .ws-editor-group-III {
	gap: clamp(30px, 3vw, 40px);
  }
}
/* ============================== end ============================== */




/* ===== ws-editor-group-III-series ===== 



*/
.ws-editor-group-III-series {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 100px;
  flex-direction: column;
  justify-content: center !important;
  gap: 50px;
}

@media (min-width: 769px) {
  .ws-editor-group-III-series {
	flex-direction: row;
	/* flex-wrap: wrap; */ 
	gap: clamp(15px, 2vw, 20px);
  }
}

@media (min-width: 993px) {
  .ws-editor-group-III-series {
	gap: clamp(20px, 2vw, 25px);
  }
}

@media (min-width: 1201px) {
  .ws-editor-group-III-series {
	gap: clamp(25px, 2.5vw, 30px);
  }
}

@media (min-width: 1401px) {
  .ws-editor-group-III-series {
	gap: clamp(30px, 3vw, 40px);
  }
}
/* ============================== end ============================== */




/* ===== ws-editor-group-V (new 5-editor group) ===== */
.ws-editor-group-V {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 100px;
  flex-direction: column;
  justify-content: center !important;
  gap: 50px;
}

@media (min-width: 769px) {
  .ws-editor-group-V {
	flex-direction: row;
	flex-wrap: wrap;
	gap: clamp(15px, 1.5vw, 18px);
  }
}

@media (min-width: 993px) {
  .ws-editor-group-V {
	gap: clamp(18px, 1.8vw, 22px);
  }
}

@media (min-width: 1201px) {
  .ws-editor-group-V {
	flex-wrap: nowrap;
	gap: clamp(20px, 2vw, 25px);
  }
}

@media (min-width: 1401px) {
  .ws-editor-group-V {
	gap: clamp(22px, 2.2vw, 28px);
  }
}

/* ============================== end ============================== */


/* ===== ws-editor-pair (new container for main + date editor) ===== */
.ws-editor-pair {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 80%;
  margin: 0 auto 50px;
}

@media (min-width: 769px) {
  .ws-editor-pair {
	width: 45%;
	margin-bottom: 0;
  }
}

@media (min-width: 993px) {
  .ws-editor-pair {
	width: 30%;
  }
}

@media (min-width: 1201px) {
  .ws-editor-pair {
	width: 20%;
  }
}

/* ============================== end ============================== */




/* ===== ws-editor-container ===== 


*/

.ws-editor-container {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.ws-editor-container.topics-45 { 
	margin-left: auto;
	margin-right: auto;
}
.ws-editor-container.topics-22 { 
	margin: 0 auto 150px auto;
	width: 80%; 
}
.ws-editor-container.width-30 { width: 80%; margin-bottom: 50px; }
.ws-editor-container.width-20 { width: 80%; margin-bottom: 50px; }

.ws-editor-container.ws-editor-main { width: 100%; margin-bottom: 0; }
.ws-editor-container.ws-editor-date { width: 100%; margin-bottom: 0; }

@media (min-width: 769px) {
  .ws-editor-container {
	margin-left: inherit; 
	margin-right: inherit;
	/* flex-direction: row; */ 
	/* flex-wrap: wrap; */
	/* justify-content: center; */
  }
  .ws-editor-container.width-20 { width: 45%; }
  .ws-editor-container.topics-22 { width: 50%; }
  .ws-editor-container.width-30 { width: 40%; }
  .ws-editor-container.width-33 { width: 40%; }
  .ws-editor-container.width-50 { width: 90%; }
  .ws-editor-container.width-67 { width: 90%; }
}

@media (min-width: 993px) { 
	.ws-editor-container.width-20 { width: 30%; }
	.ws-editor-container.topics-22 { width: 40%; }
	.ws-editor-container.width-30 { width: 30%; }
	.ws-editor-container.topics-45 { width: 60%; }
}

@media (min-width: 1201px) {
  .ws-editor-container.center {
	margin: 0 auto 30px;
  }
  .ws-editor-container.topics-22 {
	width: 22%;
  }
  .ws-editor-container.width-20 { width: 20%; }
  .ws-editor-container.width-30 { width: 30%; }
  .ws-editor-container.width-33 {
	width: 33%;
	position: sticky !important;
	top: 9px;
	align-self: flex-start;
  }
  .ws-editor-container.width-40 { 
	  width: 40%;
	  margin: 0 auto 40px auto;
  }
  .ws-editor-container.width-45 { 
	  margin: 0 auto 40px auto;
	}
  .ws-editor-container.width-50 {
	width: 50%;
	position: sticky !important;
	top: 9px;
	align-self: flex-start;
  }
  .ws-editor-container.width-60 { width: 60%; }
  .ws-editor-container.video-60 {
	width: 60%;
	margin: 0 auto;
  }
  .ws-editor-container.width-67 { width: 67%; }
  .ws-editor-container.width-100 { width: 100%; }
  .ws-editor-container.video-100 {
	width: 100%;
	margin: 0 auto 50px auto;
  }
}

@media (min-width: 1401px) {	
}

/* ============================== end ============================== */






/* ws-editor-group-III-feedback




*/

.ws-editor-group-III-feedback {
	display: grid;
	grid-template-columns: 5% 30% 60% auto;
	column-gap: 0px;
	row-gap: 5px;
	width: 100%;
	box-sizing: border-box;
	
	/* Hidden state */
	opacity: 0;
	max-height: 0;
	transform: scaleY(0);
	transform-origin: top;
	overflow: hidden;
	
	/* Transitions */
	transition: opacity 0.4s ease, max-height 0.4s ease, transform 0.4s ease;
}

.ws-editor-group-III-feedback.visible {
	opacity: 1;
	max-height: 5000px; 
	margin-bottom: 150px;
	padding-bottom: 50px;
	transform: scaleY(1);
}

.ws-editor-group-III-feedback .ws-editor-container {
	width: 100%;
	box-sizing: border-box;
}

.ws-editor-group-III-feedback form:nth-of-type(1) {
	grid-column: 2; 
	grid-row: 1 / span 2; /* spans two rows */
}

.ws-editor-group-III-feedback form:nth-of-type(2) {
	grid-column: 3; 
	grid-row: 1;
}

.ws-editor-group-III-feedback form:nth-of-type(3) {
	grid-column: 3;
	grid-row: 2;
}

.ws-editor-group-III-feedback form:nth-of-type(4) {
	grid-column: 3;
	grid-row: 3;
}

.ws-editor-group-III-feedback form:nth-of-type(5) {
	grid-column: 3;
	grid-row: 4;
}

/* min-width: 1401px — Desktop XL and above */
@media (min-width: 1401px) {
  .ws-editor-group-III-feedback {
	grid-template-columns: 5% 30% 60% auto;
  }
}

/* max-width: 1400px and min-width: 1201px — Desktop */
@media (max-width: 1400px) and (min-width: 1201px) {
  .ws-editor-group-III-feedback {
	grid-template-columns: 5% 35% 55% auto;
	/* Optional tweaks */
  }
}

/* max-width: 1200px and min-width: 993px — Tablet landscape */
@media (max-width: 1200px) and (min-width: 993px) {
  .ws-editor-group-III-feedback {
	grid-template-columns: 5% 40% 50% auto;
	row-gap: 10px;
  }
}

/* max-width: 992px and min-width: 769px — Tablet portrait */
@media (max-width: 992px) and (min-width: 769px) { 
	.ws-editor-group-III-feedback {
		grid-template-columns: 1fr; /* stack vertically */
	}
	
	.ws-editor-group-III-feedback form:nth-of-type(1) {
		margin-bottom: 30px;
	}
	
	.ws-editor-group-III-feedback form:nth-of-type(1),
	.ws-editor-group-III-feedback form:nth-of-type(2),
	.ws-editor-group-III-feedback form:nth-of-type(3),
	.ws-editor-group-III-feedback form:nth-of-type(4),
	.ws-editor-group-III-feedback form:nth-of-type(5) {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 768px) {
	.ws-editor-group-III-feedback {
		display: grid;
		grid-template-columns: 1fr; 
		row-gap: 15px;
		padding: 0 10px;
	}
	
	.ws-editor-group-III-feedback form:nth-of-type(1) {
		margin-bottom: 20px;
	}
	
	.ws-editor-group-III-feedback form:nth-of-type(1),
	.ws-editor-group-III-feedback form:nth-of-type(2),
	.ws-editor-group-III-feedback form:nth-of-type(3),
	.ws-editor-group-III-feedback form:nth-of-type(4),
	.ws-editor-group-III-feedback form:nth-of-type(5) {
		grid-column: 1;
		grid-row: auto;
		width: 100%;
	}
  
}



/* ws-editor-group-VI-drafts


*/

.ws-editor-group-VI-drafts {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  max-height: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.75s ease, max-height 0.75s ease, transform 0.75s ease;
}

.ws-editor-group-VI-drafts.visible {
  margin-bottom: 150px;
  padding-bottom: 50px;
  opacity: 1;
  max-height: 10000px;
  transform: scaleY(1);
  transition: opacity 1.5s ease, max-height 1.5s ease, transform 1.5s ease;
}

/* editor-group left+right : these are children to .ws-editor-group-VI-drafts */
.editor-group-left {
 display: flex;
 flex-direction: column;
 gap: 0px;
}
.editor-group-right {
 display: flex;
 flex-direction: column;
 gap: 0px;
 opacity: 0;
 max-height: 0;
 transition: opacity 0.75s ease, max-height 0.75s ease;
}
.editor-group-right.visible {
 opacity: 1;
 transition: opacity 1.5s ease, max-height 1.5s ease;
 max-height: 5000px;
}
/* */

.ws-editor-group-VI-drafts form {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 1201px) {
  .ws-editor-group-VI-drafts {
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
  }

  .editor-group-left,
  .editor-group-right {
	width: 100%;
	margin-top: 0;
  }
}

@media (max-width: 992px) {
  .ws-editor-group-VI-drafts {
	grid-template-columns: 1fr;
	row-gap: 30px;
  }

  .editor-group-left,
  .editor-group-right {
	align-items: center;
	width: 100%;
	margin-top: 0;
  }
  
  .editor-draft {
	  width: 100%;
	}
  
	.editor-draft form {
	  width: 100%;
	  min-width: 0; /* prevent over-expansion */
	}
}




/*
.ws-editor-group-IV-dialogue left & right



*/

/* Initial hidden state */
.ws-editor-group-IV-dialogue-left,
.ws-editor-group-IV-dialogue-right {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  max-height: 0;
  /* margin-bottom: 100px; */ /* moved to visible 20250508 1542 */
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.75s ease, max-height 0.75s ease, transform 0.75s ease;
}

/* Visible state triggered by JS */
.ws-editor-group-IV-dialogue-left.visible,
.ws-editor-group-IV-dialogue-right.visible {
  opacity: 1;
  max-height: 5000px; /* large enough to handle your content */
  margin-bottom: 100px; /* moved to visible 20250508 1542 */
  transform: scaleY(1);
  transition: opacity 1.5s ease, max-height 1.5s ease, transform 1.5s ease;
}

@media (min-width: 1201px) {
  .ws-editor-group-IV-dialogue-left {
	position: relative;
	left: 5%;
	width: 70%;
  }

  .ws-editor-group-IV-dialogue-right {
	position: relative;
	left: 25%;
	width: 70%;
  }
}

@media (max-width: 1200px) {
  .ws-editor-group-IV-dialogue-left,
  .ws-editor-group-IV-dialogue-right {
	position: relative;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
  }

  .ws-editor-group-IV-dialogue-left {
	max-width: 800px;
	align-items: flex-start;
  }

  .ws-editor-group-IV-dialogue-right {
	max-width: 800px;
	align-items: flex-end;
  }
}

/* Remove default centering behavior from all editors inside left/right groups */
.ws-editor-group-IV-dialogue-left .editor-dialogue,
.ws-editor-group-IV-dialogue-right .editor-dialogue {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

/* LEFT group: align all editors to the left */
.ws-editor-group-IV-dialogue-left {
  align-items: flex-start;
}

/* RIGHT group: align all editors to the right */
.ws-editor-group-IV-dialogue-right {
  align-items: flex-end;
}

/* Second and fourth editors — reduce width to 60% */
.ws-editor-group-IV-dialogue-left .editor-dialogue:nth-of-type(2),
.ws-editor-group-IV-dialogue-left .editor-dialogue:nth-of-type(3),
.ws-editor-group-IV-dialogue-left .editor-dialogue:nth-of-type(4),
.ws-editor-group-IV-dialogue-right .editor-dialogue:nth-of-type(2),
.ws-editor-group-IV-dialogue-right .editor-dialogue:nth-of-type(3),
.ws-editor-group-IV-dialogue-right .editor-dialogue:nth-of-type(4) {
  width: 70% !important;
}





/*
.ws-editor-group-IV-presenting



*/

/* Initial hidden state */
.ws-editor-group-IV-presenting {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  max-height: 0;
  /* margin-bottom: 100px; */ /* 20250508 1533 */
  
  /*
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.75s ease, max-height 0.75s ease, transform 0.75s ease;
  */
  
  overflow: hidden; /* Add this to clip content while collapsing */
  transition: opacity 0.75s ease, max-height 0.75s ease;
  
}

/* Visible state triggered by JS */
.ws-editor-group-IV-presenting.visible {
  opacity: 1;
  max-height: 5000px; /* large enough to handle your content */
  margin-bottom: 100px; /* 20250508 1533 */
  
  /*
  transform: scaleY(1);
  transition: opacity 1.5s ease, max-height 1.5s ease, transform 1.5s ease;
  */
  
  transition: opacity 1.5s ease, max-height 1.5s ease;
  
}

@media (min-width: 1201px) {
  .ws-editor-group-IV-presenting {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
  }
}

@media (max-width: 1200px) {
  .ws-editor-group-IV-presenting {
	position: relative;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
  }
}

.ws-editor-group-IV-presenting .editor-presenting:nth-of-type(2),
.ws-editor-group-IV-presenting .editor-presenting:nth-of-type(3),
.ws-editor-group-IV-presenting .editor-presenting:nth-of-type(4) {
  width: 60% !important;
}




/*
.ws-editor-group-VI-shuffle



*/

/* Initial hidden state */
.ws-editor-group-VI-shuffle {
  display: flex;
  flex-direction: column;
  gap: 0px;
  box-sizing: border-box;
  opacity: 1;
  margin-bottom: 150px;
  max-height: 5000px;
}

@media (min-width: 1201px) {
  .ws-editor-group-VI-shuffle {
	position: relative;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
  }
}

@media (max-width: 1200px) {
  .ws-editor-group-VI-shuffle {
	position: relative;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
  }
}

.ws-editor-group-VI-shuffle .editor-shuffle:nth-of-type(2) {
  width: 80% !important;
}

.ws-editor-group-VI-shuffle .editor-shuffle:nth-of-type(3),
.ws-editor-group-VI-shuffle .editor-shuffle:nth-of-type(4),
.ws-editor-group-VI-shuffle .editor-shuffle:nth-of-type(5),
.ws-editor-group-VI-shuffle .editor-shuffle:nth-of-type(6) {
  width: 60% !important;
}




/* EDITORS 
/* EDITORS 
/* EDITORS 
/* EDITORS 
/* EDITORS 
/* EDITORS 
/* EDITORS 
/* EDITORS 
/* EDITORS 
/* EDITORS 
/* EDITORS 
*/



/* editor-draft 


*/

.editor-draft {
  opacity: 0;
  max-height: 0;
  transform: scaleY(0);
  transition: all 0.3s ease;
}

.editor-draft.visible {
  opacity: 1;
  max-height: 10000px; 
  transform: scaleY(1);
}

.editor-group-right,
.editor-draft {
  overflow: visible;
}




/* editor-practice 


*/

.astroid-article-text .editor-practice {
	width: 90%;
	max-width: 100%; /* for large screens; control other widths with media queries */
	margin: 0 auto; /* Centers the editor */
	margin-bottom: 0px;
	position: relative;
}

/* Ensure full width on mobile 
@media (max-width: 768px) {
	.editor-practice {
		max-width: 100% !important; 
	}
}
*/

.editor-practice {
  opacity: 0;
  max-height: 0;
  transform: scaleY(0);
  transition: all 0.3s ease;
}

.editor-practice.visible {
  opacity: 1;
  max-height: 1000px; 
  transform: scaleY(1);
}

.editor-practice .editor-label {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

.editor-practice .editor-label-import-ext {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

/* Special styling when the button is above the textarea */
.editor-practice .save-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
	width: 100%;
}
.editor-practice .archive-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
}

/* Textarea styling */
.editor-practice textarea {
	display: block; /* Stack correctly */
	width: 100%; 
	margin-top: 10px;
}



/* editor-dialogue 


*/

.astroid-article-text .editor-dialogue {
	width: 90%;
	max-width: 100%; /* for large screens; control other widths with media queries */
	margin: 0 auto; /* Centers the editor */
	margin-bottom: 0px;
	position: relative;
}

/* Ensure full width on mobile 
@media (max-width: 768px) {
	.editor-dialogue {
		max-width: 100% !important; 
	}
}
*/

.editor-dialogue {
  opacity: 0;
  max-height: 0;
  transform: scaleY(0);
  transition: all 0.3s ease;
}

.editor-dialogue.visible {
  opacity: 1;
  max-height: 1000px; 
  transform: scaleY(1);
}

.editor-dialogue .editor-label {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

.editor-dialogue .editor-label-import-ext {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

/* Special styling when the button is above the textarea */
.editor-dialogue .save-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
	width: 100%;
}
.editor-dialogue .archive-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
}

/* Textarea styling */
.editor-dialogue textarea {
	display: block; /* Stack correctly */
	width: 100%; 
	margin-top: 10px;
}


/* editor-presenting 


*/

.astroid-article-text .editor-presenting {
	width: 90%;
	max-width: 100%; /* for large screens; control other widths with media queries */
	margin: 0 auto; /* Centers the editor */
	margin-bottom: 0px;
	position: relative;
}

/* Ensure full width on mobile 
@media (max-width: 768px) {
	.editor-presenting {
		max-width: 100% !important; 
	}
}
*/

.editor-presenting {
  opacity: 0;
  max-height: 0;
  transform: scaleY(0);
  transition: all 0.3s ease;
}

.editor-presenting.visible {
  opacity: 1;
  max-height: 1000px; 
  transform: scaleY(1);
}

.editor-presenting .editor-label {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

.editor-presenting .editor-label-import-ext {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

/* Special styling when the button is above the textarea */
.editor-presenting .save-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
	width: 100%;
}
.editor-presenting .archive-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
}

/* Textarea styling */
.editor-presenting textarea {
	display: block; /* Stack correctly */
	width: 100%; 
	margin-top: 10px;
}



/* editor-shuffle


*/

.astroid-article-text .editor-shuffle {
	width: 90%;
	max-width: 100%; /* for large screens; control other widths with media queries */
	margin: 0 auto; /* Centers the editor */
	margin-bottom: 0px;
	position: relative;
}

/* Ensure full width on mobile 
@media (max-width: 768px) {
	.editor-presenting {
		max-width: 100% !important; 
	}
}
*/

.editor-shuffle {
  opacity: 0; /* to change to 0 for JS */ 
  max-height: 0; /* to change to 0 for JS */
  transform: scaleY(0); */ 
  transition: all 0.3s ease;
}

.editor-shuffle.visible {
  opacity: 1;
  max-height: 1000px; 
  transform: scaleY(1);
}

.editor-shuffle .editor-label {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

.editor-shuffle .editor-label-import-ext {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

/* Special styling when the button is above the textarea */
.editor-shuffle .save-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
	width: 100%;
}
.editor-shuffle .archive-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
}

/* Textarea styling */
.editor-shuffle textarea {
	display: block; /* Stack correctly */
	width: 100%; 
	margin-top: 10px;
}




/* editor-form-small  

*/

.astroid-article-text .editor-form-small {
	width: 80%;
	max-width: 60%; /* for large screens; control other widths with media queries */
	margin: 0 auto; /* Centers the editor */
	margin-bottom: 100px;
	position: relative;
}

.astroid-article-text .editor-form-small-right {
	width: 80%;
	max-width: 60%; 
	margin: 0 auto; 
	margin-bottom: 100px;
	position: relative;
	align-self: flex-end !important; 
}

/* Ensure full width on mobile */
@media (max-width: 768px) {
	.editor-form-small {
		max-width: 80% !important; 
	}
}
.editor-form-small .editor-label {
	display: block; 
	clear: both; 
}

.editor-form-small .editor-label-import-ext {
	display: block; 
	clear: both; 
}

/* Special styling when the button is above the textarea */
.editor-form-small .save-button {
	display: block; 
	margin-bottom: 10px; 
	margin-left: auto; 
	margin-right: 5px; 
	clear: both; 
	width: 100%;
}
.editor-form-small .archive-button {
	display: block; 
	margin-bottom: 10px; 
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; 
	clear: both; /* Prevents it from being affected by floated elements */
}

/* Textarea styling */
.editor-form-small textarea {
	display: block; /* Stack correctly */
	width: 100%; 
	margin-top: 10px;
}


/* editor-title  */
/* editor-title  */
/* editor-title  */

.astroid-article-text .editor-title {
	width: 70%;
	max-width: 45%; /* Restricts width on larger screens */
	margin: 0 auto; /* Centers the editor */
	margin-bottom: 200px;
	position: relative;
}

/* Ensure full width on mobile */
@media (max-width: 992px) {
	.editor-title {
		max-width: 55% !important; /* Full width on smaller screens */
	}
}

/* Ensure full width on mobile */
@media (max-width: 768px) {
	.editor-title {
		max-width: 80% !important; /* Full width on smaller screens */
	}
}

.editor-title .label-button-container {
	display: flex;
	justify-content: center !important; /* center child elements horizontally */
	align-items: center; /* (optional) vertically align in the center */
	gap: 10px; /* (optional) space between label and button if both visible */
	margin-bottom: 0px !important;
}

.editor-title .editor-label {
	display: block; /* fine to leave */
	clear: both; /* fine to leave */
}

.editor-title .editor-label {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

.editor-title .tox-editor-header {
  box-shadow: none !important;
}


.editor-title .editor-label-import-ext {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

/* Special styling when the button is above the textarea */
.editor-title .save-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
	width: 100%;
}
.editor-title .archive-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
}

/* Textarea styling */
.editor-title textarea {
	display: block; /* Stack correctly */
	width: 100%; 
	margin-top: 10px;
}

.editor-title .tox-tinymce {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	/* border-bottom: 2px solid rgb(34, 47, 62) !important; */
	/* border-bottom: 2px solid rgba(40, 167, 69, 1) !important; */
	border-bottom: 2px solid rgba(34, 47, 62, 1) !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	/* transition: all 0.3s ease; */
}

/* Override TinyMCE height on mobile for editor-title */

@media (max-width: 370px) {
	.editor-title .tox.tox-tinymce {
		height: 220px !important;
		max-height: 220px !important;
	}
}

@media (max-width: 520px) {
	.editor-title .tox.tox-tinymce {
		height: 120px !important;
		max-height: 120px !important;
	}
}

@media (max-width: 768px) {
	.editor-title .tox.tox-tinymce {
		height: 140px !important;
		max-height: 140px !important;
	}
}

/* For tablets */
@media (max-width: 992px) and (min-width: 769px) {
	.editor-title .tox.tox-tinymce {
		height: 100px !important;
		max-height: 100px !important;
	}
}

@media (min-width: 993px) {
	.editor-title .tox.tox-tinymce {
		height: 100px !important;
		max-height: 100px !important;
	}
}




/* editor-title-dialogue  */
/* editor-title-dialogue  */
/* editor-title-dialogue  */

.astroid-article-text .editor-title-dialogue {
	width: 70%;
	max-width: 50%; /* Restricts width on larger screens */
	margin: 0; /* Centers the editor */
	margin-bottom: 200px;
	position: relative;
}

/* Ensure full width on mobile */
@media (max-width: 992px) {
	.editor-title-dialogue {
		max-width: 55% !important; /* Full width on smaller screens */
	}
}

/* Ensure full width on mobile */
@media (max-width: 768px) {
	.editor-title-dialogue {
		max-width: 80% !important; /* Full width on smaller screens */
	}
}

.editor-title-dialogue .label-button-container {
	display: flex;
	justify-content: center !important; /* center child elements horizontally */
	align-items: center; /* (optional) vertically align in the center */
	gap: 10px; /* (optional) space between label and button if both visible */
	margin-bottom: 0px !important;
}

.editor-title-dialogue .editor-label {
	display: block; /* fine to leave */
	clear: both; /* fine to leave */
}

.editor-title-dialogue .editor-label {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

.editor-title-dialogue .tox-editor-header {
  box-shadow: none !important;
}

.editor-title-dialogue .editor-label-import-ext {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

/* Special styling when the button is above the textarea */
.editor-title-dialogue .save-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
	width: 100%;
}
.editor-title-dialogue .archive-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
}

/* Textarea styling */
.editor-title-dialogue textarea {
	display: block; /* Stack correctly */
	width: 100%; 
	margin-top: 10px;
}

.editor-title-dialogue .tox-tinymce {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	/* border-bottom: 2px solid rgb(34, 47, 62) !important; */
	border-bottom: 2px solid rgba(40, 167, 69, 1) !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	/* transition: all 0.3s ease; */
}

/* Override TinyMCE height on mobile for editor-title */

@media (max-width: 370px) {
	.editor-title-dialogue .tox.tox-tinymce {
		height: 220px !important;
		max-height: 220px !important;
	}
}

@media (max-width: 520px) {
	.editor-title-dialogue .tox.tox-tinymce {
		height: 120px !important;
		max-height: 120px !important;
	}
}

@media (max-width: 768px) {
	.editor-title-dialogue .tox.tox-tinymce {
		height: 100px !important;
		max-height: 100px !important;
	}
}

/* For tablets */
@media (max-width: 992px) and (min-width: 769px) {
	.editor-title-dialogue .tox.tox-tinymce {
		height: 110px !important;
		max-height: 110px !important;
	}
}

@media (max-width: 1200px) and (min-width: 993px) {
	.editor-title-dialogue .tox.tox-tinymce {
		height: 120px !important;
		max-height: 120px !important;
	}
}



/* editor-form-thin  */
/* editor-form-thin  */
/* editor-form-thin  */

.astroid-article-text .editor-form-thin {
	width: 70%;
	max-width: 40%; /* Restricts width on larger screens */
	margin: 0 auto; /* Centers the editor */
	margin-bottom: 100px;
	position: relative;
}

/* Ensure full width on mobile */
@media (max-width: 992px) {
	.editor-form-thin {
		max-width: 55% !important; /* Full width on smaller screens */
	}
}

/* Ensure full width on mobile */
@media (max-width: 768px) {
	.editor-form-thin {
		max-width: 80% !important; /* Full width on smaller screens */
	}
}
.editor-form-thin .editor-label {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

.editor-form-thin .editor-label-import-ext {
	display: block; /* Ensure it's treated as a block element */
	clear: both; /* Prevent interaction with floated or positioned elements */
}

/* Special styling when the button is above the textarea */
.editor-form-thin .save-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
	width: 100%;
}
.editor-form-thin .archive-button {
	display: block; /* Ensures it's treated as a block element */
	margin-bottom: 10px; /* Space below the button */
	margin-left: auto; /* Pushes it to the right */
	margin-right: 5px; /* Align to the right */
	clear: both; /* Prevents it from being affected by floated elements */
}


/* Textarea styling */
.editor-form-thin textarea {
	display: block; /* Stack correctly */
	width: 100%; 
	margin-top: 10px;
}


#archive {
	scroll-margin-top: 100px; /* Adjust this based on the height of your floating toolbar */
}






/* editor-form-medium 


  */


/* 20250105 */
/* added flex properties as float approach was leading to archive margin-top not working */

.editor-form-medium-left {
	display: block;
	width: 90%;
	max-width: 80%;
	margin: 0; 
	margin-bottom: 50px;
	align-self: flex-start; 
}

.editor-form-medium {
	width: 90%;
	min-width: 50%;
	max-width: 80%; 
	margin: 0 auto; 
	margin-bottom: 50px;
}

.editor-form-medium-right {
	display: block;
	width: 90%;
	max-width: 80%;
	margin: 0; 
	margin-bottom: 50px;
	align-self: flex-end; 
}

.editor-form-medium-right .save-button {
  float: right;
}

.editor-form-medium-right .archive-button {
  float: right;
}

@media (max-width: 768px) {
	.editor-form-medium-left {
		max-width: 95%; 
	}
	.editor-form-medium {
		max-width: 95%; 
	}
	.editor-form-medium-right {
		max-width: 95%; 
	}
}

/* editor-form-large 


*/

.editor-form-large {
	width: 100%;
	max-width: 100%; 
	margin: 0 auto; 
	clear: both;
	margin-bottom: 100px;
}

@media (max-width: 768px) {
	.editor-form-large {
		max-width: 95%; 
	}
}












/* MENU MEDIA QUERIES









*/



/* This keeps two items visible in the header horizontal menu, even at low widths. Added the horizontal menu specificity so as not to affect the footer menus with the same classes. 20241130 */


@media (min-width: 1401px) {
	nav[aria-label="horizontal menu"],
	nav[aria-label="sticky menu"] {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+8),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+8) {
		display: block !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+8) a,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+8) a {
		display: inline !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+8) a span,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+8) a span {
		display: inline !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(n+9),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(n+9) {
		display: none !important;
	}
}

@media (max-width: 1400px) {
	nav[aria-label="horizontal menu"],
	nav[aria-label="sticky menu"] {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+7),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+7) {
		display: block !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+7) a,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+7) a {
		display: inline !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+7) a span,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+7) a span {
		display: inline !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(n+8),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(n+8) {
		display: none !important;
	}
}

@media (max-width: 1200px) {
	nav[aria-label="horizontal menu"],
	nav[aria-label="sticky menu"] {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+6),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+6) {
		display: block !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+6) a,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+6) a {
		display: inline !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+6) a span,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+6) a span {
		display: inline !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(n+7),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(n+7) {
		display: none !important;
	}
}

@media (max-width: 992px) {
	nav[aria-label="horizontal menu"],
	nav[aria-label="sticky menu"] {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+3),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+3) {
		display: block !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+3) a,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+3) a {
		display: inline !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+3) a span,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+3) a span {
		display: inline !important;
	}
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(n+4),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(n+4) {
		display: none !important;	
	}
	
	#astroid-sticky-header .astroid-nav-wraper {
		padding-right: 8px !important;
		padding-left: 8px !important;
	}
}

@media (max-width: 768px) {
	nav[aria-label="horizontal menu"],
	nav[aria-label="sticky menu"] {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	nav[aria-label="horizontal menu"] ul.nav.astroid-nav,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Show only the first two list items */
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+3),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+3) {
		display: block !important;
	}

	/* Make links and spans in the first two list items visible */
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+3) a,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+3) a {
		display: inline !important;
	}

	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+3) a span,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+3) a span {
		display: inline !important;
	}

	/* Hide the span inside the first child */
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:first-child > span,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:first-child > span {
		display: none !important;
	}

	/* Hide all items from the 3rd onwards */
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(n+4),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(n+4) {
		display: none !important;
	}
	
	#astroid-sticky-header .offcanvas-button {
		margin-left: 0px !important;
	}
	
	#astroid-sticky-header .astroid-nav-wraper {
		padding-right: 8px !important;
		padding-left: 8px !important;
	}
	
}

@media (max-width: 525px) {
	nav[aria-label="horizontal menu"],
	nav[aria-label="sticky menu"] {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	nav[aria-label="horizontal menu"] ul.nav.astroid-nav,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: right; /* was center until 20250119. Changed so that items hug button when vertically wrapped */
	}

	/* Show only the first two list items */
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+2),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+2) {
		display: block !important;
	}

	/* Make links and spans in the first two list items visible */
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+2) a,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+2) a {
		display: inline !important;
	}

	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(-n+2) a span,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(-n+2) a span {
		display: inline !important;
	}

	/* Hide the span inside the first child, ie the username */
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:first-child > span,
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:first-child > span {
		display: none !important;
	}

	/* Hide all items from the 3rd onwards */
	nav[aria-label="horizontal menu"] ul.nav.astroid-nav li:nth-child(n+3),
	nav[aria-label="sticky menu"] ul.nav.astroid-nav li:nth-child(n+3) {
		display: none !important;
	}
	
	#astroid-sticky-header .offcanvas-button {
		margin-left: 0px !important;
	}
	
	#astroid-sticky-header .astroid-nav-wraper {
		padding-right: 8px !important;
		padding-left: 8px !important;
	}
}



/* FOOTER */
/* FOOTER */
/* FOOTER */

/* Ensures menus stay visiible at all sceen widths. On a high enough parent that it overides any of the template's display: none settings for any children*/
[class^="footer-"][class*="-position"] .astroid-nav-wraper {
	display: flex !important;
}


/* This query controls footer menu order on <992 widths. Each of the astroid-column rows has two footer modules, so you can only order the modules in pairs. */
  
@media (max-width: 992px) {
	/* Make parent rows flex containers */
	#ar-6278e98aed30e865832490, 
	#ar-6278e9413f4ef873355461 {
	  display: flex;
	  flex-wrap: wrap; /* Allow items to wrap */
	  flex-direction: column; /* Stack items vertically */
	}
  
	/* Reorder the columns */
	#ac-6278e98aed30e843357414 { /* Column for Footer 1 */
	  order: 1;
	}
	#ac-6278e98aed30e828589492 { /* Column for Footer 2 */
	  order: 2;
	}
	#ac-6278e9413f4ef85137989 { /* Column for Footer 3 */
	  order: 2;
	}
	#ac-6278e9413f4ef857058293 { /* Column for Footer 4 */
	  order: 1;
	}
  }



/* 
  Booking Widget 
  
  
  
  
  
  
  
  
  */
  
  .floating-widget {
	position: fixed;
	bottom: 25px;
	z-index: 1000;
	transition: bottom 0.3s ease;
	padding: 14px 21px;
	font-size: 16px;
	font-weight: 500;
	color: rgb(20, 30, 47);
	background-color: #ffca00;
	border: none;
	cursor: pointer;
	border-radius: 200px;
	text-decoration: none;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  
  .floating-widget.left {
	left: 120px;
  }
  
  .floating-widget.right {
	right: 120px;
  }
  
  .floating-widget svg {
	vertical-align: middle;
	margin-right: 12px;
	margin-top: -6px;
	width: 30px;
	height: 30px;
  }
  
  .floating-widget:hover {
	color: #f5f5f5;
  }
  
  .floating-widget:hover svg {
	stroke: #f5f5f5;
  }