:root {
	--blue:											#0057B7;		/*	(ukraine blue)	*/
	--blue-glass:									#0057B7CC;
	--pink:											#E11998;
	--pink-glass:									#E11998CC;
	--purple:										#8869A5;
	--purple-glass:									#AE99C2;
	--yellow:										#FFDD00;		/*	(ukraine yellow) */
	--yellow-glass:									#FFDD00CC;
	--office:										#808080;

	--green:										#009600;
	--green-light:									#E6FFE6; /* #E6FFE6; */
	--green-dark:									#004100;


	--red:											#960000;
	--red-glass:									#960000CC;
	--white:										#FFFFFF;
	--white-80:										#FFFFFFCC;
	--site-base-color:								#E7E7E7;
	--black:										#000000;
	--grey-dark:									#808080;
	--grey-light:									#E8E8E8;
	--screen-fade:									#808080CC;
	--chat-translation:								#fffce6;
	--transparent:									transparent;
	/*	ELEMENTS Z-INDEX	*/
	--z-index-profile-grid-icons:					 760;
	--z-index-profile-button:						 760;
	--z-index-menu-profile-grid-unread-messages:	 770;

	--z-index-creating-profile-dots:				 920;
	--z-index-logo:									 910;


	--z-index-menus:								9000;
	--z-index-dialog:								9030;
	--z-index-dialog-close-button:					9035;

	--z-index-dialog-video:							9100;
	--z-index-dialog-video-wrapper:					9105;
	--z-index-dialog-video-close-button:			9110;













	/*	PADDING/MARGIN	*/
	--space-default:								0.4rem;
	--space-none:									0;
	--space-half-default:							calc( var( --space-default ) / 2 );
	--space-2:										calc( var( --space-default ) * 2 );
	--space-3:										calc( var( --space-default ) * 3 );
	--space-4:										calc( var( --space-default ) * 4 );
	/*	SVG COLOR FILTERS	*/
	--svg-filter-green:								invert( 24% ) sepia( 87% ) saturate( 3364% ) hue-rotate( 116deg ) brightness( 101% ) contrast( 104% );
	--svg-filter-grey:								invert( 50% ) sepia(  0% ) saturate(    7% ) hue-rotate( 211deg ) brightness( 101% ) contrast(  79% );
	--svg-filter-grey-dark:							invert( 50% ) sepia(  0% ) saturate(    0% ) hue-rotate( 225deg ) brightness( 100% ) contrast(  98% );
	--svg-filter-red:								invert( 10% ) sepia( 62% ) saturate( 6447% ) hue-rotate(   5deg ) brightness(  93% ) contrast( 117% );
	--svg-filter-blue:								invert( 22% ) sepia( 38% ) saturate( 4799% ) hue-rotate( 199deg ) brightness(  95% ) contrast( 103% );
	--svg-filter-pink:								invert( 31% ) sepia( 67% ) saturate( 5618% ) hue-rotate( 304deg ) brightness(  87% ) contrast( 105% );
	--svg-filter-purple:							invert( 51% ) sepia(  9% ) saturate( 1873% ) hue-rotate( 228deg ) brightness(  87% ) contrast(  93% );
	/*	SVG DROP SHADOW FILTER	*/
	--svg-filter-selected-button-highlight:			drop-shadow( 0 0 0.20rem var( --blue ) );
	--svg-filter-drop-shadow-black:					drop-shadow( 0 0 0.04rem var( --black ) );
	/*	FONTS	*/
	--font-size-base:								calc( 0.60rem + 0.50vw );
	--font-medium-regular:							calc( var( --font-size-base ) * 0.85 )	"yanadate-regular";
	--font-medium-regular-fixed:					0.8rem									"yanadate-regular";
	--font-medium-bold:								calc( var( --font-size-base ) * 0.85 )	"yanadate-bold";
	--font-medium-bold-fixed:						0.8rem									"yanadate-bold";
	--font-medium-italic:							calc( var( --font-size-base ) * 0.85 )	"yanadate-light-italic";
	--font-small-regular:							calc( 0.20rem + 0.50vw )				"yanadate-regular";
	--font-small-light:								calc( 0.50rem + 0.50vw )				"yanadate-light";
	--font-small-regular-fixed:						0.65rem									"yanadate-regular";
	--font-small-bold:								calc( 0.40rem + 0.50vw )				"yanadate-bold";
	--font-very-small-regular-fixed:				0.60rem									"yanadate-regular";
	--font-headers:									calc( 0.50rem + 0.50vw )				"yanadate-bold";
	--letter-spacing:								-0.03rem;
	--letter-spacing-narrow:						-0.05rem;
	/*	SITE LOGO	*/
	--site-logo-height:								calc( var( --button ) + 0.50vw );
	--site-logo-width:								calc( ( var( --button ) + 0.50vw ) * 4 );
	/*	MENU STYLING	*/
	--site-menus-edge-spacing:						0.20rem;
	--site-menus-button-size:						calc( var( --button-size ) * 0.80 );
	--site-menus-background-color:					var( --white );
	--site-menus-size:								calc( var( --site-menus-button-size ) * 1.20 ) ;
	--site-menus-border:							1px solid var( --purple );
	--site-menus-border-right:						none;
	--site-menus-border-radius:						calc( var( --site-menus-size ) / 2 ) calc( var( --site-menus-size ) / 4 ) calc( var( --site-menus-size ) / 4 ) calc( var( --site-menus-size ) / 2 );
	--grid-profile-menu-button-size:				calc( var( --profile-grid-medium-image-container-width ) * 0.23 );
	--grid-profile-menu-border-radius:				0.50rem 0.50rem calc( var( --grid-profile-menu-button-size ) / 2.50 ) calc( var( --grid-profile-menu-button-size ) / 2.50 ) ;
	--grid-profile-menu-edge-spacing:				0.20rem;
	--grid-profile-menu-background-color:			var( --white );
	--grid-profile-menu-border:						1px solid var( --purple );
	--grid-profile-menu-border-top:					none;
	/*	PROFILE GRID - PROFILE STYLING	*/
	--profile-caption-height:						calc( var( --desktop-profile-width-standard ) / 5 );
	--profile-icon-height:							calc( var( --desktop-profile-width-standard ) / 7 );
	--profile-action-button-size:					calc( var( --desktop-profile-width-medium-with-padding ) * 0.20 );
	/* SETS THE WIDTHS AND HEIGHTS FOR PROFILES */
	--profile-image-height-factor:					1.3333333;
	--desktop-profile-width-standard:				15rem;
	--desktop-profile-height-standard:				calc( var( --desktop-profile-width-standard ) * var( --profile-image-height-factor ) );
	/*	NEW PROFILE SIZING	*/
	--profile-grid-medium-image-width:				10.50rem;/*EQUATES TO 210 * 280 (THUMB SIZE) WHEN BASE FONT SIZE = 16PX*/
	--profile-grid-medium-image-height:				14.00rem;
	--profile-grid-medium-image-container-width:	11.30rem;/*EQUATES TO 210 * 280 (THUMB SIZE) WHEN BASE FONT SIZE = 16PX*/
	--profile-grid-medium-image-container-height:	14.80rem;/*PADDING OF 0.4rem ON EACH SIDE * 2 on bottom*/
	--profile-grid-small-image-width:				 5.25rem;/*EQUATES TO 210 * 280 (THUMB SIZE) WHEN BASE FONT SIZE = 16PX*/
	--profile-grid-small-image-height:				 7.00rem;
	--profile-grid-small-image-container-width:		 5.65rem;/*EQUATES TO 210 * 280 (THUMB SIZE) WHEN BASE FONT SIZE = 16PX*/
	--profile-grid-small-image-container-height:	 7.40rem;/*PADDING OF 0.4rem ON EACH SIDE*/
	/*	STANDARD BUTTON SIZE	*/
	--button:										2.75rem;
	--button-size:									calc( var(--button ) + 0.5vw );
	--button-size-half:								calc( ( var(--button ) + 0.5vw ) / 2 );
	/*	BOX STYLING	*/
	--box-border-radius:							0 calc( var( --site-menus-size ) / 3 ) calc( var( --site-menus-size ) / 3 ) calc( var( --site-menus-size ) / 3 );
	--box-border-radius-small:						0 calc( var( --site-menus-size ) / 5 ) calc( var( --site-menus-size ) / 5 ) calc( var( --site-menus-size ) / 5 );
	--box-shadow-boxes:								0 0.30rem 0.35rem 0.10rem #808080B3;
	--box-border-radius-narrow:						1.00rem 1.00rem 0 0;
	/*	SITE BOX SHADOWS	*/
	--box-shadow-black:								0.00 0.60rem 0.60rem -0.60rem var(--black);
	--box-shadow-green:								0.00 0.60rem 0.60rem -0.60rem var( --green );
	/*	OFFICE BOX STYLING	*/
	--office-box-shadow:							0 0 1rem var(--grey-dark);
	--office-border:								1px solid var( --black );
	--office-border-radius:							0.30rem;
	--office-margin:								0.5rem;
	/*	OFFICE VIDEO SIZE	*/
	--office-video-width-small:						8rem;
	--office-video-height-small:					calc( (  var(--office-video-width-small ) / 9 ) * 16  );
	/*	MISC	*/
	--context-menu-height:							calc( var( --button-size ) + var( --space-half-default ) );
	--device-width-is-mobile-phone:					768px;
	--rounded-corners:								0;
	--profile-unread-messages-width:				1.90rem;	}

/**************************************************************************************************/
/** FONTS *****************************************************************************************/
/**************************************************************************************************/

	@font-face {
		font-family:							'yanadate-regular';
		font-weight:							400;
		font-style:								normal;
		src:									url('/support/fonts/NotoSans-Regular.woff2') format('woff2'), url('/support/fonts/NotoSans-Regular.woff') format('woff')	}

	@font-face {
		font-family:							'yanadate-bold';
		font-weight:							400;
		font-style:								normal;
		src:									url('/support/fonts/NotoSans-SemiBold.woff2') format('woff2'), url('/support/fonts/NotoSans-SemiBold.woff') format('woff')	}

	@font-face {
		font-family:							'yanadate-light';
		font-weight:							400;
		font-style:								normal;
		src:									url('/support/fonts/NotoSans-Light.woff2') format('woff2'), url('/support/fonts/NotoSans-Light.woff') format('woff')	}

	@font-face {
		font-family:							'yanadate-light-italic';
		font-weight:							400;
		font-style:								italic;
		src:									url('/support/fonts/NotoSans-LightItalic.woff2') format('woff2'), url('/support/fonts/NotoSans-LightItalic.woff') format('woff')	}

/**************************************************************************************************/
/** FONTS END *************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** STANDARD STUFF ********************************************************************************/
/**************************************************************************************************/
	* {	border:									0;
		padding:								0;
		margin:									0;
		box-sizing:								border-box;
		position:								relative;	}

	html {
		width:									100%;
		height:									100%;
		text-align:								left;
		font-family: 							'yanadate-regular';
		font-size:								16px;	}

	.red {
		color:									var( --red );	}

	.green {
		color:									var( --green );	}

	.black {
		color:									var( --black );	}
/**************************************************************************************************/
/** STANDARD STUFF END ****************************************************************************/
/**************************************************************************************************/









/*	STANDARD STUFF END */


	/* .filter-purple {
		filter:									var( --svg-filter-purple );	} */





