:root {
	--xu-red: #ff9060;
	--xu-redbg: #ef0448;
}
html {
	height: 100%;
}
body {
    padding: 0px;
    margin: 0px;
	font-family: "Open Sans",Arial,sans-serif;
	color: #242833;
	width: 100%;
	height: 100%;
}
.body_index {
	background-color: #ff9060 !important;
	background-repeat:	no-repeat;
	background-position: center center;
	background-attachment: fixed;
    background-size: cover;

}
.body_main {
	background-color: #ff9060 !important;
}


table {
	border-spacing: 0px;
	border-collapse: collapse;
}
td {
	padding: 0px;
}

form {
	display: inline;
	margin: 0px;
	padding: 0px;
}
button, .button {
    position: relative;
    top: 1px;	
	background-color: #f55;
	color: #fff;
    text-shadow: 1px 1px 3px #333;
	letter-spacing: 0.5px;
	font-weight: normal;
    font-size: 1.2rem;
	font-family: 'Dosis', sans-serif;
	padding: 5px;
	border-width: 1px;
    padding-left: 15px;
    padding-right: 15px;
	border-style: outset;
	cursor: pointer;
	text-align: left;
    border-radius: 20px;
	margin-bottom: 2px;
	box-shadow: 0 2px 2px rgba(0,0,0,.16);
	transition: background-color .2s, box-shadow .2s;
	background-position: center;
	transition: background 0.8s;
	user-select: none;

	border: 2px solid #d44;
    border-top-color: #f77;
    border-left-color: #f77;
    border-bottom-color: #c33;
    border-right-color: #c33;
}
button:hover, .button:hover {
    background-color:#f85;
    box-shadow: 0px 2px 4px rgba(0,0,0,.16);
	background: #fa5 radial-gradient(circle, transparent 1%, #f85 1%) center/15000%;
}
button:active, .button:active {
    background-color: #f33;
    box-shadow: 0px 1px 1px rgba(0,0,0,.16);
   /*  border-bottom-width: 0; */
	background-color: #fc5;
	background-size: 100%;
	transition: background 0s;

	border-color: #f77;

	/*
	border: 1px solid #d33;
    border-top-color: #d33;
    border-left-color: #d33;
    border-bottom-color: #b11;
    border-right-color: #b11;
	*/
	transform: translateY(2px) translateX(2px);

}


.ucfirst:first-letter {
	text-transform: capitalize;
}
.if_empty_hide_next:empty + .prev_empty_hide_this,
.hidden + .prev_empty_hide_this {
	display: none;
}

.next_empty_hide_this + .if_empty_hide_prev:empty,
.next_empty_hide_this + .hidden,
.next_empty_hide_this:has(+ .hidden) {
	display: none;
}


button.medium, .button.medium {
	font-size: 1rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.buttonmargin {
	margin-top: 10px;
}
.button_icon {
	width: 22px;
	height: 22px;
	margin: -4px;
	margin-right: 5px;
}
.icon {
	width: 18px;
	height: 18px;
	vertical-align: text-bottom;
}
.admin_icon {
	color: #f80;
}
.staff_icon {
    display: inline-block;
	color: #fff;
	padding: 2px 3px;
    font-weight: bold;
	font-size: 0.95rem;
    text-transform: uppercase;
	background-color: #ebb;
	line-height: 1rem;
}

.adminValidationRequired {
	margin-left: 2px;
	padding: 2px;
	color: #fff;
	background-color: #f44;
}
.block {
	display: block;
}
.white {
	color: #fff;
}
.gray {
	color: #999;
}
.green {
	color: #0e0;
}
.blink_me {
	animation: blinker 2s linear infinite;
}
.likeprofile_whatshot {
	color: #fff;
	text-shadow: 0px 0px 3px #aa0;
	opacity: 0.5;
}
.likeprofile_whatshot2 {
	color: #888;
	font-size: 80% !important;
	margin-left: -6px;
	margin-top: 2px;
	vertical-align: top !important;
}
.loading_bar {
	visibility: visible !important;
	background: #eee;
	position: relative;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.loading_bar::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #fd9859;
	transform-origin: left;
	animation: loading 10s cubic-bezier(0.1, 0.1, 0.25, 0.9) forwards;
}

.loading_bar_done::after {
	animation: none;
	transform: scaleX(1);
	transition: transform 0.2s ease-out;
}

.loading_bar_done {
	opacity: 0;
}

@keyframes loading {
	0% { transform: scaleX(0); }
	5% { transform: scaleX(0.5); }    /* 0.5s -> 50% */
	10% { transform: scaleX(0.75); }   /* 1s -> 75% */
	20% { transform: scaleX(0.875); }  /* 2s -> 87.5% */
	30% { transform: scaleX(0.92); }   /* 3s -> 92% */
	40% { transform: scaleX(0.95); }   /* 4s -> 95% */
	50% { transform: scaleX(0.97); }   /* 5s -> 97% */
	75% { transform: scaleX(0.985); }  /* 7.5s -> 98.5% */
	100% { transform: scaleX(0.99); }  /* 10s -> 99% */
}

.loading-placeholder {
    background-color: #fafafa; /* Base color */
    background-image: linear-gradient(
        90deg,
        #fafafa 25%,
        #f0f0f0 50%,
        #fafafa 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
@keyframes backgroundFadeOut {
	to {
	  	background-color: unset; /* Revert to the default or inherited value */
	}
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}
@keyframes scaleDown {
	from {
	  transform: scale(2);
	}
	to {
	  transform: scale(1);
	}
}
.scale_down {
	animation: scaleDown 0.5s ease forwards;
}
.center {
	text-align: center;
}
.floatnone {
	float: none !important;
}
.pointer {
	cursor: pointer;
}
button > .material-icons {
	text-shadow: 1px 1px 1px #df003f;
	font-size: 1.2rem !important;
	margin: 0rem;
	margin-bottom: 0.1rem;
}
button.medium > .material-icons {
	font-size: 0.9rem !important;
    vertical-align: unset;
	margin: 0.05rem;
}
.button > img.googleCalendar {
	height: 1.2rem;
    margin: 0;
    vertical-align: top;
}
i.material-icons,
span.material-icons,
span.material-symbols-outlined {
	font-size: inherit;
	user-select: none;
	padding-bottom: 2px;
}
a > i.material-icons {
	font-size: 100%;
}
.material-icons.warning {
	color: #f80;

}
.material-icons.beta {
	color: #ff9060;
	text-shadow: 1px 1px 1px #000;
}
.hide_icons > .material-icons {
	display: none !important;
}

.only_beta {
	visibility: hidden;
}
.only_alpha {
	visibility: hidden;
}
.menulink > .material-icons {
	text-shadow: none;
}
.material-icons {
	vertical-align: text-bottom;
}
.gender{
	font-family: "arial unicode ms","Lucida Sans Unicode",sans-serif;
	text-shadow: 1px 1px 1px #ccc;
	vertical-align: middle;
}
.gender2 {
	color: #557;
	margin-left: -3px;
}
.pending-icon {
	color: #fff;
	text-shadow: 0px 0px 1px #888;
}

input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], 
input[type=tel],
select, textarea {
	display: inline-block;
	outline: 0;
	background-color: #eef;
	border: 1px solid #dcd;
	border-radius: 4px;
	width: 230px;
	padding: 4px;
	resize: none;
}
input[type=email]:not(:placeholder-shown):invalid {
	color: red;
	outline-color: red;
}
.scale2 {
	transform: scale(2);
}

.googlemap {
	border: 1px solid #dcd;
	border-radius: 4px;	
}

h2 {
	color: #444;
	margin-top: 0px;
}

#help .ukk {
	margin-top: 0.5rem;
}
#help .ukk > tbody > tr > td:nth-child(1) {
	padding: 0.5rem;
	word-break: break-word;
}
#help .ukk > tbody > tr > td:nth-child(2) {
	text-align: right;
}
#help .ukk_title > div {
	margin: auto;
}
#help .ukk_title button {
	margin-right: 1rem;
}
#help .ukk button > i.material-icons {
    font-weight: bold;
    font-size: 1.5rem !important;
    margin: 0;
}


#help .ukk_title {
	margin-top: 0.5rem;
	display: flex;
}


.search-container {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 -5px 10px rgba(0,0,0,0.1);
	width: calc(100% - 32px);
	background: #fff;
	border-top: 1px solid #ddd;
	padding: 12px 16px;
	display: flex;
	gap: 8px;
	align-items: center;
	z-index: 1000;
	box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}
.search-input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	outline: none;
}

.search-input:focus {
	border-color: #0066cc;
}


ul {
	margin: 0px;
	padding-left: 20px;
}

.hidden {
	display: none;
}
.hidden_important{
	display: none !important;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfixbefore::before {
  content: "";
  display: table;
  clear: both;
}
.clear {
	clear: both;
	height: 5px;
}
.clear0 {
	clear: both;
}
.fill-available {
	height: 97%;                  /* Fallback for all browsers */
	height: fill-available;         /* Generic non-prefixed */
}
.width-spacer {
    visibility: hidden;
    white-space: nowrap;
	height: 0;
}

.dot {
	color: #aaa;
	margin-left: 5px;
	margin-right: 5px;
	font-weight: 100;
}
.dot::after {
	content: "\2022";
}
.dot:last-child {
    display: none;
}
.bold {
	font-weight: bold;
}
.extrabold {
	font-weight: bold;
	text-shadow: 0 0 0 black;
	color: #06f !important;
}
.small {
	font-size: 70%;
}
.help {
	cursor: help;
	border-bottom: 1px dotted #0084FF;
	color: #0084FF;
}
.helpcursor {
	cursor: help !important;
}
a, .link {
	text-decoration: none;
	color: #0084FF;
}
a:hover, .link:hover, .link2:hover {
	cursor:pointer;
	text-decoration:underline;
	text-shadow:-1px -1px 6px #FFFFFF;
}

.disabled, button:disabled {
	cursor: default !important;
	background-color: #ddd !important;
	color: #aaa !important;
	text-shadow: none !important;
}
.ellipsis  {
	text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;	
}

.blockquote {
    padding: 0.5em 20px; /* add some space within the quote */
	border: 1px solid #ccc;
    border-left: 4px solid #007acc; /* add a left border to signify the quote */
    font-style: italic; /* make the text italic to differentiate */
    position: relative;
	font-size: 80%;
	color: #888;
	background-color: #fffff8;
	overflow-y: hidden;
	overflow-x: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	word-break: break-word;
}

.blockquote:before {
    content: '“';
    font-size: 2em;
    position: absolute;
    left: 5px;
    top: -1px;
}

.blockquote:after {
    content: '”';
    font-size: 2em;
    position: absolute;
    right: 10px;
    bottom: -5px;
}
@media (max-width: 768px) {
	.no-select-mobileonly {
		user-select: none;
	}
}  

.nocopy {
	user-select: none;
}
.nointeractions {
	user-select: none;
	pointer-events: none; /* optional - blocks all interactions */
}



.waiting {
	margin: 0 auto;
	transition: opacity 1.3s ease, transform 1.3s ease;
}
.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #f33;
  float: left;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}

#loading_bar {
	width: 60vw;
	max-width: 500px;
	background-color: rgba(255,255,255,0.3);
	text-align: left;
	height: 0.7rem;
	margin: 1rem auto;
	padding: 1px;
}
#loading_bar_progress {
	width: 1%;
	/* display: inline-block; */
	background-color: rgb(255,255,255);
	height: 100%;
	transition: width 0.8s;
}

.sk-cube-grid .sk-cube1 {
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
          animation-delay: 0.2s; }

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
            transform: scale3D(1, 1, 1);
  } 35% {
            transform: scale3D(0, 0, 1);
  } 
}

.profilephoto_thumb {
	height: 40px;
	width: 40px;
	float: left;
	background-size: cover;	
	background-position: center;
	cursor: pointer;	
	border-radius: 25px;
}
.profilephoto_thumb_stream {
	height: 50px;
	width: 50px;
	margin-right: 8px;
	border-radius: 25px;
}
.profilephoto_thumb_profile {
	height: 200px;
	max-width: 40vw;
	width: 200px;
	max-height: 40vw;
	margin-bottom: 10px;
    margin-right: 10px;
	border-radius: 100px;
	cursor: default;
}

.profilephoto_thumb50 {
	height: 50px;
	width: 50px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 25px;
}
.profilephoto_thumb35 {
	margin-right: 15px;
	height: 35px;
	width: 35px;
}

.profile_limited_visibility {
	color: #888;
	font-size: 90%;
}

.femalebg, .couplefemalebg, .female_straight::before {
	background-color: #fbb;
}
.female_bi_curious::before {
	background: linear-gradient(to left, rgba(255,255,255,0.6), rgba(255,187,187,1)), linear-gradient(var(--b-pink) 0%, var(--b-pink) 40%, var(--b-purple) 40%, var(--b-purple) 60%, var(--b-blue) 60%, var(--b-blue) 100%);
}
.gender_male {
	color: #00e;
}
.gender_female {
	color: #e00;
}
.malebg, .couplemalebg, .male_straight::before {
	background-color: #bbf;
}
.male_bi_curious::before {
	background: linear-gradient(to left, rgba(255,255,255,0.3), rgba(187,187,255,1)), linear-gradient(var(--b-pink) 0%, var(--b-pink) 40%, var(--b-purple) 40%, var(--b-purple) 60%, var(--b-blue) 60%, var(--b-blue) 100%);
}
.couplebg {
	background: #aef;
}
.adminbg {
	background-color: #888;
}
.businessbg {
	background-color: #ff0;
	color: #222;
}
.margin-right5 {
	margin-right: 5px;
}
.ad2 {
    background: linear-gradient(45deg, #c00, #ff4444);
    color: #fff;
    padding: 20px 40px;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    animation: pulse 2.5s infinite;
	text-shadow: 0 0 0 #999;
}

.ad2::before, .ad2::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: inherit;
    z-index: -1;
    animation: rotate 5s linear infinite;
    opacity: 0.8;
}

.recentacle::after {
    animation-direction: reverse;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
	animation: pulse 0.6s ease-in-out;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.ad1 {
	background-color: #ffcc00;
	color: #333;
	padding: 20px 40px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ad1:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.highlight {
	color: red;
	font-weight: bold;
	background-color: #ffa;
	padding: 2px;
}

.ribbon {
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 3px #00f;
}
.ribbon {
	--c: #fb0;
	/* control the ribbon shape (adjust each variable to understand what it does) */
	--a: 56deg; 
	--r: 6deg; 
	--s: 1.6em;

	padding: .6em 1.3em; /* you may need to adjust this based on your content */
	margin: -2rem auto;
	aspect-ratio: 1;
	display: grid;
	place-content: center;
	text-align: center;
	position: relative;
	z-index: 0;
	width: fit-content;
	box-sizing: border-box;
}

.ribbon:after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: radial-gradient(35% 35%,#0000 96%,#0003 97% 99%,#0000) var(--c);
	clip-path: polygon(100.00% 50.00%,89.23% 57.80%,96.19% 69.13%,83.26% 72.22%,85.36% 85.36%,72.22% 83.26%,69.13% 96.19%,57.80% 89.23%,50.00% 100.00%,42.20% 89.23%,30.87% 96.19%,27.78% 83.26%,14.64% 85.36%,16.74% 72.22%,3.81% 69.13%,10.77% 57.80%,0.00% 50.00%,10.77% 42.20%,3.81% 30.87%,16.74% 27.78%,14.64% 14.64%,27.78% 16.74%,30.87% 3.81%,42.20% 10.77%,50.00% 0.00%,57.80% 10.77%,69.13% 3.81%,72.22% 16.74%,85.36% 14.64%,83.26% 27.78%,96.19% 30.87%,89.23% 42.20%); /* from https://css-generators.com/starburst-shape/ */
}

.basictable {
	border: 1px solid #bbb;
	background-color: #eef;
	width: 100%;
	margin-bottom: 10px;
	box-shadow: 1px 1px 1px #fcc;
}
div.basictable {
	padding: 10px;
	width: inherit;
}

.basictable  > tbody > tr > td {
	padding: 4px;
	  padding-bottom: 5px;
}
.basictable_header > td,
td.basictable_header {
	font-weight: bold;
}
.premiumActionsTable {
	text-align: left !important;
	font-size: 0.85rem  !important;
	word-break: normal;
}
.premiumActionsTable > tbody > tr > td:first-child,
.premiumActionsTable > tbody > tr > td:first-child + td + td + td + td {
	white-space: nowrap;
}
.premiumActionsTable > tbody > tr > td {
    padding: 3px !important;
	vertical-align: top;
}

@media (min-width: 600px) {
	.desktop_half_right {
		float: right;
		width: 50% !important;
		margin-left: 1rem;
	}
	.desktop_40_right {
		float: right;
		width: 40% !important;
		margin-left: 1rem;
	}
}
.dragenter {
	opacity: 0.8;
}

.checkbox-container {
    display: inline-block; /* or use 'inline-flex' if you prefer */
    white-space: nowrap; /* Prevents the text from wrapping */
}

/***** Header *****/
.header {
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #ef0448;
	color: #fff;
	border-bottom: 1px solid #ae8478;
	z-index: 10000;
	position: fixed;
	top: 0px;	
	padding-top: env(safe-area-inset-top);
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1));
	background-image: linear-gradient(to top, transparent, rgba(255,255,0,0.2));
}

.header_container {
	width: 980px;
	margin: auto;
}
.header_logo {
	font-size: 34px;
	letter-spacing: 1px;
	font-family: 'Dancing Script', cursive;
	font-display: block;
	color: #fff;
	text-shadow: 1px 1px 1px #777;
	text-align: left;
	display: inline;
	user-select: none;
}
.header_icon {
    visibility: hidden;
    margin-left: 10px;
    float: right;
    height: 34px;
    width: 34px;
    cursor: pointer;
    background-size: cover;
    border-style: solid;
    border-width: 1px;
    background-color: #f60a4e;
    border-top-color: #ff4080;
    border-left-color: #ff4080;
    padding: 2px;
    margin-top: 5px;
    border-collapse: collapse;
    border-bottom-color: #dF003F;
    border-right-color: #dF003F;
	border-radius: 6px;
	transition: background 0.2s, transform 0.2s;
}
.header_icon:hover {
	/* background-color: rgba(255,255,255,0.5); */
	background: linear-gradient(to bottom, #f61a5e 0%, #f60a4e 100%);
    /*transform: translateY(-1px);*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.header_icon:active {
    transform: translateY(2px) translateX(2px);
    box-shadow: none;
}
.header_icon > i {
	height: 34px;
	line-height: 34px;
	font-size: 34px;
	color: #696969;
	text-shadow: 1px 1px 2px #a00;
	vertical-align: baseline;
}
.header_icon > .icon_number {
	position: relative;
    display: inline-block;
    line-height: initial;
    right: -1.3rem;
	vertical-align: top;
    top: -1.3rem;


}
@media (min-width: 600px) {
	.header_icon > .icon_number {
		right: -1.5rem;
		top: -1.5rem;
	}	
}

#headeraccount {
	height: 100%;
    z-index: 10000;
    position: fixed;
    left: 0;
    opacity: 0.07;
	text-align: center;
	top: 0;
	background-color: rgba(255,255,0,0.2);
}
#headeraccount > div {
	color: #000;
    font-size: 6px;
    letter-spacing: 1px;
    transform-origin: 0 0;
    transform: rotate(-90deg);
    height: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    text-align: center;
	width: 50vh;
	width: calc(var(--vh, 1vh) * 50);
	height: 6px;
}
#headeraccount2 {
	height: 34px;
	line-height: 34px;
	font-size: 14px;
	display: inline-block;
	opacity: 0.04;
}
@media (max-width: 600px) {
	#headeraccount2 {
		display: inline;
		position: absolute;
		font-size: 10px;
		line-height: 12px;
		margin-left: 2px;
		top: 5px;
		max-width: 80px;
		line-break: anywhere;
	}
}

.icon_number {
	background: #ff765a;
	color: #fff;
	padding: 0.15rem 0.2rem;
	border-radius: 1rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	font-weight: bold;
	border: none;
    font-size: 0.6rem;
	margin: 0px;
    min-width: 0.8rem;
    text-align: center;
}

#menu_icon > i, #logout_icon > i, #settings_icon > i {
	color: #fff;
}
#menu_icon {
	display: none;
}
#settings_icon {
	margin-left: 20px;
}
#connection_icon > i {
	color: #ff4;
}
#connection_icon {
	margin-right: 20px;
}
#logout_icon {
	margin-left: 20px;
}

#dropdown_menu {
	width: 420px;
	border: 1px solid #ddd;
	border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0 0 5px rgba(0,0,0,0.0975);
	position: fixed;
	font-size: 80%;
	z-index: 12000;
	background: #fff;
	max-height: 80%;
	overflow-y: auto;
	margin-right: 10px;
}

#backtotop,
#backbutton {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 99;
    color: white;
    cursor: pointer;
    border-radius: 10px;
    height: 5ch;
    top: unset;
    width: 3rem;
    text-align: center;
	opacity: 1;
  	visibility: visible;
  	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#backtotop {
    padding-top: 1.5ch;
    left: 5rem;
}
#backbutton {
	left: 1rem;
}

#backtotop > .material-icons {
    transform: rotate(90deg);
    transform-origin: top;
    margin-left: 0.4rem;

}
#backtotop > .material-icons,
#backbutton > .material-icons {
	display: inline-block;
}

.dropdown_title {
	padding: 5px;
	border-bottom: 1px solid #ccc;
}
.dropdown_row {
	padding: 5px;
	border-bottom: 1px solid #fdf;
	cursor: pointer;
	min-height: 50px;
}
.chat_unread {
	background-color: #aff;
}
.chat_unanswered {
    background-color: #eee;
    border-radius: 1px;
    margin: 1rem;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bolder;
	padding-bottom: 2px;
}
.dropdown_row:hover {
	background-color: #fbf;
	color: #fff;
}
.dropdown_row_small {
    padding: 0.3rem;
    padding-right: 1rem;
	min-height: 0px;
}
.dropdown_row_bottom_border {
	border-bottom: 1px dotted #fdf;
}
.dropdown_row_small > input {
	width: 400px;
	margin-top: 2px;
}
.dropdown_text {
	display: inline;
	overflow-wrap: anywhere;
}
.dropdown_date {
	color: #888;
    font-size: 85%;
	float: right;
	padding-left: 1rem;
	margin-top: 1px;
}

.dropdown_title2 {
	color: #888;
	font-weight: bold;
	text-align: center;
	padding: 5px;
}

.dropdown_row > .profilephoto_thumb {
	margin-right: 10px;
	margin-top: 0;
}

.dropdown_row_bottom {
	padding: 5px;
	text-align: center;
}
.dropdown_text > button {
	margin-left: 10px;
	float: right;
}

.dropdown_row_suggestAccountSelect {
	min-width: 200px;
}
.dropdown_row_chathistory {
	max-height: 55px;
    overflow: hidden;
}
.dropdown_row_new_notification {
	background-color: lightyellow;
	animation: backgroundFadeOut 5s forwards;
}

#notifications {
	padding-bottom: 0px;
}
#notifications_content {
	margin-top: -20px;
}

.notification_rotko_open {
	max-width: 100%;
}
.notification_party_invite_actions_container {
	background: rgba(0,0,0,0.03);
	padding: 0.5rem 1rem;
	border-top: 1px solid #fee;
}
#notifications_loading_bar {
	height: 2px;
	width: 100%;
	visibility: hidden;
}
.notifications_party_invite_container {
	vertical-align: top;
	background: linear-gradient(135deg, #fffefa 0%, #fff5ee 100%);
	position: relative;
	margin-top: 3px;
}
.notifications_party_invite_cover {
	width: 100% !important;
	height: 200px !important;
}
.notifications_party_invite_content {
	padding: 5px;
	padding-left: 10px;
	font-size: 1rem;
}
.notifications_party_invite_container:hover {
	color: #000;
}
.dropdown_row:has(.notifications_party_invite_container) {
	padding: 0;
}
.notifications_party_invite_container + .dropdown_text {
	display:none;
}
.notifications_party_invite_title {
	font-size: 1.3rem;
	text-align: center;
    padding: 0.3rem;
}
.notifications_party_invite_content > .parties_explanation > .material-icons {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
.kutsu-badge-2 {
	position: absolute;
	top: 0;
	left: 0;
	background: #88f;
	color: white;
	padding: 8px 28px 8px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
	min-width: 60px;
}
.rainbow-accent {
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5, #ab47bc);
	animation: rainbow-shift 3s ease-in-out infinite;
}

/***** Login *****/
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% {
		transform: translateX(-100%);

	}
}

.slide {
    animation: slide-out 0.5s forwards;

}
#loadscreen_logo {
	font-size: 37vw;
    letter-spacing: 0.5rem;
    font-family: 'Dancing Script', cursive;
	font-display: block;
    color: #fff;
    text-shadow: 0.2rem 0.2rem 0.6rem #777777;
    margin-top: 15vh;
    margin-bottom: 10vh;
	opacity: 0;
	user-select: none;
}
.appear {
	opacity: 1 !important;
	transition: all 2s linear 0.3s !important;
}

