diff --git a/source/components/conversation/Explicable.css b/source/components/conversation/Explicable.css
index 499d744b3..f871669d4 100644
--- a/source/components/conversation/Explicable.css
+++ b/source/components/conversation/Explicable.css
@@ -1,26 +1,27 @@
 .explicable {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 
-.explicable .icon{
-  text-align: center;
-  width: 1.3em;
-  line-height: 1.3em;
-  border-radius: .2em;
-  display: inline-block;
-  margin-left: .4em;
-  padding: .15em;
-  opacity: .4;
-  border: 1px solid transparent;
-  border-radius: 1em;
-  cursor: pointer;
-  vertical-align: baseline;
-  font-size: 95%;
+.explicable .icon {
+	text-align: center;
+	width: 1.3em;
+	line-height: 1.3em;
+	border-radius: 0.2em;
+	display: inline-block;
+	margin-left: 0.4em;
+	padding: 0.15em;
+	opacity: 0.65;
+	border: 1px solid transparent;
+	border-radius: 1em;
+	cursor: pointer;
+	vertical-align: baseline;
+	font-size: 95%;
+	color: #2975D1;
 }
 
 .explicable .icon:hover {
-  opacity: 1;
+	opacity: 1;
 }
 /* Add explanation text to icon, feels too heavy
 .explicable .icon:hover::after {
@@ -31,7 +32,7 @@
 }
 */
 .explicable.explained .icon {
-  opacity: 1;
-  background: #4A89DC;
-  color: white;
+	opacity: 1;
+	background: #4a89dc;
+	color: white;
 }