/**************************************************************************************************/
/** MAIN SITE FRAMEWORK ***************************************************************************/
/**************************************************************************************************/
	.body-site {	/*	MAIN SITE PAGE */
		width:									100%;
		height:									100%;
		position:								relative;
		background-color:						var(--site-base-color);	}

	#site-framework {
		position:								absolute;
		left:									50%;
		transform:								translateX(-50%);
		width:									80vw;
		height:									100vh;
		display:								grid;
		grid-template-columns:					1fr;
		grid-template-rows:						calc( var( --button-size ) + var( --space-2 ) ) 1fr .8rem;
		grid-template-areas:					"framework-header"
												"framework-content"
												"framework-footer";	}

	@media only screen and ( max-width: 768px ) {
		#site-framework {
			left:								0;
			width:								100%;
			transform:							none;	}	}

	#site-framework-header {	/*	THE SITE HEADER CONTAINER */
		grid-area: 								framework-header;
		display:								flex;
		align-items:							center;
		flex-direction:							column;
		padding-top:							var(--space-default);	}

	#site-framework-content {
		width:									100%;	/*	THE MAIN CONTENT. WHEN PAGES ARE CHANGED ON THE SITE, THEY ARE SHOWN IN THIS OBJECT */
		height:									100%;
		grid-area: 								framework-content;
		overflow:								hidden;
		padding:								0 var( --space-default ) var( --space-default ) var( --space-default );	}

	#site-framework-footer {
		display:								flex;
		justify-content:						center;
		align-content:							center;
		width:									100%;
		height:									100%;
		grid-area: 								framework-footer;	}
/**************************************************************************************************/
/** MAIN SITE FRAMEWORK END ***********************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** LOGO ******************************************************************************************/
/**************************************************************************************************/
	.logo {
		width:									var(--site-logo-width);
		height:									var(--site-logo-height);
		z-index:								var(--z-index-logo);
		background:								no-repeat;	}
/**************************************************************************************************/
/** LOGO END **************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** BOXES *****************************************************************************************/
/**************************************************************************************************/
	.box {
		display:								flex;
		justify-content:						flex-start;
		align-content:							flex-start;
		padding:								var( --space-2 );
		width:									fit-content;
		max-width:								90%;
		height:									auto;
		border:									var( --site-menus-border );
		border-radius:							var( --box-border-radius );
		background-color:						var( --white );
		box-shadow:								var( --box-shadow-boxes );
		justify-self:							left;	}

	.box.centered {
		justify-self:							center;	}

	.box.small {
		width:									50%;	}

	.box.very-small {
		width:									25%;	}

	.box.full-width {
		width:									90%;	}

	@media only screen and ( max-width: 768px ) {
		.box.small {
			width:								90%;	}

		.box.very-small {
			width:								90%;	}	}
/**************************************************************************************************/
/** BOXES END *************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** ADVERT ****************************************************************************************/
/**************************************************************************************************/
	#advert-container {	/*	CONTAINER FOR THE ADVERT */
		width:									90%;
		align-items:							center;
		display:								flex;
		flex-direction:							column;
		border:									1px solid var( --black );
		border-radius:							var( --box-border-radius );
		justify-self:							center;
		box-shadow:								var( --box-shadow-black );
		margin-bottom:							0.75rem;
		background-color:						var( --white );	}

	@media only screen and ( max-width: 768px ) {
		#advert-container {
			width:								100%;	}	}

	.advert-bullet-grid {
		grid-template-columns:					1fr 1fr ;
		display:								grid;
		width:									100%;	}

	@media only screen and ( max-width: 768px ) {
		.advert-bullet-grid {
			grid-template-columns:				1fr;	}	}

	.advert-bullet-grid div.left,
	.advert-bullet-grid div.right {
		font:									var( --font-medium-regular );
		letter-spacing:							var( --letter-spacing );
		display:								flex;
		align-items:							center;
		padding:								0;
		color:									var( --blue );	}

	.advert-bullet-grid div.left{
		justify-content:						flex-end;
		padding-right:							0.5rem;	}

	.advert-bullet-grid div.right{
		justify-content:						flex-start;
		padding-left:							0.5rem;	}

	@media only screen and ( max-width: 768px ) {
		.advert-bullet-grid div.left{
			justify-content:					center;	}

		.advert-bullet-grid div.right {
			justify-content:					center;	}	}

	.advert-icons-grid {	/*	SET THE GRID FOR THE FOR PROILE TYPE BUTTONS */
		grid-template-columns:					repeat( 4, 25% );
		grid-template-areas:					"advert-FM advert-FF advert-MF advert-MM";
		display:								grid;
		width:									65%;
		justify-self:							center;	}

	@media only screen and ( max-width: 768px ) {
		.advert-icons-grid {
			grid-template-columns:				repeat( 2, 50% );
			grid-template-areas:				"advert-FM advert-FF"
												"advert-MF advert-MM";	}	}

	.advert-icons-grid-signup {
		grid-template-columns:					repeat( 4, 25% );
		grid-template-areas:					"empty-1 advert-FM advert-FF empty-2";
		display:								grid;
		width:									65%;
		border:									1px solid black;	}

	.advert-FM  {	/*	SET GRID AREA FOR EACH BUTTON */
		grid-area:								advert-FM ;	}

	.advert-MF {
		grid-area:								advert-MF;	}

	.advert-FF {
		grid-area:								advert-FF;	}

	.advert-MM {
		grid-area:								advert-MM;	}

	.advert-grid-item {	/*	STYLING FOR EACH BUTTON */
		width:									100%;
		padding:								0.40rem;
		height:									100%;
		cursor:									pointer;
		display:								flex;
		background-color:						transparent;
		box-sizing:								border-box;
		transition:								all 0.3s ease;
		transform-origin:						center center;
		filter: 								var(--svg-filter-drop-shadow-black);	}

	.advert-icons-grid:hover .advert-grid-item,	/*	ON HOVER OR ACTIVE GREY OTHER BUTTONS */
	.advert-icons-grid:active .advert-grid-item,
	.advert-icons-grid-signup:hover .advert-grid-item,
	.advert-icons-grid-signup:active .advert-grid-item {
		filter:									grayscale( 50% ) opacity( 50% );
		transform: 								scale( 0.8 );	}

	.advert-icons-grid .advert-grid-item:hover,
	.advert-icons-grid .advert-grid-item:active,
	.advert-icons-grid-signup .advert-grid-item:hover,
	.advert-icons-grid-signup .advert-grid-item:active {
  		filter:									grayscale( 0% );
		transform: 								scale( 1.2 );	}

	.advert-grid-item:hover,	/*	MAKE BUTTONS BIGGER ON ACTIVE AND HOVER */
	.advert-grid-item:active,
	.advert-grid-item-signup:hover,
	.advert-grid-item-signup:active {
		transform: 								scale(1.2);	}
/**************************************************************************************************/
/** ADVERT END  ***********************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** CONTEXT MENU **********************************************************************************/
/**************************************************************************************************/
	.context-menu-box {	/*	CONTAINER */
		margin:									1rem;
		display:								flex;
		justify-content:						center;
		width:									auto;
		height:									var( --context-menu-height );
		max-height:								var( --context-menu-height );	}

	.context-menu {	/*	THE MENU */
		display:								flex;
		padding: 								0 var(--space-half-default );	}

	.context-menu.red {
		border-bottom:							3px solid var( --red );	}
/**************************************************************************************************/
/** CONTEXT MENU END ******************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** MESSAGE BOX AND CONFIRM BOX *******************************************************************/
/**************************************************************************************************/
	.message-box,	/*	BACKGROUND	*/
	#confirm-box {
		z-index:								var( --z-index-dialog );
		width:									100%;
		height:									100%;
		min-height:								100%;
		min-width:								100%;
		max-height:								100%;
		max-width:								100%;
		position:								absolute;
		top:									0;
		left:									0;
		background-color:						var( --screen-fade );
		display:								flex;
		justify-content:						center;
		align-items:							center;	}

	.message-box-grid,
	.confirm-box-grid {
		border-radius:							var( --box-border-radius );
		background-color:						var( --white );
		display:								grid;
		grid-template-columns:					1fr var( --button-size );
		grid-template-areas:					"title			title"
												"message-text	button-tick";
		min-width:								25%;
		max-width:								40%;
		padding:								0 .8rem .8rem .8rem;
		border:									var( --site-menus-border );
		box-shadow:								var( --box-shadow-black );	}

	.confirm-box-grid {
		grid-template-columns:					1fr var( --button-size ) var( --button-size );
		grid-template-areas:					"title			title		title"
												"message-text	button-tick	button-cross";	}

	.message-box-title-area
	.confirm-box-title-area {
		grid-area:								title;
		width:									100%;
		align-items:							flex-start;
		justify-content:						flex-start;
		height:									fit-content;	}

	.message-box-text-area,
	.confirm-box-text-area {
		grid-area:								message-text;
		font:									var( --font-medium-regular );
		color:									var( --black );
		padding:								0 2rem .5rem 2rem;	}

	.message-box-text-area,
	.confirm-box-text-area {
		align-self:								flex-start;
		justify-self:							flex-start;	}

	.message-box-button-tick-area,
	.confirm-box-button-tick-area {
		grid-area:								button-tick;
		display:								flex;
		align-items:							center;	}

	.confirm-box-button-cross-area {
		grid-area:								button-cross;
		display:								flex;
		align-items:							center;	}

	.message-box-title.red,
	.confirm-box-title.red  {
		background-color:						var(--red) !important;	}
/**************************************************************************************************/
/** MESSAGE BOX AND CONFIRM BOX END ***************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** DIALOG ****************************************************************************************/
/**************************************************************************************************/
	#dialog {
		z-index:								var(--z-index-dialog);
		width:									100%;
		height:									100%;
		min-height:								100%;
		min-width:								100%;
		max-height:								100%;
		max-width:								100%;
		overflow:								hidden;
		position:								absolute;
		top:									0;
		left:									0;
		animation:								overlayIn .25s;
		background-color:						var(--screen-fade);
		animation-fill-mode:					forwards;
		animation-timing-function:				linear;	}

	#dialog-content-wrapper {	/*	DIALOG CONTENT WRAPPER */
		position:								absolute;
		top:									50%;
		left:									50%;
		transform:								translate( -50%, -50% );
		max-width:								80%;
		max-height:								80%;
		background:								var(--white);
		border-radius:							var(--rounded-corners);
		padding:								.75rem;
		display:								flex;
		justify-content:						center;	}

	@media only screen and ( max-width: 768px ) {

		#dialog-content-wrapper {
			max-width:							90%;
			max-height:							90%;	}	}

	#dialog-content-wrapper.full {
		min-height:								80%;
		min-width:								80%;
		max-width:								80%;
		max-height:								80%;	}

	#dialog-content-wrapper.size-chat {
		min-height:								80%;
		max-height:								80%;
		max-width:								50%;
		min-width:								50%;
		height:									80%;	}

	#dialog-content-wrapper.size-block,
	#dialog-content-wrapper.size-report {
		max-height:								80%;
		max-width:								30%;	}

	.dialog-warning-text {
		width:									100%;
		font:									var(--font-medium-regular);
		margin-bottom:							0.5em;
		color:									var(--red);
		padding-left:							var(--space-2);	}

	@media only screen and ( max-width: 768px ) {
		#dialog-content-wrapper {
			max-width:							90%;
			min-width:							90%;
			max-height:							90%;
			min-height:							90%;	}	}

	@keyframes overlayIn {
		0% {
			transform:							scale( 0 );	}
		100% {
			transform:							scale( 1 );	}	}

	.dialog-content{
		width:									100%;
		height:									auto;
		overflow-y:								auto;
		overscroll-behavior-x:					none;	}
