.cta_button { background-color: ; color: white; border: solid 2px ; }
.cta_button:hover { background-color: white; border: solid 2px ; color: black; }

.cta_button_outline { background-color: white; color: black !important; color: ; border: solid 2px ; }
.cta_button_outline:hover { border: solid 2px ; background-color: ; color: white !important; }

.default_button { background-color: ; color: white; border: solid 2px ; }
.default_button:hover { background-color: white; border: solid 2px ; color: black; }

.default_button_outline { color: ; border: solid 2px ; }
.default_button_outline:hover { border: solid 2px ; background-color: ; color: white; }

/* JAMP shares the stop-button colors while its existing status is active. */
.default_close_button,
#controls_jamp_button[data-status="1"]
{
	background-color: #fa5a5a;
	color: white;
	border: solid 2px #fa5a5a;
}

.default_close_button:hover,
#controls_jamp_button[data-status="1"]:hover
{
	background-color: white;
	border: solid 2px #fa5a5a;
	color: black;
}

.white_button_outline { border: solid 2px white; color: white; }
.white_button_outline:hover { border: solid 2px ; background-color: white; color: black; }

.disabled_button,
.video_recording_start_button.btn-two[aria-disabled="true"]
{
	background-color: lightgrey;
	color: black;
	border: solid 2px lightgrey;
}

.disabled_button:hover,
.video_recording_start_button.btn-two[aria-disabled="true"]:hover
{
	background-color: white;
	border: solid 2px lightgrey;
	color: black;
}

.cta_text { color: ; }
.cta_bg { background-color: ; }

