/* Some very big stuff? Dunno... */
/*Xmas Version*/

/*PM & Alerts menu in mobile*/
@media (hover: none) {
	#drafts_spacer {
		display: none;
	}
	#drafts_link::before {
		font: var(--fa-font-solid);
		content: "\f15c";
		margin-right: 2px;
	}
	.pm_sending, .alerts_opts {
		color: white;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin: 10px 0 !important;
		font-weight: 400;
	}
	:is(.pm_sending, .alerts_opts) a::before {
		font-weight: 900;
	}
	:is(.pm_sending, .alerts_opts) a:hover {
		background: #888;
		text-decoration: none;
		color: #fff !important;
	}
	:is(.pm_bar, .alert_bar) .button {
		background: #b8f9c6;
	}
	:is(.pm_bar, .alert_bar) .button:hover {
		background: #57a681 !important;
	}
	.button {
		animation: none !important;
	}
	.pm_sending a, .alerts_opts a {
		font-weight: 400 !important;
		background: white;
		padding: 4px 6px;
		border-radius: 10px;
		color: #000 !important;
		text-shadow: none !important;
		transition: 0.2s ease;
	}

	:is(#top_info_pm, #top_info_alert) .button {
		font-size: calc(11px + (13 - 11) *(100vw - 320px) / (3840 - 320));
		padding: 4px 6px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		height: auto;
	}
}

@media (hover: none) and (max-width: 1920px) {
	.quickbuttons > li > a {
		font-size: calc(14px + (16 - 14) * (100vw - 320px) / (1920 - 320)) !important;
	}
}

@media (max-width: 720px) and (orientation: portrait) {
	/*Tree gif*/
	#category_1_boards {
		background-size: calc(900px + (1300 - 900) * (100vw - 320px) /(900 - 320));
		background-position-y: 50px;
	}
}


/*changed: orig. 900px*/
@media (min-width: 1300px) {
/*### changed to accommodate padding to viewport width, original 50px ####*/
.inner_wrap {
	 padding-left: 10vw;
	 padding-right: 10vw;
	 }
}
@media (max-width: 1500px) {
	.p-footer-inner {
		max-width: 85vw;
		}
}
/*changed: added for button list in message navigation header*/
@media (max-width: 1100px) {
	.pagesection .buttonlist {
	grid-column: 1/ span 2;
	grid-row: 2;
	  }
}
/*changed: added to always display menu in landscape*/
@media screen and (min-width: 721px) and (orientation: landscape) {
	#mobile_user_menu, #mobile_generic_menu_1, #mobile_generic_menu_1_tabs, #admin_submenus {
	  display: block !important;
		 }
/*adjusted index.template.php to add this class to hide in landscape*/
  .logged_out {
	  display: none;
	}
}

@media screen and (min-width: 856px) and (max-width: 970px) {
  .lastpost {
	  width: 25%;
	}
  .boardindex_table .info {
	  width: calc(51% - 80px);
	}
}

/*changed: added for mobil usage, menu is a nightmare!!!*/
@media screen and (min-width: 801px) and (orientation:portrait) {
#mobile_user_menu, #mobile_generic_menu_1, #mobile_generic_menu_1_tabs, #admin_submenus {
	  display: block !important;
		 }
  .logged_out {
	  display: none;
	}
}

@media screen and (min-width: 721px) and (orientation: landscape) {
	
.dropmenu li i {
	  min-width: 1.5em;
	  text-align: center;
	} 
}
/*changed: added*/
@media (max-width: 900px) {
/*changed: added*/
	iframe {
		width: 100% !important;
	}
/*changed: added*/
  .twitter-tweet {
		max-width: 100% !important;
	}
  .embedder_media {
		max-width: 100% !important;
	}
}

/*changed: added to show textmenu in main_menu again*/
@media screen and (max-width: 800px) and (orientation: portrait) {
.dropmenu .textmenu {
  display: block;
  }
.menu_name {
	 display: none;
  }
}

/*changed: added*/
@media screen and (min-width: 721px) and (max-width: 800px) and (orientation: portrait) {

.button, .inline_mod_check {
  font-size: 0.8em;
}
.button_moderate .textmenu {
	display: inline-flex;
}
.amt {  
	min-width: calc(var(--font-size-txt-normal) + 8px);
	height: calc(var(--font-size-txt-normal) + 8px);
}

.textmenu .amt {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: calc(var(--font-size-txt-mobil) + 2px);
	height: calc(var(--font-size-txt-mobil) + 2px);
	border-radius: 50px;
	top: 0;
	right: 0;
	padding: 5px;
	text-indent: 0;
}

  #banner {
		grid-row-gap: 7px;
		padding-bottom: 15px;
		 }
/*transparent background for popup windows other than menus */
	 #smf_popup .popup_window {
		background: none !important;
		padding: 0;
		min-height: fit-content !important;
		 }
	.main_icons.hide_popup::before {
		font-size: calc(var(--font-size-txt-mobil) + 4px);
		 }

/*changed: added for moderation buttonstrip (move, sticky, remove etc)*/
	 .button {
		 margin-left: 0px !important;
		 }

/*############################## Test ########################################*/
	 /*changed: added, intermediate solution for menu disappearing when burger menu closed in mobile view */

  .generic_menu {
	background: none;
	border: none;
	  }

	#main_menu .popup_container, #genericmenu .popup_container, #adm_submenus > .popup_container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(40, 64, 80, 0.5);
	z-index: 5;
	border-radius: 10px;
	}
.menu_icon {
	display: inline-block;
	background: url(../images/icons/menu_3.svg) no-repeat;
	align-self: flex-end;
	height: 24px;
	width: 24px;
	background-size: cover;
	background-position: center;
	order: 2;
	margin: 10px 5px 15px 20px;
	z-index: 9;
	}
.popup_window, #main_menu .popup_window, genericmenu .popup_window {
	position: relative;
	z-index: 99;
	height: fit-content;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
	border: 1px solid #777;
	border-radius: 10px 10px 17px 17px;
	min-height: 285px !important;
	/* max-height: 5em; */
	overflow-x: hidden !important;
	overflow-y: scroll !important;
	-webkit-overflow-scrolling: touch;
	background: #6c6c6cf0;
	/*! background-image: linear-gradient(to bottom, #e2e9f3 0%, #fff 70%); */
	top: 15%;
	background: linear-gradient(to right, rgba(98, 98, 98, 0.95), rgba(125, 125, 125, 0.95));
	margin: 0 auto;
	text-overflow: ellipsis;
	width: 25em;
	}	
.popup_heading {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	grid-auto-flow: column;
	grid-column-gap: 10px;
	align-items: center;
	background: url(../images/Chems/Overlay/Snowcaps6.svg) repeat-x;
	background-size: 234px;
	background-color: #d7594c;
	border-radius: 8px 8px 0 0;
	padding: 5px 10px;
	font-weight: bold;
	font-size: 16px;
	color: white;
	position: sticky;
	top: 0;
	z-index: 9999;
	}	
.hide_popup {
	justify-self: end;
	grid-column: 3;
	}	
#mobile_user_menu ul li a, #mobile_generic_menu_1 ul li a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	}
 .popup_window {
	max-width: 35em !important;
	border-radius: 10px 10px 17px 17px !important;
	border: none !important;
	max-height: fit-content !important;
	}
.subsections > a::after {
	content: "\f107";
	font-family: "font awesome 6 free";
	font-style: normal;
	font-weight: 900;
	margin-left: auto;
	margin-right: 10px;
	}	