/**************************************************************************************************/
/** DIALOG END ************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** CREATING PROFILE PLEASE WAIT DOTS *************************************************************/
/**************************************************************************************************/
	.dots {
		display:								inline-block;
		position:								absolute;
		top:									50%;
		left:									50%;
		transform:								translate( -50%, -50% );
		width:									5em;
		height:									5em;	}

	.dots div {
		animation:								dots 1.2s cubic-bezier( 0.5, 0, 0.5, 1 ) infinite;
		transform-origin:						2.5em 2.5em;	}

	.dots div:after {
		content:								" ";
		display:								block;
		position:								absolute;
		width:									0.46875em;
		height:									0.46875em;
		border-radius:							50%;	}

	.dots div:nth-child(1) {
		animation-delay:						-0.036s;	}

	.dots div:nth-child(1):after {
		background-color:						rgba(	225,  25, 152, 0.16 );
		top:									3.91421375em;
		left:									3.91421375em;	}

	.dots div:nth-child(2) {
		animation-delay:						-0.072s;	}

	.dots div:nth-child(2):after {
		background-color:						rgba(	225,  25, 152, .28 );
		top:									4.23205062em;
		left:									3.5em;	}

	.dots div:nth-child(3) {
		animation-delay:						-0.108s;	}

	.dots div:nth-child(3):after {
		background-color:						rgba(	225,  25, 152, .40 );
		top:									4.43185188em;
		left:									3.01763812em;	}

	.dots div:nth-child(4) {
		animation-delay:						-0.144s;	}

	.dots div:nth-child(4):after {
		background-color:						rgba(	225,  25, 152, .52 );
		top:									4.5em;
		left:									2.5em;	}

	.dots div:nth-child(5) {
		animation-delay:						-0.18s;	}

	.dots div:nth-child(5):after {
		background-color:						rgba(	225,  25, 152, .64 );
		top:									4.43185188em;
		left:									1.98236188em;	}

	.dots div:nth-child(6) {
		animation-delay:						-0.216s;	}

	.dots div:nth-child(6):after {
		background-color:						rgba(	225,  25, 152, .76 );
		top:									4.23205062em;
		left:									1.5em;	}

	.dots div:nth-child(7) {
		animation-delay:						-0.252s;	}

	.dots div:nth-child(7):after {
		background-color:						rgba(	225,  25, 152, 0.88 );
		top:									3.91421375em;
		left:									1.08578625em;	}

	.dots div:nth-child(8) {
		animation-delay:						-0.288s;	}

	.dots div:nth-child(8):after {
		background-color:						rgba(	225,  25, 152, 1.00 );
		top:									3.5em;
		left:									0.76794938em;	}

	@keyframes dots {
		0%		{	transform:					rotate( 0deg );	}
		100%	{	transform:					rotate( 360deg );	}	}
/**************************************************************************************************/
/** CREATING PROFILE PLEASE WAIT DOTS END *********************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** MAIN MENU *************************************************************************************/
/**************************************************************************************************/
	.menu-main {
		z-index:								var( --z-index-menus );
		border:									var( --site-menus-border );
		border-right:							var( --site-menus-border-right );
		border-radius:							var( --site-menus-border-radius );
		background-color:						var( --site-menus-background-color );
		display:								flex;
		position:								absolute;
		right:									0;
		top:									var( --site-menus-edge-spacing );
		justify-content:						center;
		width:									var( --site-menus-size );
		height:									auto;
		background-color:						var( --site-menus-background-color );	}

	.menu-main-grid {
		display:								grid;
		grid-template-columns:					auto;
		gap:									0.4rem;
		padding-bottom:							calc( var( --site-menus-edge-spacing ) * 2 )	}

	.menu-button-search,
	.menu-button-contacts,
	.menu-button-edit-profile,
	.menu-button-agent,
	.menu-button-help,
	.menu-button-logout,
	.menu-button-login	{
		display:								none;
		justify-content:						center;
		align-content:							flex-end;
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );	}

	.menu-main-grid.default  {
		grid-template-areas:					"menu-button-selector"
												"menu-button-search"
												"menu-button-help"
												"menu-button-login";	}

	.menu-main-grid.default .menu-button-search,
	.menu-main-grid.default .menu-button-help,
	.menu-main-grid.default .menu-button-login {
		display:								flex;	}

	.menu-main-grid.user {
		grid-template-areas:					"menu-button-selector"
												"menu-button-search"
												"menu-button-contacts"
												"menu-button-edit-profile"
												"menu-button-agent"
												"menu-button-help"
												"menu-button-logout";	}

	.menu-main-grid.user .menu-button-search,
	.menu-main-grid.user .menu-button-contacts,
	.menu-main-grid.user .menu-button-edit-profile,
	.menu-main-grid.user .menu-button-agent,
	.menu-main-grid.user .menu-button-help,
	.menu-main-grid.user .menu-button-logout {
		display:								flex;	}

	.menu-button-selector		{ grid-area:	menu-button-selector;	}
	.menu-button-search			{ grid-area:	menu-button-search;	}
	.menu-button-contacts		{ grid-area:	menu-button-contacts;	}
	.menu-button-edit-profile	{ grid-area:	menu-button-edit-profile;	}
	.menu-button-agent			{ grid-area:	menu-button-agent;	}
	.menu-button-help			{ grid-area:	menu-button-help;	}
	.menu-button-logout			{ grid-area:	menu-button-logout;	}
	.menu-button-login			{ grid-area:	menu-button-login;	}

	.menu-small {
		transform:				scale( 0.5 );
		transform-origin:		top right;
		transition:				transform 0.2s ease-in-out;	}

	.menu-standard {
		transform:				scale( 1 );
		transform-origin:		top right;
		transition:				transform 0.2s ease-in-out;	}
/**************************************************************************************************/
/** MAIN MENU END *********************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** LANGUAGES MENU ********************************************************************************/
/**************************************************************************************************/
	.menu-languages {
		z-index:								var( --z-index-menus );
		border:									var( --site-menus-border );
		border-right:							var( --site-menus-border-right );
		border-radius:							var( --site-menus-border-radius );
		background-color:						var( --site-menus-background-color);
		display:								flex;
		position:								absolute;
		right:									0;
		bottom:									var( --site-menus-edge-spacing );
		width:									auto;
		height:									var( --site-menus-size );	}

	.menu-languages .languages-grid {
		display:								grid;
		grid-template-columns:					repeat( 3, 0 ) var( --site-menus-button-size  );
		grid-template-rows:						var( --site-menus-size );
		margin:									var( --site-menus-edge-spacing );
		gap:									0;	}

	.languages-item {
		display:								flex;
		justify-content:						center;
		align-content:							center;
		opacity:								0;
		height:									0;
		width:									0;
		transition:								all .15s ease;	}

	.languages-selector {
		opacity:								1;
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );	}

	 .menu-languages.active {
		padding-left:							calc( var( --site-menus-edge-spacing ) * 2 );
		box-shadow:								var(--box-shadow-black);	}

	.menu-languages.active .languages-grid {
		grid-template-columns:					var( --site-menus-size ) auto auto auto;
		gap:									0.4rem;	}

	.menu-languages.active > .languages-grid > .languages-item.item-a {
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );
		opacity:								1;
		transition-delay:						0s;
		margin:									0 auto;	}

	.menu-languages.active > .languages-grid > .languages-item.item-b {
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );
		opacity:								1;
		transition-delay:						0.10s;
		margin:									0 auto;	}
	.menu-languages.active > .languages-grid > .languages-item.item-c {
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );
		opacity:								1;
		transition-delay:						0.15s;
		margin:									0 auto;	}
/**************************************************************************************************/
/** LANGUAGES MENU END ****************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** TIMES MENU ************************************************************************************/
/**************************************************************************************************/
	.menu-times {
		z-index:								var( --z-index-menus );
		border:									var( --site-menus-border );
		border-right:							var( --site-menus-border-right );
		border-radius:							var( --site-menus-border-radius );
		background-color:						var( --site-menus-background-color);
		display:								flex;
		position:								absolute;
		right:									0;
		bottom:									calc( ( var( --site-menus-edge-spacing ) * 4 ) + var( --site-menus-button-size ) );
		width:									auto;
		height:									var( --site-menus-size );	}

	.menu-times .times-grid {
		display:								grid;
		grid-template-columns:					repeat( 5, 0 ) var( --site-menus-button-size  );
		grid-template-rows:						var( --site-menus-size );
		margin:									var( --site-menus-edge-spacing );
		gap:									0;	}

	.times-item {
		display:								flex;
		justify-content:						center;
		align-content:							center;
		opacity:								0;
		height:									0;
		width:									0;
		transition:								all .15s ease;	}

	.times-selector {
		opacity:								1;
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );	}

	 .menu-times.active {
		padding-left:							calc( var( --site-menus-edge-spacing ) * 2 );
		box-shadow:								var(--box-shadow-black);	}

	.menu-times.active .times-grid {
		grid-template-columns:					var( --site-menus-size ) auto auto auto auto auto;
		gap:									0.4rem;	}

	.menu-times.active > .times-grid > .times-item.ru {
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );
		opacity:								1;
		transition-delay:						0s;
		margin:									0 auto;	}

	.menu-times.active > .times-grid > .times-item.uk {
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );
		opacity:								1;
		transition-delay:						0.10s;
		margin:									0 auto;	}
	.menu-times.active > .times-grid > .times-item.de {
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );
		opacity:								1;
		transition-delay:						0.15s;
		margin:									0 auto;	}

	.menu-times.active > .times-grid > .times-item.en {
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );
		opacity:								1;
		transition-delay:						0.20s;
		margin:									0 auto;	}

	.menu-times.active > .times-grid > .times-item.us {
		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );
		opacity:								1;
		transition-delay:						0.25s;
		margin:									0 auto;	}

	.time-display {
		font:									var( --font-very-small-regular-fixed );
		background:								var( --black );
		color:									var( --white );
		padding:								0 var( --site-menus-edge-spacing );;
		position:								absolute;
		left:									50%;
		top:									50%;
		transform:								translate(-50%,-50%);
		border-radius:							0 var( --site-menus-edge-spacing ) var( --site-menus-edge-spacing ) var( --site-menus-edge-spacing );
		cursor:									none;
		display:								none;
		border:									1px solid white;	}

	.menu-times.active > .times-grid  > .times-item > .time-display {
		display:								flex;	}
