/* VARIABLES */

[]{}

	/* COLORS */

	:root {

		/* THEME COLOR */
		--theme_color:198;
		--color: hsl(var(--theme_color), 100%, 38%);

		/* MATCHING COLORS*/
		--green: hsl(83, 100%, 33%);
		--red: hsl(359, 60%, 48%);
		--blue: hsl(204, 60%, 50%);
		--yellow: hsl(44, 100%, 38%);

		/* GREYS FIXED*/

		--grey_0: hsl(0,0%,0%);
		--grey_10: hsl(0,0%,10%);
		--grey_20: hsl(0,0%,20%);
		--grey_30: hsl(0,0%,30%);
		--grey_40: hsl(0,0%,40%);
		--grey_50: hsl(0,0%,50%);
		--grey_60: hsl(0,0%,65%);
		--grey_70: hsl(0,0%,75%);
		--grey_80: hsl(0,0%,87%);
		--grey_90: hsl(0,0%,94%);
		--grey_100: hsl(0,0%,98%);

		/* GREYS FLEXIBLE*/
		--grey: hsl(var(--theme_color),0%,42%);
		--grey_light: hsl(var(--theme_color),10%,75%);
		--grey_lighter: hsl(var(--theme_color),10%,93%);
		--grey_lightest: hsl(var(--theme_color),0%,98%);
		--grey_dark: hsl(var(--theme_color),50%,26%);
		--grey_darker: hsl(var(--theme_color),50%,26%);
		--grey_darkest: hsl(var(--theme_color),50%,26%);

		/* ADDITIVE COLOR */

		--color_border: hsla(0,0%,20%,.3);

		--color_background: hsl(var(--theme_color), 0%, 98%);
		--color_button_text: hsl(var(--theme_color), 0%, 100%);
		--color_foreground: hsl(var(--theme_color), 0%, 100%);
		--color_muted: hsl(var(--theme_color), 40%, 88%);
		--color_shade_1: hsl(var(--theme_color), 10%, 93%);
		--color_shade_2: hsl(var(--theme_color), 14%, 82%);
		--color_shade_3: hsl(var(--theme_color), 30%, 50%);
		--color_shadow: hsla(0,0%,0%,.15);
		--color_text: hsl(var(--theme_color), 50%, 26%);
		--color_text_light: hsla(var(--theme_color), 50%, 26%, .6);


		/* DEPRECATED */
		--half_space: .5rem;
		--double_space: 1.4rem;
		--text_color: hsl(var(--theme_color), 50%, 26%);
		--background_color: hsl(var(--theme_color), 0%, 98%);
		--foreground_color: hsl(var(--theme_color), 0%, 100%);
		--light_text_color: hsla(var(--theme_color), 50%, 26%, .6);
		--muted_color: hsl(var(--theme_color), 30%, 85%);
	}

	@media (prefers-color-scheme: dark) {
		:root {

			/* MATCHING COLORS*/
			--green: hsl(83, 70%, 30%);
			--red: hsl(359, 30%, 50%);
			--blue: hsl(204, 70%, 36%);
			--yellow: hsl(44, 100%, 32%);

			/* GREYS FIXED*/
			--grey_0: hsl(0,0%,95%);
			--grey_10: hsl(0,0%,90%);
			--grey_20: hsl(0,0%,85%);
			--grey_30: hsl(0,0%,80%);
			--grey_40: hsl(0,0%,75%);
			--grey_50: hsl(0,0%,45%);
			--grey_60: hsl(0,0%,35%);
			--grey_70: hsl(0,0%,30%);
			--grey_80: hsl(0,0%,25%);
			--grey_90: hsl(0,0%,20%);
			--grey_100: hsl(0,0%,12%);

			/* GREYS FLEXIBLE*/
			--grey: hsl(var(--theme_color),0%,58%);
			--grey_light: hsl(var(--theme_color),0%,35%);
			--grey_lighter: hsl(var(--theme_color),0%,25%);
			--grey_lightest: hsl(var(--theme_color),0%,15%);
			--grey_dark: hsl(var(--theme_color),0%,80%);
			--grey_darker: hsl(var(--theme_color),0%,94%);
			--grey_darkest: hsl(var(--theme_color),0%,94%);

			/* ADDITIVE COLOR */

			--color_border: hsla(0,0%,60%,.2);


			--color_background: hsl(var(--theme_color), 0%, 15%);
			--color_foreground: hsl(var(--theme_color), 0%, 0%);
			--color_muted: hsl(var(--theme_color), 70%, 18%);
			--color_shade_1: hsl(var(--theme_color), 0%, 25%);
			--color_shade_2: hsl(var(--theme_color), 0%, 35%);
			--color_shade_3: hsl(var(--theme_color), 0%, 45%);
			--color_shadow: hsla(0,0%,0%,.45);
			--color_text: hsl(0, 0%, 80%);
			--color_text_light: hsla(0, 0%, 80%, .5);
			--ck-color-base-foreground: var(--color_shade_1) !important;
			/* --ck-color-base-background: var(--color_background) !important; */
			--ck-color-base-text: var(--color_text) !important;
			--ck-color-base-border: var(--grey_70) !important;
			--ck-border-radius: var(--inner_radius) !important;

			/* DEPRECATED */
			--muted_color: hsl(var(--theme_color), 70%, 36%);
			--background_color: hsl(var(--theme_color), 0%, 15%);
			--foreground_color: hsl(var(--theme_color), 0%, 0%);
			--text_color: hsl(0, 0%, 80%);
			--light_text_color: hsla(0, 0%, 80%, .5);
		}
	}

	/* SPACINGS */

	:root {
		--space: 1rem;
		--space_double: 2rem;
		--space_half: .5rem;
		--space_quarter: .25rem;
		--inner_radius: .4rem;
		--outer_radius: .8rem;
	}

	/* FONTS */

	:root {

		--font_family: system-ui, sans-serif;
		--font_family_code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

	}

	/* EFFECTS */

	:root {

		--transition_in: .15s ease-out;
		--transition_out: .5s ease-in;

	}

