:root{
	/*  ==  Elevation background color  ==  */
	--dp00bg: #10131a;
	--dp01bg: #1c1f26;
	--dp02bg: #21242a;
	--dp03bg: #23262c;
	--dp04bg: #26282f;
	--dp06bg: #2a2d33;
	--dp08bg: #2d3036;
	--dp12bg: #32343a;
	--dp16bg: #34363c;
	--dp24bg: #36393f;

	--reversebg: #e3e3e3;
	/*  ==  TEXT COLOR  ==  */
	--text1: rgb(255 255 255 / .85);
	--text2: rgb(255 255 255 / .60);
	--textdisabled: rgb(255 255 255 / .32);

	--textreverse1: rgb(0 0 0 / .85);
	--textreverse2: rgb(0 0 0 / .60);
	--textreversedisabled: rgb(0 0 0 / .32);

	/*  ==  THEME COLOR  ==  */
	--primary: #339abd;
	--primaryvariant: #43b2d9;
	--primarydark: #1d3949;
	--primarydarker: #14252f;
	--secondary: #328A7E;
	--secondaryvariant: #5eb7ae;
	--secondarydarker: #2a6a5f;
	--success: #8fd8ba;
	--successvariant: #00a36c;
	--info: #99a8de;
	--infovariant: #1749b4;
	--error: #CF6679;
	--errorvariant: #a14e5d;


	--primary50: #339abd80;
	--primaryvariant50: #43b2d980;
	--primarydark50: #1d394980;
	--primarydarker50: #14252f80;
	--secondary50: #328A7E80;
	--secondaryvariant50: #5eb7ae80;
	--secondarydarker50: #2a6a5f80;


	/* == UI SIZE == */
	--rowHeight: 50px;
	--gridsideWidth: 300px;
}
.layer00{background: var(--dp00bg);}
.layer01{background: var(--dp01bg); box-shadow: var(--dp01sh);}
.layer02{background: var(--dp02bg); box-shadow: var(--dp02sh);}
.layer03{background: var(--dp03bg); box-shadow: var(--dp03sh);}
.layer04{background: var(--dp04bg); box-shadow: var(--dp04sh);}
.layer06{background: var(--dp06bg); box-shadow: var(--dp06sh);}
.layer08{background: var(--dp08bg); box-shadow: var(--dp08sh);}
.layer12{background: var(--dp12bg); box-shadow: var(--dp12sh);}
.layer16{background: var(--dp16bg); box-shadow: var(--dp16sh);}
.layer24{background: var(--dp24bg); box-shadow: var(--dp24sh);}


@media all and (min-width: 900px){

	:root{
		--rowHeight: 40px;
	}

}