/**************************************************************************************************/
/** TIMES MENU EMD ********************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** SEARCH MENU ***********************************************************************************/
/**************************************************************************************************/
	.menu-search {
		z-index:								var(--z-index-menus);
		position:								absolute;
		right:									0;
		top:									50%;
		display:								flex;
		justify-content:						flex-end;
		align-items:							center;
		transform:								translateY(-50%);
		height:									auto;
		width:									auto;	}

	.menu-search-container-left {
		width:									0;
		display:								none;
		border-radius:							0.8rem;
		padding:								0.6rem 0.8rem 0.8rem 0.8rem;
		background-color:						var( --white );
		border:									var(--site-menus-border);	}

	.menu-search .menu-search-container-left {
		width:									auto;
		display:								none;
		left:									1px;	}

	.menu-search-container-right {
		display:								flex;
		align-content:							center;
		width:									var( --site-menus-size );
		height:									100%;
		border:									var( --site-menus-border );
		border-radius:							var( --site-menus-border-radius);
		background-color:						var( --white );	}

	.menu-search-container-right-button {
		margin:									var( --site-menus-edge-spacing );
 		height:									var( --site-menus-button-size );
		width:									var( --site-menus-button-size );	}

	.menu-search.active > .menu-search-container-left {
		box-shadow:								var(--box-shadow-black);	}

	.menu-search.active > .menu-search-container-right {
		border-radius:							0 calc( var( --site-menus-size ) / 4 ) calc( var( --site-menus-size ) / 4 ) 0;
		border-top:								var( --site-menus-border );
		border-bottom:							var( --site-menus-border );
		border-right:							var( --site-menus-border );
		border-left:							0;
		box-shadow:								var( --box-shadow-black );	}

	.menu-search-form-grid {	/*	THE LAYOUT FOR THE SEARCH OPTIONS LISTBOX */
		background:								var( --white );
		gap:									0.1rem;
		display:								grid;
		grid-template-columns:					1fr 1fr;
		grid-template-areas:					"title			title"
												"age1			age2"
												"height1		height2"
												"weight1		weight2"
												"marital		marital"
												"livingcountry	livingcountry"
												"language		language"
												"hair			hair"
												"eyeC			eyeC"
												"smoking		smoking"
												"alcohol		alcohol	"
												"childrenH		childrenH"
												"childrenW		childrenW"
												"relocate		relocate"
												"tattoos		tattoos"
												"piercing		piercing"
												"verifyL		verifyL";	}

	.title			{	grid-area:				title;
						padding:				0;		}
	.age1			{	grid-area:				age1;	}
	.age2			{	grid-area:				age2; }
	.height1		{	grid-area:				height1;	}
	.height2		{	grid-area:				height2;	}
	.weight1		{	grid-area:				weight1;	}
	.weight2		{	grid-area:				weight2;	}
	.marital		{	grid-area:				marital;	}
	.livingcountry	{	grid-area:				livingcountry;	}
	.language		{	grid-area:				language;	}
	.hair			{	grid-area:				hair;	}
	.eyeC			{	grid-area:				eyeC;	}
	.smoking		{	grid-area:				smoking;	}
	.alcohol		{	grid-area:				alcohol;	}
	.childrenH		{	grid-area:				childrenH;	}
	.childrenW		{	grid-area:				childrenW;	}
	.relocate		{	grid-area:				relocate;	}
	.tattoos		{	grid-area:				tattoos;	}
	.piercing		{	grid-area:				piercing;	}
	.verifyL		{	grid-area:				verifyL;	}

	.menu-search.active > .menu-search-container-left {
		display:								flex;	}
/**************************************************************************************************/
/** SEARCH MENU END *******************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** MENU BUTTONS **********************************************************************************/
/**************************************************************************************************/
	.menu-icon {
		width:									100%;
		height:									100%	}

	.menu-icon.scale:hover,	/*	BUTTONS INCREASE SIZE ON HOVER OR ACTIVE */
	.menu-icon.scale:active,
	.menu-icon-no-shadow.scale:hover,
	.menu-icon-no-shadow.scale:active {
		cursor:									pointer;
		transition-duration:					400ms;
		transform-origin:						center center;
		transform:								scale( 1.2);	}

	.profile-button-small:hover,	/*	EXCEPT SELECTOR BUTTONS WHICH DECREASE AND SHOW A SHADOW ON HOVER OR ACTIVE */
	.profile-button-small:active,
	.menu-icon.scale-down:hover,
	.menu-icon.scale-down:active,
	.menu-icon-no-shadow.scale-down:hover,
	.menu-icon-no-shadow.scale-down:active {
		cursor:									pointer;
		transition-duration:					400ms;
		transform-origin:						center center;
		transform:								scale( 0.9);
		filter:									var( --svg-filter-selected-button-highlight );	}
/**************************************************************************************************/
/** MENU BUTTONS END ******************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** COPYRIGHT *************************************************************************************/
/**************************************************************************************************/
	.copyright {
		position:								absolute;
		left:									50%;
		bottom:									.1rem;
		transform:								translate( -50% );
		display:								flex;
		justify-self:							center;
		font:									var( --font-very-small-regular-fixed );
		color:									var( --purple );
		width:									auto;	}
/**************************************************************************************************/
/** COPYRIGHT END *********************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** SITE HEADINGS *********************************************************************************/
/**************************************************************************************************/
	h1,
	h2 {
		box-sizing:								border-box;
		margin:									0.8rem 0 0.5rem 0;
		padding:								0.2rem 3rem 0.4rem 1rem;
		width:									fit-content;
		align-self:								center;
		box-shadow:								var( --box-shadow-black );
		padding:								0.2rem 1rem 0.4rem 1rem;
		border-radius:							0 calc( var( --site-menus-size ) / 2 ) calc( var( --site-menus-size ) / 2 ) calc( var( --site-menus-size ) / 3 );	}

	h1 {
		font:									var( --font-headers );
		justify-self:							center;	}

	h1.full-width
	h2.full-width {
		width:									100%;	}

	h1.normal {
		background-color:						var( --black );
		color:									var( --white );
		border:									var( --site-menus-border );}

	h1.red {
		background-color:						var( --red );
		color:									var( --white );
		border:									var( --black );}

	h2 {
		font:									var(--font-headers );
		justify-self:							flex-start;	}

	h2.normal {
		color:									var( --white );
		background-color:						var( --black );
		border:									var( --site-menus-border );	}

	h2.red {
		color:									var( --white );
		background-color:						var( --red );
		border:									var( --black );	}
/**************************************************************************************************/
/** SITE HEADINGS END *****************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** SITE BUTTONS **********************************************************************************/
/**************************************************************************************************/
	.button {	/*	STANDARD BUTTON	*/
		height:									var(--button-size);
		width:									var(--button-size);
		cursor:									pointer;
		display:								flex;
		box-sizing:								border-box;
		align-items:							center;
		justify-content:						center;
		padding:								3%;
		transform-origin:						center bottom;
		transition:								all 0.3s ease-in;	}


	.close-button-small{
		height:									calc( var(--button-size) *.75 );
		width:									1 / 1;	}

	.button:not(.no-scale):hover,	/*	ON ALL BUTTONS INCREASE SIZE ON HOVER OR ACTIVE */
	.button:not(.no-scale):active {
		transform-origin:						center center;
		transform:								scale( 1.25 );	}

	.profile-buttons-container {
		box-shadow:								var(--box-shadow-black);
		border:									var( --grid-profile-menu-border );
		border-top:								var( --grid-profile-menu-border-top );
		border-radius:							var( --grid-profile-menu-border-radius );
		background-color:						#ffffff40;
		position:								absolute;
		z-index:								var( --z-index-profile-buttons );
		height:									var( --grid-profile-menu-button-size );
		width:									auto;
		top:									var( --space-default );
		left:									50%;
		transform: 								translateX( -50% );
		display:								flex;
		justify-content:						center;
		flex-flow:								row;	}

	.profile-button-container-small {
		padding:								5px;
		height:									var( --grid-profile-menu-button-size );
		width:									var( --grid-profile-menu-button-size );	}

	.profile-button-small{
		height:									100%;
		width:									100%;	}

	#video-button-close,	/*	DIALOG CLOSE BUTTON POSITIONING CONTAINER */
	.dialog-button-close {
		position:								absolute;
		top:									0;
		right:									0;
		transform:								translate( 50%, -50% );
		height:									calc( var( --button-size ) * 0.75 );
		aspect-ratio:							1/1;
}
	.dialog-button-close {
		z-index:								var( --z-index-dialog-close-button );
	}

	#video-button-close {
		z-index:								var( --z-index-dialog-video-close-button );	}


	/* .video-button-close,	/*	DIALOG CLOSE BUTTON POSITIONING CONTAINER */
/*	.dialog-button-close {
		position:								absolute;
		top:									0;
		right:									0;
		transform:								translate( 50%, -50% );
		height:									var( --button-size );
		aspect-ratio:							1/1;
		z-index:								var( --z-index-dialog-close-button );	} */







/**************************************************************************************************/
/** SITE BUTTONS END ******************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** SINGLE PROFILE VERIFICATION ICON GRID *********************************************************/
/**************************************************************************************************/
	.single-profile-verification-container {
		display:								flex;
		flex-direction:							column;
		height:									auto;
		width:									100%;	}

	.single-profile-verification-grid {
		width:									100%;
		height:									auto;
		display:								grid;
		grid-template-columns:					1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:					"email photo identity mobile interview";
		gap:									0.2rem;	}

	.verify-photo		{	grid-area:			photo;	}
	.verify-email		{	grid-area:			email;	}
	.verify-interview	{	grid-area:			interview;	}
	.verify-identity	{	grid-area:			identity;	}
	.verify-mobile		{	grid-area:			mobile;	}

	.verify-photo,
	.verify-email,
	.verify-interview,
	.verify-identity,
	.verify-mobile {
		width:									100%;
		cursor:									help;
		aspect-ratio:							1 / 1;	}

	.verify-filter-0 {
		filter:									var(--svg-filter-grey); }

	.verify-filter-1 {
		filter:									var(--svg-filter-green); }

/**************************************************************************************************/
/** SINGLE PROFILE VERIFICATION ICON GRID END *****************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** SYSTEM PAGES **********************************************************************************/
/**************************************************************************************************/
	.system-page {
		display:								flex;
		justify-content:						center;
		align-items:							center;
		height:									auto;
		flex-direction:							column;
		padding-top:							6%;	}

	.system-page img{
		width:									var( --site-logo-width );
		height:									auto;	}

	.system-page-text {
		justify-self:							center;
		justify-items:							center;	}
/**************************************************************************************************/
/** SYSTEM PAGES END ******************************************************************************/
/**************************************************************************************************/



/**************************************************************************************************/
/** MISC BITS AND PIECES **************************************************************************/
/**************************************************************************************************/
	.hide {
		display:								none !important;	}

	.word-wrap {
		word-wrap:								break-word;	}

	.fade-in {
		opacity: 1;
		animation-name:							fadeIn;
		animation-iteration-count:				1;
		animation-timing-function:				ease-in;
		animation-duration:						0.2s;	}

	@keyframes fadeIn {
		0%   {	opacity:						0;	}
		100% {	opacity:						1;	}	}

	p {
		font:									var( --font-medium-regular );
		margin-bottom:							0.3rem;
		color:									var( --black );
		padding-left:							var( --space-2 );
		letter-spacing:							var( --letter-spacing );	}

	.svg-icons{
 		 height:								0;
 		 position:								absolute;
 		 width:									0;	}
/**************************************************************************************************/
/** MISC BITS AND PIECES END **********************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** UL LISTS **************************************************************************************/
/**************************************************************************************************/
	ul {
		list-style:								none;	}

	ul li {
		list-style:								none;
		font:									var( --font-medium-regular );
		margin-bottom:							0.1rem;
		color:									var( --black );
		padding-left:							1.25rem;
		background-image:						url( /support/images/system-bullet-normal.svg );
		background-repeat:						no-repeat;
		background-size:						0.90rem;
		background-position-x:					0;
		background-position-y:					0.3rem;	}

	ul ul {
		list-style:								none;
		margin-left:							var(--space-2);	}

	ul ul li {
		list-style:								none;
		font:									var( --font-medium-regular );
		margin-bottom:							0.1rem;
		color:									var( --red );
		padding-left:							1.25rem;
		background-image:						url( /support/images/system-bullet-red.svg );
		background-repeat:						no-repeat;
		background-size:						0.75rem;
		background-position-x:					0;
		background-position-y:					0.3rem;	}

	ul.small li {
		font:									var( --font-small-regular );
		background-size:						0.70rem;
		background-position-y:					0.2rem;	}

	ul.small ul.small li {
		font:									var( --font-small-regular );
		background-size:						0.55rem;
		background-position-y:					0.2rem;	}
