:root {
	/* debug old stuff */
	--primary: #3E3B92;
	--secondary: #F44369;
	--primary: #3C7474;
	--secondary: #F9EA9A;
	
	/* COLOR SCHEME */
	/* light or dark depending on overall theme colors*/
	color-scheme: light;
	
	/* color pallet: https://coolors.co/eaebe5-666666-3c7474-d57d03-f9ea9a */
	
	/* PRIVATE COLOR LIST */
	/* add or delete colors as needed for your theme */
	--color-white:		#ffffff;
	--color-black:		#000000;
	--color-gray:		#666666;
	--color-off-white:	#eaebe5;
	--color-pine-blue:	#3C7474;
	--color-amber-earth:#d57d03;
	--color-light-gold: #f9ea9a;
	
	/* board alert colors */
	--color-red: 		#9c0000;
	--color-blue: 		#002b48;
	--color-green: 		#144800;
	--color-yellow: 	#ffd808;
	
	/* MAIN COLORS */
	/* adjust these to change the overall color scheme of the theme */
	--color-primary: var(--color-off-white); 		/* main color for backgrounds */
	--color-secondary: var(--color-gray);			/* main color for text and ui */
	--color-accent: var(--color-pine-blue);			/* main color for accents such as buttons, links etc. */
	
	/* GRADATION COLORS */
	/* generates different shades of given color */
	/* add more if needed, but keep primary, secondary and accent color gradations */
	/* mix whith white for dark colors or black/dark or transparent values for light colors */
	--color-primary-100: color-mix(in srgb, var(--color-primary), transparent 0%);
	--color-primary-80:  color-mix(in srgb, var(--color-primary), transparent 20%);
	--color-primary-60:  color-mix(in srgb, var(--color-primary), transparent 40%);
	--color-primary-40:  color-mix(in srgb, var(--color-primary), transparent 60%);
	--color-primary-20:  color-mix(in srgb, var(--color-primary), transparent 80%);
	
	--color-secondary-100: color-mix(in srgb, var(--color-secondary), white 0%);
	--color-secondary-80:  color-mix(in srgb, var(--color-secondary), white 20%);
	--color-secondary-60:  color-mix(in srgb, var(--color-secondary), white 40%);
	--color-secondary-40:  color-mix(in srgb, var(--color-secondary), white 60%);
	--color-secondary-20:  color-mix(in srgb, var(--color-secondary), white 80%);
	
	--color-accent-100: color-mix(in srgb, var(--color-accent), white 0%);
	--color-accent-80:  color-mix(in srgb, var(--color-accent), white 20%);
	--color-accent-60:  color-mix(in srgb, var(--color-accent), white 40%);
	--color-accent-40:  color-mix(in srgb, var(--color-accent), white 60%);
	--color-accent-20:  color-mix(in srgb, var(--color-accent), white 80%);
	
	
	/* MAIN TEXT COLORS */
	--color-text: var(--color-gray);				/* normal text on main background color */
	--color-text-accent: var(--color-amber-earth);	/* text in <b> or <i> tags */
	--color-text-link: var(--color-accent);			/* text links */
	--color-text-link--hover: var(--color-accent-80);
	
	/* define a textcolor that is readable on --color-accent (NOTE: not --color-text-accent!). on light accent colors, this should be a dark value*/
	--color-text-on-accent: var(--color-white);
	
	
	/* GROUP COLORS */
	--color-gestaltwandler: #846262;
	--color-mensch: #6e6284;
	--color-mediale: #627384;
	--color-admin: #797979;
	--color-bewerber: var(--color-text);
	--color-eiszeit: var(--color-white);
	
	
	/* INDIVIDUAL COLORS IN THEME */
	/* to set individual colors, set the variable corresponding to the element you wish to adjust */
	/* didn't find the element you where looking for? ask arby */
	
	/* SCROLLBAR */
	--color-scrollbar-thumb: var(--color-accent-60);
	--color-scrollbar-track: transparent;
	
	/* TICON */
	--color-ticon-background: var(--color-primary);
	--color-ticon-border: var(--color-secondary);
	
	/* TIPSY TOOLTIP */
	--color-tooltip: var(--color-text-on-accent);
	--color-tooltip-background: var(--color-accent);
	
	/* HEADER */
	--color-header-background: var(--color-primary);
	--color-header-button: var(--color-secondary);
	--color-header-button--hover: var(--color-accent);
	--color-header-button-background: transparent;
	--color-header-button-background--hover: transparent;
	
	/* FORUM TITLE */
	--color-forum-title-name: var(--color-secondary-80);
	--color-forum-title-shortfacts: var(--color-secondary);
	--color-forum-title-mobile-background: var(--color-primary-80);
	
	/* FORUM INFO */
	--color-forum-info-box-border: var(--color-white);
	--color-forum-info-box-background: var(--color-primary-80);
	
	/* BREADCRUMB NAVIGATION */
	--color-breadcrumbs-background: transparent;
	--color-breadcrumbs-border: transparent;
	
	/* FORUM BIT */
	--color-forum-wrapper-background: transparent; /* color behind all forums. set transparent if you want gaps between the individual forums */
	--color-forum-wrapper-border: none; /* same */
	--color-forum-bit-background: var(--color-primary-80); /* background behind individual forum. might wanna set to transparent if you already ahve a wrapper background */
	--color-forum-bit-border: 1px solid var(--color-white); /* same */
	--color-forum-bit-name: var(--color-text);
	--color-subforum-name: var(--color-accent);
	
	/* THREAD LIST */
	--color-threadlist-header-text: var(--color-text-on-accent);
	--color-threadlist-header-background: var(--color-accent);
	--color-threadlist-subheader-text: var(--color-accent);
	--color-threadlist-subheader-background: transparent;
	--color-threadlist-thread-selected-background: var(--color-accent-20);
	--color-threadlist-thread-deleted-background: color-mix(in srgb, var(--color-red), transparent 80%);
	
	/* PANEL FOR NON-FORUM PAGES (e.g. informationen, regeln, listen...) */
	--color-panel-background: var(--color-primary-80);
	--color-panel-border: var(--color-white);
	
	/* MODALS */
	--color-modal-background: var(--color-white);
	--color-modal-text: var(--color-text);
	--color-modal-title-background: var(--color-accent);
	--color-modal-title-text: var(--color-text-on-accent);
	--color-modal-close-icon: var(--color-text);
	--color-modal-close-icon-background: var(--color-primary);
	--color-modal-close-icon-border: var(--color-text);
	--color-modal-close-icon--hover: var(--color-accent);
	--color-modal-close-icon-background--hover: var(--color-primary);
	--color-modal-close-icon-border--hover: var(--color-accent);
	
	/* INPUT ELEMENTS */
	--color-input-text: var(--color-text);
	--color-input-icon: var(--color-accent);
	--color-input-background: var(--color-primary-60);
	--color-input-placeholder: var(--color-secondary-80);
	--color-input-border: var(--color-secondary);
	--color-input-border--hover: var(--color-accent);
	--color-checkbox-background: var(--color-accent-40);
	--color-radio-background: var(--color-accent);
	
	/* SHADOWS */
	--box-shadow-light: -1px 1px 0.5rem 0 #00000033;
	--box-shadow-medium: 0 1px 0.75rem 0 #00000066;
	--box-shadow-strong: 0 0 0.75rem 0 var(--color-black);
}

* {
	scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

legend {
    border-bottom: 4px solid var(--primary);
}

.forum_on {
   color: var(--primary);
}

.active-color {
	background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.postbit_user_btn a:link, .postbit_user_btn a:visited, .postbit_user_btn a:active {
   background: #1c1c1c;
    color: #fff;
}

.panel-primary>.panel-heading {
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    border-color: var(--primary);
}

blockquote {
    border-left: 5px solid var(--primary);
}

.thead {
	background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
	color: #fff;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-weight: bold;
}


.popup_item:hover {
	background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}




.forum_on {
color: var(--primary);
}


.popup_item:hover {
 background: var(--primary);
 color: #fff;
}


.thead input.textbox,
.thead select {
 border: 1px solid var(--primary);
border-radius: 4px;
}

.modcp_nav_item:before {
	color: var(--primary);
}


li.nav-forums:hover {
    background: var(--primary)!impotant;
}