/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {margin:0; padding:0;}

img, fieldset {border:none;}

hr {display:none;}

html {
	height:100%;
	box-sizing: border-box;
}

body {
	height: 100%;
	height:100%;
	font: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	padding: 0;
	margin: 0;
}

* {box-sizing: inherit;}

a {color: blue;}
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}

button {cursor: pointer;}

/* ----- NAV ----- */
.wrapper {
	min-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.top-left {
	display: none;
	position: absolute;
	text-align: left;
	width: 100%;
	background: white;
}

.nav,
.footer,
.container {padding: 0em 1.2em;}

h1 em {color: green;}
h1 a:hover, .nav-left h2 a:hover {
	text-decoration: none;
	text-shadow: 0.06em 0.06em 0.06em pink;
}
.logo {margin-right: 1em;}

.nav, .midnav {
	z-index: 5;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border-bottom: 0.07em solid #eee;
	position: sticky;
	top: 0;
	background: #fff;
}
.midnav {
	grid-template-columns: 1fr;
	text-align: center;
}
.nav-left {
	display: flex;
	align-items: center;
	font-size: clamp(1rem, 2vw, 1.5rem);
}
.nav-left h2 em {color: orange;}
.nav-center {
	align-items: center;
	font-size: clamp(1rem, 2vw, 1.5rem);
}
.search-box, .search-box-top {
	position: relative;
	margin: 0.3em auto;
	width: 95%;
}
.search-icon {
	position: absolute;
	background-image: url(../../../../html/img/search.svg);
	background-repeat: no-repeat;
	background-position: left 0em center;
	margin: 0.3em 0em 0em 0.3em;
	width: 0.9em;
    height: 0.9em;
}
.search-icon-button {
	display: none;
	margin: 0.3em 0em 0em 0.3em;
	width: 1.2em;
    height: 1.2em;
	border: 0.07em solid #ccc;
	padding: 0.2em;
	border-radius: 0.8em;
}
.search-icon-button:hover {cursor: pointer;}
.back-button  {
	padding: 0.4em 0 0 1em;
	display: block;
	float: left;
}
.back-button img {
	width: 1.2em;
    height: 1.2em;
}
.back-button img:hover {cursor: pointer;}
.nav-right {
	display: flex;
	align-items: center;
	justify-content: right;
}
.nav-right ul {
	display: flex;
	list-style: none;
}
.nav-right ul li {
	width: 1.5em;
	height: 1em;
	padding: 0em 0.3em 0em 0.1em;
}
.nav-right ul li + li:not(:first-child) {margin-left: 0.3em;}

.login-image img {
	width: 1.2em;
	height: 1.2em;
}

/* ----- NAV => DROPDOWN ----- */
.dropdown {position: relative; z-index: 3;}
.dropdown-content {
	display: none;
	position: absolute;
	top: 1.6em;
	right: 0em;
	background-color: #f9f9f9;
	width: 15em;
	box-shadow: 0em 0.07em 0.2em 0em rgba(0,0,0,0.2);
	padding: 0.6em 0.9em;
	border-radius: 0.5em;
	text-align: center;
}
.dropdown:focus-within .dropdown-content {display: block;}
.dropdown-profile, .dropdown-logout {
	display: block;
	float: left;
	width: 100%;
}
.dropdown-profile-image {
	display: block;
	float: left;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
}
.dropdown-profile-image img {
	width: 1.5em;
	height: 1.5em;
}
.dropdown-logout {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 0.07em solid #ccc;
}
.dropdown-logout-image {
	display: block;
	float: left;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
}
.dropdown-logout-image img {
	width: 1em;
	height: 1em;
}
.dropdown-profile-desc {
	display: block;
	float: left;
}

/* ----- CONTAINER ----- */
.container {height: 100%;}
.single-column {
	display: block;
	margin: 0 auto;
	width: 95vh;
	padding: 1em 0;
}
.single-column-content {
	padding-top: 1em;
}
.single-column-content ul ol {
	text-indent: -1.5em; /* Pulls the first line left by the bullet's width */
	padding-left: 1.5em; /* Pushes all lines (including the first) right to align with the bullet */
}
.main-left {
	display: grid;
	grid-template-columns: 2fr 1fr;
	width: 85%;
	margin: 0 auto;
}
.main-right {
	display: grid;
	grid-template-columns: 1fr 2fr;
	width: 85%;
	margin: 0 auto;
}
.content-left {
	display: flex;
	flex-direction: column;	/* stack child + button vertically */
	height: 100%;
	padding: 1em 0;
}
.content-right {
	padding: 1em 0;
}
.content-left-one-column,
.content-right-one-column,
.content-right-one-column-post,
.content-right-one-column-item {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
}
.content-right-one-column:first-child,
.content-right-one-column-post:first-child,
.content-right-one-column-item:first-child { margin-bottom: 1em; }
ul.content-right-one-column,
ul.content-right-one-column-post,
ul.content-right-one-column-item { list-style: none; }
.content-right-one-column-block {
	margin: 1em 0 0.5em 0;
	background: #f3f9ff;
	padding: 0.5em;
	border-radius: 0.5em;
}
.content-right-one-column-block-grid {
	display: grid;
	grid-template-columns: 10% 1fr;
}
.content-right-one-column-box {
	display: block;
	margin: 1em 0 0.5em 0;
	background: #ddd;
	padding: 0.5em;
	border-radius: 0.5em;
}
.content-right-one-column-box:hover {
	cursor: pointer;
	background: #f3f9ff;
}
.content-right-one-column-box-left {
	display: inline-block;
	float: left;
}
.content-right-one-column-box-left img {
	width: 8em;
	height: 5em;
}
.content-right-one-column-box-right {
	display: flex;
	float: left;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.content-right-two-column {
	display: grid;
	grid-template-columns: 1fr 5fr;
	margin-bottom: 0.5em;
}
.content-right-three-column {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 0.5em;
}
.content-right-three-column-box, .content-right-five-column-box {
	background-color: #ddd;
	margin: 0.5em;
	padding: 0.8em;
	border-radius: 0.5em;
}
.content-right-three-column-box:hover { background: #f3f9ff; }
.content-right-three-column-box-image {
	text-align: center;
	padding-bottom: 0.3em;
}
.content-right-three-column-box-image img {
	width: 3em;
	height: 3em;
	margin-bottom: 0.7em;
}
.content-right-three-column-box-text { text-align: center; }
.content-right-five-column {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	margin-bottom: 0.5em;
}
.profile-image {
	width: 8em;
	height: 8em;
}
.profile-image img {
	width: 100%;
	height: 100%;
}
input[name=phon] { width: 9em; }

#phone-setting, #privacy-setting { cursor: pointer; }
#language-placeholder, #set-language-button { display: inline-block; }
.modal-setting {
	display: none;
	color: #fff;
	position: fixed;
	z-index: 1;
	padding: 1.5em;
	top: 10%; left: auto;
	width: 40vw;
	height: 22vh;
	background-color: rgba(0,0,0,.9);
	border-radius: 0.5em;
	text-align: center;
	vertical-align: middle;
}
.content-left-news {
	flex: 1;
}
.load-more-button {
	margin-top: auto; /* pushes button to bottom */
	/* align-self: flex-start; /* keep natural width, no stretch */
}
#load-more-content, #load-more-items { display: none; }

.middle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 2em;
}
.flexbox-vertical-aligh {
	display: flex;
}

.text-description {
	width: 100%;
	text-align: center;
	margin: 0.5em 0;
	padding: 0.5em 0;
}

.text-centered { text-align: center; }
.user-assignment a, a.user-assignment:hover { text-decoration: none; }
.inline-block { display: inline-block; }

/* ----- CONTAINER => POST LIST----- */
ul.post-list, ul.setting-list, ul.nets-post-list { list-style: none; }
.post-list, .setting-list, .nets-post-list, .nets-post-form {
	display: block;
	width: 100%;
}
.post-list, .setting-list { margin-top: 0.5em; }
ul.setting-list {
	width: 100%;
	display: inline-block;
}
ul.setting-list li {
	width: 100%;
	display: inline-block;
	padding: 1em 0;
}
.content-right-one-column-block-left {
	position: relative;
	width: 20%;
	display: inline-block;
}
.content-right-one-column-block-left:after {
    position: absolute;
    content: ""; 
    border-top: 0.6em solid transparent;
    border-left: 0.6em solid #f3f9ff;
    border-bottom: 0.6em solid transparent;
    right: -0.6em;
}
.content-right-one-column-block-right {
	display: inline-block;
	vertical-align: middle;
	padding-left: 1em;
}
.post-list-item {
	display: grid;
	grid-template-columns: 25% 75%;
	grid-template-rows: auto; /* Or a specific height */
}
.post-list-item-image img, .post-list-item-image video, .post-list-item-image iframe {
	width: 95%;
	height: 85%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0.3em;
}
.post-list-item-descp {
	
}
.post-list-item-descp-cats {
	font-size: clamp(0.7rem, 1.1vw, 0.9rem);
}
.post-list-item-descp-cats a {
	color: violet;
}
.post-list-item-descp-ttle {
	padding: 0.2em 0;
}
.post-list-item-descp-excp {
	font-size: clamp(0.8rem, 1.2vw, 1rem);
}

/* ----- Net profile cover photo----- */
.profile-cover-photo-contianer {
	position: relative;
	width: 100%;
	height: 10em;
	margin-bottom: 1em;
}
.profile-cover-photo-image {
	height: 10em;
	border-radius: 0.5em;
}
.profile-cover-photo-image img {
	width: 100%;
	height: 10em;
	object-fit: cover;
}
.profile-users-photo-image {
    position: absolute;
    bottom: 1em;
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
}
.profile-users-photo-image img {
    width: 80px;
    height: 80px;
    border-radius: 0.5em;
}
.profile-cover-photo-title {
    position: absolute;
    bottom: 1em;    
    left: 5em;
    color: white;
    text-rendering: optimizelegibility;
    text-shadow: rgba(0, 0, 0, 0.8) 0px 0px 3px;
    div { font-weight: normal; font-size: 80%; }
}
.profile-cover-photo-follow {
	position: absolute;
    right: 5em;
    top: 8em;
    width: 2em;
    height: 2em;
    opacity: 0.9;
}

.nets-post-list-item {
	display: grid;
	grid-template-columns: 50px 1fr;
	padding: 0.5em;
	border-radius: 0.3em;
	box-shadow: 0.09em 0.07em 0.0em #f3f9ff;
	margin-bottom: 0.5em;
}
.nets-post-list-item-img, .nets-post-list-item-avrt {
	width: 50px;
	/* width: 3.125em; */
	text-align: center;
}
.nets-post-list-item-img img, .nets-post-list-item-avrt img {
	width: 40px;
	height: 40px;
	/* width: 2.4em;
	height: 2.4em; */
	border-radius: 0.5em;
}
.nets-post-list-item-avrt img { cursor: pointer; }
.reply-to-comment-number{
	margin-top: 0.2em;
	margin-bottom: 0.3em;
	font-size: 1.8 rem;
	font-weight: bold;
}
.nets-post-content-textarea {
	width: 100%;
	min-height: 3em;
	padding: 0.3em;
	border: 0.07em solid #eee;
	border-radius: 0.2em;
}
.nets-post-list-item-form, .nets-post-list-item-content { padding-left: 0.3em; }
.nets-post-list-item-form-toolbar {
	height: 1em;
	padding: 0.3em 0;
}
.nets-post-list-item-form-toolbar-left {
	display: inline-block;
	float: left;
	height: 1em;
}
.nets-post-list-item-form-toolbar-left ul { list-style: none; }
.nets-post-list-item-form-toolbar-left ul li { display: inline-block; margin-right: 0.5em; }
.nets-post-list-item-form-toolbar-left ul li img { height: 1.2em; }
.nets-post-list-item-form-toolbar-left ul li select {
	margin-left: 0.5em;
	padding: 0.3em 0;
	border: none;
}
.nets-post-list-item-form-toolbar-right {
	display: inline-block;
	float: right;
}
.nets-post-list-item-content-head {
	width: 100%;
	padding: 0.2em 0;
}
.nets-post-list-item-content-body {
	width: 100%;
	padding: 0.2em 0;
	margin: 0.2em 0;
}
.nets-post-list-item-content-body iframe {
	width: 100%;
}
/* ChatGTP */
.nets-post-list-item-content-foot {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	padding: 0.2em 0
}
.nets-post-list-item-content-foot-child {
	text-align: center;
}
.nets-post-list-item-content-foot-child:last-child {
	position: relative;
}
.last-item { justify-self: end; }
.comment-count-image {
	display: inline-block;
}
.comment-count-image img {
	height: 1em;
	width: 1em;
}
.comment-count-text {
	display: inline-block;
}
.like-button, .non-like-button {
	height: 1em;
	width: 1em;
	border: 0;
	padding: 0;
	background: none;
	margin-right: 0.5em;
}
.like-button img {
	cursor: pointer;
	height: 1em;
	width: 1em;
}
button.like-button img {
	cursor: pointer;
	height: 1.4em;
	width: 1.4em;
}
.like-count-text {
	display: inline-block;
}
.hidden-nets-post-ellipsis-menu,
.hidden-nets-comment-ellipsis-menu,
.hidden-nets-post-ellipsis-menu-modal {display: none;}
.hidden-nets-post-ellipsis-menu {
	position: absolute;
	right: 0;
	padding: 0.2em 0.3em;
	border-radius: 0.5em;
}
.hidden-nets-comment-ellipsis-menu {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.3em 0.4em;
	border-radius: 0.5em;
}
.nets-post-ellipsis-menu-img {
	display: block;
	float: left;
	margin-right: 0.5em;
}
.hidden-nets-post-ellipsis-menu-modal {
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	text-align: left;
	padding: 1em 2em;
	background: #f3f9ff;
	border-radius: 0.5em;
}
.close-report {
	cursor: pointer;
	font-weight: bold;
	font-size: 1.5rem;
	right: 0;
	padding: 0 0.3em;
	border-radius: 0.5em;
	box-shadow: 0.09em 0.05em 0.05em pink;
}
input[name=report-post-form] {text-align: center;}

.nets-post-button, .nets-post-submit-button {cursor: pointer;}

.comment-count-block { display: table; }
.comment-count-text, .like-count-text, .comment-count-image {
	display: table-cell;
    vertical-align: middle;
}
.nets-report-button:disabled {
    opacity: 0.5; 
    cursor: not-allowed; 
}
.nets-report-button::enabled {
    opacity: 1.0;
    cursor: pointer;
}

.hidden-reply-comment {
	display: none;
	position: absolute;
	top: -4.5em;
	left: 0;
	min-width: 85%;
	min-height: 7em;
	z-index: 2;
	background: rgba(240, 248, 255, 0.8);
	border: 0.07em solid #ccc;
	border-radius: 0.5em;
}
.close-reply {
	position: absolute;
	top: 0;
	right: 0.3em;
	color: red;
	font-size: 2rem;
	font-weight: bold;
	cursor: pointer;
}
textarea[name=post-comment-reply] {
	margin-top: 1em;
	margin-left: 1em;
	width: 85%;
	min-height: 4.5em;
	display: block;
}

/* ----- Link Preview----- */
.link-data {
	width: 100%;
	margin-top: 0.5em;
	border: 0.07em solid #ccc;
	border-radius: 0.2em;
	display: grid;
    grid-template-columns: 1fr;   /* single column */
    align-items: stretch;
}
.link-image img {
	width: 100%;
	object-fit: cover;
}
.link-title, .link-description {
	padding: 0.3em 0;
}
.link-site {
	position: relative;
	padding-bottom: 0.3em;
}
.link-site::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.5%; /* Centers the 95% width ( (100% - 95%) / 2 ) */
	width: 97%;
	padding-bottom: 0.3em;
	border-top: 0.07em solid #ccc
}
.link-site, .link-title, .link-description {
	padding-left: 0.5em;
}

/* ----- CONTAINER => MEDIA GALLERY----- */
/* CHATGTP */
/* Ensure the overall gallery structure */
.media-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    cursor: pointer;
}

