html{
	width: 100vw;
	height: 100%;
	overflow-x: hidden;
	overflow-y: overlay;
}
body, :not(text){
	font: 300 14px/18px 'Roboto', sans-serif;
	color: var(--color-text);
}
font{
	font: inherit;
	color: inherit;
}

::-webkit-scrollbar{
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background-color: transparent;
}
::-webkit-scrollbar-track{
	border-radius: 3px;
	background-color: transparent;
}
::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color: var(--color-5);
	cursor: pointer;
}
::-webkit-scrollbar-thumb:hover{
	background-color: var(--color-4);
}
html, div, p, span{
	scrollbar-color: var(--color-5) transparent;
	scrollbar-width: thin;
}

b, .bold, .bold .text-size{
	font-weight: 500;
}
i, i *{
	font-style: italic;
	opacity: 0.9;
}

.center{
	text-align: center;
	justify-content: center;
}
.left{
	text-align: left;
}

.hidden{
	display: none !important;
}

li{
	list-style: none;
	position: relative;
	padding-left: 20px;
	padding-bottom: 3px;
}	
	li::before{
		position: absolute;
		left: 6px;
		content: '\25AA';
	}

h1{
	font-size: var(--size-4);
	font-weight: 500;
	margin-bottom: var(--size-3);
}
h4{
	font-size: var(--size-3);
	font-weight: 500;
	margin-top: var(--size-2);
}
p{
	line-height: 18px !important;
}

.green,
.green *,
.green:before{
	color: var(--color-green) !important;
}
.red,
.red *,
.red:before{
	color: var(--color-red) !important;
}
.blue,
.blue *,
.blue:before{
	color: var(--color-blue) !important;
}
.orange,
.orange *,
.orange:before{
	color: var(--color-orange) !important;
}

.text-size .mark{
	color: var(--color-3);
}
.warning *{
	color: var(--color-red) !important;
}

.photo{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: var(--control-border-radius-2);
}

.count{
	margin-left: var(--size-1);
	padding: 0 var(--size-1);
	background-color: var(--color-7);
	color: var(--color-12);
	border-radius: var(--control-border-radius-2);
}