/* PSEUDO ELEMENTS */

[]{}

	::-webkit-scrollbar {
	  width: 1em;
	}

	::-webkit-scrollbar-track {
		background-color: var(--color_shade_1);
	  border-left: 1px solid var(--color_shade_2);
	}

	::-webkit-scrollbar-thumb {
		background-color: var(--background_color);
		border-left: 1px solid var(--color_shade_2);
	}

	html body .page .kit :not(dialog):first-child {
    margin-top: 0;
	}

	html body .page .kit :not(dialog):last-child {
    margin-bottom: 0;
	}

/* HTML ELEMENTS*/

[]{}

	body,
	html {
		margin: 0;
		padding: 0;
		height:100%;
		user-select: none;
	}

	html{
		font-size: 14px;
	}

	body {
		background: var(--grey_100);
		font-size: 1em;
		line-height: 1.2;
		font-family: var(--font_family);
		cursor: default;
		color: var(--grey_30);
	}

	a {
		cursor: pointer;
		transition: color var(--transition_out);
	}

	a:hover {
		color: var(--color);
		transition: color var(--transition_in);
	}

	a:visited{
	}

	hr {

	}

	/* TEXT */

	[]{}

		h1 {
			/* margin:0 0 1rem; */
			margin:1rem 0;
			font-size: 2rem;
			line-height: 120%;
			font-weight: 700;
			letter-spacing: -.02em;
		}

		h2 {
			font-size: 1.6em;
			/* margin:0 0 1rem; */
			margin: 1rem 0;
			font-weight: 300;
		}

		h3 {
			font-size: 1.1em;
			font-weight: 300;
			/* margin: 0 0 1rem; */
			margin: 1rem 0;
		}

		body.Windows h3 {
			font-weight: 400;
		}

		h4 {
			font-size: 1em;
			font-weight: 600;
			/* margin: 0 0 1rem; */
			margin: 1rem 0;
		}

		h5 {
			font-size: 1em;
			font-weight: 400;
			/* margin: 0 0 1rem; */
			margin: 1rem 0;
		}

		h6 {
			font-size: 1em;
			font-weight: 300;
			/* margin: 0 0 1rem; */
			margin: 1rem 0;

		}

		p {
			font-size: .9em;
			margin: 0 0 1rem;
		}

		p:last-child {
			margin-bottom: 0;
		}

		ul,ol {
			font-size: .9em;
			padding-left: 1em;
		}

		strong {
    	font-weight: 500;
		}

		pre {
			-webkit-user-select: text;
			-moz-user-select: text;
			user-select: text;
			cursor: text;
		}


	/* MEDIA */

	[]{}

		img {
			border:none;
		}

	/* TABLE */

	[]{}

		/* BASIC */

		[]{}

			table {
				border-spacing: 0;
			}

			table th {
				padding: 0;
				font-size: .8em;
				font-weight: 400;
				text-align:left;
				padding: var(--space_half) var(--space);
			}

			table td {
				padding: var(--space_half) var(--space);
				/* font-size: .95em; */
				font-weight: 300;
				/* color: var(--grey_20); */
			}

			body.Windows table td {
				font-weight: 400;
			}

		/* DATA TABLE */

		[]{}

			table.data td .button {
				background: none;
			}

	/* FORM */

	[]{}

		fieldset {
			margin: var(--space);
			padding: 0;
			border: solid 1px var(--grey_100);
			border-radius: var(--inner_radius);
		}

		legend {
	    margin: 0;
	    padding: 0;
	    padding: var(--space);
	    color: var(--grey_50);
		}

		button {
			border:none;
			cursor: pointer;
		}

		label {
			cursor: pointer;
		}

		input[type=text],
		input[type=password],
		textarea{
			-webkit-user-select: text;
			-moz-user-select: text;
			user-select: text;
			cursor: text;
		}

		button,
		input,
		textarea,
		select,
		label {
			font-family: var(--font_family);
		}

		/* Editor */

		form {
			--ck-font-face: var(--font_family);

			--ck-color-base-background: var(--grey_100);
			--ck-color-toolbar-background: var(--grey_80);

			--ck-color-button-on-background: var(--grey_90);
			--ck-color-button-default-focus-background: var(--grey_70);
			--ck-color-button-on-focus-background: var(--grey_70);

			--ck-color-tooltip-text: var(--grey_0);
			--ck-color-tooltip-background: var(--grey_90);

			--ck-color-dropdown-panel-background: var(--grey_90);
			--ck-color-list-background: var(--grey_90);

			--ck-focus-ring: solid 1px var(--grey_70);

		}