@media (orientation: landscape) {
	#loadscreen_logo {
		font-size: 30vw;
		margin-top: 10vh;
		margin-bottom: 5vh;
	}
	@media (min-width: 1000px) {
		#loadscreen_logo {
			font-size: 22rem;
			margin-top: 15vh;
			margin-bottom: 10vh;
		}
	}
}
#loadscreen {
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	z-index: 13000;
	background-color: #ef0448;
    position: fixed;
	top: 0;
}
#loadscreen > img {
	max-width: 90%;
    margin-top: 10vh;	
}
#loadingstatus2 {
	color: #ddd;
}
#front_title {
	font-weight: bold;
	font-size: 110%;
	color: #444;	
}
#front_screen {
	z-index: 13000;
	text-align: center;
}
#front_screen > h1 {
	font-size: 900%;
	font-size: 9vw;
	margin-top: 8%;
	margin-top: 14vh;
	color: #fff;
	text-shadow: 1px 1px 10px #333;
	margin-bottom: 0px;
	font-family: 'Dancing Script', cursive;
	font-display: block;
}
#front_screen > h2 {
	color: #fef;
	text-shadow: 1px 1px 7px #f44, -1px -1px 7px #f44;
	font-size: 3rem;
	margin: 20px;
	margin: 4vh;
	letter-spacing: 2px;
}
@media (max-width: 768px) {
	#front_screen > h2 {
		font-size: 1rem;
	}
}
#front_please_reg {
	font-size: 90%;
	text-align: left;
}
#front_forgot_password {
	display: inline-block;
	margin-top: 1rem;
}
#login, #loading {
	text-align: center;
	padding-bottom: 50px;
}

#login > table {
	max-width: 800px;
	max-width: 80%;
	margin: 0 auto;
}
.logininput > div > button {
	margin: 0 auto;
}
.logininput > form > div > input[type=text],
.logininput > form > div > input[type=password] {
	width: 150px;
	font-size: 1.1rem;
}
.logininput > form > div {
	margin-bottom: 10px;
}
#remember {
	width: 20px;
	height: 20px;
	cursor: pointer;
	vertical-align: middle;
}
#front_remember {
	cursor: pointer;
	vertical-align: middle;
	user-select: none;
}

.logincontent {
	background: #fff;
	background-color: rgba(255,255,255,0.90);
	padding: 20px;
	border: 1px solid #888;
	box-shadow: 1px 1px 11px 1px #333;
}

.intro {
	width: 400px;
	width: 40vw;
	margin: 0 auto;
}

.intro > table {
	width: 100%;
}


.slideshow {
	width: 100%;
}
.slideshow_container {
	display: none;
	position: relative;
    border: 10px solid #fff;
    box-shadow: 0px 0px 20px 5px #fa7;
    transform: rotate(7deg);
	margin: 50px;
	position: absolute;
	top: 0px;
	width: 200px;
	height: 200px;
	background-size: cover;
	background-position: center;	
}
.slideshow_container > div {
	background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);
	position: absolute;
	bottom: 0px;
	font-size: 17px;
	color: #fff;
	padding-bottom: 15px;
	text-shadow: 1px 1px 3px #222,-1px 1px 3px #222,1px -1px 3px #222,-1px -1px 3px #222;
	width: 200px;
}

.forgot_reset_pass {
	text-align: left;
}
.forgot_reset_pass  > div {
	margin-bottom: 10px;
}

@media (max-width: 900px) {
	#forgotten_password {
		margin: 1rem;
	}
}


.expired {
	filter: blur(5px) !important;
}

.invitepromo {
	background-color: #aaf;
	color: #fff;
	border: 1px solid #ddf;
	font-size: 120%;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 10px;
}
.invitepromo > i {
    color: #fff;	
}

#main_lang_select_container {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background-color: rgba(255,255,255,0.6);
	padding: 0.5rem;
	padding-left: 2rem;
	padding-right: 2rem;
	font-size: 85%;
	border-radius: 1rem;
}
#main_lang_select_container:hover {
	background-color: rgba(255,255,255,1);
}
@media (max-width: 500px) {
	#main_lang_select_container {
		left: 1rem;
		margin-bottom: 1rem;
	}
}
.main_intro {
	margin: 0 auto !important;
	text-align: left;
}
.main_intro > div > p {
	min-height: 40px;
}

.testimony {
    box-shadow: 0px 0px 10px 2px rgba(200, 200, 150, 0.5);
    transform: rotate(3deg);
	margin: 30px;
	max-width: 75%;
}

@media (max-width: 500px) {
	.testimony {
		margin: 0;
        max-width: 100%;
	}
}

.material_icon_intro {
font-size: 40px !important;
    margin-right: 10px;
    float: left;
    color: #f52;
    text-shadow: 1px 1px 2px #a47;
}

.main_center_element {
	margin: 0 auto !important;
}
.mc {
	filter: blur(7px) !important;
	max-width: 30% !important;
	max-height: 30vh !important;
	cursor: pointer;
}

.mc_click {
	opacity: 0.4 !important;
    text-shadow: 1px 1px 6px #000;
    top: 45%;
    font-size: 1rem !important;
    color: #fff;
	position: absolute;
    text-align: center;
	width: 100%;
}
.watermark {
	opacity: 0.12;
	position: absolute;
	text-align: center;
	font-size: 12px;
	width: 100%;
}
.watermark1 {
	top: 40px;
}
.watermark2 {
	bottom: 60px;
	color: #fff;
}

/***** menu *****/
#menu {
	padding-bottom: 0px !important;
	position: relative;
}
.menu_element {
	width: 180px;	
}

.menulink > .material-icons {
	color: #bbf;
	vertical-align: middle;
	padding-right: 10px;
	padding-left: 6px;
	font-size: 1rem;
	padding-top: 1px;
	padding-bottom: 0px;

	color: #6aa6b1;

}
@media (max-width: 728px) {
	.menulink > .material-icons {
		font-size: 1.5rem;
	}
}
.menulink:hover > .material-icons {
	color: #33a;
}
.menulink {
	padding: 4px;
	font-size: 0.9rem;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #eee;
	background: #fff0f8;
	margin-bottom: 2px;
	overflow: hidden;
	display: flex;
	align-items: center;
	box-sizing: border-box;
  	overflow-wrap: break-word;
  	word-break: break-word;
  	position: relative;

	  transition: background 0.1s, box-shadow 0.1s;
	  color: #333;
}
.menulink:hover {
	/*background-color: #bbf;*/
	background: #e8f0f2; /* Subtle highlight background */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}
.menulink:active {
    transform: translateY(2px) translateX(1px);
    box-shadow: none;
}
.menu_header > .icon_number {
	bottom: -3px;
}
.menulink > .icon_number {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
}
.menu_rotko {
	position: relative;
    height: 28px;
    border-radius: 20px;
	border: 1px solid #ccc;
    margin: 15px 15px 0px 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
	background-size: cover;
    background-position: center;
	background-image: url('https://static.xperienceunited.com/pics/rotko200px.png?1'), linear-gradient(135deg, #ffdea2 0%, #fffef2 30%, #fcd6bf 100%); 
}

.menu_rotko:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    background-color: #bbb;
    clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
    transform: translateY(-50%);
	border: 1px solid #ccc;
}
.menu_rotko:hover {
	background-image: url('https://static.xperienceunited.com/pics/rotko200px.png?1'), linear-gradient(135deg, #ffde82 0%, #fffef8 30%, #fce6cf 100%); 
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) {
	.menu_rotko {
		margin: 15px auto 0px auto;
    	width: 200px;
	}
}

#menu_publicchat {
    contain: layout;
    display: flex;
    align-items: center;
}

#menu_publicchat_label {
}

#menu_publicchat_content {
	margin-left: 1.5rem;
    width: 0;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	font-size: 90%;
}


#menu_publicchat_content {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 4px 8px;
}

#userphoto {
    height: 160px;
    /* border-top-left-radius: 22px; */
    /* border-top-right-radius: 22px; */
    /* border-bottom: 1px solid #f9c; */
    margin-top: -21px;
    background-size: cover;
    background-position: center;
	margin-left: -5px;
    margin-right: -5px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
@media (min-width: 600px) and (max-width: 999px) {
	#userphoto {
		display: none;
	}
	#menu {
		padding-top: 0;
		margin-right: 10px;
	}
}
@media (max-width: 600px) {
	#userphoto {
		height: 70vw;
		width: 70vw;
		margin: 0 auto;
		border-radius: 35vw;
	}
}
#userinfo {
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	font-family: 'Dosis', sans-serif;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#userinfo_which {
	margin-top: 1rem;
}
@media (min-width: 600px) {
	#userinfo_which {
    font-size: 0.8rem;
	}
	#userinfo_which > .dot {
	margin: 1px;
	}
}
#menu_parties_title > .icon_number {
    float: right;	
}
.menu_party_separator {
	text-align: center;
	font-weight: bold;
}

.month-separator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 10px 6px;
}

/* sivuviivat: lämmin harmaanruskea, ohut */
.month-separator::before,
.month-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(122, 90, 71, 0.35);   /* lämmin ruskeanharmaa */
}

/* keskikyltti: hillitty, lämmin neutraali */
.month-separator-label {
    padding: 1px 12px;
	font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6a4a37;                        /* tumma lämmin ruskea teksti */
    background: #f8f2ec;                   /* hyvin vaalea beige tausta */
    border: 1px solid rgba(122, 90, 71, 0.25);
    clip-path: polygon(
        10% 0, 90% 0,
        100% 50%,
        90% 100%, 10% 100%,
        0 50%
    );
}



.menu_header {
	padding: 10px;
	font-weight: bold;

	font-size: 0.9rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #ddd;
}


/***** main *****/

#main_party_highlight,
#main_rotko {
	background: linear-gradient(90deg, rgba(237,33,93,1) 0%, rgba(237,109,33,1) 50%, rgba(237,33,93,1) 100%);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    text-decoration: none;
    transition: height 0.5s ease;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}
#main_party_highlight > .link,
#main_rotko > .link {
	color: #fff;
	text-decoration: none;

	/* Selkeä tumma laatta kuvan päälle */
	background: rgba(0, 0, 0, 0.85);
	padding: 6px 12px;
	border-radius: 6px;

	/* Vahvempi kontrasti ja luettavuus */
	font-weight: 700;
	text-shadow:
		0 0 3px rgba(0, 0, 0, 0.9),
		0 0 8px rgba(0, 0, 0, 0.9);

	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.9),   /* “reuna” */
		0 3px 6px rgba(0, 0, 0, 0.6);

	transition: all 0.3s;
}

/* Hover: vähän selkeämpi nappi */
#main_party_highlight > .link:hover,
#main_rotko  > .link:hover {
    color: yellow; /* Change text color on hover for better visibility */
	background: rgba(0, 0, 0, 0.95);
	transform: translateY(-1px);
}


#main {
	margin: 20px auto;
	margin-top: 70px;	
	display: none;
}

.main_element {
	width: 802px;
	margin-left: 20px;	
}
.basiccontainer {
	background-color: #fff;
	padding-bottom: 20px;
	padding-top: 20px;
	margin-bottom: 20px;
	border: 1px solid #f88; 
	border-radius: 3px;
}

.between_main_elements_buttons {
	text-align: center;
	margin-bottom: 20px;
    max-width: 800px;

}

.account {
	font-weight: bold;	
	font-family: 'Dosis', sans-serif;
	letter-spacing: 0.8px;
}
@media (max-width: 768px) {
	.account {
		letter-spacing: 1px;
	}
}

.label, .label2, .label3 {
	float: left;
	width: 140px;
	padding-top: 5px;
	text-align: right;
	line-height: 20px;
	color: #888;
	clear: both;
}
.values, .values2, .values3 {
	padding-top: 5px;
	margin-left: 150px;
	line-height: 20px;
}

.values > input[type=checkbox],
.checkbox-container > input[type=checkbox] {
	margin-right: 1ch;
}

.label2 {
	width: 350px;
}

.values2 {
	margin-left: 370px;
}
.label_value_pair3, .label_value_pair {
	margin-bottom: 5px;
	padding-bottom: 5px;
	font-size: 0.9rem;
	border-bottom: 1px dotted #eae;
	word-break: break-word;
}
.label_value_pair::after {
	content: "";
	display: table;
	clear: both;
  }
.label3 {
	width: 90px;
}
.label_party {
	color: #888;
    width: 15em;
	float: left;
}
.values_party {
	margin-left: 16em;
}
@media (max-width: 600px) {
	.label_party {
		width: 10em;
	}
	.values_party {
		margin-left: 11em;
	}
	#party_details_plan > .values_party {
		width: calc(100% - 11em);
	}
}

.values3 {
	margin-left: 100px;
}
@media (max-width: 600px) {
	.label, .label2, .label3 {
		word-break: break-word;
		float: none;
		text-align: left;
		width: auto;
		font-size: 1rem;
		line-height: normal;
	}
	.values, .values2, .values3 {
		margin-left: 1rem;
	}
}

.checkbox-group {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-right: 10px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 4px;
}

.no_bottom_border {
	border-bottom: none;
}

.tabletitle {
	font-weight: bold;
	color: #444;
}

.distance {
    padding-left: 7px;
    padding-right: 6px;
    padding-top: 1px;
    padding-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
	color: #fff;
    background-color: #bbe;
    border-color: #fcc;
    border-width: 1px;
    border-style: solid;
    border-radius: 13px;
    white-space: nowrap;
    font-size: 0.7rem;
}

.stars_hr {
	text-align: center;
	color: #fff;
	font-size: 3rem;
	font-family: 'dancing script';
	margin-top: 1rem;
	margin-bottom: -1rem;
	text-shadow: 0px 0px 2px #955;
}

.explanation {
	font-size: 90%;
	color: #888;
}
@media (max-width: 900px) {
	.explanation {
		font-size: 85%;
		font-size: 0.85rem;
	}
}
#smalldialog {
	position: fixed;
	box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
	z-index: 12001;
	display: none;
	border: 1px solid #DDD;
	background: #eef;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	left: 30px;
	padding: 7px;
	bottom: 0;
	margin-right: 1rem;
}
@media (max-width: 600px) {
	#smalldialog {
		left: 1rem;
		padding-bottom: 0.2rem;
		font-size: 0.9rem;
		padding: 0.3rem;
	}
}

#smalldialog .publicchat_photo {
	padding-left: 0px;
}
#smalldialog .chat-message-public {
	margin-bottom: 0px;
}

#adminnotes > div {
	padding: 5px;
	padding-right: 0px;
	border-bottom: 1px solid #fdf;
	min-height: 32px;
}
#adminnotes > div > i {
	float: right;
	margin-left: 5px;
	margin-bottom: 5px;
}
.notes {
	color: #555;
    background-color: #ffe;
    border: 1px solid #eee;
}
#XU_blocked {
	text-align: center;
    min-height: unset !important;
}
#friends {
	position: fixed;
	z-index: 9000;
	right: 0px;
	width: 220px;
	top: 0px;
	display: none;
	height: calc(100% - 52px);
	overflow-y: auto;
	padding-top: 52px;
}
.friends_row > div > span > .account {
	display: inline-block;
	max-width: 95px;
	overflow: hidden;
	height: 32px;
	word-break: break-all;
}

#friendslist_switch {
	float: left;
    font-size: 0.5rem !important;
    margin-top: 0px;
    margin-left: 5px;
}

#friendslist_content, #friendslist_title, #matchlist_content, #matchlist_title, #adminnotes {
	font-size: 80%;
	background: #fff;
	margin-left: 6px;
	box-shadow: 0 0 5px rgba(0,0,0,0.0975);
}
#matchlist_title, #friendslist_title {
    text-align: center;
    color: #f88;
    border-bottom: 1px solid #fdf;
    background: #ffe;
	font-size: 0.8rem;
    padding-top: 2px;
    padding-bottom: 2px;
	display: none;
}
.friendlist_row, .matchlist_row{
	padding: 5px;
	padding-right: 0px;
	border-bottom: 1px solid #fdf;
	cursor: pointer;
	min-height: 32px;
	line-height: 32px;
}
.online_thumb {
	margin-right: 10px;
	width: 32px;
	height: 32px;
}
.online_ago {
  float: right;
  margin-right: 5px;
    color: #888;
	font-size: 80%;
}
.status_online {
	font-weight: bold;
	color: #63a924;
}

#front_screen > .clientv {
    margin: 120px auto -70px auto !important;
}
.clientv {
	background: linear-gradient(to bottom, #deefff 0%,#98bede 100%);
    font-size: 120%;	
}
.clientv_text > i {
    margin-right: 10px;	
}

.outro {
	font-size: 90%;
    color: #444;
}

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}
.saving span:nth-child(4) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .6s;
}
.saving span:nth-child(5) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .8s;
}
.saving span:nth-child(6) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: 1s;
}

/***** Tabs *****/
.tabs {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	top: -20px;
	/* display: table; */
}
.tab  {
	flex-grow: 1;
	padding: 0.5rem;
	/* padding-left: 0px; */
	/* padding-right: 0px; */
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	text-align: center;
	background-color: #ffeeee;
	display: table-cell;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.tab:hover {
    background-color: #f8e8e8;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tab_selected {
	border-bottom: 0px;
	background-color: #fff;
	font-weight: bold;
	border-top: 1px solid #eee;
	color: #000;
}

.tab:active {
    background-color: #e8d8d8;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
	.tab:hover {
		transform: scale(1.02);
	}
	.tab:active {
    transform: scale(0.98);
	}	
}


/***** Registration / settings *****/



.photo_upload_container {
	width: 250px;
	height: 250px;
}

.defaultmarker {
	width: 10px;
	height: 10px;
	opacity: 0.7;
	background-color: #f00;
	border-radius: 50%;
}
.meetmarker {
	width: 20px;
	height: 20px;
	opacity: 0.5;
	background-color: #33f;
	border-radius: 50%;
}
.partymarker {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #888;
	background-size: cover;	
	background-position: center;	
}
.partymarker_title {
    margin-top: 32px;
	color: #fff;
	width: 100px;
}
.partymarkerparty {
	width: 80px;
	height: 30px;
	border: 1px solid #888;
	background-size: cover;	
	background-position: center;	
}

#locationmap {
	height: 400px;
	width: 580px;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
@media (max-width: 600px) {
	#locationmap {
		width: 90vw;
	}
}
@media (min-width: 1000px) {
	#locationmap {
		width: 780px;
	}
}

.coupletable {
	line-height: 20px;
}

.coupletable > tbody > tr > td {
	padding-top: 5px;
	padding-left: 20px;
	vertical-align: top;
}
.coupletable > tbody > tr > td > textarea {
	width: 100%;
	height: 50px;
	margin-bottom: 5px;
}

.coupletable > tbody > tr > td > input {
	margin-bottom: 5px;
}
.coupletable button.premium {
	margin-bottom: 5px;
}
#userprofile_info_preferences1:not(:empty),
#userprofile_info_preferences2:not(:empty),
#userprofile_info_experience1:not(:empty),
#userprofile_info_experience2:not(:empty) {
	min-width: 250px;
}
@media (max-width: 600px) {
	.coupletable > tbody > tr > td.label {
		width: unset;
		min-width: 17vw;
	}
	.coupletable > tbody > tr > td > select,
	.coupletable > tbody > tr > td > input {
		max-width: 30vw;
	}
	.coupletable > tbody > tr > td > div {
		word-break: break-word;
		font-size: 0.8rem;
	}
	#userprofile_info_preferences1:not(:empty),
	#userprofile_info_preferences2:not(:empty),
	#userprofile_info_experience1:not(:empty),
	#userprofile_info_experience2:not(:empty) {
		min-width: 30vw;
	}
	.coupletable_label {
		display: none;
	}
	.coupletable > tbody > tr > td {
		padding-left: 0px;
	}
	.coupletable .explanation {
		margin-top: -0.8rem;
	}

}
.highlight_table {
	margin: 20px auto;
	text-align: center;
	border: 1px solid #ccc;
	background-color: #86f;
}

.highlight_table_row > td {
	padding: 10px;
	background-color: #ddf;
}

.highlight_table_head > td {
	background-color: #66f;
	color: #fff;
	font-weight: bold;
	padding: 10px;
}

#settings_menu > div {
	padding-left: 2.2rem;
	padding-bottom: 0.3rem;
}
#settings_menu > h3 > .material-symbols-outlined {
	font-size: 1.2rem;
	vertical-align: middle;
	margin-right: 0.5rem;
	color: #888;
	margin-bottom: 0.1rem;
}

#settings_rotkocredits_saldo_container {
	float: right;
	width: 50%;
	margin-bottom: 1rem;
	text-align: right;
}
#settings_rotkocredits_saldo {
	border-radius: 12px;
	padding: 12px 16px;
	gap: 1px;
	min-width: 80px;
	font-size: 24px;
	margin-top: -1.5rem;
}
.notifications_rotkocredits_saldo_container {
	float: right;
	width: 30%;
	margin-bottom: 0.5rem;
	text-align: right;
}
.rotkocredits_saldo {
	border-radius: 4px;
	padding: 3px 4px;
	gap: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
    font-weight: 900;
	background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
	border: 2px solid #1565C0;
	box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
	color: white;
	text-wrap: nowrap;
}
@media screen and (max-width: 600px) {
	#settings_rotkocredits_saldo_container {
		margin-left: 35%;
   		margin-bottom: 3rem;
	}
}
#settings_rotkocredits_saldo:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
	transition: all 0.2s ease;
}
#settings_rotkocredits_transactions {
  width: 100%;           /* lock it to its parent/viewport width */
  overflow-x: auto;      /* only horizontal scroll when needed */
  overflow-y: visible;   /* natural height */
  margin-top: 1rem;
}

