diff --git a/web/calendar/calendar.css b/web/calendar/calendar.css
index ea914d2bb..778c48513 100644
--- a/web/calendar/calendar.css
+++ b/web/calendar/calendar.css
@@ -1,191 +1,188 @@
 a.filtersButton {
   font-family: "Open Sans", sans-serif;
   font-weight: 600;
   float: left;
   color: white;
   background-color: rgba(68,68,85,0.67);
   padding: 8px 18px;
   border-radius: 18px;
   margin: 0 15px 5px 15px;
   font-size: 16px;
   cursor: pointer;
   text-transform: uppercase;
   position: absolute;
 }
 a.filtersButton > svg {
   padding-right: 5px;
 }
 div.content {
   min-height: 100%;
   padding-top: 10px;
   position: relative;
 }
 
 h2.nav {
   font-family: 'Anaheim', sans-serif;
   text-align: center;
   margin: 8px auto 12px auto;
   width: 250px;
   color: #333333;
   display: flex;
   justify-content: space-between;
 }
 h2.nav > a.monthLink {
   color: #036AFF;
 }
 h2.nav > div.monthName {
   display: inline-block;
   width: 200px;
 }
 
 table.calendar {
   table-layout: fixed;
   padding: 10px;
   width: 100%;
 }
 table.calendar > thead > tr > th {
   padding-bottom: 6px;
   color: #888888;
   font-weight: normal;
   text-transform: uppercase;
   font-size: 14px;
 }
 textarea.entryText {
   box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
   font-size: 11px;
   width: 100%;
   background: none;
   border: none;
   outline: none;
   resize: none;
   overflow: auto;
   overflow-y: hidden;
   padding-right: 15px;
 }
 table.calendar td.day {
   border: 1px solid transparent;
   background-color: white;
   position: relative;
   vertical-align: top;
   line-height: 0;
   cursor: text;
   height: 120px;
 }
 td.day > div.entryContainer {
   overflow: auto;
   height: 120px;
 }
 td.day > div.focusedEntryContainer {
   height: 100px !important;
 }
 div.entryContainer > div.entryContainerSpacer {
   height: 13px;
 }
 div.entry {
   padding: 5px;
   box-shadow: inset 0px 0px 0px 2px white;
   border-radius: 5px;
   position: relative;
 }
 div.darkEntry {
   color: white;
 }
 div.darkEntry textarea.entryText {
   color: white;
 }
 div.darkEntry div.actionLinks > a {
   color: lightgray;
 }
 div.darkEntry div.actionLinks > a:hover {
   color: white;
 }
 span.entryLoading {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 12px;
 }
 span.entryError {
   position: absolute;
   top: 11px;
   right: 5px;
   font-size: 16px;
   width: 6px;
   color: red !important;
 }
 div.actionLinks {
   line-height: 90%;
   margin-top: 3px;
   font-size: 16px;
 }
 div.dayActionLinks {
   padding-left: 3px;
   margin-bottom: 1px;
   height: 16px;
 }
 div.actionLinks a + a {
   margin-left: 6px;
 }
 span.actionLinksText {
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   font-size: 11px;
   position: relative;
   bottom: 1px;
   padding-left: 5px;
 }
 span.rightActionLinks {
   float: right;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
   display: inline-block;
   overflow: hidden;
 }
 div.actionLinks svg {
   fill: gray;
   width: 10px;
   height: 10px;
 }
 div.actionLinks svg.history {
   position: relative;
   top: 1px;
 }
 div.darkEntry div.actionLinks svg {
   fill: lightgray;
 }
 div.actionLinks a:hover svg {
   fill: black;
 }
 div.darkEntry div.actionLinks a:hover svg {
   fill: white;
 }
 div.focusedEntry {
   z-index: 3 !important;
 }
 div.actionLinks a {
   color: gray;
 }
 div.actionLinks a:hover {
   color: black;
 }
 td.day > h2 {
   position: absolute;
   bottom: 2px;
   right: 3px;
   color: #999999;
   font-size: 32px;
   line-height: 32px;
   z-index: 1;
   font-family: 'Anaheim', sans-serif;
 }
 td.currentDay > h2 {
   color: #FF944D;
 }
 
 div.clear {
   clear: both;
 }
diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
index 137705a5f..359d3a601 100644
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -1,519 +1,517 @@
 div.container {
   margin-left: 400px;
   height: 100%;
   background-color: white;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 }
 div.activeContainer {
   border: 2px solid #5989D6;
   margin-left: 402px;
 }
 div.outerMessageContainer {
   position: relative;
   height: 100%;
   min-height: 0;
 }
 div.messageContainer {
   height: 100%;
   overflow-y: auto;
   display: flex;
   flex-direction: column-reverse;
 }
 div.mirroredMessageContainer {
   flex-direction: column !important;
   transform: scaleY(-1);
 }
 div.mirroredMessageContainer > div {
   transform: scaleY(-1);
 }
 
 div.message {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
 }
 
 div.inputBar {
   display: flex;
   flex-direction: column;
   border-top: 2px solid #E4E4E4;
 }
 div.inputBarTextInput {
   display: flex;
   padding: 10px;
   align-items: center;
   flex-shrink: 0;
 }
 div.inputBarTextInput > textarea {
   flex-grow: 1;
   border: none;
-  font-family: sans-serif;
   font-size: 15px;
   line-height: 15px;
   width: 100%;
   resize: none;
   padding-right: 20px;
   min-height: 17px;
 }
 div.inputBarTextInput > textarea:focus {
   outline: none;
 }
 a.send {
   display: flex;
   align-items: center;
   text-transform: uppercase;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   color: #555555;
   cursor: pointer;
 }
 svg.sendButton {
   padding: 0 4px;
   font-size: 24px;
   color: #88BB88;
 }
 div.joinButtonContainer > a {
   margin: 3px 12px;
   padding: 3px 0 5px 0;
   display: flex;
   background-color: #44CC99;
   border-radius: 5px;
   justify-content: center;
   cursor: pointer;
 }
 span.joinButtonText {
   font-size: 18px;
   color: white;
   text-align: center;
 }
 span.explanation {
   color: #777777;
   text-align: center;
   padding-top: 4px;
   padding-bottom: 8px;
 }
 
 div.loading {
   text-align: center;
   padding: 12px;
 }
 
 div.conversationHeader {
   text-transform: uppercase;
   color: #777777;
   font-size: 14px;
   padding: 7px 0;
   text-align: center;
 }
 div.conversationHeader:last-child {
   padding-top: 6px;
 }
 
 div.robotextContainer {
   text-align: center;
   color: #333333;
   padding: 6px 0;
   margin: 0 40px 5px 40px;
   font-size: 15px;
 }
 div.innerRobotextContainer {
   display: inline-flex;
   position: relative;
   word-break: break-word;
 }
 
 div.messageTimestampTooltip {
   position: absolute;
   background-color: black;
   color: white;
   padding: 5px;
   border-radius: 5px;
   font-size: 14px;
   z-index: 1;
   pointer-events: none;
   white-space: nowrap;
 }
 div.messageTimestampTooltip:after {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   border-width: 7px;
   border-style: solid;
 }
 div.messageLeftTooltip {
   transform: translate(0%, -50%);
 }
 div.messageRightTooltip {
   transform: translate(0%, -50%);
 }
 div.messageLeftTooltip:after {
   top: 7px;
   right: -14px;
   border-color: transparent transparent transparent black;
 }
 div.messageRightTooltip:after {
   top: 7px;
   left: -14px;
   border-color: transparent black transparent transparent;
 }
 div.messageTopLeftTooltip:after {
   bottom: -14px;
   left: 4px;
   border-color: black transparent transparent transparent;
 }
 div.messageTopRightTooltip:after {
   bottom: -14px;
   right: 4px;
   border-color: black transparent transparent transparent;
 }
 div.messageBottomLeftTooltip:after {
   top: -14px;
   left: 4px;
   border-color: transparent transparent black transparent;
 }
 div.messageBottomRightTooltip:after {
   top: -14px;
   right: 4px;
   border-color: transparent transparent black transparent;
 }
 
 div.messageActionLinks {
   position: absolute;
   display: flex;
   top: 0;
   bottom: 0;
   align-items: center;
   color: gray;
   padding: 0 6px;
 }
 div.viewerMessageActionLinks {
   right: 100%;
 }
 div.nonViewerMessageActionLinks {
   left: 100%;
 }
 div.messageActionLinks > div + div {
   margin-left: 4px;
 }
 div.messageReplyTooltip {
   font-size: 14px;
 }
 div.messageSidebarTooltip {
   font-size: 16px;
 }
 
 div.messageTooltipIcon {
   padding: 2px 3px;
   position: relative;
 }
 div.messageTooltipIcon:hover {
   cursor: pointer;
 }
 
 div.textMessage {
   padding: 6px 12px;
   white-space: pre-wrap;
   word-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 div.normalTextMessage {
   font-size: 16px;
-  font-family: sans-serif;
 }
 div.emojiOnlyTextMessage {
   font-size: 32px;
-  font-family: sans-serif;
+  font-family: emoji;
 }
 span.authorName {
   color: #777777;
   font-size: 14px;
   padding: 4px 24px;
 }
 div.darkTextMessage {
   color: white;
 }
 div.lightTextMessage {
   color: black;
 }
 div.darkTextMessage a {
   color: #129AFF;
   text-decoration: underline;
 }
 div.lightTextMessage a {
   color: #2A5DB0;
   text-decoration: underline;
 }
 
 div.content {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   margin-bottom: 5px;
   box-sizing: border-box;
   width: 100%;
 }
 div.nonViewerContent {
   align-self: flex-start;
   justify-content: flex-start;
   padding-right: 8px;
 }
 div.viewerContent {
   align-self: flex-end;
   justify-content: flex-end;
   padding-right: 4px;
 }
 div.iconContainer {
   margin-right: 1px;
 }
 div.iconContainer > svg {
   height: 16px;
 }
 
 div.messageBoxContainer {
   position: relative;
   display: flex;
   max-width: calc(min(68%, 1000px));
   margin: 0 4px 0 12px;
 }
 div.nonViewerMessageBoxContainer {
   justify-content: flex-start;
 }
 div.viewerMessageBoxContainer {
   justify-content: flex-end;
 }
 div.fixedWidthMessageBoxContainer {
   width: 68%;
 }
 
 div.messageBox {
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   flex-shrink: 0;
   max-width: 100%;
 }
 div.fixedWidthMessageBox {
   width: 100%;
 }
 
 div.failedSend {
   text-transform: uppercase;
   display: flex;
   justify-content: flex-end;
   flex-shrink: 0;
   font-size: 14px;
   margin-right: 30px;
   padding-bottom: 6px;
 }
 span.deliveryFailed {
   padding: 0 3px;
   color: #555555;
 }
 a.retrySend {
   padding: 0 3px;
   color: #036AFF;
   cursor: pointer;
 }
 a.multimediaUpload {
   cursor: pointer;
   position: relative;
 }
 a.multimediaUpload > input[type="file"] {
   visibility: hidden;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0;
   padding: 0;
 }
 a.multimediaUpload > svg {
   padding: 0 6px;
   font-size: 20px;
   color: #8A8A8A;
   cursor: pointer;
 }
 
 div.previews {
   display: flex;
   overflow-x: auto;
   white-space: nowrap;
 }
 div.previews > span.multimedia {
   margin: 10px;
 }
 div.previews > span.multimedia > span.multimediaImage > img {
   max-height: 200px;
   max-width: 200px;
 }
 
 div.messageBox > div.imageGrid {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 5px;
 }
 div.messageBox span.multimedia > span.multimediaImage {
   min-height: initial;
   min-width: initial;
 }
 div.messageBox span.multimedia > span.multimediaImage > img {
   max-height: 600px;
 }
 
 div.imageGrid > span.multimedia {
   grid-column-end: span 3;
 }
 div.imageGrid > span.multimedia:first-child {
   margin-top: 0;
 }
 div.imageGrid > span.multimedia > span.multimediaImage {
   flex: 1;
 }
 div.imageGrid > span.multimedia > span.multimediaImage:after {
   content: "";
   display: block;
   padding-bottom: calc(min(600px, 100%));
 }
 div.imageGrid > span.multimedia > span.multimediaImage > img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 div.imageGrid > span.multimedia:nth-last-child(n+3):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n+3):first-child ~ * {
   grid-column-end: span 2;
 }
 div.imageGrid > span.multimedia:nth-last-child(n+4):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n+4):first-child ~ * {
   grid-column-end: span 3;
 }
 div.imageGrid > span.multimedia:nth-last-child(n+5):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n+5):first-child ~ * {
   grid-column-end: span 2;
 }
 
 div.inlineSidebarContent {
   flex-direction: row;
   display: flex;
   margin: 0 40px 0 20px;
   cursor: pointer;
 }
 div.inlineSidebar {
   flex-direction: row;
   display: flex;
   align-items: center;
 }
 div.inlineSidebarName {
   padding-Top: 1px;
   color: #666666;
   font-size: 16px;
   padding-left: 4px;
   padding-right: 2px;
 }
 div.unread {
   font-weight: bold;
 }
 div.centerContainer {
   justify-content: center;
 }
 div.sidebarMarginBottom {
   margin-bottom: 8px;
 }
 div.sidebarMarginTop {
   margin-top: 4px;
   margin-bottom: -8px;
 }
 svg.inlineSidebarIcon {
   color: #666666;
 }
 
 div.menuSidebarContent {
   position: absolute;
   z-index: 1;
   width: max-content;
   border-radius: 5px;
   overflow: visible;
 }
 div.menuSidebarContent ul {
   list-style: none;
 }
 div.menuSidebarContent li:not(:last-child) {
   border-bottom: 1px solid #DDDDDD;
 }
 div.menuSidebarContent:after {
   content: "";
   position: absolute;
   border-width: 7px;
   border-style: solid;
 }
 div.menuSidebarContent button {
   border: none;
   cursor: pointer;
   padding: 5px;
   font-size: 14px;
   outline: none;
   border-radius: 5px;
   background-color: black;
   color: white;
   text-decoration: underline;
 }
 div.menuSidebarContent button:hover {
   background-color: black;
   color: #129AFF;
 }
 
 div.menuSidebarExtraAreaTop:before {
   height: 15px;
   width: 55px;
   content: "";
   position: absolute;
   bottom: -15px;
 }
 div.menuSidebarExtraAreaTopRight:before {
   right: 0;
 }
 div.menuSidebarExtraAreaTopLeft:before {
   left: 0;
 }
 div.menuSidebarExtraArea:before {
   height: 30px;
   width: 20px;
   content: "";
   position: absolute;
 }
 div.menuSidebarExtraAreaRight:before {
   left: -20px;
 }
 div.menuSidebarExtraAreaLeft:before {
   right: -20px;
 }
 
 div.menuSidebarTopRightTooltip {
   bottom: 100%;
   margin-bottom: 1px;
   right: 0;
 }
 div.menuSidebarTopLeftTooltip {
   bottom: 100%;
   margin-bottom: 1px;
   left: 0;
 }
 div.menuSidebarLeftTooltip {
   top: 50%;
   right: 100%;
   margin-right: 7px;
 }
 div.menuSidebarRightTooltip {
   top: 50%;
   left: 100%;
   margin-left: 7px;
 }
