/* === Palette & Theme Variables === */
#gallery {
	--gallery-bg: rgba(203, 218, 198, 1);
	--gallery-bg-end: rgba(193, 215, 183, 1);
	--gallery-text: black;
	--gallery-text-dark: #052420;
	--gallery-link: #0e4b42;
	--gallery-link-dark: #1e451a;
	--gallery-hr: rgb(201, 223, 212);
	--gallery-border: #9ab495;
	--gallery-nav-border: #4c7c48;
	--gallery-nav-bg-hover: rgba(225, 236, 221, 0.35);
	--gallery-nav-active: #1f7a6c;
	--gallery-nav-active-hover: #0e4b42;
	--gallery-nav-text-active: #d3dfd1;
	--gallery-topbar-bg-start: rgba(117, 172, 113, 1);
	--gallery-topbar-bg-mid: rgba(131, 189, 124, 1);
	--gallery-topbar-shadow: rgba(127, 167, 91, 0.469);
	--gallery-topbar-link: #fbfdfa;
	--gallery-topbar-icon-link: #e8f8e5;
	--gallery-btn-bg: rgb(91, 169, 108);
	--gallery-btn-text: #e8f8e5;
	--gallery-btn-border: #1e451a;
	--gallery-btn-hover-text: #1e451a;
	--gallery-btn-bright-bg-start: rgba(251, 228, 187, 1);
	--gallery-btn-bright-bg-mid: rgba(253, 241, 200, 1);
	--gallery-btn-bright-text: #1e451a;
	--gallery-btn-bright-border: #94772a;
	--gallery-card-bg: linear-gradient(rgba(243, 247, 246, 0.356), rgba(243, 247, 246, 0.053) 10%, rgba(243, 247, 246, 0.053));
	--gallery-dropzone-bg: rgba(255, 255, 255, 0.37);
	--gallery-editor-bg: #bef7ff;
	--gallery-editor-toolbar-group: #d8f5ff;
	--gallery-editor-border: #80dfff;
	--gallery-input-border: #415d66;
}

/* === Base Layout === */
#gallery {
	background: var(--gallery-bg);
	background: radial-gradient(circle, var(--gallery-bg) 0%, var(--gallery-bg-end) 100%);
	border-radius: 15px;
	overflow: hidden;
	word-break: normal;
}

#gallery h1,
#gallery h2,
#gallery h3,
#gallery h4,
#gallery h5,
#gallery h6 {
	font-size: 1.1em;
	font-family: Verdana;
	color: var(--gallery-text-dark) !important;
}

#gallery,
#gallery th,
#gallery td,
#gallery tr,
#gallery .smalltext,
#gallery #gallery_topbar h3 {
	font-family: 'Pixel Basiic' !important;
	color: var(--gallery-text);
}

#gallery div.cat_bar,
#gallery h3.catbg,
#gallery h2.catbg {
	line-height: unset;
	height: unset;
	overflow: unset;
}

/* === Links === */
#gallery a,
#gallery a:visited {
	color: var(--gallery-link);
	text-decoration: none;
	transition-duration: 0s;
	background: none;
}

#gallery a:hover {
	text-decoration: underline;
}

#gallery .highslide:hover img {
	border: none;
}

#gallery hr {
	color: var(--gallery-hr);
}

#gallery img:hover {
	filter: none;
}

/* === Window Layout === */
#gallery_window {
	display: flex;
}

/* === Topbar === */
#gallery_topbar {
	background: var(--gallery-topbar-bg-start);
	background: linear-gradient(180deg, var(--gallery-topbar-bg-start) 0%, var(--gallery-topbar-bg-mid) 51%, var(--gallery-topbar-bg-start) 100%);
	padding-block: 10px;
	box-shadow: 0px 0px 10px 10px var(--gallery-topbar-shadow);
	border-bottom: 1px dashed var(--gallery-nav-border);
}

#gallery_topbar table {
	overflow: visible;
}