.button_cta { background: ; color: white; }
.button_cta:hover { background-color: #; }

.button_standard, .chat_display_container .message_user_title,
#client_tool_toolbar > #lightbar_menu,
.chat_display_container[data-message_from_title="client"] > summary
{
	background: ;
	color: white;
}
.button_standard:hover,
.chat_display_container[data-message_from_title="client"] > summary:hover
{
	background: ;
}

.btn.blue, .btn-two.blue { background-color: ;}
.btn.blue:hover, .btn-two.blue:hover { background-color: #;}

/* The enabled preparing action is the next step after the user chooses a save location. */
.btn.yellow,
.btn-two.yellow,
body:has(.video_recording_toggle[data-recording-state="preparing"]) .video_recording_start_button:enabled[aria-disabled="false"]
{
	background-color: ;
}

.btn.yellow:hover,
.btn-two.yellow:hover,
body:has(.video_recording_toggle[data-recording-state="preparing"]) .video_recording_start_button:enabled[aria-disabled="false"]:hover
{
	background-color: #;
}
.btn-two.cta { font-size: 110%; font-family: Mont; color: #67618F; }

.btn.grey, .btn-two.grey {background-color: ; }
.btn.grey:hover, .btn-two.grey:hover { background-color: #; }

.btn.green, .btn-two.green   {background-color: #81A666; color: #FFFFFF; }
.btn.green:hover, .btn-two.green:hover { background-color: #9ABF7F;}
.btn.purple, .btn-two.purple {background-color: #cb99c5;}
.btn.cyan, .btn-two.cyan     {background-color: #7fccde;}
.btn.orange, .btn-two.orange {background-color: #FFA500;}
.btn.white,
.btn-two.white,
.chat_display_container:not([data-message_from_title="client"]),
.chat_display_container[data-message_from_title="client"] > .chat_panel_body,
#client_tool_toolbar #flash_distress_button,
.google-acquisition-privacy,
.public_site_footer
{
	background-color: #FFFFFF;
	color: #000000;
}
/* Use the light toolbar for EMDR readout contrast without separate white boxes. */
#main_controls_container:has(#tool_id[value="2"]) #passes_timer,
#main_controls_container:has(#tool_id[value="2"]) #passes_counter_container
{
	background-color: transparent;
	color: #000000;
}
.chat_display_container,
.chat_display_container[data-message_from_title="client"] > .chat_panel_body
{
	border-color: ;
}
.btn.purple, .btn-two.purple {background-color: #67618F; color: #FFFFFF; }
.btn.blue-neon, .btn-two.blue-neon {background-color: #9CC5E3; color: #FFFFFF; }

.btn.red,
.btn-two.red,
.video_recording_toggle[data-recording-state="recording"],
.video_recording_toggle[data-recording-state="paused"]
{
	background-color: #fa5a5a;
	color: #FFFFFF;
}

.btn.red:hover,
.btn-two.red:hover,
.video_recording_toggle[data-recording-state="recording"]:hover,
.video_recording_toggle[data-recording-state="paused"]:hover
{
	background-color: #FF7474;
}

.btn.disabled, .btn-two.disabled {background-color: #F5F5F5; color: dimgrey; }
.btn.disabled:hover, .btn-two.disabled:hover { background-color: #CDE7EE; }

.btn.disabled, .btn-two.disabled {background-color: lightgrey; color: #FFFFFF; }
.btn.disabled:hover, .btn-two.disabled:hover { background-color: red; }

.link_highlighted { color: ; }
.link_highlighted:hover { color: ; }
.link_highlighted_reverse { color: ; }
.link_highlighted_reverse:hover { color: ; }
.link_highlighted_green { color: #3F7581; border-color: #3F7581; }
.link_highlighted_green:hover { color: ; border-color: ; }
.link_highlighted_standard:hover { color: ; border-color: ; }

.audio_controls_button { transition: all 1s; }
.audio_controls_button:hover { filter: invert(1); transition: all 1s; }
progress { accent-color: ; }

/* Keep upload feedback in the image column throughout transfer and server saving. */
.image_upload_profile
{
	float: left;
	width: fit-content;
	max-width: min(187.5px, 100%);
	margin-right: 25px;
}

.image_upload_logo
{
	width: fit-content;
	max-width: min(256px, 100%);
}

.image_upload .image_upload_picker
{
	display: block;
	margin: 0;
	cursor: pointer;
}

.image_upload_profile .image_upload_picker
{
	height: 250px;
}

.image_upload .image_upload_picker img
{
	display: block;
	max-width: 100%;
}

.image_upload_profile .image_upload_picker img
{
	height: 100%;
}

.image_upload .image_upload_picker[aria-busy="true"]
{
	cursor: wait;
}

.image_upload_status
{
	display: none;
	/* The image determines the column width; longer status text must wrap within it. */
	contain: inline-size;
	box-sizing: border-box;
	width: 100%;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.image_upload_picker[aria-busy="true"] + .image_upload_status
{
	display: block;
}

.image_upload_progress
{
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 12px;
	margin-top: 6px;
	appearance: none;
	border: 1px solid ;
	border-radius: 4px;
	background-color: #;
}

.image_upload_progress::-webkit-progress-bar
{
	background-color: #;
	border-radius: 4px;
}

.image_upload_progress::-webkit-progress-value
{
	background-color: ;
}

.image_upload_progress::-moz-progress-bar
{
	background-color: ;
}

.image_upload_progress:indeterminate
{
	background-color: ;
	animation: image_upload_saving 1.4s ease-in-out infinite;
}

.image_upload_progress:indeterminate::-webkit-progress-bar
{
	background-color: ;
}

@keyframes image_upload_saving
{
	0%, 100%
	{
		opacity: 0.45;
	}
	50%
	{
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.image_upload_progress:indeterminate
	{
		animation: none;
	}
}

.image_upload #image_current
{
	visibility: hidden;
}

.image_upload .img-container img
{
	max-width: 100%;
	max-height: 70vh;
}

.tutorial_audio_progress_bar { height: 20px; }
.tutorial_audio_progress_bar::-moz-progress-bar { height: 20px; background: ; }
.tutorial_audio_progress_bar::-webkit-progress-bar { height: 20px; background: ; }
.tutorial_audio_progress_bar::-webkit-progress-value { background: ; }

.blog_menu_link { display: block; color: ; padding: 8px 10px; }
.blog_menu_link:hover, .blog_menu_selected { color: white; background-color: ; }

.highlighted_text { color: ; }
.highlighted_bg { background-color:  !important; }
.video_recording_support
{
	background-color: ;
	color: #000000;
	border-color: ;
}

.standard_bg { background-color:  !important; }
.warning_bg { background-color: #fa5a5a; }

/* Compact public footer follows the main site's branding with shared theme colors. */
.public_site_footer,
.public_site_footer *
{
	box-sizing: border-box;
}

.public_site_footer
{
	clear: both;
	margin-top: 32px;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	color: ;
}

.public_site_footer_content
{
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.65fr);
	align-items: start;
	gap: 32px;
	width: min(1160px, calc(100% - 48px));
	margin: 0 auto;
	padding: 28px 0;
}

.public_site_footer h2
{
	margin: 0 0 10px;
	font-family: Poppins, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.public_site_footer a
{
	display: inline-block;
	max-width: 100%;
	min-height: 24px;
	color: inherit;
	text-decoration: none;
}

.public_site_footer nav a
{
	display: block;
	padding: 2px 0;
}

.public_site_footer a:hover
{
	text-decoration: underline;
	text-underline-offset: 3px;
}

.public_site_footer a:focus-visible
{
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.public_site_footer_brand img
{
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

.public_site_footer_brand p
{
	max-width: 32ch;
	margin: 14px 0 0;
	opacity: 0.8;
}

.public_site_footer_badge img
{
	display: block;
	width: 120px;
	max-width: 100%;
	height: auto;
}

.public_site_footer_copyright
{
	padding: 12px 24px;
	font-size: 13px;
	text-align: center;
}

.public_site_footer_copyright p
{
	margin: 0;
	opacity: 0.8;
}

/* Keep language controls in flow so they cannot cover public footer links. */
body:has(.public_site_footer) #lang_selector_container
{
	position: static;
	width: min(1160px, calc(100% - 48px));
	margin: 24px auto 0;
	text-align: right;
}

/* Public blog columns must contribute their height so the footer follows the article and menu. */
body:has(.public_site_footer) #body:has(> .blog_menu)
{
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	align-items: start;
}

body:has(.public_site_footer) .blog_menu,
body:has(.public_site_footer) .blog_content
{
	position: static;
	width: auto;
	height: auto !important;
}

@media all and (max-width: 900px)
{
	.public_site_footer_content
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body:has(.public_site_footer) #body:has(> .blog_menu)
	{
		grid-template-columns: minmax(0, 1fr);
	}
}

@media all and (max-width: 600px)
{
	.public_site_footer_content
	{
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.public_site_footer_brand img
	{
		width: 180px;
	}

	.public_site_footer_badge img
	{
		width: 100px;
	}
}

#popup_social_container { background-color: ; }
#loading_circle { background-color: ; }
.header_menu_container { background: ; }
.header_menu_container #hm_menu_mobile_menu { background: ; }

.login_container_title { color: ; }
.login_client_title { color: ; }

#client_view { border: solid 3px ; }

.sound_select_link:hover { background-color: ; }
.sound_select_highlight { background-color: ; }

.select2-results__option--highlighted { background:  !important; }
.shape_selected { outline: 2px solid ;  }
.pro_only {  padding-top: 3px; color: ; }
.pro_only::after { content: "(Pro Membership Required)";}

.signup_title { color: ; }
label .purchase_label { color: ; }
.inputGroup label:before { background-color: ; }
.inputGroup input:checked ~ label:after { background-color: ; border-color: ; }

#message_input_button { background-color: ; }
#message_input_button:hover { background-color: ; }

.gear_icon { background-image: url('../images/icons/gear-black.png'); }
.tools_icon { background-image: url('../images/icons/tools.png'); }
.help_icon { background-image: url('../images/icons/help.png'); }
.lightbar_icon { background-image: url('../images/icons/lightbar-black.png'); }
.phone_icon { background-image: url('../images/icons/phone-black.png'); }
.arrow_box_up_icon { background-image: url('../images/icons/arrow-box-up.png'); }
.minimize_icon { background-image: url('../images/icons/minimize.png'); }
.invite_icon { background-image: url('../images/icons/invite-black.png'); }
.add_icon { background-image: url('../images/icons/add-black.png'); }


#tutorial_header { background-color: ; color: white; }