:root {
	--colorPrimary:rgb(27,27,27);
	--colorSecondary:rgb(69,69,69);
	--colorPost:rgb(96,96,96);
	--colorPink:rgb(169,0,169);
	--colorRed:rgb(255,96,96);
	--colorGreen:rgb(96,196,96);
	--colorBlue:rgb(0,169,169);
	--colorYellow:rgb(255,169,0);
	--colorHover:rgb(210,210,210);
	--colorTrans:rgba(255,255,255,0.9);
	--colorFront:rgb(255,255,255);
	--colorBackground:rgb(230,230,230);
	--widthMain:500px;
	--borderSmall:3px;
	--borderMedium:6px;
	--borderLarge:9px;
	--heightButtons:31px;
	--opacity:0.77;
} :root.dark_theme {
	--colorPrimary:rgb(255,255,255);
	--colorSecondary:rgb(230,230,230);
	--colorPost:rgb(200,200,200);
	--colorHover:rgb(50,50,50);
	--colorTrans:rgba(27,27,27,0.9);
	--colorFront:rgb(27,27,27);
	--colorBackground:rgb(0,0,0);
	--opacity:0.88;
} * {
	padding:0;
	margin:0;
	box-sizing:border-box;
	font-family:'Roboto', sans-serif;
	user-select:none;
} input, button, textarea, select, option {
	outline:none;
	box-shadow:none;
	min-width:0;
} img {
	pointer-events:none;
} .animating_theme, .animating_theme * {
	transition:all 0.5s ease !important;
}

@keyframes loader {
	0% {background-position:0%;}
	100% {background-position:-350%;}
} @keyframes charging {
	from {background-position:0%;}
	to {background-position:-200%;}
}

#intro {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
	justify-content:center;
	align-items:center;
	z-index:9;
	div {
		position:relative;
		width:132px;
		height:132px;
		img {
			position:absolute;
			width:100%;
			height:auto;
			transition:all 0.5s;
			&:nth-child(1) {
				transform:translateX(-313px) scale(6);
			} &:nth-child(2) {
				transform:translateX(313px) scale(6);
			} &:nth-child(3) {
				transform:scale(9);
			}
		}
	} &.full {
		div {
			img {
				transform:translateX(0) scale(1);
			}
		}
	}
}

#loader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	flex-direction:column;
	padding-top:9px;
	background-color:var(--colorFront);
	z-index:8;
	> div:first-child {
		width:0;
		height:9px;
		background:linear-gradient(69deg, rgb(255,0,0), rgb(0,0,255), rgb(255,0,0), rgb(0,255,0), rgb(255,0,0));
		background-size:400%;
		transition:all 1s;
		margin:0 9px;
	} &.full {
		> div:first-child {
			width:calc(100% - 18px);
			border-radius:3px;
			animation:loader 9s infinite linear;
		}
	} > div:last-child {
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		display:flex;
		justify-content:center;
		align-items:center;
		div {
			height:132px;
			width:132px;
			background:linear-gradient(90deg, var(--colorHover) 0%, var(--colorFront) 50%, var(--colorHover) 100%);
			background-size:200%;
			mask-image:url("../res/iconBlack.svg");
			mask-size:100%;
			animation:charging 1s infinite linear;
			&.full {
				transform:rotateY(0deg);
				animation:charging 1s infinite linear, rotate180 0.5s linear;
			}
		}
	}
}

@keyframes rotate180 {
	from {transform:rotateY(180deg);}
	to {transform:rotateY(0deg);}
}

#popups {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:var(--colorTrans);
	overflow:hidden;
	z-index:7;
	> * {
		position:absolute;
		width:var(--widthMain);
		display:flex;
		flex-direction:column;
		align-items:flex-end;
		background-color:var(--colorFront);
		gap:12px;
		padding:12px;
		z-index:0;
		opacity:0;
		transition:opacity 0.3s;
		border-radius:var(--borderMedium);
		&.full {
			z-index:1;
			opacity:1;
		}
	}
}
#alerts {
	p {
		width:100%;
		font-size:16px;
		color:var(--colorSecondary);
		margin-top:9px;
	}
}
#selects {
	max-height:100%;
	p {
		width:100%;
		color:var(--colorSecondary);
		font-size:15px;
		margin-bottom:9px;
	} ul {
		width:100%;
		flex:1;
		overflow-x:hidden;
		overflow-y:auto;
		display:flex;
		flex-wrap:wrap;
		gap:9px;
		li {
			list-style:none;
			&.title {
				margin-top:18px;
				width:100%;
				background-color:transparent;
				font-size:15px;
				color:var(--colorSecondary);
			} &.disabled {
				background-color:var(--colorBackground);
				padding:6px 9px;
				border-radius:var(--borderLarge);
				font-size:15px;
				color:var(--colorSecondary);
			}
		}
	}
}

