* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	/* font-size: <?#=(($mobile !== FALSE) ? '30px' : '16px')?>; */
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	zoom: fixed;
	/* -webkit-user-select: none; */
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
	/* -webkit-user-select: none; */
	/* background-color: var(--brand); */

	/* overscroll-behavior: none; */
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}

:root {
	--banner-height: 50px;
	--navbar-height: 50px;
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
	--sidebar-width: 90%;
	--color-bg: #f3f4f7;
    --color-surface: #ffffff;
    --color-text: #000000;
    --color-border: #cccccc;
    /* --brand: #008080;
	--alt-brand: #00a7a7;
	--rgb: '0,128,128'; */
}

/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey; 
	border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--brand); 
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--brand); 
}
:root{
	scrollbar-color: rgba(var(--rgb),1) #f3f4f7;
	scrollbar-width: thin;
}

body {
	overflow-x: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Disable Safari link preview/image callout */
a, img {
	user-select: none;
    -webkit-touch-callout: none;
}

a {
	user-select: none;
    -webkit-user-select: none;
}

.flirtable-icon {
    display: inline-block;        /* critical */
    width: 16px;
    height: 16px;

    background-image: url('/favicon_teal.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    vertical-align: -2px;         /* tweak to align with text */
}

#topBanner, #bottomNav {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 800; /* above sidebar */
	transform: translateX(0px) translateY(0px);
	background-color:  var(--brand);
}

#topBanner {
    height: calc(var(--banner-height) + var(--safe-top));
    padding-top: var(--safe-top);
}

#bottomNav {
    display: flex;
	height: calc(var(--navbar-height) + var(--safe-bottom));
    justify-content: flex-start;
	padding-bottom: var(--safe-bottom);
}

.nav-btn {
    width: calc(100vw / 7);
    min-width: calc(100vw / 7);
    max-width: calc(100vw / 7);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.25rem;
    height: 100%;
	/* padding-bottom: var(--safe-bottom); */
}

.nav-btn.hidden {
    display: none;
}

.nav-btn:active {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Overlay */
#sidebarOverlay {
    position: fixed;
    inset: 0;
	height: 100svh;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 900;
}

#main {
	width: 100%;
	transition: transform 0.25s ease;
    will-change: transform;
	padding-bottom: 0%;
	/* padding-bottom: calc(120px + var(--navbar-height) + var(--safe-bottom)); */
}

#footer {
	/* position: absolute; */
	width: 100%;
	height: 120px;
	/* bottom: calc(60px + var(--navbar-height) + var(--safe-bottom)); */
	padding-top: 0%;
	/* border-style: solid;
	border-color: var(--brand);
	border-width: 5px; */
	transition: transform 0.25s ease;
    will-change: transform;
	margin-bottom: calc(60px var(--safe-bottom));
}
#footerContent {
	position: fixed;
	width: 100%;
	height: 120px;
	border-style: solid;
	border-color: var(--brand);
	border-width: 5px;
}

body {
    overflow-x: hidden;
}

/* Back button */
#backTopButton {
    position: absolute;
    left: 24px;
    top: calc(var(--safe-top) + (var(--banner-height) / 2));
    transform: translateY(-50%);

    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    color: #263238;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 10;
}

/* Sidebar */
#sidebar {
	/* will-change: transform; */
    position: fixed;
    /* left: 0; */
	top: 0;
	bottom: 0;
	/* height: 100vh; */
	height: 100svh;
    /* width: var(--sidebar-width); */
	/* width: 90%;
	max-width: 90%; */
	width: 90vw;
	max-width: 90vh;
	/* width: min(90vw, 420px); */
    background: var(--brand);
    color: white;

    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1000;
}

#sidebar.sidebar-left {
    left: 0;
}

#sidebar.sidebar-right {
    right: 0;
}

.sidebar-open {
	/* padding-top: env(safe-area-inset-top); */
	padding-top: var(--safe-top);
    /* padding-bottom: env(safe-area-inset-bottom); */
	padding-bottom: var(--safe-bottom);
    overflow: hidden;
}

/* Visible state */
.sidebar-open #sidebar {
    transform: translateX(0);
}

.sidebar-open #sidebarOverlay {
    opacity: 1;
    pointer-events: auto;
}

#sidebarOverlay {
    pointer-events: none;
}
#sidebarOverlay.active {
    pointer-events: auto;
}

/* Basic structure (placeholder styling) */
.sidebar-header {
	padding-top: var(--safe-top);
    padding: 1rem;
    font-size: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.sidebar-open, .sidebar-header, .sidebar-content {
	padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    overflow: hidden;
}

.sidebar-content {
    padding: 1rem;
	/* padding-top: env(safe-area-inset-top); */
	padding-bottom: var(--safe-bottom);
	/* width: 100%;
	height: 100%; */
}
#sideButtons {
	position: absolute;
	bottom: 0 !important;
	padding-bottom: var(--safe-bottom);
}

.side-btn {
	display: flex;
	/* left: 0;
	right: 0; */
	padding: 1rem;
	/* width: calc(var(--sidebar-width) / 2); */
	height: 20px;
	margin-bottom: 10px;
	/* padding-bottom: var(--safe-bottom); */
    align-items: center;
    justify-content: center;

    font-size: 1.25rem;
    /* height: 100%; */
	border-color: #ffffff;
	border-style: solid;
	border-width: 1px;
	border-radius: 10px;
	overflow-y: hidden;
}

.side-btn.hidden {
    display: none;
}

.side-btn:active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Sidebar becomes fixed and permanent */
#sideAd {
	/* display: flex; */
	display: none;
    justify-content: flex-start;
	padding-bottom: var(--safe-bottom);

	position: fixed;
	bottom: calc(var(--navbar-height) + var(--safe-bottom));
	/* right: 0; */
	width: 100vw;
	/* height: calc(60px + var(--safe-bottom)); */
	height: 60px;
	background-color: #ff0000 !important;
	/* transform: none !important;
	transition: none; */
	transform: translateX(0px) translateY(0px);
	transition: transform 0.25s ease;
	z-index: 800;
}

.desktop-nav {
    display: none;
}

@media (min-width: 1024px) {

    body {
        overflow-x: hidden;
        background: #f3f4f6; /* your gray */
    }
	

	.desktop-dropdown:hover
	.desktop-dropdown-content {
		display: flex;
	}
	.desktop-nav {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 20px;
	}
	.desktop-nav-btn,
	.desktop-sub-btn {
		width: 100%;
		border: none;
		background: transparent;
		color: white;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 16px;
		border-radius: 10px;
		transition: background 0.2s ease;
		text-align: left;
	}

	.desktop-nav-btn:hover,
	.desktop-sub-btn:hover {
		background: rgba(255,255,255,0.12);
	}
	.desktop-dropdown {
		position: relative;
	}

	.desktop-dropdown-content {
		display: none;
		flex-direction: column;
		margin-left: 12px;
		margin-top: 4px;
	}


    /* Hide mobile bottom nav */
    #bottomNav {
        display: none !important;
    }

    /* Remove mobile padding */
    main {
        padding-top: var(--banner-height) !important;
        padding-bottom: 0 !important;
    }

    footer {
        /* padding-top: var(--banner-height) !important; */
        padding-bottom: var(--safe-bottom) !important;
        margin-bottom: var(--safe-bottom) !important;
    }

    /* Sidebar becomes fixed and permanent */
    #sidebar {
        position: fixed;
        top: var(--banner-height);
        left: 0;
        width: 260px;
        height: calc(100vh - var(--banner-height));
        transform: none !important;
        transition: none;
        z-index: 100;
    }

    /* Remove overlay behaviour */
    #sidebarOverlay {
        display: none !important;
    }
	/* Sidebar becomes fixed and permanent */
    #sideAd {
        position: fixed;
        top: var(--banner-height);
        padding-top: var(--banner-height);
        right: 0;
        width: 260px;
        height: calc(100vh - var(--banner-height)) !important;
        transform: none !important;
        transition: none;
        z-index: 800;
    }

    /* Shift main to the right of sidebar */
    #main,
	#footer,
	#footerContent {
        /* margin-left: 260px;
        margin-right: 260px; */
        display: flex;
        justify-content: center;
		transform: none !important;
		translate: none;
    }

	#topBanner {
		position: fixed;
		transform: none !important;
		translate: none;
	}

	/* #main > * {
		width: clamp(504px, calc(100vw - 520px), 900px);
	} */

	#main > *,
	#footer > *,
	#footerContent > * {
		width: clamp(504px, calc(100vw - 520px), 900px);
	}
	#topBanner {
		justify-content: left;
		/* padding-left: 10px; */
	}
	#topBanner > * {
		top: auto;
	}

	#topBanner #backTopButton {
		left: 24px;
		top: calc(var(--safe-top) + (var(--banner-height) / 2));
		padding: 0;
	}

	#topBanner #homeTopButton {
		position: relative;
		left: auto;
		top: auto;
		margin-left: 88px;
		padding-left: 0;
	}
	/* #homeTopButton {
		width: 260px;
		height: auto;
	}
	#homeTopButton img {
		width: 260px;
		height: auto;
	} */
}
@media (min-width: 1024px) and (max-width: 1269px) {

	#main > *,
    #footer > *,
	#footerContent > * {
        width: calc(100vw - 520px); /* 260 + 260 */
        max-width: 100%;
    }

    /* Force Bootstrap back to mobile stacking */
    #main .col-md-4,
    #main .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #main .d-md-block {
        display: none !important;
    }
	/* Reset Bootstrap md ordering */
    /* #aboutmain [class*="order-md-"] {
        order: initial !important;
    } */

    /* Stack columns */
    #aboutmain .col-md-4,
    #aboutmain .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ORDER FIX — target row children */
    #profile-sections-parent {
        order: 2 !important;
    }

    #aboutmain > .row > .col-md-4 {
        order: 1 !important;
    }

    #simusers-mobile {
        order: 3 !important;
    }

    /* Visibility */
    #simusers {
        display: none !important;
    }

    #simusers-mobile {
        display: block !important;
    }
}

