﻿/* Hintergrundfarben */
.asset-state-green
{
	background-color: #007900;
}

.asset-state-yellow
{
	background-color: #DC8200;
}

.asset-state-red
{
	background-color: #A90000;
}

.asset-state-blue
{
	background-color: #006EC3;
}

.asset-state-gray
{
	background-color: #808080;
}

.asset-state-purple
{
	background-color: #800080;
}


/** Basis **/

.asset-state
{
	position: relative;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
}

.asset-state-18, .asset-state-18::after
{
	width: 18px;
	height: 18px;
	background-size: 18px;
}

.asset-state-24, .asset-state-24::after
{
	width: 24px;
	height: 24px;
	background-size: 24px;
}

.asset-state-32, .asset-state-32::after
{
	width: 32px;
	height: 32px;
	background-size: 32px;
}

.asset-state-48, .asset-state-48::after
{
	width: 48px;
	height: 48px;
	background-size: 48px;
}

.asset-state-200, .asset-state-200::after
{
	width: 200px;
	height: 200px;
	background-size: 200px;
}

.asset-state::after
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
}

/******** Farbe: Grün ********/

.asset-state.green
{
	background-image: url( "img/states/AssetStateColor_Green.svg" );
}

/******** Farbe: Gelb ********/

.asset-state.yellow
{
	background-image: url( "img/states/AssetStateColor_Yellow.svg" );
}

/******** Farbe: Rot ********/

.asset-state.red
{
	background-image: url( "img/states/AssetStateColor_Red.svg" );
}

/******** Farbe: Blau ********/

.asset-state.blue
{
	background-image: url( "img/states/AssetStateColor_Blue.svg" );
}

/******** Farbe: Grau ********/

.asset-state.gray
{
	background-image: url( "img/states/AssetStateColor_Gray.svg" );
}

/******** Farbe: Lila ********/

.asset-state.purple
{
	background-image: url( "img/states/AssetStateColor_Purple.svg" );
}

/******** Farbe: Empty ********/

.asset-state.empty
{
	background-image: url( "img/states/AssetStateColor_Empty.svg" );
}

/******** Symbol: Minus ********/

.asset-state.minus::after
{
	background-image: url( "img/states/AssetStateSymbol_Minus.svg" );
}

/******** Symbol: Plus ********/

.asset-state.plus::after
{
	background-image: url( "img/states/AssetStateSymbol_Plus.svg" );
}

/******** Symbol: Kreuz ********/

.asset-state.cross::after
{
	background-image: url( "img/states/AssetStateSymbol_Cross.svg" );
}

/******** Symbol: Check ********/

.asset-state.check::after
{
	background-image: url( "img/states/AssetStateSymbol_Check.svg" );
}

/******** Symbol: Delta ********/

.asset-state.delta::after
{
	background-image: url( "img/states/AssetStateSymbol_Delta.svg" );
}

/******** Symbol: Stern ********/

.asset-state.star::after
{
	background-image: url( "img/states/AssetStateSymbol_Star.svg" );
}

/******** Symbol: Römisch 1 ********/

.asset-state.rome-1::after
{
	background-image: url( "img/states/AssetStateSymbol_Rome1.svg" );
}

/******** Symbol: Römisch 2 ********/

.asset-state.rome-2::after
{
	background-image: url( "img/states/AssetStateSymbol_Rome2.svg" );
}

/******** Symbol: Römisch 3 ********/

.asset-state.rome-3::after
{
	background-image: url( "img/states/AssetStateSymbol_Rome3.svg" );
}

/******** Symbol: Römisch 4 ********/

.asset-state.rome-4::after
{
	background-image: url( "img/states/AssetStateSymbol_Rome4.svg" );
}

/******** Symbol: Römisch 5 ********/

.asset-state.rome-5::after
{
	background-image: url( "img/states/AssetStateSymbol_Rome5.svg" );
}

/******** Symbol: Römisch 6 ********/

.asset-state.rome-6::after
{
	background-image: url( "img/states/AssetStateSymbol_Rome6.svg" );
}

/******** Symbol: Buchstabe A ********/

.asset-state.letter-a::after {
	background-image: url( "img/states/AssetStateSymbol_LetterA.svg" );
}

/******** Symbol: Buchstabe B ********/

.asset-state.letter-b::after
{
	background-image: url( "img/states/AssetStateSymbol_LetterB.svg" );
}

/******** Symbol: Buchstabe U ********/

.asset-state.letter-u::after {
	background-image: url( "img/states/AssetStateSymbol_LetterU.svg" );
}

/******** Symbol: Kamera ********/

.asset-state.camera::after
{
	background-image: url( "img/states/AssetStateSymbol_Camera.svg" );
}
