* {
  	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;
		/* touch-action: manipulation; */
    /* user-zoom: fixed; */
    /* -ms-content-zooming: none; */
    /* -ms-touch-action: manipulation; */
    /* zoom: fixed; */
	/* touch-action: manipulation; */
	/* zoom: fixed; */
	}
body {
  	background-color: #435165;
	color: #000000;
	text-decoration: none;
		/* width: 100%; */
	/* overflow-x: hidden; */
	}
/* @media (max-width: 955px) { */
  /* body { */
    /* zoom: 100%; */
/* } */
.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: #008080 !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: #008080;
  	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: #008080;
	border: 0;
	cursor: pointer;
	font-weight: bold;
	color: #ffffff;
	transition: background-color 0.2s;
}
.login form input[type="file"]:hover {
	background-color: #005a5a;
	transition: background-color 0.2s;
}
.login form input[type="submit"]{
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
	background-color: #008080;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #005a5a;
  	transition: background-color 0.2s;
}
.login form button[type="submit"]{
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
	background-color: #008080;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}

.login form button[type="submit"]:hover {
	background-color: #005a5a;
  	transition: background-color 0.2s;
}
.logindiv{
  	dth: 400px;
  	padding: 15px;
 	margin-top: 20px;
	background-color: #008080;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
	text-decoration: none;
}
.logindiv:hover {
	background-color: #005a5a;
  	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: #008080;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.loginlink form input[type="submit"]:hover {
	background-color: #005a5a;
  	transition: background-color 0.2s;
}
.skip form input[type="submit"] {
	width: 360px;
	padding: 15px;
	margin-top: 20px;
	background-color: #008080;
	border: 0;
	cursor: pointer;
	font-weight: bold;
	color: #ffffff;
	transition: background-color 0.2s;
}
.skip form input[type="submit"]:hover {
	background-color: #005a5a;
	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: #008080; */
	/* height: 10%; */
	/* max-height: 150px; */
	/* /* min-width: 945px; */
	/* /* width: 945px; */
	/* width: 100%; */
	/* left: 0; */
	/* border: 0; */
	/* box-shadow: 0 6px 20px 0 rgba(0, 128, 128, 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: #008080;
	height: auto;	   
	width: 200px;
	border: 0;
	box-shadow: 0 6px 20px 0 rgba(0, 128, 128, 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: #005a5a;
	box-shadow: 0 8px 16px 0 rgba(0,128,128,1);
}
/* .navbuttonactive { */
	/* /* background-color: #005a5a; */ */
	/* color: #eaebed; */
/* } */
.navbuttonactive {
	background-color: #005a5a;
}
.profile-dropdown {
	position: relative;
	display: inline-block;
	z-index: 4;
}

.profile-dropdown-content {
	display: none;
	position: absolute;
	background-color: #008080;
	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(0,128,128,1);
}
.progress {
	width: 300px;
	height: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	background: linear-gradient(to right, #008080 %, #cccccc %);
	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: #008080;
}
.content h2:link, .content h2:visited {
	color: #008080;
	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: #008080;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.content a {
	text-decoration: none;
	/* font-weight: bold; */
}
.notification {
	background-color: #008080;
	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: 20px;
	min-width: 20px;
	width: auto;
	border-radius: 25%;
	background: #ff0000;
	color: #eeeeee;
	font-size: 15px;
	text-align: center;
	z-index: 5;
}
#messageNotificationCount, #inboxNotificationCount, #otherNotificationCount {
	padding-left: 5px;
	padding-right: 5px;
	position: absolute;
	top: 15px;
	right: 15px;
	height: 20px;
	min-width: 20px;
	width: auto;
	border-radius: 25%;
	background: #ff0000;
	color: #eeeeee;
	font-size: 15px;
	text-align: center;
	z-index: 5;
}
.profile-head{
	background-color: #ffffff;
}
.upload-content {
	width: 945px;
	margin: 0 auto;
	background-color: #ffffff;
	color: #000000;
}
.upload-content div {
	/* background-color: #ffffff; */
}
.upload-content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #008080;
}
.upload-content h2:link, .upload-content h2:visited {
	color: #008080;
	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: #008080;
	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: #008080;
	text-decoration: none !important;
}
.bio .aboutcontent {
	width: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	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: #008080;
}
.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: #008080;
	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: 505px;
	 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: #008080;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.token a {
	color: #fff;
	text-decoration: none;
}
/* Hover effect */
.token:hover {
    background-color: #005a5a;
}
/* 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: #008080;
	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: #008080;
}
.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: #008080;
	padding-right: 15px;
}
.imagecontent > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.caption {
	display: none;
}
/* Thumbnail styles */
.thumbnail-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.thumbnail {
	width: 260px;
	height: 260px;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	z-index: 1;
}
.thumbnail-container :hover, .thumbnail :hover {
	transform: scale(1.1);
	z-index: 2;
}
/* Lightbox styles */
.lightbox {
	position: fixed;
	top: 0;
	left: 2.5%;
	width: 95%;
	height: 95%;
	background-color: #f3f4f7;
	display: none;
	justify-content: center;
	/* align-items: center; */
	z-index: 10000;
	overflow: none;
}
.lightbox-image {
	max-width: 100%;
	max-height: calc(100vh - 200px); /* 200px is the height of the navigation container and the distance from the top and bottom of the window */
	object-fit: contain;
}
.navigation-container {
	display: flex;
	justify-content: space-between;
	height: 102px;
	width: 100%;
	position: absolute;
	bottom: 20px;
	left: 0;
	padding: 10px;
	box-sizing: border-box;
}
.prev,
.next {
	display: inline-block;
	height: 50px;
	color: white;
	padding: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	background-color: #008080;
	text-decoration: none;
}
.prev:hover,
.next:hover {
	background-color: #005a5a;
	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: #008080;
}
.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: #008080;
	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: #008080;
}
.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: #008080;
	padding-right: 15px;
}
.interests > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.similarusers {
	float: right;
	width: auto;
	padding: 25px;
	border: 2px solid #e0e0e3;
	width: 315px;
	color: #008080 !important;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.similarusers h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #008080 !important;
}
.similarusers > p, .similarusers > div {
	box-shadow: 0 4px 8px 0 rgba(0,128,128,0.5);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.similarusers > p table td, .similarusers > div table td {
	padding: 5px;
}
.similarusers > p table td:first-child, .similarusers > div table td:first-child {
	font-weight: bold;
	color: #008080;
	padding-right: 15px;
}
.similarusers > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

.similarusershome {
	float: right;
	padding: 25px;
	width: 320px;
	border-radius: 15px;
	border-style: solid;
	border-width: 5px;
	margin-right: 5px;
	border-color: #cccccc !important;
}
.similarusershome h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #008080;
}
.similarusershome > p, .similarusershome > div {
	box-shadow: 0 4px 8px 0 rgba(0,128,128,0.5);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.similarusershome > p table td, .similarusershome > div table td {
	padding: 5px;
}
.similarusershome > p table td:first-child, .similarusershome > div table td:first-child {
	font-weight: bold;
	color: #008080;
	padding-right: 15px;
}
.similarusershome > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}
.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: #008080;
  	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: #008080;
  	color: #ffffff;
}
.setup form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
	background-color: #008080;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.setup form input[type="submit"]:hover {
	background-color: #005a5a;
  	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 {
	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: #008080 !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: #005a5a !important;
}
.home .upload-image button.active, .asl .home .upload-image button.active {
	background-color: #005a5a !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: #005a5a !important;
}
.update-buttons{
	width: 59px;
	height: auto;
	padding-left: 10px;
	padding-right: 10px;
}
.close-button{
	background-color: #ffffff;
	color: #008080;
	border-style: none;
	border-radius: 15px;
}
.super-table table, .super-table th, .super-table td{
	border-style: solid;
	border-width: 2px;
	border-color: #008080;
}