.dropmenu li, .dropmenu li:hover, .dropmenu li a, .dropmenu li a:hover, .dropmenu li a.active, .dropmenu li a.active:hover, .dropmenu li:hover a.active, .dropmenu li ul, .dropmenu li li, .dropmenu li li a {
	width: 100%;
	position: relative;
	padding: 0;
	margin: 0;
	border-left: 0;
	border-right: 0;
}	
.help .popup_heading {
	grid-column: 1;
}
.dropmenu {
	padding: 0 5px !important;
	/*changed: added*/
	flex-direction: column;
	margin-top: 10px;
}
.dropmenu li > a {
  padding: 5px 5px 5px 10px !important;
  border-radius: 25px !important;
  text-shadow: 1px 1px 2px black;
}
 .dropmenu li a.active  {
	background: #484848;
}
/* dropdown arrows */
.subsections > a:after {
  content: "\f107";
  font-family: "font awesome 6 free";
  font-style: normal;
  font-weight: 900;
  margin-right: 10px;  
  justify-self: end;
 }
/* sub menu general design level */
.dropmenu li ul {
	background: #e6e6e6 !important;
	border-radius: 10px !important;
 }
.dropmenu li ul ul {
	margin: 0 !important;
}	
.dropmenu ul li ul li {
	background: #c7d7c5 !important;
	border-radius: 0 !important;
}
.dropmenu ul, .dropmenu ul li ul {
	margin-left: 15px !important;
	width: 90% !important;;
}
.dropmenu li li a {
	color: black !important;;
}
.dropmenu li ul li {
	background: none !important;
}
/* grid for symbols and links */
#mobile_user_menu ul li a, #mobile_generic_menu_1 ul li a {
align-items: center;
display: flex;
flex-wrap: wrap; 
}
	
.dropmenu > li, #top_info > li {
	/* font-size: calc(0.9em + (3 - 0.9) * (100vw - 320px) / (3840 - 320));*/
	 font-size: var(--font-size-txt-normal);
}
.dropmenu li, .dropmenu li a {
	color: white;
	border: none !important;
	position: relative;
}
.subsections ul li ul {
	 border-radius: 0 !important;
	 margin-left: 50px !important;
	 padding-left: 0 !important;
}
/*#### hover etc. effect level #### */
	  .dropmenu li:hover a {
			 background: none!important;
		}	
	  .dropmenu li a:hover, .dropmenu li a:focus, .dropmenu li:hover a {
			 color: black;
			 text-shadow: none;
	}
	  .dropmenu li:hover, .dropmenu li:focus {  
			 background: white !important;
			 border: none !important;
			 color: black !important;
			 font-weight: bold;
			 text-shadow: none;
}
.dropmenu li:hover a {
	background: none!important;
}	
.subsections a, .dropmenu li, .dropmenu li a:hover {
	border-radius: 10px !important;
}	
.subsections ul li a:hover {
	background: white!important;
}
.dropmenu li ul li:hover {
		background: none !important;
}
	
}

/*##########################################################################################*/

/*#### changed: added to make it larger than the vw ratio for forum width below 1920px ###*/
@media (min-width: 1900px) {
	  .p-body-inner {max-width: 70.325vw;}
}

/*placeholder for former @media 600px*/

@media (min-width: 856px) and (max-width: 1024px) {

	.lastpost {
/*#### changed to get min colum width ###*/
		/*width: 20%;*/
		margin: 3px 0 0 5px;
 }
	#alerts .alert_time {
		display: none;
 }
	#alerts .alert_inline_time {
		display: block;
	}
}

/* Still not enough data or people to test this... */
/* This needs more data and this range is probably for iPad Air (alike) tablets... */
@media (min-width: 721px) and (max-width: 855px) {
	.lastpost {
		margin: 0 0 0 20px;
	  width: 30% !important;
	}
	.board_stats {
		display: none;
	}
	#alerts .alert_time {
		display: none;
	}
	#alerts .alert_inline_time {
		display: block;
	}
}
/*changed: added to show textmenu in landscape when still on mobile burger menu*/
@media (min-width: 0px) and (max-width: 720px) and (orientation: landscape)
{
	  .dropmenu .textmenu {
	display: block;
		 }  
}

@media (min-width: 720px) and (max-width: 799px) {
	/* Calendar */
	#event_time_options {
		width: 44%;
	}
	#event_title {
		padding: 0;
	}
	#evtitle {
		width: 98%;
	}
	.event_options_left, .event_options_right {
		display: block;
		max-width: unset;
		width: unset;
	}
	#event_title input[type="text"] {
		width: 100%;
	}
	#post_event #event_board select {
		width: calc(100% - 90px);
		max-width: unset;
	}
}

/*changed: added */
@media (min-width: 720px) and (max-width: 881px) and (orientation: landscape) {
		#banner {
		 grid-row-gap: 20px;
		 padding-bottom: 20px;
		 }
  .logged_out {
	  display: none;
	}
}

/*---------------------------------------------------------------------------------------*/

/* We have shared things... */
@media screen and (max-width: 720px) {
  /* Generic Classes for Customizations */

	#news {
		width: 97%;
	}

	#search_form select {
		width: initial;
	}

	.dropmenu .textmenu {
		display: block;
	}

	.mark_read li {
		margin: 5px 2px;
	}

	.mark_read .button {
		height: 40px;
		border-radius: 5px;
		max-width: 94px;
		line-height: 1.3;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 8px;
		word-break: break-word;
		word-wrap: break-word;
	}

	.mark_read i {
		font-size: 1.3em;
		margin-right: 8px;
	}
	#markread .button::before {
		content: "\f058";
		font-family: "Font Awesome 6 Free";
		font-size: 1.3em;
		margin-right: 8px;
	}

#basicinfo .infolinks {
	transition: 0.3s ease;
	padding: 5px;		
	background: #eaeaea;
	border-radius: 3px;
	font-weight: 600;
}
#basicinfo .infolinks:hover {
	text-decoration: none;
	background: #ddd;
}
.infolinks::after {
	justify-content: center;
	align-items: center;
	font-family: "Font Awesome 6 Free";
	display: flex;
	font-size: 1.5em;
	text-decoration: none;
	color: #777;
}
.infolinks.addBuddy::after {
	content: "\f234";
}
.infolinks.removeBuddy::after {
	content: "\f503";
}
.infolinks.sendPM::after {
	content: "\f31c";
}
.infolinks.showDrafts:after {
	content: "\f573";
}
.infolinks.showPosts::after {
	content: "\f15c";
}
.infolinks.showStats::after {
	content: "\e473";
}

.timer {
	max-width: 100% !important;
}

img.theme_thumbnail {
	max-width: 100%;
	height: auto;
}
/*changed: added search font size*/
.action_search2 .windowbg .list_posts, .action_search2 .windowbg .block  {
	 font-size: var(--font-size-txt-mobil)
}
/*changed added*/
#member_letters {
	 margin-top: 5px;
	 padding: 5px;
}
#users_name {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#users_name p {
  white-space: unset;
  position: relative;
  margin: 0;
}

/*changed: added*/
#social_nav svg {
	height: var(--size-social-icon-mobile);
}
/*changed: added background image position*/
.bg_image::before {
	background-position-x: 50%;
}

/*changed: added for pm Avatar*/
#pmAvatar {
	display: flex;
	margin: 0;
}
#pmAvatar .avatar {
	width: clamp(50px, calc(50px + (60 - 50) * (100vw - 320px) / (720 - 320)), 60px);
}
.button_moderate .textmenu {
	display: inline-flex;
}