diff --git a/web/chat/tooltip-utils.js b/web/chat/tooltip-utils.js
index c6a36e123..f1e2816e1 100644
--- a/web/chat/tooltip-utils.js
+++ b/web/chat/tooltip-utils.js
@@ -1,132 +1,132 @@
 // @flow
 
 import { calculateTextWidth } from '../utils/text-utils';
 import type { ItemAndContainerPositionInfo } from './position-types';
 
 export const tooltipPositions = Object.freeze({
   LEFT: 'left',
   RIGHT: 'right',
   BOTTOM_LEFT: 'bottom-left',
   BOTTOM_RIGHT: 'bottom-right',
   TOP_LEFT: 'top-left',
   TOP_RIGHT: 'top-right',
 });
 export type TooltipPosition = $Values<typeof tooltipPositions>;
 
 const sizeOfTooltipArrow = 10; // 7px arrow + 3px extra
 const tooltipHeight = 27; // 17px line-height + 10px padding
 const heightWithArrow = tooltipHeight + sizeOfTooltipArrow;
 const tooltipInnerPadding = 10;
 
 const font =
   '14px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", ' +
   '"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", ' +
-  '"Helvetica Neue", sans-serif';
+  '"Helvetica Neue", ui-sans-serif';
 
 type FindTooltipPositionArgs = {|
   +pointingToInfo: ItemAndContainerPositionInfo,
   +text: string,
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
   +layoutPosition: 'relative' | 'absolute',
 |};
 function findTooltipPosition({
   pointingToInfo,
   text,
   availablePositions,
   layoutPosition,
 }: FindTooltipPositionArgs) {
   const { itemPosition: pointingTo, containerPosition } = pointingToInfo;
   const {
     height: containerHeight,
     top: containerTop,
     width: containerWidth,
     left: containerLeft,
   } = containerPosition;
 
   const textWidth = calculateTextWidth(text, font);
   const width = textWidth + tooltipInnerPadding + sizeOfTooltipArrow;
 
   const absolutePositionedTooltip = layoutPosition === 'absolute';
 
   let canBeDisplayedInLeftPosition,
     canBeDisplayedInRightPosition,
     canBeDisplayedInTopPosition,
     canBeDisplayedInBottomPosition;
   if (absolutePositionedTooltip) {
     const pointingCenter = pointingTo.top + pointingTo.height / 2;
     const currentTop = Math.max(pointingTo.top, 0);
     const currentBottom = Math.min(pointingTo.bottom, containerHeight);
     const currentPointing = Math.max(
       Math.min(pointingCenter, containerHeight),
       0,
     );
     const canBeDisplayedSideways =
       currentPointing - tooltipHeight / 2 + containerTop >= 0 &&
       currentPointing + tooltipHeight / 2 + containerTop <= window.innerHeight;
 
     canBeDisplayedInLeftPosition =
       pointingTo.left - width + containerLeft >= 0 && canBeDisplayedSideways;
     canBeDisplayedInRightPosition =
       pointingTo.right + width + containerLeft <= window.innerWidth &&
       canBeDisplayedSideways;
     canBeDisplayedInTopPosition =
       currentTop - heightWithArrow + containerTop >= 0;
     canBeDisplayedInBottomPosition =
       currentBottom + heightWithArrow + containerTop <= window.innerHeight;
   } else {
     const canBeDisplayedSideways =
       pointingTo.top - (tooltipHeight - pointingTo.height) / 2 >= 0 &&
       pointingTo.bottom + (tooltipHeight - pointingTo.height) / 2 <=
         containerHeight;
     canBeDisplayedInLeftPosition =
       pointingTo.left - width >= 0 && canBeDisplayedSideways;
     canBeDisplayedInRightPosition =
       pointingTo.right + width <= containerWidth && canBeDisplayedSideways;
     canBeDisplayedInTopPosition = pointingTo.top - heightWithArrow >= 0;
     canBeDisplayedInBottomPosition =
       pointingTo.bottom + heightWithArrow <= containerHeight;
   }
 
   for (const tooltipPosition of availablePositions) {
     if (
       tooltipPosition === tooltipPositions.RIGHT &&
       canBeDisplayedInRightPosition
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.BOTTOM_RIGHT &&
       canBeDisplayedInBottomPosition
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.LEFT &&
       canBeDisplayedInLeftPosition
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.BOTTOM_LEFT &&
       canBeDisplayedInBottomPosition
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.TOP_LEFT &&
       canBeDisplayedInTopPosition
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.TOP_RIGHT &&
       canBeDisplayedInTopPosition
     ) {
       return tooltipPosition;
     }
   }
   return availablePositions[availablePositions.length - 1];
 }
 
 export {
   findTooltipPosition,
   sizeOfTooltipArrow,
   tooltipHeight,
   heightWithArrow,
   tooltipInnerPadding,
 };