/* 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(0,128,128,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: #008080;
}

/* 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(0, 128, 128, 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(0,128,128,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(0,128,128,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: #008080;
}

.home .updateactive {
	background-color: #005a5a !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: #008080;
	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: #005a5a;
}
.upload-image button.active {
	background-color: #005a5a;
}
.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: #008080;
	font-weight: bold;
	color: #FFFFFF;
	padding: 10px 15px;
	margin: 15px 10px 15px 0;
	border-radius: 5px;
}
.delete .yesno a:hover {
	background-color: #005a5a;
}
/* 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: 945px;
	/* width: 100%; */
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	/* position: fixed; */
	/* bottom: 0; */
}
.footer a {
	text-decoration: none;
	color: #008080;
}
.tababout {
	float: left;
	padding: 6px 12px;
	border: 1px solid #ccc;
	min-height: auto;
	background-color: #ffffff;
}
.tababout a {
	text-decoration:none;
	color: #008080;
}
.tababout h1 {
	/* color: #008080; */
	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: #008080;
}
input:disabled + .slider {
	background-color: #cccccc;
}

input:focus + .slider {
	box-shadow: 0 0 1px #008080;
}

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%;
}
.messagebuttons {
	float: right;
	width: 285px;
	height: auto;
	/* padding-top: 0px; */
	/* padding-bottom: 0px; */
	margin-top: -5px;
	margin-bottom: -5px;
}
.messagebutton {
	width: 100px;
	height: 49px;
}
.messagebutton button {
	color: #000000;
	width: 250px;
}
.messagebutton a {
	float: right;
	width: 100px;
	margin-top: -10px;
	margin-bottom: -10px;
}
.card {
	box-shadow: 0 4px 8px 0 rgba(0,128,128,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(0,128,128,1);
}
.container {
	float: right !important;
	padding: 0px 0px;
	background-color: #eeeeee !important;
	color: #313131;
	height: 200px;
	width: 250px;
	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(0,128,128,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(0,128,128,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: 150px;
	border-radius: 0px 100px 100px 0px;
}
.containernew a {
	text-decoration: none;
	color: #c1c4c8;
}
.notes {
	color: #008080;
}
.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(0,128,128,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(0,128,128,1) !important;
}
.containerhome {
	float: right;
	color: #313131;
	height: 100px;
	width: 140px;
	border-radius: 0px 75px 75px 0px;
	overflow: hidden;
}
.containerhome h4 {
	color: #008080;
}
.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: #008080;
	text-decoration: none !important;
}
.views h2:link, .views h2:visited {
	color: #008080;
	text-decoration: none !important;
}
.views a {
	text-decoration: none !important;
}
#firstviewlink h2 {
	color: #008080 !important;
	text-decoration: none !important;
}
#viewlink a {
	text-decoration: none !important;
	font-weight: bold;
	color: #008080;
}
.updates {
	float: center;
	/* width: 570px; */
	width: 890px;
	padding-left: 5px;
	margin-right: 5px;
	height: auto;
	border-style: solid;
	border-width: 5px;
	border-color: #cccccc;
	border-radius: 15px;
	overflow-y: scroll;
	overflow-x: hidden;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.updates h2 {
	text-align: center;
}
.updates a {
	font-weight: bold;
	color: #008080;
	text-decoration: none;
}
.update-post{
	float: left;
	/* width: 532px; */
	width: 880;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	justify-items: center;
}
.update-pic{
	width: 110px;
	float: left;
}
.update-body{
	float: right;
	min-height: 110px;
	width: 745px;
	margin-right: 5px;
	margin-left: 5px;
}
.cartop {
	width: 890px;
	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 {
	width: 890px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	height: 426px;
	border-style: solid;
	border-width: 5px;
	border-color: #cccccc;
	/* border-radius: 0px 0px 15px 15px; */
	display: flex;
	flex-direction: row;
	overflow: hidden;
	overflow-x: scroll;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.carcard {
	margin-right: 15px;
	box-shadow: 0 4px 8px 0 rgba(0,128,128,0.5);
	transition: 0.3s;
	width: 200px;
	height: 375px;
	border-radius: 10px;

}
.carcard img {
	border-radius: 10px 10px 0px 0px;
}
.carcard a {
	text-decoration: none;
	color: #313131;
}
.carcard:hover {
	box-shadow: 0 8px 16px 0 rgba(0,128,128,1);
	transform: scale(1.05);
}
.carcontainer {
	float: right;
	padding: 0px 0px;
	width: 200px;
	border-radius: 0px 0px 10px 10px;
}
.carcontainer a {
	text-decoration: none;
	color: #c1c4c8;
}
.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(0,128,128,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(0,128,128,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: 505px;
	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: #008080;
	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: #008080;
	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: #008080 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: #008080;
	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 #008080;
	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: #008080;
	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: #008080;
	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: #008080;
	padding: 10px;
}

.profilecard {
	margin-right: 25px;
	box-shadow: 0 8px 16px 0 <?$mainrgba?> !important;
	transition: 0.3s;
	width: 265px;
	height: 100px;
	border-radius: 11px;
	background-color: #eeeeee;
	/* overflow: hidden; */
}
.profilecard img {
	margin-top: -25px;
	margin-left: -25px;
	height: 100px;
	width: 100px;
	border-radius: 8px 0px 0px 8px;
}
.profilecard a {
	text-decoration: none;
	color: #313131;
}
.profilecard:hover {
	box-shadow: 0 8px 16px 0 rgba(0,128,128,1) !important;
	transform: scale(1.025);
}
.profilecontainer {
	margin-top: -25px;
	margin-right: -25px;
	margin-left: 0px;
	float: right;
	background-color: #eeeeee;
	height: 100px;
	width: 165px;
	border-radius: 0px 8px 8px 0px;
	overflow: hidden;
}
.profilecontainer h4 {
	margin-top: -0px;
	margin-left: 15px;
	font-size: 4px;
}
.profilecontainer h5 {
	margin-top: -10px;
	margin-left: 20px;
	font-weight: normal;
}
.profilecontainer a {
	text-decoration: none;
	color: #c1c4c8;
}

.messagetabcontent{
	height: 775px;
	position: relative;
}
.messageprofilecard {
	float: left;
	margin-top: 21px;
	margin-right: 20px;
	box-shadow: 0 4px 8px 0 rgba(0,128,128,0.5);
	transition: 0.3s;
	width: 150px;
	height: 180px;
	border-radius: 10px 10px 10px 10px;
	z-index: 3;
}
.messageprofilecard img {
	border-radius: 10px 10px 0px 0px;
	z-index: 3;
}
.messageprofilecard a {
	text-decoration: none;
	color: #c1c4c8;
	z-index: 3;
}
.messageprofilecard:hover {
	box-shadow: 0px 8px 16px 0px rgba(0,128,128,1);
}
.messageprofilecontainer {
	height: 20px;
	width: 150px;
	border-radius: 10px 10px 10px 10px;
	margin-top: -20px;
	z-index: 3;
}
.messageprofilecontainer h4 {
	text-align: center;
	color: #008080;
	z-index: 3;
}
.messageprofilecontainer a {
	text-decoration: none;
	color: #c1c4c8;
	z-index: 3;
}
.messagecontentcontainer {
	/* position: absolute; */
	/* width: 500px; */
	width: 100%;
	left: 250px
}

.messagecard {
	margin-bottom: 20px;
	box-shadow: 0 4px 8px 0 rgba(0,128,128,0.5);
	transition: 0.3s;
	width: 500px;
	height: 200px;
	background-color: #eeeeee !important;
	border-radius: 20px;
}
#messageread {
}
#messageuread{
	/* background-color: #999999 !important; */
	/* background-color: #008080 !important; */
	background-color: #008080 !important;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}
#messageuread:hover{
	background-color: #afafaf;

	box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
}
.messagecard img {
}
.messagecard a {
	text-decoration: none;
	color: #c1c4c8;
}
.messagecard:hover {
	box-shadow: 0 8px 16px 0 rgba(0,128,128,1);
	/* transform: matrix(0, 1, 1, 0, -1, 1); */
	/* (0, width, height, 0, 0, 0) */
	transform: scale(1.025);
	/* (0, width, height, 0, 0, 0) */
}
.messagecontainer {
	float:right;
	padding: 0px 0px;
	color: #313131;
	height: 200px;
	width: 275px;
	border-radius: 0px 19px 19px 0px;
	background-color: #eeeeee !important;
}
/* .messagecontainer  */
.messagecontainer a {
	text-decoration: none;
	color: #c1c4c8;
}
/* MUSINGS */
.musingcard {
	padding: 0px 20px;
	padding-bottom: 20px;
	box-shadow: 0 4px 8px 0 rgba(0,128,128,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(0,128,128,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;
}
/* 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: #008080; 
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #005a5a; 
}
:root{
  scrollbar-color: rgba(0,128,128,1) #f3f4f7;
  scrollbar-width: thin;
}

.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: #008080 !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;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  display: none;
  z-index: 10001 !important;
}

.modal-content {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  background-color: #ffffff !important;
  padding: 20px !important;
  border-radius: 5px !important;
}

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

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

/* .notification { */
	/* background-color: #008080; */
	/* 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;
}

.asl {
	position: absolute;
	margin-left: 315px;
	margin-top: 100px;
	height: 206px;
	width: 270px;
	border-style: none;
}
.asl p {
	line-height: 15px;
}
/* .aslcontent {
	border-style: none;
} */
.aslcontent p {
	margin-top: -20px;
	margin-bottom: 5px;
}
#ptofile-top {
	height: 100%;
}
.matchbox {
	display: none;
	position: absolute;
	margin-left: 315px;
	height: 100px;
	width: 250px;
	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;
}
.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: #008080;
	text-decoration: none;
	height: auto;
	background-color: rgba(0,0,0,0) !important;
}
.locsearch-box input[type="text"], .locresult{
	width: 100%;
	color: #008080;
	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: #008080;
	text-decoration: none;
}
.questions {
	width: 450px;
	float: left;
	border-style: solid;
	border-width: 1px;
	border-color: #008080;
	margin-bottom: 20px;
	background-color: #313131;
	display: none;
}
.uquestions {
	width: 450px;
	float: left;
	border-style: solid;
	border-width: 1px;
	border-color: #008080;
	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: #008080 !important;
}
.userlinks {
	color: #008080 !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: #008080;
	color: #fff;
}
.pagination .currentpage a:hover {
	background-color: #005a5a;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
	float: none;
	display: block;
	text-align: left;
	width: 100%;
	margin: 0;
	padding: 14px;
}
/* The container */
.checkmarkcontainer {
	display: inline-block;
	position: relative;
	padding-left: 25px;
	padding-right: 25px;
	margin-bottom: 5px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.checkmarkcontainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 2px;
	left: 2px;
	height: 15px;
	width: 15px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkmarkcontainer:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkmarkcontainer input:checked ~ .checkmark {
	background-color: #008080;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkmarkcontainer input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkmarkcontainer .checkmark:after {
	left: 4px;
	top: 0px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* The container */
.checkmarkcontainerpro {
	display: block;
	position: relative;
	padding-left: 25px;
	padding-right: 25px;
	margin-bottom: 10px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.checkmarkcontainerpro input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmarkpro {
	position: absolute;
	top: 2px;
	left: 2px;
	height: 15px;
	width: 15px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkmarkcontainerpro:hover input ~ .checkmarkpro {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkmarkcontainerpro input:checked ~ .checkmarkpro {
	background-color: #008080;
}

/* Create the checkmarkpro/indicator (hidden when not checked) */
.checkmarkpro:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmarkpro when checked */
.checkmarkcontainerpro input:checked ~ .checkmarkpro:after {
	display: block;
}

/* Style the checkmarkpro/indicator */
.checkmarkcontainerpro .checkmarkpro:after {
	left: 4px;
	top: 0px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.searchlabels {
	font-size: 20px;
	border-bottom: 1px solid #e0e0e3;
	margin-bottom: 20px;
	color: #008080;
	display: inline;
}

/* Questions */
.question-card{
	box-shadow: 0 4px 8px 0 rgba(0,128,128,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(0,128,128,1);
}

/* Popup */
.popup-container{
	width: 420px;
	/* height: 345px; */
	height: auto;
	overflow: none;
	/* background-color: #eeeeee; */
	color: #313131;
}
.popup-image{
	width: 150px;
	height:150px;
	float: left;
	margin-bottom: 5px;
}
.popup-image img {
	width: 150px;
	height: 150px;
}
.popup-title{
	border-radius: 10px;
	/* margin-left: -20px; */
	margin-right: 10px;
	width: 255px;
	/* width: 270px; */
	height:175px;
	float: right;
	margin-top: 0px;
	/* padding-top: -10px; */
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 5px;
	background-color: #e5e5e5 !important;
}
.popup-title h4{
	position: relative;
	margin-top: 5px;
	/* margin-bottom: 20px; */
	color: #008080;
	font-size: 15px;
}
#popup-asl{
	margin-top: 15px;
	margin-bottom: -15px;
	color: #313131;
}
.popup-matchbox{
	/* border-radius: 10px; */
	/* margin-left: -10px; */
	/* width: 255px; */
	/* height: 85px; */
	/* margin-top: -35px; */
	/* margin-top: 50px; */
	/* padding-top: -100px; */
	/* background-color: #e5e5e5 !important; */
}
.popup-matchbox table{
	margin-top: -40px;
	/* margin-left: 20px; */
	margin-left: 0px;
}
.popup-interests{
	float: left;
	max-height: auto;
	max-width: auto;
	padding-left: 20px;
	padding-right: 20px;
	/* padding-top: 0px; */
	/* padding-bottom: 0px; */
	margin-left: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	/* border-radius: 10px; */
	border-radius: 26.5px;
	background-color: #e5e5e5;
	
}
.popup-interests p{
	font-size: 13px;
}

/* 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 {
	position: absolute;
	z-index: 9999;
	background-color: #eeeeee;
	/* background-color: #eee; */
	/* color: white; */
	padding: 5px;
	padding-bottom: 15px;
	border-radius: 10px;
	font-size: 20px;
	/* height: 345px !important; */
	max-height: auto;
	width: 420px;
	overflow: none;
	box-shadow: 0 8px 16px 0 rgba(0,128,128,1);
}

.tooltip-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #008080;
    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(0,128,128,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;
}

.device-card {
	margin-bottom: 10px;
	float: left;
	border-style: solid;
	border-width: 1px;
	border-color: #008080;
	border-radius: 10px;
	word-wrap: normal;
	width: 350px;
}

/* #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;
}