@media (min-width: 1270px) {

    /* #main > * {
        width: clamp(764px, calc(100vw - 520px), 900px);
    } */
	#main > *,
    #footer > *,
	#footerContent > * {
        width: clamp(764px, calc(100vw - 520px), 900px);
    }

}
/* ===============================
   MOBILE SAFETY OVERRIDES
   =============================== */

@media (max-width: 768px) {

    .content {
        width: 100% !important;
        margin: 0 !important;
    }

    .login,
    .login2,
    .logindiv {
        width: 100% !important;
        max-width: 400px;
        margin: 20px auto !important;
    }

    .login form input[type="text"],
    .login form input[type="password"],
    .login form input[type="email"],
    .login form input[type="file"],
    .login form input[type="submit"],
    .login form button[type="submit"],
    .skip form input[type="submit"],
    .loginlink form input[type="submit"] {
        width: 100% !important;
        max-width: 100%;
    }

}

/* OLD */

.login, .login2 {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
	  	/* margin: 100px auto; */
	}
.login h1 {
  	text-align: center;
	color: var(--brand) !important;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
	background-color: var(--brand);
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="file"] {
	width: 360px;
	height: 50px;
	padding: 15px;
	margin-top: 20px;
	background-color: var(--brand);
	border: 0;
	cursor: pointer;
	font-weight: bold;
	color: #ffffff;
	transition: background-color 0.2s;
}
.login form input[type="file"]:hover {
	background-color: var(--brand);
	transition: background-color 0.2s;
}
.login form input[type="submit"]{
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
	background-color: var(--brand);
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: var(--brand);
  	transition: background-color 0.2s;
}
.login form button[type="submit"]{
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
	background-color: var(--brand);
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}

.login form button[type="submit"]:hover {
	background-color: var(--brand);
  	transition: background-color 0.2s;
}
.logindiv{
  	width: 400px;
  	padding: 15px;
 	margin-top: 20px;
	background-color: var(--brand);
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
	text-decoration: none;
}
.logindiv:hover {
	background-color: var(--brand);
  	transition: background-color 0.2s;
	text-decoration: none;
}
.login a {
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
}
.login a:hover {
	text-decoration: none;
}
.loginlink form input[type="submit"] {
	justify-content: center;
	/* justify: center; */
  	width: 360px;
  	padding: 15px;
 	margin-top: 20px;
	background-color: var(--brand);
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.loginlink form input[type="submit"]:hover {
	background-color: var(--brand);
  	transition: background-color 0.2s;
}
.skip form input[type="submit"] {
	width: 360px;
	padding: 15px;
	margin-top: 20px;
	background-color: var(--brand);
	border: 0;
	cursor: pointer;
	font-weight: bold;
	color: #ffffff;
	transition: background-color 0.2s;
}
.skip form input[type="submit"]:hover {
	background-color: var(--brand);
	transition: background-color 0.2s;
}
.register form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 20px;
}
/* .navtop { */
	/* position: fixed; */
	/* bottom: 0% !important; */
					 
				  
	/* background-color: var(--brand); */
	/* height: 10%; */
	/* max-height: 150px; */
	/* /* min-width: 945px; */
	/* /* width: 945px; */
	/* width: 100%; */
	/* left: 0; */
	/* border: 0; */
	/* box-shadow: 0 6px 20px 0 rgba(var(--rgb), 0.5); */
	/* z-index: 2; */
/* } */
/* .navtop div { */
	/* display: flex; */
	/* margin: 0 auto; */
	/* width: 945px; */
	/* height: 100%; */
/* } */
.navtop {
	/* position: fixed; */
	float: right;
	margin-right: 106px;
	margin-right:5px;
	background-color: var(--brand);
	height: auto;	   
	width: 200px;
	border: 0;
	box-shadow: 0 6px 20px 0 rgba(var(--rgb), 0.5);
	overflow: none;
}
.navtop div {
	margin: 0 auto;		 
}
.navtop div h1, .navtop div a {
	display: inline-flex;
	align-items: center;
}
.navtop div h1 {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: #eaebed;
	font-weight: normal;
}
.navtop div a {
	text-decoration: none;
	color: #c1c4c8;
	font-weight: bold;
}
.navtop div a i {
	padding: 2px 8px 0 0;
}
.navtop div a:hover {
	color: #eaebed;
}
/* .navbutton{ */
	/* font-size: 16px; */
	/* /* margin-left: -10px; */
	/* padding-left: 26px; */
	/* padding-top: 50%; */
	/* width: 100%; */
	/* height: 150px; */
/* } */
/* .navbutton i{ */
	/* width: 20%; */
	/* height: 100%; */
/* } */
.navbutton{
	position: relative;
	margin-left: -10px;
	padding-left: 25px;
	padding-top: 10px;
	width: 200px;
	height: 50px;
	border-style: solid;
	border-width: 1px;	
	z-index: 4;
}
.navbutton-img{
	margin-left: -10px;
	padding-left: 0px;
	padding-top: 0px;
}
.navbutton:hover{
	background-color: var(--brand);
	box-shadow: 0 8px 16px 0 rgba(var(--rgb),1);
}
/* .navbuttonactive { */
	/* /* background-color: var(--brand); */ */
	/* color: #eaebed; */
/* } */
.navbuttonactive {
	background-color: var(--brand);
}
.profile-dropdown {
	position: relative;
	display: inline-block;
	z-index: 4;
}

.profile-dropdown-content {
	display: none;
	position: absolute;
	background-color: var(--brand);
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 4;
	top: -1px; /* Position it below the .profile-dropdown */
	left: 201px; /* Align it to the left edge of .profile-dropdown */
}

.profile-dropdown-content a:hover {
	background-color: rgba(var(--rgb),1);
}
.progress {
	width: 300px;
	height: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	background: linear-gradient(to right, var(--brand) 75%, #cccccc 25%);
	overflow: none;
	/* margin: auto; */
	/* padding: 7px 0; */
	/* margin-bottom: 0 auto; */
	text-align: center;
}
.progress p{
	/* margin: 0; */
	/* position: absolute; */
	/* top: 50%; */
	/* left: 50%; */
	transform: translate(0, -50%);
}
body.loggedin {
	background-color: #f3f4f7;
}
.content {
	/* float: center; */
	/* display: inline-block; */
	position: inherit;
	/* width: 945px; */
	margin: 0 auto;
	margin-top: -25px;
	/* margin-left: 5px; */
	/* left: 150px;
	right: 150px; */
	background-color: #ffffff;
	color: #000000;
}
/* .content div { */
	/* background-color: $content; */
/* } */
.content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.content h2:link, .content h2:visited {
	color: var(--brand);
	text-decoration: none !important;
}
.content > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #ffffff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.content a {
	text-decoration: none;
	/* font-weight: bold; */
}
.notification {
	background-color: var(--brand);
	color: white;
	text-decoration: none;
	position: relative;
	display: inline-block;
	border-radius: 2px;
	z-index: 4;
}
.notification, .badge {
	/* padding-left: 5px;
	padding-right: 5px; */
	/* position: absolute; */
	/* top: 15px; */
	/* right: 15px; */
	height: 10px;
	min-width: 10px;
	width: auto;
	border-radius: 50%;
	background: #ff0000;
	color: #eeeeee;
	font-size: 8px;
	text-align: center;
	z-index: 5;
}
#messageNotificationCount, #inboxNotificationCount, #otherNotificationCount, #totalNotificationCount, #viewNotificationCount{
	/* padding-left: 5px; */
	/* padding-right: 5px; */
	/* position: absolute; */
	/* top: 10px; */
	right: 15px;
	height: 12px;
	min-width: 12px;
	width: auto;
	border-radius: 50%;
	background: #ff0000;
	color: #eeeeee;
	font-size: 10px;
	text-align: center;
	align-content: center;
	vertical-align: text-top;
	/* z-index: 5; */
}

/* SEARCH PAGE */

/* ─── Accordion CSS ──────────────────────────────────────────────────────────
   Add this to your stylesheet (or a <style> block in your page head).
   ──────────────────────────────────────────────────────────────────────────── */


.accordion-section {
    border-bottom: 1px solid #ddd;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    background: #f9f9f9;
    transition: background 0.15s;
}
.accordion-header:hover {
    background: #f0f0f0;
}
.accordion-header .accordion-chevron {
    font-size: 11px;
    color: #888;
    transition: transform 0.2s;
    display: inline-block;
}
.accordion-header.accordion-open .accordion-chevron {
    transform: rotate(180deg);
}
.accordion-body {
    display: none;
    padding: 10px 14px 16px;
}
.accordion-body.accordion-open {
    display: block;
}


/* END OF SEARCH PAGE */

.profile-head{
    width: 100%;
	background-color: #ffffff;
}
.upload-content {
	width: 100%;
	margin: 0 auto;
	background-color: #ffffff;
	color: #000000;
}
/* .upload-content div { */
	/* background-color: #ffffff; */
/* } */

.lightbox {
	position: fixed;
	overflow-x: none !important;
	overflow-y: none !important;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.95);
	display: none;
	justify-content: center !important;
	align-items: center !important;
	z-index: 10000;
	touch-action: none;
}

.lightbox-track {
	height: 100%;
	display: flex;
	transition: transform 0.25s ease;
}

.slide {
	min-width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}

.slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.slide-index {
	position: absolute;
	padding-top: var(--safe-top);
	top: 30px;
	/* left: 50%; */
	/* transform: translateX(-50%); */
	text-align: center;
	max-width: 90%;
	color: #fff;
	z-index: 10001;
	font-size: 28px;
	background: none;
	border: none;
	display: inherit;
}

.slide-meta {
	position: absolute;
	padding-bottom: var(--safe-bottom);
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	max-width: 90%;
	color: #fff;
	pointer-events: auto; /* buttons clickable */
}

/* .slide-meta .actions button {
	margin-left: 5px;
} */

/* .caption {
	color: white;
	margin-top: 10px;
	text-align: center;
} */
.captioncontent {
	color: #ffffff;
	/* margin-top: 10px; */
	text-align: center;
}

.actions {
	padding-bottom: var(--safe-bottom);
	margin-top: 8px;
}

.close-btn {
	padding-top: var(--safe-top);
	z-index: 10001;
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 28px;
	background: none;
	border: none;
	color: white;
	display: inherit;
}

.upload-content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.upload-content h2:link, .upload-content h2:visited {
	color: var(--brand);
	text-decoration: none !important;
}
.upload-content > p, .upload-content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #ffffff;
}
.upload-content > p table td, .upload-content > div table td {
	padding: 5px;
}
.upload-content > p table td:first-child, .upload-content > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.upload-content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.upload-content a {
	text-decoration: none;
	/* font-weight: bold; */
}

#image-list {
	touch-action: none;
	-ms-touch-action: none;
	-webkit-touch-action: none;
}

.key-icon {
	display: inline-block;
	border-style: solid;
	border-width: 2px;
	border-radius: 5px;
	width: 35px;
	height: 35px;
	text-align: center;
	font-weight: bold;
	text-decoration: underline;
	font-size: 20px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.rotate-buttons {
	margin: auto; /* Center horizontally */
	margin-top: 10px; /* Add margin from the top (adjust as needed) */
}

.thumbnail-key-icon {
	display: inline-block;
	border-style: solid;
	border-width: 2px;
	border-radius: 5px;
	border-color: #555;
	background-color: #e1e1e1;
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 35px;
	height: 35px;
	text-align: center;
	font-weight: bold;
	text-decoration: underline;
	font-size: 20px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
	opacity: 0.25 !important;
	transition: opacity 0.25s ease !important;
}
  
.thumbnail-key-icon.visible {
	opacity: 1 !important;
}

.contentlink a:link, .contentlink a:visited {
	font-style: italic;
	font-weight: bold;
	color: var(--brand);
	text-decoration: none !important;
}
.bio .aboutcontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .aboutcontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .aboutcontent > p, .bio .aboutcontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .aboutcontent > p table td, .bio .aboutcontent > div table td {
	padding: 5px;
}
.bio .aboutcontent > p table td:first-child, .bio .aboutcontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .aboutcontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .aboutcontent img, .bio .aboutcontent textarea {
	display: none;
}
.aboutcontent a {
	text-decoration: none;
}
.blog a {
	font-weight: bold;
	text-decoration: none;
}
.bio .lifecontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .lifecontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .lifecontent > p, .bio .lifecontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .lifecontent > p table td, .bio .lifecontent > div table td {
	padding: 5px;
}
.bio .lifecontent > p table td:first-child, .bio .lifecontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .lifecontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .lifecontent img, .bio .lifecontent textarea {
	display: none;
}
.bio .goodcontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .goodcontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .goodcontent > p, .bio .goodcontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .goodcontent > p table td, .bio .goodcontent > div table td {
	padding: 5px;
}
.bio .goodcontent > p table td:first-child, .bio .goodcontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .goodcontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .goodcontent img, .bio .goodcontent textarea {
	display: none;
}
.bio .noticecontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .noticecontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .noticecontent > p, .bio .noticecontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .noticecontent > p table td, .bio .noticecontent > div table td {
	padding: 5px;
}
.bio .noticecontent > p table td:first-child, .bio .noticecontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .noticecontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .noticecontent img, .bio .noticecontent textarea {
	display: none;
}
.bio .favouritescontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .favouritescontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .favouritescontent > p, .bio .favouritescontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .favouritescontent > p table td, .bio .favouritescontent > div table td {
	padding: 5px;
}
.bio .favouritescontent > p table td:first-child, .bio .favouritescontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .favouritescontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .favouritescontent img, .bio .favouritescontent textarea {
	display: none;
}
.bio .sixcontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .sixcontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .sixcontent > p, .bio .sixcontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .sixcontent > p table td, .bio .sixcontent > div table td {
	padding: 5px;
}
.bio .sixcontent > p table td:first-child, .bio .sixcontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .sixcontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .sixcontent img, .bio .sixcontent textarea {
	display: none;
}
.bio .thinkingcontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .thinkingcontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .thinkingcontent > p, .bio .thinkingcontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .thinkingcontent > p table td, .bio .thinkingcontent > div table td {
	padding: 5px;
}
.bio .thinkingcontent > p table td:first-child, .bio .thinkingcontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .thinkingcontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .thinkingcontent img, .bio .thinkingcontent textarea {
	display: none;
}
.bio .fridaycontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .fridaycontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .fridaycontent > p, .bio .fridaycontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .fridaycontent > p table td, .bio .fridaycontent > div table td {
	padding: 5px;
}
.bio .fridaycontent > p table td:first-child, .bio .fridaycontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .fridaycontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .fridaycontent img, .bio .fridaycontent textarea {
	display: none;
}
.bio .privatecontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .privatecontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .privatecontent > p, .bio .privatecontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .privatecontent > p table td, .bio .privatecontent > div table td {
	padding: 5px;
}
.bio .privatecontent > p table td:first-child, .bio .privatecontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .privatecontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .privatecontent img, .bio .privatecontent textarea {
	display: none;
}
.bio .messagecontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .messagecontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .messagecontent > p, .bio .messagecontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .messagecontent > p table td, .bio .messagecontent > div table td {
	padding: 5px;
}
.bio .messagecontent > p table td:first-child, .bio .messagecontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .messagecontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .messagecontent img, .bio .messagecontent textarea {
	display: none;
}
.bio .lookingcontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	white-space: pre-wrap;
}
.bio .lookingcontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .lookingcontent > p, .bio .lookingcontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .lookingcontent > p table td, .bio .lookingcontent > div table td {
	padding: 5px;
}
.bio .lookingcontent > p table td:first-child, .bio .lookingcontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .lookingcontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .lookingcontent img, .bio .lookingcontent textarea {
	display: none;
}
.bio .interestscontent {
	width: 100%;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	color: #000000;
	/* white-space: pre-wrap; */
}
.bio .interestscontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.bio .interestscontent > p, .bio .interestscontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.bio .interestscontent > p table td, .bio .interestscontent > div table td {
	padding: 5px;
}
.bio .interestscontent > p table td:first-child, .bio .interestscontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.bio .interestscontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.bio .interestscontent img, .bio .interestscontent textarea {
	display: none;
}

.bio-textarea{
	 width: 100%;
	 resize: none;
	 overflow: hidden;
	 margin-left: 10px;
}

.interest {
	/* all: unset; */
	float: left;
	width: auto;
	height: 35px;
	border-radius: 15px;
	background-color: c1c1c1;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
}
/* Style for the selected interest display */
.selected_interest {
  display: none;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}
/* Style for token buttons */
.token {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    background-color: var(--brand);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.token a {
	color: #fff;
	text-decoration: none;
}
/* Hover effect */
.token:hover {
    background-color: var(--brand);
}
/* Show the selected interest only when it has content */
.selected_interest:not(:empty) {
  display: inline-block;
}
/* Style for the interest suggestions dropdown */
.interest_suggestions {
  max-height: 150px;
  overflow-y: auto;
  margin-top: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Style for the individual suggestion items */
.interest_suggestions p {
  cursor: pointer;
  padding: 8px 12px;
}

/* Style for the individual suggestion items on hover */
.interest_suggestions p:hover {
  background-color: #f0f0f0;
}

#popupinterest {
	/* all: unset; */
	float: left;
	width: auto;
	height: 35px;
	border-radius: 15px;
	background-color: c1c1c1;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
}
.bio a {
	color: var(--brand);
	font-weight: bold;
	text-decoration: none;
}
.asledit {
	display: none;
}
.editbox {
	display: none;
}
.messagereport {
	display: none;
}
.imagecontent {
	width: 100%;
	max-width: 1010px;
	margin: 0 auto;
}
.imagecontent h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.imagecontent > p, .imagecontent > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #ffffff;
}
.imagecontent > p table td, .imagecontent > div table td {
	padding: 5px;
}
.imagecontent > p table td:first-child, .imagecontent > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.imagecontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.caption {
	display: none;
}
.thumbnail-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;   /* Magic line */
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 8px;
    overflow: hidden;
	cursor: pointer;
}
/* .thumbnail-container :hover, .thumbnail :hover {
	transform: scale(1.1);
	z-index: 2;
} */
.navigation-container {
	display: flex;
	justify-content: space-between;
	height: 102px;
	width: 100%;
	position: absolute;
	bottom: 20px;
	left: 0;
	padding: 10px;
	box-sizing: border-box;
	z-index: 10001;
}
.prev,
.next {
	display: inline-block;
	height: 50px;
	color: white;
	padding: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	background-color: var(--brand);
	text-decoration: none;
}
.prev:hover,
.next:hover {
	background-color: var(--brand);
	color: white;
}
/* Add new styles for the middle element */
.middle-element {
	text-decoration: none;
	display: inline-block;
	width: 500px;
	text-align: center;
	color: #000000;
	padding: 10px;
}
.middle-element a {
	text-decoration: none;
	color: #000000;
}
.left-element {
	display: inline-block;
	color: white;
	padding: 10px;
}
.right-element {
	display: inline-block;
	color: white;
	padding: 10px;
}
.close {
	position: absolute !important;
	top: 10px !important;
	right: 20px !important;
	font-size: 24px !important;
	font-weight: bold !important;
	color: black !important;
	cursor: pointer !important;
}
.close:hover {
	color: red !important;
}
.thumbnail:hover {
	filter: brightness(1);
	transform: scale(1.1);
	z-index: 2;
}
.thumbnail span {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 260px;
	width: 260px; */
	position: absolute;
	margin: auto;
	text-align: center;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	font-size: 16px;
	padding: 10px;
	opacity: 0;
	/* transition: opacity 0.2s ease-in-out; */
	pointer-events: none;
}
.thumbnail:hover span {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1.1);
	z-index: 2;
}
/* Style the buttons that are used to open the tab content */
.pptab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	/* padding: 14px 16px; */
	transition: 0.3s;
	/* width: 300px; */
}
/* Change background color of buttons on hover */
.pptab button:hover {
	background-color: #ddd;
}
/* Create an active/current tablink class */
.pptab button.active {
	background-color: #ccc;
}
.column {
	float: left;
	width: 300px;
	padding: 5px;
}
#details-container {
	float: right;
}
.details {
	float: right;
	width: auto;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	width: 315px;
}
.details h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.details > p, .details > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.details > p table td, .details > div table td {
	padding: 5px;
}
.details > p table td:first-child, .details > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.details > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
#details-languages{
	margin-left: -20px;
	padding-left: -20px;
	font-weight: normal;
	color: #000000;
}
/* .details-languages > p table td, .details > div table td { */
	/* padding: 5px; */