#gallery_topbar,
#gallery_topbar .cat_bar h3 a {
	text-shadow: 1px 1px 2px var(--gallery-nav-border);
}

#gallery #gallery_topbar .cat_bar h3 a {
	float: left;
	margin-bottom: -18px;
	color: var(--gallery-topbar-link) !important;
}

#gallery .gallery_topbar_icons .gallery_toolbar_icons {
	margin: 0px;
}

/* === Buttons === */

/* Topbar icon links (no button background) */
#gallery .gallery_topbar_icons .gallery_toolbar_icons a,
#gallery .gallery_topbar_icons .gallery_toolbar_icons a:visited,
#gallery .gallery_topbar_icons .gallery_toolbar_icons a:hover {
	color: var(--gallery-topbar-icon-link);
	margin-right: 10px;
	background: unset;
	border: none;
	font-size: 16px;
}

/* Shared button base: standard + small variants */
#gallery .gallery_toolbar_icons a,
#gallery .gallery_toolbar_icons a:visited,
#gallery .gallery_view_comment_buttons a,
#gallery .gallery_view_comment_buttons a:visited,
#gallery .gallery_button_link a,
#gallery .gallery_button_link a:visited,
#gallery .gallery_topbar_icons a.bright_button,
#gallery .gallery_topbar_icons a.bright_button:visited,
#gallery .gallery_small_button a,
#gallery .gallery_small_button a:visited {
	color: var(--gallery-btn-text);
	background: var(--gallery-btn-bg);
	border: 1px dotted var(--gallery-btn-border);
	border-radius: 8px;
}

/* Standard button spacing */
#gallery .gallery_toolbar_icons {
	margin: 20px 10px;
}

#gallery .gallery_toolbar_icons a,
#gallery .gallery_toolbar_icons a:visited,
#gallery .gallery_view_comment_buttons a,
#gallery .gallery_view_comment_buttons a:visited,
#gallery .gallery_button_link a,
#gallery .gallery_button_link a:visited {
	margin-left: 10px;
	padding: 5px 10px;
}

/* Small button spacing */
#gallery .gallery_small_button a,
#gallery .gallery_small_button a:visited {
	display: inline-block;
	padding: 2px 7px;
	margin: 4px 0;
}

/* Bright button overrides */
#gallery .gallery_topbar_icons a.bright_button,
#gallery .gallery_topbar_icons a.bright_button:visited,
#gallery .gallery_topbar_icons a.bright_button:hover {
	color: var(--gallery-btn-bright-text);
	background: var(--gallery-btn-bright-bg-start);
	background: radial-gradient(circle, var(--gallery-btn-bright-bg-start) 0%, var(--gallery-btn-bright-bg-mid) 51%, var(--gallery-btn-bright-bg-start) 100%);
	border: 1px dotted var(--gallery-btn-bright-border);
	text-shadow: none;
}

/* Button hover states */
#gallery .gallery_toolbar_icons a:hover,
#gallery .gallery_view_comment_buttons a:hover,
#gallery .gallery_button_link a:hover,
#gallery .gallery_small_button a:hover {
	color: var(--gallery-btn-hover-text);
	filter: brightness(1.5);
}

/* === Navigation Sidebar === */
.gallery_nav {
	width: 200px;
	padding: 10px 5px 0px 16px;
	background-image: url('/images/plant_land.png');
	background-repeat: repeat-y;
	background-size: 100%;
}

.gallery_nav ul {
	list-style: none;
	padding-inline-start: 0px;
}

.gallery_nav h3.gallery_nav_section {
	font-size: 0.9em;
	font-weight: bold;
	margin: 10px 0 4px 0;
	padding-bottom: 3px;
	color: var(--gallery-text-dark);
}

.gallery_nav>div:hover {
	background-color: var(--gallery-nav-bg-hover);
	padding: 10px 5px 0px 16px;
	border: 1px dashed var(--gallery-nav-border);
	margin-left: -16px;
	border-left: 0px;
	border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
}