.rotkoCreditsTable {
	display: inline-table; /* shrink-wrap to its content */
  table-layout: auto;    /* natural column sizing */
}
#premium_dialog:has(div > .rotkoCreditsTable) {
	max-width: 90%;
}

.rotkocredits_saldo  > .material-icons {
	padding-bottom: 0;
}

#settings_account_valid_table {
	border: 1px solid #bcb;
	background-color: #dfd;
	width: 100%;
	margin-bottom: 10px;
	font-size: 120%;
}
#settings_account_valid_table td {
	padding: 6px;
	width: 50%;
}

#settings_personality table {
	width: 100%;
}
#settings_personality table > tbody > tr > td {
	width: 50%;
}

@media (max-width: 600px) {
	#settings_event_preferences_categories_container {
		margin-left: 0;
	}
}

#settings_personality input[type=range],
#settings_event_preferences_categories_container input[type=range]{
  --cold-0: #0b132b;  /* tumma kylmä */
  --cold-1: #1e3a8a;  /* sininen */
  --cold-2: #60a5fa;  /* vaaleampi sininen */
  --neutral: #ffffff; /* neutraali keskikohta */
  --pos-1: #bbf7d0;   /* vaalea vihreä */
  --pos-2: #22c55e;   /* vihreä */
  --warn-1: #f59e0b;  /* oranssi välisteppi */
  --hot-1: #af0000;   /* punainen */
}

#settings_personality input[type=range],
#settings_event_preferences_categories_container input[type=range]{
	--track-h: 14px;
	--thumb-d: 22px;
	--green: #22c55e;  /* säädä sävyjä halutessa */
	--red:   #ef4444;
	--track-border: #cbd5e1;
	--focus-ring: rgba(34,197,94,.28);
	--thumb-scale: 1;

	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	margin: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
	outline: none;
	overflow: visible; /* thumb ei leikkaannu */
}

/* ---------- WebKit: track ---------- */
#settings_personality input[type=range]::-webkit-slider-runnable-track,
#settings_event_preferences_categories_container input[type=range]::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: 7px;
  border: 1px solid #ccc;
  background:
    /* ohut keskilinja */
    linear-gradient(90deg, transparent 0%, transparent calc(50% - .5px),
                    rgba(0,0,0,.15) 50%, transparent calc(50% + .5px),
                    transparent 100%),
    /* varsinainen spektri: kylmä → valkoinen → vihreä → punainen */
    linear-gradient(90deg,
      var(--cold-0) 0%,
      var(--cold-1) 18%,
      var(--cold-2) 34%,
      #eaf2ff      46%,
      var(--neutral) 50%,
      #f4fff7      54%,
      var(--pos-1)  60%,
      var(--pos-2)  70%,
      var(--warn-1) 90%,
      var(--hot-1) 100%
    );
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

/* ---------- WebKit: thumb ---------- */
#settings_personality input[type=range]::-webkit-slider-thumb,
#settings_event_preferences_categories_container input[type=range]::-webkit-slider-thumb{
	-webkit-appearance: none;
	width: var(--thumb-d);
	height: var(--thumb-d);
	border-radius: 50%;
	border: 1px solid #a3a3a3;
	background: radial-gradient(circle at 30% 30%, #fff, #ececec 60%, #d6d6d6);
	box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.85) inset;
	margin-top: calc((var(--track-h) - var(--thumb-d)) / 2);
	position: relative;   /* z-index toimii */
	z-index: 200;
	transform: scale(var(--thumb-scale));
	transition: transform .12s ease, box-shadow .12s ease;
}
#settings_personality input[type=range]:hover::-webkit-slider-thumb,
#settings_event_preferences_categories_container input[type=range]:hover::-webkit-slider-thumb{
	transform: scale(calc(var(--thumb-scale) * 1.06));
}
#settings_personality input[type=range]:focus-visible::-webkit-slider-thumb,
#settings_event_preferences_categories_container input[type=range]:focus-visible::-webkit-slider-thumb{
	box-shadow: 0 0 0 6px var(--focus-ring), 0 1px 2px rgba(0,0,0,.25);
}

/* ---------- Firefox: track ---------- */
#settings_personality input[type=range]::-moz-range-track,
#settings_event_preferences_categories_container input[type=range]::-moz-range-track {
  height: 14px;
  border-radius: 7px;
  border: 1px solid #ccc;
  background:
    linear-gradient(90deg, transparent 0%, transparent calc(50% - .5px),
                    rgba(0,0,0,.15) 50%, transparent calc(50% + .5px),
                    transparent 100%),
    linear-gradient(90deg,
      var(--cold-0) 0%,
      var(--cold-1) 18%,
      var(--cold-2) 34%,
      #eaf2ff      46%,
      var(--neutral) 50%,
      #f4fff7      54%,
      var(--pos-1)  60%,
      var(--pos-2)  70%,
      var(--warn-1) 90%,
      var(--hot-1) 100%
    );
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
/* ---------- Firefox: thumb ---------- */
#settings_personality input[type=range]::-moz-range-thumb,
#settings_event_preferences_categories_container input[type=range]::-moz-range-thumb{
	width: var(--thumb-d);
	height: var(--thumb-d);
	border-radius: 50%;
	border: 1px solid #a3a3a3;
	background: radial-gradient(circle at 30% 30%, #fff, #ececec 60%, #d6d6d6);
	box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.85) inset;
	position: relative;
	z-index: 200;
	transition: transform .12s ease, box-shadow .12s ease;
}

#settings_personality input[type=range]::-ms-track,
#settings_event_preferences_categories_container input[type=range]::-ms-track {
  height: 14px;
  border-radius: 7px;
  border: 1px solid #ccc;
  background:
    linear-gradient(90deg, transparent 0%, transparent calc(50% - .5px),
                    rgba(0,0,0,.15) 50%, transparent calc(50% + .5px),
                    transparent 100%),
    linear-gradient(90deg,
      var(--cold-0) 0%,
      var(--cold-1) 18%,
      var(--cold-2) 34%,
      #eaf2ff      46%,
      var(--neutral) 50%,
      #f4fff7      54%,
      var(--pos-1)  60%,
      var(--pos-2)  70%,
      var(--warn-1) 90%,
      var(--hot-1) 100%
    );
  color: transparent;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}


#settings_personality input[type=range]:hover::-moz-range-thumb,
#settings_event_preferences_categories_container input[type=range]:hover::-moz-range-thumb{
	transform: scale(1.06);
}
#settings_personality input[type=range]:focus-visible,
#settings_event_preferences_categories_container input[type=range]:focus-visible{
	outline: none;
}

/* Layoutin puolitus tälle kontille kuten aiemmin */
#settings_event_preferences_categories_container input[type=range]{
	width: 65%;
	vertical-align: top;
    margin-top: 4px;
}
#settings_personality span,
#settings_event_preferences_categories_container span{
	vertical-align: super;
	margin-left: 10px;
	display: inline-block;
	max-width: 30%;
}



@media (max-width: 600px) {
	#settings_location_getlocation_button {
		margin-top: 1rem;
  }
}
#settings_payment .basictable {
	text-align: center;
	
}
#settings_payment .basictable > tbody > tr > td {
	padding: 2rem;
	vertical-align: top;
}
#settings_payment .basictable > tbody > tr > td > .small {
	margin-top: 10px;
	display: inline-block;
}
#settings_payment .basictable button {
	margin: 20px auto;
	display: block;
	text-align: center;
	font-size: 160%;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
}
#settings_payment .basictable img {
	margin: 0px auto;
	max-height: 100px;
	display: block;
	max-width: 40vw;
}

#settings_payment_real img {
	height: 100px;
}
.settings_payment_real_ad {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
    font-size: 150%;
    padding: 20px;
    background-color: #ff0;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 0 8px 1px #fd0;
}

#settings_payment_content {
	margin-top: 20px;
}

#settings_payment_info {
	margin-top: 20px;
}
.settings_payment_price,
.settings_payment_month {
	font-size: 1.5rem;
	white-space: nowrap;
}
.settings_payment_month {
	white-space: no-wrap;
}
input[name=settings_payment_months] {
	margin-top: 0.5rem;
}

#settings_payment_rotkoCredits_label > .rotkocredits_saldo {
	font-size: 150%;
  	padding: 0.5rem 1.5rem;
}
#settings_payment_rotkoCredits_label {
	vertical-align: middle !important;
}

.realprice {
	text-decoration: line-through;
	color: #555;
	font-style: italic;
}

#reg_done_link {
	float: right;
}


/****** Main *****/
.sidemargins {
	padding-right: 10px;

	padding-left: 10px;
}

.main_special_container > .main_title {
	padding: 10px;
}
.main_special_container > i,
.main_special_container > span {
	margin: 5px;
}

/***** chatty *****/
#chatty {
    padding-bottom: 10px;
    padding-top: 10px;
	text-align: center;
}
.chatty > i.material-icons {
	color: #fff;
	padding-bottom: 0 !important;
	padding-right: 2px;
}
#chatty_content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.5rem, 2vw, 1.5rem);
	justify-items: center;
	align-items: start;
	margin: 1rem auto;
	padding: clamp(0.5rem, 2vw, 1.5rem);
	max-width: 900px;
}
@media (min-width: 600px) {
	#chatty_content {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
#chatty_content > .chatty_cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.chatty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	white-space: nowrap;
	margin: 0.5rem;
}
#chatty_1 {
	background-color: #aaa;
}
#chatty_2 {
	    background-color: #0d6;
}
#chatty_2_explanation {
	display: block;
    font-size: 0.7rem;
	top: -0.5rem;
    position: relative;
}
#chatty_3 {
	    background-color: #0d6;
}
#chatty_4 {
    background-color: #0d6;
}

#chatty_outro {
    margin-left: 3rem;
    margin-right: 3rem;
}
.oval-thought {
    position: relative;
	background: #fff;
	border-radius: 6rem;
    padding-top: 0rem;
    padding-bottom: 0rem;	
}
.oval-thought-bubbles::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -3px;
    width: 30px;
    height: 30px;
	background: #fff;
    border-radius: 30px;
}
.oval-thought-bubbles::after {
    content: "";
    position: absolute;
    top: 8px;
    left: -18px;
    width: 15px;
    height: 15px;
	background: #fff;
    border-radius: 15px;
    border-radius: 15px;
}
@media (max-width: 600px) {
	.oval-thought::before {
		top: 6px;
		left: 8px;
		width: 1.2rem;
		height: 1.2rem;
	}
	.oval-thought::after {
		top: 2px;
		left: -3px;
		width: 0.5rem;
		height: 0.5rem;
	}
}
@media (max-width: 400px) {
	.oval-thought {
		border-radius: 4rem;
	}
}

#say {
	cursor: pointer;
}
#say, #say_group, #say_party {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: transparent;
    border: none;
	max-height: 70vh;
	max-height: calc(var(--vh, 1vh) * 70);
}
#say_container input[type=checkbox] {
	transform: scale(1.3);
}
#say_blog_title {
	margin-top: 1rem;
    margin-bottom: 1rem;
    width: 50%;	
}
#say_container_group > .say_textarea_container,
#say_container_party > .say_textarea_container {
	height: 150px;
}

#say_chatty_link {
	float: right;
	font-size: 0.8rem;
    font-size: 0.8rem;
    margin-right: 3rem;
    top: 1rem;
    position: relative;
}
@media (max-width: 1000px) {
	#say_container > .say_textarea_container {
		width: 60%;
		padding-left: 4%;
		padding-top: 10px;
	}
	#say_chatty_link {
		margin-right: 1cap;
		top: 0.5rem;
	}
}

@media (min-width: 1001px) {
	#say_container > .say_textarea_container {
		margin-left: 2rem;
		margin-right: 2rem;
	}
}
.say_textarea_container {
	padding: 4px;
}
#say_container.dragenter,
#say_container_group.dragenter,
#say_container_party.dragenter,
.publicchat_textarea_container.dragenter {
	outline: 2px dashed #888;
	outline-offset: -4px;
	background-color: rgba(0, 0, 0, 0.03);
	border-radius: 8px;
}
.say_container_active {
    padding: 1rem;
	padding-bottom: 1.5rem;
}
.say_buttons_container {
	padding-right: 3rem;
    padding-left: 3rem;
}
@media (max-width: 600px) {
	.say_buttons_container {
		padding-right: 1rem;
		padding-left: 1rem;
	}
}
@media (max-width: 400px) {
	.say_buttons_container {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
	.say_buttons_container > button {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}
.say_arrow {
  position: absolute;
  left: -28px;
  top: 24px;
  height: 35px;
  width: 50px;
}
#say_info {
	font-size: 80%;
    margin-bottom: 5px;
    border: 1px dotted #f00;
    background-color: #ffd;
    padding: 5px;	
}

input[type=file] {
	display: none;
}

#publish_group, #publish_party {
	margin-right: 10px;
}

#say_photo, #say_group_photo, #say_party_photo, #say_video, #say_group_video, #say_party_video {
	box-shadow: 1px 1px 5px #555;
	max-height: 300px;
	max-height: 50vh;
	max-height: calc(var(--vh, 1vh) * 50);
	max-width: 760px;
	margin: 10px;
}

.say_photo_el {
    margin-bottom: 0.5rem;
}

#say_photo_ownphotos_container,
#say_photo_profilephoto_container {
	padding-left: 2rem;
}
#say_photo_profilephoto_intro {
	padding-left: 3rem;
    padding-bottom: 1rem;
}
#say_photo_profilephoto_intro > img {
    margin: 0 20px 20px;
    max-width: 30%;
    float: right;
    box-shadow: 1px 1px 5px #555;
}
#say_photo_ownphotos > table,
.warningtable {
    margin-top: 5px;
    background: #ffa;
    font-size: 90%;
    padding: 4px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    background-color: #ffa;
    vertical-align: middle;
	width: 100%;
}
#say_photo_ownphotos > table > tbody > tr > td > i,
.warningtable > tbody > tr > td > i {
    color: #f80;
    font-size: 200%;
    margin: 5px;
}
#say_photo_info {
    margin: 5px;
    display: block;
}

#say_group_title {
	background-color: #fff0ff;
}

.say_group_title_container {
	margin-top: 10px;
}

#say_publish {
    float: right;	
}
#say_privacy,
#say_location {
    float: right;
    margin-right: 10px;	
}

#stream_notice, #expired_notice {
	background: #fea;
	background: linear-gradient(135deg, #FFF8E1 0%, #FFF4D4 60%, #FFEFC7 100%);
	corner-shape: scoop;
    border-radius: 1rem;
	padding: 2rem;
	font-size: 1.1rem;
}

/* Invite promo box for rotkocredits screen */
.invite_promo_box {
	margin-top: 20px;
	padding: 16px 20px;
	background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 50%, #FFE082 100%);
	border-radius: 12px;
	border: 2px solid #FFB300;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.invite_promo_box:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 179, 0, 0.3);
}
.invite_promo_box::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
	animation: invite_shimmer 3s ease-in-out infinite;
}
@keyframes invite_shimmer {
	0% { left: -100%; }
	50%, 100% { left: 100%; }
}
.invite_promo_content {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 1;
}
.invite_promo_icon {
	color: #FF8F00;
}
.invite_promo_text {
	flex: 1;
}
.invite_promo_title {
	font-weight: bold;
	color: #E65100;
	margin-bottom: 4px;
}
.invite_promo_subtitle {
	font-size: 90%;
	color: #795548;
}
.invite_promo_arrow {
	color: #E65100;
}

#stream_tinder_try > button {
    margin: 3rem auto;
    display: block;
    padding: 1rem;
    padding-left: 2rem;
    font-size: 2.5rem;
    padding-right: 2rem;
}
#stream_tinder_try > button > .material-icons {
	font-size: 3rem !important;

}
#corona_details li {
	margin-bottom: 1rem;
}

#corona_details .gray {
	color: #334;
}

/***** Stream *****/
#content_container {
	margin-top: 20px;
}
#stream_content_loading {
	font-size: 30px;
	margin-top: 50px;
	margin-bottom: 50px;
	color: #f8f8ff;
	text-shadow: #ccf 1px 1px 1px;
	text-align: center;
}
.post_deleted {
	opacity: 0.6;
	background-color: #ddd;
}
.post_needs_moderation {
	background-color: #ff6;
	border-top-left-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	border-top-right-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
}

.post_user {
	display: inline;
	vertical-align: top;
	/* margin-left: 15px; */
	/* font-size: 16px; */
	/* line-height: 20px; */
}
.post_user > .flag {
	margin-left: 2px;
    margin-right: 2px;
}
.post_user > .admin_icon {
	font-size: 19px;	
}
.post_date {
	color: #88a;
	font-size: 80%;
	display: block;
	margin-left: 58px;
	margin-top: 2px;
	word-break: break-all;
    word-break: break-word;
}
.post_date > .pointer > .material-icons,
.post_date > .material-icons {
	vertical-align: middle;
	padding-bottom: 2px;
}
.post_date > button {
	padding-top: 0;
    padding-bottom: 0;
    font-size: 0.9rem;
}
.comment_date {
  color: #88a;
  font-size: 85%;
  margin-top: 5px;
}
.comment_delete {
	float: right;
	cursor: pointer;
}
.post_caption {
	display: inline;
	font-weight: bolder;
    color: #555;
}
.post_admin {
    display: inline-block;
    margin-bottom: 2px;
    border-radius: 10px;
    border: 1px solid #ddd;
	margin-top: -2rem;
}
@media (min-width: 600px) {
	.post_admin > .post_points {
		padding: 6px !important;
	}
}
.post_admin_note {
	margin: 0.5rem;
	padding: 0.3rem;
	font-size: 0.8rem;
	color: #555;
	background-color: #ccf;
	border: 1px dashed #aaf;
	max-height: 2rem;
	overflow-y: auto;
}

.post_validations {
	background-color: #eee;
	padding: 2px;
}
.post_points {
    font-size: 0.8rem;
	font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
	border-right: 1px solid #ddd;
	display: table-cell;
	
}
.post_admin_ppp {
	color: #fff;
	text-shadow: 1px 1px 1px #000, -1px -1px 3px #888;
	margin-top: 0.5rem;
	display: inline-block;
}
.post_admin_ppp > .post_points {
	padding: 0.85rem;
}
.post_admin > .post_points {
    background-color: rgb(240,240,240);
    padding: 4px;
}
.post_points:nth-child(1) {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-right: 1px solid #ddd;
}
.post_points:last-child {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-right: none;
}
.postActionsIcon {
    color: #bbb;
	float: right;
    background-color: #fff0f0;
    border-radius: 50%;
    padding: 4px !important;
    font-size: 80% !important;
    border-bottom: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
	cursor: pointer;
	margin-left: 0.7rem;
}
@media (min-width: 1000px) {
	.postActionsIcon:hover {
	background-color: #ddd;
	color: #444;
	}
}
#radar_filter_number {
	font-size: 0.9rem;
	margin-left: -0.2rem;
}
.mainTitleActionsIcon > .material-icons {
	padding: 0;
}
.mainTitleActionsIcon {
	margin-left: -34px !important;
	margin-left: calc(-1rem - 18px) !important;
}
.post_text,
.post_text2 {
	clear: both;	
	word-break: break-word;
	padding-left: 12px;
    padding-right: 12px;
    padding-top: 5px;
}
.post_original {
	color: #755;
	font-size: 93%;
}
.post_edit {
	width: 98%;
	height: 50vh;
	height: calc(var(--vh, 1vh) * 50);	
}
#content .post_text {
	max-height: 50vh;
	max-height: calc(var(--vh, 1vh) * 50);
	overflow-y: auto;
}

.paragraph {
	display:block; 
	height:10px;
}

.post_table {
	width: 100%;
	margin-top: 10px;
}
.post_table_nocopy {
	position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}
div.post_table {
	text-align: center;
	position: relative;
}
div.post_table > img {
	cursor: pointer;
}
.post_table_imagecell {
	text-align: right;
}
.post_title {
	font-size: 150%;
	margin-bottom: 10px;
	font-weight: bold;
	word-break: break-word;
    padding-left: 12px;
    padding-right: 12px;
}
.post_title_small {
	font-size: 110%;
	margin-bottom: 7px;
	font-weight: bold;
	word-break: break-word;
    padding-left: 12px;
    padding-right: 12px;
}
.post_description {
	word-break: break-word;
    padding-left: 12px;
    padding-right: 12px;
}
.post_description_image {
    max-width: 385px;
}

.post_photo {
	max-width: 800px;
	max-width: 100%;
}
.post_photo_full, .post_photo_full_alone {
	max-height: 550px;
	max-height: 90vh;
	max-height: calc(var(--vh, 1vh) * 90);
}
.post_photo_normal, .post_photo_normal_alone {
	max-height: 450px;
	max-height: 75vh;
	max-height: calc(var(--vh, 1vh) * 75);
}
.post_photo_half, .post_photo_half_alone {
	max-height: 300px;
	max-height: 60vh;
	max-height: calc(var(--vh, 1vh) * 60);
}
.post_photo_small, .post_photo_small_alone {
	max-height: 200px;
	max-height: 45vh;
	max-height: calc(var(--vh, 1vh) * 45);
}
.post_photo_related_site {
    max-width: 380px;
    margin-left: 10px;
}
.post_party_cover {
	max-height: 74vh;
	max-height: calc(var(--vh, 1vh) * 74);
	width: 100%;
	margin-bottom: 10px;
	margin-top: 10px;
	object-position: center;
    object-fit: cover;
}
.post_party_cover_premium {
	margin: 30px;
	margin-left: -20px;
	width: 840px;
	box-shadow: 0px 0px 10px #fff, 0px 0px 50px #fa0;
	height: 310px;
}

.post_party_details {
	float: right;
	margin-left: 20px;
	margin-bottom: 10px;
	max-width: 50%;
}
@media (max-width: 768px) {
	.post_party_details {
		float: none;
		margin: 10px;
		max-width: none;
	}
}
.post_party_details span.link {
	font-size: 0.8rem;
	margin-right: 0.5rem;
}

.post_cancelled {
    padding: 0.2rem;
    color: #fff;
    margin-top: 0.5rem;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0.5rem;
    transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    background-color: #f00;
    float: right;
	top: -0.1rem;
	position: relative;
}
@media (max-width: 768px) {
	.post_cancelled {
		margin-top: -0.5rem;
	}
}
.post_analyze {
	overflow-x: scroll;
}
.post_analyze td {
	padding: 2px;
}
.post_analyze td:nth-child(1),
.post_analyze td:nth-child(2) {
	text-align: right;
}
.stream_post_partytip {
	font-size: 70%;
    float: right;
    margin-right: 10px;
    margin-left: 10px;
    background-color: aliceblue;
    text-align: center;
    padding: 4px 11px 4px 11px;
    border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.0975);
	margin-bottom: -4px;
    margin-top: 4px;
	max-width: 50%;
}
.stream_post_partytip > button {
	margin: 0.5rem;
	font-size: 1rem;
}
.stream_post_partytip > .small {
	font-size: 0.7rem;
}
.stream_post_partytip > div.small {
	margin-bottom: 4px;
}
.stream_post_partytip td {
    padding: 0.5rem;
}