/* } */
/* .details-languages > p table td:first-child, .details > div table td:first-child { */
	/* font-weight: normal; */
	/* color: #000000; */
	/* padding-right: 15px; */
/* } */
.profile-sections {
	width: 100%;
}
.interests {
	float: right;
	width: auto;
	/* margin: 10px; */
	padding: 25px;
	border: 2px solid #e0e0e3;
	width: 315px;
}
.interests h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: var(--brand);
}
.interests > p, .interests > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.interests > p table td, .interests > div table td {
	padding: 5px;
}
.interests > p table td:first-child, .interests > div table td:first-child {
	font-weight: bold;
	color: var(--brand);
	padding-right: 15px;
}
.interests > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}


/* ===== Similar Users Sidebar Container ===== */

.similarusers {
    position: sticky;
    top: 20px;

    padding: 14px;
    border-radius: 16px;

    /* Match feed page feel */
    background: #f4f6f8;

    border: 1px solid #dfe3e8;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* Header */

.similarusers h2 {
    font-size: 18px;
    font-weight: 600;

    margin-bottom: 14px;
    padding-bottom: 10px;

    border-bottom: 1px solid #e5e7eb;
    color: var(--brand);
}

/* ===== Profile Cards ===== */

.profilecard {
    display: flex;
	min-height: 110px;
	align-items: flex-start;
    gap: 12px;

    padding: 12px;
    margin-bottom: 12px;

    border-radius: 14px;
    border: 1px solid #dfe3e8;
    border-left: 4px solid transparent;

    background: #ffffff;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.profilecard:last-child {
    margin-bottom: 0;
}

.profilecard:hover {
    transform: translateY(-2px);
    border-left-color: var(--alt-brand);
    box-shadow: 0 8px 22px rgba(var(--rgb),0.18);
}

/* Profile image */

.profilecard img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
}

/* Text container */

/* .profilecontainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    flex: 1;
} */
.profilecontainer {
    display: flex;
    flex-direction: column;
    gap: 4px; /* keeps spacing consistent */
}

/* Username */

.profilecontainer h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--brand);
	line-height: 1.2;
}

/* ASL / status */

.profilecontainer .asllinks {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.2;
}

/* Location */

.profilecontainer h5 {
    margin: 0;
    font-size: 13px;
    color: #1f2933;
    font-weight: 500;
}

/* Links */

.profilecard a {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Overflow control */

.profilecontainer h4,
.profilecontainer .asllinks,
.profilecontainer h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* or normal with max-height and line-clamp */
}

/* ===== Medium screens only ===== */

@media ((min-width: 768px) and (max-width: 991px)) or (min-width: 1024px) {

    .profilecard {
        gap: 10px;
        padding: 10px;
    }

    .profilecard img {
        width: 70px;
        height: 70px;
        flex-shrink: 0;
    }

	.profilecontainer {
		flex: 1;
		min-width: 0;
	}

    .profilecontainer h4 {
		font-size: clamp(16px, 2vw, 20px);
	}

    .profilecontainer .asllinks,
    .profilecontainer h5 {
        font-size: 12px;
    }

}