.gallery_nav a {
	display: block;
	margin: 5px 0px;
}

.gallery_nav .gallery_nav_sub {
	margin-left: 20px;
}

.gallery_nav li {
	border-radius: 4px;
	padding: 3px 5px;
}

.gallery_nav li:hover {
	background-color: var(--gallery-nav-active-hover);
}

.gallery_nav .gallery_nav_active {
	background-color: var(--gallery-nav-active);
}

.gallery_nav a li:hover b,
.gallery_nav .gallery_nav_active b {
	color: var(--gallery-nav-text-active) !important;
	text-decoration: none;
}

/* === Main Content === */
.gallery_main {
	width: 100%;
}

#gallery,
#gallery .content,
#gallery .roundframe,
#gallery .description,
#gallery .information,
#gallery .windowbg,
#gallery .windowbg2,
#gallery .windowbg3 {
	color: var(--gallery-text) !important;
}

#gallery .catbg,
#gallery .catbg a,
#gallery .catbg a:visited {
	color: var(--gallery-text) !important;
	text-shadow: none;
	padding: 0.1em 0.7em;
}

#gallery h3.catbg img {
	float: none;
}

#gallery .cat_bar,
#gallery .catbg,
#gallery .catbg a,
#gallery .titlebg,
#gallery .titlebg td,
#gallery .titlebg a,
#gallery .titlebg a:visited,
#gallery .windowbg,
#gallery .windowbg2,
#gallery .bordercolor,
#gallery .tborder,
#gallery tr.catbg td,
#gallery .catbg3,
#gallery tr.catbg3,
#gallery .catbg2,
#gallery tr.catbg2 td {
	background: none !important;
	background-color: unset !important;
	background-image: none !important;
	border: none !important;
}

#gallery_greeting {
	margin: 20px;
}

#gallery_greeting span {
	float: right;
	font-weight: bold;
}

.g_info {
	margin: 10px 20px;
}

#gallery h3.catbg {
	margin: 10px;
	padding: 5px;
}

/* === Image Grid === */
.gallery_main_pictures ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gallery_main_pictures ul li {
	margin: 10px 30px;
	text-align: center;
	max-width: 180px;
	text-wrap: wrap;
	word-break: break-word;
}

.gallery_main_pictures ul li img,
#gallery #thumb1 img {
	filter: drop-shadow(3px 3px 1px rgba(18, 27, 26, 0.29));
}

.gallery_main_pictures ul li img {
	margin-bottom: 15px;
	max-width: 200px;
}

#gallery .gallery_main_pictures ul li img:hover {
	filter: drop-shadow(4px 4px 2px rgba(18, 27, 22, 0.1)) !important;
	transform: scale(1.05);
}

#gallery #thumb1 img {
	margin: 30px;
}

/* === Image Viewer === */
.gallery_view_infozone {
	padding: 30px;
	display: block;
}

.gallery_view_infozone td {
	width: 50%;
	min-width: 190px;
	text-align: left;
}

.gallery_view_infozone>td:last-of-type {
	border-left: 1px dashed var(--gallery-link);
	padding-left: 35px;
}

.gallery_view_comment,
.gallery_myimages_user {
	display: block;
	border: 1px solid var(--gallery-border);
	margin: 20px;
	padding: 20px;
	border-radius: 8px;
	background: var(--gallery-card-bg) !important;
}

.gallery_view_comment_buttons {
	margin-top: 40px;
}

#gallery .avatar {
	max-width: 80px;
}

#gallery_view_image {
	max-width: 700px;
	max-height: 700px;
}

.gallery_myimages_user {
	width: 50%;
	min-width: 400px;
	margin: auto;
}

/* === Upload / Dropzone === */
#gallery .dropzone {
	background: var(--gallery-dropzone-bg);
	margin: 10px 30px;
	border-radius: 10px;
}