/**************************************************************************************************/
/** UL LISTS END **********************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** HELP PAGE PRICE GRID **************************************************************************/
/**************************************************************************************************/
	.fees-grid {
		display:								grid;
		gap:									.1rem;
		grid-template-columns:					.1fr 1fr;
		width:									fit-content;	}

	.fees-grid-fee {
		color:									var( --red );
		justify-self:							flex-end;	}

	.fees-grid-description {
		color:									var( --black );
		justify-self:							flex-start;	}
/**************************************************************************************************/
/** HELP PAGE PRICE GRID END **********************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** CHAT ******************************************************************************************/
/**************************************************************************************************/
	.chat-container {
		border:									var( --site-menus-border );
		background-color:						var( --site-menus-background-color);
		border-radius:							var( --box-border-radius-narrow );
		box-shadow:								var( --box-shadow-boxes );
		display:								flex;
		justify-self:							center;
		justify-content:						center;
		height:									100%;
		width:									50%;
		padding:								var( --space-default);
	}


	.chat-grid {	/*	MAIN LAYOUT GRID */
		display:								grid;
		height:									100%;
		min-height:								100%;
		width:									100%;
		grid-template-columns:					1fr;
		grid-template-rows:						calc( var( --button-size ) + 2rem ) 1fr 0px var( --button-size ) 5px;
		grid-template-areas:					"chat-header"
												"chat-conversation"
												"chat-add-message"
												"chat-menu-container"
												"chat-fetching-indicator";

											border:1px solid red;
											}

	.chat-header {
		border-radius:							var( --site-menus-border-radius );
		grid-area:								chat-header;
		display:								flex;
		flex-direction:							row;
		justify-content:						center;
		align-items:							center;	}

	.chat-header-grid {
		width:									100%;
		display:								grid;
		grid-template-columns:					1fr;
		grid-template-areas:					"contactedImage"
												"contactedName";
		padding:								0 .5rem;
		place-items:							center;	}

	.chat-header-grid .image{
		grid-area:								contactedImage;
		width:									auto;
		height:									auto;
		margin:									0;
		padding:								0;
		border:									2px solid var( --grey-dark );
		box-shadow:								var( --box-shadow-black );
		border-radius:							50%;
		filter:									grayscale(100%);
		justify-content:						center;	}

	 .chat-header-grid-image {
		width:									var( --button-size );
		height:									var( --button-size );
		border-radius:							50%;	}

	.chat-header-grid .name{
		grid-area:								contactedName;
		font:									var( --font-medium-bold );
		padding:								0 0.5rem;
		color:									var( --grey-dark );	}

	.chat-header-grid.name.online {
		color:									var( --green );	}

	.chat-header-grid.image.online {
		border:									2px solid var( --green );
		box-shadow:								var( --box-shadow-green );
		filter:									none;	}

	.chat-conversation {	/*	CONVERSATION DIV */
		grid-area:	chat-conversation;
		display:								flex;
		flex-direction:							column;
		overflow-y:								auto;
		padding:								var( --space-default );
		width:									100%;
		scrollbar-width:						none;	}

	.chat-message-date {
		user-select:							none;
		margin:									var(--space-default);
		align-self:								center;
		width:									fit-content;
		font:									var(--font-medium-bold);	}

	.by-user,
	.by-contacted,
	.translation {
		user-select:							none;
		display:								flex;
		align-content:							center;
		flex-direction:							column;
		word-wrap:								break-word;
		height:									auto;
		width:									fit-content;
		font:									var(--font-medium-regular);
		padding:								var(--space-default) var(--space-2) 0 var(--space-2);
		margin-bottom:							0.5rem;
		max-width:								80%;
		min-width:								auto;
		color:									var(--white);

			}

	.by-user{
		border-radius:							0.5rem;
		box-shadow:								var( --box-shadow-boxes );
		align-self:								flex-end;
		color:									var( --white );
		background:								var( --grey-dark );
		margin-right:							0.5rem;
		padding-bottom:							0.5rem;
			white-space: pre-line;
	}

	.by-contacted {
		border-radius:							0.5rem;
		box-shadow:								var( --box-shadow-boxes );
		align-self:								flex-start;
		color:									var( --white );
		margin-left:							0.5rem;

			white-space: pre-line;

	}

	.by-contacted.translation {
		border-radius:							0.5rem;
		box-shadow:								var( --box-shadow-boxes );
		align-self:								flex-start;
		color:									var( --black);
		margin-left:							0.5rem;
		font:									var( --font-medium-italic );
		align-self:								flex-start;
		background:								var( --chat-translation );
		padding-bottom:							0.5rem;
			}

	.by-contacted.F {
		background:								var( --pink );	}

	.by-contacted.M {
		background:								var( --blue );	}

	.by-contacted.O {
		background:								var( --purple );	}

	.speech-left,
	.speech-right {
		position:								absolute;
		top:									0.30rem;
		z-index:								1;
		--b:									0.70rem;
		--h:									0.70rem;
		border-radius:							0.50rem;	}

	.speech-right{
		right:									0.40rem;
		clip-path:								polygon( 100% 100%, 0 100%, 0 0, calc( 100% - var( --b ) ) 0, calc( 100% + var( --h ) ) calc( -1 * var( --h ) ), 100% var( --b ) );
		border-image:							conic-gradient( var( --grey-dark ) 0 0) 999 999 0 0 / calc( var( --h ) + var( --b ) ) calc( var( --h ) + var( --b ) ) 0 0 / var( --h ) var( --h ) 0 0;	}

	.speech-left {
		left:									0.40rem;
		clip-path:								polygon(0 100%, 100% 100%, 100% 0, var( --b ) 0, calc( -1 * var( --h ) ) calc( -1 * var( --h ) ), 0 var( --b ) );	}

	.speech-left.F{
		border-image:							conic-gradient( var( --pink ) 0 0 ) 999 0 0 999 / calc( var( --h ) + var( --b ) ) 0 0 calc( var( --h ) + var( --b ) ) / var( --h ) 0 0 var( --h );	}

	.speech-left.M{
		border-image:							conic-gradient( var( --blue ) 0 0 ) 999 0 0 999 / calc( var( --h ) + var( --b ) ) 0 0 calc( var( --h ) + var( --b ) ) / var( --h ) 0 0 var( --h );	}

	.speech-left.O{
		border-image:							conic-gradient( var( --purple ) 0 0 ) 999 0 0 999 / calc( var( --h ) + var( --b ) ) 0 0 calc( var( --h ) + var( --b ) ) / var( --h ) 0 0 var( --h );	}

	.google {	/*	GOOGLE TRANSLATE BUTTON */
		height:									1.8rem;
		width:									1.8rem;
		position:								absolute;
		display:								flex;
		justify-content:						center;
		align-content:							center;
		top:									-0.5rem;
		right:									-1.1rem;
		/* transform:								translateY( -50% );	 */

	}

	.button.translate{	/*	STANDARD BUTTON */
		height:									100%;
		width:									100%;	}

	.chat-grid.write-message {
		grid-template-rows:						calc( var( --button-size ) + 2rem ) 2fr 2fr var( --button-size ) 5px !important;	}

	.chat-message-time {
		color:									var( --white );
		align-self:								flex-end;
		font:									var( --font-very-small-regular-fixed );	}

	.chat-add-message {	/*	ADD A MESSAGE DIV */
		grid-area:								chat-add-message;
		width:									100%;
		height:									100%;

			/* grid-template-rows:						calc( var( --button-size ) + 2rem ) 1fr 0px var( --button-size ) 5px; */





	}
	 .chat-message-write-box-area {

		grid-area:								chat-add-message;
	 }

	 .chat-message-write-box {

		/* height:									100%;*/
		width:									50% !important;
	/*	text-wrap:								wrap; */
		/* font:									var( --font-medium-regular ) !important; */
		/* color:									var( --white); */
	/*	border-radius:							calc( 1.5 * var( --rounded-corners ) );	} */


		margin: 0 var(--space-default)  0 var(--space-default);
	 }

	/* .chat-message-write-box.F {
		background-color:						var( --pink );	}

	.chat-message-write-box.M {
		background-color:						var( --blue );	}

	.chat-message-write-box.O {
		background-color:						var( --office );	} */

	.characters-remaining-count {
		position:								absolute;
		right:									-0.07rem;
		top:									-0.5rem;
		font:									var( --font-small-regular-fixed );
		display:								flex;
		border:									1px solid var( --black );
		background-color:						var( --red );
		color:									var( --white );
		border-radius:							15px;
		width:									fit-content;
		height:									fit-content;
		padding:								0 .4rem;	}

	.chat-menu-container {
		grid-area:								chat-menu-container;
		display:								flex;
		justify-content:						center;
		box-sizing:								content-box;
		width:									100%;
		height:									var( --button-size );
		max-height:								var( --button-size );
		max-width:								100%;	}

	.chat-fetching-indicator {
		display:								flex;
		justify-self:							center;
		grid-area:								chat-fetching-indicator;
		width:									60px;
  		aspect-ratio:							4;
  		background:								radial-gradient(circle closest-side,#009600 90%,#0000) 0/calc(100%/3) 100% space;
  		clip-path:								inset(0 100% 0 0);
  		animation:								chat-fetching 1s steps(4) infinite;	}

	@keyframes chat-fetching {
		to{	clip-path: inset(0 -34% 0 0)	}	}
/**************************************************************************************************/
/** CHAT END **************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/** LOGIN WARNINGS ********************************************************************************/
/**************************************************************************************************/
	.login-warning-container {	/*	LOGIN ERROR WARNING MESSAGE */
		display:								flex;
		justify-content:						center;
		box-sizing:								content-box;
		width:									100%;
		height:									auto;
		margin:									var( --margin-padding-default );	}

	.login-warning-text {	/*	LOGIN ERROR WARNING MESSAGE TEXT */
		background:								var( --red );
		color:									var( --white );
		border-radius:							var( --rounded-corners );
		width:									100%;
		font:									var( --font-medium-regular );
		padding:								var( --space-2 );
		text-align:								center;	}
/**************************************************************************************************/
/** LOGIN WARNINGS END ****************************************************************************/
/**************************************************************************************************/




















	#profile-action-container {
		width:									fit-content;
		max-width:								50vw;
		height:									fit-content;
		display:								flex;	}

	.profile-action-title,
	.profile-action-subtitle {
		font:									var(--font-medium-regular);
		color:									var(--white);
		background:								var(--red);
		border-radius:							var(--rounded-corners);
		padding:								var(--margin-padding-default);
		width:									100%;
		text-align:								center;
		box-sizing:								content-box;
		margin:									var( --space-2 ) 0;	}

	.profile-action-subtitle {
		margin:									0;	}

	#profile-action {
		flex-wrap:								wrap;
		display:								flex;
		justify-content:						center;	}

	.profile-action-line {
		display:								flex;
		justify-content:						center;
		width:									100%;
		padding-bottom:							var( --space-half-default );	}

	.profile-action-line.bottom {
		align-self:								flex-end;	}

	.profile-action-reason-height {
		min-height:								10rem;margin:var(--space-2) 0;	}

	#profile-action-image {
		width:									var( --desktop-profile-width-small );
		height:									auto;	}

	@media only screen and ( max-width: 768px ) {
		#profile-action-container{
			width:								100%;	}	}

	.swappable {
		cursor:									pointer;	}

	.test-mode {
		width:									90%;
		align-items:							center;
		display:								flex;
		flex-direction:							column;
		border:									1px solid var( --black ) ;
		border-radius:							var( --box-border-radius );
		justify-self:							center;
		box-shadow:								var( --box-shadow-black );
		margin-bottom:							0.75rem;
		background-color:						var( --red );
		color:									var( --white );
		padding-top:							1rem;
		padding-bottom:							1rem;
		font:									bold calc(.75rem + 0.5vw) "yanadate-regular";	}

	@media only screen and ( max-width: 768px ) {
		.test-mode {
			width:								100%;	}	}