.setup {
  	width: 1000px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.setup h1 {
  	text-align: center;
	color: var(--brand);
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.setup form {
	width: 100%;
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.setup form label {
  	display: flex;
  	justify-content: centre;
  	align-items: center;
  	width: 50px;
  	height: 50px;
	background-color: var(--brand);
  	color: #ffffff;
}
.setup form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
	background-color: var(--brand);
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.setup form input[type="submit"]:hover {
	background-color: var(--brand);
  	transition: background-color 0.2s;
}
.login textarea {
	width: 360px;
	height: 100px;
}
.image-popup {
	display: none;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	background-color: rgba(0, 0, 0, 0.8) !important;
	z-index: 99999;
}
.image-popup .con {
	display: flex;
	flex-flow: column;
	background-color: #ffffff;
	padding: 25px;
	border-radius: 5px;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	color: #000000;
}
.image-popup .con h3 {
	margin: 0;
	font-size: 18px;
}
.image-popup .con img {
	height: 85%;
	max-height: 750px;
}
.image-popup .con .edit, .image-popup .con .trash {
	display: inline-flex;
	justify-content: center;
	align-self: flex-end;
	width: 40px;
	text-decoration: none;
	color: #FFFFFF;
	padding: 10px 12px;
	border-radius: 5px;
	margin-top: 10px;
}
.image-popup .con .trash {
	background-color: #b73737;
}
.image-popup .con .trash:hover {
	background-color: #a33131;
}
.image-popup .con .edit {
	background-color: #37afb7;
}
.image-popup .con .edit:hover {
	background-color: #319ca3;
}
.image-border {
	border-right: 75px solid #008585;
}
.imagetrash {
	z-index: inherit;
	background-color: rgba(0, 0, 0, 0);
	border-style: none;
	color: #000000;
}
.home .upload-image, .asl .home .upload-image {
	/* display: inline-block; */
	text-decoration: none;
	background-color: var(--brand) !important;
	font-weight: bold;
	font-size: 14px;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 10px 15px;
	/* padding: 10px 15px; */
	/* padding-top: 10px; */
	/* padding-bottom: 10px; */
	/* padding-left: 15px; */
	/* padding-right: 15px; */
	margin: 15px 0;
	cursor: pointer;
}
.home .upload-image:hover, .asl .home .upload-image:hover {
	cursor: pointer;
	background-color: var(--brand) !important;
}
.home .upload-image button.active, .asl .home .upload-image button.active {
	background-color: var(--brand) !important;
}
.home .upload-image-no {
	display: inline-block;
	text-decoration: none;
	background-color: rgba(255, 32, 32, 1) !important;
	font-weight: bold;
	font-size: 14px;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 10px 15px;
	/* padding: 10px 15px; */
	/* padding-top: 10px; */
	/* padding-bottom: 10px; */
	/* padding-left: 15px; */
	/* padding-right: 15px; */
	margin: 15px 0;
	cursor: pointer;
}
.home .upload-image-no:hover {
	cursor: pointer;
	background-color: rgba(255, 64, 64, 1) !important;
}
.home .upload-image-no button.active {
	background-color: var(--brand) !important;
}
.update-buttons{
	width: 59px;
	height: auto;
	padding-left: 10px;
	padding-right: 10px;
}
.close-button{
	background-color: #ffffff;
	color: var(--brand);
	border-style: none;
	border-radius: 15px;
}
.super-table table, .super-table th, .super-table td{
	border-style: solid;
	border-width: 2px;
	border-color: var(--brand);
}

/* Style for the radio cards */
.radio-card-container {
	display: inline-block;
	margin: 10px;
	cursor: pointer;
	transition: transform 0.3s;
}

.radio-card {
	position: relative;
	width: 199px;
	height: 250px;
	/* background-color: #f1f1f1; */
	background-color: #ffffff;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 4px 8px rgba(var(--rgb),0.5); /* Teal box-shadow */
	transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s; /* Add transitions for smooth effect */
}

/* Hide the default radio input */
.radio-card input[type="radio"] {
	position: absolute;
	opacity: 0;
}

/* Style for the card content */
.card-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

/* Style for the card title */
.card-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Style for the card price */
.card-price {
	font-size: 24px;
	color: var(--brand);
}

/* Add a pseudo-element for the selected state */
.radio-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(var(--rgb), 0); /* Transparent background for initial state */
	border-radius: 10px;
	z-index: -1; /* Push the pseudo-element behind the card content */
	/* Remove the box-shadow property for the initial state */
	/* box-shadow: 0 4px 8px rgba(var(--rgb),0.5); */
	transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s; /* Add transitions for smooth effect */
}

/* Style for the selected state */
.radio-card input[type="radio"]:checked + .card-content::before {
	background-color: gold; /* Gold background for selected state */
	box-shadow: 0 4px 8px gold; /* Gold box-shadow for selected state */
	transform: scale(1.04); /* Slightly scale up the card on selection */
}

/* Style for the hover state */
.radio-card:hover {
	box-shadow: 0 8px 16px rgba(var(--rgb),1); /* Teal box-shadow on hover */
	transform: scale(1.05); /* Slightly scale up the card on hover */
}

/* Style for the hover state */
.radio-card:hover label {
	cursor: pointer;
}

/* Style for the selected state */
.radio-card input[type="radio"]:checked + .card-content {
	box-shadow: 0 4px 8px gold; /* Gold box-shadow for selected state */
}

/* Style for the selected state */
.radio-card.selected {
	/* background-color: #f3f4f7; */
	box-shadow: 0 4px 8px gold; /* Gold box-shadow for selected state */
	transform: scale(1.05); /* Slightly scale up the card on hover */
}
li h4{
	color: var(--brand);
}

.home .updateactive {
	background-color: var(--brand) !important;
}
.home .images {
	overflow: hidden !important;
	display: flex;
	flex-flow: wrap;
	background-color: #ffffff;
}
.home .images a {
	display: block;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 300px;
	margin: 0 20px 20px 0;
}
.home .images a:hover span {
	opacity: 1 !important;
	transition: opacity 1s !important;
}
.home .images span {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
	position: absolute !important;
	opacity: 0 !important;
	top: 0 !important;
	left: 0 !important;
	color: #fff !important;
	width: 100% !important;
	height: 100% !important;
	background-color: rgba(0, 0, 0, 0.2) !important;
	padding: 15px !important;
	transition: opacity 1s !important;
}
.upload form {
	padding: 15px 0;
	display: flex;
	flex-flow: column;
	width: 400px;
}
.upload form label {
	display: inline-flex;
	width: 100%;
	padding: 10px 0;
	margin-right: 25px;
}
.upload form input, .upload form textarea {
	padding: 10px;
	width: 100%;
	margin-right: 25px;
	margin-bottom: 15px;
	border: 1px solid #cccccc;
}
.upload form textarea {
	height: 200px;
}
.upload form input[type="submit"] {
	display: block;
	background-color: #38b673;
	border: 0;
	font-weight: bold;
	font-size: 14px;
	color: #FFFFFF;
	cursor: pointer;
	width: 200px;
	margin-top: 15px;
	border-radius: 5px;
}
.upload form input[type="submit"]:hover {
	background-color: #32a367;
}
.upload-image {
	display: inline-block;
	text-decoration: none;
	background-color: var(--brand);
	font-weight: bold;
	font-size: 14px;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 10px 15px;
	/* padding: auto auto; */
	/* margin: 15px 0; */
	margin: auto auto;
	cursor: pointer;
}
.upload-image:hover {
	cursor: pointer;
	background-color: var(--brand);
}
.upload-image button.active {
	background-color: var(--brand);
}
.upload-image-no {
	display: inline-block;
	text-decoration: none;
	background-color: rgba(255, 31, 31, 1);
	font-weight: bold;
	font-size: 14px;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 10px 15px;
	/* padding: auto auto; */
	/* margin: 15px 0; */
	margin: auto auto;
	cursor: pointer;
}
.upload-image-no:hover {
	cursor: pointer;
	background-color: rgba(191, 0, 0, 1);
}
.upload-image-no button.active {
	background-color: rgba(191, 0, 0, 1);
}
.delete .yesno {
	display: flex;
}
.delete .yesno a {
	display: inline-block;
	text-decoration: none;
	background-color: var(--brand);
	font-weight: bold;
	color: #FFFFFF;
	padding: 10px 15px;
	margin: 15px 10px 15px 0;
	border-radius: 5px;
}
.delete .yesno a:hover {
	background-color: var(--brand);
}
/* The Close Button */
.close {
	position: absolute;
	top: 15px;
	right: 55px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

.forwards {
	position: absolute;
	top: 50%;
	right: 55px;
	color: #f1f1f1;
	font-size: 50px;
	font-weight: bold;
	transition: 0.3s;
}

.forwards:hover,
.forwards:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}
.backwards {
	position: absolute;
	top: 50%;
	left: 55px;
	color: #f1f1f1;
	font-size: 50px;
	font-weight: bold;
	transition: 0.3s;
}

.backwards:hover,
.backwards:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}
/* Style the tab */
.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #ffffff;
	width: auto;
	color: #000000;
}
/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: #e5e5e5;
	/* margin: 14px 16px; */
	width: auto;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
}
.tab a {
	text-decoration: none;
	background-color: inherit;
	/* margin: -14px -16px; */
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	/* padding: 14px 16px; */
	transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
	transform: scale(1.05);
}
/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
	padding: 6px 12px;
	overflow:auto;
	border: 1px solid #ccc;
	border-top: none;
	height: auto;
}
.tabcontent h1 {
	color: #000000;
}
.footer {
	margin: 0 auto;
	background-color: #ffffff;
	padding: 6px 12px;
	height: auto;
	width: 100%;
	/* width: 100%; */
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	/* position: fixed; */
	/* bottom: 0; */
}
.footer a {
	text-decoration: none;
	color: var(--brand);
}
.tababout {
	float: left;
	padding: 6px 12px;
	border: 1px solid #ccc;
	min-height: auto;
	background-color: #ffffff;
}
.tababout a {
	text-decoration:none;
	color: var(--brand);
}
.tababout h1 {
	/* color: var(--brand); */
	padding-left: 15px;
}
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .25s;
	transition: .25s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: #ffffff;
	-webkit-transition: .25s;
	transition: .25s;
}

input:checked + .slider {
	background-color: var(--brand);
}
input:disabled + .slider {
	background-color: #cccccc;
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--brand);
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}
.slider.round:before {
	border-radius: 50%;
}

.card {
	box-shadow: 0 4px 8px 0 rgba(var(--rgb),0.5);
	transition: 0.3s;
	width: 465px;
	height: 200px;
	background-color: #eeeeee !important;
	border-radius: 100px;
}
.card img {
	border-radius: 100px;
}
.card a {
	text-decoration: none;
	color: #c1c4c8;
}
.card:hover {
	box-shadow: 0 8px 16px 0 rgba(var(--rgb),1);
}
.container {
	float: right !important;
	padding: 0px 0px;
	background-color: #eeeeee !important;
	color: #313131;
	height: 200px;
	width: 100%;
	border-radius: 0px 100px 100px 0px;
}
.container a {
	text-decoration: none;
	color: #c1c4c8;
}
/* NEW PROFILE VIEWS CARD */
.cardnew {
	box-shadow: 0 4px 8px 0 rgba(var(--rgb),0.5);
	transition: 0.3s;
	/* margin-top: -10px; */
	/* margin-top: 20px;
	margin-bottom: 30px; */
	width: 365px;
	height: 150px;
	background-color: #eeeeee !important;
	border-radius: 100px;
}
.cardnew img {
	border-radius: 100px;
}
.cardnew a {
	text-decoration: none;
	color: #c1c4c8;
}
.cardnew:hover {
	box-shadow: 0 8px 16px 0 rgba(var(--rgb),1);
	transform: scale(1.025);
}
.containernew {
	float: right !important;
	/* padding: 0px 0px; */
	/* margin-top: -10px; */
	padding-top: 0px;
	margin-left: -50px;
	background-color: #eeeeee !important;
	color: #313131;
	height: 150px;
	width: 100%;
	border-radius: 0px 100px 100px 0px;
}
.containernew a {
	text-decoration: none;
	color: #c1c4c8;
}
.notes {
	color: var(--brand);
}
.cardtext{
	line-height: 1;
	margin-top: -20px;
	margin-left: -50px;
}
.cardname {
	height: 20px;
	overflow: none;
	/* margin-top: 0px; */
}
.cardasl {
	height: 20px;
	overflow: none;
	margin-top: -5px;
}
.cardloc {
	height: 20px;
	overflow: none;
	/* margin-top: 0px; */
}
.carddate {
	height: 20px;
	overflow: none;
	/* margin-top: 0px; */
}

.cardhome {
	box-shadow: 0 4px 8px 0 rgba(var(--rgb),0.5);
	transition: 0.3s;
	width: 240px;
	height: 100px;
	background-color: #eeeeee;
	border-radius: 50px;
}
.cardhome img {
	border-radius: 50px;
}
.cardhome a {
	text-decoration: none;
	color: #c1c4c8;
}
.cardhome:hover {
	box-shadow: 0 8px 16px 0 rgba(var(--rgb),1) !important;
}
.containerhome {
	float: right;
	color: #313131;
	height: 100px;
	width: 100%;
	border-radius: 0px 75px 75px 0px;
	overflow: hidden;
}
.containerhome h4 {
	color: var(--brand);
}
.containerhome a {
	text-decoration: none;
	color: #c1c4c8;
}
.views {
	float: left;
	width: 260px;
	padding-left: 5px;
	height: auto;
	background-color: #ffffff;
	border-style: solid;
	border-width: 5px;
	border-color: #cccccc;
	border-radius: 15px;
	text-decoration: none !important;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.views h2 {
	text-align: center;
	text-decoration: none !important;
}
.views a:link, .views a:visited {
	color: var(--brand);
	text-decoration: none !important;
}
.views h2:link, .views h2:visited {
	color: var(--brand);
	text-decoration: none !important;
}
.views a {
	text-decoration: none !important;
}
#firstviewlink h2 {
	color: var(--brand) !important;
	text-decoration: none !important;
}
#viewlink a {
	text-decoration: none !important;
	font-weight: bold;
	color: var(--brand);
}

/* Newsfeed */
.updates {
	width: 100%;
	/* padding-left: 5px; */
	/* margin-right: 5px; */
	height: auto;
	border-style: solid;
	border-width: 5px;
	border-color: #cccccc;
	/* border-radius: 15px; */
	border-radius: 15px 15px 15px 15px;
	overflow-y: scroll;
	overflow-x: hidden;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow: hidden !important;
}