/* CLASSES */

[]{}

	.green {
		color: var(--green);
	}

	.blue {
		color: var(--blue);

	}

	.red{
		color: var(--red);
	}

	.yellow{
		color: var(--yellow);
	}

	.light {
		color: var(--grey_50);
	}

	.grey {
		color: var(--grey);
	}

	.grey_light {
		color: var(--grey_70);
	}

	.selectable {
		-webkit-user-select: text;
		-moz-user-select: text;
		user-select: text;
		cursor: text;
	}

	.tight * {
		margin-bottom: 0;
	}

	.grid {
		display: grid;
		gap: var(--space);
		justify-content: space-between;
	}

	.grid-2 {
		grid-template-columns: repeat(2, auto);
	}

	.grid-4 {
		grid-template-columns: repeat(4, auto);
	}

	.grid-2.evenly {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-4.evenly {
		grid-template-columns: repeat(4, 1fr);
	}


/* CONTAINERS */

[]{}

	/* PAGE */

	[]{}

		div.page{
			position: relative;
			/* padding: 4rem 0 1rem; */
			/* box-sizing: border-box; */
		  /* min-height: 100%; */
			/* z-index: 0; */
			/* position: absolute; */
			/* min-width: 100%; */
			/* box-sizing: border-box; */
			/* display: grid; */
			}

		div.sub_menu + div.page{
			/* padding-top: 6rem; */
		}

	/* HEADER */

	[]{}

		body > div.header {
			position: sticky;
			top: 0;
			z-index: 3;
			background: var(--grey_90);
			padding: var(--space_half)	var(--space_double);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 0 var(--space_double) var(--grey_100);
		}

		/* Glas effect */

		body > div.header {
			background: hsla(0,0%,90%,.6);
			-webkit-backdrop-filter: blur(var(--space));
			backdrop-filter: blur(var(--space));
			box-shadow: 0 1px 0 hsla(0,0%,100%,.15), 0 0 var(--space_double) var(--grey_lightest);
		}

		@media (prefers-color-scheme: dark) {
			body > div.header {
				background: hsla(0,0%,26%,.6);
				/* background: var(--grey_90); */
			}
		}

		body > div.header .button {
			background: none;
			color: var(--grey);
		}

		div.header .logo {
			height: 1.5rem;
			width: 8rem;
			display: block;
			background: url("logo_kitbooth.svg?version=1") no-repeat left;
			background-size: contain;
		}

		@media (prefers-color-scheme: dark) {

			div.header .logo{
				background-image: url("logo_kitbooth_negative.svg?version=1");

			}
		}

		/* MAIN MENU */

		[]{}

			body > div.header div.main_menu {
				/* font-size: 1.08rem; */
				font-weight: 300;
				gap: var(--space_half);
				display: flex;
				justify-content: center;
			}

			body.Windows > div.header div.main_menu {
				font-weight: 400;
			}

			body > div.header div.main_menu a {
				display: flex;
				align-items: center;
				/* text-decoration:none; */
				/* line-height: 2rem; */
				color: var(--grey_40);
				padding: var(--space_half);
				border-radius: var(--space_half);
				transition: all var(--transition_out);
			}

			body > div.header div.main_menu a:hover {
				/* color: var(--color); */
				transition: all var(--transition_in);
				/* color: var(--grey_40); */
				background-color: var(--grey_80);
			}

			body > div.header div.main_menu a.active {
				background: var(--grey_100);
				/* color: var(--text_color); */
				/* border-radius: var(--space_half); */
			}

	/* FOOTER */

	[]{}

		div.footer {
			color: var(--grey_60);
			padding: var(--space_half) var(--space_double);
			position: sticky;
			z-index: 3;
			bottom: 0;
			/* box-shadow: 0 0 var(--space_double) var(--grey_lightest); */
			transition: background-color .5s .5s ease-in;
		}

		div.footer:hover, div.footer.hover {
			background: var(--grey_100);
			transition: background-color .3s ease-out;
		}

		/* Glas effect */
		/*
		body > div.footer {
			background: hsla(var(--theme_color),13%,90%,.6);
			backdrop-filter: blur(var(--space));
			box-shadow: 0 1px 0 hsla(0,0%,100%,.15), 0 0 var(--space_double) var(--grey_lightest);
		}
		*/

	/* SIDE MENU */

	[]{}

		div.side_menu {
			padding: 0;
			border-radius: 0;
			display: grid;
		  grid-gap: var(--space_half);
			border-color: var(--grey_100);
			background: var(--grey_100);
		}

		div.side_menu a{
		  display: block;
			position: relative;
		  font-weight: 200;
			font-size: .9em;
			display: inline-flex;
		  gap: var(--space_half);
		  align-items: center;
			padding: var(--space_half);
		  border-radius: var(--inner_radius);
		}

		body.Windows div.side_menu a{
		  font-weight: 400;
		}

		div.side_menu a:not(:hover){
			color: var(--grey_10);
		}

		div.side_menu img{
		  height: 1.5rem;
			width: auto;
		}

		div.side_menu a.active{
			color: var(--color);
			background-color: var(--grey_90);
		}

		div.side_menu:not(:hover) a:not(.active) img{
			filter: brightness(1.25) grayscale(1);
		}

		@media (prefers-color-scheme: dark) {
			div.side_menu:not(:hover) a:not(.active) img{
			  filter: brightness(0.5) contrast(1.5) grayscale(1);
			}
		}

/* KITS */

[]{}

	/* WIDGETS */

	[]{}

		.kit_widget {
			border: solid 1px var(--grey_80);
			padding: var(--space);
			/* color: var(--text_color); */
			border-radius: calc(var(--outer_radius) * 2);
			transition: background var(--transition_out);
			display: flex;
	    flex-direction: column;
	    gap: var(--space);
	    justify-content: space-between;
		}

		.kit_widget_content {
			padding: var(--space_half);
		}