#content_options {
    text-align: center;
    padding: 5px;
    padding-bottom: 10px;
    font-size: 1.1rem;
    background-color: #eff;
    border-top-left-radius: 3px;
    margin-bottom: -5px;
    border-top-right-radius: 3px;
}
#content_shownew {
    text-align: center;
    padding: 1rem;
	padding-bottom: 1.5rem;
    font-size: 1.3rem;
    background-color: #def;
	margin-bottom: -0.5rem;
}
#content > :first-child { 
	border-top: 0 !important;
}

.pinned {
	color: #d43;
	text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
	margin-right: 0.2rem;
	transition: 0.3s;
}
.pinned_not {
	color: #fafafa !important;

}
.pinned:hover {
	color: #a00;
	text-shadow: -1px -1px 0 #888, 0 0 1px #ff4;
}
.pinned_bg {
	padding-right: 4px;
	border-right: 4px solid #fd6;
  	background: linear-gradient(to right, #fff, #ffd);
}

.contentline {
	background-color: #fff;
	max-width: 100vw;
	margin-bottom: 10px;
	border: 1px solid #f88;
    border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.0975);
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	content-visibility: auto;
}
.contentline_top_image {
	border-radius: 3px;
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	width: 100%;
}
#content_party > .contentline,
#content_group > .contentline,
#content_wall > .contentline,
#content_blog > .contentline {
	border: none;
	box-shadow: 1px 1px 4px #aaa;
}
#content_party,
#content_wall,
#content_search,
#content_blog {
	background-color: #fee;
}
#content_party .sk-cube-grid,
#content_wall .sk-cube-grid,
#content_search .sk-cube-grid,
#content_blog .sk-cube-grid {
	padding-top: 20vw;
	padding-bottom: 20vw;
}

#content_group > table {
	width: 100%;
}
.content_group_summary {
	padding: 5px;
	word-break: break-word;
	vertical-align: top;
	border-bottom: 1px solid #fdf;
}

#content_search {
	padding: 0 !important;
}
#content_wall_hashtags {
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
}
#content_wall_hashtags > .link {
	margin: 0.5rem;
}
/*
.post_container {
	font-family: "Open Sans",Arial,sans-serif;
}
*/
.post_header {
	padding: 8px;
	min-height: 50px;	
}

.post_links {
    border-top: 1px solid #fdfdff;
    border-top: 1px solid #fee;
    margin-left: 12px;
    margin-right: 12px;
    padding-bottom: 10px;
	padding-top: 10px;
	margin-top: 10px;
}
.post_links .emoji-icon {
	font-size: 1rem;
	display: inline-block;
}
.post_links .emoji-icon > span {
	padding-left: 1px;
}
.post_links .emoji-count {
	font-size: 1rem;
	font-weight: normal;
}

.event_emojis {
	margin: -5px;
}
.event_emoji_container {
	display: inline-block;
}

.stream_pref_users {
	text-align: center;
    font-size: 90%;
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    color: #888;
}
#eventNotify {
	padding: 12px;
}

.post_linkbutton_container {
	margin-top: 15px;
	margin-bottom: 10px;
}

.stream_calendar_event {
	color: #667;
	font-weight: bold;
	margin-right: 0.5rem;
	display: inline-block;	
}
.stream_calendar_event > .material-icons {
	color: #aab;
    margin-right: 2px;
    font-size: 1.25rem;
}
@media (min-width: 768px) {
	.stream_calendar_event > .material-icons {
		padding-bottom: 0;
	}		
}
.stream_party_photo {
	background-size: cover;	
	background-position: center;
	position: relative;
	float: right;
	  margin-left: 10px;
	  margin-bottom: 10px;
}

.stream_party_text {
	margin-left: 12px;
	vertical-align: top;
	word-break: break-word;
}

.stream_newmember_description {
	color: #666;
	font-style: italic;
	font-size: 85%;
	padding-left: 8px;
	padding-top: 10px;	
}
.stream_newmember_info {
	border: 1px solid #ddd;
	padding: 8px;
	background-color: #ffd;
}
.stream_group_title {
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 105%;
}
.stream_new_comment, .stream_comment {
	padding-top: 5px;
	padding-bottom: 10px;
	border-top: 1px solid #ddf;
	background-color: #eef;
	padding: 5px;
	padding-left: 10px;
	font-size: 85%;
	position: relative;
	text-align: left;
}
.stream_comment_hidden {
	padding: 2px;
	font-size: 60%;
	text-align: center;
}
.stream_comment_unmoderated {
	background-color: #ffe;
}
.stream_comment_button {
	margin: 5px;
    float: right;
    margin-bottom: 0px;
}
.stream_comment_can_understand {
    margin-left: 50px;
    margin-top: 2px;
    display: inline-block;
}
.stream_photos {
	width: 200px;
	height: 190px;
	border-radius: 0px;
	float: none;
	text-align: center;
	padding-top: 10px;	
	position: relative;
	display: inline-block;	
	margin-bottom: -5px;
}
.stream_photos:last-child {
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}

#stream_photos > div:nth-child(2) {
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.stream_photos > span {
    position: absolute;
    width: 100%;
    left: 0;
}
.stream_photos .account,
.stream_photos .gender {
	color: #fff;
    text-shadow: -1px -1px 1px #444,-1px 1px 1px #444,1px -1px 1px #444,1px 1px 1px #444;
    letter-spacing: 1.2px;
    font-weight: normal;
}
.stream_ad_party1 > div:nth-child(1) {
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.stream_ad_party1 > div:nth-child(3) {
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.stream_ad_party1 > div:last-child {
	border-radius: 0 !important;
}
.stream_ad_party2 > img {
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#stream_ad_party button {
	margin: 1rem; 
	float: right;
}
.stream_ad_flyer_actions {
	text-align: right;
	margin-bottom: 1rem;
}
.stream_ad_flyer_actions > p {
	float: left;
    margin-top: -2rem;
}
#stream_ad_flyer > .contentline_top_image {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.basictable > i.material-icons{
    float: left;
    font-size: 200%;
	margin: 2px;
    margin-right: 10px;
}

.stream_new_comment_input {
	vertical-align: top !important;
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	width: 715px !important;
	height: 2rem;
}
.stream_comment_which {
    margin-right: 10px;
    margin-top: 10px;
    display: inline;
    float: right;
}
.stream_comment_text {
	vertical-align: top;
	line-height: 18px;	
	word-break: break-word;
}

.stream_eventNotify {
	right: 0;
}
.stream_more_similar {
	text-align: center;
	padding: 0.5rem;
}
.stream_event_likeDislike {
	text-align: center;
	font-size: 0.8rem;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-top: 0.5rem;
}
.stream_event_likeDislike > div > .postActionsIcon {
	float: none;
	font-size: 2rem !important;
	padding: 0.5rem !important;
}
.stream_event_likeDislike > div {
	margin-top: 0.5rem;
}

.event_check {
	margin-top: 3px;
	margin-bottom: 3px;
    margin-left: 20px;
}
.content_info {
	text-align: center;
    padding: 2rem;
	padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: rgb(255, 255, 200);
    font-size: 120%;
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	corner-shape: scoop;
}
.contentline:has(.content_info) {
  	corner-shape: scoop;
}
.content_info_top_rounded {
	border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.profilephoto_content_info {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	margin-top: -1rem;
    margin-bottom: -1rem;
}
.adjust {
	border: 3px dashed #f00;
	margin: 0px;
	background-color: #ff7;
	padding: 5px;
}

#content_calendar,
#radarusers,
#last_login {
	background-color: #ffffe8;
    border-top: 1px solid #dabaff;
	border-bottom: 1px solid #dabaff;
}
#content_calendar,
#last_login {
	margin-top: 20px;
	overflow: hidden;
}
#last_login_content {
	max-height: 50vh;
	max-height: calc(var(--vh, 1vh) * 50);
	overflow-y: scroll;
}
#last_login_content_profiles > .stream_photos {
	width: 25%;
	position: relative;

}
#last_login_content_profiles .account {
	line-height: 1.8rem;
}
/*
#last_login_content_profiles .gender {
	text-shadow: 1px 1px 1px #ccc, -1px -1px 1px #ccc, -1px 1px 1px #ccc, 1px -1px 1px #ccc;
	color: #242833;
}
*/
#last_login_content_profiles > .stream_photos > .distance {
	position: absolute;
	bottom: 7px;
	left: 0px;
	text-align: left;
	width: auto;
}
#last_login_content_profiles > .stream_photos > .whichname {
	top: 2rem;
}
.last_login_content_profiles .account_link_icon  {
    color: #555;
}

@media (max-width: 500px) {
	#last_login_content_profiles > .stream_photos {
	width: 50%;
		height: 45vw;
	}
}


#content_calendar_content {
	overflow: hidden;
}
#content_calendar_content > table > tbody > tr > td {
	padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
	vertical-align: top;
}
#content_calendar_content > table {
	width: 100%;
}
/*
@media (min-width: 500px) {
	td.calendar_event_location {
    white-space: nowrap;
	}
}
*/
.contentCalendar_bottom > td {
	border-bottom: 1px solid #fee;
}
#content_calendar_content > table > tbody > tr:last-child > td {
	border-bottom: 0;
}
.contentCalendar_row_calendar {
	transition: transform 0.3s ease;
}

.contentCalendar_row_date {
	max-width: 100px;
}
.contentCalendar_row_party > .contentCalendar_row_participants,
.contentCalendar_row_distance {
	text-align: right;
}
.contentCalendar_row_party_cover {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	padding-right: 0px !important;
	width: 130px;
}
.contentCalendar_row_party_cover > .parties_party_cover {
	margin-right: 0px;
}
.contentCalendar_row_party_cover_big {
	width: unset;
}
.contentCalendar_row_party_cover_big > .parties_party_cover {
	min-width: 300px;
	width: 100%;
	height: 130px;
}
.contentCalendar_text_party_big {
	text-align: center;
	vertical-align: middle;
	font-size: 120%;
}
.contentCalendar_highlighted {
    float: right;
    padding: 5px;
    background-color: #ff4;
    color: #222;
    -ms-transform: rotate(17deg);
    -webkit-transform: rotate(17deg);
    transform: rotate(17deg);
    text-shadow: 0px 0px 4px #fff;
    box-shadow: -1px -1px 2px #888, 1px 1px 4px #fff;
    border-radius: 3px;
    top: 10px;
    margin-top: 0.1rem;
    margin-right: 7px;
	padding-left: 1rem;
  	padding-right: 1rem;
	margin-left: 0.5rem;
	transform-origin: top left;
}
.contentCalendar_highlighted.silver {
	background: linear-gradient(135deg, #e4e4f7 0%, #a8c5e8 50%, #7a9ee4 100%);
}
.content_calendar_account {
	text-wrap: nowrap;
}
@media (max-width: 600px) {
	#party_info > .contentCalendar_highlighted {
		top: -3.5rem !important;
		margin-bottom: -3rem;
	}
	.contentCalendar_row_text {
		padding-top: 0 !important;
		overflow: hidden;
	}
	.contentCalendar_row_text > span {
		display: inline-block;
		overflow: hidden;
		max-width: 95vw;
	}
	.contentCalendar_row_location {
		text-wrap: nowrap;
		max-width: 25vw;
		overflow: hidden;
	}
	.contentCalendar_row_participants {
		text-wrap: nowrap;
		max-width: 50vw;
		overflow: hidden;
	}
}

@media (min-width: 601px) {
	.contentCalendar_row_location,
	.contentCalendar_row_participants,
	.contentCalendar_row_text {
		overflow: hidden;
	}
	.contentCalendar_row_location {
		max-width: 105px;
	}	
	.contentCalendar_row_text {
		max-width: 300px;
	}
	.contentCalendar_row_participants {
		max-width: 160px;
	}
	.contentCalendar_row_text > span,
	.contentCalendar_row_location > span {
	display: inline-block;
	overflow: hidden;
	}
	.contentCalendar_bottom_blank > td {
		padding: 0px !important;
	}
	.contentCalendar_row_location,
	.contentCalendar_row_distance {
	   white-space: nowrap;
	}
}
@media (max-width: 600px) {
	#content_calendar_content {
		font-size: 80%;
	}
	.contentCalendar_row_date { 
		max-width: 20vw;
	}	
	#content_calendar_content > table > tbody > tr > .calendar_text {
    margin-top: 0px;
	}	
	.contentCalendar_row_party_cover_mobile {
		padding-right: 5px !important;
	}

}
.contentCalendarRow_my {
		background-color: #fff9d3;
		border-left: 3px solid orange;
}
.contentCalendarRow_maybe {
		background-color: #ffd9f3;
}


.contentCalendar_my_icon {
    color: #ff6;
    text-shadow: 1px 1px 5px #a00;	
}
.content_calendar_party_options {
	text-align: center !important;
	padding-bottom: 6rem !important;
	padding-top: 4rem !important;
}

.streamPhotos {
	letter-spacing: 1px;
    font-weight: bold;
    text-align: center;
	padding: 1rem;
	color: #fff;
	text-shadow: -1px -1px 3px #777,-1px 1px 1px #444,1px -1px 1px #444,1px 1px 1px #444;
}
.streamPhotos_premium {
    background-color: #fa3;
    border-bottom: 1px solid #f92;
	box-shadow: -2px -2px 6px #ff8, 2px -2px 6px #ff8;
}
.streamPhotos_random {
    background-color: #aaf;
    border-bottom: 1px solid #99f;
	box-shadow: -2px -2px 6px #ddf, 2px -2px 6px #ddf;
}
.streamPhotos_match {
    background-color: #f88;
    border-bottom: 1px solid #f44;
	box-shadow: -2px -2px 6px #ff8, 2px -2px 6px #ff8;
}
.streamPhotos_chatty {
    background-color: #ff8;
    border-bottom: 1px solid #ff4;
}
.streamPhotos_random > .help, .streamPhotos_premium > .help {
	color: #eef;
    letter-spacing: 1px;
    border-bottom: 1px dotted #eef;	
}

@media (max-width: 700px) {
	#party_hp_ad {
		margin: 10vh 100px 0 120px;
		margin: calc(var(--vh, 1vh) * 10), 100px 0 120px;
	}
}

/***** Locator *****/
#radar_container {
	/* margin-top: 1.5rem; */
}
#radar {
	background-color: #888;
	background-position: right -1px center;
	background-repeat: no-repeat;
	margin-bottom: -2px !important;
}
#radar.on {
	background-color: #ffe;
    box-shadow: 1px 1px 9px #ffa;	
}
#radar.off {
	background-color: #cdc;
}
#radar_panel > table {
	width: 100%;
	text-align: center;
}
.radar_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
	  padding: 5px;
  }
.radar_header .radar_title {
	flex: 1;
	text-align: left;
	margin-left: 3px;
}
.radar_icons {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}
.radar_icons .postActionsIcon {
	float: none;
	margin-left: 0;
}
.radar_counts_container {
	position: relative;
	vertical-align: middle;
	margin-left: 0.5rem;
    background-color: #fc4;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    text-shadow: none;
	font-weight: normal;
	overflow: hidden;
}
#radar_counts_foo {
	visibility: hidden;
	white-space: nowrap;
	padding: 0.1rem 0.5rem;
	font-size: 0.8rem;
}
.radar_title_count {
	width: 100%;
    height: 100%;
	padding-top: 1px;
	text-align: center;
}
.radar_counts_container .radar_title_count {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.radar_counts_container .radar_title_count.slide-out {
	transform: translateY(-100%);
	opacity: 0;
}
.radar_counts_container .radar_title_count.slide-in {
	transform: translateY(0);
	opacity: 1;
}
.radar_counts_container .radar_title_count.slide-waiting {
	transform: translateY(100%);
	opacity: 0;
}

.main_title {
	padding-bottom: 3px;
	text-align: center;
	font-weight: bold;
    text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
	border-bottom: none;
}

.radarpanel {
    padding: 10px;
    margin: 5px;
    background-color: #fec;
    display: inline-block;
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    border-top-color: #ff4080;
    border-left-color: #ff4080;
    border-bottom-color: #dF003F;
    border-right-color: #dF003F;
    border-color: #fff;
    border-collapse: collapse;
    box-shadow: 1px 1px 2px #aaa;
    border-radius: 10px;
}
.radarpanel_label {
	font-size: 60%;
    margin-top: 5px;
    color: #696969;
}
.radarpanel_label > .material-symbols-outlined {
	padding: 0;
    vertical-align: text-bottom;
	color: #a9a9a9;
	display: none;
}
#radar_panel {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.radar-container2 {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(8px, 2vw, 20px);
	margin: 0px auto;
	padding: 0 clamp(12px, 3vw, 20px);
	font-family: Arial, sans-serif;
}

.radarpanel2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s, box-shadow 0.2s;
	width: fit-content;
	padding: 12px clamp(6px, 3vw, 15px) !important;
	margin: clamp(3px, 1.5vw, 10px) !important;
	flex: 1 1 auto;
	min-width: fit-content;
}

.radaractive2 {
	flex-direction: column;
	align-items: center;
	padding: 12px clamp(24px, 6vw, 48px);
	flex: 1 1 auto;
	min-width: fit-content;
}
.radar-toggle {
            position: relative;
            width: 50px;
            height: 26px;
            background: #ccc;
            border-radius: 13px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-bottom: 4px;
}

.radar-toggle.active {
            background: #4CAF50;
}

.radar-toggle-slider {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.radar-toggle.active .radar-toggle-slider {
            transform: translateX(24px);
}

.radar-toggle-label {
            font-size: 10px;
            color: #666;
            text-align: center;
            white-space: nowrap;
}

.radar-toggle.active + .radar-toggle-label {
            color: #4CAF50;
            font-weight: bold;
}

.radarMarker_container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transform-origin: center bottom;
    animation: markerPop 0.3s ease-out;
}

.radarMarker_photoContainer {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    padding: 0px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
	z-index: 1000;
}

.radarMarker_partyPhotoContainer {
    position: relative;
    width: 80px;
    border: 1px solid #fff;
    padding: 0px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.55);
	z-index: 999;
}
.radarMarker_eventPhotoContainer {
    position: relative;
    width: 20px;
    border: 3px solid #fff;
    padding: 0px;
    z-index: 998;
}


.radarMarker_photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.radarMarker_partyPhoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.radarMarker_eventPhoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radarMarker_infoCard {
    background: rgba(255,255,255,0.85);
    border-radius: 12px;
    padding: 4px 8px;
    margin-top: -8px;
    border: 1px solid rgba(255,255,255,0.2);
    text-align: center;
	z-index: 1001;
}
.radarMarker_infoCard_event {
	 margin-top: -0px;
	 border-top-left-radius: 0;
	 border-top-right-radius: 0;
}
.zoom-minimal .radarMarker_infoCard,
.zoom-basic .radarMarker_infoCard,
.zoom-standard .radarMarker_infoCard {
	display: none;
}
.zoom-minimal .radarMarker_time,
.zoom-basic .radarMarker_time,
.zoom-standard .radarMarker_time {
	display: none;
}

.zoom-standard .radarMarker_name {
    font-size: 11px;
    font-weight: 400;
}


.radarMarker_name {
    color: #000;
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
}

.zoom-minimal .radarMarker_photoText,
.zoom-basic .radarMarker_photoText,
.zoom-standard .radarMarker_photoText {
	display: none;
}

.zoom-detailed .radarMarker_photoText {
	max-width: 150px;
	max-height: 50px;
	overflow: hidden;
	display: inline-block;
}

.radarMarker_time {
	position: absolute;
	top: 0px;
	left: 55%;
	background-color: #fff;
	padding: 3px;
	border-radius: 2px;
    color: #777;
    font-size: 11px;
    font-weight: 400;
	z-index: 1001;
	white-space: nowrap;
}

.radarMarker_pointer {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(255,255,255);
}
.radar_filtered_icon {
	filter: blur(3px);
    color: #55f;
}

@keyframes markerPop {
    0% { transform: scale(0) translateY(20px); opacity: 0; }
    50% { transform: scale(1.1) translateY(-5px); opacity: 0.8; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}


.radaractive {
	text-align: left;
	font-size: 80% !important;
}
.radar_location_container {
	padding-right: 10px;
    padding-bottom: 1rem;
}
#radar_location {
    font-weight: bolder;
}
#radar_location_label {
	margin-left: 5px;
}

#radarmap {
	height: 400px;
	height: 50vh;
	max-height: calc(var(--vh, 1vh) * 50);
	margin-bottom: 0px;
	padding: 0;
    border-radius: 0;
    margin-top: -0.5rem;
}
/* AdvancedMarkerElement anchors the content's bottom-center on the LatLng.
   To draw a circle that's geographically centered on the point, the marker
   content is a 0x0 stub and the visible dot is a pseudo-element absolutely
   positioned so its own center sits on the parent's bottom-center. */
.radar_heatmap_dot {
	position: relative;
	width: 0;
	height: 0;
	pointer-events: none;
}
.radar_heatmap_dot::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transform: translate(-50%, 50%);
	background: radial-gradient(circle, rgba(255, 64, 64, 0.30) 0%, rgba(255, 64, 64, 0) 70%);
}
.radar_heatmap_dot.tier-mid::before {
	width: 40px;
	height: 40px;
	background: radial-gradient(circle, rgba(255, 64, 64, 0.55) 0%, rgba(255, 64, 64, 0) 70%);
}
.radar_heatmap_dot.tier-high::before {
	width: 50px;
	height: 50px;
	background: radial-gradient(circle, rgba(255, 64, 64, 0.80) 0%, rgba(255, 64, 64, 0) 70%);
}
#radarmap_markerLayer img {
	border-radius: 50%;
}
#radar_bonusNextAvailable,
#radar_nolocation,
#radar_nogps,
#radar_webPush {
	text-align: center;
    font-size: 70%;
    padding: 4px;
    border: 1px solid #f9b;
    margin-top: 5px;
	background-color: rgba(255,128,0,0.3);
    margin-bottom: 5px;
}
/* Always reserve a 2-line slot so show/hide does not cause layout jumping.
   Defeats both the initial .hidden class and jQuery .hide()'s inline display:none.
   Visibility flips to visible only when jQuery .show() writes display:block. */
#radar_nogps {
    display: block !important;
    min-height: calc(1lh + 5px);
    visibility: hidden;
}
#radar_nogps[style*="display: block"] {
    visibility: visible;
}
#radar_navigate {
    margin-top: 5px;	
}
#radar_refresh > .sk-cube-grid {
	margin: 0px;
	width: 30px;
	height: 30px;
	color: #242833;
}

#radarCount {
	display: none;
	float: right;
    background-color: aliceblue;
    padding: 4px;
    border: 1px solid #aaf;
    margin-top: -20px;
    margin-right: -15px;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 1px 1px 8px #88a;	
    min-width: 16px;
    text-align: center;
}

#radarusers {
	width: 100%;
	table-layout: fixed;
	font-size: 0.8rem;
}
#radarusers td {
	vertical-align: top;
	padding-top: 5px;
}
#radarusers {
	content-visibility: auto;
}

.radarusers_arrow {
	margin: 0px 5px 0px 10px;
	text-shadow: 1px 1px 1px #fff;
	color: #88f;
	font-size: 1.3rem !important;
}