/*	CONTENT PAGE */
	.body-content-page {
		width:									100%;
		padding:								var(--space-default);
		overflow-y:								hidden;	}

	.verify-email-container {
		width:									100%;
		display:								flex;
		flex-direction:							column;
		align-items:							center;
		margin-bottom:							var(--space-default);	}


	.verify-email-code-container{
		justify-self:							center;
		display:								grid;
		grid-template-columns:					repeat(9, var( --button-size ) );
		grid-template-rows:						var( --button-size );
		grid-gap:								var(--space-default);
		width:									fit-content;
		margin-bottom:							var(--space-default);	}

	/* .verify-text {
		width:									fit-content;
		font:									var(--font-medium-regular);
		color:									var(--purple);
		padding-left:							var(--space-2);	}

	.verify-text.F {		color:				var(--pink);	}

	.verify-text.M {		color:				var(--blue);	} */

	.verify-text.error {	color:				var(--red);	}

	.input.c1,
	.input.c2,
	.input.c3,
	.input.c4,
	.input.c5,
	.input.c6,
	.input.c7 {
		font:									var(--font-h1) !important;
		padding:								0;
		background-color:						var(--white) !important;
		color:									var(--purple) !important;
		border-radius:							4px;
		text-align:								center;
		width:									100% !important;
		height:									100% !important;
		box-sizing:								content-box;
		border:									1px solid var( --red );	}

/*	FOR VIEWING A SINGLE PROFILE */
	.single-profile {
		display:								grid;
		grid-template-columns:					16% 84%;
		grid-template-areas:					"media data";
		height:									100%;
		width:									100%;	}

	.single-profile-media {
		grid-area: media;
 		width:									100%;
		height:									100%;
		display:								flex;
 		flex-direction:							column;	}

	.single-profile-media-container {
		width:									100%;
		height:									auto;	}

	.single-profile-media-grid{
		width:									100%;
		height:									auto;
		display:								grid;
		grid-template-columns:					1fr 1fr 1fr 1fr;
		grid-template-rows:						5fr 1fr 1fr;
		grid-template-areas:					"img0 img0 img0 img0"
												"img0 img0 img0 img0"
												"img0 img0 img0 img0"
												"img0 img0 img0 img0"
												"img0 img0 img0 img0"
												"img1 img2 img3 img4"
												"img5 img6 img7 img8";	}

	@media only screen and ( max-width: 768px ) {

		.single-profile-media-grid {
			border:1px solid black;
			grid-template-columns:				1fr 1fr 1fr 1fr;
			grid-template-rows:					5fr 1fr 1fr 1fr 1fr;
		 	grid-template-areas:				"img0 img0 img0 img0"
												"img0 img0 img0 img0"
												"img0 img0 img0 img0"
												"img0 img0 img0 img0"
												"img0 img0 img0 img0"
												"img1 img1 img2 img2"
												"img3 img3 img4 img4"
												"img5 img5 img6 img6"
												"img7 img7 img8 img8";	}	}

	.single-profile-video{
		width:									100%;
		height:									auto;
		display:								grid;
		grid-template-columns:					1fr 1fr;
		grid-template-rows:						1fr;
		grid-auto-flow:							row;	}

	.img-0 {
		width:									100%;
		height:									auto;
		grid-area:	img0;	}

	.block-microsoft-cock-up-container {
		width:									100%;
		height:									auto;
		grid-area:	img0;	}

	.block-microsoft-cock-up-container .after{
		position:								absolute;
		top:									0;
		left:									0;
		width:									100%;
		height:									100%;	}

	.img-1 {	grid-area:						img1;	}
	.img-2 {	grid-area:						img2;	}
	.img-3 {	grid-area:						img3;	}
	.img-4 {	grid-area:						img4;	}
	.img-5 {	grid-area:						img5;	}
	.img-6 {	grid-area:						img6;	}
	.img-7 {	grid-area:						img7;	}
	.img-8 {	grid-area:						img8;	}

	.img-1,
	.img-2,
	.img-3,
	.img-4,
	.img-5,
	.img-6,
	.img-7,
	.img-8,
	.img-9,
	.img-10 {
		width:									100%;
		height:									auto;	}

	@media only screen and ( max-width: 768px ) {
		.single-profile {
			grid-template-columns:				1fr;
			grid-template-areas:				"media"
												"data";
			height:								100%;
			width:								100%;	}	}

	.single-profile-data {
		grid-area:	data;	}

	.single-profile-data-grid {
		width:									100%;
		grid-template-columns:					auto 1fr;
		display:								grid;
		box-sizing:								border-box;
		gap:									0;
		overflow-y:								auto;
		height:									auto;
		margin-left:							.3rem;	}

	@media only screen and ( max-width: 768px ) {
		.single-profile-data-grid {
			overflow-y:							auto;
			height:								100%;	}	}

	.data-title,
	.data-text {
		letter-spacing:							var(--letter-spacing);
		padding:								0 0 0 var(--space-default);
		box-sizing:								border-box;
		margin:									var(--space-none);
		display:								flex;
		flex-wrap:								wrap;
		align-items:							start;
		padding-bottom:							0.1rem;	}

	.data-title {
		color:									var(--purple);
		font:									var(--font-medium-bold-fixed);	}

	.data-text {
		font:									var(--font-medium-regular-fixed);	}

	.data-text.F {
		color:									var(--pink);	}

	.data-text.M {
		color:									var(--blue);	}

	.data-contact-status-title {
		grid-column:							1 / span 2;
		color:									var(--purple);
		font:									var(--font-medium-bold);
		letter-spacing:							var(--letter-spacing);
		white-space:							nowrap;
		padding:								var(--space-half-default) 0;
		display:								flex;
		justify-content:						center;
		flex-wrap:								wrap;	}

	.data-contact-status-text {
		padding:								0 0 0 var(--space-default);
		box-sizing:								border-box;
		margin:									var(--space-none);
		font:									var(--font-medium-regular);
		letter-spacing:							var(--letter-spacing);
		display:								flex;
		justify-content:						flex-start;
		flex-wrap:								wrap;	}

	.data-contact-status-name-F{
		color:									var(--pink);	}

	.data-contact-status-name-M{
		color:									var(--blue);	}

	.empty {
		min-height:								3em;	}

	.wrappable {
		width:									100%;
		text-wrap:								wrap;
		word-wrap:								break-word;
		text-align:								start;	}

	#video {
		min-width:								100%;
		min-height:								100%;
		background:								var( --screen-fade );
		z-index:								var( --z-index-dialog-video );	}

	#video-wrapper {
		box-sizing:								content-box;
		height:									80%;
		aspect-ratio:							0.5625 / 1;
		position:								fixed;
		top:									50%;
		left:									50%;
		transform:								translate( -50%, -50%);
		background:								var(--black);

		z-index:								var( --z-index-dialog-video-wrapper );
	}

	#video-player {
		width:									100%;
		height:									100%;	}










	.content-container {
		height:									100%;
		overflow-Y:								hidden;
		padding:								0.5rem;}

	.content-container.small {
		width:									50%;
		justify-self:							center; }

	.content-container.very-small {
		width:									35%;
		justify-self:							center; }














/**************************************************************************************************/
/** GRID TO DISPLAY PROFILES **********************************************************************/
/**************************************************************************************************/
	.profiles-grid {	/*	A GRID TO DISPLAY PROFILES */
		display:								grid;
		justify-content:						center;
		padding:								0;
		overflow-y:								auto;
		height:									100%;
		flex-basis:								min-content;	}

	.profiles-grid-no-data {
		width:									5vh;
		height:									5vh;
		display:								flex;
		justify-self:							center;	}

	.profiles-grid.medium {	/*	NEW SET PROFILE SIZE TO MEDIUM */
		grid-template-columns:					repeat( auto-fit, minmax( var(--profile-grid-medium-image-container-width ), var( --profile-grid-medium-image-container-width ) ) );
		grid-auto-rows:							var( --profile-grid-medium-image-container-height );
		gap:									1.2rem;	}

	.profiles-grid.small {
		grid-template-columns:					repeat( auto-fit, minmax( var(--profile-grid-small-image-container-width ), var( --profile-grid-small-image-container-width ) ) );
		grid-auto-rows:							var( --profile-grid-small-image-container-height );
		gap:									0.5rem;	}

	.profiles-grid.center{
		justify-content:						center;	}

	.profiles-grid.start{
		justify-content:						flex-start;	}

	.profile-container {	/*	EACH PROFILE IN THE GRID */
		padding:								0.4rem 0.4rem 0.8rem 0.4rem;
		width:									100%;
		height:									100%;
		position:								relative;	}

	.profile-caption {
		padding:								1% 3%;
		position:								absolute;
		left:									0;
		padding:								0.4rem 0.6rem;
		display:								grid;
		grid-template-columns:					1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:					"caption-name			caption-name		caption-name		caption-stars		caption-stars"
												"caption-relationship	caption-country		caption-country		caption-country		caption-country"
												"caption-relationship	caption-three-words	caption-three-words	caption-three-words caption-three-words";
		background:								var(--white);
		width:									100%;
		bottom:									0;
		border-radius:							var( --box-border-radius-small );
		box-shadow:								inset 6px 6px 8px rgba(255, 255, 255, .5), inset -6px -6px 8px rgba(0, 0, 0, .5);	}

	.profile-caption.F {
		background-color:						var( --pink-glass );
		border:									var( --pink );	}

	.profile-caption.M {
		background-color:						var( --blue-glass );
		border:									var( --blue );	}

	.profile-caption.Y {
		background-color:						var( --yellow-glass );
		border:									var( --yellow );	}

	.profile-caption-name {
		grid-area:								caption-name;
		justify-self:							flex-start;
		line-height:							93%;
		font:									var( --font-medium-bold-fixed );
		width:									100%;	}

	.profile-stars-image {
		grid-area:								caption-stars;
		filter:									var( --svg-filter-drop-shadow-black );
		display:								flex;
		justify-self:							flex-end;
		align-self:								center;
		width:									auto;
		height:									0.75rem;	}

	.profile-stars-image.size  {
		width:									3.813333rem;
		height:									1.1rem;	}

	.profile-caption-relationship-container {
		grid-area:								caption-relationship;
		width:									100%;
		height:									100%;
		display:								flex;
		justify-content:						center;
		align-items:							center;	}

	.profile-caption-relationship {
		width:									1.7rem;
		aspect-ratio:							1 / 1;
		filter:									drop-shadow( 0 0 0.15rem var(--white) );	}

	.profile-caption-country{
		grid-area:								caption-country;
		display:								flex;
		justify-self:							flex-end;
		line-height:							95%;	}

	.profile-caption-three-words {
		grid-area:								caption-three-words;
		display:								flex;
		justify-self:							flex-end;
		line-height:							95%;	}

	.profile-caption-name.F,
	.profile-caption-country.F,
	.profile-caption-three-words.F,
	.profile-caption-name.M,
	.profile-caption-country.M,
	.profile-caption-three-words.M {
		display:								flex;
		color:									var( --white );
		letter-spacing:							var( --letter-spacing );	}

	.profile-caption-name.Y
	.profile-caption-country.Y
	.profile-caption-three-words.Y {
		display:								flex;
		color:									var( --black );	}

	.profile-caption-country {
		font:									var( --font-small-regular-fixed );
		line-height:							95%;	}

	.profile-caption-three-words {
		letter-spacing:							var( --letter-spacing-narrow );
		font:									var( --font-small-regular-fixed );	}

	.profile {
		position:								relative;
		z-index:								var( --z-index-profile-grid );
		box-sizing:								border-box;
		width:									100%;
		height:									100%;
		overflow:								hidden;
		letter-spacing:							var( --letter-spacing );	}

	.profile-image {	/*	PROFILE IMAGE */
		position:								relative;
		width:									100%;
		height:									100%;
		border-radius:							0.3rem;	}

	.profile .online-0 {
		display:								none;	}

	.profile .online-1 {
		background-color:						var(--green);
		color:									var(--white);
		width:									fit-content;
		position:								absolute;
		bottom:									2.5rem;
		left:									50%;
		transform:								translateX(-50%);
		padding:								0 .5rem;
		border-radius:							0.4rem;
		font:									var( --font-small-regular-fixed );	}

	.blink {
		animation:								blink-animation 1s step-start 0s infinite;	}

	@keyframes blink-animation {
		50% {
			color:								var( --green );	}	}

	.no-highlight {	/*	ON HOVER FOR BLOCKED PROFILES SET CURSOR TO BLOCKED */
		cursor:									no-drop;	}

	.highlight {
		cursor:									pointer;
		box-shadow:								var( --box-shadow-black );	}

	.highlight.selected {
		outline:								0.32rem solid var( --green );
		border-radius:							0.4rem;	}


	.greyscale {	/*	SET IMG TO GREYSCALE FOR BLOCKED PROFILES */
		filter:									grayscale( 1 );
		opacity:								0.5;	}

	.profile-military-single-profile {
		position:								absolute;
		top:									0.05em;
		right:									0.05em;
		width:									calc( var(--profile-icon-height) * 2 );
		aspect-ratio:							1/1;
		cursor:									pointer;	}

	.profile-container .unread-messages {
		position:								absolute;
		display:								flex;
		justify-content:						center;
		align-items:							center;
		top:									0;
		left:									0;
		z-index:								var(--z-index-menu-profile-grid-unread-messages);
		border-radius:							0 50% 50% 50%;
		color:									white;
		font:									var(--font-medium-regular);
		min-width:								var(--profile-unread-messages-width);
		aspect-ratio:							1/1;
		cursor:									cell;
		background:								var(--green);	}
