Progress

app/javascript/styles/global.css

@@ -89,12 +89,13 @@ body {
 
 .whiteSpaceNoWrap { white-space: nowrap; }
 
-.outlineNone { outline: none; }
+.outlineFocusBrand:focus {outline: 2px solid #21cf7a; }
 .resizeNone { resize: none; }
 
 .circle { border-radius: 9999px; }
 .radiusSmall { border-radius: 4px; }
 
+.borderColorSubtle2 { border-color: #e5e9ed; }
 .borderColorSubtle { border-color: #ECECED; }
 .borderColorWhite { border-color: #fff; }
 .borderColorBrand { border-color: #21cf7a; }
@@ -133,6 +134,7 @@ body {
 .colorSubtle { color: #666; }
 .colorBrand { color: #21cf7a }
 .fillColorBlack { fill: #000; }
+.fillColorWhite { fill: #fff; }
 .fillColorBrand { fill: #21cf7a; }
 .fillColorSubtle { fill: #666; }
 
@@ -161,7 +163,7 @@ body {
 .height122PX { height: 122px; }
 
 .width1015PX { width: 1015px; }
-.width670PX { width: 670px; }
+.width660PX { width: 660px; }
 .width325PX { width: 325px; }
 .width250PX { width: 250px; }
 .width100PC { width: 100%; }
@@ -201,6 +203,7 @@ body {
 
 .marginLeft5PX { margin-left: 5px; }
 .marginRight2PX { margin-right: 2px; }
+.marginRight5PX { margin-right: 5px; }
 
 .marginVertical10PX {
   margin-top: 10px;
@@ -221,6 +224,8 @@ body {
   padding-left: 15px;
   padding-right: 15px;
 }
+
+.paddingLeft15PX { padding-left: 15px; }
 .paddingRight15PX { padding-right: 15px; }
 
 .paddingVertical5PX {
@@ -243,6 +248,11 @@ body {
   padding-bottom: 2px;
 }
 
+.paddingHorizontal5PX {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
 .paddingHorizontal10PX {
   padding-left: 10px;
   padding-right: 10px;