#updatebox {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.feed-post {
    display: flex;
    gap: 12px;

    padding: 14px;
    border-radius: 14px;

    background: var(--card-bg, #fff);
    border: 1px solid #dfe3e8;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

    transition: transform .15s ease, box-shadow .15s ease;
}
.feed-post:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--rgb),0.18);
}
.feed-avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.feed-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.feed-header {
    font-size: 15px;
}
.feed-username {
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}
.feed-username:hover {
    text-decoration: underline;
}
.feed-action {
    color: #6b7280;
    margin-left: 6px;
}
.feed-content {
    font-size: 15px;
    line-height: 1.45;
    color: #1f2933;
    word-break: break-word;
}
.feed-content img {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    margin-top: 8px;
}
.feed-post {
    /* border-left: 4px solid #009393; */
    border-left: 4px solid var(--alt-brand);
}
.feed-post + .feed-post {
    margin-top: 6px;
}

/* Carousel */
.cartop {
	width: 100%;
	height: 85px;
	/* border-style: solid; */
	/* border-width: 5px; */
	/* border-color: #cccccc; */
	/* border-radius: 15px 15px 0px 0px; */
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cartop h2 {
	text-align: center;
}
.cartop a {
	text-decoration: none;
}
.carousel {
	scroll-snap-type: x mandatory;
    /* width: 100%; */
    padding: 10px;
	display: flex;
    /* height: 426px; */
    /* border: 5px solid #cccccc; */
    /* border-radius: 15px 15px 0 0; */
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 15px;
    scroll-behavior: smooth;
    box-shadow: 0 6px 20px rgba(0,0,0,0.19);
}
.carcard {
	scroll-snap-align: start;
    flex: 0 0 200px;   /* prevents shrinking */
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(var(--rgb),0.5);
    transition: 0.25s;
    overflow: hidden;
    background: white;
}
.carcard:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(var(--rgb),1);
}
.carcard a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.carcard a {
	text-decoration: none;
	color: #313131;
}
.carcontainer {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
	flex: 1;
}
.carcontainer a {
	text-decoration: none;
	color: #c1c4c8;
}
.car-header {
    display: flex;
    align-items: center;
    gap: 6px;
	font-weight: 600;
}
.car-name {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.car-mid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    font-size: 13px;
}
.car-asl {
    line-height: 1.3;
    overflow: hidden;
	display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.car-ratings {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
}
.car-location {
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.car-avatar {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
	display: block;
}
.carddot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .carcard {
        flex: 0 0 170px;
    }
}
.avatar-row {
	overflow: auto;
	overflow-x: hidden;
	display: flex;
	align-items: center;
	gap: 6px;
}
#avatarsContainer {
	display: flex;
	/* flex-wrap: wrap; */
	overflow-x: auto;
	gap: 4px;
}
.avatar {
	display: block;
}
.avatar img {
	width: 35px;
	height: 35px;
	border-radius: 25%;
	display: block;
}

/* search */

.carouselsearch {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 15px;
}
.carcardsearch {
	width: 100%;
    min-width: 0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(var(--rgb),0.5);
    transition: 0.25s;
    overflow: hidden;
    background: white;
}

.carcardsearch:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(var(--rgb),1);
}
.carcardsearch a {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.carcardsearch a {
	text-decoration: none;
	color: #313131;
}
.carcontainersearch {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
	flex: 1;
}
.carcontainersearch a {
	text-decoration: none;
	color: #c1c4c8;
}

.car-headersearch {
    display: flex;
    align-items: center;
    gap: 6px;
	font-weight: 600;
}
.car-namesearch {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.car-midsearch {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    font-size: 13px;
}
.car-aslsearch {
    line-height: 1.3;
    overflow: hidden;
	display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.car-ratingssearch {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
}
.car-locationsearch {
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.car-avatarsearch {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
	display: block;
}
.carddotsearch {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@media (min-width: 1024px) and (max-width: 1269px) {
	.carouselsearch {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (max-width: 767px) {
	.carouselsearch {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

.searchcontent{
	display: inline-block;
}
.searchcard {
	margin-right: 10px !important;
	margin-left: 10px !important;
	margin-top: 10px !important;
	margin-bottom: 10px !important;
	box-shadow: 0 4px 8px 0 rgba(var(--rgb),0.5) !important;
	transition: 0.3s !important;
	width: 200px !important;
	height: 375px !important;
	border-radius: 10px !important;
}
.searchcard img {
	border-radius: 10px 10px 0px 0px !important;
}
.searchcard a {
	text-decoration: none !important;
	color: #313131 !important;
}
.searchcard:hover {
	box-shadow: 0 8px 16px 0 rgba(var(--rgb),1) !important;
	transform: scale(1.025);
}
.searchcontainer {
	float: right !important;
	padding: 0px 0px !important;
	width: 200px !important;
	border-radius: 0px 0px 10px 10px !important;
}
.searchcontainer a {
	text-decoration: none !important;
	color: #c1c4c8 !important;
}

.locsearch-box {
	position: relative;
}

.locresult-wrapper {
	position: absolute;
	width: 235px;
	z-index: 100000;
	margin-top: 5px;
}

/* .locresult {
	width: 235px;
	background-color: white;
	/* border: 1px solid #ddd; */
	/* border-top: none;
	width: inherit;
	z-index: 100001;
} */
/* .result p:hover, .highlighted p{
	background: #f2f2f2;
} */
.locationSuggestionlocationSearchResults, .highlighted p{
	background: #f2f2f2 !important;
}

/* Style for the search box container */
.search-box-container {
	height: auto;
	width: 100%;
	margin: 10px;
	padding: 25px;
	border: 2px solid #e0e0e3;
}

/* Style for the search box wrapper */
.search-box-wrapper {
	border-style: solid;
	border-width: 2px;
	border-color: var(--brand);
	padding: 10px;
}

/* Style for the search input field */
#search_data {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/* Style for the selected interest display */
#selected_interest {
  display: none;
  margin-top: 15px !important;
  background-color: #f2f2f2;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #000000;
}

/* Show the selected interest only when it has content */
#selected_interest:not(:empty) {
	display: inline-block;
}

/* Style for the interest suggestions dropdown */
#interest_suggestions {
	max-height: 150px;
	overflow-y: auto;
	margin-top: 5px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style for the individual suggestion items */
#interest_suggestions p {
	cursor: pointer;
	padding: 8px 12px;
}

/* Style for the individual suggestion items on hover */
#interest_suggestions p:hover {
	background-color: #f0f0f0;
}

/* age-slider */
#age-slider-container {
	width: 50%;
	/* margin: 0 auto; Center the slider container if needed */
	margin-top: 30px;
	margin-left: 10px;
}

/* Style the slider container */
.slider-container {
	width: 80%;
	margin: auto;
	padding: 20px;
	text-align: center;
	position: relative;
}

/* Style the slider track */
.slider-track {
	width: 100%;
	height: 5px;
	background-color: #ddd;
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translateY(-50%);
}

/* Style the filled portion of the slider */
.slider-fill {
	height: 100%;
	background-color: var(--brand);
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: left center;
}

/* Style the slider handles */
.slider-handle {
	position: absolute;
	cursor: pointer;
	touch-action: none; /* Disable browser touch gestures */
	z-index: 2; /* Set a higher z-index to keep the handles on top */
}

/* Style the triangle part of the handle */
.triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: var(--brand) transparent transparent transparent;
	display: inline-block;
	position: absolute;
	top: -7px;
	left: 100%;
	transform: translate(-50%, 0);
	user-select: none;
}

/* Style the rectangle part of the handle */
.rectangle {
	background-color: var(--brand);
	color: #fff;
	border-radius: 5px;
	padding: 5px;
	display: inline-block;
	position: absolute;
	top: -25px;
	left: 100%;
	transform: translate(-50%, -50%);
	user-select: none;
}

/* Overlay for form*/
.overlay {
	display: none;
	position: absolute;
	float: left;
	/* top: 0; */
	/* left: 0; */
	width: 670px;
	background-color: rgba(0, 0, 0, 0);
	user-select: none;
	z-index: 1000;
}

.loader {
	display: none;
	border: 8px solid #f3f3f3;
	border-top: 8px solid var(--brand);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
	position: relative;
	top: 0;
	left: 50%;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.selected-genders {
	border-style: solid;
	border-color: var(--brand);
	border-width: 2px;
	border-radius: 25px 25px 25px 25px;
	height: 60px;
	width: 250px;
	background-color: #e5e5e5;
	position: relative;
	z-index: 1;
	overflow-wrap: break-word;
	text-align: cente;
	user-select: none;
}
.gendercheckboxes {
	display: none;
	border-style: solid;
	border-color: var(--brand);
	border-width: 2px;
	border-radius: 0px 0px 25px 25px;
	height: auto;
	width: 250px;
	background-color: #e5e5e5;
	position: absolute;
	z-index: 3;
	top: 49px;
	left: 0;
}
.interestbox {
	border-style: solid;
	border-width: 2px;
	border-color: var(--brand);
	padding: 10px;
}

/* ======= NEW MESSAGING SYSTEM =======*/

.messaging-layout {
    display: flex;
	top: calc(var(--banner-height) - var(--safe-top) - 15px);
    height: calc(100svh - var(--banner-height) - var(--safe-top) - 50px - var(--safe-bottom) - 15px); /* full viewport height */
    overflow: hidden; /* prevent double scrollbars */
}

/* ===== LEFT PANEL ===== */

.conversation-list {
    width: 320px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    height: 100%; /* fill parent */
}

/* Tabs stay fixed inside the left column */
.conversation-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0; /* DO NOT shrink */
    background: #fff;
    position: relative;
    z-index: 2; /* ensures messages scroll under it */
}

.conversation-tabs button {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.conversation-tabs button.active {
    border-bottom: 3px solid var(--brand);
}

/* Scroll container */
#conversationList {
    flex: 1;              /* take remaining height */
    overflow-y: auto;     /* enable scrolling */
    overflow-x: hidden;
}

#conversationList::-webkit-scrollbar {
    width: 6px;
}

#conversationList::-webkit-scrollbar-thumb {
    background: rgba(var(--rgb),1);
    border-radius: 3px;
}

/* CONVERSATION CARDS */

.conversation, .conversation-unread{
    display:flex;
    gap:10px;
    padding:12px;
    cursor:pointer;
    border-bottom:1px solid #eee;
}

.conversation-unread{
	font-weight: bold;
	background-color: rgba(var(--rgb), 0.2);
}

.conversation:hover{
    background:#f2f2f2;
}

.conversation img{
    width:48px;
    height:48px;
    border-radius:50%;
}

.conversation-body{
    flex:1;
}

.conversation-preview{
    font-size:0.9rem;
    color:#666;
}

/* RIGHT PANEL */

.conversation-panel{
    flex:1;
    display:flex;
    flex-direction:column;
}

#conversationHeader{
    padding:14px;
    border-bottom:1px solid #ddd;
    font-weight:bold;
}