.media-container {
    position: relative;
    overflow: hidden;
}

.media-container img, .media-container video, .media-container iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.15em;
	aspect-ratio: 4 / 3;
}

/* Base style for the media row */
.media-row {
    display: flex;
    gap: 0.1em;
    flex: 1; /* Allows the row to take remaining vertical space */
}

/* Base style for media containers within the row - they all initially have flex: 1 */
.media-row .media-container {
    flex: 1; /* Default: all children in the row take equal width */
}

/* --- Specific Layouts --- */

/* FOUR OR MORE IMAGES (This is where your issue is) */
/* The main container (first image) takes 60% height */
.media-gallery:has(.media-container:nth-child(n+4)) > .media-container:nth-child(1) {
    height: 60%;
}

/* The media row takes the remaining 40% height */
.media-gallery:has(.media-container:nth-child(n+4)) .media-row {
    height: 40%;
}

/* Now, inside the .media-row, adjust flex for specific items */
.media-gallery:has(.media-container:nth-child(n+4)) .media-row .media-container:nth-child(1) {
    /* This targets the *first* media-container inside the media-row.
       In your HTML, this is the second overall image.
       We want it to be wider, so give it a higher flex-grow value. */
    flex: 2; /* Adjust this value (e.g., 1.5, 2, 3) to control its width ratio */
}