/**************************************************************************************************/
/** GRID TO DISPLAY PROFILES END ******************************************************************/
/**************************************************************************************************/

















/*	INPUTS */
	.input,
	.input-caption,
	.input-autosize {
		appearance:								none;
		outline:								none;
		padding:								0.20rem;
		font:									var( --font-medium-regular-fixed );
		border-radius:							0.20rem;
		letter-spacing:							var( --letter-spacing );
		color:									var( --white );
		width:									100%;
		/* border:									1px solid var( --grey-dark ); */
		background-color:						var( --purple-glass );
		border:	1px solid var(--red);
	}

	.input-caption {
		font:									var( --font-medium-bold-fixed );
		color:									var( --purple );
		background-color:						var( --white );
		padding:								0;
		align-self:								center;
		border:									none;	}

	.input-caption.disabled {
		color:									var( --grey-dark);	}

	.input-autosize {
		display:								block;
		field-sizing:							content;
		min-width:								100% !important;	}

	.input.disabled,
	.input-autosize.disabled {
		border:									1px solid var( --grey-dark );
		pointer-events:							none;
		color:									var( --grey-dark );
		background-color:						var( --grey-light );	}

	/* .input::not(.ticked) {
			border:									1px solid var(--red) !important;	} */

	.input.not-red{
				border:									1px solid var( --grey-dark );
	}




	.ticked,
	.c1.ticked,
	.c2.ticked,
	.c3.ticked,
	.c4.ticked,
	.c5.ticked,
	.c6.ticked,
	.c7.ticked {
		background-color:						var(--green-light) !important;
		color:									var( --green-dark ) !important;
		border:									1px solid var(--green-dark) !important;	}

	.three-words-grid {
		display:								grid;
		grid-template-columns:					32% 32% 32%;
		column-gap:								2%;	}

	.warning-email,
	.warning-military,
	.warning-identity-documents	{
		font:									var(--font-small-bold);
		color:									var(--red);
		display:								flex;
		justify-content:						center;
		align-self:								center;
		padding:								0 var(--space-3) .3rem  var(--space-3);	}

	.profile-edit-grid {
		display:								grid;
		justify-self:							center;
		width:									fit-content;
		grid-template-columns:					1fr 1fr;
		gap:									2px;
		padding:								0 0.4rem 3.00rem 0.4rem;
		background-color:						var( --white );

		grid-template-areas:					"header-profile-information			header-profile-information"
												"c-auto								c-auto"
												"c-email							i-email"
												"alert-warning-email		 		alert-warning-email"
												"c-password							i-password"
												"c-password-confirm					i-password-confirm"
												"c-forename							i-forename"
												"c-surname							i-surname"
												"c-mobile							i-mobile"
												"c-birth-date						i-birth-date"
												"c-age								i-age"
												"c-zodiac							i-zodiac"
												"c-marital							i-marital"
												"header-languages					header-languages"
												"c-country-birth					i-country-birth"
												"c-country-live						i-country-live"
												"c-city								i-city"
												"c-language-primary					i-language-primary"
												"c-language-2						i-language-2"
												"c-language-level-2					i-language-level-2"
												"c-language-3						i-language-3"
												"c-language-level-3					i-language-level-3"
												"c-site-language					i-site-language"
												"header-physical-attributes			header-physical-attributes"
												"c-height							i-height"
												"c-weight							i-weight"
												"c-hair								i-hair"
												"c-eye								i-eye"
												"c-smoke							i-smoke"
												"c-alcohol							i-alcohol"
												"c-children-have					i-children-have"
												"c-children-want					i-children-want"
												"c-relocate							i-relocate"
												"c-tattoos							i-tattoos"
												"c-piercings						i-piercings"
												"c-disability						i-disability"
												"c-disability-search				i-disability-search"
												"c-military							i-military"
												"alert-warning-military				alert-warning-military"
												"header-about-you					header-about-you"
												"c-three-words						c-three-words"
												"i-three-words						i-three-words"
												"c-introduction						c-introduction"
												"i-introduction						i-introduction"
												"c-more-about						c-more-about"
												"i-more-about						i-more-about"
												"c-ideal							c-ideal"
												"i-ideal							i-ideal"
												"header-profile-photographs			header-profile-photographs"
												"i-photos							i-photos"
												"header-profile-videos				header-profile-videos"
												"i-videos							i-videos"
												"header-identity-documents			header-identity-documents"
												"alert-warning-identity				alert-warning-identity"
												"i-identity							i-identity"
												"i-menu								i-menu";	}

	.header-profile-information	{	grid-area:	header-profile-information;	}
	.c-auto						{	grid-area:	c-auto;	}
	.c-email					{	grid-area:	c-email;	}
	.i-email					{	grid-area:	i-email;	}
	.alert-warning-email		{	grid-area:	alert-warning-email;	}
	.c-password					{	grid-area:	c-password;	}
	.i-password					{	grid-area:	i-password;	}
	.c-password-confirm			{	grid-area:	c-password-confirm;	}
	.i-password-confirm			{	grid-area:	i-password-confirm;	}
	.c-forename					{	grid-area:	c-forename;	}
	.i-forename					{	grid-area:	i-forename;	}
	.c-surname 					{	grid-area:	c-surname;	}
	.i-surname					{	grid-area:	i-surname;	}
	.c-mobile					{	grid-area:	c-mobile;	}
	.i-mobile					{	grid-area:	i-mobile;	}
	.c-birth-date				{	grid-area:	c-birth-date;	}
	.i-birth-date				{	grid-area:	i-birth-date;	}
	.c-age						{	grid-area:	c-age;	}
	.i-age						{	grid-area:	i-age;	}
	.c-zodiac					{	grid-area:	c-zodiac;	}
	.i-zodiac					{	grid-area:	i-zodiac;	}
	.c-marital					{	grid-area:	c-marital;	}
	.i-marital					{	grid-area:	i-marital;	}
	.header-languages			{	grid-area:	header-languages;	}
	.c-country-birth			{	grid-area:	c-country-birth;	}
	.i-country-birth			{	grid-area:	i-country-birth;	}
	.c-country-live				{	grid-area:	c-country-live;	}
	.i-country-live				{	grid-area:	i-country-live;	}
	.c-city						{	grid-area:	c-city;	}
	.i-city						{	grid-area:	i-city;	}
	.c-language-primary			{	grid-area:	c-language-primary;	}
	.i-language-primary			{	grid-area:	i-language-primary;	}
	.c-language-2				{	grid-area:	c-language-2;	}
	.i-language-2				{	grid-area:	i-language-2;	}
	.c-language-level-2			{	grid-area:	c-language-level-2;	}
	.i-language-level-2			{	grid-area:	i-language-level-2;	}
	.c-language-3				{	grid-area:	c-language-3;	}
	.i-language-3				{	grid-area:	i-language-3;	}
	.c-language-level-3			{	grid-area:	c-language-level-3;	}
	.i-language-level-3			{	grid-area:	i-language-level-3;	}
	.c-site-language			{	grid-area:	c-site-language;	}
	.i-site-language			{	grid-area:	i-site-language;	}
	.header-physical-attributes	{	grid-area:	header-physical-attributes;	}
	.c-height					{	grid-area:	c-height;	}
	.i-height					{	grid-area:	i-height;	}
	.c-weight					{	grid-area:	c-weight;	}
	.i-weight					{	grid-area:	i-weight;	}
	.c-hair						{	grid-area:	c-hair;	}
	.i-hair						{	grid-area:	i-hair;	}
	.c-eye						{	grid-area:	c-eye;	}
	.i-eye						{	grid-area:	i-eye;	}
	.c-smoke					{	grid-area:	c-smoke;	}
	.i-smoke					{	grid-area:	i-smoke;	}
	.c-alcohol					{	grid-area:	c-alcohol;	}
	.i-alcohol					{	grid-area:	i-alcohol;	}
	.c-children-have			{	grid-area:	c-children-have;	}
	.i-children-have			{	grid-area:	i-children-have;	}
	.c-children-want			{	grid-area:	c-children-want;	}
	.i-children-want			{	grid-area:	i-children-want;	}
	.c-relocate					{	grid-area:	c-relocate;	}
	.i-relocate					{	grid-area:	i-relocate;	}
	.c-tattoos					{	grid-area:	c-tattoos;	}
	.i-tattoos					{	grid-area:	i-tattoos;	}
	.c-piercings				{	grid-area:	c-piercings;	}
	.i-piercings				{	grid-area:	i-piercings;	}
	.c-disability				{	grid-area:	c-disability;	}
	.i-disability				{	grid-area:	i-disability;	}
	.c-disability-search		{	grid-area:	c-disability-search;	}
	.i-disability-search		{	grid-area:	i-disability-search;	}
	.c-military					{	grid-area:	c-military;	}
	.i-military					{	grid-area:	i-military;	}
	.alert-warning-military		{	grid-area:	alert-warning-military;	}
	.header-about-you			{	grid-area:	header-about-you;	}
	.c-three-words				{	grid-area:	c-three-words;	}
	.i-three-words				{	grid-area:	i-three-words;	}
	.c-introduction				{	grid-area:	c-introduction;	}
	.i-introduction				{	grid-area:	i-introduction;	}
	.c-more-about				{	grid-area:	c-more-about;	}
	.i-more-about				{	grid-area:	i-more-about;	}
	.c-ideal					{	grid-area:	c-ideal;	}
	.i-ideal					{	grid-area:	i-ideal;	}
	.header-profile-photographs	{	grid-area:	header-profile-photographs;	}
	.i-photos					{	grid-area:	i-photos;	}
	.header-profile-videos		{	grid-area:	header-profile-videos;	}
	.i-videos					{	grid-area:	i-videos;	}
	.header-identity-documents	{	grid-area:	header-identity-documents;	}
	.alert-warning-identity		{	grid-area:	alert-warning-identity;	}
	.i-identity					{	grid-area:	i-identity;	}
	.i-menu						{	grid-area:	i-menu;	}

	@media only screen and ( max-width: 768px ) {
		.profile-edit-grid {
			grid-template-columns:				100%;
			display:							grid;
			grid-template-areas:				"header-profile-information"
												"c-auto"
												"c-email"
												"i-email"
												"alert-warning-email"
												"c-password"
												"i-password"
												"c-password-confirm"
												"i-password-confirm"
												"c-forename"
												"i-forename"
												"c-surname"
												"i-surname"
												"c-mobile"
												"i-mobile"
												"c-birth-date"
												"i-birth-date"
												"c-age"
												"i-age"
												"c-zodiac"
												"i-zodiac"
												"c-marital"
												"i-marital"
												"header-languages"
												"c-country-birth"
												"i-country-birth"
												"c-country-live"
												"i-country-live"
												"c-city"
												"i-city"
												"c-language-primary"
												"i-language-primary"
												"c-language-2"
												"i-language-2"
												"c-language-level-2"
												"i-language-level-2"
												"c-language-3"
												"i-language-3"
												"c-language-level-3"
												"i-language-level-3"
												"c-site-language"
												"i-site-language"
												"header-physical-attributes"
												"c-height"
												"i-height"
												"c-weight"
												"i-weight"
												"c-hair"
												"i-hair"
												"c-eye"
												"i-eye"
												"c-smoke"
												"i-smoke"
												"c-alcohol"
												"i-alcohol"
												"c-children-have"
												"i-children-have"
												"c-children-want"
												"i-children-want"
												"c-relocate"
												"i-relocate"
												"c-tattoos"
												"i-tattoos"
												"c-piercings"
												"i-piercings"
												"c-disability"
												"i-disability"
												"c-disability-search"
												"i-disability-search"
												"c-military"
												"i-military"
												"alert-warning-military"
												"alert-warning-military"
												"header-about-you"
												"header-about-you"
												"c-three-words"
												"i-three-words"
												"c-introduction"
												"i-introduction"
												"c-more-about"
												"i-more-about"
												"c-ideal"
												"i-ideal"
												"header-profile-photographs"
												"i-photos"
												"header-profile-videos"
												"i-videos"
												"header-identity-documents"
												"alert-warning-identity"
												"i-identity"
												"i-menu";	}

		.profile-edit-grid {
			grid-template-columns:				1fr;
			width:								95%;
		}
	}