diff --git a/web/style.css b/web/style.css
index 2b2298e40..7ad238720 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,643 +1,643 @@
 * {
   padding: 0;
   margin: 0;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 html {
   height: 100%;
 }
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
+    "Helvetica Neue", ui-sans-serif;
   background-image: url(../images/background.png);
   background-size: 3000px 2000px;
   background-attachment: fixed;
   height: 100%;
   overflow: hidden;
 }
 a {
   text-decoration: none;
   color: #2A5DB0;
 }
 img, iframe {
   display: block;
 }
 input[type='text'], input[type='password'], textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   -webkit-border-radius: 0;
   border: 1px solid #DDDDDD;
   border-radius: 1px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
+    "Helvetica Neue", ui-sans-serif;
 }
 input[type='submit'] {
   -webkit-appearance: none;
   -moz-appearance: none;
   -webkit-border-radius: 0;
 }
 input[type='submit']::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 :global(#react-root) {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
 header.header {
   background-image: url(../images/background.png);
   background-size: 3000px 2000px;
   background-attachment: fixed;
   z-index: 1;
 }
 div.main-header {
   font-family: 'Anaheim', sans-serif;
   height: 62px;
 }
 div.main-header > h1 {
   position: absolute;
   padding-top: 5px;
   padding-left: 16px;
   color: white;
   font-size: 38px;
 }
 ul.nav-bar {
   position: absolute;
   padding-left: 180px;
 }
 ul.nav-bar > li {
   display: inline-block;
   list-style-type: none;
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   text-transform: uppercase;
 }
 ul.nav-bar > li.current-tab {
   background-image: url(../images/background.png);
   background-size: 3000px 2000px;
   background-attachment: fixed;
   cursor: default;
 }
 ul.nav-bar > li > div {
   padding: 3px 20px 3px 20px;
 }
 ul.nav-bar > li > div > a {
   color: #FFFFFF;
 }
 ul.nav-bar > li.current-tab > div > a {
   color: #444444;
 }
 ul.nav-bar > li.current-tab > div {
   background-color: rgba(255,255,255,0.84);
   padding: 18px 20px 19px 20px;
   height: 25px;
 }
 svg.nav-bar-icon {
   padding-right: 8px;
   font-size: 20px;
 }
 div.chatBadge {
   display: inline-block;
   box-sizing: border-box;
   width: 25px;
   height: 25px;
   margin-left: 8px;
   color: white;
   background-color: red;
   border-radius: 13px;
   font-size: 18px;
   text-align: center;
 }
 
 div.main-content-container {
   position: relative;
   height: calc(100% - 62px);
 }
 div.main-content {
   background-color: rgba(255,255,255,0.84);
   height: 100%;
 }
 
 div.upper-right {
   position: absolute;
   top: 0;
   right: 0;
   padding: 15px 16px;
 }
 span.loading-indicator-loading {
   display: inline-block;
 }
 @keyframes loading-indicator-loading {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
 }
 span.loading-indicator-loading {
   display: inline-block;
 }
 span.loading-indicator-loading-medium:after {
   content: " ";
   display: block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   border: 3px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-loading-large:after {
   content: " ";
   display: block;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   border: 3px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-loading-small:after {
   content: " ";
   display: block;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   border: 2px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-black:after {
   border-color: #000 transparent #000 transparent;
 }
 span.loading-indicator-error {
   font-weight: bold;
   color: white;
   line-height: 0;
 }
 span.loading-indicator-error-black {
   font-weight: bold;
   color: red;
   line-height: 0;
 }
 
 div.account-bar {
   background-color: #F8F8F8;
   border: 1px solid #C8C8C8;
   border-radius: 5px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   padding: 0 6px;
   cursor: pointer;
   float: right;
 }
 div.account-button {
   padding: 3px 4px 3px 8px;
 }
 div.account-button > span {
   font-size: 16px;
 }
 div.account-menu {
   outline: none;
 }
 div.account-menu > div {
   border-top: 1px solid #C8C8C8;
   padding: 3px 4px 3px 8px;
 }
 span.username {
   display: inline-block;
   color: #2A5DB0;
   cursor: pointer;
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 200px;
   vertical-align: bottom;
 }
 svg.account-caret {
   padding-left: 6px;
   fill: #2A5DB0;
   cursor: pointer;
   height: 10px;
   width: 10px;
 }
 
 div.modal-overlay {
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   z-index: 4;
   width: 100%;
   background-color: rgba(0,0,0,0.4);
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: auto;
 }
 div.resizable-modal-overlay {
   min-height: 60px;
 }
 div.small-modal-overlay {
   padding-top: 100px;
 }
 div.large-modal-overlay {
   padding-top: 50px;
 }
 div.modal-container {
   background-image: url(../images/background.png);
   background-size: 3000px 2000px;
   max-width: 330px;
   border-radius: 15px;
   display: flex;
   min-height: 0;
   max-height: 500px;
 }
 div.large-modal-container {
   max-width: 500px;
 }
 div.modal {
   position: relative;
   box-shadow: 0 4px 20px rgba(0, 0, 0, .3),
     0 0 0 1px rgba(0, 0, 0, .1);
   background-color: rgba(255,255,255,0.61);
   border-radius: 15px;
   flex: 1;
   display: flex;
   flex-direction: column;
   width: 330px;
 }
 div.large-modal-container div.modal {
   width: 500px;
 }
 div.fixed-height-modal {
   height: 100%;
 }
 span.modal-close {
   float: right;
   font-size: 32px;
   font-weight: 300;
   line-height: 30px;
 }
 span.modal-close:hover {
   color: black;
   cursor: pointer;
 }
 div.modal-header {
   padding: 8px 15px;
   font-family: 'Open Sans', sans-serif;
 }
 div.modal-header > h2 {
   font-size: 22px;
   font-weight: 300;
 }
 div.modal-body {
   padding: 6px 6px;
   width: 100%;
   box-sizing: border-box;
   background-color: white;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 div.resized-modal-body {
   min-height: 250px;
 }
 div.modal-body p {
   padding: 1px 3px 4px 3px;
   font-size: 14px;
   text-align: center;
 }
 div.modal-body p.form-pre-footer {
   padding-top: 5px;
   font-size: 12px;
   font-style: italic;
 }
 div.modal-body input, div.modal-body textarea {
   margin: 3px;
 }
 div.modal-body input[type='text'],
 div.modal-body input[type='password'],
 div.modal-body textarea {
   font-size: 14px;
   padding: 1px;
   width: 175px;
 }
 div.large-modal-container div.modal-body input[type='text'],
 div.large-modal-container div.modal-body input[type='password'],
 div.large-modal-container div.modal-body textarea {
   width: 275px;
 }
 div.modal-body input[type='submit'] {
   padding: 3px 9px;
   font-size: 12px;
   margin-right: 3px;
   border-radius: 3px;
   border: 1px solid #C8C8C8;
   background-color: #F8F8F8;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   color: #444444;
   margin-top: 1px;
   cursor: pointer;
 }
 div.modal-body input[type='submit']:hover {
   text-decoration: underline;
 }
 div.modal-body input[type='submit']:disabled {
   cursor: initial;
   text-decoration: none;
   color: #999999;
 }
 
 div.modal-body div.form-title {
   display: inline-block;
   text-align: right;
   padding-right: 5px;
   padding-top: 5px;
   font-size: 14px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   vertical-align: top;
   width: 110px;
 }
 div.large-modal-container div.modal-body div.form-title {
   width: 140px;
 }
 div.modal-body div.form-content {
   display: inline-block;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
+    "Helvetica Neue", ui-sans-serif;
   font-size: 15px;
 }
 div.modal-body div.form-subtitle {
   font-size: 12px;
   padding-left: 4px;
   font-style: italic;
 }
 
 div.form-enum-selector {
   display: inline-block;
   padding-bottom: 4px;
 }
 div.form-enum-selector > div.form-enum-container {
   padding-top: 5px;
 }
 div.form-enum-selector > div.form-enum-container > input {
   vertical-align: top;
   margin-top: 4px;
 }
 div.form-enum-selector div.form-enum-option {
   font-weight: bold;
   display: inline-block;
   font-size: 15px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   padding-left: 3px;
 }
 div.form-enum-selector span.form-enum-description {
   display: block;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
+    "Helvetica Neue", ui-sans-serif;
   font-weight: normal;
   font-size: 13px;
   max-width: 260px;
   color: gray;
 }
 div.color-title {
   margin-top: 4px;
 }
 
 div.modal-body div.form-footer {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   align-items: start;
   margin-top: 5px;
   border-top: 2px solid #EFEFEF;
   min-height: 26px;
   padding: 7px 4px 4px 0;
 }
 div.modal-body div.form-footer div.modal-form-error {
   font-size: 12px;
   color: red;
   font-style: italic;
   padding-left: 6px;
   align-self: center;
 }
 div.modal-body div.form-footer div.modal-form-error ol {
   padding-left: 20px;
 }
 
 div.form-text {
   display: flex;
   align-items: baseline;
 }
 div.form-text > div.form-title {
   vertical-align: initial;
   flex-shrink: 0;
 }
 div.form-text > div.form-content {
   margin-left: 3px;
   margin-bottom: 3px;
   word-break: break-word;
 }
 
 div.form-text > div.form-float-title {
   float: left;
   text-align: right;
   padding-right: 5px;
   font-size: 14px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   width: 110px;
 }
 div.form-text > div.form-float-content {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 14px;
   padding: 1px 20px 3px 4px;
   margin-top: 5px;
 }
 
 .verified-status-true {
   color: green;
 }
 .verified-status-false {
   color: red;
 }
 
 .hidden {
   display: none;
 }
 .italic {
   font-style: italic;
 }
 
 div.edit-thread-color-container {
   margin-top: -5px;
 }
 div.form-textarea-container {
   margin-top: 1px;
 }
 div.edit-thread-privacy-container {
   margin-bottom: 6px;
 }
 div.edit-thread-account-password {
   border-top: 2px solid #EFEFEF;
   padding-top: 4px;
   margin-top: 2px;
 }
 div.user-settings-current-password {
   border-top: 2px solid #EFEFEF;
   padding-top: 4px;
   margin-top: 5px;
 }
 div.modal-body p.confirm-account-password {
   padding: 3px 0px 5px 0px;
   font-style: italic;
   font-size: 13px;
   color: #777777;
 }
 ul.tab-panel {
   background-color: #F4F4F4;
   padding-left: 10px;
   padding-top: 5px;
 }
 ul.tab-panel > li {
   display: inline-block;
   list-style-type: none;
   font-family: 'Open Sans', sans-serif;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   padding: 3px 10px 3px 10px;
 }
 ul.tab-panel > li.current-tab {
   background-color: white;
   border-radius: 5px 5px 0 0;
   cursor: default;
 }
 ul.tab-panel > li > a {
   color: #555555;
 }
 ul.tab-panel > li.current-tab > a {
   color: #123a7b;
   cursor: default;
 }
 ul.tab-panel > li.delete-tab > a {
   color: #ff0000 !important;
 }
 
 div.new-thread-privacy-container {
   margin-bottom: 3px;
   margin-top: -6px;
 }
 
 span.page-loading {
   margin-top: 5px;
   margin-right: 12px;
   float: left;
 }
 span.page-error {
   margin: 15px;
   font-size: 42px;
   float: left;
   color: red;
 }
 
 div.color-picker-container {
   outline: none;
   position: relative;
 }
 div.color-picker-button {
   margin: 6px 3px;
   overflow: hidden;
   cursor: pointer;
   padding: 4px;
   display: inline-block;
   border: solid 1px darkgray;
   background: #eee;
   color: #333;
   vertical-align: middle;
   border-radius: 3px;
 }
 div.color-picker-preview {
   width: 25px;
   height: 16px;
   border: solid 1px #222;
   margin-right: 5px;
   float: left;
   z-index: 0;
 }
 div.color-picker-down-symbol {
   padding: 1px 0;
   height: 16px;
   line-height: 16px;
   float: left;
   font-size: 10px;
 }
 div.color-picker-selector {
   position: absolute;
   left: 4px;
   top: 34px;
 }
 
 div.intro-modal {
   padding: 10px 21px 12px 21px;
   border-radius: 5px;
   border: 1px solid #C8C8C8;
   background-color: #F8F8F8;
   width: 310px;
   position: fixed;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
+    "Helvetica Neue", ui-sans-serif;
   margin-top: 100px;
   box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.1);
 }
 
 @media
   only screen and (-webkit-min-device-pixel-ratio: 2.0),
   only screen and (min--moz-device-pixel-ratio: 2.0),
   only screen and (-o-min-device-pixel-ratio: 2.0/1),
   only screen and (min-device-pixel-ratio: 2.0),
   only screen and (min-resolution: 320dpi),
   only screen and (min-resolution: 2.0dppx) {
   header.header,
   header.main-header,
   div.splash-header-container,
   div.splash-top-container,
   div.splash-bottom,
   div.modal-container,
   ul.nav-bar > li.current-tab,
   div.calendar-filters-container {
     background-image: url(../images/background@2x.png);
   }
 }
 
 @media (hover: none) {
   div.splash-header-container, div.splash-top-container, div.splash-bottom {
     background-attachment: initial;
   }
 }