.media-gallery:has(.media-container:nth-child(n+4)) .media-row .media-container:nth-child(2) {
    /* This targets the *second* media-container inside the media-row.
       In your HTML, this is the third overall image. */
    flex: 1; /* This will be half the width of the first one if flex is 2:1 */
}

.media-gallery:has(.media-container:nth-child(n+4)) .media-row .media-container:nth-child(3) {
    /* This targets the *third* media-container inside the media-row.
       In your HTML, this is the fourth overall image (the one with +3). */
    flex: 1; /* This will be equal width to the second one in the row */
}

/* Optional: Overlay styling for the "+X" */
.media-container.more .overlay {
    position: absolute;
	inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    font-weight: bold;
    border-radius: 0.15em;
}

/* Your existing "THREE IMAGES" rules (if they are working for 3 images, keep them) */
.media-gallery:has(.media-container:nth-child(1):nth-last-child(2)) > .media-container:nth-child(1) {
    height: 60%;
}
.media-gallery:has(.media-container:nth-child(3):nth-last-child(1)) .media-row {
    height: 40%;
}
/* For 3 images, the media-row will have 2 children, both with default flex: 1, so they'll be equal width, which seems desired for 3 images. */

/* Your other existing rules */
/* ONE IMAGE */
.media-gallery:has(.media-container:nth-child(1):nth-last-child(1)) .media-container {
	height: 100%;
}