/*	DISPLAYS VARIOUS GRIDS FOR PROFILE PHOTOS, IDENTITY IMAGES AND A VIDEO UPLOADS */
	.upload-grid-photo {
		width:									100%;
		display:								grid;
		grid-template-columns:					2fr 1fr 1fr 1fr 1fr;
		grid-template-areas:					"photo-00 photo-01 photo-02 photo-03 photo-04"
												"photo-00 photo-05 photo-06 photo-07 photo-08";	}
	.upload-grid-video {
		width:									66%;
		display:								grid;
		grid-template-columns:					2fr 2fr;
		grid-template-areas:					"video-09 video-10"
												"video-09 video-10";	}

	.upload-grid-identity {
		width:									100%;
		display:								grid;
		grid-template-columns:					1fr 1fr 1fr;
		grid-template-areas:					"identity-11 identity-12 identity-13";	}

	.profile_media_00_photo_filename	{	grid-area:	photo-00;	}
	.profile_media_01_photo_filename	{	grid-area:	photo-01;	}
	.profile_media_02_photo_filename	{	grid-area:	photo-02;	}
	.profile_media_03_photo_filename	{	grid-area:	photo-03;	}
	.profile_media_04_photo_filename	{	grid-area:	photo-04;	}
	.profile_media_05_photo_filename	{	grid-area:	photo-05;	}
	.profile_media_06_photo_filename	{	grid-area:	photo-06;	}
	.profile_media_07_photo_filename	{	grid-area:	photo-07;	}
	.profile_media_08_photo_filename	{	grid-area:	photo-08;	}
	.profile_media_09_video_filename	{	grid-area:	video-09;	}
	.profile_media_10_video_filename	{	grid-area:	video-10;	}
	.profile_media_11_identity_filename {	grid-area:	identity-11;	}
	.profile_media_12_identity_filename {	grid-area:	identity-12;	}
	.profile_media_13_identity_filename	{	grid-area:	identity-13;	}

/*	AN ITEM TO GO IN ANY OF THE UPLOAD MEDIA GRIDS CELLS*/
	.upload-grid-media-item {
		width:									100%;
		aspect-ratio:							1 / var(--profile-image-height-factor);
		padding:								.2rem;
	}

	.upload-grid-media-item-identity {
		width:									100%;
		aspect-ratio:							var(--profile-image-height-factor) / 1;
		padding:								.2rem;	}

/*	THE LABEL FOR THE UPLOAD IMAGE */
	.upload-grid-media-label {
		display:								flex;
		width:									95%;
		height:									95%;
		align-self:								center;
		justify-self:							center;
		cursor:									pointer;
		align-content:							center;
		justify-content:						center;
		background-color:						var(--white);
		padding:								0.5rem;	}

/*	THE ACTUAL IMAGE */
	.upload-grid-media-image {
		object-fit: scale-down;
		display:								flex;
		align-self:								center;
		justify-self:							center;
	 	width:									100%;
		height:									100%;	}

	.upload-grid-media-locked,
	.upload-grid-media-required,
	.upload-grid-media-optional {
		position:								absolute;
		font:									var(--font-very-small-regular-fixed);
		bottom:									0;
		left:									50%;
		transform:								translateX(-50%);
		padding:								0.2rem;
		border-radius:							0 0.3rem 0.3rem 0.3rem;
		color:									var( --white );
		background:								var( --purple );	}

	.upload-grid-media-locked,
	.upload-grid-media-required {
		background:								var( --red );	}

	/* .upload-grid-media-locked {
		cursor:									not-allowed;
		background:								var( --red );	} */



/*	HIDE THE STANDARD FILE UPLOAD */
	.upload-media-input {
		display:								none;	}

	.upload-grid-media-image.locked {
		filter: grayscale(60%) opacity(50%);

	}

	.upload-grid-media-item-identity.locked {
				cursor:									not-allowed;
	}
		/*	END OF MEDIA UPLOADS */


















	.login-grid {
		width:									100%;
		height:									auto;
		row-gap:								var(--space-default);
		display:								grid;
		grid-template-columns:					1fr;
		grid-template-areas:					"login-header"
												"login-caption1"
												"login-input1"
												"login-caption2"
												"login-input2"
												"login-warning"
												"login-menu";
		padding:								var(--space-default);
		background-color:						var(--site-menus-background-color );	}

	.login-header	{	grid-area:				login-header;	}
	.login-caption1	{	grid-area:				login-caption1;	}
	.login-input1	{	grid-area:				login-input1;	}
	.login-caption2	{	grid-area:				login-caption2;	}
	.login-input2	{	grid-area:				login-input2;	}
	.login-warning	{	grid-area:				login-warning;	}
	.login-menu		{	grid-area:				login-menu;	}

	@media only screen and ( max-width: 768px ) {
		.login-container {
			width:								90%;	}	}

	#create-profile-overlay {
		position:								absolute;
		top:									0;
		left:									0;
		width:									100%;
		height:									100%;
		background-color:						var( --site-base-color );
		z-index:								var( --z-index-creating-profile-dots );
		align-content:							center;
		justify-content:						center;	}

/*	SCROLLING SETTINGS FOR CONTENT */
	.scrollable {
		-webkit-overflow-scrolling:				touch;
		overflow-y:								auto;
		scrollbar-width:						none;	}

	.contacts-page-framework {
		height:									100%;
		display:								grid;
		grid-template-columns:					1fr;
		grid-template-rows:						1fr;	}

	.contacts-profiles,
	.contacts-conversations {
		display:								flex;
		flex-flow:								column;
		height:									100%;	}

	.contacts-profiles {
		overflow-y:								hidden;	}

	.contacts-conversations {
		overflow-y:								hidden;	}

	.content-profiles {
		height:									100%;
		padding-bottom:							8rem;	}

	.cc-payment-title {
		width:									100%;
		text-align:								center;	}

	.cc-form-box{
		display:								flex;
		justify-content:						center;
		align-items:							flex-start;	}

	.cc-form-container {
		display:								grid;
		grid-column-gap:						10px;
		grid-template-columns:					auto auto;
		grid-template-rows:						90px 90px 90px;
		grid-template-areas:					"name name"
												"number number"
												"expiration security";
		max-width:								400px;
		padding:								20px;
		color: 									#707070;	}

	.cc-form-container .cc-field-container:first-of-type {
		grid-area:	name;	}

	.cc-form-container .cc-field-container:nth-of-type(2) {
		grid-area:	number;	}

	.cc-form-container .cc-field-container:nth-of-type(3) {
		grid-area:	expiration;	}

	.cc-form-container .cc-field-container:nth-of-type(4) {
		grid-area:	security;	}

	.cc-field-container input {
		box-sizing:								border-box;	}

	.cc-field-container {
		position:								relative;	}

	.cc-label {
		padding-bottom:							5px;
		font-size:								13px;	}







	.no-data-icon {
		display:flex;
		width:									12rem;
		height:									12rem;
		justify-self:							center;
	}




	.icon-test-menu{
		visibility:								visible;	}

	.icon-test-button-container {
		width:									var(--button-size);
		aspect-ratio:							1/1;	}

	.icon-test-icon-size{
		width:									100%;
		height:									100%;	}

	.icon-test-box {
		margin:									1rem 4rem 1rem 4rem;
		display:								flex;
		flex-direction:							row;
		justify-content:						center;
		width:									auto;
		height:									var( --context-menu-height );
		max-height:								var( --context-menu-height );	}