/*changed: added for message indicator etc.*/
.amt {  
	min-width: calc(var(--font-size-txt-normal) + 6px);
	height: calc(var(--font-size-txt-normal) + 6px);
}


#admin_content .popup_window {
  top: 0%;
}		

.roundframe {
	 font-size: var(--font-size-txt-mobil);
}

.textmenu .amt {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: calc(var(--font-size-txt-mobil) + 2px);
	height: calc(var(--font-size-txt-mobil) + 2px);
	border-radius: 50px;
	top: 0;
	right: 0;
	padding: 5px;
	text-indent: 0;
}


/*####### changed: added board_icon dimensions for index mobile #######*/
/*to make green left border stretch to bottom until dotted line*/
.boardindex_table .info {

}
.boardindex_table .board_icon {
	width: var(--width-boardindex-icons-cell-mobile);
}
.board_icon a {
	width: var(--width-boardindex-icons-mobile);
}
#indicator {
	width: var(--size-indicator_mobile);
	height: var(--size-indicator_mobile);
}

/*#######################################################################*/

#banner {
		/* grid-row-gap: 20px; */
		 padding-bottom: 10px;
		 }

/*#### changed: added for icon legend ####*/
/*icons size next to topic name */
.info .main_icons::before {
	 font-size: calc(var(--font-size-txt-mobil) + 4px);
}
#icon_legend {
	display: grid;
	grid-template-columns: max-content max-content;
}
#icon_legend span {
	grid-template-columns: calc(var(--font-size-txt-mobil) + 9px) auto;
	font-size: var(--font-size-txt-mobil);
}
/*#######################*/

/*#######  changed: added font sizes #########*/

.profile_user_links li, #admin_content, .credits_text, .quickbuttons > li > a, #topic_header a, .signature, .attachments, .under_message, .custom_fields_above_signature, .custom_fields_below_signature, .modified, .keyinfo h5 a, .keyinfo h5 a strong, #display_head p, .subject_title a {
	font-size: var(--font-size-txt-mobil);
}
.button, .inline_mod_check {
	 font-size: calc(11px + (13 - 11) *(100vw - 320px) / (3840 - 320));
}
/*changed: added for link tree size*/
.navigate_section ul {
	  font-size: calc(12px + (15 - 12) * (100vw - 320px) / (720 - 320));
}
.nav_page_button {
	 min-width: var(--size-nav-page-circle-mobile);
	 height: var(--size-nav-page-circle-mobile);
	 font-size: calc(12px + (14 - 12) *(100vw - 320px) / (720 - 320));
}
.pagelinks-more.expand_pages {
	 min-width: var(--size-nav-page-more-mobile);
}
.p-title-value {
	 font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (720 - 320)));
}
.info .subject {
	 font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (720 - 320)));
}
.board_description {
	 font-size: calc(13px + (15 - 13) * (100vw - 320px) / (720 - 320));
}
#description_board h3 {
	 font-size: calc(23px + (29 - 23) * (100vw - 320px) / (720 - 320));
}

.display_title {
	 font-size: calc(18px + (28 - 18) * ((100vw - 320px) / (720 - 320)));
}
.message_index_title a {
	 font-size: calc(16px + (18 - 16) * (100vw - 320px) / (720 - 320));
}
.lastpost {
	 font-size: clamp(12px, calc(12px + (14 - 12) * (100vw - 320px) / (720 - 320)), 14px);
}
.poster h4 {
	 font-size: calc(14px + (17 - 14) * (100vw - 320px) / (720 - 320));
}
.post, .bbc_standard_quote {
	 font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (720 - 320)));
}
blockquote cite {
	 font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (720 - 320)));
}
#upshrink_stats .subbg {
	 font-size: var(--font-size-txt-mobil);
}
#developed .credits_info {
	 font-size: calc(13px + (15 - 13) * (100vw - 320px) / (720 - 320));
}
#footer_credits .develop_small {
	 font-size: calc(11px + (12 - 11) * (100vw - 320px) / (720 - 320));
}

#top_info_alert i, #top_info_pm i {
	 font-size: calc(21px + (25 - 21) * (100vw - 320px) / (720 - 320));
}
/*##########################################################*/
/*changed: added */
.subsections {
	width: 100%;
}
/*################ changed: added: mobile menu experimentation  #######################*/

	#smf_popup .popup_window {
		background: none !important;
		padding: 0;
		min-height: fit-content !important;
	  }
  .main_icons.hide_popup::before {
		font-size: calc(var(--font-size-txt-mobil) + 10px);
	  }
  .generic_menu {
		background: none;
	  }
  #mobile_user_menu .popup_window {
		padding: 0;
	  }

  .popup_window {
		max-width: 27em !important;
		border-radius: 10px 10px 17px 17px !important;
		border: none !important;
		max-height: fit-content !important;
	}

/*changed: moved from further down and adapted */
.popup_heading {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	grid-auto-flow: column;
	grid-column-gap: 10px;
	align-items: center;	  
	background: url(../images/Chems/Overlay/Snowcaps6.svg) repeat-x;
	background-size: 180px;
	background-color: #d7594c;
	border-radius: 8px 8px 0 0;
	padding: 5px 10px;
	font-weight: bold;
	font-size: 16px;
	color: white; 
	position: sticky;
	top: 0;
	z-index: 9999;
}
.popup_content {
  border-radius: 0 0 8px 8px; 
}
.hide_popup {
  justify-self: end;
  grid-column: 3;
}
.help .popup_heading {
	grid-column: 1;
}
.dropmenu {
	padding: 0 5px 5px 5px !important;
	margin-top: 10px;
}
.dropmenu li > a {
  padding: 5px 5px 5px 10px !important;
  border-radius: 25px !important;
  text-shadow: 1px 1px 2px black;
}
 .dropmenu li a.active  {
	background: #484848;
}
/* dropdown arrows */
.subsections > a:after {
  content: "\f107";
  font-family: "font awesome 6 free";
  font-style: normal;
  font-weight: 900;
  margin-right: 10px;  
  margin-left: auto;
 }
/* sub menu general design level */
.dropmenu li ul {
	background: #e6e6e6 !important;
	border-radius: 10px !important;
 }
.dropmenu li ul ul {
	margin: 0 !important;
}	
.dropmenu ul li ul li {
	background: #c7d7c5 !important;
	border-radius: 0 !important;
}
.dropmenu ul, .dropmenu ul li ul {
	margin-left: 15px !important;
	width: 90% !important;;
}
.dropmenu li li a {
	color: black !important;;
}
.dropmenu li ul li {
	background: none !important;
}
/* grid for symbols and links */
#mobile_user_menu ul li a, #mobile_generic_menu_1 ul li a {
/*changed: added*/
	align-items: center;
	display: flex;
	flex-wrap: wrap; 
}	
.dropmenu > li, #top_info > li {
	font-size: var(--font-size-txt-mobil);
}
.dropmenu li, .dropmenu li a {
	color: white;
	border: none !important;
	position: relative;
}
.subsections ul li ul {
	 border-radius: 0 !important;
	 margin-left: 50px !important;
	 padding-left: 0 !important;
}
/*#### hover etc. effect level #### */
	  .dropmenu li:hover a {
			 background: none!important;
		}	
	  .dropmenu li a:hover, .dropmenu li a:focus, .dropmenu li:hover a {
			 color: black;
			 text-shadow: none;
	}
	  .dropmenu li:hover, .dropmenu li:focus {  
			 background: white !important;
			 border: none !important;
			 color: black !important;
			 font-weight: bold;
			 text-shadow: none;
}
.dropmenu li:hover a {
	background: none!important;
}	
.subsections a, .dropmenu li, .dropmenu li a:hover {
	border-radius: 10px !important;
}	
.subsections ul li a:hover {
	background: white!important;
}
.dropmenu li ul li:hover {
		background: none !important;
}
/*#######################################################################*/