/* TWO IMAGES */ /* Grok works */
.media-gallery:has(.media-container:nth-child(1):nth-last-child(1)):has(.media-row) {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    height: 100%; /* Ensure the gallery takes full height of its container */
}
.media-gallery:has(.media-container:nth-child(1):nth-last-child(1)):has(.media-row) .media-container {
    height: 50%; /* First media-container takes 50% of gallery height */
}
.media-gallery:has(.media-container:nth-child(1):nth-last-child(1)):has(.media-row) .media-row {
    height: 50%; /* Media-row takes 50% of gallery height */
}
.media-gallery:has(.media-container:nth-child(1):nth-last-child(1)):has(.media-row) .media-row .media-container {
    height: 100%; /* Media-container inside media-row fills its parent */
}

.modal {
	display: none;
	position: fixed;
	z-index: 6;
	padding: 1.5em;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,.9);
}
.modal img, .modal video, .modal iframe {
	margin: auto;
	display: block;
	max-width: 90vw;
	max-height: 90vh;
}
.close, .close-x, .prev, .next {
	position: absolute;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	cursor: pointer;
}
.close, .close-x {
	top: 20px;
	right: 30px;
}
.prev {
	top: 50%;
	left: 30px;
}
.next {
	top: 50%;
	right: 30px;
}

