/***************************************
  SECTION 1  
***************************************/

/*	Background setting for whole page */
body
{
	background-color: #FFFFFF;
}

/* Question outer table- matches "body" color above. */
.outer_table 
{
	background-color: #FFFFFF;
}





/***************************************
	SECTION 2  
***************************************/

/* Setting for whole page */
body
{
	font-family: verdana;
	font-size: 12px;
	text-align: left;
	color: #000000;
	background-color: #ffffff;
}

/* Survey Header 1 */
.header1
{
	padding-bottom: 10px;
}

.header1 h1
{
	font-family: verdana;
	font-size: 24px;
	color: #000000;
	text-align: center;
	margin-top: 20px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 10px;
}

.header1 hr
{
	height: 1px; 
	border: none; 
	background-color: #990000;
	text-align: center;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Survey Header 2 */
.header1 h2
{
	font-family: verdana;
	font-size: 18px;
	color: #000000;
	text-align: center;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Survey Header 3 */
.header1 h3
{
	font-family: verdana;
	font-size: 12px;
	color: #000000;
	text-align: center;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 30px;
	margin-bottom: 10px;
}

.verbage
{
	margin-left: 50px !important; 
	margin-right: 50px !important;
}

.verbage h1
{
	text-align: center;
	font-size: 24px;
}

.verbage h2
{
	text-align: center;
	font-size: 18px;
}

.verbage h3
{
	text-align: justify;
	font-size: 12px;
}

/* links */
a
{
        color: #990000;
}

a:hover,.footer a:focus,.footer a:active
{
	color:#BB0000 !important
}

#submit_button2
{
	padding-top: 30px;
	padding-bottom: 30px !important;
}

#submit_button input
{
	cursor: pointer;
	height: 40px;
	width: 133px;
	margin-top: 0px;
        background:transparent;
        color: #660000;
        font-family: veranda;
        font-size: 18px;
        font-weight: bold;
        font-style: italic;
	background-image: url(https://clu.mindfieldonline.com/assets/mindfield/images/sc_arrow.png);
        background-repeat: no-repeat;
        background-position: left, bottom;
        border: none;
}

/* Question outer table- rests inside ".question" area */
.outer_table 
{
	margin-left: auto; 
	margin-right: auto;
	border: 0px solid #cccccc;
}

@media (min-width:768px)
{
	.outer_table
	{
		-webkit-box-shadow:0 0 0 0 #000;
		-moz-box-shadow:0 0 0 0 #000;
		box-shadow:0 0 0 0 #000
	}
}

/*Question Footer 1*/
.footer1
{
        font-family: verdana;
	font-size: 12px;
	color: #000000;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}





/***************************************
	SECTION 3
***************************************/

.global_header td
{
}

.global_footer td
{
}





/***************************************
	SECTION 4 - Helps with screen size stuff
***************************************/

body
{
	margin: 0;
}

table
{
	border-collapse:collapse;
	border-spacing:0;
}

@media (min-width:768px)
{
	#detectBreakpoint
	{
		display:none;
	}
}

.survey-container, .survey-section
{
	text-align:center;
}

.survey-body, .page-header, .survey-header
{
	text-align:left
}

.survey-body
{
	min-height:200px
}

.survey-body, .page-header, .footer
{
	margin:0 auto;
	min-width:1100px;
	display:inline-block;
	vertical-align:top;
	max-width:100%
}

@media (max-width:768px)
{
	.survey-body, .page-header, .footer
	{
		display:block;
		min-width:0
	}
}

.logo, .comment, .survey-error, .survey-warning, .survey-info, .survey-extra-approval, .autosave-restart, .exit-message, .survey-buttons
{
	max-width:892px
}


.survey-page
{
	background-color:
	#fff;color:#000
}

@media (min-width:768px)
{
	.survey-page
	{
		padding:16px;
		background-color:#900
	}
}

.survey-body
{
	padding:1em 14px;
	background-color:#fff;
	position:relative;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

@media (min-width:768px)
{
	.survey-body
	{
		padding-left:18px;
		padding-right:18px;
		-webkit-box-shadow:0 0 15px 0 #000;
		-moz-box-shadow:0 0 15px 0 #000;
		box-shadow:0 0 15px 0 #000
	}
}

.survey-header
{
	margin-bottom:0em;
	min-height:1.5em
}

.logo
{
	margin-bottom:1em
}

.logo-left
{
	text-align:left
}

.logo-middle
{
	text-align:center
}

.logo-right
{
	text-align:right
}

.footer
{
	color:#000;
	font-size: 10px; 
	font-weight: bold; 
	font-family:'Helvetica Neue',sans-serif;
	text-align:center;
	margin:1em 0 1em 0 
}

.footer a
{
	color: #900 !important;
}

.footer a:hover, .footer a:focus, .footer a:active
{
	color:#B00 !important
}

@media (min-width:768px)
{
	.footer
	{
		font-size: 10px;
		font-weight: bold;
		color: white !important;
		font-family:'Helvetica Neue',sans-serif;
		text-align:center;
		margin:1em 0 0 0
	}
	.footer a
	{
		color: #F5F5DC !important;
	}
	.footer a:hover, .footer a:focus, .footer a:active
	{
		color:#FFFDD0 !important
	}
}





/***************************************
	SECTION 5 - Arrow Button + Text
***************************************/

/* 1. The container sets the boundary context */
.image-container
{
	position: relative;
	display: inline-block; /* Fits tightly around the image */
}

/* 2. Style the image to fit your container */
.image-container img 
{
	display: block;
}

/* 3. Absolutely position the text anywhere over the image */
.overlay-text 
{
	position: absolute;
	top: 50%;         /* Move down 50% from the top */
	left: 50%;        /* Move right 50% from the left */
	transform: translate(-50%, -50%); /* Perfectly center the text */
	transition: all 0.1s ease-in-out; /* Creates the smooth transition */

	/* Optional design styles for high readability */
	color: #990000;
	padding-right: 0px;
	cursor: pointer;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 18px;
	font-style: italic;
}

/* 4. Style the text to make it stand out more on hover */
.overlay-text:hover 
{
	color: #CC0000; /* A brighter, attention-grabbing red */
	transform: translate(calc(-50% + 1px), calc(-50% - 1px)); /* Floats the text slightly upward */
	text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Adds a professional glow/depth */
}





/***************************************
	SECTION 6 - Cloud, Gears, Money
***************************************/

@media (min-width: 850px)
{
	.page-layout-wrapper
	{
		grid-template-columns: 1.2fr 1fr !important;
		align-items: start;
	}
	
	.fineprint
	{
		color: #000000;
	}
}

/* Core layout for all gear wrappers */
.gear-instance
{
	pointer-events: none;
	transform-origin: center;
}

/* Color definitions (injects into the template's mesh) */
.gear-red 
{
	fill: #990000;
}
.gear-blue
{
	fill: #005599;
}
.gear-orange
{
	fill: #e67e22;
}
.gear-green
{
	fill: #27ae60;
}
.gear-purple
{
	fill: #8e44ad;
}
.gear-teal
{
	fill: #1abc9c;
}
.gear-pink
{
	fill: #fd79a8;
}
.gear-gold
{
	fill: #f1c40f;
}
.gear-coral
{
	fill: #ff7675;
}
.gear-emerald
{
	fill: #2ecc71;
}
.gear-indigo
{
	fill: #3f51b5;
}
.gear-magenta
{
	fill: #e84393;
}
.gear-black
{
	fill: #000000;
}

/* Spin Animations */
.spin-clockwise 
{
	animation: spinClockwise 2s linear infinite;
}

.spin-counter
{
	animation: spinCounterClockwise 2s linear infinite;
}

.spin-fast 
{
	animation-duration: 1.2s; 
}
.spin-med
{
	animation-duration: 2.1s; 
}
.spin-slow
{
	animation-duration: 4.5s;
}

/* Keyframes for Clockwise (0 to 360) */
@keyframes spinClockwise
{
	from 
	{
		transform: rotate(0deg); 
	}
	to
	{
		transform: rotate(360deg);
	}
}

/* Keyframes for Counter-Clockwise (360 to 0) */
@keyframes spinCounterClockwise 
{
	from 
	{
		transform: rotate(360deg); 
	}
	to
	{
		transform: rotate(0deg); 
	}
}

/* Layout and Hover code from previous steps */
.cloudcontainer
{
	position: relative;
	display: inline-block; /* Crucial: Prevents the container from stretching to 100% cell width */
	vertical-align: top;   /* Keeps the box locked tightly against the cell ceiling */
	margin-left: auto;   
	width: 100%;
	max-width: 318px;
	cursor: pointer;
}

.layer
{
	width: 100%;
	height: auto;
	display: block;
}

.top-image 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 1s ease-in-out;
	z-index: 2;
}

.cloudcontainer:hover .top-image 
{
	opacity: 0;
}

.scroll-container 
{
	width: 318px;          /* Adjust width as needed */
	height: 318px;        /* Set the visible height of your loop window */
	overflow: hidden;     /* Hides the images outside the box */
	position: relative;
}

.scroll-content 
{
	display: flex;
	flex-direction: column; /* Stacks images vertically */
	/* Animates the wrapper downwards, looping every 10 seconds */
	animation: roll-down 3s linear infinite;
}

.scroll-content img 
{
	width: 100%;
	height: 318px;        /* Must match the container height exactly */
	object-fit: cover;    /* Prevents image distortion */
}

.scroll-content2
{
	display: flex;
	flex-direction: column; /* Stacks images vertically */
	/* Animates the wrapper downwards, looping every 10 seconds */
	animation: roll-down 5s linear infinite;
}

.scroll-content2 img 
{
	width: 100%;
	height: 318px;        /* Must match the container height exactly */
	object-fit: cover;    /* Prevents image distortion */
}

@keyframes roll-down
{
	0%
	{
		transform: translateY(-50%); /* Starts halfway up with the second image visible */
	}
	100% 
	{
		transform: translateY(0%);   /* Moves down smoothly to the first image */
	}
}





/***************************************
	SECTION 7 - Cloud Listing
***************************************/

/* Base styles matching the portal's clean aesthetic */
.centering-container, .surveycloud-container 
{
	display: inline-block;
	vertical-align: middle; /* Prevents awkward baseline text alignment */
	horizontal-align: center; /* Prevents awkward baseline text alignment */
}

.centering-container 
{
	justify-content: center;   /* Centers your 318px div horizontally */
	align-items: center;       /* Centers your 318px div vertically */
	width: 100%;               /* Ensures full screen width */
	min-width: 318px; 
	max-width: 318px; 
	width: 318px; 
	margin: 0 auto;
}
 
.surveycloud-container 
{
	font-family: Arial, Helvetica, sans-serif;
	min-width: 520px;
	width: 50%;
	margin: 0px auto;
	padding: 0 30px 0 30px;
	right: 0;
	vertical-align: top;
	margin-top: 0px;
}

.surveycloud-header 
{
	color: #990000;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	padding-bottom: 10px 0;
}

/* Individual survey row styling */
.surveycloud-row 
{
	display: flex;
	flex-direction: column;
	border: 2px solid #ccc; /* Match your styling card boundaries */
	padding: 10px 0;
	border-radius: 6px;
	padding: 16px 16px;
	margin-bottom: 15px;
	align-items: center;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.surveycloud-row:hover 
{
	border-color: #0284c7;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Data columns */
.surveycloud-details 
{
	display: flex;
	text-align: left;
	gap: 20px;
	flex-grow: 1;
}

.surveycloud-meta 
{
	display: flex;
	flex-direction: column;
}

.meta-label 
{
	font-size: 11px;
	text-transform: uppercase;
	color: #64748b;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.meta-value 
{
	font-size: 15px;
	color: #990000;
	font-weight: 600;
}

/* Distinct accent color for the reward */
.meta-value.incentive 
{
	color: #0f766e; 
}

/* Responsive design for mobile devices */
@media (max-width: 768px) 
{
	.surveycloud-container
	{
		min-width: 520px;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.surveycloud-row 
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.surveycloud-btn 
	{
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* Responsive design for mobile devices */
@media (max-width: 1725px) 
{
	.surveycloud-container
	{
    		display: block;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.surveycloud-row 
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.surveycloud-btn 
	{
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	
	.centering-container 
	{
    		display: flex;
    	}
}

/* Move your previous row formatting (flex layout) to this main block wrapper */
.surveycloud-main 
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

/* Small inline icon button */
.expand-btn 
{
	background: none;
	border: none;
	color: #0066cc;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	margin-left: 0px;
	padding: 0 0px;
}

.expand-btn:hover 
{
	color: #003366;
}

/* Hidden container that spans full box width */
.surveycloud-drawer 
{
	display: none;
	text-align: left;
	background-color: #f9f9f9;
	border-radius: 4px;
	margin-top: 10px;
	padding: 12px;
	width: 100%;
	box-sizing: border-box;
}

.submit-button-container
{
	cursor: pointer;
	height: 40px;
	width: 133px;
	padding-left: 40px;
	padding-top: 0px;
	margin-top: 0px;
	margin-left: 0%;
        background:#f7f7f7;
        color: #660000;
        font-family: veranda;
        font-size: 18px;
        font-weight: bold;
        font-style: italic;
	background-image: url(https://mindfieldonline.com/images/graphics/sc_arrow.jpg);
        background-repeat: no-repeat;
        background-position: left, bottom;
        border: none;
}