#message_index_jump_to {
	display: flex !important;;
}
/*######### changed: added for mobile info center #########*/
#upshrink_stats {
	grid-template-columns: 100%;
	grid-template-rows: repeat(auto-fit, minmax(0, auto));
	grid-row-gap: 10px !important;
	grid-column-gap: 0;
}
.boardindex-events {
	grid-column: 1;	
	grid-row: 2;
}
.boardindex-events .windowbg, .boardindex-events h4 {
  padding: 10px 0 0 0;
}

.databox-content {
  font-size: var(--font-size-txt-mobil);
}

#forum_stats {
	grid-column: 1 / span 3;
	grid-row: 3;
	width: 100%;
}

#forum_stats .card {
  padding: 10px 0 0 0;
  grid-column: 2;
}
.users-online {
  grid-column: 1;
  grid-row: 1;
}
/*#####################################################*/
/*changed: added*/
.dropmenu {
	 flex-wrap: wrap;
	}

/*changed added*/
.forumtitle img {
	 padding-right: 0;
	}  

/*changed: added */
#boardindex_table .lastpost .node-extra-icon {
	margin-right: 0.5em;
}
/*changed: added avatar icon size test*/
.node-extra-icon {
	padding: 3px;
}
.node-extra-icon .avatar {
	/*changed: from 50px */
	width: var(--circle-avatar-mobile);
	height: var(--circle-avatar-mobile);
}

/*#### changed: added class #########*/
.visitor {
/*	  width: 75px;*/
	  width: fit-content;
}
.message_index_title {
	margin: 10px 0 10px 0;
}
/* changed: added to center align "last post" in header by resetting min-height 2em to zero */
#topic_header .lastpost {
	align-content: center;
	min-height: 0;
}
/*##############################*/

/* changed: added Test "last post" break row*/
#topic_container .windowbg {
flex-wrap: wrap;
padding: 0 8px;
border: none;
border-bottom: 4px solid #c8abab;
}

/*############ changed: added class modification to make main content section larger ########*/
#main_content_section {
	  width: 98% !important;
	/*  background: rgba(0, 0, 0, 0.50);*/
	border-radius: 10px;
	/*  padding: 6px 0; */
	/*  backdrop-filter:blur(5px); */
/* weird but useful behavior: with blocked backdrop-filter .popup_container is now limited to the mobile_generic_menu_1 content area as should be, so that popup window only pops up in that area */
/*without this filter it covers all of page*/
}
/* #### changed: min different than in index.css, else dropdown menus would go beyond page, see also under #####*/
.top_menu {
  /* min-width: 0;*/
}
/* #### changed: added class so that popup containers would not auto open #####*/
#adm_submenus > .popup_container {
display: none;
}

	.hide_720 {
		display: none;
	}
	.block_720 {
		display: block;
	}
	.inlineblock_720 {
		display: inline-block;
	}
	.hide_480 {
		display: none;
	}
	.block_480 {
		display: block;
	}
	.inlineblock_480 {
		display: inline-block;
	}
	.main_icons_home {
		display: none!important;
	}
	/* This is general */
	#main_menu .popup_container, #genericmenu .popup_container {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(40, 64, 80, 0.5);
		border-radius: 10px; /*changed: added */  
	}
	#main_menu .popup_heading, #genericmenu .popup_heading {
		display: block;
	}
	#main_menu {
		margin: 0;
	}

	.popup_window, #main_menu .popup_window, genericmenu .popup_window {
		position: relative;
		z-index: 99;
		width: 75%; /*changed from 90%*/
		height: fit-content;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
		border: 1px solid #777;
		border-radius: 10px 10px 17px 17px;
		min-height: 285px !important;
	  /* max-height: 5em;*/
		overflow-x: hidden !important;
		overflow-y: scroll !important;
		-webkit-overflow-scrolling: touch;
		background: #6c6c6cf0; /* fallback for some browsers */
	  /* background-image: linear-gradient(to bottom, #e2e9f3 0%, #fff 70%);*/
		background: linear-gradient(to right, rgba(98, 98, 98, 0.95), rgba(125, 125, 125, 0.95));
		top: 15%;
		margin: 0 auto;
		text-overflow: ellipsis;
 }
	h1.forumtitle a, h1.forumtitle {
		padding: 5px 0 0 0;
		max-width: 300px;
		/*margin: 10px 0;*/
	}
	.board_moderators {
		display: none;
	}

	#pm_menu, #alerts_menu, #profile_menu {
/*#### changed: blocked position value since they caused the profile menue go outside page ####*/
	/* left: 0; */
		right: 0;
		border-radius: 0;
	/* width: calc(25em - 17px); */
	/* max-width: calc(100vw - 20px); */
		max-width: 85vw;
		width: 27em;
} 
/*changed: blocked*/
/*	#profile_menu {
	width: 100%;
	}*/

/*changed: added */	
#pm_menu, #alerts_menu {
	  width: 21em !important;
	  min-width: 0;
	}
	.generic_menu {
		display: none;
	}
	#mobile_user_menu .dropmenu,
	div[id^="mobile_generic_menu_"] .generic_menu {
		display: flex;
	}
	.menu_icon {
		display: inline-block;
		background: url(../images/icons/menu_3.svg) no-repeat;
	/* #### changed: added ####*/
	align-self: flex-end;
	z-index: 9;
	height: 24px;
	width: 24px;
	background-size: cover;
	background-position: center;
	order: 2;
	margin: 10px 5px 15px 20px;
}
/*##### changed: added width so that avatar on front page is smaller on smaller screens #####*/
#profile_menu_top > img.avatar {
	width: clamp(3em, 9em, 8vw);
	height: auto;
	margin: 5px 0 5px 0;
	margin: 0 auto;
}

	.dropmenu li, .dropmenu li:hover,
	.dropmenu li a, .dropmenu li a:hover,
	.dropmenu li a.active, .dropmenu li a.active:hover, .dropmenu li:hover a.active,
	.dropmenu li ul, .dropmenu li li, .dropmenu li li a {
		width: 100%;
		padding: 0;
		margin: 0;
		border-left: 0;
		border-right: 0;
		position: relative;
	}
	.dropmenu li a, .dropmenu li:hover a {
		padding: 5px 0;
	}
	.dropmenu li a, .dropmenu li a:hover {
		text-indent: 10px;
		border-radius: 0;
	}
	.dropmenu li a, .dropmenu li:hover a,
	.dropmenu li a.active, .dropmenu li a.active:hover,
	.dropmenu ul li a:hover, .dropmenu li li a:hover,
	.dropmenu ul li li:hover, .dropmenu li ul,
	.dropmenu li li:hover ul, .dropmenu li li ul {
		border-left: 0;
		border-right: 0;
	}
	.dropmenu ul li a {
		width: auto !important;
	}
	.dropmenu li ul,
	.dropmenu li li:hover ul, .dropmenu li li ul {
/*changed */
	  /* position: relative;*/
		border-radius: 0;
		left: 0;
	}
	#footer ul {
		width: 100%;
		float: none;
	}
	#footer li {
		display: block;
		float: none;
		text-align: center;
	}