.messagewindow{
	width: 100%;
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.messagetextbox{
    border-top:1px solid #ddd;
    padding:10px;
}

.messagetextbox form{
    display:flex;
    gap:10px;
}

#messagebox{
    flex:1;
    resize:none;
}

.conversation.unread{
    font-weight:bold;
}

@media (max-width: 768px){

    .conversation-list{
        width:100%;
    }

    .conversation-panel{
        display:none;
    }

    .messaging-layout.open-chat .conversation-list{
        display:none;
    }

    .messaging-layout.open-chat .conversation-panel{
        display:flex;
    }

}

.message-in,
.message-out {
    display: flex;
    margin-bottom: 10px;
}

.message-in {
    justify-content: flex-start;
}

.message-out {
    justify-content: flex-end;
}

.bubble {
    max-width: 65%;
    padding: 10px 14px;
    border-radius: 18px;
    position: relative;
    font-size: 0.95rem;
    word-wrap: break-word;
}

.message-in .bubble {
    background: #c3c3c3;
    color: #000;
    border-bottom-left-radius: 4px;
}

.message-out .bubble {
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.message-time {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 5px;
    text-align: right;
}

.read-receipt {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-top: 3px;
    text-align: right;
}

.messagewindow, .conversation-list {
    overflow-y: auto;
    overscroll-behavior: contain; /* prevents scroll chaining to window */
}


/* MUSINGS */
.musingcard {
	padding: 0px 20px;
	padding-bottom: 20px;
	box-shadow: 0 4px 8px 0 rgba(var(--rgb),0.5);
	transition: 0.3s;
	width: 500px;
	/* height: auto; */
	background-color: #eeeeee !important;
	border-radius: 10px;
	display: block;
	overflow: auto;
}
.musingcard img {
	border-radius: 10px;
}
.musingcard a {
	text-decoration: none;
	color: #c1c4c8;
}
.musingcard:hover {
	box-shadow: 0 8px 16px 0 rgba(var(--rgb),1);
}
.musingcontainer {
	float: left !important;
	padding: 0px 0px;
	background-color: #eeeeee !important;
	color: #313131;
	height: auto;
	width: auto;
	border-radius: 0px 10px 10px 0px;
}
.musingcontainer a {
	text-decoration: none;
	color: #c1c4c8;
}
/* END MUSING */
.messagewindow {
	/* width: 450px !important; */
	/* width: 600px !important; */
	/* width: 100% !important; */
	/* width: 430px !important; */
	/* height: 600px !important; */
	border-style: solid !important;
	border-width: 1.5px !important;
	border-color: eeeeee !important;
	overflow-y: scroll !important;
	overflow-x: hidden !important;
}


.messagebox {
	/* width: 449px !important; */
	/* width: 650px !important; */
	width: 100% !important;
	height: auto;
	background-color: #0000ff;
}
/* .messagetextbox { */
	/* margin-left: 170px; */
	/* width: 449px; */
	/* width: 600px; */
	/* width: 100%; */
	/* width: 430px; */
/* } */
.messagebubblesender {
	padding: 4px 4px 4px 4px !important;
	border-radius:20px 20px 0px 20px !important;
	width:auto !important;
	max-width: 330px !important;
	height: auto !important;
	background-color: var(--brand) !important;
	float: right !important;
	color: #ffffff !important;
	margin-bottom: 5px;
}
.messagebubblereceiver {
	padding: 4px 4px 4px 4px !important;
	border-radius:20px 20px 20px 0px !important;
	width:auto !important;
	max-width: 330px !important;
	height: auto !important;
	background-color: #eeeeee !important;
	float: left !important;
	color: #000000 !important;
	margin-bottom: 5px;
}
.messagebubblesystem {
	padding: 4px 4px 4px 4px !important;
	border-radius: 10px 10px 10px 10px !important;
	width:auto !important;
	max-width: 100% !important;
	height: auto !important;
	background-color: #eeeeee !important;
	float: left !important;
	color: #000000 !important;
	margin-bottom: 5px;
}
.messagedate {
	/* width: 400px !important; */
	text-align: center !important;
	float: center !important;
}

/* Style for the popup menu */
.popup-menu {
  display: none;
  background-color: #f3f4f7;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 5px;
  z-index: 2;
}

.popup-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popup-menu li {
  cursor: pointer;
  padding: 5px 10px;
}

.popup-menu li:hover {
  background-color: #ffffff;
}

.message-option-btn{
	width: 80px;
}
.message-option-btn{
	border-style: none;
	background-color: rgba(0, 0, 0, 0);
	color: #000000;
}

.modal {
  position: fixed !important;
  inset: 0 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;

  display: none;
  z-index: 100001 !important;

  display: flex;
  justify-content: center;

  /* CHANGE THIS */
  align-items: flex-start;

  padding: 40px 20px; /* top spacing replaces fake centering */
  box-sizing: border-box;

  overflow-y: auto; /* allows whole modal to scroll if needed */
}

.modal-content {
  position: relative !important; /* kill absolute positioning */
  /* top: auto !important; */
  top: calc(var(--safe-top) + var(--banner-height));
  left: auto !important;
  transform: none !important;

  width: 100%;
  max-width: 100%;
  /* max-width: clamp(504px, calc(100vw - 520px), 900px); */
  /* width: clamp(764px, calc(100vw - 520px), 900px); */

  max-height: 100%;
  display: flex;
  flex-direction: column;

  background-color: #fff !important;
  border-radius: 5px !important;
  overflow: visible; /* important for internal scroll control */
}

.modal-content p {
  margin-bottom: 20px !important;
}

.modal-content button {
  margin-right: 10px !important;
}

/* .notification { */
	/* background-color: var(--brand); */
	/* color: white; */
	/* text-decoration: none; */
	/* padding: 15px 26px; */
	/* position: relative; */
	/* display: inline-block; */
	/* border-radius: 2px; */
/* } */
/* .notification .badge { */
	/* position: absolute; */
	/* top: 9px; */
	/* right: 110px; */
	/* height: 20px; */
	/* width: 20px; */
	/* border-radius: 100%; */
	/* background: #ff0000; */
	/* color: #eeeeee; */
	/* font-size: 15px; */
	/* text-align: center; */
/* } */

/* #profile-top{
	height: 325px;
} */

/* .aslcontent p {
	margin-top: -20px;
	margin-bottom: 5px;
}
#ptofile-top {
	height: 100%;
} */
.matchbox {
	display: none;
	/* position: absolute; */
	/* margin-left: 315px; */
	/* height: 100px; */
	/* width: 250px; */
	max-width: 100%;
	background-color: #e5e5e5 !important;
	transition: 0.5s;
}
.matchbox:hover {
	background-color: #ddd !important;
	transform: scale(1.1);
}
.matchbox table {
	margin-top: -40px;
	margin-left: 20px;
} 
#mfem {
	color: #de1157;
}
#mfef {
	color: blue;
}
#mfee {
	color: black;
}
.mfem {
	color: #de1157;
}
.mfef {
	color: blue;
}
.mfee {
	color: black;
}

.locsearch-box{
	width: 235px;
	position: relative;
	display: inline-block;
	font-size: 14px;
}
.locsearch-box input[type="text"]{
	height: 32px;
	padding: 5px 10px;
	border: 1px solid #CCCCCC;
	font-size: 14px;
}
.locresult{
	position: absolute;
	z-index: 999;
	top: 100%;
	left: 0;
	color: var(--brand);
	text-decoration: none;
	height: auto;
	background-color: rgba(0,0,0,0) !important;
}
.locsearch-box input[type="text"], .locresult{
	width: 100%;
	color: var(--brand);
	text-decoration: none;
}
/* Formatting result items */
.locresult p{
	margin: 0;
	border: 1px solid #000000;
	cursor: pointer;
	background: #ffffff;
	text-decoration: none;
	height: 80px;
}
.locresult p:hover{
	background: #f1f1f1;
}
.locresult a:link, .locresult a:visited {
	color: var(--brand);
	text-decoration: none;
}
.questions {
	width: 450px;
	float: left;
	border-style: solid;
	border-width: 1px;
	border-color: var(--brand);
	margin-bottom: 20px;
	background-color: #313131;
	display: none;
}
.uquestions {
	width: 450px;
	float: left;
	border-style: solid;
	border-width: 1px;
	border-color: var(--brand);
	margin-bottom: 20px;
	background-color: #313131;
}
.rate {
	float: left;
	height: 46px;
	padding: 0 10px;
}
/* Hide the radio buttons */
.rate:not(:checked) > input {
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    pointer-events: none;
}