.radarusers_row_photo {
	width: 60px;
}
.radarusers_row_photo > div {
	margin-top: 0px;
	margin-left: 5px;
}
.radarusers_row_distance {
	text-align: right;
	white-space: nowrap;
}
.radarusers_row_direction {
	width: 15px;
}
.radarusers_row_text > td,
.radarusers_row_photo {
	border-bottom: 1px dotted #ddf;
	padding-bottom: 2px;
	font-size: 0.9rem;
    color: #555;
}
.radarusers_row_text > td {

}
.radarusers_row_text > td > div {
	display: inline-block;
	overflow: hidden;
	max-width: 70vw;
	max-width: calc(95vw - 65px);
	max-height: 2.4rem;
}
@media (min-width: 600px) and (max-width: 1000px) {
	.radarusers_row_text > td > div {
		max-width: calc(100% - 65px);
	}
}

@media (min-width: 1001px) {
	.radarusers_row_text > td > div {
		max-width: 700px;
	}
}
.radarusers_row_text::last-child {
	border-bottom: none;
}
.radarusers_row_account {
	word-break: break-all;
}
.radar_members_looking {
	color: #888;
	font-style: italic;
}

#checkin {
	margin: 10px;
    text-align: center;
    border-top: 1px solid #fff;
    padding: 10px;
    padding-top: 20px;
}
#checkin_do {
	margin: 20px;
}
#checkin_do i {
	font-size: 300%;
    color: #4a4;
    text-shadow: 2px 0px 0px #fff;
    font-weight: bold;
}


/***** User profile *****/
.userprofile_head {
	text-align: left;
	width: 100%;
}
#photoText {
    width: 96%;
    margin-bottom: 5px;
    height: 100px;
}
.profile_icon {
	height: 32px;
	width: 32px;
	vertical-align: text-bottom;
	  float: right;
}
.account_link_icon {
    font-size: 1.1rem !important;
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
    padding-bottom: 2px;
}

#userprofile_photo {
	box-shadow: 1px 1px 5px #555;
	transition-property: opacity;
	transition-timing-function: ease-out;
	transition-duration: 0.1s;
	width: 100%;
}
#userprofile_photo_container {
	position: relative;
	margin-left: 10px;
	margin-right: 20px;
	background-color: #fafafa;
}
@media (max-width: 600px) {
	#userprofile_photo {
		width: 90vw;
		margin: 0px;
		max-height: 50vh;
		object-fit: cover;
		object-position: center;
	}
	#userprofile_photo_container {
		margin: 0 auto;
        margin-bottom: 10px;
	}
}
#userprofile_account {
	font-size: 150%;
	margin-bottom: 10px;
}

#userprofile_adminValidation_stamp {
	position: absolute;
    right: -75px;
    margin: -45px;
	top: -30px;
}
#userprofile_account > .material-icons {
	font-size: 30px;
	vertical-align: bottom;
	margin-left: 10px;
}

#userprofile_notes {
    width: 95%;
    display: block;
}
#userprofile_adminValidationRequired {
    font-size: 110%;
    font-weight: bold;
    color: #222;
    padding: 10px;	
	margin-bottom: 5px;
    background: #ffa;
    border: 1px solid #ddd;
}
#userprofile_adminValidationRequired > i {
	color: #f00;
}
#userprofile_blocked {
    font-size: 110%;
    font-weight: bold;
    background-color: #fd3;
    border: 1px solid #ddd;
    color: #222;
    padding: 10px;
	margin-bottom: 5px;
}
#userprofile_new {
    color: #fff;
    padding: 3px;
    padding-left: 10px;
    margin-left: 10px;
    background: #aaf;
    border: 1px solid #ddd;
    padding-right: 10px;
}
#userprofile_blocked > .material-icons {
	font-size: 30px;
	vertical-align: bottom;
	margin-left: 10px;
	color: #d00;
}

#userprofile_friendrequest {
	text-align: center;
	margin-top: 10px;
}
#userprofile_invite_buttons {
	display: inline;
}

#userprofile_membership_container {
	text-align: left;
	overflow-x: scroll;
}
#userprofile_membership_days,
#userprofile_rotkomembership_days,
#userprofile_rotkocredits_amount {
	width: 50px;
}
#userprofile_membership_reason,
#userprofile_rotkocredits_text {
	margin-top: 5px;
	margin-bottom: 5px;
}
#userprofile_showmoreless {
	display: inline;
}
.userprofile_showmoreless_active {
	border: 1px solid #aaa;
    background-color: #ff9;
    padding: 10px;
    padding-top: 0px;
    margin: 10px;
    margin-bottom: 0px;
    display: block !important;
}

#userProfile_radarRaport > table > tbody > tr > td {
	padding: 5px;
	vertical-align: top;
}

.userprofile_adminValidation {
	border: 4px solid #8e8;
    padding: 5px;
    font-size: 110%;
    background-color: #dfd;
    margin-left: 20px;
    /* text-align: center; */
    margin-right: 20px;
    margin-bottom: 10px;
}
.userprofile_friendsInCommon {
	border: 1px solid #8e8;
    padding: 5px;
    font-size: 90%;
    background-color: #dfd;
    margin-left: 20px;
    /* text-align: center; */
    margin-right: 20px;
    margin-bottom: 10px;	
}
#userprofile_photos {
	text-align: center;
}
.userprofile_photos_photo {
	width: 255px;
	height: 255px;
	margin: 5px;
	box-shadow: 1px 1px 5px #bbb;
	background-size: cover;	
	background-position: center;
	cursor: pointer;	
	display: inline-block;
	position: relative;
	transition: 0.2s;
}
.userprofile_photos_photo:hover {
	transform: scale(1.05);
}
.userprofile_neg_top_bargin {
	margin-top: -25px;
}

#userprofile_info_activity td {
	vertical-align: top;
	padding-right: 0.2rem;
}
#userprofile_info_activity td:nth-child(3),
#userprofile_info_activity td:nth-child(4),
#userprofile_info_activity td:nth-child(5) {
	padding-right: 0.5rem;
}
#userprofile_info_activity td:nth-child(4),
#userprofile_info_activity td:nth-child(5) {
	min-width: 60px;
}
#userprofile_info_activity td:nth-child(5) {
	word-break: break-word;
	hyphens: auto;
}
@media (max-width: 768px) {
	#userprofile_info_activity {
	    margin-right: -6px;
		margin-left: -2px;
	}
	#userprofile_info_activity td {
		font-size: 0.8rem;
	}
	#userprofile_info_activity td:nth-child(-n+5) {
		padding-right: 0.2rem !important;
	}
	#userprofile_info_activity td:nth-child(4) {
		hyphens: auto;
		overflow-x: hidden;
		max-width: 30vw;
	}
	#userprofile_info_activity td:nth-child(n+6):nth-child(-n+10) {
		padding-right: 0 !important;
	}

}
#userprofile_info_activity .material-icons {
	margin-top: 2px;
}
#userprofile_info_tellPersonality1,
#userprofile_info_tellPersonality2 {
	white-space: nowrap;
}
.userprofile_calendar_row_date {
	width: 6rem;
    display: inline-block;
}
#userprofile_pref_user_pointer {
	width: 16px;
	display: inline-block;
	margin-bottom: -5px;
    color: #555;
}
#userprofile_pref_user_pointer > span {
	font-size: 16px;
}
#userprofile_pref_user_scale {
	background: linear-gradient(to right, #000, #00f, #88f, #fff, #8f8, #0f0, #0a0);
    height: 10px;
    margin-left: 8px;
	margin-right: 8px;
}
#userprofile_buttons > button {
	margin: 1rem;
}
#userprofile_rotkomembership_buy_table td > span {
	display: block;
	margin-bottom: 0.5rem;
}
#userprofile_rotkomembership_buy_table .basictable > tbody > tr > td {
	padding: 0.5rem;
    padding-bottom: 1rem;
}
@media (min-width: 600px) {
	#userprofile_rotkomembership_opening_container {
		width: 40%;
	}
}
#userprofile_rotkomembership_opening_container {
		margin-top: 1rem;
}
#userprofile_rotkomembership_who > input[type="text"] {
	width: 20ch;
	margin-top: 0.5rem;
}
.icon_privacy_photo {
	font-size: 1.2rem !important;
	text-align: left;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 5px;
	left: 5px;
	text-shadow: 1px 1px 4px #000;
}
.icon_settings_photo {
	position: absolute;
	top: 5px;
	right: 5px;
	text-shadow: 1px 1px 4px #000;
}
.icon_settings_photo:hover {
	background-color: rgba(255,255,255,0.3);
}
.personality {
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #ddd;
    margin: 2px;
    display: inline-block;
    border-radius: 12px;
    color: #668;
}
.personalityChoose.selected { 
	background-color: #ffeb3b;
	display: block;
    text-align: center;
    margin: 2rem;
    padding: 1rem;
}
.personalityChoose {
    background-color: #eee;
	cursor: pointer;
	margin: 0.6rem;
}
.personalityChoose:hover {
    background-color: #fffb6b;
}


/***** chat *****/
.chat {
	position: fixed;
	z-index: 11000;
	bottom: -1px;
	height: auto;
	width: auto;
	border: 1px solid #aaa;
	box-shadow: 0px 0px 6px #a66;
	background-color: #fef;
}
.chat_inner {
	height: 350px;
	width: 500px;
}
@media (min-width: 1200px) {
	.chat_inner {
		width: 550px;
	}
}
@media (min-width: 1800px) {
	.chat_inner {
		width: 650px;
	}
}
@media (min-width: 2200px) {
	.chat_inner {
		width: 800px;
	}
}
@media (min-height: 1000px) {
	.chat_inner {
		height: 350px;
	}
}
@media (min-height: 1200px) {
	.chat_inner {
		height: 450px;
	}
}
@media (min-height: 1500px) {
	.chat_inner {
		height: 550px;
	}
}
@media (min-height: 2000px) {
	.chat_inner {
		height: 700px;
	}
}

/* Tablet touch devices (iPad etc.) - good defaults since no jQuery UI resize */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 1100px) {
	.chat_inner {
		width: min(90vw, 600px);
		height: min(60vh, 500px);
	}
}
@media (pointer: coarse) and (min-width: 1100px) {
	.chat_inner {
		width: 650px;
		height: min(60vh, 550px);
	}
}


.chat_title {
    color: #FFF;
    background-color: #ef0418;
    padding-left: 5px;
    border: 1px solid #ccf;
    letter-spacing: 0.5px;
    font-size: 90%;
	overflow: hidden;
}
.chat_title_bar {
    display: flex;
    align-items: center;
	width: 100%;
    min-width: 0;
}
.chat_title_container {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.chat_title_account > .accountLink > .link {
    color: inherit;
}
.chat_title_account {
    margin-right: 5px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat_online {
    flex: 0 0 auto;
}
.chat_title_buttons {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.chat_close {
	font-weight: bold;
}
.chat_bar_icon {
	cursor: pointer;
    font-size: 22px !important;
    padding: 3px;
	border-style: solid;
    border-width: 1px;
    border-top-color: #ff4080;
    border-left-color: #ff4080;
    border-collapse: collapse;
    border-bottom-color: #dF003F;
	border-right-color: #dF003F;
	margin: 2px;
	margin-right: 4px;
}
.chat_bar_icon:hover {
	background-color: rgba(255,255,255,0.5);
}
.chat_bar_checking {
	margin: 3px;
	max-height: 100%;
	vertical-align: middle;
}
.chat_bar_checking > .sk-cube-grid {
	margin: 2px;
	width: 22px;
	height: 22px;
}
.chat_bar_checking > i {
	color: #f80;
	font-size: 22px !important;
	padding: 0px;
	margin: 2px;
}

.chat_messages {
	height: 250px;
	padding: 2px 0px 2px 5px;
	overflow-y: auto;
	overflow-x: hidden;
}
.chat_writing {
	padding: 2px 0px 2px 5px;
	color: #555;
}
.chat_additional {
    text-align: center;
    margin: 10px;	
}

.chat_textarea_container, .publicchat_textarea_container {
    border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
    background-color: #fff;
}
.chat_textarea_container {
	bottom: 0;
	width: 100%;
	position: absolute;
}
.chat_textarea_quote {
	margin: 3px;
	display: none;
	max-height: 4em;
}
.chat_textarea_quote > img {
	max-height: 4em !important;
	margin-top: -20px;
}
.chat_textarea_quote_close {
	float: right;
    top: -2px;
    right: -15px;
    position: relative;
}

.chat_textarea, .publicchat-textarea {
	display: inline-block;
	border: 0px none;
	overflow-y: auto;
	overflow-x: hidden;
	color: #333;
	resize: none;
	width: 100%;
	min-height: 30px;
	max-height: 50vh;
	padding: 0px;
	padding-bottom: env(safe-area-inset-bottom);
	background-color: transparent;
	margin-top: 5px;
	margin-left: 2px;
	line-height: normal;
	scrollbar-width: none;
	-ms-overflow-style: none;
	font-size: 16px;
}
.element::-webkit-scrollbar {
	display: none; /* Hides scrollbar in Chrome/Safari */
}
.chat_send_button, .publicchat_send_button {
	float: right;
    padding-top: 3px;
    padding-bottom: 2px;
    padding-left: 7px;
    padding-right: 5px;
    margin-top: 2px;
    margin-right: 2px;
	border-radius: 12px;	
}
.mobilechat .chat_send_button {
	margin-right: 4px;
}
.chat_send_button > i, .publicchat_send_button > i {
	font-size: 15px !important;
	vertical-align: baseline;
}
.chat_inner.ui-resizable {
	position: static !important;
	
}

.chat_which {
    font-size: 80%;
}

.chat_which > .gender {
	margin-left: 3px;
	margin-right: 1px;
}
.chat_which_select {
    font-size: 80%;
    text-align: center;
    border-top: 1px solid #ddd;
    padding: 4px;
    border-bottom: 1px solid #ddd;
    margin: 10px 0px 10px -5px;
}

.chat_edit_textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #0084FF;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
}
.chat_edit_buttons {
    margin-top: 5px;
    text-align: right;
}
.chat_edited {
    font-size: 0.8em;
    color: #888;
    font-style: italic;
}
.chat_forwarded_indicator {
    font-size: 0.8em;
    color: #666;
    padding: 2px 0 4px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 4px;
}
.chat_forwarded_indicator i {
    vertical-align: middle;
    color: #888;
}

.chat-message {
	border: 1px solid #dcdee3;
	border: 1px solid rgba(0, 0, 0, .18);
	border-bottom-color: rgba(0, 0, 0, .29);
	color: #373e4d;
	min-height: 14px;		
	box-shadow: 0 1px 0 #dce0e6;
	padding-bottom: 5px;
	padding-top: 3px;
	text-shadow: rgba(255, 255, 255, .5) 0 1px 0;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-break: break-word;
	border-radius: 1rem;
	font-size: 90%;
	display: inline-block;
	max-width: 75%;
}


.chat-message-own {
	background-color: #dbedfe;
	background-image: linear-gradient(to top, #c7defe, #e7f1fe);
	margin-right: 6px;
	padding-left: 7px;
	padding-right: 5px;
	float: right;
	border-top-right-radius: 0;
}
.chat-message-own > .chat-message-quote {
	border-radius: 1rem 0 0 0;
}
.chat-message-other > .chat-message-quote,
.chat-message-public > .chat-message-quote {
	border-radius: 0 0.8rem 0 0;
	margin-right: -2px; 
}

.chat-message-other {
	margin-right: 6px;
	margin-left: 5px;
	padding-right: 6px;
	padding-left: 7px;
	background-color: #f6f7f8;
	background-image: -webkit-gradient(linear, center bottom, center top, from(#f2f2f2), to(#fff));
	background-image: -webkit-linear-gradient(bottom, #f2f2f2, #fff);
	border-top-left-radius: 0;
}
.chat-message-quote {
    text-align: left;
	background-color: rgba(0, 0, 0, 0.05);
	max-height: 7em;
	margin-left: -2px;
	margin-bottom: 3px;
}
.chat-message-quote > img {
	max-height: 5em !important;
}
.chat-message-quote > .accountLink > .account_link_icon {
	font-size: 1rem !important;
	margin-right: 1px;
}

.chat-message-content {
	width: 75%;
    max-width: none;
}

.chat-message-public-own {
	margin-right: 6px;
	margin-left: 45px;
	padding-right: 6px;
	padding-left: 5px;
	background-color: #dbedfe;
	background-image: -webkit-gradient(linear, center bottom, center top, from(#c7defe), to(#e7f1fe));
	background-image: -webkit-linear-gradient(bottom, #c7defe, #e7f1fe);
	border-top-left-radius: 0;
}
.chat-message-public {
	width: auto;
    display: inline-block;
    margin-left: 0px;
	margin-bottom: 5px;
	margin-top: 2px;
	max-width: none;
}
.chat_info {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    background-color: rgb(255, 255, 180);
    font-size: 90%;
    text-align: center;
    margin-left: -5px;
    border-top: 1px #ddd solid;
    border-bottom: 1px #ddd solid;	
}
.chat_info > button {
	font-size: 100%;
}
.chat_videoactions {
	text-align: center;
}
.chat_videoactions > button {
	margin: 0.5rem;
}
.chat_time_status_container {
	float: right;
	margin-left: 10px;
}
.chat_emojis {
	display: inline;
	margin-top: -10px;
}
.chat-message-container-own > .chat_emojis {
	float: right;
	margin-right: 1rem;
}
.chat-message-container-other > .chat_emojis {
	float: left;
	margin-left: 50px;
	min-height: 20px;
}
.chat-message-container-other > .profilephoto_thumb {
	margin-bottom: -15px;
}
.chat_emojis .emoji-icon {
	font-size: 80%;
    display: inline-block;
    padding: 3px;
	margin: 1px;
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    background-color: #f5f5f5;
	opacity: 0.99;
	border: 1px #ddd solid;
}

#publicchat {
	padding: 0px;
}
#publicchat > .buttonmargin {
	text-align: center;
	padding-bottom: 10px;
}
#publicchat_content .postActionsIcon {
	float: none;
}
#publicchat_content > div > div > .chat-message-container .postActionsIcon {
	opacity: 0;
}
#publicchat_content > div > div > .chat-message-container:hover .postActionsIcon {
	opacity: 1;
}
#publicchat .chat_emojis {
	float: left;
	margin-left: 60px;
	min-height: 20px;
	max-width: 75vh;
}
#publicchat-textarea {
	transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
	position: relative;
	background: transparent;
	z-index: 1;
}
.publicchat_textarea_container{
  position: relative;
}

/* the “background image” layer */
.publicchat_textarea_container::before{
	content:"";
	position:absolute;
	inset:0;
	background: var(--ta-bg-url) center/cover no-repeat;
	opacity: 0.1;
	pointer-events:none;
}

#context_menu_emojis {
	padding-right: 0;
	padding: 0;
    text-align: center;
}


.old_publicchat_tab {
	padding: 10px;
	border-right: 1px solid #ddd;
    border-left: none;
	flex-grow: 1;
}
#publicchat_tabs {
	top: 0;
}
.publicchat_tab_selected {
	border-bottom: 0px;
    background-color: #fef;
	text-decoration: underline;
    border-top: 1px solid #eee;
}
#publicchat_tabs_options {
	flex-grow: 0;
	order: 9999999999999;
}
#publicchat_tabs_switch {
	flex-grow: 0;
	order: 9999999999998;
}
.publicchat_tab > .icon_number {
	vertical-align: middle;
	margin-left: -15px;
	z-index: 10;
	margin-top: -15px;
	position: absolute;
}
#publicchat_content {
	background-color: #fef;
}
#publicchat_norooms {
	text-align: center;
	padding: 20px;
}
#publicchat_content > div > .chat-message-container > span > .account {
	margin-left: 10px;
}
table.chat-message-container {
	width: 100%;
	border-bottom: 1px solid #eee;
}
.publicchat_photo {
	width: 50px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	vertical-align: top;	
}
#publicchat_history_container {
	margin: 0.5rem auto;
	text-align: center;
}

.chat_time {
	font-size: 10px;
	color: #888;
}
.chat-message > i,
.chat-message-container > i {
    margin-left: 0px;
}
.chat-message > i.material-icons,
.chat-message-container > i.material-icons,
.chat_time_status_container > i.material-icons {
	font-size: 90%;
    vertical-align: middle;
    margin-left: 4px;
}
.chat-message-container-own > .postActionsIcon {
	margin-right: 6px;
}
.chat-message-container-other > .postActionsIcon {
	margin-left: 0px;
	float: none;
	vertical-align: top;
}
.chat-message-container > .postActionsIcon {
	opacity: 0;
	box-shadow: 0px 0px 6px #a66;
}
.chat-message-container:hover > .postActionsIcon {
	opacity: 1;
}
.chat-message-container {
	/* content-visibility: auto;	 */
}
.chat-message-container-other {
	min-height: 40px;
}

.chat_time_status_container > i.read,
.chatmsgicons {
	font-weight: bold;
	color: #22f;
}
.chat-message > .accountLink {
	margin-right: -5px;
}

.chat_online > .status_online {
	color: #8f0;
	text-shadow: 0 0 3px #000;
	margin-left: 5px;
	font-size: 1.5em;
    padding-bottom: 0px;
  	padding-top: 3px;
}

.chat_photo {
	max-width: 90%;
	margin: 5px auto;
	display: block;
    box-shadow: 3px 3px 5px #855;
	max-height: 40vh;
	max-height: calc(var(--vh, 1vh) * 40);
	object-fit: contain;
}
.mobilechat .chat_photo {
	max-height: 80vh;
	max-height: calc(var(--vh, 1vh) * 80);
}
.chat_newphoto {
	position: relative;
}
@media (max-width: 768px) {
	.chat_newphoto {
		max-width: 95vw;
	}
}
.chat_file {
	display: flex;
	align-items: center;
	padding: 10px;
	border-radius: 8px;
	margin: 5px 0;
	max-width: 300px;
}
.chat_file_icon {
	font-size: 40px;
	color: #666;
	margin-right: 10px;
	flex-shrink: 0;
}
.chat_file_info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.chat_file_name {
	font-weight: 500;
	word-break: break-word;
	overflow-wrap: break-word;
}
.chat_file_size {
	font-size: 12px;
	color: #888;
}
.chat_file_download {
	margin-left: 10px;
	flex-shrink: 0;
}
.chat_file_download:hover {
	color: #1565c0;
}
.chat-message-own .chat_file {
	background: #d4edfa;
}
.chat_pdf_preview {
	display: block;
	max-width: 200px;
	max-height: 280px;
	margin-bottom: 6px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,0.1);
}
#messages_settings_panel {
	margin-top: 1rem;
}

#chat_group_members_list {
	margin-top: 1rem;
}
#chat_group_members_list button {
	float: right;
}

.mobilechat {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: none;
	height: 100dvh !important;
}
.mobilechat > .chat_inner {
	width: 100%;
	height: 100%;
}
.mobilechat .chat_title  {
	position: absolute;
    top: 0;
    width: 100%;
	font-size: 110%;	
    border: none;
	padding-top: 3px;
	padding-bottom: 3px;
}
.mobilechat .chat_bar_icon {
	cursor: pointer;
}
.mobilechat .chat_close {
	margin-right: 10px;
}
.mobilechat .chat_messages {
	height: 100%;
}

.mobilechat2 .chat_title {
	position: fixed;
	z-index: 11001;
}
/*
.mobilechat2 .chat_messages {
	-webkit-overflow-scrolling: touch;
	height:calc(100% - 1px);
	touch-action: pan-y;
}
*/