/* ### changed: added footer credits position center ###*/
	 #footer_credits {
		justify-items: center;
		grid-row: 1;
		grid-column: 1;
	}
	#footer_standard {
	  grid-row: 2;
	  grid-column: 1;
	}
 .p-footer-inner {
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-row-gap: 20px;
	}
/*##########################################*/

/*######### changed: added for under_message reply, edit buttons ######### */

.under_message {
	 display: flex;
	 flex-wrap: wrap;
}
.quickbuttons {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	float: none;
	margin: 5px;
	margin-left: auto;
}
#likes {
	 margin-right: auto;
}
/*##########################################*/

	/* New Mobile Action Mod Pop (Test) */
	.moderationbuttons_check {
	 display: none;
	}
	.moderationbuttons_mobile_check {
		display: inline-block;
	}
	#mobile_action .button, #mobile_moderation .button, #mobile_action .top_menu {
		width: 100%;
		margin: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		text-indent: 5px;
	}
	#mobile_action .button, #mobile_moderation .button {
		line-height: 2.8em;
		height: auto;
		display: flex;
		border-radius: 50px;
		width: 85%;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-top: 5px;
		font-weight: 700;
	}
	#mobile_action .notify_dropdown {
		top: 0 !important;
		left: 0 !important;
		position: relative;
	}
	#mobile_action .top_menu {
		padding: 0;
		margin: 0 auto;
	}
	#mobile_action .notify_dropdown a {
		border-bottom: 1px solid #999;
	}
	#mobile_action .notify_dropdown a:last-of-type {
		border-bottom: none;
	}
	#mobile_action .notify_dropdown span {
		display: none;
	}
	.mobile_buttons {
		margin: 5px 0;
	}
	.mobile_buttons .button {
		margin: 0;
	}
	.pagesection .buttonlist, #moderationbuttons {
	 display: none;
	}
	.mobile_buttons {
		display: block;
	  /*changed: added*/ 
		width: 100%;
		text-align: end;
		padding: 5px;
		margin: 0;
	}

	#mobile_buttons_bottom {
		background: var(--bg-board-head);
	}

	/* Stuff */
	.infolinks {
		display: inline-block;
		margin: 5px 7px 0 0;
	}
	#registration .field_icons {
		float: left;
		margin: 5px 0 0 3px;
	}
	dl.register_form dt span {
		display: inline;
	}
	.button.qaction {
		width: initial;
		margin: 0;
	}
	.qaction {
		width: 40%;
		margin: 0 5px 0 0;
	}

	/* Menu */
	.quickbuttons li:hover ul {
		display: none;
	}

	/* General */
	.action_home {
		width: 100% !important;
	}
	#wrapper {
		width: 100%;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}
	#top_section {
		padding-left: 0;
		padding-right: 0;
	}
	#footer {
		padding: 10px;
	}
	#header {
		margin-left: 0;
		margin-right: 0;
	}
	#upper_section, #inner_section, #content_section {
		border-radius: 0;
	}
	#boardindex_table .stats {
		display: none;
	}
	.login {
		width: 100%;
	}
	.navigate_section .unread_links {
		width: 95%;
		float: left;
	}
  /*changed: blocked*/
	.unread_links {
	  /* display: none; */
	}
	.navigate_section .unread_links a {
		padding: 5px 0 5px 0;
		margin-right: 3px;
	}

	/* BoardIndex */
	.board_stats {
		display: none;
	}
	.info {
		width: calc(100% - 65px);
	}

/* ############## changed: added so that lastpost breaks row on smaller devices ############*/
	.lastpost {
		padding: 3px;
		display: grid;
		min-height: 2em;
		width: 100% !important;
		justify-content: right !important;
		align-items: center;
		text-align: right;
		margin: 0 !important;
}
.lastpost .moderation {
	 width: auto;
}
/*changed: added reset for HTML for lastpost border in topic index section*/
.noborder {
border: none;
}

.topic-item-content {
width: auto; 
/*### changed: added ###*/
justify-self: right;
text-align: right;
}
/* ##############################################################################*/

/*######## changed: added so that grid of Date and Posted By in lastpost are columns #############*/
.topic-item-details {
	grid-auto-flow: column;
	grid-gap: 8px;
	align-items: baseline;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	line-height: 1.2;
}

.started_by {
	grid-column: 1 / span 2;
	grid-row: 1;
	width: 100%;
}
.started_by:before {
	content: "Started by ";
}

.topic-item-time {
  /*margin-left: 3em;*/
	grid-column: 1;
	grid-row: 2;
}
.topic-item-poster {
  text-align: left;
	word-wrap: break-word;
	grid-column: 2;
	grid-row: 2;
}
/* added to reset grid layout for topic index, topic title must be removed in HTML and added to <div class="topic-item-details grid_flow_col"> */
.grid_flow_row {
	grid-auto-flow: row !important;
	row-gap: 0 !important;
	justify-items: right;
	}

/*###################################################################################*/

.moderation {
/*width: 10%;*/
}

.lpr_border {
	  /* border-top: 1px solid #ddd;*/
/*changed % added border*/
border-top: 2px dotted var(--color-index-border);
border-bottom: 4px double var(--color-index-border);
	}
	.lastpost p {
		margin: 5px;
	}
	span.postby {
		display: inline-block;
	}
	/* Stats Center */
	#ic_recentposts {
		margin: 0;
		width: 100%;
	}
	#upshrink_stats p.inline, #upshrink_stats p.last {
/*changed: blocked */
/*		padding: 5px;*/
	}

	/* MessageIndex */
	#messageindex .board_icon, #messageindex .lastpost {
		display: none;
	}
/*### changed from 5px ###*/
	#messageindex .info {
		padding: 0;
	}
	.info_block {
		display: block;
		width: 95%;
	}
	.moderation a {
		padding: 3px;
	}
	#topic_container .moderation .main_icons {
		display: none;
	}
	/* Unread */
	#unread .board_icon, #unread .lastpost {
		display: none;
	}

	/* Display (Topics) */
	.poster, .postarea {
	 width: 100%;
}
.poster {
	 display: flex;
	 align-items: center;
/*changed: 15px 0 10px 0*/
	 padding: 15px;
}
/*changed: width and height, changed name from .poster .user_info .avatar*/
.avatar_normal {
 /* width: 60px;*/
	display: none;
}
.avatar_mobile {
	 display: block !important;
	 width: calc(60px + (80 - 60) * (100vw - 320px) / (720 - 320));
	 margin-inline-end: 6px;
}
.poster .user_info {
	 text-align: start;
/*changed: added*/
	 align-self: flex-start; 
}
/*changed: added postcount*/
.poster .user_info>li:not(.poster-name):not(.icons):not(.membergroup):not(.postcount):not(.postgroup) {
	 display: none;
}


/*changed: added*/
.user_info, .user_info > li {
	  font-size: (var(--font-size-txt-mobil));
	  margin: 0;
	  margin-left: 5px;
}
	.postarea {
		margin: 0;
	/*changed from 0 10px*/
		padding: 0 15px;
	}
.postarea .inner {
	padding: 7px 0;
	border-top-width: 2px;
}
.keyinfo .subject_title {
	margin-top: 5px;
}
.signature {
	border-top-width: 2px;
}
.keyinfo h5 {
	padding: 0;
}