/* Style for unchecked labels */
.rate:not(:checked) > label {
    float: right; /* Align labels to the right */
    line-height: 46px; /* Match the height of the radio buttons */
	width: 1em;
	overflow: hidden;
	white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
    margin-right: 5px; /* Add some margin between the label and the radio button */
}

/* Style for unchecked labels - star symbol */
.rate:not(:checked) > label:before {
    content: '★ '; /* Display star symbol before the label */
    overflow: hidden; /* Ensure the star symbol is displayed properly */
}

/* Style for checked labels */
.rate > input:checked ~ label {
    color: #ffc700;
}

/* Hover style for labels */
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}

/* Hover style for checked labels */
.rate > input:checked + label:hover,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

#noteOutput {
	color: var(--brand) !important;
}
.userlinks {
	font-weight: bold;
	font-size: 20px;
	color: var(--brand) !important;
	float: none !important;
	padding: 0 !important;
}
@media (min-width: 578px) {
	.userlinks {
		font-weight: bold;
		font-size: 25px;
		color: var(--brand) !important;
		float: none !important;
		padding: 0 !important;
	}
}
.tab a.userlinks {
    float: none !important; /* Reset the float property */
}
.asllinks {
	color: #313131 !important;
}
.pagination {
	list-style-type: none;
	padding: 10px 0;
	display: inline-flex;
	justify-content: space-between;
	box-sizing: border-box;
	float: center;
}
.pagination li {
	box-sizing: border-box;
	padding-right: 10px;
}
.pagination li a {
	box-sizing: border-box;
	background-color: #e2e6e6;
	padding: 8px;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #616872;
	border-radius: 4px;
}
.pagination li a:hover {
	background-color: #d4dada;
}
.pagination .next a, .pagination .prev a {
	text-transform: uppercase;
	font-size: 12px;
}
.pagination .currentpage a {
	background-color: var(--brand);
	color: #fff;
}
.pagination .currentpage a:hover {
	background-color: var(--brand);
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
	float: none;
	display: block;
	text-align: left;
	width: 100%;
	margin: 0;
	padding: 14px;
}

/* checkmarkcontainer was here */

/* Questions */
.question-card{
	box-shadow: 0 4px 8px 0 rgba(var(--rgb),0.5);
	transition: 0.3s;
	width: 500px;
	border-width: 1px;
	border-radius: 20px;
	background-color: #eeeeee;
	padding: 10px;
	margin: 20px;
	overflow: none;
	height: auto;
}
.question-card:hover {
	box-shadow: 0 8px 16px 0 rgba(var(--rgb),1);
}

/* Popup */
/* Tooltip */
.tooltip {
	display: inline-block;
	position: absolute;
	z-index: 700 !important;
	background-color: #eeeeee !important;
	opacity: 1 !important;
	visibility: visible !important;
	padding: 10px 12px;
	padding-bottom: 18px;
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: 0 8px 16px rgba(var(--rgb),0.25);
	width: auto;
	max-width: 95vw;
	height: auto;
	overflow: visible;
}

/* Popup Container */
.popup-container{
	width: 420px;
	max-width: 95vw;
	height: auto;
	color: #313131;
	/* padding: 8px 12px; */
	box-sizing: border-box;
}

.popup-top {
	display: inline-block;
	width: 100%;
}

/* Profile Image */
.popup-image{
	width: 150px;
	height: 150px;
	float: left;
	margin-right: 12px;
	/* space between image and title */
	margin-bottom: 8px;
}
.popup-image img {
	width: 150px;
	height: 150px;
	border-radius: 10px;
	object-fit: cover;
}

/* Title + ASL + Matchbox */
.popup-title{
	border-radius: 10px;
	width: 255px;
	height: auto;
	float: right;
	margin-top: 0;
	padding: 8px 10px;
	/* margin-left: 6px; */
	margin-right: 3px;
	margin-bottom: 5px;
	background-color: #e5e5e5 !important;
	box-sizing: border-box;
}

.popup-title h4{
	margin-right: 3px;
	margin-top: 6px;
	margin-bottom: 4px;
	color: var(--brand);
	font-size: 15px;
	line-height: 1.35;
	padding: 3px;
}

.popup-userline {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

#popup-asl{
	margin-top: 12px;
	margin-bottom: 6px;
	color: #313131;
	font-size: 13px;
	line-height: 1.3;
}

/* Matchbox Table */
.popup-matchbox table{
	margin-top: 6px;
	margin-left: 0px;
	font-size: 13px;
}

.popup-matchbox td{
	padding-right: 3px;
	/* space between label and value */
}

/* Interests Pills */
.popup-interests{
	float: left;
	padding: 6px 16px;
	margin: 4px 6px 4px 0;
	border-radius: 26.5px;
	background-color: #e5e5e5;
	font-size: 13px;
	line-height: 1.4;
}

/* Bottom section - bio */
#popup-interests {
	width: 100%;
	margin-top: 12px;
	clear: both;
}

#popup-about {
	padding-top: 6px;
	width: 100%;
	clear: both;
}

#popup-about h4 {
	margin-bottom: 4px;
	/* font-size: 14px; */
	color: var(--brand);
	font-weight: bold;
	padding-bottom: 15px;
	font-size: 17px;
}

.popup-bio {
	font-size: 13px;
	color: #444;
	line-height: 1.4;
	padding-right: 4px;
	margin-top: -6px;
}

/* ============================= */
/* ========== MOBILE =========== */
/* ============================= */

@media (max-width: 480px) {

	.tooltip {
		left: 2.5vw !important;
		right: 2.5vw !important;
		max-width: 95vw;
		padding: 8px;
		font-size: 14px;
	}

	.popup-container {
		width: 100%;
		max-width: 100%;
	}

	/* Stack image and title */
	/* .popup-image, */
	.popup-title {
		float: none;
		width: 100%;
	}

	.popup-image {
		height: auto;
		margin-right: 0;
		text-align: center;
		float: left;
		width: 32%;
	}

	.popup-image img {
		width: 120px;
		height: 120px;
	}

	.popup-title {
		/* margin-top: 10px; */
		/* width: 100%; */
		width: 64%;
		padding: 10px;
		float: right;
	}

	.popup-title h4 {
		font-size: 14px;
	}

	#popup-asl {
		font-size: 12px;
	}

	.popup-matchbox table {
		font-size: 12px;
	}

	/* Interests */
	.popup-interests {
		float: none;
		display: inline-block;
		font-size: 12px;
		padding: 5px 12px;
		margin: 4px 4px 4px 0;
	}

	/* Bio */
	.popup-bio {
		font-size: 12px;
		line-height: 1.35;
	}

}

/* CSS for the notification container */
.notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse; /* Stack notifications in reverse order */
    align-items: flex-end;
    z-index: 10;
}

/* CSS for the notifications */
.notification-popup {
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px; /* Adjust as needed to control spacing between notifications */
    display: none;
    transition: transform 0.3s ease-in-out;
	max-width: 322px;
	max-height: 190px;
	text-decoration: none;
}

.notification-popup.active {
    display: block;
}

.close-button-popup {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 10px;
}
.notification-popup-link {
	text-decoration: none;
	color: #fff;
}


.tooltip-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--brand);
    color: #fff;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 5px;
}

.tooltip2 {
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 10px;
	padding-right: 30px;
    border-radius: 5px;
    width: 200px;
    top: 30px;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    z-index: 1;
	box-shadow: 0 8px 16px 0 rgba(var(--rgb),1);
}

.tooltip2:before {
    content: '';
    position: absolute;
    top: 30px;
    /* left: 50%; */
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

.session-grid {
    display: grid;
    gap: 16px;
}

/* 2 columns on tablet+ */
@media (min-width: 768px) {
    .session-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 columns on desktop if you want */
/* @media (min-width: 1200px) {
    .session-grid {
        grid-template-columns: repeat(3, 1fr);
    }
} */

.device-card {
    border: 1px solid var(--brand);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.device-row {
    display: flex;
    margin-bottom: 6px;
}

.device-label {
	color: var(--brand);
    font-weight: 600;
    min-width: 130px;
    margin-right: 8px;
	flex: 0.5;
    word-break: break-word;       /* 🔥 critical */
    overflow-wrap: anywhere;      /* 🔥 critical */
}

.device-value {
    flex: 1;
    word-break: break-word;       /* 🔥 critical */
    overflow-wrap: anywhere;      /* 🔥 critical */
}

@media (max-width: 576px) {
    .device-row {
        flex-direction: column;
    }

    .device-label {
        margin-bottom: 2px;
    }
}

.device-action-row {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.logout-button {
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* #interestTooltipContent { */
  /* display: none; */
  /* position: fixed; */
  /* background-color: #fff; */
  /* border: 1px solid #ccc; */
  /* padding: 10px; */
  /* border-radius: 5px; */
  /* width: 200px; */
  /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
  /* z-index: 9999; */
/* } */

/* #interestTooltipContent:before { */
  /* content: ''; */
  /* position: absolute; */
  /* top: -10px; */
  /* left: 50%; */
  /* margin-left: -5px; */
  /* border-width: 5px; */
  /* border-style: solid; */
  /* border-color: transparent transparent #fff transparent; */
/* } */

#loadingScreen {
    position: fixed;
	overflow-x: none !important;
	overflow-y: none !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	/* margin-top: -5px; */
    background-color: rgba(255, 255, 255, 1); /* Adjust opacity as needed */
    z-index: 9999;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#loadingScreen img {
	max-width: 50%;
    animation: pulsate 3s infinite;
}


/* Chat */
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  /* text-transform: uppercase; */
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}


/* #backToTop {
	position: fixed;
	bottom: calc(var(--navbar-height) + 60px + var(--safe-bottom));
} */