/* light color 1 */
.color-1-action-button {
	background: #03a9f4;
	color: #ebebeb;
}

/* dark color 1 */
.color-1-background {
	background: #0288d1;
	color: #ebebeb;
}

/* light color 2 */
.color-2-action-button {
	background: #3f51b5;
	color: #ebebeb;
}

/* dark color 2 */
.color-2-background {
	background: #303f9f;
	color: #ebebeb;
}

.color-internal-button {
	transition-duration: 0.4s;
	:hover {
		background: rgba(0, 0, 0, 0.3);
	}
}

.color-menu-background {
	color: #fff;
	background-color: #263238;
	.item {
		background: transparent;
		color: #ccc;
		&:hover {
			background: rgba(1, 1, 1, 0.5);
			color: #fff;
		}
	}
	.enable {
		background: rgba(1, 1, 1, 0.3);
		color: #03a9f4;
	}
}

.color-background {
	background: #fafafa;
}

.color-background-vignette {
	background: #e8e8e8;
}

.color-background-modal {
	transition-duration: 0.4s;
	background: rgba(0, 0, 0, 0.3);
}

.color-button-cancel {
	/* Disable color */
	background-color: #c0c8d6;
	color: #636363;
	&:enabled {
		background-color: #f23a15;
		color: #000;
	}
}

.color-button-validate {
	/* Disable color */
	background-color: #dddddd;
	color: #636363;
	&:enabled {
		background-color: #4caf50;
		color: #000;
	}
}

.color-button-normal {
	/* Disable color */
	background-color: #dddddd;
	color: #636363;
	&:enabled {
		background-color: #14c8ff;
		color: #000;
	}
}

.color-shadow-black {
	transition-duration: 0.4s;
	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
	transition-duration: 0.4s;
	&:hover:enabled {
		box-shadow: 0px 8px 20px 0 rgba(0, 0, 0, 0.9);
	}

	&:active:enabled {
		box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.9);
	}
}

.color-shadow-light {
	transition-duration: 0.4s;
	box-shadow: 0px 2px 4px 0 rgba(255, 255, 255, 0.6);
	transition-duration: 0.4s;
	&:hover:enabled {
		box-shadow: 0px 8px 20px 0 rgba(255, 255, 255, 0.9);
	}

	&:active:enabled {
		box-shadow: 0px 4px 10px 0 rgba(255, 255, 255, 0.9);
	}
}