Transform question mark to cross when tooltip is open

- Behavior consistent w/ price_breakdown feature.

app/assets/stylesheets/darkswarm/question-mark-icon.scss

@@ -9,6 +9,7 @@
   background-image: image-url("question-mark-icon.svg");
   background-size: cover;
   background-repeat: no-repeat;
+  border-radius: 50%;
 
   // Reset button element css attributes
   padding: 0;
@@ -22,6 +23,17 @@
   &:focus {
     background-color: transparent;
   }
+
+  &.open {
+    background-image: none;
+    background-color: $teal-500;
+
+    &::before {
+      @include icon-font;
+      content: "";
+      color: $white;
+    }
+  }
 }
 
 .joyride-tip-guide.question-mark-tooltip {
@@ -29,7 +41,7 @@
   max-width: 65%;
   // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
   margin-left: -7.4rem;
-  margin-top: 0.1rem;
+  margin-top: -0.1rem;
   background-color: transparent;
 
   .background {
@@ -39,6 +51,7 @@
     width: 100%;
     height: 100%;
     z-index: -1;
+    cursor: pointer;
   }
 
   .joyride-content-wrapper {