.post_wrapper {
/*changed from 0 12px 0 12px;*/
  padding: 0;
}

	.moderatorbar {
		margin: 0;
	}
	.keyinfo h5 .modified {
		float: none;
	}
	.bbc_img.resized {
		max-width: 250px;
		max-height: 300px;
	}
	img.icon, #forumposts .catbg img {
		display: none;
	}
	.user_info li.avatar, .user_info li.poster_ip {
		display: none;
	}
	.button.button_strip_mark_unread {
	  display: none;
	}
	.button.mobile {
		margin: 0 0 5px 0;
	}

	/* Profile */
	#admin_content .content {
		padding: 0;
	}
	#creator dt {
		width: 33%;
	}
	#creator dd {
		width: 65%;
	}
	#basicinfo, #detailedinfo {
		width: 100%;
	}
	#basicinfo {
		margin: 0 0 5px 0; /* For UX */
	}
	/* Buddies & Ignore List */
	#edit_buddies .buddy_custom_fields {
		display: none;
	}
	/* PersonalMessages */
	#personal_messages .pm_time, #personal_messages .pm_from_to {
		display: none;
	}
	#personal_messages .pm_inline_time {
		display: block;
		margin: 5px 0;
	}
	/* Alerts Page */
	#alerts .alert_text, #alerts .alert_time, #alerts .alert_buttons {
		display: block;
	}
	#alerts .alert_time {
		float: left;
	}
	#alerts .alert_text {
 /*changed*/
	/*	margin: 11px 0 0; */
	}
	#alerts .alert_buttons .quickbuttons {
		margin: 0 0 11px;
		display: block;
	}
	#alerts .alert_image {
		width: 60px;
	  /*changed: added width*/
	  width: var(--width-boardindex-icons-mobile) !important;
	}
	/* Post Screen */
	form#postmodify .roundframe, #post_event .roundframe {
		padding: 10px;
	}
	#post_header input {
		width: 100%;
	}
	#post_confirm_buttons .smalltext {
		display: none;
	}
	ul.post_options {
		padding: 0;
		margin: 0;
	}
	ul.post_options li {
		margin: 2px 5px 0 0;
		width: 48%;
	}
	/* Search */
	#searchform .roundframe {
		padding: 5px;
	}
	#advanced_search dt {
		text-align: left;
		width: 100%;
		float: left;
	}
	#advanced_search dd {
		width: auto;
	}
	#advanced_search dl#search_options {
		width: 100%;
	}
	input#searchfor, input#userspec {
		width: 75%;
	}
/*changed: added to show top pagesection on message level*/
.pagesection {
	display: flex !important;
}

	/* Hide me */

/*changed: removed  #main_content_section .navigate_section, .pagesection.top, #search_form */
	#inner_wrap, #smflogo, .nextlinks, #display_jump_to,
	#siteslogan, th.id_group, th.registered, th.posts, th.reg_group, th.reg_date, td.reg_group, td.reg_date,
	td.id_group, td.registered, td.posts:not(.unique), td.statsbar.posts,
	#member_list .ip, #member_list .last_active, #member_list .user_name,
	#approve_list .ip, #approve_list .date_registered, #group_members .date_registered, .time,
	#header_custom_profile_fields_field_type, #header_custom_profile_fields_active,
	#header_custom_profile_fields_placement, #custom_profile_fields .active, #custom_profile_fields .field_type, #custom_profile_fields .placement {
/*changed: removed !important*/
		display: none;
	}
	/* Generic Lists */
	#topic_notification_list .last_post, #topic_notification_list .started_by,
	#request_list .time_applied, #file_list .date, #ban_list .notes, #ban_list .reason, #ban_log .email,
	#mail_queue .priority, #attachments .posted {
		display: none;
	}

	/* Admin */
	.table_grid.half_content {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#private, #enclose {
		width: 95%;
	}
}

/* Tricky menu */
@media (min-width: 720px) {
	div[id^="mobile_generic_menu_"].popup_container {
/* #### changed: used !important and changed min-width from 481 to 720px in media query, else caused weird behavior with mobile menus when window size was reduced below 710 pixel */
/* #### menu would automatically open and overlay everything and could not be closed via x ####*/
		display: block; 
	}
	.boardslist {
		columns: 2;
	}

	.boardslist ul {
		page-break-inside: avoid;
	}
}
@media (max-width: 599px) {
	 #hq_info {
		display: none;
	}
#maintenance_mode .information {
	flex-wrap: wrap;
	justify-content: center;
	}
#maintenance_mode img {
	margin: 10px 0;
	}
}

@media (min-width: 480px) and (max-width: 560px) {
/*changed: added container*/
	/* Calendar */
	#event_time_options {
		width: 40%;
	}
	#event_title, #event_board {
		width: 100%;
	}
	#evtitle {
		width: 98%;
	}
}
/*----------------------------------------------------------------------------*/

/* Entry level phones */
@media (max-width: 480px) and (orientation: landscape) {
	#mobile_user_menu.popup_container, #mobile_generic_menu_1 {
	display: none;
  }
}

@media (max-width: 480px) {
  /* Generic Classes for Customizations */

.timer {
	max-width: 100% !important;
}
input, button, select {
	font-size: 1.2em;
}
.post_verification iframe {
	 transform: scale(0.8);
}
 .forum-stats-container {
	  grid-template-columns: auto !important;
	}

 #social_nav {
	  grid-column-gap: 10px;
		margin-bottom: 5px;
	 }

/*changed: added*/
.p-header-logo {
	align-self: flex-end;
}

/*######## changed: added forum stats order ######## */
.forum-stats-container #LatestMember {
	grid-row: 1;
	grid-column: 1;
}
#forum_stats #Members {
	grid-row: 2;
	grid-column: 1;
}
.forum-stats-container #Posts {
	grid-row: 3;
	grid-column: 1;
}
#forum_stats #Topics {
	grid-row: 4;
	grid-column: 1;
}
/*###################################################*/

/* #### changed: added for testing, aligns logo and burger menu to center ##### */
.inner_wrap {
align-items: center;
}

.popup_heading {
	font-size: 15px;
}

/*changed: added for mobile profile menue*/
.top_menu.visible {
  grid-template-columns: auto;
  justify-content: center;
}

/*changed: added social icons size*/

	.hide_480 {
		display: none;
	}
	.block_480 {
		display: block;
	}
	.inlineblock_480 {
		display: inline-block;
	}
/* This is general */
	#main_menu .popup_container, #genericmenu .popup_container {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(40, 64, 80, 0.5);
	}
	#main_menu .popup_heading, #genericmenu .popup_heading {
		display: block;
	}
	#main_menu {
		margin: 0;

	}

	.popup_window, #main_menu .popup_window, #genericmenu .popup_window {
		position: relative;
		z-index: 99;
/*changed from 90%*/
		width: 75%;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
		border: 1px solid #777;
		border-radius: 7px 7px 3px 3px;
		 min-height: 285px !important; 
		/*max-height: 10em;*/
		overflow-x: hidden !important;
		overflow-y: scroll !important;
		-webkit-overflow-scrolling: touch;
/*changed: removed background color and gradient*/
	/*	background: #6c6c6cf0; */ /* fallback for some browsers */ /*changed from #eff*/
	  /* background-image: linear-gradient(to bottom, #e2e9f3 0%, #fff 70%);*/ /*changed*/
		top: 15%;
		padding: 0;
		margin: 0 auto;
	}
