#tranquility-selection-box {
	margin-bottom : 12px;
}

#tranquility-selection-box .display-area {
	color : black;
	background : #eee;
	font-family: helvetica;
	border-radius : 5px;
	overflow : hidden;
	padding : 0 12px;
	line-height : 2;
	border : solid 1px #333;
	width : 300px;
	position : relative;
}


#tranquility-selection-box .display-area::before {
	font-family : fontawesome;
	color : #333;
	height : 100%;
	width : 40px;
	text-align : center;
	border-left : solid 1px #333;
	background-image : linear-gradient(hsl(200, 50%, 98%), hsl(200, 50%, 20%));
	position : absolute;
	right : 0;
}
#tranquility-selection-box[data-state=open] .display-area::before {
	content : "\f062";
}
#tranquility-selection-box[data-state=closed] .display-area::before {
	content : "\f063";
}

#tranquility-selection-box .option-list {
	overflow : hidden;
	width : 300px;
	margin : 12px;
	border-radius : 4px;
	border : solid 1px black;
	background : white;
	padding : 6px;
	box-shadow : 2px 3px 4px 0px hsla(0, 0%, 0%, 0.3);
}

#tranquility-selection-box .option-list .option {
	padding-left : 10px;
	position : relative;
	line-height : 2;
	font-family : helvetica;
}

#tranquility-selection-box .option:last-child {
	border-bottom-width : 0;
}

#tranquility-selection-box .option.__selected:before {
	content : "\f00c";
	font-family : fontawesome;
	color : black;
	height : 100%;
	width : 40px;
	text-align : center;
	position : absolute;
	right : 0;
}

#tranquility-selection-box .option-list > .option:hover,
 #tranquility-selection-box .option-list > .option:focus{
	outline : none;
	font-weight : 600;
	border-radius : 4px;
	background : hsl(200, 50%, 80%);
}

#tranquility-selection-box .option-list > .option.__selected {
	background : hsl(200, 50%, 80%);
	border-radius : 4px;
	font-weight : 600;
	outline : none;
}