/* ----- CONTAINER => POST LIST----- */
.post-item, .post-tag {
	display: block;
	width: 100%;
}
.post-item-back {
	width: 50px;
	/* width: 3.125em; */
}
.post-item-back img {
	width: 40px;
	height: 40px;
	/* width: 2.4em;
	height: 2.4em; */
	cursor: pointer;
}
.post-item-title {
	margin-bottom: 0.7em;
}
.post-item-content {
	display: block;
}
.post-item-content-main p {
	/* text-indent: 3em; */
	margin-bottom: 1em;
}
.post-item-content-main ul {
	margin: 0.5em 0;
	list-style-position: inside;
	/* text-indent: 1.7em; */
}
.post-item-content-main iframe {
	width: 95%;
}

.published-date { margin-bottom: 1em; }
.published-date img {
	width: 0.6em;
}

.media-gallery {
	display: block;
	margin: 0.5em 0;
}

.post-tag { margin-top: 1em; }
.post-tag-title, .post-tag ul.post-tag-list li {
	display: inline-block;
	background: #ddd;
	padding: 0.2em 0.4em;
	border-radius: 0.2em;
}
.post-tag ul { list-style: none; }
.post-tag ul.post-tag-list {
	display: inline-block;
}
.post-tag ul.post-tag-list li {
	background: #eee;
}