.mobilechat2 .chat_textarea_container {
	position: fixed;
	z-index: 11002;
}
.mobilechat2 .chat_textarea {
	font-size: 16px;
}
.mobilechat2 .chat_history {
	margin-top: 150px;
}




/***** Chat history *****/
.chat_historylist {
	margin-bottom: 0;
	padding: 5px;
}
.chat_historylist > .accountLink > .account_link_icon {
	margin-right: 2px;
}
#messages_options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
#messages_options h2 {
	margin: 0;
}
#messages_options #chat_search {
	flex: 1;
	min-width: 100px;
}
#messages_options button {
	flex-shrink: 0;
}
.chat_search_container button {
	vertical-align: middle;
}
.chat_history_container {
	position: relative;
	margin-top: 1rem;
}
@media (max-width: 600px) {
	#chat_search {
		width: 50% !important;
	}
}
.chat_history_user {
	display: inline;
	vertical-align: top;
	margin-left: 15px;
	/* font-size: 16px; */
	line-height: 20px;
}
.chat_history_date {
	vertical-align: top;
	color: #88a;
	line-height: 20px;
	font-size: 85%;
	display: inline-block;
}
.chat_history_text {
	margin-top: 4px;
	overflow: hidden;
	display: block;
	word-break: break-all;
	margin-left: 55px;
	/* margin-bottom: 32px; */
}

.chat_history_buttons_container {
	width: 80%;
	text-align: right;
	float: right;
}

.chat_filter_tabs {
	top: 0;
	width: 100%;
	margin: 4px 0 8px 0;
}

@media (min-width: 801px) {
	.chat_history_buttons_container {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	}
	.chat_historylist > .dropdown_text_chat  {
		display: inline-block;
		width: calc(782px - 60px - 10px)
	}
}
@media (max-width: 800px) {
	.chat_historylist {
		padding-left: 10px;
		padding-right: 10px;
	}
	.dropdown_text_chat  {
		display: inline-block;
		width: calc(98vw - 60px - 10px - 10px - 5px - 5px);
	}
	#messages_content {
		padding: 0;
	}
	#messages_content > p {
		margin-left: 10px;
	}
	.chat_historylist  > .chat_history_buttons_container > .button_delete  {
		padding-left: 10px;
	  padding-right: 10px;
	  margin-right: 5px;
	  margin-left: 5px;
	}
}	
.dropdown_row_chathistory > .dropdown_text_chat  {
	display: inline-block;
	width: calc(100% - 60px);
}

.chat_history_continue {
	float: right;
	/*
		display: inline-block;
	position: absolute;
	right: 0px;
	bottom: 5px;
	*/
}

.chat_history_delete {
	float: right;
    margin-right: 10px;
}
.chat_history_notes {
	width: auto;
	margin-top: 3rem;
	padding: 2px;
}
#messages_loading_bar {
	height: 2px;
	width: 100%;
	visibility: hidden;
}


/***** emails *****/
.emailBody {
	background-color: #fffaff;
    font-size: 90%;	
}

/***** Members *****/
#members_options_age1, #members_options_age2, .age,
#members_options_height_male1, #members_options_height_male2, #members_options_height_female1, #members_options_height_female2 {
	width: 50px !important;
}

#members_options_location {
	max-width: 30%;
}
#members_options_location_distance, .location_distance {
	width: 50px !important;
}

.party_owner_smallProfile {
	display: inline-block;
	width: 25%;
	vertical-align: top;
}
.party_owner_smallProfile > .party_owner_infobox,
.party_owner_smallProfile > select,
.party_owner_smallProfile > button,
.party_owner_smallProfile > span
{
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}
.members_profile {
	display: inline-block;
	margin: 10px;
	box-shadow: 0px 0px 0px 1px #aed;
	background-color: #fff5ff;
	vertical-align: top;
	position: relative;
	width: 21%;
	margin: 2%;
}	
.party_owner_smallProfile > .members_profile {
	display: block !important;
    width: 96% !important;
	margin: 2%;
}
.party_owner_smallProfile > select {
	max-width: 90%;
}
.party_owner_smallProfile > .link {
	display: inline-block;
}

.members_photo {
	width: 100%;
	height: 180px;
	border-radius: 0px !important;
}
.member_info_container {
	display: inline-block;
	vertical-align: top;
	font-size: 85%;
	text-align: left;
	width: 100%;
}

.member_info_container > div,
.member_info_container > table {
	padding-left: 5px;
	margin-bottom: 8px;
}
.member_info_container td {
	width: 33%;
}


.member_info_container > table {
	width: 100%;
	text-align: center;
}
.member_info_container > table .material-icons {
	color: #c88;
}

.member_info_accounttype {
	border-bottom: 1px solid #ddd;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	text-shadow: -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff;
    letter-spacing: 1px;
}

.member_info_container > button {
	margin-top: 10px;
	right: 5px;
	position: absolute;
	bottom: 5px;
}

.members_account {
	position: absolute;
	left: 0px;
	width: 100%;
	top: 120px;
	height: 60px;
	line-height: 30px;
	text-align: center;
	font-size: 120%;
	background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.6) 100%);
	overflow: hidden;
}
.members_account .account,
.members_account .chat_which {
	color: #fff;
	text-shadow: -1px -1px 1px #444,-1px 1px 1px #444,1px -1px 1px #444,1px 1px 1px #444;
	letter-spacing: 1.2px;
	font-weight: normal;
}

.member_adminValidation {
	display: inline;
    max-width: 35%;
    float: right;
}
.member_adminValidation > img {
	width: 100%;
}

.members_accounttype {
	overflow: hidden;
	display: inline-block;
	width: 90px;
	padding-left: 1px;
}

.members_friend {
	box-shadow: 0px 0px 0px 1px #4f4, 0px 0px 0px 2px #aca,0px 0px 0px 4px #8f8;
}

.members_distance {
	position: absolute;
    top: 0.5rem;
	text-align: left;
    left: 0.5rem;
}
.members_distance > .distance {
	margin-left: 0;
    margin-right: 1rem;
}

.members_distance > .profile_icon { 
    float: right;
    top: 3px;
    position: relative;
    text-shadow: 1px 1px 2px #333, -1px -1px 6px #888;
}

.members_location {
	font-weight: bolder;
	color: #778;
}

.members_age1, .members_age2 {
	width: 35px;
	display: inline-block;
	vertical-align: top;
}

.members_looking_highlight {
	font-weight: bold;
	padding-bottom: 4px;
    display: inline-block;
}
#members_options td {
	padding-right: 0.5rem;
}

#members_party_select {
	max-width: 85vw;
}

/***** smallProfile2 *****/
.smallProfile2 {
	max-width: 179px;
    margin: 10px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	position: relative;
	padding-top: 200px; /* equal to the image height */
	display: inline-block;
}

.smallProfile2  .card-image {
	position: absolute;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	width: 150px; /* smaller than the card width */
	height: 150px;
	overflow: hidden;
	border-radius: 50%;
	border: 5px solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	z-index: 2; /* higher than the flag */
}
  
.smallProfile2_photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.smallProfile2 .orientation {
	position: absolute;
	top: 0;
	width: 150px;
	height: 30px;
}

.smallProfile2 .orientation1 {
	left: -2rem;
	transform: rotate(-45deg);
}
 
.smallProfile2 .orientation2 {
	right: -2rem;
	transform: rotate(45deg);
}
 
  
  .smallProfile2 .orientation::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
  }
  
  
.smallProfile2  .card-content {
	width: 100%;
	table-layout: fixed;
}

.card-content > tbody > tr {
	display: flex;
}
 

.card-content > tbody > tr > td {
	padding-bottom: 0.3rem;
	vertical-align: top;
}
  
.smallProfile2  .ages {
	display: flex;
	justify-content: space-between;
	margin-top: -3.5rem;
    padding: 0.7rem;
    font-weight: bold;
	min-height: 4em;
}
.card-content-container {
	z-index: 2;
	padding: 0.7rem;
	margin-top: -2.3rem;
	text-align: left;
	font-size: 0.8rem;
}

.smallProfile2 .inactive {
	opacity: 0.2;
}

.smallProfile2_account {
    font-size: 1.3rem !important;
	padding-bottom: 1rem !important;
	white-space: nowrap;
	overflow-x: hidden;
	display: inline-block;
	letter-spacing: 0.3px !important;
}
.smallProfile2_distance,
.smallProfile2_looking {
    padding-bottom: 0 !important;
}
.smallProfile2_online,
.smallProfile2_distance {
    white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 0 1 auto;
}
.smallProfile2_looking > div {
	overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.5;
    height: 72px;
    width: 159px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
	line-clamp: 4;
}
.smallProfile2_looking > div > .paragraph {
	height: 18px;
}

@media (min-width: 600px) {
	.smallProfile2_account {
		max-width: 159px;
	}
	.smallProfile2_account > .accountLink {
	margin-bottom: 5px;
	}
}

.smallProfile2 > .card-content > p {
	margin: 0;
	color: #666;
	margin-bottom: 4px;
}
.smallProfile2_stats {
	text-align: right;
	flex: 1 1 auto;
	white-space: nowrap;
}
  
.smallProfile2  .material-icons {
	margin-right: 0px;
}

.smallProfile2_adminValidation {
	display: inline;
    max-width: 40%;
    float: right;
    margin-left: -35%;
    margin-right: -10px;
    margin-top: -50px;
    margin-bottom: -50px;
    opacity: 0.2;
}
.smallProfile2_adminValidation > img {
	width: 100%;

}
@media (max-width: 600px) {
	.smallProfile2 {
		max-width: unset;
		display: block;
	}
	.smallProfile2  .card-image {
		width: 60vw;
		height: 60vw;
		border-width: 0.5rem;
	}
	@media (orientation: landscape) {
		.smallProfile2  .card-image {
			width: 60vh;
			height: 60vh;
		}
	}
	.smallProfile2_looking {
		height: 3em;
	}
	.smallProfile2_looking > div {
		width: unset;
		font-size: 16px;
	}
	.smallProfile2  .ages {
		margin-top: -0.5rem;
		font-size: 1.2rem;
	}
	.smallProfile2_adminValidation {
		margin-top: -100px;
	}
	.smallProfile2 .card-content-container  {
		font-size: unset;
		margin-top: -1rem;
  }
	.party_owner_smallProfile {
		width: 100%;
		margin: 0%;
		margin-top: 1rem;
	}
}
@media (min-width: 600px) and (max-width: 1000px) {
	.party_owner_smallProfile {
		width: 33%;
	}
}

.smallProfile2 .gender2 {
	margin-left: -5px !important;
	margin-right: -5px !important;
}
  
.match > .card-image {
	border-color: #ee6;
}
.friend > .card-image {
	border-color: #8e8;
}

.likeprofile > .card-image {
	border-color: #ffd;
}
.blocked > .card-image {
	border-color: #000;
}

/***** Groups *****/
#groups_content > table {
	width: 100%;
}
.groups_title {
	font-size: 120%;
	color: #667;
	background-color: #fcf;
	text-align: center;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
}
.groups_title > td {
	padding: 5px;	
}
#groups_content > table > tbody > tr > td{
	padding: 5px;		
	border-bottom: 1px dotted #fdf;
	vertical-align: top;
}
.groups_line {
	border-bottom: 1px dotted #fdf;
}
@media (min-width: 600px) {
	.groups_line_name {
		min-width: 270px;
	}		
}
.groups_center {
	text-align: center;
}

#group_info {
	position: relative;
	min-height: 160px;
}
#group_info > h2 {
	max-width: 50%;
}
#group_info > p {
	max-width: 50%;
}
.group_info_details {
	position: absolute;
	top: 20px;
	width: 45%;
	right: 0px;

}
.details_box {
	background-color: #eef;
	padding: 10px;
	border: 1px #ddd solid;
}
.group_info_details > div > button {
	margin-top: 20px;
}
#addgroup_description {
	width: 90%;
	height: 5rem;
}
#say_group_photo_class_container {
	margin-bottom: 0.5rem;
}
#group_member_list {
	max-height: 50vh;
	max-height: calc(var(--vh, 1vh) * 50);
	overflow-y: scroll;
	
}

#delete_group {
	margin-left: 40px;
}
.groups_line {
	display: none !important;
}
.groups_line > div {
	max-height: 2rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.group_photo {
	margin-bottom: 10px;
	margin-top: -20px;
	width: 100%;
	border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

/***** Fullscreen *****/
.fullscreenbg {
    width: 100%;
    height: 100%;
	background-color: rgba(20,20,40,0.9);
	position: fixed;
	z-index: 13000;
	text-align: center;
	top: 0;
	vertical-align: middle;
}
.photo_fullscreen_outer {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	top: 0;
}
.photo_fullscreen_container {
	/* max-width: 100%; */
	/* max-height: 100%; */
	/* display: inline-block; */
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}
#photo_fullscreen_img {
	box-shadow: 1px 1px 10px #333;
	position: absolute;
	opacity: 1;
	filter: grayscale(0%);
	/* width/height set by adjustFullscreenPhoto() JS */
}
#photo_fullscreen_text {
	position: absolute;
	bottom: 0px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	padding: 10px;
	line-height: 32px;
	width:	100%;
    overflow: hidden;
}
.photo_fullscreen_text_content {
    overflow: hidden;
	max-height: 32px;
}
#photo_fullscreen_text > button {
	float: right;
}

.photo_fullscreen_close {
	position: fixed;
	right: 10px;
	top: 10px;
	height: 48px;
	width: 48px;
	cursor: pointer;
	z-index: 13000;
}

@media (max-width: 768px) {
	#photo_fullscreen_del_reason {
		margin-top: 1rem;
	}
}
@media (min-width: 600px) {
	#photo_fullscreen_del_reason {
		margin-right: 1rem;
		float: right;
	}
}

#photo2_container {
	position: relative;
	display: inline-block;
	width: 90%;
	margin: 0 auto;
	top: 5%;
}

#photo2_img {
	box-shadow: 1px 1px 10px #333;
}
#photo2_comments_container {
	width: 300px;
	margin-left: 20px;
	float: right;
}


/***** photo *****/
#photo_edit {
	margin-bottom: 20px;
}
#photo, #match {
	text-align: center;
}
.photo_img_container {
	position:relative;
	min-height: 160px;
}
#photo_img {
	margin: 0 auto;
}
@media (max-width: 759px) {
	.photo_img_container {
	margin-bottom: -20px;
		top: -20px;	
	}
	#photo_img {
		width: 100%;
		height: auto;
	}
}
@media (min-width: 759px) {
	#photo_img {
		position: relative;
		cursor: pointer;
		filter: grayscale(0%);
		width: auto;
		max-width: 770px;
		min-height: 200px;
		max-height: 72vh;
		top: 0px !important;
		border-top-right-radius: 0px !important;
		border-top-left-radius: 0px !important;	
		box-shadow: 0px 0px 0px 9px #f8f8f8,0px 0px 0px 10px #DDDDdD;
	}
}
.photo_img_container > i {
	position: absolute;
    top: 40%;
	top: 32vh;
    color: #fffaea;
    font-size: 600%;
	cursor: pointer;
	z-index: 1;	
    text-shadow: 1px 1px 3px #555, -1px -1px 3px #555;
}
@media (orientation: portrait) {
	.photo_img_container > i {
		top: 8vh;
	}
}
.photo_img_container > .photo_prev {
    left: 0px;	
}
.photo_img_container > .photo_next {
    right: 0px;	
}

#photo_img.expired {
	filter: blur(5px) !important;
}

#photo_waiting {
	text-align: center;
	display: none;
	position: absolute;
	top: 0px;
	z-index: 1;
	width: 100%;	
}


#photo_new_comment_photo {
	display: inline-block;
}
#photo_text {
	margin: 1rem;
	/* margin-top: 1.5rem; */
	text-align: left;
	word-break: break-word;
}
#photo_likes {
	margin: 1rem;
    text-align: left;
}
.liked {
	color: #fe0;
	text-shadow: 2px 2px 5px #f88, 2px -2px 5px #f88, -2px 2px 5px #f88, -2px -2px 5px #f88, 1px 1px 1px #000;
}

/***** Match *****/
.match_img {
	height: 600px;
	height: 45vh;
	height: calc(var(--vh, 1vh) * 45);
	max-width: 85%;
	object-position: center;
	object-fit: cover;
}
.match_img_detail {
	margin: 20px;
}
#match_img {
	position: relative;
	z-index: 1;
	opacity: 0;
}


#match_container {
	position: relative;
}
#match_img_watermark2 {
	bottom: 100px;
}
.match_extra {
	position: absolute;
	z-index: 10;
	box-shadow: 0px 0px 0px 2px #f8f8f8, 0px 0px 0px 3px #dddddd;
	top: -10px;
	margin: 0;
	width: 200px;
    height: 200px;
	background-color: #fff;
}
#match_extra1 {
	left: 5px;
}
#match_extra2 {
	right: 5px;
}
.match_extra_personality_container {
	top: 200px;
    width: 200px;
    text-align: center;
    position: absolute;
    z-index: 10;
    font-size: 0.8rem;
}
#match_extra_personality_container1 {
	left: 5px;
}
#match_extra_personality_container2 {
	right: 5px;
}
.match_extra_personality {
	margin-bottom: 10px;
    background-color: #fffff8;
	padding: 2px;
	display: inline-block;
    box-shadow: 0px 0px 0px 2px #ffffe8, 0px 0px 0px 3px #eee;
	word-break: break-word;
}
@media (max-width: 600px) {
	#match_extra_personality_container1 {
		text-align: left;
	}
	#match_extra_personality_container2 {
		text-align: right;
	}
	.match_extra {
		width: 30vw;
	    height: 30vw;
	}
	.match_extra_personality_container {
		top: 30vw;
		width: 45vw;
	}
}

.match_button {
	color: #ffe;
    text-align: center;
}
#match_no_button, #match_yes_button {
    height: 135px;
    width: 135px;
    border-radius: 75px;
    border-width: 5px;
}
@media (max-width: 600px) {
	#match_no_button, #match_yes_button {
		height: 30vw !important;
		width: 30vw !important;	
	}
	.match_img {
		max-width: 85vw;
	}

	#match_details_button {
		height: 20vw !important;
		width: 20vw !important;	
	}
	#match_no_button > i, #match_yes_button > i {
		font-size: 75px !important;
		font-size: 18vw !important;
	}
	#match_details_button > i {
		font-size: 40px !important;
		font-size: 10vw !important;
	}

	#match_text {
		line-height: 2rem;
	}
	#match_newmatch {
		font-size: 100%;
		padding: 5px;
		margin: 20px;
		margin-top: 0px;
		box-shadow: 0px 0px 0px 4px #f8f8a8,0px 0px 0px 5px #DDDDdD;
	}
	#match_text > div {
		padding: 12px;
	}
}
.chat_match_button {
    border-radius: 40px;
    border-width: 2px;
    padding: 15px !important;
    margin: 15px;
}
#match_details_button {
    height: 90px;
    width: 90px;
    border-radius: 50px;
    border-width: 3px;
}
@media (min-width: 601px) {
	#match_no_button > i, 
	#match_yes_button > i {
	font-size: 4rem !important;
	}
	#match_details_button > i {
		font-size: 3rem;
	}
}
#match_details_button > i {
    font-style: normal;
	font-family: 'Dancing Script', cursive;
}

.match_no_button {
	background-color: #aaa;
}
.match_button:hover {
	color: rgb(255,255,255);
}
.match_no_button:hover {
	box-shadow: 0px 0px 40px #888; 
	background-color: #bbb;
}
.match_yes_button:hover {
	box-shadow: 0px 0px 40px #fa0;
	background-color: #f62;
}
#match_details_button {
	background-color: #88f;
    margin: 10px;
}
#match_details_button:hover {
	box-shadow: 0px 0px 20px #88f;
	background-color: #26f;
}

#match_text {
    font-size: 1.3rem;
    border: 1px solid #DDDDdD;
}
#match_text {
	margin-bottom: -2rem;
}
#match_text > div {
	padding: 20px;
}
#match_text .distance {
	font-size: 1.3rem;
}
#match_text .dot {
    margin: 1rem;
}

.match_preview {
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.95rem;
    border: 1px solid #DDDDdD;
    border-top: none;
    background: #fafafa;
    margin-top: 0.5rem;
}
.match_preview_desc {
    color: #444;
    margin-bottom: 0.3rem;
}
.match_preview_looking {
    color: #666;
    font-size: 0.85rem;
}

#match_img_preload {
	width: 1px;
	height: 1px;
	opacity: 0.01;
}
#match_newmatch {
    box-shadow: 0px 0px 0px 9px #f8f8a8,0px 0px 0px 10px #DDDDdD;
    background-color: #f73;
    color: #fff;
    margin: 30px;
    margin-top: 0px;
    min-height: 40px;
    vertical-align: middle;
    padding: 10px;
    line-height: 40px;
    font-size: 150%;
    text-align: left;
    padding-left: 10px;
}
#match_newmatch > span > .account {
	margin-left: 20px;
	margin-right: -5px;
}
#match_newmatch > i {
	display:none;
}
#match_details > .sidemargins {
	text-align: left;
}
#match > p {
	text-align: left;
}
#match_tips_text {
	display: block;
    padding: 10px;
    margin: 0 auto;
    width: 90%;
    font-size: 0.9rem;
}
.match_fade {
	transition-property: opacity;
	transition-timing-function: ease-out;
	transition-duration: 0.25s;
}

/***** Feedback *****/
#feedback_message {
	width: 99%;
	height: 200px;
	height: 25vh;
	max-height: calc(var(--vh, 1vh) * 25);
}


/***** invitations *****/
#invited {
    max-height: 50vh;
	max-height: calc(var(--vh, 1vh) * 50);
    overflow-y: scroll;
	margin: 20px;
}

.invitation {
	border: 3px dashed #888;
	background: #ffa;
	padding: 10px;
	margin: 30px;
	font-size: 120%;
	text-align: center;
}
.invitation_title {
	font-size: 40px;
	letter-spacing: 1px;
	font-family: 'Dancing Script', cursive;
}
.invitation_code {
	font-weight: bold;
}

#invite_banner_html {
    height: 50px;
    width: 500px;	
}
#invite_language, #invite_anon_language {
	width: 150px;
}

/* Share icons */
.share_icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	padding: 8px;
	margin: 0 5px;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.2s, opacity 0.2s;
	box-sizing: border-box;
}
.share_icon:hover {
	transform: scale(1.1);
	opacity: 0.85;
}
.share_icon svg {
	width: 100%;
	height: 100%;
	fill: white;
}
.share_whatsapp { background-color: #25D366; }
.share_telegram { background-color: #0088cc; }
.share_facebook { background-color: #1877F2; }
.share_email { background-color: #666666; }


/***** Parties *****/

.parties_tab_years {
    text-align: center;
    margin-bottom: 20px;
    font-size: 120%;
}


.parties_explanation {
	margin-top: 4px;
	margin-bottom: 4px;
}

.parties_party_cover {
	width: 130px;
	height: 49px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	margin-right: 10px;
	cursor: pointer;
}

#parties_content .parties_party_cover {
	float: left;
	width: 270px;
	height: 100px;
	background-color: aliceblue;
}
#parties_content .parties_party_info {
    /* display: table-cell; */
    vertical-align: top;
    padding-left: 10px;
	float: none;
    overflow: hidden;
}

#parties_content .parties_party_cover_placeholder {
	display: table-cell;
	width: 270px;
	height: 1rem;
	float: left;
	margin-right: 10px;
}
#parties_party_participants {
	float: right;
	margin-left: 1rem;
	margin-bottom: 1rem;
	text-align: right;
}
@media (max-width: 600px) {
	.parties_party_cover {
		width: 100% !important;
		height: 150px !important;
		height: 34vw !important;
		margin-right: 0px;
		display: block !important;
		float: none !important;
	}
	#notifications_content .parties_party_cover {
		margin-bottom: 0.5rem;
	}
	#parties_content .parties_party_info {
		display: block;
		padding-left: 0px;
	}
	.parties_party_header {
		margin-top: 0.5rem;
	}
}
.dropdown_row > .parties_party_cover {
	float: left;
}

