:root, html {
	--background-intense: black;
	--background: #181818;
	--background-lighter: #2e2e2e;
	--background-light: #707070;
	--foreground-intense: white;
	--foreground: #ededed;
	--foreground-lighter: #d8d8d8;
	--foreground-light: #b0b0b0;
    --accent: red;
	--foreground-on-accent: #fff;
	--control-background: var(--background-light);
	--control-height: 2.25rem;
	--control-focus: var(--accent);
	--control-hover: var(--foreground-intense);
    --control-disabled: #535353;
	--control-chrome: var(--foreground-lighter);
	--control: var(--control-chrome);
	--control-border-color: var(--foreground-lighter);
	--control-border-width: 1px;  
	--control-padding: 0.3em;
    --font: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    --font-heading: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	--font-weight: 300;
	--breakpoint-smartphone: 768px;
	/* --input-border-color: var(--control-background);
	--input-border-width: 1px;
	--input-height: var(--control-height);
	--input-background: transparent;
	--input-foreground: var(--foreground);
	--input-fill: var(--foreground-light);
	--input-fill-foreground: var(--background-light); */
	--accent-purple: #A200FF;
	--accent-purple-alt: #5859B9;
	--accent-dark-purple: #260930;
	--accent-red: #E51400;
	--accent-green: #339933;
	--accent-blue: #1BA1E2;
	--accent-marine: #034888;
	--accent-teal: #D54D34;
}

.has-accent-purple {
	--accent: var(--accent-purple);
}

.has-accent-purple-alt {
	--accent: #5859B9;
}

.has-accent-dark-purple {
	--accent: #260930;
}

.has-accent-red {
	--accent: #E51400;
}

.has-accent-green {
	--accent: #339933;
}

.has-accent-blue {
	--accent: #1BA1E2;
}

.has-accent-marine {
	--accent: #034888;
}

.has-accent-teal {
	--accent: #D54D34;
}


:root, html, body {
	--border-radius-small: 0.15rem;
	--border-radius: 0.25rem;
	--border-radius-large: 0.5rem;
	--border-radius-big: 0.5rem;
	--gap-small: 0.6rem;
	--gap: 1rem;
	--gap-big: 2rem;
	--font-size-bigger: 1.1rem;
	--font-size-big: 1.4rem;
	--font-size-base: 1rem;
	--font-size-huge: 2rem;
	--font-size-smaller: 0.9rem;
	--font-size-small: 0.7rem;
}

/* @import "shekesh-design"; */

.notification {
	text-align: left;
	padding: 0.4rem 1rem;
	background-color:var(--background-light);
	border-radius:4px;
	max-width: 500px;
	top: 0px;
	position:relative;
	box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
	margin-bottom: 1rem;
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-iteration-count: 1;
}

.notification.is-closing {
	animation-name: fadeOut;
	animation-duration: 1s;
	animation-iteration-count: 1;
}

.notification:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	border-top-left-radius:4px;
	border-bottom-left-radius: 4px;
}

.notification.is-info:before {
	background-color:#A200FF;
}

.notification.is-success:before {
	background-color:#339933;
}

.notification.is-warning:before {
	background-color:#f3c81d;
}

.notification.is-error:before {
	background-color:#E51400;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


/* base */
html, body {
	height: 100%;
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font);
	font-weight: var(--font-weight);
    box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
	color: var(--foreground);
	font-family: var(--font);
    line-height: 1.5;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

h1:not(.is-default),
.is-hstyle-1 {
    font-size: 2.2rem;
    font-weight: 300;
}

h2:not(.is-default),
.is-hstyle-2 {
    font-size: 1.8rem;
    font-weight: 300;
}

h3:not(.is-default),
.is-hstyle-3 {
    font-size: 1.4rem;
    font-weight: normal;
}

h4:not(.is-default),
.is-hstyle-4 {
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: uppercase;
}

.has-appbar {	
	padding-bottom: 2.6rem;
}







sk-layout-flex {
	display: flex !important;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	gap: var(--gap, 1rem);
	padding: 0px;
	margin: 0px;
	
	&[direction="column"] {
		flex-direction: column;
		align-items: stretch;
	}

	&[gap="big"] {
		gap: var(--gap-big, 2rem);
	}

	&[gap="small"] {
		gap: var(--gap-small, 0.6rem);
	}

	&[wrap] {
		flex-wrap: wrap;
	}

	&[alternating] > * {
		padding: var(--gap-small);
	}

	&[alternating] > *:nth-of-type(odd) {
		background-color: var(--background-intense);
		border-radius: var(--border-radius);
	}

	& > * {
		flex-shrink: 1;
		flex-basis: auto;
		width: auto;
	}

	& > .layout-grow {
		flex-grow: 1;
	}
}




.input {
	min-width:1rem;
	flex-grow: 1;
	width: 100%;
	background-color: transparent;	
	border-width: var(--control-border-width, 1px);
	border-color: var(--control, #ccc);
	border-style: solid;
	border-radius: var(--border-radius, 4px);
	color: var(--foreground, #000);
	height: var(--control-height, 2.5rem);
	outline: 0;
	padding: 0 var(--control-padding, 0.5rem);
	margin: 0;
	box-sizing: border-box;
	font-family: inherit;
}
.input:hover {
	border-color: var(--control-hover, #999);
}
.input:focus {
	border-color: var(--control-focus, #0066cc);
}

textarea.textarea {
	width: 100%;
	color: var(--foreground);
	border-width: var(--control-border-width);
	border-color: var(--control-chrome);
	border-style: solid;
	border-radius: var(--border-radius);
	height: 8rem;
	outline: 0;
	padding: var(--control-padding);
	box-sizing: border-box;
	min-height: 5rem;
	background-color: transparent;

	&:hover {
		border-color: var(--control-hover);
	}

	&:focus {
		border-color: var(--control-focus);
	}
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	border: var(--control-border-width) solid transparent;
	padding: var(--control-padding) 0.8em;
	height: var(--control-height);
	min-height: var(--control-height);
	background-color: var(--control-background);
	color: var(--foreground);
	outline: none;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--border-radius);

	&:hover {
		border-color: var(--control-hover);
	}

	&:active {
		border-color: var(--control-focus); 
	}
}

.icon > svg {
	fill: var(--control);
	max-width: 1.2em;
	max-height: 1.2em;
	width: 1.2em;
	height: 1.2em;

	display: inline-flex;
	justify-content: center;
	align-content: center;
	align-items: center;

	&.big > svg {
		max-width: 2.2em;
		max-height: 2.2em;
		width: 2.2em;
		height: 2.2em;
	}

	&.small > svg {
		max-width: 0.6em;
		max-height: 0.6em;
		width: 0.6em;
		height: 0.6em;
	}
}

.invisible {
	display: none !important;
}


dialog.dialog {
	background: var(--background);
	border: none !important;
	border-radius: var(--border-radius);
}

dialog.dialog::backdrop {
	background: var(--background, black);
}