/* ----- CONTAINER => POST FORM ----- */
.post-form-frame {
	width: 100%;
	margin: 0.5em 0;
	border: solid 0.07em #ccc;
	padding: 1em 0.9em;
	border-radius: 0.9em;
}
.post-title-textarea {
	width: 100%;
	min-height: 3em;
}
.post-toolbar {
	width: 100%;
}
.post-content-textarea {
	width: 100%;
	min-height: 23em;
	padding: 0.3em;
	border: 0.07em solid #ddd;
}
.post-excerpt-textarea {
	width: 100%;
	min-height: 10em;
}
.post-form-center {
	width: 100%;
	text-align: center;
	margin: 1em 0 0 0;
}
.intLink { cursor: pointer; }
img.intLink { border: 0; }

img.edit-text-img {
	height: 20px;
	width: 20px;
}

.hidden { display: none; }
.relative { position: relative; }

#hidden-upload-photo, #hidden-upload-media, #hidden-post-privacy {
	display: none;
	position: absolute;
	/* opacity: 0.8; */
	top: 5em;
	left: 45%;
	min-width: 20em;
	min-height: 7em;
	z-index: 6;
	padding: 1em;
	background: rgba(240, 248, 255, 0.8);
	border: 0.07em solid #ccc;
	border-radius: 0.5em;
}

/* ----- CONTAINER => TABS ----- */
.moderator-tabs {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}
.moderator-tabs a {
	text-decoration: none;
	color: gray;
	font-size: 1.1em;
}
.moderator-tabs::after {
	content: "";
	position: absolute;
	transform: translate(-50%, -50%);
}
.moderator-tabs-block { width: 100%; }
.moderator-tabs-item {
	width: 100%;
	align-items: stretch;
	margin-top: 1em;
}
.moderator-tabs-link { transition: all 0.3s; }
.tabone {
	color: rgb(22, 22, 22);
	transform: scale(1.1);
	border-bottom: 0.07em solid black;
}
.moderator-tabs-line { width: 100%; }
.line1 {
	/* display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%; */
}
.line2 {
	display: none;
	width: 100%;
}

