Issues-506: Fixed styles for notification popup

Author: atelomycterus

design/custom.css

@@ -2,4 +2,5 @@
 @import 'mebox';
 @import "lists";
 @import "easymde";
-@import "searchbox";
+@import "searchbox";
+@import "popup";

design/custom.css.map

@@ -0,0 +1,81 @@
+div.Popup {
+  .Body {
+    a {
+      color: $global-blue;
+      &:focus,
+      &:hover {
+        color: $global-blue;
+        text-decoration: $theme-link-hover_textDecoration;
+      }
+    }
+    .Buttons .Close {
+      &:focus,
+      &:hover {
+        color: $global-color_white;
+      }
+    }
+  }
+
+
+  a.Close {
+    top: 24px;
+    right: 28px;
+    @if ($staticVariables) {
+      @include CloseButton($popup_fg);
+    }
+  }
+}
+.InformWrapper {
+  margin: 0px;
+}
+.InformMessages {
+  margin-left: 55px;
+}
+
+.InformMessages .InformMessage {
+   padding: 16px 34px 10px 26px;
+   margin: 10px 0px;
+   width: 436px;
+   max-width: 436px;
+}
+.InformMessages .InformMessage,
+.InformMessages .InformMessage:hover {
+  background-color: $global-color_white !important;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1) !important;
+  font-size: $global-medium_fontSize;
+  font-family: $global-body_fontFamily;
+
+  a {
+    color: $global-blue;
+  }
+
+  a.Close {
+    top: 16px;
+    right: 21px;
+
+    span::after {
+      content: "";
+      display: inline-block;
+      background-size: cover;
+      position: absolute;
+      height: 12px;
+      width: 12px;
+      background-image: url("/themes/topcoder/design/images/icon-close-2.svg");
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .InformMessages {
+    margin-left: 0px;
+  }
+  .InformWrapper {
+    margin: 5px;
+  }
+  .InformMessages .InformMessage {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+