#gallery .dropzone .dz-preview.dz-image-preview,
#gallery .dropzone .dz-preview .dz-image {
	background: var(--gallery-dropzone-bg);
	border-radius: 10px;
}

/* === Advanced Editor === */
#gallery .editor,
#gallery .sceditor-container {
	min-height: unset !important;
}

#gallery .sceditor-container iframe,
#gallery .sceditor-container textarea {
	background-color: var(--gallery-editor-bg) !important;
	background-image: linear-gradient(0deg, #ffffff 40%, #fafeff 40%, #fafeff 50%, #ffffff 50%, #ffffff 90%, #fafeff 90%, #fafeff 100%) !important;
	background-size: 18.00px 18.00px !important;
	font-size: 9pt;
	color: #000000;
	padding: 10px !important;
}

#gallery div.sceditor-toolbar {
	background-color: var(--gallery-editor-bg) !important;
	background-image: linear-gradient(0deg, #ffffff 40%, #fafeff 40%, #fafeff 50%, #ffffff 50%, #ffffff 90%, #fafeff 90%, #fafeff 100%) !important;
	background-size: 18.00px 18.00px !important;
	border: 0px !important;
	background-clip: unset !important;
	border-radius: 0px !important;
	image-rendering: pixelated;
}

#gallery .sceditor-container {
	min-width: 99.5% !important;
	border-radius: 8px !important;
	border: 1px dashed var(--gallery-editor-border) !important;
}

#gallery .editor {
	min-height: 500px !important;
	font-size: 11pt;
}

#gallery div.sceditor-group {
	background-color: var(--gallery-editor-toolbar-group) !important;
	border-radius: 8px !important;
}

#gallery .sceditor-button {
	border-radius: 8px !important;
}

/* === Form Inputs === */
#gallery input,
#gallery select {
	background-color: white !important;
	background-image: none !important;
	border-radius: 4px;
	padding: 2px 5px;
	border: 1px dashed var(--gallery-input-border) !important;
}

/* === Theme Variants === */
#theme-melon #gallery {
	border-radius: 0px;
	border: 3px double var(--gallery-text);
}

#theme-news #gallery {
	border: 3px double #ffffff;
}

#theme-dreamy #gallery {
	border: 3px double #68dbff;
	box-shadow: 0px 0px 20px #009fd5c4;
}

/* === Extra === */
#recent_artworks table img {
	max-width: 100px;
}

#gallery .wide_input {
	width: 90%;
}

/* === User Profiles === */
.artworks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 5px;
}

.artworks img {
	max-width: 100%;
}

/* === Mobile === */
@media (max-width: 850px) {
	#gallery_window {
		flex-flow: column;
		flex-direction: column-reverse;
	}

	#gallery_topbar .cat_bar {
		display: none;
	}

	#gallery .gallery_topbar_icons .gallery_toolbar_icons a,
	#gallery .gallery_topbar_icons .gallery_toolbar_icons a:visited,
	#gallery .gallery_topbar_icons .gallery_toolbar_icons a:hover {
		display: block;
		text-align: center;
		border: 1px solid !important;
		margin: 15px;
		background-color: #0c2932 !important;
	}

	#gallery .gallery_toolbar_icons a,
	#gallery .gallery_toolbar_icons a:visited,
	#gallery .gallery_view_comment_buttons a,
	#gallery .gallery_view_comment_buttons a:visited,
	#gallery .gallery_button_link a,
	#gallery .gallery_button_link a:visited {
		display: block;
		text-align: center;
		margin: 10px;
	}

	.gallery_nav {
		width: unset;
		border-right: none;
	}

	#gallery_view_image {
		max-width: 100%;
	}

	.gallery_view_infozone td {
		min-width: unset;
	}

	.gallery_view_infozone td:last-child {
		display: none;
	}
}

@media (max-width: 700px) {
	.gallery_main_pictures ul li {
		max-width: unset;
		min-width: 90%;
	}

	.gallery_main_pictures ul li img {
		min-width: 80%;
	}
}