/* ----- SIDEBAR ----- */
.sidebar-left { padding: 1em 0;}
.sidebar-right {padding: 1em 0 0 1.2em;}

.sidebar-left ul, .sidebar-right ul { list-style: none; }
.sidebar-left-item {
	height: 1em;
	width: 100%;
	margin-bottom: 0.5em;
}
.sidebar-left-item-image img {
	display: inline-block;
	float: left;
	margin-right: 0.5em;
	height: 0.9em;
	margin-top: 0.1em;
}
.sidebar-left-notification {
	display: none;
	color: red;
	padding: 0.1em 0.4em;
	border-radius: 0.8em;
	background: pink;
}
img.notification-icon {
	filter: grayscale(100%);
	cursor: pointer;
}

.sidebar-right-item {
	color: YellowGreen;
	width: 100%;
	border-top: 0.07em solid #f3f9ff;
	border-bottom: 0.07em solid #f3f9ff;
	padding: 0.2em 0 0.2em 0;
	margin-bottom: 0.5em;
}

.accordion {
	position: relative;
	cursor: pointer;
	transition: 0.4s;
}
.accordion-active, .accordion:hover {
	background-color: #f3f9ff;
}
.accordion-panel {
	display: none;
	overflow: hidden;
}
.accordion-icon {
	position: absolute;
	right: 0.5em;
}

.sidebar-right-list {
	margin-bottom: 1em;
	font-size: clamp(0.7rem, 1.1vw, 0.9rem);
}
.sidebar-right-list a { color: RosyBrown; }