/*changed: added*/
#admin_content .popup_window {
  top: 0%;
}		

	h1.forumtitle a, h1.forumtitle {
		padding: 5px 0 0 0;
		max-width: 300px;
		/*margin: 10px 0;*/
	}
	.board_moderators {
		display: none;
	}

/*######  profile menu ###########*/

  .profile_user_links ol {
		margin: 0 10px;
		clear: both;
		column-count: 2;
		display: grid;
		grid-template-columns: auto;
	  justify-content: center;
		grid-column-gap: 3em;
		grid-row-gap: 5px;
		padding: 5px;
}
/*### changed: see same changes under @media (max-width: 720)  ###*/

  #top_info .top_menu.visible {
	 display: block;
  }
  #pm_menu, #alerts_menu, #profile_menu {
	/*left: 0; */
		right: 0; 
		border-radius: 0;
	 /*  width: calc(25em - 17px); /*changed from 100% - 17px; */
	  /* max-width: calc(100vw - 20px);*/
	  width: 20em;
	  max-width: 85vw;
	  min-width: 0;
}
/* cahnged: blocked */
 /*  #profile_menu {
		width: 100%;
	}*/
	#pm_menu, #alerts_menu {
		padding-right: 9px;
	}
	.generic_menu {
		display: none;
	}
	#mobile_user_menu .dropmenu,
	div[id^="mobile_generic_menu_"] .generic_menu {
		display: flex;
	}
/* ### changed: burger menu ### */
	.menu_icon {
		display: inline-block;
		background: url(../images/icons/menu_3.svg) no-repeat;
	}

	.dropmenu li, .dropmenu li:hover,
	.dropmenu li a, .dropmenu li a:hover,
	.dropmenu li a.active, .dropmenu li a.active:hover, .dropmenu li:hover a.active,
	.dropmenu li ul, .dropmenu li li, .dropmenu li li a {
		width: 100%;
		padding: 0;
		margin: 0;
		border-left: 0;
		border-right: 0;
	}
	.dropmenu li a, .dropmenu li:hover a {
		padding: 5px 0;
	}
	.dropmenu li a, .dropmenu li a:hover {
		text-indent: 10px;
		border-radius: 0;
	}
	.dropmenu li a, .dropmenu li:hover a,
	.dropmenu li a.active, .dropmenu li a.active:hover,
	.dropmenu ul li a:hover, .dropmenu li li a:hover,
	.dropmenu ul li li:hover, .dropmenu li ul,
	.dropmenu li li:hover ul, .dropmenu li li ul {
		border-left: 0;
		border-right: 0;
	}
	.dropmenu ul li a {
		width: auto !important;
	}
	.dropmenu li li:hover ul, .dropmenu li li ul {
  /*changed: blocked*/
	 /*  position: relative;*/
		border-radius: 0;
		left: 0;
	}
	#footer ul {
		width: 100%;
		float: none;
	}
	#footer li {
		display: block;
		float: none;
		text-align: center;
	}

	/* MessageIndex */
	#main_content_section .pagelinks {
		display: block;
	}
	#main_content_section .pagesection {
	 /*  margin: 5px 0; */
	 /*  padding: 0 10px 0 10px; */
	}
/*changed: added for icon legend*/
#icon_legend {
	display: grid;
	grid-template-columns: max-content max-content;
}
/*changed: display*/
 #topic_icons p {
		display: grid;
	  /* display: block;*/
		width: 100%;
	}
	/* some new stuff for far better UX */
	.mobile_subject {
		position: relative;
	}
	fieldset {
		max-width: 100%;
		min-width: unset;
	}
	/* Register Page */
	#registration .button {
		font-size: 0.67em;
	}
	dl.register_form, dl.register_form dt, dl.register_form dd {
		float: none;
		width: 100%;
	}
	/* Login Page */
	.login dt, .login dd {
		float: none;
		width: 100%;
		text-align: left;
	}
	.login #ajax_loginuser, .login #ajax_loginpass, .login #loginuser, .login #loginpass, select {
		width: 100%;
	}

	/* Display (Topic View) */
	.subject_title input {
		width: 90%;
	}
	#quickreply_options .roundframe {
		padding: 8px 10px 12px 10px;
	}

	/* Post Section */
	#post_header dd {
		width: 55%;
	}
	#post_header dt {
		width: 35%;
	}
	img#icons {
		margin: 0 0 0 5px;
	}
	#quickreply_options #postmodify {
		width: 100%;
	}
	/* Poll */
	#poll_options dl.options {
		padding: 0;
	}
	#poll_options dl.options dt,
	#poll_options dl.options dd,
	dl.settings dt, dl.settings dd,
	#creator .settings dt, #creator .settings dd,
	div#report_form dl.settings dd, div#report_form dl.settings dt,
	#tracking dt, #tracking dd,
	#detailedinfo dt, #detailedinfo dd,
	#advanced_search dt, #advanced_search dd {
		width: 100%;
		float: none;
	}
	dl.settings dd textarea, #report_comment {
		width: 100%;
	}
	.move_topic {
		width: 100%;
	}
	.bbc_float {
		max-width: 100% !important;
		margin-left: 0.5em !important;
		margin-right: 0.5em !important;
	}
	/* PersonalMessages */
	#personal_messages .pm_icon {
	/*changed: blocked to show view changer in PM */  
	  /* display: none; */
	 }
	 
	#personal_messages div.labels {
		clear: both;
	}
	/* Alerts page */
	#alerts .alert_image {
		width: 40px;
		padding-left: 6px;
	}