#editparty_locationmap {
	height: 400px;
	height: 50vh;
	height: calc(var(--vh, 1vh) * 50);
	width: 100%;
	margin-top: 20px;
}

#editparty_location_name, #editparty_name, .editparty_description, .editparty_description_public {
	width: 95%;
}

.editparty_description, .editparty_description_public {
	height: 150px;
	height: 25vh;
	height: calc(var(--vh, 1vh) * 25);
}

.editparty_descriptionimprove > .basictable {
	width: 95%;
	padding-right: 0px;
	padding-left: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 0;
	margin-top: 10px;
}
#editparty_plan {
	height: 5ch;
	width: 95%;
}
#editparty_starthour, #editparty_endhour {
  width: 80px;
}
 
#editparty_new_photo_file {
  position: relative;
  left: -105px;
  height: 34px;
  opacity: 0;
  top: -5px;
	z-index: 100;
	cursor: pointer;
}

#editparty_photo {
	margin-bottom: 10px;
	max-height: unset;
}

#editparty_location_privacy {
	width: 300px !important;
}

#editparty_max_count, #editparty_fee {
	width: 50px;
}
#editparty_flyer_photo {
	width: 300px;
}
.editparty_ticket_description {
    width: calc(100% - 10px) !important;
	margin-top: 5px;
}

#party_info > .contentCalendar_highlighted {
    z-index: 1;
    position: relative;	
    top: -15px;
	right: -1.5rem;
	margin-right: 15px;
	text-transform: uppercase;
}
.contentCalendar_row_party_cover > .contentCalendar_highlighted.silver {
	padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
@media (min-width: 600px) {
	#party_info > .contentCalendar_highlighted {
		padding: 0.7rem;
		padding-left: 3rem;
		padding-right: 3rem;
		font-size: 1.3rem;
	}
	#party_info > .contentCalendar_highlighted.silver {
		padding: 0.4rem;
		padding-left: 1.8rem;
		padding-right: 1.8rem;
		font-size: 0.9rem;
	}
	.party_photo {
		min-height: 35vh;
		min-height: calc(var(--vh, 1vh) * 35);
	}
}
.party_photo {
	max-height: 74vh;
	max-height: calc(var(--vh, 1vh) * 74);
	min-height: 20vh;
	min-height: calc(var(--vh, 1vh) * 20);
	width: 100%;
	position: relative;
	top: -20px;
	object-position: center;
	object-fit: cover;
}
#party_info > .party_photo {
	border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

#party_info > h2 {
	margin-bottom: 0;
	padding-left: 20px;

}

#party_publicchat_unread,
#party_publicchat_staff_unread {
	vertical-align: middle;
	z-index: 10;
	margin-top: -5px;
	position: absolute;
	background: rgb(255, 155, 90)
}
#party_publicchat_staff > .staff_icon {
	background-color: unset;
}

.party_date {
	padding-left: 20px;
	margin-top: 5px;
    color: #555;
}
@media (max-width: 768px) {
	#party_invitation {
        width: 100%;
        margin-bottom: 1rem;
        font-size: 1.2rem;
	}
	.party_invitation_button {
		margin-left: 0px !important;
		margin-right: 1rem;
	}
}
#party_details_plan > .values_party {
	display: flex;
  	width: calc(100% - 16em);
}
#party_details_plan > .values_party > .ellipsis {
	overflow: hidden;
}
#party_details_description {
	word-break: break-word;
	min-height: 20vh;
}
#club_description {
  width: 460px;
	word-break: break-word;
}

#party_details_location {
	width: 100%;
    margin-bottom: 10px;
	position: relative;
}
#party_feedback {
	width: 100%;
	box-sizing: border-box;
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    height: 3rem;
}
#party_feedback_content {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#club_map {
	float: right;
	width: 310px;
	position: relative;
}
#party_details_map_who {
	text-align: center;
	top: 4rem;
    position: absolute;
    color: #000;
    z-index: 10;
    opacity: 0.5;
    font-weight: normal;
	width: 100%;
	text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff;
}
#party_details_map_markerLayer img {
	border-radius: 50%;
}

#party_details_map {
	width: 100%;
	height: 60vh;
	height: calc(var(--vh, 1vh) * 60);
}

.party_map_venue_marker {
	font-size: 32px;
	color: #f55;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.party_map_member_marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}
.party_map_member_marker img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.party_map_member_label {
	color: #fff;
	font-size: 12px;
	text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
	margin-top: 2px;
	white-space: nowrap;
}

.party_organizer_photo {
	float: right;
    width: 190px;
    border-radius: 0 0 0 100%;
	margin-right: -10px;
}
.party_organizer_photo.mobile {
	width: 50px;
	width: 28vw;
}

#say_link_container_party, #say_link_container_group {
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
}

#say_party_photo_class_container {
	margin-bottom: 0.5rem;
}

#party_invite_members {
	margin-right: 5px;
}

#party_owner_info {
	margin-top: 20px;
	max-height: 20vh;
	overflow-y: scroll;
}
#party_owner_info li, #editparty_intro li{
	margin-bottom: 5px;
}

#party_skill_info {
	margin: 20px;
	font-size: 110%;
}

#party_members_options > .label_value_pair > .values > div {
	white-space: nowrap;
}

#party_members_print > button,
#party_members_print > a {
	margin-left: 0.5rem;
}
@media (max-width: 768px) {
	#party_members_search {
		margin-top: 10px;
		font-size: 1.5rem;
	}
}
@media (min-width: 768px) {
	#party_members_search {
		width: 5rem;
		float: right;
	}
}
#party_members_content {
	margin-bottom: 10px;
}
#party_members_content > span > select {
	display: block;
	margin-left: 2%;
}
.party_member_listmode {
	text-align: right;
	margin-bottom: 1rem;
}
.party_member_listmode > span {
	font-size: 1.3rem;
	color: #444;
	padding: 0.3rem;
}
.party_member_listmode > span.selected {
	background-color: #ccf;
	font-weight: bolder;
}
.party_member_listitem {
    box-shadow: 0px 0px 0px 1px #aed;
    background-color: #fff5ff;
	margin-bottom: 0.5rem;
}
.party_member_listitem > .profilephoto_thumb {
	margin: 0.5rem;
}
.party_member_listitem > span {
    margin-top: 0.5rem;
	display: inline-block;
    line-height: 2;
}

.party_member_listitem > button,
.party_member_listitem > select,
.party_member_listitem > .link,
.party_member_accountsitem > button,
.party_member_accountsitem > select,
.party_member_accountsitem > .link {
	float: right;
	margin-right: 0.5rem;
	margin-top: 0.5rem;	
	margin-bottom: 0.5rem;
}
.party_member_listitem > select,
.party_member_listitem > .link,
.party_member_accountsitem > select,
.party_member_accountsitem > .link {
    padding: 4px;
    line-height: 1;
}
@media (max-width: 768px) {
	.party_member_listitem > select,
	.party_member_listitem > .link {
		margin: 1rem;
		float: none;
		display: block;
	}
}
@media (min-width: 601px) {
	.party_member_listitem > select {
		width: 150px;
	}
}
.party_member_status_ok {
	margin-left: 1rem; font-size: 0.8rem; text-align: center;
}
.party_member_status_ok i {
	font-size: 2rem;
}

#party_participants_breakdown td:nth-child(2),
#party_participants_breakdown td:nth-child(3) {
	text-align: right;
}

#public_party, #public_event {
	margin: 0 auto;
}

#public_party_info, #public_event_info {
	text-align: left;
	  box-shadow: 1px 1px 29px #fff;
}
#delete_party {
	margin-left: 80px;
}

#party_oragnizer_mc {
	display: inline-block;
}
@media (max-width: 768px) {
	#party_oragnizer_mc {
		text-align: center;
		margin: 4px;
		display: block;
		margin-left: -10rem;
	}
}

.party_stats_margins {
	margin-left: 2%;
    margin-right: 2%;
}
.party_stats {
    text-align: center;
	margin-bottom: 20px;
}
.party_stats1 {
	text-shadow: -1px -1px 2px #fff, -1px 1px 2px #fff, 1px -1px 2px #fff, 1px 1px 2px #fff;
	padding-bottom: 10px !important;
	padding-top: 10px !important;
	text-wrap: nowrap;
}
.party_stats > tbody > tr > td {
	border: 1px solid #bbb;
}
.party_stats_amount {
	font-size: 83%;
}
.party_stats_canvas_container {
	position: relative;
	height: 60vh;
}

.party_owner_infobox {
	margin-top: 1px;
    font-size: 0.8rem;
	padding: 2px 10px 2px 5px;
}
.dropdown_text > .party_owner_infobox {
	margin-top: 0.5rem;
}
.party_owner_noshow {
    color: #222;
    background-color: #ffa;
    border: 1px solid #ddd;
}
.party_owner_noshow > i {
	color: #f00;
}
.party_owner_noshow_confident {
	background-color: #c00;
	color: #fff;
	border: 1px solid #000;
	font-size: 1.15rem;
	padding: 5px 10px 5px 10px;
}
.party_owner_noshow_confident > i {
	color: #ff0;
	font-size: 1.3rem;
	margin-right: 0.5rem;
	
}
.party_owner_recommend {
	color: #222;
    background-color: #afa;
    border: 1px solid #ddd;
}
.party_owner_not_recommended {
	color: #222;
    background-color: #ffa;
    border: 1px solid #ddd;
}
.party_owner_recommend > i {
	color: #fff;
}
.party_owner_history {
    color: #222;
    background: #eef;
    border: 1px solid #ddd;
	max-height: 40vh;
	max-height: calc(var(--vh, 1vh) * 40);
	overflow-y: auto;	
}
.party_owner_history > div {
	padding-bottom: 3px;
	padding-top: 3px;
	border-bottom: 1px dotted #dde;
}
.party_owner_history > .userprofile_calendar_row > .userprofile_calendar_row_date {
	width: 8rem;
}
.party_owner_notes {
	max-height: 1.5rem;
	overflow-y: hidden;
}

.parties_party_header > .party_name,
.calendar_event_party_name {
	font-size: 1.15rem;
    line-height: 1.4rem;
}

.ticketslist td {
	padding-right: 0.5rem;
	padding-bottom: 0.5rem;
	word-break: auto-phrase;
}
.ticketslist td:nth-child(2) {
	text-align: right;
}

@media (min-width: 768px) {
	.ticketslist{
		min-width: 300px;
	}
	.ticketslist td {
		white-space: nowrap;
	}
	
}

.ticketslist input[type=checkbox] {
	transform: scale(1.5);
}

.tickets_input_container{
	display: flex;
	align-items: center;
}

.tickets_input_container button {
	padding-top: 0.1rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    padding-bottom: 0;
    line-height: 1;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.tickets_input_container .material-symbols-outlined {
	font-size: 1.5rem;
}

/* Styling the input field */
.tickets_input_container input {
	text-align: center;
	font-size: 1.3em;
}
@media (min-width: 601px) {
	.tickets_input_container input {
		width: 60px !important;
	}
	.ticketslist select {
		width: 200px;
	}	
}
@media (max-width: 600px) {
	.tickets_input_container input {
		width: 30px !important;
	}
	.ticketslist select {
		width: 120px;
	}	
	.label_party_tickets {
		float: none;
	}
	.ticketslist td:nth-child(3) {
		text-align: center;
	}
}

/* Removing the default number input spinners */
.tickets_input_container input::-webkit-outer-spin-button,
.tickets_input_container input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tickets_input_container input[type=number] {
	-moz-appearance: textfield;
	appearance: textfield;
}
.tickets_description {
    margin-top: -0.5rem;
    margin-left: 0.4rem;
    font-size: 90%;
    color: #777;
	white-space: normal;
}
.tickets_total_price_row > td {
	padding-top: 0.5rem;
	border-top: 1px solid #eee;
}

.party_program_date {
    text-align: center;
    padding: 0.5rem !important;
    color: #444;
	text-transform: uppercase;
    letter-spacing: 1px;
}
.party_program_subparty td {
	vertical-align: top;
}
.party_program_hour {
	white-space: nowrap;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
.ticket_icon_spin {
	animation: spin 5s linear infinite;
}
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.party_ticket {
	border: 1px solid;
	margin-left: 10px;
	margin-right: 10px;
    margin-bottom: 0;
    font-size: 120%;
	margin-top: 1rem;	
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
	padding: 0 !important;
	background-color: #F5F5DC;
	border-image: linear-gradient(45deg, #FFD58F, #fF6F00) 1;
	background: linear-gradient(230deg, #F5F5DC, #EDEAE0, #F8F8F2, #F5F5DC);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}
.party_ticket .ticket_icon {
	font-size: 350%;
    color: #db4;
}
@keyframes breathe {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}
.party_ticket .account {
	animation: breathe 1s linear infinite;
    font-size: 2.3rem;
    letter-spacing: 2px;
    padding-bottom: 1rem !important;
	display: inline-block;
}
.party_ticket .gender2 {
    font-size: 2rem;
}	

@media (max-width: 600px) {
	.party_ticket .ticket_icon {
		font-size: 3rem;
	}
}
.party_ticket .ticket_icon,
.party_checkin > .material-icons {

    vertical-align: middle;
    text-shadow: 2px 2px 3px #fff;
    margin-right: 10px;
}
.party_checkin > .material-icons {
	font-size: 250%;
}
.party_checkin {
	margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0;
	margin-top: 1rem;

}
.party_checkin_center {
	display: flex;
  	justify-content: center; /* horizontal centering */
  	align-items: center; 
}
.party_checkin_title {
    font-size: 120%;
	margin-bottom: 1rem;
}
.party_checkin > ul {
	margin-left: 1rem;
}
.party_ticket td {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.party_ticket_title {
	text-align: left;
	font-weight: 600;
	font-size: 2.2rem;
	text-transform: uppercase;
	font-family: 'Montserrat', 'Open Sans';
	color: #002B5B;
    letter-spacing: 1px;
	padding: 0.5rem 0px 0px 0px !important;

}
.party_ticket_name {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.party_ticket_price,
.party_ticket_participants {
	font-size: 1.2rem;
}
.party_checkinBonusType {
	margin-top: 0.5rem;
}
.participants_maybe {
	color: #aaa;
	display: block;
}

@media (max-width: 1000px) {
	#party_status_container > div > button {
		margin-bottom: 0.5rem;
	}
}

#party_invite_recommend {
	padding: 0;
}

#party_invite_recommend_content {
	max-height: 70vh;
	overflow: hidden;
}
#party_invite_recommend_title {
	display: flex !important;
	flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #f7f9fb 0%, #e9eef3 100%);
    color: #004c8c;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    margin-bottom: 0.8rem;
}

#party_invite_recommend_title > span,
.rotkoBonus {
    background: rgba(255, 255, 255, 0.75);
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: bold;
}


@media (min-width: 600px) {
	#party_invite_recommend_content {
		display: flex;
		flex-wrap: wrap;
		max-height: 200px;
	}

	#party_invite_recommend_content > div {
		flex: 1 1 32%;
	}
}
#party_chart_debug td {
 	padding-right: 15px;
}

/***** calendar *****/
#calendar_new_button {
    float: right;
    margin-right: 10px;	
}
#calendar_options_location_distance {
	width: 50px;
}
#calendar_options_location,
#calendar_options_search {
	max-width: 30%;
}
#calendar_options_search_hashtag_select {
	max-width: 15ch;
}
#calendar_options .label {
	cursor: pointer;
	color: #a0a;
	text-decoration: underline;
	user-select: none;
}
#calendar_options .label:hover {
	color: #c0c;
}
#calendar_locationmap {
	height: 400px;
	margin-top: 20px;
	width: 98%;
}
#calendar_text {
	width: 90%;
    min-height: 12em;
    field-sizing: content;
}

#calendar_content > table {
	width: 100%;
}

#calendar_content > .sidemargins > button {
	float: right;
	margin-bottom: 15px;
}
.calendar_month {
	font-size: 1.3rem;
	padding: 5px;
	color: #667;
	background-color: #fbf;
	text-align: center;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
	margin-top: -5px;
}
.calendar_row_date {
	color: #888;
	white-space: nowrap;
    vertical-align: top;
    padding: 5px;
}
#calendar_content .calendar_row_date {
	background-color: #fdf;
	text-align: center;
	font-size: 1.1rem;
}

.calendar_event {
    border: 1px solid #ddd;
    background-color: #fff5ff;
    margin-top: 5px;
    margin-right: 10px;
	margin-left: 10px;
}

.calendar_event > .profilephoto_thumb {
	margin-right: 10px;
	margin-bottom: 5px;
    margin-left: 2px;
    margin-top: 2px;
}

.calendar_event_party_container .calendar_event_location_container {
	margin-top: 10px;
}
.calendar_event_location {
	font-weight: bolder;
	color: #667;
}

.calendar_event_content {
	padding: 3px;
}

.calendar_text {
	margin-top: 5px;
	word-break: break-word;
	overflow-y: auto;
}

.calendar_row_buttons {
	text-align: right;
}
.calendar_party_cover {
    width: 315px;
    height: 120px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	float: left;
	margin-right: 10px;
}
.calendar_event_profile {
	display: inline-block;
	padding-right: 10px;
	background-color: #eef;
	margin-right: 5px;
	margin-bottom: 1px;
	margin-top: 1px;
}
.calendar_event_party {
	margin-bottom: 5px;
}
.calendar_event_profile > .profilephoto_thumb {
	margin-right: 10px;
}
.calendar_party_event {
	margin-right: 10px;
	margin-bottom: 10px;
}
.calendar_event_party_name_limited {
    display: inline-block;
}


/***** premium *****/
#premium_dialog_container {
	z-index: 16000;
}
#premium_dialog {
  max-width: 500px;
	max-height: 85vh;
  background-color: #ffd;
  margin: 30px auto;
  padding: 20px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
#premium_dialog button {
	margin: 10px;
}

button.premium {
  box-shadow: 0 0 10px #ff5;
  background-color: #cc0;
  background: -moz-linear-gradient( top , rgba(255, 110, 110, 1) 0%, rgba(255, 255, 50, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 50, 50, 1)), color-stop(100%, rgba(255, 200, 50, 1)));
  text-align: center;
}

/***** guide ****/
#guide > div > ul > li {
	margin-bottom: 5px;
	margin-left: 5px;
}
#guide > div > h1 {
	font-size: 67px;
	letter-spacing: 0px;
	font-family: 'Dancing Script', cursive;
	text-align: center;
}


/***** accessories *****/
.accessories_item {
	text-align: center;
}
#accessories_intro > img {
    margin: 0 20px 20px;
    max-width: 33%;
    float: right;
    box-shadow: 1px 1px 5px #555;
}
#accessories_intro > h3 {
	margin-top: 0rem;
}
#accessories_intro > .clearfix::after {
	content: '';
	display: table;
	clear: both;
	margin-bottom: 2rem;
}

.accessories_amount {
	width: 50px !important;
	margin-right: 10px;
}

#accessories > div > table > tbody > tr > td {
	padding-bottom: 5px;
}
#accessories_order_terms {
	font-size: 80%;
}



/***** affiliate *****/
#affiliate_rules,
#userprofile_rotkomembership_terms {
	display: block;
    max-height: 200px;
    overflow-y: scroll;
    border: 1px #ddd solid;
    padding: 5px;
    background-color: #eef;
    margin-bottom: 10px;
    font-size: 90%;
	
}
#affiliate_rules > table > tbody > tr > td,
#userprofile_rotkomembership_terms {
	padding: 5px;
}


/***** admin validation *****/
#adminValidationPhoto {
	max-height: 600px;
	max-height: 60vh;
	max-height: calc(var(--vh, 1vh) * 60);
}
#adminValidation ul li {
	margin-bottom: 10px;
}
#adminValidationPaper {
	background-image: url('https://static.xperienceunited.com/pics/adminValidationTemplate.jpg');
    margin: 1rem;
    margin-top: 0;
    padding-top: 85px;
    padding-left: 55px;
    padding-right: 35px;
    width: 110px;
    height: 270px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.9rem;
}

/* Video validation styles */
.verification-code-container {
	background: #f0f0f0;
	padding: 20px;
	text-align: center;
	border-radius: 8px;
	margin-bottom: 15px;
}
.verification-code {
	font-size: 2.5rem;
	font-weight: bold;
	letter-spacing: 0.5rem;
	font-family: monospace;
	color: #333;
}
@media (max-width: 480px) {
	.verification-code {
		font-size: 1.4rem;
		letter-spacing: 0.2rem;
	}
}
.verification-code-small {
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 0.2rem;
	font-family: monospace;
}
.recording-indicator {
	color: red;
	font-weight: bold;
	animation: blink 1s infinite;
}
@keyframes blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}
#adminValidation_timer {
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0.5rem 0;
}

/* Pending validations list */
.validations-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.validation-item {
	border: 1px solid #ddd;
	padding: 15px;
	border-radius: 8px;
	background: #fafafa;
}
.validation-account {
	font-weight: bold;
	margin-bottom: 5px;
}
.validation-date {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 5px;
}
.validation-code {
	margin-bottom: 10px;
}
.validation-geolocation {
	margin-bottom: 10px;
	font-size: 0.9rem;
}
.validation-has-geo {
	color: #2e7d32;
}
.validation-has-geo i {
	vertical-align: middle;
	color: #2e7d32;
}
.validation-no-geo {
	color: #999;
}
.validation-no-geo i {
	vertical-align: middle;
	color: #999;
}
.validation-review {
	margin-top: 10px;
}
.validation-review video {
	max-width: 100%;
	margin-bottom: 15px;
	border-radius: 8px;
}
.validation-review .warning {
	color: red;
	font-weight: bold;
}
.validation_map_marker {
	font-size: 32px;
	color: #4285f4;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.validation_map_account_marker {
	cursor: pointer;
}
.validation_map_account_marker img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.validation-photo {
	max-width: 100%;
	max-height: 50vh;
}
.validation-user-photos {
	text-align: center;
	margin-bottom: 10px;
}
.validation-user-photo {
	max-width: 100%;
	max-height: 50vh;
	border-radius: 8px;
}
.validation-photo-counter {
	margin-top: 5px;
}
@media (min-width: 1000px) {
	.validation-photo {
		max-width: 430px;
		max-height: 50vh;
	}
	.validation-user-photos {
		float: right;
		max-width: 300px;
		margin-left: 15px;
		margin-bottom: 10px;
	}
	.validation-user-photo {
		max-height: 400px;
	}
}
/* Profile validation review */
.validation-review-profile {
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 20px;
}
.validation-review-profile h3 {
	margin-top: 0;
	margin-bottom: 15px;
	color: #333;
}
.validation-review-photos {
	margin-bottom: 15px;
}
.validation_reason_input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 5px;
	resize: vertical;
}
.validation-review-profile .validation-photo-container {
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
	margin-bottom: 10px;
}
.validation-review-profile .validation-photo {
	max-width: 100%;
	max-height: 50vh;
	border-radius: 8px;
}
@media (min-width: 1000px) {
	.validation-review-profile .validation-photo-container {
		max-width: 410px;
	}
	.validation-review-profile .validation-user-photos {
		float: right;
		max-width: 300px;
	}
}