/* ----- FOOTER ----- */
.footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-top: 0.07em solid #eee;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
.footer-left ul, .footer-center ul {
	display: flex;
	list-style: none;
}
.footer-left ul li {margin-right: 0.4em;}
.footer-left ul li:lastchild {margin-right: 0;}
.footer-center {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.footer-center ul li {margin-right: 0.4em;}
.footer-center ul li:lastchild {margin-right: 0;}
.footer-right ul {
	display: flex;
	list-style: none;
	align-items: center;
	justify-content: right;
}
.footer-right ul li img {
	height: 0.9em;
	margin-top: 0.1em;
}

.cookie-icon {cursor: pointer;}

.notification {
	z-index: 3;
	display: none;
	position: fixed;
	top: 5em;
	left: 50%;
	width: 20%;
	transform: translateX(-50%);
	padding: 0.2em 1em;
	background: #f3f9ff;
	border: 0.07em solid pink;
	border-radius: 0.5em;
}
.warning-head { /* warning-header */
	width: 100%;
	color: red;
	padding: 0.5em 0 0.5em 0;
	border-bottom: 0.07em solid #ccc;
}
.warning-body { /* warning-message */
	width: 100%;
	color: grey;
	padding: 0 0 0.5em 0;
	margin-top: 0.5em;
}
.exclamation {
	display: block;
	float: left;
	height: 1em;
	width: 1em;
	margin-right: 0.5em;
}
.warning-head-text {
	display: block;
	margin-left: 0.2em;
}

/* ----- FORM ----- */
.form-frame {
	border: solid 0.07em #ccc;
	padding: 0.3em 0.9em;
	border-radius: 0.9em;
	box-shadow: 0.09em 0.05em 0.05em pink;
}
.hr { 
	border-top: solid 0.07em #ccc;
	margin: 0.2em 0em;
}
.link-button {
	padding: 0.2em 0.5em;
	border-radius: 0.9em;
	background: orange;
}
.margin-top-bottom-02 { 
	width: 100%;
	margin: 0.2em 0em;
}

textarea:focus, input:focus{outline: none;}

input:-webkit-autofill,
input:-webkit-autofill:focus {transition: background-color 600000s 0s, color 600000s 0s;}
input[data-autocompleted] {background-color: transparent !important;}

input[name=term] {
	box-sizing: border-box;
	text-indent: 1.5em;
	width: 100%;
	padding: 0.5em 1em;
	border: #ddd 0.07em solid;
	border-radius: 1.0em;
}
input[type=search]:focus {box-shadow: 0.1em .07em .07em #ddd;}

input[name=name],
input[type=email],
input[type=password] {
	padding: 0.5em 1em;
	border: #ddd 0.07em solid;
	border-radius: 1.0em;
}
input[name=name]:focus,
input[type=email]:focus,
input[type=password]:focus {box-shadow: 0.1em .07em .07em #ddd;}

input[name=exam] {
	opacity: 0;
	width: 0;
	position: absolute;
	top: -30px;
}

input[class=input-submit] {
	padding: 0.5em 1em;
	cursor: pointer;
	border: none;
	border-radius: 0.8em;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	background-color: #ccc;
}
input:hover[class=input-submit] {
	border-radius: 0.8em;
	background-color: #bbb;
	box-shadow: 0.1em .05em .05em #aaa;
}
input:disabled:hover[class=input-submit] {
	border-radius: 0.8em;
	background-color: #fff;
}

::placeholder {
	color: #ddd;
	opacity: 1;
}

[data-tip] {position:relative;}
[data-tip]:before {
	content:'';
	/* hides the tooltip when not hovered */
	display:none;
	content:'';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #1a1a1a;	
	position:absolute;
	top:35px;
	left:35px;
	z-index:2;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:after {
	display:none;
	content:attr(data-tip);
	position:absolute;
	top:40px;
	left:0px;
	padding:5px 8px;
	border: 0.06em solid #1a1a1a;
	z-index:3;
	background: #fff;
	font-size: 0.75em;
	height:18px;
	line-height:18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space:nowrap;
	word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {display:block;}

[contenteditable=true]:empty:before, [contenteditable=plaintext-only]:empty:before {
  content: attr(placeholder);
  pointer-events: none;
  color: #ddd;
  display: block; /* For Firefox */
}

/* ----- RESPONSIVE ----- */
/*/ MOBILE (max-width 390px) => iPhone 12 Pro /*/
@media screen and (max-width: 24.375em) {
	.nav, .footer, .container {padding: 0em 0.2em;}
	ul.sidebar-right-list {columns: 2;}
}
/*/ MOBILE (max-width 430px) => iPhone 14 Pro Max /*/
@media screen and (max-width: 26.875em) {
	.nav, .footer, .container {padding: 0em 0.5em;}
	.logo {margin-right: 0.3em;}
	.search-box {display: none;}
	.search-icon-button {display: block;}
	.main-left {
		grid-template-columns: 1fr;
		width: 100%;
	}
	.main-right {grid-template-columns: 1fr 8fr;}
	.content-left {width: 100%;}
	.nets-post-list-item-form-toolbar-left ul li select {display: none;}
	.sidebar-right {width: 100%;}
	.notification {width: 50%;}
	.sidebar-left-item-text {display: none;}
	.sidebar-right {padding: 0;}
	.sidebar-right-item {text-align: center;}
	.marked {display:none;}
	.close-reply {right: 0;}
}
/*/ TABLETS (max-width 768px) => iPad Mini /*/
@media screen and (max-width: 48em) {
	.main-left, .main-right {width: 100%;}
	#language-placeholder, #set-language-button {text-align:center;}
	.content-right-one-column-block-left:after {content:none;}
	.notification {width: 30%;}
	input[name=term] {padding: 0.2em 0.5em;}
}
/*/ SCREENS (max-width 1140px) => Notebook /*/
@media screen and (max-width: 71.25em) {
	.single-column {width: 100%; padding: 1em;}
}

/* reversing => mobile first */
@media screen and (min-width: 24.376em) {
	ul.sidebar-right-list {columns: 2;}
}
@media screen and (min-width: 26.876em) {
	ul.sidebar-right-list {columns: 1;}
}
@media screen and (min-width: 48.001em) {
	ul.sidebar-right-list {columns: 2;}
}
@media screen and (min-width: 71.251em) {
	ul.sidebar-right-list {columns: 3;}
}