:root {
	--dark: rgb(25,30,35);
	--darker: rgb(15,20,25);
	--light: #C5C8C6;
	
	--blue-light: #9cdcfe;
	--blue-dark: #569bd4;
	--green-light: #b5cea8;
	--green-dark: #4ec9b0;
	
	--yellow: #dcdcaa;
	--red: #ce9178;
	--purple: #c586c0;
}

.purple { color: var(--purple); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.blue { color: var(--blue-dark); }
.green { color: var(--green-dark) !important; border-color: var(--green-dark) !important; }
.light { color: var(--light) !important; border-color: var(--light) !important; }

.bullet { border: 1px solid var(--light); color: var(--light); }

* { background: transparent; box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; font-size: inherit; border: 0 none; outline: 0 none; list-style-type: none; }
html { font-size: 10px; }

.hidden { display: none; }
.fr { flex-direction: row !important; }
.fvc { align-items: center !important; }
body.main .action.back { display: none; }

.loader {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.loader .loader-progress {
	background: linear-gradient(to right, var(--purple), var(--blue-dark), var(--blue-light));
	position: fixed;
	z-index: 2000;
	top: 0;
	width: 0%;
	height: 2px;
	transition: width .2s;
}