/*changed alerts image display*/
	#alerts .alert_image .avatar {
	  /* display: none; */
	}
	#alerts .alert_image .avatar + .alert_icon {
		position: static;
	}
	/* Buddies & Ignore List */
	#edit_buddies .buddy_email {
		display: none;
	}
	/* Stats Center */
	.half_content {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	th.recentboard, th.recenttime,
	td.recentboard, td.recenttime {
		display: none;
	}
	.sceditor-container {
		min-height: 375px;
	}

	/* Memberlist */
	th.website_url,
	td.website_url, td.reg_group, td.reg_date, td.post_num {
		display: none;
	}
	#mlist .post_count {
		width: 50px;
	}
	#mlist .post_count .generic_bar {
		border: 0;
		background: transparent;
		color: inherit;
	}
	#mlist .post_count .generic_bar .bar {
		background: transparent;
		box-shadow: none;
	}
	#mlist_search dt {
		width: 100%;
		display: block;
		padding: 0;
	}
	#mlist_search dd {
		padding: 0;
		margin: 0;
	}
	#mlist_search input[type="checkbox"] {
		margin: 0 13px 3px 3px;
		vertical-align: middle;
	}
	/* Moderation */
	.post_note input {
		width: 75%;
	}
	.modbox .floatleft {
		float: none;
	}
	#warning_list .reason, #moderation_log_list .position, #moderation_log_list .ip, #group_members .last_active,
	#group_request_list .date, #group_lists .icons, #regular_membergroups_list .icons, #post_count_membergroups_list .icons, #watch_user_list .last_login {
		display: none;
	}
	/* Admin */
	#live_news, #support_info {
		width: 100%;
		padding: 0;
		margin: 0 0 5px 0;
	}
	.admin_search {
		float: none;
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
	fieldset.admin_group a {
		width: 50%;
		float: left;
		margin: 0 0 5px 0;
	}
  /*changed: blocked to show navigation section*/ 
  .action_admin .navigate_section {
	 /* display: none;*/
	}
	#quick_search input[type="search"],
	#quick_search select {
		width: 90%;
	}

	.error_info, #fatal_error {
		width: 100% !important;
		padding: 0 !important;
		float: none;
	}

	/* Calendar */
	.event_options_left, .event_options_right {
		width: 100%;
	}
	#event_title, #event_board {
		width: 100%;
	}
	#evtitle {
		width: 98%;
	}

	/* Menu tests */
	#adm_submenus {
		padding: 0;
	}
	#adm_submenus .dropmenu li {
		float: left;
		margin: 0;
	}
	#header_news_lists_preview, tr[id^="list_news_lists_"] td:nth-child(even),
	#header_smiley_set_list_default, #header_smiley_set_list_url, #header_smiley_set_list_check,
	tr[id^="list_smiley_set_list_"] td:nth-child(odd),
	#header_mail_queue_priority,
	tr[id^="list_mail_queue_"] td:nth-child(odd),
	#header_member_list_user_name, #header_member_list_ip,
	#header_member_list_last_active, #header_member_list_posts {
		display: none;
	}
	tr[id^="list_mail_queue_"] td:first-of-type,
	tr[id^="list_mail_queue_"] td:last-of-type {
		display: table-cell;
	}
	.msearch_details {
		width: 100% !important;
		float: none;
	}
	.msearch_details .righttext {
		text-align: left;
	}
	.msearch_details input {
		width: 90%;
	}
	.msearch_details input[type="checkbox"] {
		width: 5%;
	}
	/* Generic Lists */
	#request_list .time_applied,
	#track_user_list .date, #track_user_list .date2, #file_list .filesize, #file_list .downloads,
	#ban_list .added, #ban_list .num_triggers, #ban_log .date, #mail_queue .age, #attachments .subject {
		display: none;
	}
	/* Likes */
	#likes li .like_time {
		display: none;
	}
	/* 3rd level menu tests */
	.dropmenu li ul ul {
		margin: 0 !important;
	}
}
/*---------------------------------------------------------------*/

/* iPhone Tests */
@media (max-width: 320px) {

/*### changed: added for logo position ###*/
#banner {
	 grid-row-gap: 10px;
}
#banner #top {
	 width: 100%;
}
#banner .forumtitle svg {
	 display: flex;
	 flex-direction: column;
	 padding: 8px;
	 margin: 0 auto;
}

.p-header-logo {
	 display: none;
}
.inner_wrap {
	 justify-content: flex-end;
	 min-height: 54px;
}
#profile_menu_top > img.avatar {
	 width: 30px;
}
/*######*/

/*changed: added for icon legend*/
 #topic_icons p {
		display: block;
		width: 100%;
  }

.grid {
	 display: grid;
}
.gap-x-4 {
	 -moz-column-gap: 1rem;
	 column-gap: 1rem;
}

.gap-y-2 {
	 row-gap: .2rem;
}
.grid-cols-1 {
	 grid-template-columns: repeat(1,minmax(0,1fr));
}
}

@media (min-width: 768px) {
	.md\:grid-cols-3 {
		grid-template-columns: repeat(3,minmax(0,1fr));
}
.md\:grid-cols-2 {
	 grid-template-columns: repeat(2,minmax(0,1fr));
}
}

@media (min-width: 640px) {
	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2,minmax(0,1fr));
}
}
/*changed columns to 2*/
@media (min-width: 1024px) {
.lg\:grid-cols-4 {
	 grid-template-columns: repeat(2,minmax(0,1fr));
}
.lg\:col-span-3 {
	 grid-column: span 3/span 3;
}
.lg\:grid-cols-1 {
	 grid-template-columns: repeat(1,minmax(0,1fr));
}
}
@media (min-width: 1280px) {
	.xl\:grid-cols-4 {
		grid-template-columns: repeat(4,minmax(0,1fr));
}
}
space-y-4>:not([hidden])~:not([hidden]) {
	 --tw-space-y-reverse: 0;
	 margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));
	 margin-bottom: calc(1rem*var(--tw-space-y-reverse));
}
.col-span-1 {
	 grid-column: span 1/span 1;
}
.gap-4 {
	 gap: 1rem;
}
.sticky {
	 position: -webkit-sticky;
	 position: sticky;
}
.shadow {
	 --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.shadow, .shadow-sm {
	 box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
}
.p-2 {
	 padding: .5rem;
}
/*changed: added for forumindex title*/
.py-2_2 {
	padding: 0.5em;
	padding-left: 1em;	
}

.px-4 {
	 padding-left: 1rem;
	 padding-right: 1rem;
}
.rounded-lg {
	 border-radius: .5rem;
}
/*#####################is the background for boardindex  ##########################*/
/*changed color*/
.bg-white {
	/*--tw-bg-opacity: 1;*/
	background-color: rgba(26, 26, 26, 0.83);
/*added*/
	padding: 0;
	border-bottom: 8px solid #8c3030;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8); 
 /*  backdrop-filter: blur(4px);  */
 /*  -webkit-backdrop-filter: blur(4px); */
}
/*##################################################################################*/

.from-purple-700 {
	 --tw-gradient-from: #bb3434;
	 --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(126,34,206,0));
}
.to-purple-600 {
	 --tw-gradient-to: #fdfdfd;
}
.py-2 {
	 padding-top: .9rem;
	 padding-bottom: .9rem;
}
.bg-gradient-to-r {
	 background-image: linear-gradient( 
90deg
 ,var(--tw-gradient-stops));
/*### changed radius ###*/
border-radius: 0;
}

.divide-y>:not([hidden])~:not([hidden]) {
	 --tw-divide-y-reverse: 0;
/*changed color & pixeld multiplicator, makes divider bar larger between boards*/
	 border-top-width: calc(17px*(1 - var(--tw-divide-y-reverse)));
	 border-bottom-width: calc(1px*var(--tw-divide-y-reverse));
}
.pt-1, .py-1 {
	 padding-top: .25rem!important;
}
.pb-1, .py-1 {
	 padding-bottom: .25rem!important;
}

.adi_print {
	 display: flex;
	 flex-direction: row;
}
.space-y-1>:not([hidden])~:not([hidden]) {
	 --tw-space-y-reverse: 0;
	 margin-top: calc(0.25rem*(1 - var(--tw-space-y-reverse)));
	 margin-bottom: calc(0.25rem*var(--tw-space-y-reverse));
}
*, :after, :before {
	 box-sizing: border-box;
	 border: 0 solid #e5e7eb;
}
.adi_print .children, .adi_print .moderation, #topic_header .moderation {
	 order: 7;
}
.bg-blue-gray-50 {
	 --tw-bg-opacity: 1;
	 background-color: #f5f5f5;
}
.border-gray-100 {
	 --tw-border-opacity: 1;
	 border-color: rgba(243,244,246,var(--tw-border-opacity));
}
.max-h-32 {
	 max-height: 8rem;
}

.overflow-y-auto {
	 overflow-y: auto;
}
.py-3 {
	 padding-top: .25rem;
	 padding-bottom: .25rem;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
	 position: relative;
	 min-height: 1px;
	 padding-right: 10px;
	 padding-left: 10px;
	 float: left;
}

@media (max-width: 319px) {
	#pm_menu, #alerts_menu, #profile_menu {
		 transform: translateX(3.5em); 
		}
}

@media (max-width: 720px) and (orientation: portrait) {
.bg_image::before {
	background-position-x: 70%;
	}
}