/***** evaluation *****/
.evaluation_question {
	width: 100%;
	width: -webkit-fill-available;
	height: 10ch;
}


/***** christmas *****/
.christmas_profile_container {
	display: inline-block;
	width: 21%;
	margin: 2%;
	text-align: center;
}
.christmas_profile_container > .members_profile,
.christmas_profile_container > .smallProfile2 {
	display: block !important;
    width: 96% !important;
	margin: 2%;
}
.christmas_profile_container > button {
	margin: 10px;
}

#christmas_ad {
	margin-top: 20px;
	background-color: #f00;
}
#christmas_ad img {
	width: 100%;
}
#christmas_ad span {
	color: #fff;
	font-size: 160%;
}
#christmas_intro img {
	width: 30%;
}

/***** meet *****/
#meet_map, #meetStatus_map {
	height: 400px;
	height: 50vh;
	height: calc(var(--vh, 1vh) * 50);
	margin-top: 20px;
	width: 500px;
}
#meet_time {
	width: 100px;
}
.meetStatusColor {
	color: #222;
	margin: 4px;
	padding: 4px;
	border: 1px solid #777;
	display: inline-block;
	border-radius: 3px;
}
.meetStatusColor_cancelled_48h {
	background-color: #ff8;	
}
.meetStatusColor_cancelled_12h {
	background-color: #fa0;	
}
.meetStatusColor_cancelled_2h {
	background-color: #f20;	
}
.meetStatusColor_noshow {
	background-color: #900;
	color: #fff;
}
.meetStatusColor_ok {
	background-color: #0c0;
	color: #fff;
}
.meetStatusColor_unknown {
	background-color: #aaa;
}

/***** ageCheck *****/
.ageCheckTable {
	    margin: 20px auto;
    text-align: center;
}
.ageCheckTable td {
	padding: 5px;
}
.ageCheckTable input {
	width: 120px;
	width: 6ch !important;
	font-size: 200%;
	padding: 10px;
}
.ageCheckTable input::-webkit-outer-spin-button,
.ageCheckTable input::-webkit-inner-spin-button {
    -webkit-appearance: none;
	appearance: none;
}


/***** Emails *****/
.emailReply {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}
.emailUnread {
	font-weight: bold;
}
.emailSubject {
	border-top: 1px solid #dde;
}

/* @use cssnext;
 */
 :root {
	--h: 5rem;
	
	--g-red: #D04B36;
	--g-orange: #E36511;
	--g-yellow: #FFBA00;
	--g-green: #00B180;
	--g-blue: #147AAB;
	--g-indigo: #675997;
	
	--t-blue: #4FA5C2;
	--t-pink: #F587AC;
	--t-white: #F9FBFC;
	
	--b-pink: #C1357E;
	--b-purple: #675997;
	--b-blue: #0655A9;
	
	--p-magenta: #FA5E5B;
	--p-yellow: #FFBA00;
	--p-blue: #4FA5C2;
  
	--a-black: #222222;
	--a-grey: #a2a2a2;
	--a-white: #F9FBFC;
	--a-purple: #A148A2;
	
	--nb-black: #222222;
	--nb-yellow: #F7E45A;
	--nb-white: #F9FBFC;
	--nb-purple: #675997;
  }
  
  .gay, .male_gay::before, .female_gay::before {
	background-color: #FFBA00;
	background-image: linear-gradient(var(--g-red) 0%, var(--g-red) 16.6666%, var(--g-orange) 16.6666%,var(--g-orange) 33.333%, var(--g-yellow) 33.333%, var(--g-yellow) 50%, var(--g-green) 50%, var(--g-green) 66.6666%, var(--g-blue) 66.6666%, var(--g-blue) 83.3333%, var(--g-indigo) 83.3333%, var(--g-indigo) 100%);
  }
  
  .trans, .transbg::before {
	background-image: linear-gradient(var(--t-blue) 0%, var(--t-blue) 20%, var(--t-pink) 20%, var(--t-pink) 40%, var(--t-white) 40%, var(--t-white) 60%, var(--t-pink) 60%, var(--t-pink) 80%, var(--t-blue) 80%, var(--t-blue) 100%);
  }
  
  .bi, .male_bi::before, .female_bi::before {
	  background-color: #675997;
	background-image: linear-gradient(var(--b-pink) 0%, var(--b-pink) 40%, var(--b-purple) 40%, var(--b-purple) 60%, var(--b-blue) 60%, var(--b-blue) 100%);
  }
  
  .pan {
	background-image: linear-gradient(var(--p-magenta) 0%, var(--p-magenta) 33.332%, var(--p-yellow) 33.332%, var(--p-yellow) 66.667%, var(--p-blue) 66.667%, var(--p-blue) 100%);
  }
  
  .asex {
	background-image: linear-gradient(var(--a-black) 0%, var(--a-black) 20%, var(--a-grey) 20%, var(--a-grey) 40%, var(--a-white) 40%, var(--a-white) 60%, var(--a-purple) 60%, var(--a-purple) 80%, var(--a-black) 80%, var(--a-black) 100%);
  }
  
  .nonb {
	background-image: linear-gradient(var(--nb-black) 0%, var(--nb-black) 20%, var(--nb-yellow) 20%, var(--nb-yellow) 40%, var(--nb-white) 40%, var(--nb-white) 60%, var(--nb-purple) 60%, var(--nb-purple) 80%, var(--nb-black) 80%, var(--nb-black) 100%);
  }

.category-shortcuts {
    display: flex;
	flex-wrap: wrap;
    overflow-x: auto;
    gap: 5px;
    padding: 10px;
	justify-content: center;
}
.category-sections {
    overflow-y: scroll;
	max-height: 20vh;
	max-height: calc(var(--vh, 1vh) * 20);
	overflow-x: hidden;
}
@media (min-width: 768px) and (min-height: 1024px) {
    .category-sections {
        max-height: calc(var(--vh, 1vh) * 33);
    }
}

#context_menu_emojis:hover {
	background-color: unset !important;
}
.dropdown_row_small .emoji-icon {
	font-size: 1.8rem;
}

.category-shortcut {
	display: inline-block;
    padding: 4px 6px;
    margin: 3px;
    font-size: 1rem;
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);  /* Drop shadow for a button-like feeling */
    transition: transform 0.2s, box-shadow 0.2s; /* Smoothens the transition effect for hover and active states */
    cursor: pointer;                 /* Changes cursor to hand to indicate clickable */
    background-color: #f5f5f5;      /* Light gray background for a button-like feel */
	color: #000 !important;
}
@media (max-width: 768px) {
	.category-shortcut {
		font-size: 1.5rem;	
	}	
}
.category-shortcut-more {
	padding-right: 1rem;
	padding-left: 1rem;
	font-weight: bold;
	background-color: #e0ffe0;
	padding-top: 2px;
	padding-bottom: 0;
	font-size: 1.5rem;
}

.category-shortcut:hover,
.category-section > .emoji-icon:hover {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);  /* Slightly intensified shadow on hover */
    transform: translateY(-2px);                 /* Moves the button up a bit */
}

.category-shortcut:active {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);  /* Less shadow for a pressed button feeling */
    transform: translateY(1px);                  /* Moves the button down a bit */
}

.emoji-icon {
    margin: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.category-shortcut,
.emoji-icon,
.category-shortcut {
	font-family: 'Noto Color Emoji', sans-serif;
}
.category-section > .emoji-icon {
    display: inline-block;
	content-visibility: auto;
	margin: 0;
    padding: 4px 2px;
	text-align: center;
}

.emoji-icon:hover {
    opacity: 0.8;
}

.category-section {
    border-top: 1px solid #eee;
    padding: 10px 0;
}

.emoji-container {
    display: flex;
	flex-wrap: wrap;
}

.emoji-display {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between emoji character and count */
}

.emoji-count {
    font-size: 90%;
    font-weight: bold;
	margin-right: 3px;
    display: inline-block;
    vertical-align: text-top;
}
.emoji_with_accounts {
	display: flex;
}
.emoji_with_accounts_list {
	flex-wrap: wrap;
	display: flex;
	gap: 0.25rem;
	padding: 0;
	list-style: none;
	margin: 0;
}
.emoji_with_accounts_list li {
	background-color: #f5f5f5;
	border-radius: 12px;
	padding: 0.20rem 0.75rem;
	align-self: start;
}



/***** print *****/
@media print {
	.header, #friends, #menu, #menu_ssl  {
		display: none !important;
	}
	.main_element {
		width: 100% !important;
		margin: 0px !important;
		top: 0px !important;
	}
	#invite > div > p, #invited {
		display: none !important;
	}
}

/***** mobile *****/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (   min--moz-device-pixel-ratio: 2),
		only screen and (     -o-min-device-pixel-ratio: 2/1),
		only screen and (        min-device-pixel-ratio: 2),
		only screen and (                min-resolution: 192dpi),
		only screen and (                min-resolution: 2dppx) { 
	
	body {
		font-size: 1.1rem;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
		only screen and (   min--moz-device-pixel-ratio: 3),
		only screen and (     -o-min-device-pixel-ratio: 3/1),
		only screen and (        min-device-pixel-ratio: 3),
		only screen and (                min-resolution: 220dpi),
		only screen and (                min-resolution: 2.5dppx) {
	body {
		font-size: 1.1rem;
		/* font-size: 130%; */
	}
	.contentline {
		box-shadow: 1px 1px 4px #aaa;
	}	
}	

@media (max-width: 1200px) {
	.post_party_cover_premium {
		margin-left: -50px;
		width: 900px;
		height: 340px;
	}
}

@media (min-width: 1270px) {
	.menu_element {
		width: 200px;
	}
	.contentline,
	#content_shownew {
		box-shadow: 0 0 5px rgba(0,0,0,0.0975);
	}
}
@media (min-width: 1001px) and (max-width: 1050px) {
	.menu_element {
		width: 160px;
	}
}

@media (max-width: 500px) {
	.userprofile_photos_photo {
		width: 45vw;
		height: 45vw;
		margin: 1vw;
	}
}
@media (max-width: 620px) {
	.main_element {
		width: 100%;
		margin-left: 0px;
	}
}
@media (min-width : 621px) and (max-width: 1000px) {
	.main_element {
		width: calc(480px + 15%);
		margin: 0 auto;
	}	
}

@media (max-width: 350px) {

	#settings_icon {
		margin-left: 10px;
	}
	button, .button {
		font-size: 100%;
		padding: 3px;
		padding-left: 8px;
		padding-right: 8px;
	}
	.radarpanel {
		padding: 5px;
		margin-left: 2px;
		margin-right: 2px;
		font-size: 90%;
	}
	.say_container button {
		padding-left: 10px;
		padding-right: 10px;
	}
	.no_mobile350 {
		display: none !important;
	}

}
@media (min-width: 351px) and (max-width: 400px) {
	.radarpanel {
		padding: 6px;
		padding-left: 10px;
		padding-right: 10px;
		margin-left: 3px;
		margin-right: 3px;
		font-size: 100%;
	}
	#radar_which {
		font-size: 80%;
	}
}
@media (min-width: 400px) {
	#logout_icon {
		margin-left: 40px;
	}
	#settings_icon {
		margin-left: 40px;
	}
}
@media (max-width: 600px) {
	.no_mobile {
		display: none !important;
	}
}
@media (min-width: 601px) {
	.only_mobile {
		display: none !important;
	}
	.post_links > .dot {
		margin-left: 10px;
		margin-right: 10px;
	}
	.calendar_event_content > .calendar_event_location_container {
		float: right;
		margin-right: -5px;
	}

}

@media (max-width: 1000px) {
	.only_1000 {
		display: none !important;
	}
}


@media (max-width: 900px) {
	.content_calendar_content_row > td {
		padding-bottom: 5px;
	}
	h2 {
	    word-break: break-word;
	}
}


@media (max-width: 1000px) {
	.say_arrow {
		display: none;
	}
	#login > table {
		width: 95%;
	}
	.intro {
		width: 100%;
		padding: 1vw;
	}
	.intro > table {
		width: auto;
		margin: 2vw auto;
	}
	.logintable_reg, .slideshow_cell {
		display: none;
	}
	#logintable_reg_link {
		display: block !important;
		margin-top: 1rem;
	}
	#front_screen > h1 {
		font-size: 12vw;
		text-shadow: 2px 2px 5px #333;
	}
	.logininput {
		font-size: 85%;
	}
	
	button, .button {
		font-size: 100%;
	}

	input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], 
	input[type=tel],
	textarea {
		width: 90%;
	}
	select {
		width: unset;
		max-width: 90%;
	}
	#menu {
		display: none;
		width: 100%;
	}

	.menulink {
		font-size: 1.1rem;
	}

	.header_container {
		width: 100%;
	}

	.header_logo {
		display: none;
	}
	#main {
		margin-left: 1%;
		margin-right: 1%;
		width: 98%;
		margin-top: 50px;
	}
	#menu_icon {
		margin-left: 3px;
		float: left;
		visibility: visible;
	}
	#power_icon {
		margin-right: 3px !important;
	}
	.header_icon {
		width: 28px;
		height: 28px;
		margin-top: 3px;
		position: relative;
	}
	.header_icon > i {
		height: 28px;
		line-height: 28px;
		font-size: 28px;
	}
	#logout_icon {
		margin-right: 34px;
	}
	#connection_icon {
		margin-right: 5px;
		margin-left: 0;
	}
	.header {
		height: 40px;
		line-height: 40px;
	}
	.stream_new_comment_input {
		width: 70% !important;
		width: calc(100% - 15px - 10vw - 10px) !important;
	}
	.stream_new_comment > .profilephoto_thumb35 {
		width: 10vw;
		height: 10vw;
	}
	.stream_photos {
		width: 100%;
		max-height: 700px;
	}
	.stream_comment_text {
		margin-bottom: 10px;
	}
	.profilephoto_content_info {
		float: none;
		margin: 20px auto;
		display: block;
	}
	.between_main_elements_buttons button {
		margin-left: 0.1rem;
		margin-right: 0.1rem;
		margin-top: 0.3rem;
	}
	.members_profile {
		width: 96%;
	}
	.christmas_profile_container {
		width: 96%;
		margin: 0;
	}
	.members_photo {
		width: 100%;
		height: 270px;
		height: 96vw;
	}
	.members_account {
		top: 210px;
		top: 80vw;
		line-height: 8vw;
		height: 16vw;
	}
	.group_info_details {
		position: relative;
		top: 20px;
		width: auto;
		right: 0px;
		margin-bottom: 20px;
	}
	.values2 {
		margin-left: 52%;
	}
	.label2 {
		width: 50%;
	}
	.dropdown_row {
		padding: 10px;
	}
	.post_party_cover {
		width: 100%;
	}
	.post_party_cover_premium {
		margin: 0px;
		margin-bottom: 20px;
		margin-top: 20px;
		width: 100%;
	}
	.post_photo {
		max-width: 100% !important;
		max-height: 105vh !important;
	}
	
	.post_photo_related_site {
		max-width: 100%;
		margin-left: 0px;
	}	
	.post_text {
		word-break: break-all;
		word-break: break-word;
		font-size: 1.15rem;
		padding-top: 0;
	}
	#say_photo, #say_group_photo, #say_party_photo, #say_video, #say_group_video, #say_party_video {
		max-width: 100%;
		margin: 0px;
		margin-bottom: 0.5rem;
	}	
	#userprofile_adminValidation_stamp {
		right: 0px;
		margin-right: -10px;
	}
	#userprofile_adminValidation_stamp > img {
		width: 150px;
		height: 150px;
	}

	#userprofile_top {
		text-align: center;
	}
	.tabs {
		font-size: 75%;
	}

	.userprofile_info_field {
		word-break: break-word;
	}
	.userprofile_info_field > ul {
		padding-left: 10px;
	}
	.userprofile_info_field > ul > li {
		margin-left: 5px;
	}
	#club_map {
		float: none;
		width: 100%;	
		margin-bottom: 10px;
	}
	#party_details_description,
	#club_description {
		width: 100%;
	}

	.members_account > span > .account {	
		font-size: 85%;
	}
	.invited {
		display: block;
		float: none;
		width: auto;
		margin-left: 0px;
	}

	#notifications_content > .parties_party_cover {
		margin-bottom: 10px;
	}
	#content_calendar_content > table > tbody > tr> td.content_calendar_mobile {
		padding: 0px;
		padding-bottom: 3px;
	}
	.calendar_event_location_container {
		display: block;
		font-size: 80%;
		margin: 5px;
	}
	.calendar_event_location_container > .distance {
		display: none;
	}
	.calendar_event_party_name {
		margin: 5px;
	}
	.calendar_event_party_name_limited {
		max-width: 100%;
	}
	.calendar_party_cover {
		width: 100%;
		margin: 0px;
		float: none;
	}
	.calendar_event_profile {
		margin: 3px;
	}




	#premium_dialog {
		max-width: 80%;
		max-width: 80vw;
		margin: 5vw;
		padding: 5vw;
		top: 20vw;
		position: absolute;
		width: 80vw;
	}

	#adminValidation_intro > img {
		margin-right: -50px !important;
	}

	#settings_payment .basictable > tbody > tr > td {
		padding: 0.5rem;
	}
	.settings_payment_real_ad {
		width: auto;
		margin-left: 0px;
		    max-width: 100%;
	}
	.mobile100 {
		width: 100% !important;
	}

	#accessories_intro > img {
		margin: 0 0 20px 20px;
		max-width: 50%;
	}


	.party_owner_smallProfile > select,
	.party_owner_smallProfile > .link,
	.party_owner_infobox {
		margin-bottom: 0.5rem;
	}
	.party_owner_noshow,
	.party_owner_noshow_confident,
	.party_owner_recommend {
		display: block;
	}
	.party_members_options .label {
		width: 100px;
	}

}

/* ── Video Call UI ────────────────────────────────────── */
.call_incoming_notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15000;
    background: #222;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    padding: 28px 32px 24px;
    min-width: 280px;
    max-width: 90vw;
    text-align: center;
}

/* Dark backdrop behind the modal — separate element so z-index stacking is reliable */
.call_incoming_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 14999;
}

.call_incoming_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.call_incoming_photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background: #444;
    margin-bottom: 4px;
}

.call_incoming_label {
    font-size: 12px;
    color: #aaa;
}

.call_incoming_name {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 4px;
}

.call_incoming_buttons {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

.call_btn_accept {
    background: #4caf50;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.call_btn_decline {
    background: #f44336;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.call_overlay {
    position: fixed;
    z-index: 12000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #111;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    width: 520px;
    max-width: 98vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
}

.call_overlay_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #1a1a1a;
    font-size: 14px;
}

.call_overlay_label {
    font-weight: bold;
}

.call_duration {
    color: #aaa;
    font-size: 13px;
}

.call_status {
    color: #aaa;
    font-size: 13px;
}

.call_status--error {
    color: #ff5555;
    font-weight: 500;
}

.call_remote_videos {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    background: #1a1a1a;
    min-height: 240px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
}

.call_remote_video {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 4px;
    background: #333;
}

.call_remote_videos .call_remote_video:not(:only-child) {
    width: calc(50% - 4px);
}

.call_self_container {
    position: absolute;
    bottom: 60px;
    right: 10px;
    width: 100px;
    height: 75px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #444;
}

.call_self_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #333;
}

.call_controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 6px;
    background: #1a1a1a;
}

.call_controls_row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    row-gap: 8px;
}

.call_ctrl_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.call_ctrl_wrap_end {
    margin-top: 2px;
}

.call_ctrl_label {
    font-size: 10px;
    color: #aaa;
    text-align: center;
    max-width: 56px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call_ctrl_label_end {
    color: #f44336;
}

.call_ctrl_btn {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.call_ctrl_btn:hover {
    background: #555;
}

.call_ctrl_end {
    background: #f44336;
    width: 56px;
    height: 56px;
}

.call_ctrl_end:hover {
    background: #c62828;
}

.call_ctrl_end .material-icons {
    font-size: 28px;
}

.call_browser_warning {
    font-size: 11px;
    color: #888;
    text-align: center;
    padding: 4px 10px 8px;
    background: #1a1a1a;
}

.chat_call_log {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 13px;
    padding: 4px 0;
}

.chat_call_log .material-icons {
    font-size: 16px !important;
    color: #ef0418;
}

.chat_call_log_missed .material-icons {
    color: #f44336;
}

.call_overlay.hidden,
.call_incoming_notification.hidden {
    display: none;
}

/* ── Voice-only call overlay ─────────────────────────── */

.call_audio_avatar {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 24px 0 16px;
    flex: 1;
}
.call_audio_avatar_img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #555;
    background: #333;
}

.call_overlay--audio .call_audio_avatar  { display: flex; }
.call_overlay--audio .call_remote_videos { display: none; }
.call_overlay--audio .call_self_container { display: none; }
.call_overlay--audio .call_ctrl_wrap--cam,
.call_overlay--audio .call_ctrl_wrap--flip,
.call_overlay--audio .call_ctrl_wrap--pip     { display: none; }
.call_ctrl_wrap--speaker                      { display: none; }
.call_overlay--audio .call_ctrl_wrap--speaker { display: flex; }

@media (max-height: 640px) {
    .call_audio_avatar     { padding: 12px 0 8px; }
    .call_audio_avatar_img { width: 72px; height: 72px; }
}

.call_incoming_type_icon {
    font-size: 1.1rem;
    vertical-align: middle;
    margin-right: 4px;
}

/* ── Call quality rating ──────────────────────────── */
.call_rate_container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.95);
    z-index: 10;
    gap: 16px;
    padding: 20px;
    animation: call_rate_fadein 0.3s ease;
}
@keyframes call_rate_fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.call_rate_title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
}
.call_rate_stars {
    display: flex;
    gap: 8px;
}
.call_rate_star {
    font-size: 2.2rem;
    color: #666;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    user-select: none;
    -webkit-user-select: none;
}
.call_rate_star:hover,
.call_rate_star.active {
    color: #f5c518;
    transform: scale(1.15);
}
.call_rate_issues {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 400px;
    animation: call_rate_fadein 0.25s ease;
}
.call_rate_issue_btn {
    padding: 6px 14px;
    border: 1px solid #555;
    border-radius: 18px;
    background: transparent;
    color: #ccc;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.call_rate_issue_btn:hover {
    border-color: #888;
    color: #fff;
}
.call_rate_issue_btn.selected {
    background: #4a90d9;
    border-color: #4a90d9;
    color: #fff;
}
.call_rate_actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 4px;
}
.call_rate_send_btn {
    padding: 8px 24px;
    border: none;
    border-radius: 20px;
    background: #4a90d9;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s;
}
.call_rate_send_btn:hover {
    background: #3a7bc8;
}
.call_rate_skip_link {
    color: #888;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}
.call_rate_skip_link:hover {
    color: #bbb;
}
.call_rate_thanks {
    color: #7ec87e;
    font-size: 1rem;
    animation: call_rate_fadein 0.3s ease;
}