aside {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:6;
	display:flex;
	> * {
		position:absolute;
		flex-direction:column;
		width:100%;
		height:100%;
		z-index:0;
		opacity:0;
		transition:opacity 0.3s;
		&.full {
			z-index:1;
			opacity:1;
		}
	}
}

.input {
	position:relative;
	width:100%;
	min-height:45px;
	display:flex;
	align-items:center;
	gap:9px;
	padding:0 15px;
	border-radius:var(--borderLarge);
	overflow:hidden;
	background:var(--colorBackground);
	&::before {
		content:'';
		position:absolute;
		bottom:50%;
		left:50%;
		width:0;
		height:0%;
		opacity:0;
		background-color:var(--colorHover);
		transition:all 0.15s;
		z-index:0;
	}
	span {
		font-size:18px;
		color:var(--colorSecondary);
		z-index:1;
	} label {
		position:absolute;
		top:13px;
		left:43px;
		font-size:16px;
		color:var(--colorSecondary);
		cursor:text;
		transition:all 0.1s;
		z-index:1;
		cursor:pointer;
	} input {
		font-size:16px;
		color:var(--colorSecondary);
		flex:1;
		padding:7px 0;
		margin-top:12px;
		background:transparent;
		border:none;
		z-index:1;
	} .select {
		flex:1;
		font-size:16px;
		padding:4px 0;
		margin-top:10px;
		z-index:1;
		cursor:pointer;
		p {
			width:100%;
			font-size:16px;
			color:var(--colorSecondary);
		}
		input, ul {
			display:none;
		}
	} textarea {
		flex:1;
		resize:none;
		font-size:16px;
		color:var(--colorSecondary);
		padding:0;
		margin-top:20px;
		margin-bottom:4px;
		background:transparent;
		border:none;
		z-index:1;
	} &.full {
		&::before {
			bottom:0;
			left:0;
			width:100%;
			height:100%;
			opacity:1;
		}
		label {
			top:7px;
			font-size:8px;
			cursor:initial;
		}
	}
}

.hover {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	border-radius:var(--borderLarge);
	border:none;
	height:var(--heightButtons);
	padding:0 9px;
	gap:6px;
	white-space:nowrap;
	overflow:hidden;
	cursor:pointer;
	background-color:transparent;
	&::before {
		position:absolute;
		content:'';
		bottom:50%;
		left:50%;
		width:0;
		height:0%;
		opacity:0;
		transition:all 0.15s;
		background-color:var(--colorBackground);
	} &:hover::before {
		bottom:0;
		left:0;
		width:100%;
		height:100%;
		opacity:1;
	} span {
		font-size:15px;
		color:var(--colorSecondary);
	} p {
		font-size:15px;
		color:var(--colorSecondary);
		overflow:hidden;
		text-overflow:ellipsis;
	} img {
		width:15px;
		height:15px;
	} > * {
		z-index:0;
	}
}

.button {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	text-decoration:none;
	border-radius:var(--borderLarge);
	border:none;
	background-color:var(--colorBackground);
	padding:0 9px;
	height:var(--heightButtons);
	min-width:38px;
	min-height:31px;
	white-space:nowrap;
	overflow:hidden;
	cursor:pointer;
	&::before {
		position:absolute;
		content:'';
		bottom:50%;
		left:50%;
		width:0;
		height:0%;
		opacity:0;
		background-color:var(--colorHover);
		transition:all 0.15s;
		z-index:0;
	} &:hover::before {
		bottom:0;
		left:0;
		width:100%;
		height:100%;
		opacity:1;
	} img {
		width:15px;
		height:15px;
	} span {
		font-size:16px;
		color:var(--colorSecondary);
	} p {
		font-size:15px;
		color:var(--colorSecondary);
		overflow:hidden;
		text-overflow:ellipsis;
	} > * {
		z-index:1;
	}
}

.titleInfo {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0 9px;
	height:27px;
	background-color:var(--colorFront);
	border-radius:var(--borderLarge);
	font-weight:normal;
	color:var(--colorSecondary);
	font-size:16px;
	margin-top:18px;
	margin-bottom:9px;
}

nav {
	display:flex;
	gap:9px;
}

body {
	width:100vw;
	height:100vh;
	background-color:var(--colorBackground);
	overflow:hidden;
	position:relative;
	main {
		width:100%;
		height:100%;
		display:flex;
		overflow-x:hidden;
		overflow-y:auto;
	}
}

.colorgreen {
	color:var(--colorGreen) !important;
} .colorred {
	color:var(--colorRed) !important;
} .coloryellow {
	color:var(--colorYellow) !important;
}

@media screen and (orientation:portrait) {
:root {
	--widthMain:calc(100% - 18px);
}
}