/* Wrapper
-----------*/

	.fecg-input-color {
		position: relative;
	}

/* Vorschau
------------*/

	.fecg-input-color--preview {
		display: block;
		position: absolute;
		left: 5px;
		top: 5px;
		height: 26px;
		width: 40px;
		background-color: #f2f2f2;
		border-radius: 5px;
		cursor: pointer;
	}

/* Eingabefeld
---------------*/

	.fecg-input-color--input {
		padding-left: 55px !important;
		border: none !important;
	}

/* Picker
----------*/

	.fecg-input-color--picker {
		position: absolute;
		top: 85px;
		z-index: 99;
		background-color: #FFF;
		border: 1px solid #dadae5;
		padding: 10px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.18);
		-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.18);
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.18);
		display: grid;
		grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) ;
		grid-column-gap: 5px;
		grid-row-gap: 5px;
	}

	.fecg-input-color--picker span {
		display: block;
		height: 26px;
		width: 40px;
		border-radius: 5px;
		cursor: pointer;
	}

	.fecg-input-color--picker span.active {
		border: 2px solid #FFFFFF;
  		outline: 1px solid #000000;
	}

	.fecg-input-color--picker span:hover {
		opacity: 0.8;
	}